shop_cart2.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955
  1. <template>
  2. <view class="shop-car1">
  3. <view v-if="list.length" class="list">
  4. <view class="shopcar-item" v-for="(item, index) in list" :key="index">
  5. <view class="name" @tap="chooseGood(!item.choosed, index)">
  6. <view class="left">
  7. <text v-if="item.choosed" class="cuIcon-roundcheckfill"></text>
  8. <text v-else class="cuIcon-round"></text>
  9. <view class="name ellipsis">{{ item.name }}</view>
  10. </view>
  11. <view class="right">
  12. <view class="right-box">
  13. <view style="margin-right: 40rpx;">
  14. <text class="one">数量:</text>
  15. <text class="two">{{item.goods_num}}</text>
  16. </view>
  17. <view class="">
  18. <text class="one">金额:</text>
  19. <text class="two">¥{{item.goods_money}}</text>
  20. </view>
  21. <!-- {{numChange}} -->
  22. </view>
  23. <text class="cuIcon-delete" @click.stop="deleteGood(index)"></text>
  24. </view>
  25. </view>
  26. <view class="sizeItem" v-for="(sizeItem, sizeIndex) in item.size" :key="sizeIndex" v-if="item.cart[sizeIndex]"
  27. @tap="chooseSize(!item.sizeChoosed[sizeIndex], index, sizeIndex,item.cart[sizeIndex])"
  28. >
  29. <text v-if="item.sizeChoosed[sizeIndex]" class="cuIcon-roundcheckfill"></text>
  30. <text v-else class="cuIcon-round"></text>
  31. <image :src="item.main_img"></image>
  32. <view class="info">
  33. <text>尺码:{{ sizeItem }}</text>
  34. <text class="basecolor">¥{{ item.money }}/{{ item.unit }}</text>
  35. </view>
  36. <NumInput :value="item.cart[sizeIndex]" :args="[index, sizeIndex]" @change="numChange" />
  37. </view>
  38. </view>
  39. <view class="gift_container" v-if="giftList.length > 0">
  40. <view class="fix_title">
  41. <text class="cuIcon-roundcheckfill"></text>
  42. <text class="title">赠品信息</text>
  43. </view>
  44. <div class="gift_list">
  45. <view class="gift_item" v-for="item in giftList" :key="item.id" v-show="Math.floor(giftNum / item.num) > 0">
  46. <template v-if="giftNum >= item.limit_num">
  47. <image :src="item.img" class="gift_img"></image>
  48. <view class="right">
  49. <view class="fixed">赠品名称:</view>
  50. <view class="bottom">
  51. <view class="name">{{item.name}}</view>
  52. <view class="num">数量:{{ Math.floor(giftNum / item.num) }}</view>
  53. </view>
  54. </view>
  55. </template>
  56. </view>
  57. </div>
  58. </view>
  59. </view>
  60. <view v-else class="none">
  61. <image src="../../static/icon/emptyshopcar.png"></image>
  62. <view class="big-btn" @tap="goToBuy">去下单</view>
  63. </view>
  64. <view class="buy">
  65. <view class="all" @tap="chooseAll(!choosedAll)">
  66. <text v-if="choosedAll" class="cuIcon-roundcheckfill"></text>
  67. <text v-else class="cuIcon-round"></text>
  68. <text>全选</text>
  69. </view>
  70. <view class="total">总计: <text>{{ '¥ ' + choosedPrice + '' }}</text></view>
  71. <view class="pay" @tap="confirm">结算({{ ' ' + choosedNum + ' ' }})</view>
  72. </view>
  73. </view>
  74. </template>
  75. <script>
  76. import { deepClone } from '@/common/util/index.js'
  77. import { _API_GoodList } from '@/apis/good.js'
  78. import { _API_GetallGift } from '@/apis/order.js'
  79. import NumInput from '@/components/public/num-input.vue'
  80. function sum(arr) {
  81. var len = arr.length;
  82. if(len == 0){
  83. return 0;
  84. } else if (len == 1){
  85. return arr[0];
  86. } else {
  87. return arr[0] + sum(arr.slice(1));
  88. }
  89. }
  90. export default {
  91. components: { NumInput },
  92. data() {
  93. return {
  94. giftList: []
  95. };
  96. },
  97. computed: {
  98. list() { return this.$store.state.cart.list },
  99. choosedAll() { return this.$store.getters['cart/choosedAll'] },
  100. choosedNum() { return this.$store.getters['cart/choosedNum'] },
  101. choosedPrice() { return this.$store.getters['cart/choosedPrice'] },
  102. giftNum() { return this.$store.getters['cart/giftNum'] },
  103. },
  104. // async onShow() {
  105. // uni.loading()
  106. // const { data: { list } } = await _API_GoodList()
  107. // for(let i = this.list.length - 1; i >= 0; i --) { // 遍历购物车
  108. // const inCartGood = list.find(listItem => listItem.attr_id == this.list[i].attr_id)
  109. // if (inCartGood) { // 如果购物车的商品存在于商品列表中
  110. // for(let j = this.list[i].size_id.length - 1; j >= 0; j --) {
  111. // const cartSize = this.list[i].size_id[j]
  112. // const inCartSize = inCartGood.size_id.find(e => e == cartSize)
  113. // console.log(inCartSize)
  114. // // // if (inCartSize) {
  115. // // // console.log(inCartSize)
  116. // // // } else {
  117. // // // console.log(inCartSize)
  118. // // // }
  119. // // console.log(inCartSize)
  120. // }
  121. // } else { // 不存直接删除
  122. // this.$store.commit('cart/DELETE', i)
  123. // }
  124. // }
  125. // },
  126. onShow() {
  127. console.log(this.$store.state.cart.list)
  128. const cartinfo = this.$store.state.cart.list
  129. for(var i=0;i<cartinfo.length;i++) {
  130. // cartinfo[i].goods_num= sum(cartinfo[i].cart)
  131. cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  132. let cart = cartinfo[i].cart
  133. let sizeChoosed = cartinfo[i].sizeChoosed
  134. let options = []
  135. for(var e=0;e<cart.length;e++){
  136. var a={};
  137. a.num=cart[e];
  138. a.sizeChoosed=sizeChoosed[e];
  139. options.push(a);
  140. }
  141. let newArr=options.filter((item,key)=>{return item.num!=0 && item.sizeChoosed!=false})
  142. cartinfo[i].options = newArr
  143. cartinfo[i].goods_num = newArr.reduce((p,e)=>p+e.num,0);
  144. cartinfo[i].goods_money = cartinfo[i].goods_num * cartinfo[i].money
  145. }
  146. console.log(cartinfo)
  147. // if (this.$store.getters['cart/shopcarNum']) {
  148. // // uni.setTabBarBadge({ index: 1, text: this.$store.getters['cart/shopcarNum'] + '' })
  149. // } else {
  150. // uni.removeTabBarBadge({ index: 1 })
  151. // }
  152. this.getAllGift()
  153. },
  154. methods: {
  155. getAllGift() {
  156. this.giftList = []
  157. _API_GetallGift().then(res => {
  158. if(res.code === 200) {
  159. this.giftList = res.data.list
  160. }
  161. })
  162. },
  163. numChange(value, index, sizeIndex) { // 购物车数量发生变化
  164. if (value) {
  165. const cartinfo = this.$store.state.cart.list
  166. cartinfo[index].cart[sizeIndex]=value
  167. cartinfo[index].goods_num = sum(cartinfo[index].cart)
  168. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  169. this.$store.commit('cart/COUNTCHANGE', { value, index, sizeIndex, del: true })
  170. } else {
  171. uni.showModal({
  172. title: '提示',
  173. content: '确定删除这个尺寸?',
  174. success: res => {
  175. if (res.confirm) {
  176. const cartinfo = this.$store.state.cart.list
  177. cartinfo[index].cart[sizeIndex]=value
  178. cartinfo[index].goods_num = sum(cartinfo[index].cart)
  179. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  180. this.$store.commit('cart/COUNTCHANGE', { value, index, sizeIndex, del: true })
  181. }
  182. }
  183. })
  184. }
  185. },
  186. chooseAll(to) { // 点击全选
  187. console.log(to)
  188. this.$store.commit('cart/CHOOSEDCHANGE', [to])
  189. if (to === true) {
  190. const cartinfo = this.$store.state.cart.list
  191. for(var i=0;i<cartinfo.length;i++) {
  192. cartinfo[i].goods_num= sum(cartinfo[i].cart)
  193. cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  194. }
  195. } else {
  196. const cartinfo = this.$store.state.cart.list
  197. for(var i=0;i<cartinfo.length;i++) {
  198. cartinfo[i].goods_num= 0
  199. cartinfo[i].goods_money = 0
  200. }
  201. }
  202. },
  203. chooseGood(to, index) { // 点击商品
  204. this.$store.commit('cart/CHOOSEDCHANGE', [to, index])
  205. console.log(to,index)
  206. if (to === true) {
  207. const cartinfo = this.$store.state.cart.list
  208. cartinfo[index].goods_num= sum(cartinfo[index].cart)
  209. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  210. } else {
  211. const cartinfo = this.$store.state.cart.list
  212. cartinfo[index].goods_num= 0
  213. cartinfo[index].goods_money = 0
  214. }
  215. },
  216. chooseSize(to, index, sizeIndex,num) { // 点击尺寸
  217. console.log(to, index, sizeIndex,num)
  218. this.$store.commit('cart/CHOOSEDCHANGE', [to, index, sizeIndex])
  219. const cartinfo = this.$store.state.cart.list
  220. if (to === true) {
  221. cartinfo[index].goods_money = cartinfo[index].goods_money + cartinfo[index].money * num
  222. cartinfo[index].goods_num = cartinfo[index].goods_num + num
  223. // const cartinfo = this.$store.state.cart.list
  224. // cartinfo[index].goods_num= sum(cartinfo[index].cart)
  225. // cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  226. } else {
  227. cartinfo[index].goods_money = cartinfo[index].goods_money - cartinfo[index].money * num
  228. cartinfo[index].goods_num = cartinfo[index].goods_num - num
  229. // cartinfo[index].goods_money = -
  230. // const cartinfo = this.$store.state.cart.list
  231. // cartinfo[index].goods_num= 0
  232. // cartinfo[index].goods_money = 0
  233. }
  234. // for(var i=0;i<cartinfo.length;i++) {
  235. // // if (cartinfo[i].cart.index)
  236. // let num = sum(cartinfo[i].cart) - cartinfo[i].cart
  237. // // cartinfo[i].goods_num= sum(cartinfo[i].cart)
  238. // cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  239. // }
  240. },
  241. goToBuy() { // 点击去下单
  242. uni.navigateTo({ url: '../place-order/place-order' })
  243. },
  244. deleteGood(index) { // 点击删除商品
  245. uni.showModal({
  246. title: '提示',
  247. content: '确定删除这件商品?',
  248. success: res => {
  249. if (res.confirm) {
  250. this.$store.commit('cart/DELETE', index)
  251. }
  252. }
  253. })
  254. },
  255. confirm() { // 点击结算
  256. if (this.choosedNum) {
  257. uni.navigateTo({ url: '../confirm-order1/confirm-order1' })
  258. location.reload()
  259. }
  260. }
  261. }
  262. }
  263. </script>
  264. <style lang="scss">
  265. .shop-car1 {
  266. height: 100vh;
  267. overflow: auto;
  268. background: $app-base-bg;
  269. border-bottom: calc(var(--window-bottom) + 100rpx) solid transparent;
  270. .gift_container {
  271. width: 100%;
  272. .fix_title {
  273. height: 90rpx;
  274. line-height: 90rpx;
  275. padding: 0 32rpx;
  276. display: flex;
  277. justify-content: flex-start;
  278. align-items: center;
  279. border-bottom: 1px solid $app-base-bg;
  280. .cuIcon-roundcheckfill {
  281. color: #F76454;
  282. font-size: 32rpx;
  283. }
  284. .title {
  285. margin-left: 30rpx;
  286. color: #181818;
  287. font-size: 32rpx;
  288. }
  289. }
  290. .gift_list {
  291. background-color: #FFFFFF;
  292. .gift_item {
  293. padding: 28rpx 30rpx;
  294. margin-bottom: 1px;
  295. background-color: #FFFFFF;
  296. display: flex;
  297. justify-content: space-between;
  298. align-items: center;
  299. .gift_img {
  300. display: block;
  301. width: 140rpx;
  302. height: 140rpx;
  303. }
  304. .right {
  305. width: calc(100% - 140rpx);
  306. height: 140rpx;
  307. padding: 0 50rpx 0 30rpx;
  308. display: flex;
  309. justify-content: space-between;
  310. flex-direction: column;
  311. .fixed {
  312. color: #181818;
  313. font-size: 32rpx;
  314. }
  315. .bottom {
  316. display: flex;
  317. justify-content: space-between;
  318. align-items: center;
  319. .name {
  320. color: #F76454;
  321. font-size: 32rpx;
  322. }
  323. .num {
  324. color: #181818;
  325. font-size: 28rpx;
  326. }
  327. }
  328. }
  329. }
  330. }
  331. }
  332. .shopcar-item {
  333. margin-bottom: 10rpx;
  334. .name {
  335. background: #FFFFFF;
  336. padding: 20rpx 0;
  337. .left {
  338. @include flex();
  339. justify-content: flex-start;
  340. > .name {
  341. color: #181818;
  342. font-size: 32rpx;
  343. font-weight: bold;
  344. }
  345. .cuIcon-round, .cuIcon-roundcheckfill {
  346. @include flex();
  347. width: 102rpx;
  348. height: 100%;
  349. font-size: 32rpx;
  350. &.cuIcon-roundcheckfill {
  351. color: $app-base-color;
  352. }
  353. }
  354. }
  355. .right {
  356. margin-top: 15rpx;
  357. padding-left:92rpx;
  358. display: flex;
  359. justify-content: space-between;
  360. align-items: center;
  361. &-box {
  362. // width: 384rpx;
  363. line-height: 52rpx;
  364. padding: 0 20rpx;
  365. background-color: #FFF4F3;
  366. border-radius: 8rpx;
  367. display: flex;
  368. font-size: 32rpx;
  369. .one {
  370. color: #333;
  371. }
  372. .two {
  373. color: #F76454;
  374. font-weight: bold;
  375. }
  376. }
  377. }
  378. .cuIcon-delete {
  379. font-size: 40rpx;
  380. margin-right: 30rpx;
  381. }
  382. }
  383. .sizeItem {
  384. @include flex();
  385. height: 200rpx;
  386. margin-top: 4rpx;
  387. background: #FFFFFF;
  388. box-sizing: border-box;
  389. padding-right: 39rpx;
  390. .cuIcon-round, .cuIcon-roundcheckfill {
  391. @include flex();
  392. width: 102rpx;
  393. height: 100%;
  394. font-size: 32rpx;
  395. &.cuIcon-roundcheckfill {
  396. color: $app-base-color;
  397. }
  398. }
  399. image {
  400. width: 140rpx;
  401. height: 140rpx;
  402. border-radius: 6rpx;
  403. }
  404. .info {
  405. flex: 1;
  406. height: 100%;
  407. @include flex(column);
  408. align-items: flex-start;
  409. padding: 43rpx 29rpx;
  410. box-sizing: border-box;
  411. justify-content: space-between;
  412. }
  413. }
  414. }
  415. .none {
  416. @include flex(column);
  417. height: 100%;
  418. image {
  419. width: 305rpx;
  420. height: 417rpx;
  421. }
  422. .big-btn {
  423. width: 280rpx;
  424. height: 80rpx;
  425. margin-top: 123rpx;
  426. border-radius: 40rpx;
  427. }
  428. }
  429. .buy {
  430. @include flex();
  431. position: fixed;
  432. left: 0;
  433. right: 0;
  434. bottom: var(--window-bottom);
  435. z-index: 1;
  436. height: 98rpx;
  437. font-size: 32rpx;
  438. background: #FFFFFF;
  439. justify-content: space-between;
  440. box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(178,178,178,1);
  441. view {
  442. @include flex();
  443. height: 100%;
  444. &.all {
  445. font-size: 32rpx;
  446. text {
  447. margin-left: 30rpx;
  448. &.cuIcon-roundcheckfill {
  449. color: $app-base-color;
  450. }
  451. }
  452. }
  453. &.total {
  454. flex: 1;
  455. margin-right: 30rpx;
  456. justify-content: flex-end;
  457. text {
  458. color: $app-base-color;
  459. }
  460. }
  461. &.pay {
  462. width: 220rpx;
  463. color: #FFFFFF;
  464. background: $app-base-color;
  465. }
  466. }
  467. }
  468. }
  469. </style>
  470. <!-- var arr = [19,31,23]
  471. 下标为2以外的数字相加 --><template>
  472. <view class="shop-car1">
  473. <view v-if="list.length" class="list">
  474. <view class="shopcar-item" v-for="(item, index) in list" :key="index">
  475. <view class="name" @tap="chooseGood(!item.choosed, index)">
  476. <view class="left">
  477. <text v-if="item.choosed" class="cuIcon-roundcheckfill"></text>
  478. <text v-else class="cuIcon-round"></text>
  479. <view class="name ellipsis">{{ item.name }}</view>
  480. </view>
  481. <view class="right">
  482. <view class="right-box">
  483. <view style="margin-right: 40rpx;">
  484. <text class="one">数量:</text>
  485. <text class="two">{{item.goods_num}}</text>
  486. </view>
  487. <view class="">
  488. <text class="one">金额:</text>
  489. <text class="two">¥{{item.goods_money}}</text>
  490. </view>
  491. <!-- {{numChange}} -->
  492. </view>
  493. <text class="cuIcon-delete" @click.stop="deleteGood(index)"></text>
  494. </view>
  495. </view>
  496. <view class="sizeItem" v-for="(sizeItem, sizeIndex) in item.size" :key="sizeIndex" v-if="item.cart[sizeIndex]"
  497. @tap="chooseSize(!item.sizeChoosed[sizeIndex], index, sizeIndex,item.cart[sizeIndex])"
  498. >
  499. <text v-if="item.sizeChoosed[sizeIndex]" class="cuIcon-roundcheckfill"></text>
  500. <text v-else class="cuIcon-round"></text>
  501. <image :src="item.main_img"></image>
  502. <view class="info">
  503. <text>尺码:{{ sizeItem }}</text>
  504. <text class="basecolor">¥{{ item.money }}/{{ item.unit }}</text>
  505. </view>
  506. <NumInput :value="item.cart[sizeIndex]" :args="[index, sizeIndex]" @change="numChange" />
  507. </view>
  508. </view>
  509. <view class="gift_container" v-if="giftList.length > 0">
  510. <view class="fix_title">
  511. <text class="cuIcon-roundcheckfill"></text>
  512. <text class="title">赠品信息</text>
  513. </view>
  514. <div class="gift_list">
  515. <view class="gift_item" v-for="item in giftList" :key="item.id" v-show="Math.floor(giftNum / item.num) > 0">
  516. <template v-if="giftNum >= item.limit_num">
  517. <image :src="item.img" class="gift_img"></image>
  518. <view class="right">
  519. <view class="fixed">赠品名称:</view>
  520. <view class="bottom">
  521. <view class="name">{{item.name}}</view>
  522. <view class="num">数量:{{ Math.floor(giftNum / item.num) }}</view>
  523. </view>
  524. </view>
  525. </template>
  526. </view>
  527. </div>
  528. </view>
  529. </view>
  530. <view v-else class="none">
  531. <image src="../../static/icon/emptyshopcar.png"></image>
  532. <view class="big-btn" @tap="goToBuy">去下单</view>
  533. </view>
  534. <view class="buy">
  535. <view class="all" @tap="chooseAll(!choosedAll)">
  536. <text v-if="choosedAll" class="cuIcon-roundcheckfill"></text>
  537. <text v-else class="cuIcon-round"></text>
  538. <text>全选</text>
  539. </view>
  540. <view class="total">总计: <text>{{ '¥ ' + choosedPrice + '' }}</text></view>
  541. <view class="pay" @tap="confirm">结算({{ ' ' + choosedNum + ' ' }})</view>
  542. </view>
  543. </view>
  544. </template>
  545. <script>
  546. import { deepClone } from '@/common/util/index.js'
  547. import { _API_GoodList } from '@/apis/good.js'
  548. import { _API_GetallGift } from '@/apis/order.js'
  549. import NumInput from '@/components/public/num-input.vue'
  550. function sum(arr) {
  551. var len = arr.length;
  552. if(len == 0){
  553. return 0;
  554. } else if (len == 1){
  555. return arr[0];
  556. } else {
  557. return arr[0] + sum(arr.slice(1));
  558. }
  559. }
  560. export default {
  561. components: { NumInput },
  562. data() {
  563. return {
  564. giftList: []
  565. };
  566. },
  567. computed: {
  568. list() { return this.$store.state.cart.list },
  569. choosedAll() { return this.$store.getters['cart/choosedAll'] },
  570. choosedNum() { return this.$store.getters['cart/choosedNum'] },
  571. choosedPrice() { return this.$store.getters['cart/choosedPrice'] },
  572. giftNum() { return this.$store.getters['cart/giftNum'] },
  573. },
  574. // async onShow() {
  575. // uni.loading()
  576. // const { data: { list } } = await _API_GoodList()
  577. // for(let i = this.list.length - 1; i >= 0; i --) { // 遍历购物车
  578. // const inCartGood = list.find(listItem => listItem.attr_id == this.list[i].attr_id)
  579. // if (inCartGood) { // 如果购物车的商品存在于商品列表中
  580. // for(let j = this.list[i].size_id.length - 1; j >= 0; j --) {
  581. // const cartSize = this.list[i].size_id[j]
  582. // const inCartSize = inCartGood.size_id.find(e => e == cartSize)
  583. // console.log(inCartSize)
  584. // // // if (inCartSize) {
  585. // // // console.log(inCartSize)
  586. // // // } else {
  587. // // // console.log(inCartSize)
  588. // // // }
  589. // // console.log(inCartSize)
  590. // }
  591. // } else { // 不存直接删除
  592. // this.$store.commit('cart/DELETE', i)
  593. // }
  594. // }
  595. // },
  596. onShow() {
  597. console.log(this.$store.state.cart.list)
  598. const cartinfo = this.$store.state.cart.list
  599. for(var i=0;i<cartinfo.length;i++) {
  600. // cartinfo[i].goods_num= sum(cartinfo[i].cart)
  601. cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  602. let cart = cartinfo[i].cart
  603. let sizeChoosed = cartinfo[i].sizeChoosed
  604. let options = []
  605. for(var e=0;e<cart.length;e++){
  606. var a={};
  607. a.num=cart[e];
  608. a.sizeChoosed=sizeChoosed[e];
  609. options.push(a);
  610. }
  611. let newArr=options.filter((item,key)=>{return item.num!=0 && item.sizeChoosed!=false})
  612. cartinfo[i].options = newArr
  613. cartinfo[i].goods_num = newArr.reduce((p,e)=>p+e.num,0);
  614. cartinfo[i].goods_money = cartinfo[i].goods_num * cartinfo[i].money
  615. }
  616. console.log(cartinfo)
  617. // if (this.$store.getters['cart/shopcarNum']) {
  618. // // uni.setTabBarBadge({ index: 1, text: this.$store.getters['cart/shopcarNum'] + '' })
  619. // } else {
  620. // uni.removeTabBarBadge({ index: 1 })
  621. // }
  622. this.getAllGift()
  623. },
  624. methods: {
  625. getAllGift() {
  626. this.giftList = []
  627. _API_GetallGift().then(res => {
  628. if(res.code === 200) {
  629. this.giftList = res.data.list
  630. }
  631. })
  632. },
  633. numChange(value, index, sizeIndex) { // 购物车数量发生变化
  634. if (value) {
  635. const cartinfo = this.$store.state.cart.list
  636. cartinfo[index].cart[sizeIndex]=value
  637. cartinfo[index].goods_num = sum(cartinfo[index].cart)
  638. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  639. this.$store.commit('cart/COUNTCHANGE', { value, index, sizeIndex, del: true })
  640. } else {
  641. uni.showModal({
  642. title: '提示',
  643. content: '确定删除这个尺寸?',
  644. success: res => {
  645. if (res.confirm) {
  646. const cartinfo = this.$store.state.cart.list
  647. cartinfo[index].cart[sizeIndex]=value
  648. cartinfo[index].goods_num = sum(cartinfo[index].cart)
  649. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  650. this.$store.commit('cart/COUNTCHANGE', { value, index, sizeIndex, del: true })
  651. }
  652. }
  653. })
  654. }
  655. },
  656. chooseAll(to) { // 点击全选
  657. console.log(to)
  658. this.$store.commit('cart/CHOOSEDCHANGE', [to])
  659. if (to === true) {
  660. const cartinfo = this.$store.state.cart.list
  661. for(var i=0;i<cartinfo.length;i++) {
  662. cartinfo[i].goods_num= sum(cartinfo[i].cart)
  663. cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  664. }
  665. } else {
  666. const cartinfo = this.$store.state.cart.list
  667. for(var i=0;i<cartinfo.length;i++) {
  668. cartinfo[i].goods_num= 0
  669. cartinfo[i].goods_money = 0
  670. }
  671. }
  672. },
  673. chooseGood(to, index) { // 点击商品
  674. this.$store.commit('cart/CHOOSEDCHANGE', [to, index])
  675. console.log(to,index)
  676. if (to === true) {
  677. const cartinfo = this.$store.state.cart.list
  678. cartinfo[index].goods_num= sum(cartinfo[index].cart)
  679. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  680. } else {
  681. const cartinfo = this.$store.state.cart.list
  682. cartinfo[index].goods_num= 0
  683. cartinfo[index].goods_money = 0
  684. }
  685. },
  686. chooseSize(to, index, sizeIndex,num) { // 点击尺寸
  687. console.log(to, index, sizeIndex,num)
  688. this.$store.commit('cart/CHOOSEDCHANGE', [to, index, sizeIndex])
  689. const cartinfo = this.$store.state.cart.list
  690. if (to === true) {
  691. cartinfo[index].goods_money = cartinfo[index].goods_money + cartinfo[index].money * num
  692. cartinfo[index].goods_num = cartinfo[index].goods_num + num
  693. // const cartinfo = this.$store.state.cart.list
  694. // cartinfo[index].goods_num= sum(cartinfo[index].cart)
  695. // cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  696. } else {
  697. cartinfo[index].goods_money = cartinfo[index].goods_money - cartinfo[index].money * num
  698. cartinfo[index].goods_num = cartinfo[index].goods_num - num
  699. // cartinfo[index].goods_money = -
  700. // const cartinfo = this.$store.state.cart.list
  701. // cartinfo[index].goods_num= 0
  702. // cartinfo[index].goods_money = 0
  703. }
  704. // for(var i=0;i<cartinfo.length;i++) {
  705. // // if (cartinfo[i].cart.index)
  706. // let num = sum(cartinfo[i].cart) - cartinfo[i].cart
  707. // // cartinfo[i].goods_num= sum(cartinfo[i].cart)
  708. // cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  709. // }
  710. },
  711. goToBuy() { // 点击去下单
  712. uni.navigateTo({ url: '../place-order/place-order' })
  713. },
  714. deleteGood(index) { // 点击删除商品
  715. uni.showModal({
  716. title: '提示',
  717. content: '确定删除这件商品?',
  718. success: res => {
  719. if (res.confirm) {
  720. this.$store.commit('cart/DELETE', index)
  721. }
  722. }
  723. })
  724. },
  725. confirm() { // 点击结算
  726. if (this.choosedNum) {
  727. uni.navigateTo({ url: '../confirm-order1/confirm-order1' })
  728. location.reload()
  729. }
  730. }
  731. }
  732. }
  733. </script>
  734. <style lang="scss">
  735. .shop-car1 {
  736. height: 100vh;
  737. overflow: auto;
  738. background: $app-base-bg;
  739. border-bottom: calc(var(--window-bottom) + 100rpx) solid transparent;
  740. .gift_container {
  741. width: 100%;
  742. .fix_title {
  743. height: 90rpx;
  744. line-height: 90rpx;
  745. padding: 0 32rpx;
  746. display: flex;
  747. justify-content: flex-start;
  748. align-items: center;
  749. border-bottom: 1px solid $app-base-bg;
  750. .cuIcon-roundcheckfill {
  751. color: #F76454;
  752. font-size: 32rpx;
  753. }
  754. .title {
  755. margin-left: 30rpx;
  756. color: #181818;
  757. font-size: 32rpx;
  758. }
  759. }
  760. .gift_list {
  761. background-color: #FFFFFF;
  762. .gift_item {
  763. padding: 28rpx 30rpx;
  764. margin-bottom: 1px;
  765. background-color: #FFFFFF;
  766. display: flex;
  767. justify-content: space-between;
  768. align-items: center;
  769. .gift_img {
  770. display: block;
  771. width: 140rpx;
  772. height: 140rpx;
  773. }
  774. .right {
  775. width: calc(100% - 140rpx);
  776. height: 140rpx;
  777. padding: 0 50rpx 0 30rpx;
  778. display: flex;
  779. justify-content: space-between;
  780. flex-direction: column;
  781. .fixed {
  782. color: #181818;
  783. font-size: 32rpx;
  784. }
  785. .bottom {
  786. display: flex;
  787. justify-content: space-between;
  788. align-items: center;
  789. .name {
  790. color: #F76454;
  791. font-size: 32rpx;
  792. }
  793. .num {
  794. color: #181818;
  795. font-size: 28rpx;
  796. }
  797. }
  798. }
  799. }
  800. }
  801. }
  802. .shopcar-item {
  803. margin-bottom: 10rpx;
  804. .name {
  805. background: #FFFFFF;
  806. padding: 20rpx 0;
  807. .left {
  808. @include flex();
  809. justify-content: flex-start;
  810. > .name {
  811. color: #181818;
  812. font-size: 32rpx;
  813. font-weight: bold;
  814. }
  815. .cuIcon-round, .cuIcon-roundcheckfill {
  816. @include flex();
  817. width: 102rpx;
  818. height: 100%;
  819. font-size: 32rpx;
  820. &.cuIcon-roundcheckfill {
  821. color: $app-base-color;
  822. }
  823. }
  824. }
  825. .right {
  826. margin-top: 15rpx;
  827. padding-left:92rpx;
  828. display: flex;
  829. justify-content: space-between;
  830. align-items: center;
  831. &-box {
  832. // width: 384rpx;
  833. line-height: 52rpx;
  834. padding: 0 20rpx;
  835. background-color: #FFF4F3;
  836. border-radius: 8rpx;
  837. display: flex;
  838. font-size: 32rpx;
  839. .one {
  840. color: #333;
  841. }
  842. .two {
  843. color: #F76454;
  844. font-weight: bold;
  845. }
  846. }
  847. }
  848. .cuIcon-delete {
  849. font-size: 40rpx;
  850. margin-right: 30rpx;
  851. }
  852. }
  853. .sizeItem {
  854. @include flex();
  855. height: 200rpx;
  856. margin-top: 4rpx;
  857. background: #FFFFFF;
  858. box-sizing: border-box;
  859. padding-right: 39rpx;
  860. .cuIcon-round, .cuIcon-roundcheckfill {
  861. @include flex();
  862. width: 102rpx;
  863. height: 100%;
  864. font-size: 32rpx;
  865. &.cuIcon-roundcheckfill {
  866. color: $app-base-color;
  867. }
  868. }
  869. image {
  870. width: 140rpx;
  871. height: 140rpx;
  872. border-radius: 6rpx;
  873. }
  874. .info {
  875. flex: 1;
  876. height: 100%;
  877. @include flex(column);
  878. align-items: flex-start;
  879. padding: 43rpx 29rpx;
  880. box-sizing: border-box;
  881. justify-content: space-between;
  882. }
  883. }
  884. }
  885. .none {
  886. @include flex(column);
  887. height: 100%;
  888. image {
  889. width: 305rpx;
  890. height: 417rpx;
  891. }
  892. .big-btn {
  893. width: 280rpx;
  894. height: 80rpx;
  895. margin-top: 123rpx;
  896. border-radius: 40rpx;
  897. }
  898. }
  899. .buy {
  900. @include flex();
  901. position: fixed;
  902. left: 0;
  903. right: 0;
  904. bottom: var(--window-bottom);
  905. z-index: 1;
  906. height: 98rpx;
  907. font-size: 32rpx;
  908. background: #FFFFFF;
  909. justify-content: space-between;
  910. box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(178,178,178,1);
  911. view {
  912. @include flex();
  913. height: 100%;
  914. &.all {
  915. font-size: 32rpx;
  916. text {
  917. margin-left: 30rpx;
  918. &.cuIcon-roundcheckfill {
  919. color: $app-base-color;
  920. }
  921. }
  922. }
  923. &.total {
  924. flex: 1;
  925. margin-right: 30rpx;
  926. justify-content: flex-end;
  927. text {
  928. color: $app-base-color;
  929. }
  930. }
  931. &.pay {
  932. width: 220rpx;
  933. color: #FFFFFF;
  934. background: $app-base-color;
  935. }
  936. }
  937. }
  938. }
  939. </style>
  940. <!-- var arr = [19,31,23]
  941. 下标为2以外的数字相加 -->