index.vue 15 KB

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