index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. <template>
  2. <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
  3. <view class="main">
  4. <view class="top" v-if="list.length !=0">
  5. <view class="text_1">
  6. <checkbox class="checkbox" @click="selectAll(false)" :checked="isAll">全选</checkbox>
  7. </view>
  8. <view class="text_2" v-if="num==0" @click="edit(1)">编辑</view>
  9. <view class="text_2" v-if="num==1" @click="edit(0)">完成</view>
  10. </view>
  11. <view class="one" v-if="!user._id">
  12. <view class="logo"><text class="iconfont icon-geren2"></text></view>
  13. <view class="one_1">您还没有登录</view>
  14. <view class="btn">
  15. <button type="primary" size="mini" @click="toCommon('/pages/login/index')">去登录</button>
  16. </view>
  17. </view>
  18. <view class="one" v-if="list.length==0&&user._id">
  19. <view class="logo"><text class="iconfont icon-gouwuche"></text></view>
  20. <view class="one_1">购物车空空如也~</view>
  21. <view class="btn">
  22. <button type="primary" size="mini" @click="toCommon('/pages/home/index')">去逛逛</button>
  23. </view>
  24. </view>
  25. <view class="two" v-if="list.length !=0">
  26. <scroll-view scroll-y="true" class="scroll-view">
  27. <view class="list-scroll-view">
  28. <checkbox-group name="checkbox" @change="marketChange">
  29. <view class="lists" v-for="(item, index) in list" :key="index">
  30. <view class="list">
  31. <view class="title">
  32. <checkbox :value="item.shop" :checked="item.check">
  33. <text class="iconfont icon-shangdian"></text>
  34. {{item.shop_name}}
  35. </checkbox>
  36. </view>
  37. <checkbox-group name="checkbox" @change="goodsChange">
  38. <view class="content" v-for="gs in item.goods" :key="gs.goodsSpec_id">
  39. <view class="box">
  40. <checkbox :value="gs.goodsSpec_id" :checked="gs.check" />
  41. </view>
  42. <view class="img">
  43. <image :src="getFile(gs)"></image>
  44. </view>
  45. <view class=" one_1" v-if="num==0" @click="toCommon('/pagesHome/order/detail',gs)">
  46. <view class="name">{{gs.goods_name}}</view>
  47. <view class="info">
  48. <view class="title_1" v-if="gs.goodsSpec_name">
  49. <text>规格:{{gs.goodsSpec_name}}</text>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="money" v-if="num==0">
  54. <view>¥{{gs.money}}</view>
  55. <view>x{{gs.num}}</view>
  56. </view>
  57. <view class="num" v-if="num==1">
  58. <uni-number-box @change="changeValue(gs)" name="num" value="gs" :min="1" v-model="gs.num" />
  59. </view>
  60. <view class="del" v-if="num==1">
  61. <text class="iconfont icon-del-copy" @click="toDel(gs)"></text>
  62. </view>
  63. </view>
  64. </checkbox-group>
  65. </view>
  66. </view>
  67. </checkbox-group>
  68. </view>
  69. </scroll-view>
  70. </view>
  71. <view class="foot" v-if="list.length !=0">
  72. <view class="total">总价:<text>¥{{totalMoney}}(不含运费)</text></view>
  73. <view class="btn" v-if="hasCheck()">
  74. <button type="primary" size="mini" @click="toSettle()" v-if="num==0">提交订单</button>
  75. <button type="primary" size="mini" @click="toDel()" v-if="num==1">删除</button>
  76. </view>
  77. </view>
  78. </view>
  79. </mobile-frame>
  80. </template>
  81. <script>
  82. export default {
  83. data() {
  84. return {
  85. frameStyle: {
  86. useBar: true
  87. },
  88. // 用户
  89. user: {},
  90. // 购物车列表
  91. list: [],
  92. // 全选
  93. isAll: false,
  94. // 编辑/完成按钮传的数字
  95. num: 0,
  96. // 总额
  97. totalMoney: 0,
  98. };
  99. },
  100. onLoad: function() {
  101. const that = this;
  102. // 监听登录
  103. that.watchLogin();
  104. },
  105. methods: {
  106. // 公共跳转
  107. toCommon(route, e) {
  108. uni.navigateTo({
  109. url: `${route}?id=${e && e.goods_id}`
  110. })
  111. },
  112. // 监听登录
  113. watchLogin() {
  114. const that = this;
  115. uni.getStorage({
  116. key: 'token',
  117. success: (res) => {
  118. let user = that.$jwt(res.data);
  119. if (user) {
  120. that.$set(that, `user`, user)
  121. that.searchMarket();
  122. }
  123. },
  124. fail: (err) => {}
  125. })
  126. },
  127. // 查询购物车信息
  128. async searchMarket() {
  129. const that = this;
  130. const res = await that.$api(`/cart/selfCart`, 'GET', {
  131. customer: that.user.id
  132. });
  133. if (res.errcode == '0') {
  134. that.$set(that, `list`, res.data)
  135. }
  136. },
  137. // 转换金额
  138. showMoney(money) {
  139. const that = this;
  140. let moneys = `${money}`.split(".");
  141. if (moneys.length == 1) {
  142. money = money + ".00";
  143. } else if (moneys.length == 2) {
  144. money = money + "0";
  145. }
  146. return money;
  147. },
  148. // 编辑
  149. edit(num) {
  150. const that = this;
  151. that.$set(that, `num`, num)
  152. },
  153. //全选
  154. selectAll(e) {
  155. const that = this;
  156. const list = that.list;
  157. const isAll = that.isAll;
  158. let data = [];
  159. for (const val of list) {
  160. let a = isAll ? false : true;
  161. val.check = a;
  162. for (let s of val.goods) {
  163. s.check = a
  164. }
  165. data.push(val);
  166. }
  167. that.$set(that, `list`, data)
  168. // 计算总额
  169. that.countMoney();
  170. // 赋值是否全选
  171. that.$set(that, `isAll`, isAll ? false : true)
  172. },
  173. // 选择店铺
  174. marketChange(e) {
  175. const that = this;
  176. const list = this.list;
  177. const {
  178. value
  179. } = e.detail;
  180. for (const p1 of list) {
  181. let p2 = value.find((i) => i == p1.shop);
  182. let a = p2 ? true : false;
  183. p1.check = a;
  184. for (let s of p1.goods) {
  185. s.check = a
  186. }
  187. }
  188. that.$set(that, `list`, list);
  189. that.marketAllChange();
  190. // 计算总额
  191. that.countMoney();
  192. },
  193. //店铺全部选择true,全选自动选择,
  194. marketAllChange() {
  195. const that = this;
  196. let list = that.list;
  197. for (let val of list) {
  198. if (val.check == true) {
  199. that.$set(that, `isAll`, true)
  200. } else {
  201. that.$set(that, `isAll`, false)
  202. }
  203. }
  204. that.$set(that, `list`, list)
  205. // 计算总额
  206. that.countMoney();
  207. },
  208. //选择商品
  209. goodsChange(e) {
  210. const that = this;
  211. let list = that.list;
  212. const {
  213. value
  214. } = e.detail;
  215. let shop = list.find(f => f.goods.find(i => value.find(s => s == i.goodsSpec_id)))
  216. if (shop) {
  217. for (let val of shop.goods) {
  218. let p2 = value.find((i) => i == val.goodsSpec_id);
  219. if (p2) val.check = true;
  220. else val.check = false;
  221. }
  222. } else {
  223. list = list.map(i => {
  224. i.goods = i.goods.map(g => ({
  225. ...g,
  226. check: false
  227. }))
  228. return i;
  229. })
  230. }
  231. that.$set(that, `list`, list)
  232. that.goodsAllChange();
  233. // 计算总额
  234. that.countMoney();
  235. },
  236. //商品全部选择true,店铺自动选择,
  237. // 所有店铺为true,则全选为true
  238. goodsAllChange() {
  239. const that = this;
  240. let list = that.list;
  241. list = list.map(i => {
  242. const isAllSelect = i.goods.every(f => f.check);
  243. if (isAllSelect) i.check = true;
  244. else i.check = false;
  245. return i;
  246. })
  247. const allSelect = list.every(e => e.check)
  248. if (allSelect) this.$set(this, `isAll`, true)
  249. else this.$set(this, `isAll`, false)
  250. // 计算总额
  251. that.countMoney();
  252. },
  253. // 加减商品数量
  254. async changeValue(value) {
  255. const that = this;
  256. this.$nextTick(async () => {
  257. const {
  258. goodsSpec_id: goodsSpecId,
  259. num,
  260. cart_id: cartId
  261. } = value
  262. const res = await that.$api(`/cart/checkGoodsNum`, 'GET', {
  263. cartId,
  264. goodsSpecId,
  265. num
  266. });
  267. if (res.errcode === 0) {
  268. const {
  269. enough,
  270. total
  271. } = res.data
  272. if (!enough) {
  273. uni.showToast({
  274. title: `库存最大为${total}`,
  275. icon: 'error',
  276. });
  277. // 将该商品的库存量修改为最大值
  278. value.num = total;
  279. }
  280. }
  281. // 计算总额
  282. that.countMoney();
  283. })
  284. },
  285. // 删除, 接口,购物车删除,然后将该数据移除
  286. async toDel(e) {
  287. let list = this.list;
  288. uni.showModal({
  289. title: '提示',
  290. content: '请选择要删除的商品',
  291. success: async (res) => {
  292. if (!res.confirm) return
  293. if (e?.cart_id) {
  294. const result = await this.$api(`/cart/${e.cart_id}`, 'Delete');
  295. if (result.errcode === 0) {
  296. list = list.map(i => ({
  297. ...i,
  298. goods: i.goods.filter(f => f.cart_id !== e.cart_id)
  299. }))
  300. this.$set(this, `list`, list);
  301. // 检查店铺内是否还有商品
  302. this.checkShopGoodsExist();
  303. // 计算总额
  304. this.countMoney();
  305. }
  306. } else {
  307. const goodsList = list.map(i => i.goods).flat();
  308. const cartIds = goodsList.filter(i => i.check).map(i => i.cart_id)
  309. for (let val of cartIds) {
  310. const result = await this.$api(`/cart/${val}`, 'Delete');
  311. if (result.errcode === 0) {
  312. list = list.map(i => ({
  313. ...i,
  314. goods: i.goods.filter(f => f.cart_id !== val)
  315. }))
  316. this.$set(this, `list`, list);
  317. // 检查店铺内是否还有商品
  318. this.checkShopGoodsExist();
  319. // 计算总额
  320. this.countMoney();
  321. }
  322. }
  323. }
  324. }
  325. });
  326. },
  327. //检查店铺内是否还有商品
  328. checkShopGoodsExist() {
  329. let list = this.list;
  330. list = list.filter(f => f.goods && f.goods.length > 0)
  331. this.$set(this, `list`, list);
  332. },
  333. // 计算总额
  334. countMoney() {
  335. const that = this;
  336. const list = this.list;
  337. let totalMoney = 0;
  338. // 渲染结束执行下面方法
  339. that.$nextTick(() => {
  340. for (const val of list) {
  341. for (let s of val.goods) {
  342. if (s.check == true) {
  343. let total = Number(s.money) * Number(s.num);
  344. totalMoney += Number(total);
  345. }
  346. }
  347. }
  348. that.$set(that, `totalMoney`, totalMoney.toFixed(2))
  349. })
  350. },
  351. getFile(data) {
  352. const file = data.file;
  353. if (!file) return '';
  354. if (file.length && file.length > 0) return file[0].url
  355. },
  356. // 去结算
  357. async toSettle() {
  358. // 将选中的购物车放到数组中,传回服务端进行检查.然后拿着key去订单页请求数据
  359. const goodsList = this.list.map(i => i.goods).flat();
  360. const cartIds = goodsList.filter(i => i.check).map(i => i.cart_id)
  361. const res = await this.$api(`/util/checkCartBuy`, 'POST', {
  362. cartIds
  363. });
  364. if (res.errcode == '0') {
  365. const {
  366. data
  367. } = res
  368. if (data.result) {
  369. const key = data.key;
  370. uni.navigateTo({
  371. url: `/pagesHome/order/order?key=${key}`
  372. })
  373. }
  374. }
  375. },
  376. // 是否选中商品,控制提交订单按钮
  377. hasCheck() {
  378. return this.list.some(e => e.goods.some(eg => eg.check))
  379. },
  380. toPath(e) {
  381. if (e && e.route && e.type == '0') {
  382. uni.redirectTo({
  383. url: `/${e.route}`
  384. })
  385. } else {
  386. uni.navigateTo({
  387. url: `/${e.route}`
  388. })
  389. }
  390. }
  391. }
  392. }
  393. </script>
  394. <style lang="scss">
  395. .main {
  396. display: flex;
  397. flex-direction: column;
  398. width: 100vw;
  399. height: 92vh;
  400. background-color: var(--footColor);
  401. .top {
  402. display: flex;
  403. flex-direction: row;
  404. background-color: var(--mainColor);
  405. height: 35px;
  406. margin: 0 0 4px 0;
  407. padding: 5px 4vw;
  408. .text_1 {
  409. flex-grow: 1;
  410. line-height: 30px;
  411. }
  412. .text_2 {
  413. line-height: 35px;
  414. }
  415. }
  416. .one {
  417. text-align: center;
  418. margin: 2vw 0;
  419. .logo {
  420. margin: 10vw 0 2vw 0;
  421. .iconfont {
  422. font-size: 35vw;
  423. }
  424. }
  425. .one_1 {
  426. margin: 3vw 0;
  427. }
  428. button {
  429. background-color: var(--ff0Color);
  430. }
  431. }
  432. .two {
  433. position: relative;
  434. flex-grow: 1;
  435. margin: 0 2vw;
  436. .list {
  437. background-color: var(--mainColor);
  438. margin: 2vw 0 2vw 0;
  439. padding: 2vw 3vw;
  440. border-radius: 4px;
  441. .title {
  442. border-bottom: 1px solid var(--fcColor);
  443. padding: 0 0 2vw 0;
  444. font-size: var(--font18Size);
  445. text {
  446. margin: 0 1vw;
  447. }
  448. }
  449. .content {
  450. display: flex;
  451. flex-direction: row;
  452. padding: 3vw 0;
  453. font-size: var(--font16Size);
  454. border-bottom: 1px dashed var(--fcColor);
  455. .box {
  456. line-height: 20vw;
  457. }
  458. .img {
  459. width: 20vw;
  460. height: 20vw;
  461. border-radius: 2vw;
  462. border: 1px solid var(--fcColor);
  463. image {
  464. width: 20vw;
  465. height: 20vw;
  466. }
  467. }
  468. .one_1 {
  469. margin: 2.5vw;
  470. flex-grow: 1;
  471. .info {
  472. width: 100%;
  473. display: flex;
  474. flex-direction: row;
  475. .title_1 {
  476. font-size: 12px;
  477. color: #666;
  478. margin-top: 10px;
  479. text {
  480. background-color: #eee;
  481. padding: 5px;
  482. }
  483. }
  484. }
  485. }
  486. .money {
  487. margin-top: 2vw;
  488. text-align: right;
  489. flex-grow: 1;
  490. }
  491. .num {
  492. margin: 6vw 4vw;
  493. font-size: 20px;
  494. }
  495. .del {
  496. margin: 6vw 0;
  497. text-align: right;
  498. flex-grow: 1;
  499. }
  500. }
  501. }
  502. }
  503. .foot {
  504. background-color: var(--fffColor);
  505. display: flex;
  506. flex-direction: row;
  507. justify-content: space-between;
  508. height: 44px;
  509. padding: 0 0 0 6vw;
  510. border-right: 1px solid var(--f99Color);
  511. .total {
  512. flex-grow: 1;
  513. display: flex;
  514. align-content: flex-end;
  515. line-height: 40px;
  516. text {
  517. color: var(--ff0Color);
  518. }
  519. }
  520. .btn {
  521. button {
  522. width: 30vw;
  523. height: 44px;
  524. line-height: 44px;
  525. border-radius: 0px;
  526. background-color: var(--ff0Color);
  527. text-align: center;
  528. font-weight: normal;
  529. font-size: var(--font15Size);
  530. color: var(--fffColor);
  531. }
  532. }
  533. }
  534. }
  535. .scroll-view {
  536. position: absolute;
  537. top: 0;
  538. left: 0;
  539. right: 0;
  540. bottom: 0;
  541. .list-scroll-view {
  542. display: flex;
  543. flex-direction: column;
  544. }
  545. }
  546. // 复选框样式
  547. checkbox .wx-checkbox-input {
  548. width: 40rpx;
  549. height: 40rpx;
  550. border-radius: 50%;
  551. border-color: var(--f99Color);
  552. background-color: var(--mainColor);
  553. }
  554. // 复选框选中样式
  555. checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  556. border-color: var(--ff0Color);
  557. background-color: var(--ff0Color);
  558. }
  559. // 复选框选中之后对号的样式
  560. checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  561. color: var(--fffColor);
  562. }
  563. </style>