shop-car1.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659
  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"
  27. v-if="item.cart[sizeIndex]"
  28. @tap="chooseSize(!item.sizeChoosed[sizeIndex], index, sizeIndex,item.cart[sizeIndex])">
  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. <!-- <text class="basecolor"
  36. v-if="item.name == '红色贺岁款(精装版)' && item.residue">
  37. 剩余:{{ item.residue[sizeIndex] }}{{ item.unit }}</text> -->
  38. </view>
  39. <!-- <NumInput v-if="item.name == '红色贺岁款(精装版)' && item.residue" :value="item.cart[sizeIndex]" :args="[index, sizeIndex]" :num="item.step" :max="item.residue[sizeIndex]" :name="item.name"
  40. @change="numChange" /> -->
  41. <NumInput :value="item.cart[sizeIndex]" :args="[index, sizeIndex]" :num="item.step" :name="item.name"
  42. @change="numChange" />
  43. </view>
  44. </view>
  45. <view class="gift_container" v-if="giftList.length > 0">
  46. <view class="fix_title">
  47. <text class="cuIcon-roundcheckfill"></text>
  48. <text class="title">赠品信息</text>
  49. </view>
  50. <div class="gift_list">
  51. <view class="gift_item" v-for="item in giftList" :key="item.id"
  52. v-show="Math.floor(giftNum / item.num) > 0">
  53. <template v-if="giftNum >= item.limit_num">
  54. <image :src="item.img" class="gift_img"></image>
  55. <view class="right">
  56. <view class="fixed">赠品名称:</view>
  57. <view class="bottom">
  58. <view class="name">{{item.name}}</view>
  59. <view class="num">数量:{{ Math.floor(giftNum / item.num) }}</view>
  60. </view>
  61. </view>
  62. </template>
  63. </view>
  64. </div>
  65. </view>
  66. </view>
  67. <view v-else class="none">
  68. <image src="../../static/icon/emptyshopcar.png"></image>
  69. <view class="big-btn" @tap="goToBuy">去下单</view>
  70. </view>
  71. <view class="buy">
  72. <view class="all" @tap="chooseAll(!choosedAll)">
  73. <text v-if="choosedAll" class="cuIcon-roundcheckfill"></text>
  74. <text v-else class="cuIcon-round"></text>
  75. <text>全选</text>
  76. </view>
  77. <!-- <view class="total">总计: <text>{{ '¥ ' + choosedPrice + '' }}</text></view> -->
  78. <!-- <view class="pay" @tap="confirm">结算({{ ' ' + choosedNum + ' ' }})</view> -->
  79. <view class="total">合计: <text>{{ '¥ ' + choosedPrice + '' }}</text></view>
  80. <view class="pay" @tap="confirm">下一步</view>
  81. </view>
  82. </view>
  83. </template>
  84. <script>
  85. import {
  86. deepClone
  87. } from '@/common/util/index.js'
  88. import {
  89. _API_GoodList,
  90. GetGoodStatus,
  91. GetLimitGood
  92. } from '@/apis/good.js'
  93. import {
  94. _API_GetallGift,
  95. CheckGoodNum
  96. } from '@/apis/order.js'
  97. import NumInput from '@/components/public/num-input.vue'
  98. function sum(arr) {
  99. var len = arr.length;
  100. if (len == 0) {
  101. return 0;
  102. } else if (len == 1) {
  103. return arr[0];
  104. } else {
  105. return arr[0] + sum(arr.slice(1));
  106. }
  107. }
  108. export default {
  109. components: {
  110. NumInput
  111. },
  112. data() {
  113. return {
  114. giftList: [],
  115. isHelper: '',
  116. isLimit: false //下单数量是否限制 false不限制 true限制
  117. };
  118. },
  119. computed: {
  120. list() {
  121. return this.$store.state.cart.list
  122. },
  123. choosedAll() {
  124. return this.$store.getters['cart/choosedAll']
  125. },
  126. choosedNum() {
  127. return this.$store.getters['cart/choosedNum']
  128. },
  129. choosedPrice() {
  130. return this.$store.getters['cart/choosedPrice']
  131. },
  132. giftNum() {
  133. return this.$store.getters['cart/giftNum']
  134. },
  135. },
  136. // async onShow() {
  137. // uni.loading()
  138. // const { data: { list } } = await _API_GoodList()
  139. // for(let i = this.list.length - 1; i >= 0; i --) { // 遍历购物车
  140. // const inCartGood = list.find(listItem => listItem.attr_id == this.list[i].attr_id)
  141. // if (inCartGood) { // 如果购物车的商品存在于商品列表中
  142. // for(let j = this.list[i].size_id.length - 1; j >= 0; j --) {
  143. // const cartSize = this.list[i].size_id[j]
  144. // const inCartSize = inCartGood.size_id.find(e => e == cartSize)
  145. // console.log(inCartSize)
  146. // // // if (inCartSize) {
  147. // // // console.log(inCartSize)
  148. // // // } else {
  149. // // // console.log(inCartSize)
  150. // // // }
  151. // // console.log(inCartSize)
  152. // }
  153. // } else { // 不存直接删除
  154. // this.$store.commit('cart/DELETE', i)
  155. // }
  156. // }
  157. // },
  158. onLoad() {
  159. // 如果是助手登录隐藏tabbar
  160. this.isHelper = uni.getStorageSync('isHelper')
  161. if (this.isHelper) {
  162. uni.hideTabBar()
  163. } else {
  164. uni.showTabBar()
  165. }
  166. },
  167. onShow() {
  168. this.getLimitNum()
  169. const cartinfo = this.$store.state.cart.list
  170. for (var i = 0; i < cartinfo.length; i++) {
  171. // cartinfo[i].goods_num= sum(cartinfo[i].cart)
  172. cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  173. let cart = cartinfo[i].cart
  174. let sizeChoosed = cartinfo[i].sizeChoosed
  175. let options = []
  176. for (var e = 0; e < cart.length; e++) {
  177. var a = {};
  178. a.num = cart[e];
  179. a.sizeChoosed = sizeChoosed[e];
  180. options.push(a);
  181. }
  182. let newArr = options.filter((item, key) => {
  183. return item.num != 0 && item.sizeChoosed != false
  184. })
  185. cartinfo[i].options = newArr
  186. cartinfo[i].goods_num = newArr.reduce((p, e) => p + e.num, 0);
  187. cartinfo[i].goods_money = cartinfo[i].goods_num * cartinfo[i].money
  188. }
  189. // if (this.$store.getters['cart/shopcarNum']) {
  190. // // uni.setTabBarBadge({ index: 1, text: this.$store.getters['cart/shopcarNum'] + '' })
  191. // } else {
  192. // uni.removeTabBarBadge({ index: 1 })
  193. // }
  194. this.getAllGift()
  195. // 客户下单限制测试
  196. // this.checkStatus()
  197. },
  198. methods: {
  199. // 客户下单数量限制是否开启
  200. // 客户下单限制测试
  201. // checkStatus() {
  202. // GetGoodStatus().then(res => {
  203. // if (res.code === 200) {
  204. // this.isLimit = res.data.status
  205. // } else {
  206. // uni.showToast({
  207. // title: '获取状态失败'
  208. // })
  209. // }
  210. // })
  211. // },
  212. // 新款商品剩余数量
  213. getLimitNum() {
  214. let residue = [0,0,0,0,0,0,0,0,0,0,0,0,0,0] // 剩余数量
  215. GetLimitGood().then(res => {
  216. if (res.data.length) {
  217. residue = res.data.map(item => (item.limit_num - item.num)) // 剩余数量 = 限制购买数量 - 已购买数量
  218. }
  219. const arr = this.$store.state.cart.list
  220. const i = arr.findIndex(item => item.name == '红色贺岁款(精装版)')
  221. if (i != -1) {
  222. this.$store.commit('cart/GETNEWGOODSNUM', residue)
  223. }
  224. })
  225. },
  226. getAllGift() {
  227. this.giftList = []
  228. _API_GetallGift().then(res => {
  229. if (res.code === 200) {
  230. this.giftList = res.data.list
  231. }
  232. })
  233. },
  234. numChange(value, index, sizeIndex) { // 购物车数量发生变化
  235. if (value) {
  236. const cartinfo = this.$store.state.cart.list
  237. cartinfo[index].cart[sizeIndex] = value
  238. cartinfo[index].goods_num = sum(cartinfo[index].cart)
  239. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  240. this.$store.commit('cart/COUNTCHANGE', {
  241. value,
  242. index,
  243. sizeIndex,
  244. del: true
  245. })
  246. } else {
  247. uni.showModal({
  248. title: '提示',
  249. content: '确定删除这个尺寸?',
  250. success: res => {
  251. if (res.confirm) {
  252. const cartinfo = this.$store.state.cart.list
  253. cartinfo[index].cart[sizeIndex] = value
  254. cartinfo[index].goods_num = sum(cartinfo[index].cart)
  255. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  256. this.$store.commit('cart/COUNTCHANGE', {
  257. value,
  258. index,
  259. sizeIndex,
  260. del: true
  261. })
  262. }
  263. }
  264. })
  265. }
  266. },
  267. chooseAll(to) { // 点击全选
  268. console.log(to)
  269. this.$store.commit('cart/CHOOSEDCHANGE', [to])
  270. if (to === true) {
  271. const cartinfo = this.$store.state.cart.list
  272. for (var i = 0; i < cartinfo.length; i++) {
  273. cartinfo[i].goods_num = sum(cartinfo[i].cart)
  274. cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  275. }
  276. } else {
  277. const cartinfo = this.$store.state.cart.list
  278. for (var i = 0; i < cartinfo.length; i++) {
  279. cartinfo[i].goods_num = 0
  280. cartinfo[i].goods_money = 0
  281. }
  282. }
  283. },
  284. chooseGood(to, index) { // 点击商品
  285. this.$store.commit('cart/CHOOSEDCHANGE', [to, index])
  286. console.log(to, index)
  287. if (to === true) {
  288. const cartinfo = this.$store.state.cart.list
  289. cartinfo[index].goods_num = sum(cartinfo[index].cart)
  290. cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  291. } else {
  292. const cartinfo = this.$store.state.cart.list
  293. cartinfo[index].goods_num = 0
  294. cartinfo[index].goods_money = 0
  295. }
  296. },
  297. chooseSize(to, index, sizeIndex, num) { // 点击尺寸
  298. console.log(to, index, sizeIndex, num)
  299. this.$store.commit('cart/CHOOSEDCHANGE', [to, index, sizeIndex])
  300. const cartinfo = this.$store.state.cart.list
  301. if (to === true) {
  302. cartinfo[index].goods_money = cartinfo[index].goods_money + cartinfo[index].money * num
  303. cartinfo[index].goods_num = cartinfo[index].goods_num + num
  304. // const cartinfo = this.$store.state.cart.list
  305. // cartinfo[index].goods_num= sum(cartinfo[index].cart)
  306. // cartinfo[index].goods_money = sum(cartinfo[index].cart) * cartinfo[index].money
  307. } else {
  308. cartinfo[index].goods_money = cartinfo[index].goods_money - cartinfo[index].money * num
  309. cartinfo[index].goods_num = cartinfo[index].goods_num - num
  310. // cartinfo[index].goods_money = -
  311. // const cartinfo = this.$store.state.cart.list
  312. // cartinfo[index].goods_num= 0
  313. // cartinfo[index].goods_money = 0
  314. }
  315. // for(var i=0;i<cartinfo.length;i++) {
  316. // // if (cartinfo[i].cart.index)
  317. // let num = sum(cartinfo[i].cart) - cartinfo[i].cart
  318. // // cartinfo[i].goods_num= sum(cartinfo[i].cart)
  319. // cartinfo[i].goods_money = sum(cartinfo[i].cart) * cartinfo[i].money
  320. // }
  321. },
  322. goToBuy() { // 点击去下单
  323. uni.navigateTo({
  324. url: '../place-order/place-order'
  325. })
  326. },
  327. deleteGood(index) { // 点击删除商品
  328. uni.showModal({
  329. title: '提示',
  330. content: '确定删除这件商品?',
  331. success: res => {
  332. if (res.confirm) {
  333. this.$store.commit('cart/DELETE', index)
  334. }
  335. }
  336. })
  337. },
  338. confirm() { // 点击结算
  339. let type = 0
  340. let total = 0
  341. let num = []
  342. let size_id = []
  343. //客户下单限制测试
  344. // let size6 = ''
  345. // let size3 = ''
  346. deepClone(this.list).forEach((goodItem, goodIndex) => {
  347. //客户下单限制测试
  348. // if (goodItem.name === '大卫博士青春版' || goodItem.name === '大卫博士高腰版') {
  349. // size3 = goodItem.cart.reduce((a, b) => a + b, 0)
  350. // }
  351. // if (goodItem.name === '大卫博士精装版') {
  352. // size6 = goodItem.cart.reduce((a, b) => a + b, 0)
  353. // }
  354. goodItem.cart.forEach((n, i) => {
  355. if (n && goodItem.sizeChoosed[i]) {
  356. type++
  357. total += n
  358. num.push(n)
  359. size_id.push(goodItem.size_id[i])
  360. }
  361. })
  362. })
  363. //客户下单限制测试
  364. // if (size3 % 3 != 0 && this.isLimit) {
  365. // uni.showModal({
  366. // content: '青春版和高腰版请按照3的倍数下单',
  367. // showCancel: false
  368. // })
  369. // return
  370. // }
  371. // if (size6 % 6 != 0 && this.isLimit) {
  372. // uni.showModal({
  373. // content: '精装版请按照6的倍数下单',
  374. // showCancel: false
  375. // })
  376. // return
  377. // }
  378. if (this.choosedNum) {
  379. CheckGoodNum({
  380. total,
  381. type,
  382. num,
  383. size_id
  384. }).then(res => {
  385. if (res.code == 200) {
  386. uni.navigateTo({
  387. url: '../confirm-order1/confirm-order1'
  388. })
  389. location.reload()
  390. } else {
  391. uni.showModal({
  392. showCancel: false,
  393. title: '提示',
  394. content: res.message
  395. })
  396. }
  397. })
  398. }
  399. }
  400. }
  401. }
  402. </script>
  403. <style lang="scss">
  404. .shop-car1 {
  405. height: 100vh;
  406. overflow: auto;
  407. background: $app-base-bg;
  408. border-bottom: calc(var(--window-bottom) + 100rpx) solid transparent;
  409. .gift_container {
  410. width: 100%;
  411. .fix_title {
  412. height: 90rpx;
  413. line-height: 90rpx;
  414. padding: 0 32rpx;
  415. display: flex;
  416. justify-content: flex-start;
  417. align-items: center;
  418. border-bottom: 1px solid $app-base-bg;
  419. .cuIcon-roundcheckfill {
  420. color: #F76454;
  421. font-size: 32rpx;
  422. }
  423. .title {
  424. margin-left: 30rpx;
  425. color: #181818;
  426. font-size: 32rpx;
  427. }
  428. }
  429. .gift_list {
  430. background-color: #FFFFFF;
  431. .gift_item {
  432. padding: 28rpx 30rpx;
  433. margin-bottom: 1px;
  434. background-color: #FFFFFF;
  435. display: flex;
  436. justify-content: space-between;
  437. align-items: center;
  438. .gift_img {
  439. display: block;
  440. width: 140rpx;
  441. height: 140rpx;
  442. }
  443. .right {
  444. width: calc(100% - 140rpx);
  445. height: 140rpx;
  446. padding: 0 50rpx 0 30rpx;
  447. display: flex;
  448. justify-content: space-between;
  449. flex-direction: column;
  450. .fixed {
  451. color: #181818;
  452. font-size: 32rpx;
  453. }
  454. .bottom {
  455. display: flex;
  456. justify-content: space-between;
  457. align-items: center;
  458. .name {
  459. color: #F76454;
  460. font-size: 32rpx;
  461. }
  462. .num {
  463. color: #181818;
  464. font-size: 28rpx;
  465. }
  466. }
  467. }
  468. }
  469. }
  470. }
  471. .shopcar-item {
  472. margin-bottom: 10rpx;
  473. .name {
  474. background: #FFFFFF;
  475. padding: 20rpx 0;
  476. .left {
  477. @include flex();
  478. justify-content: flex-start;
  479. >.name {
  480. color: #181818;
  481. font-size: 32rpx;
  482. font-weight: bold;
  483. }
  484. .cuIcon-round,
  485. .cuIcon-roundcheckfill {
  486. @include flex();
  487. width: 102rpx;
  488. height: 100%;
  489. font-size: 32rpx;
  490. &.cuIcon-roundcheckfill {
  491. color: $app-base-color;
  492. }
  493. }
  494. }
  495. .right {
  496. margin-top: 15rpx;
  497. padding-left: 92rpx;
  498. display: flex;
  499. justify-content: space-between;
  500. align-items: center;
  501. &-box {
  502. // width: 384rpx;
  503. line-height: 52rpx;
  504. padding: 0 20rpx;
  505. background-color: #FFF4F3;
  506. border-radius: 8rpx;
  507. display: flex;
  508. font-size: 32rpx;
  509. .one {
  510. color: #333;
  511. }
  512. .two {
  513. color: #F76454;
  514. font-weight: bold;
  515. }
  516. }
  517. }
  518. .cuIcon-delete {
  519. font-size: 40rpx;
  520. margin-right: 30rpx;
  521. }
  522. }
  523. .sizeItem {
  524. @include flex();
  525. height: 200rpx;
  526. margin-top: 4rpx;
  527. background: #FFFFFF;
  528. box-sizing: border-box;
  529. padding-right: 39rpx;
  530. .cuIcon-round,
  531. .cuIcon-roundcheckfill {
  532. @include flex();
  533. width: 102rpx;
  534. height: 100%;
  535. font-size: 32rpx;
  536. &.cuIcon-roundcheckfill {
  537. color: $app-base-color;
  538. }
  539. }
  540. image {
  541. width: 140rpx;
  542. height: 140rpx;
  543. border-radius: 6rpx;
  544. }
  545. .info {
  546. flex: 1;
  547. height: 100%;
  548. @include flex(column);
  549. align-items: flex-start;
  550. padding: 43rpx 29rpx;
  551. box-sizing: border-box;
  552. justify-content: space-between;
  553. }
  554. }
  555. }
  556. .none {
  557. @include flex(column);
  558. height: 100%;
  559. image {
  560. width: 305rpx;
  561. height: 417rpx;
  562. }
  563. .big-btn {
  564. width: 280rpx;
  565. height: 80rpx;
  566. margin-top: 123rpx;
  567. border-radius: 40rpx;
  568. }
  569. }
  570. .buy {
  571. @include flex();
  572. position: fixed;
  573. left: 0;
  574. right: 0;
  575. bottom: 0;
  576. z-index: 1;
  577. height: 98rpx;
  578. font-size: 32rpx;
  579. background: #FFFFFF;
  580. justify-content: space-between;
  581. box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(178, 178, 178, 1);
  582. view {
  583. @include flex();
  584. height: 100%;
  585. &.all {
  586. font-size: 32rpx;
  587. text {
  588. margin-left: 30rpx;
  589. &.cuIcon-roundcheckfill {
  590. color: $app-base-color;
  591. }
  592. }
  593. }
  594. &.total {
  595. flex: 1;
  596. margin-right: 30rpx;
  597. justify-content: flex-end;
  598. text {
  599. color: $app-base-color;
  600. font-size: 40rpx;
  601. }
  602. }
  603. &.pay {
  604. width: 220rpx;
  605. color: #FFFFFF;
  606. background: $app-base-color;
  607. }
  608. }
  609. }
  610. }
  611. </style>