cart.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. <template>
  2. <view class="cart-pages">
  3. <view class="cart-bar" v-if="cartList.length>0">
  4. <view>共<text class="special-val">{{count}}</text>件商品</view>
  5. <view @click="editCart">
  6. <text class="edit" v-if="!isEdit">管理</text>
  7. <text class="save" v-else>完成</text>
  8. </view>
  9. </view>
  10. <view class="goods-list">
  11. <!-- 按分类显示 -->
  12. <view class="goods-class-box" v-for="(item,cindex) in cartList" :key="item.goodsTypeNo">
  13. <view class="goods-class-head">
  14. <view>
  15. <u-checkbox
  16. shape="circle"
  17. v-model="item.checked"
  18. active-color="#01c9b2"
  19. :name='item.goodsTypeNo'
  20. size="40rpx"
  21. @change="goodsClasChange">
  22. {{item.name}}
  23. </u-checkbox>
  24. </view>
  25. <view class="des">
  26. <view>商品乐豆合计满<text>{{item.goldLimit}}</text></view>
  27. <u-image mode="scaleToFill" width="26rpx" height="26rpx" src="/static/ledou.png"></u-image>
  28. <view>才可购买</view>
  29. </view>
  30. </view>
  31. <view class="goods-class-list">
  32. <!-- 商品列表 -->
  33. <view class="goods-item" v-for="(good,index) in item.shoppingCartGoodsList" :key="good.id">
  34. <view class="checkbox">
  35. <u-checkbox
  36. v-model="good.checked"
  37. v-if="good.goods.inventoryQty>0||isEdit"
  38. shape="circle"
  39. active-color="#01c9b2"
  40. size="40rpx"
  41. :name='good.id+"-"+cindex'
  42. @change="goodsChange"
  43. ></u-checkbox>
  44. </view>
  45. <view class="goods-info">
  46. <view class="goods-imgs">
  47. <view v-if="good.goods.inventoryQty==0" class="goods-staus">已售罄</view>
  48. <u-image border-radius="12" width="158rpx" height="140rpx" :src="good.goods.homeImage"></u-image>
  49. </view>
  50. <view class="goods-text">
  51. <view class="good-name">{{good.goods.name}}</view>
  52. <view class="goods-price">
  53. <view>
  54. <text>{{good.goods.sellGold}}</text>
  55. <u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
  56. </view>
  57. <view v-if="good.goods.inventoryQty>0">
  58. <!-- <u-number-box @change="goodsNumsChange(good)" :min="1" v-model="good.buyQty"></u-number-box> -->
  59. <uni-number-box @change="goodsNumsChange(good,cindex)" v-model="good.buyQty" :min="1"></uni-number-box>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. <view class="noData" v-if="cartList.length==0">
  68. <u-empty mode="car">
  69. <view slot="bottom">
  70. <u-button size="mini" @click="toBuy">去选商品</u-button>
  71. </view>
  72. </u-empty>
  73. </view>
  74. </view>
  75. <view class="cart-submit" v-if="cartList.length>0">
  76. <view>
  77. <u-checkbox
  78. shape="circle"
  79. name='checkAll'
  80. size="40rpx"
  81. active-color="#01c9b2"
  82. @change="checkAllChange"
  83. v-model="checkAll">
  84. {{checkAll?'取消':'全选'}}
  85. </u-checkbox>
  86. </view>
  87. <view v-if="!isEdit">
  88. <view class="heji">
  89. <view>总计:<text>{{totalPrice}}</text></view>
  90. <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
  91. </view>
  92. <u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder">立即下单</u-button>
  93. </view>
  94. <view v-else>
  95. <u-button size="mini" :custom-style="toOrderButton" type="error" @click="delGoods">删除</u-button>
  96. </view>
  97. </view>
  98. </view>
  99. </template>
  100. <script>
  101. import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
  102. export default {
  103. components: {uniNumberBox},
  104. data() {
  105. return {
  106. toOrderButton: {
  107. borderRadius:'100rpx',
  108. fontSize:'30rpx',
  109. width: '180rpx',
  110. height: '60rpx'
  111. },
  112. checkAll: false,// 全选
  113. isEdit: false, // 是否编辑模式
  114. };
  115. },
  116. computed: {
  117. // 总数
  118. count() {
  119. let arr = this.$store.state.vuex_cartList
  120. let count = 0
  121. arr.map(item=>{
  122. count = count + item.shoppingCartGoodsList.length
  123. if(!item.hasOwnProperty("checked")){
  124. item.checked = false
  125. }
  126. item.shoppingCartGoodsList.map(goods=>{
  127. if(!goods.hasOwnProperty("checked")){
  128. goods.checked = false
  129. }
  130. })
  131. })
  132. return count
  133. },
  134. // 总计
  135. totalPrice(){
  136. let arr = this.cartList
  137. let total = 0
  138. arr.map(item=>{
  139. item.shoppingCartGoodsList.map(a =>{
  140. if(a.checked){
  141. total = total + a.buyQty * a.goods.sellGold
  142. }
  143. })
  144. })
  145. return total
  146. },
  147. // 商品列表
  148. cartList(){
  149. return this.$store.state.vuex_cartList
  150. }
  151. },
  152. onShow() {
  153. uni.$emit('getCartList')
  154. this.hasCheckAll()
  155. },
  156. methods: {
  157. toBuy(){
  158. uni.switchTab({
  159. url:"/pages/goods/index"
  160. })
  161. },
  162. // 获取当前选择的商品, type: 0 删除,1 立即下单
  163. getCheckGoods(type){
  164. let arr = this.cartList
  165. let goods = []
  166. arr.map(item=>{
  167. item.shoppingCartGoodsList.map(a =>{
  168. if(a.checked){
  169. goods.push(type?a:a.id)
  170. }
  171. })
  172. })
  173. return goods
  174. },
  175. // 全选 或 取消全选
  176. checkAllChange(e) {
  177. let arr = this.cartList
  178. arr.map(item=>{
  179. item.checked = e.value
  180. item.shoppingCartGoodsList.map(goods=>{
  181. goods.checked = e.value
  182. })
  183. })
  184. arr.splice()
  185. },
  186. // 判断当前分类下的商品总和是否满足规则
  187. hasZgjindu(item){
  188. let ret = 0
  189. let goldLimit = item.goldLimit
  190. item.shoppingCartGoodsList.map(good=>{
  191. ret = ret + good.goods.sellGold * good.buyQty
  192. })
  193. console.log(ret , goldLimit)
  194. return !this.isEdit ? ret >= goldLimit : true
  195. },
  196. // 每个分类的全选
  197. goodsClasChange(e){
  198. console.log(e);
  199. let index = this.cartList.findIndex(item => item.goodsTypeNo == e.name)
  200. let item = this.cartList[index]
  201. if(this.hasZgjindu(item)){
  202. item.checked = e.value
  203. item.shoppingCartGoodsList.map(goods=>{
  204. goods.checked = e.value
  205. })
  206. // 判断是否全选
  207. this.hasCheckAll()
  208. }else{
  209. setTimeout(()=>{
  210. item.checked = false
  211. this.cartList.splice()
  212. },100)
  213. uni.showToast({
  214. icon: 'none',
  215. title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
  216. })
  217. }
  218. },
  219. // 商品选择
  220. goodsChange(e){
  221. console.log(e)
  222. let a = e.name.split('-')
  223. let row = this.cartList[a[1]]
  224. let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
  225. if(this.hasZgjindu(row)){
  226. row.shoppingCartGoodsList[goodsIndex].checked = e.value
  227. // 判断当前分类是否全选
  228. this.clasGoodsHasCheckAll(a[1])
  229. // 判断是否全选
  230. this.hasCheckAll()
  231. }else{
  232. setTimeout(()=>{
  233. row.checked = false
  234. row.shoppingCartGoodsList[goodsIndex].checked = false
  235. this.cartList.splice()
  236. },100)
  237. uni.showToast({
  238. icon: 'none',
  239. title: '此分类的商品乐豆合计需要满'+row.goldLimit+'乐豆才可以购买'
  240. })
  241. }
  242. },
  243. // 判断某个分类是否全选
  244. clasGoodsHasCheckAll(index){
  245. let row = this.cartList[index]
  246. let len = row.shoppingCartGoodsList.length
  247. let clen = 0
  248. row.shoppingCartGoodsList.map(item=>{
  249. console.log(item.checked)
  250. if(item.checked){
  251. clen = clen + 1
  252. }
  253. })
  254. row.checked = clen == len
  255. this.cartList.splice()
  256. },
  257. // 是否全选
  258. hasCheckAll(){
  259. let list = this.cartList
  260. let len = list.length
  261. let clen = 0
  262. list.map(item => {
  263. if(item.checked){
  264. clen = clen + 1
  265. }
  266. })
  267. this.checkAll = clen == len
  268. list.splice()
  269. },
  270. // 编辑购物车
  271. editCart(){
  272. this.isEdit = !this.isEdit
  273. this.checkAllChange({value:false})
  274. this.checkAll = false
  275. },
  276. // 立即下单
  277. toOrder(){
  278. let goods = this.getCheckGoods(1)
  279. console.log(goods)
  280. if(goods.length){
  281. this.$u.vuex("vuex_toOrderList",goods)
  282. uni.redirectTo({
  283. url:"/pages/toOrder/index"
  284. })
  285. }else{
  286. uni.showToast({
  287. title:"请选择商品",
  288. icon:"none"
  289. })
  290. }
  291. },
  292. // 删除商品
  293. delGoods(){
  294. let ids = this.getCheckGoods(0)
  295. if(ids.length){
  296. uni.$emit("delCartGood", ids)
  297. }else{
  298. uni.showToast({
  299. title:"请选择要删除的商品",
  300. icon:"none"
  301. })
  302. }
  303. },
  304. // 更改商品数量
  305. goodsNumsChange(e,cindex){
  306. console.log(e,cindex)
  307. let item = this.cartList[cindex]
  308. console.log(item)
  309. let row = item.shoppingCartGoodsList.find(k=> k.id == e.id)
  310. if(this.hasZgjindu(item)){
  311. uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
  312. }else{
  313. item.checked = false
  314. row.checked = false
  315. this.cartList.splice()
  316. uni.showToast({
  317. icon: 'none',
  318. title: '此分类的商品乐豆合计需要满'+item.goldLimit+'乐豆才可以购买'
  319. })
  320. }
  321. }
  322. },
  323. }
  324. </script>
  325. <style lang="scss">
  326. page{
  327. height: 100%;
  328. }
  329. .cart-pages{
  330. width: 100%;
  331. height: 100%;
  332. display: flex;
  333. flex-direction: column;
  334. .noData{
  335. padding-top: 150upx;
  336. }
  337. .cart-bar{
  338. display: flex;
  339. justify-content: space-between;
  340. padding:20upx;
  341. .edit{
  342. color: #666;
  343. }
  344. .save{
  345. color: #00aaff;
  346. }
  347. .special-val{
  348. color: #FA3534;
  349. font-weight: bold;
  350. margin: 0 10rpx;
  351. }
  352. }
  353. .goods-list{
  354. flex-grow: 1;
  355. overflow: auto;
  356. .goods-class-box{
  357. background: #FFFFFF;
  358. box-shadow: 1px 1px 3px #eee;
  359. margin-bottom: 20upx;
  360. .goods-class-head{
  361. display: flex;
  362. align-items: center;
  363. padding: 20upx;
  364. border-bottom: 1px solid #F8F8F8;
  365. justify-content: space-between;
  366. .des{
  367. display: flex;
  368. align-items: center;
  369. font-size: 26upx;
  370. color: #999;
  371. text{
  372. color: #FA3534;
  373. }
  374. }
  375. }
  376. }
  377. .goods-item{
  378. padding: 20upx;
  379. display: flex;
  380. align-items: center;
  381. border-bottom: 1px solid #F8F8F8;
  382. &:last-child{
  383. border: 0;
  384. }
  385. .checkbox{
  386. width: 60rpx;
  387. overflow: hidden;
  388. }
  389. .goods-info{
  390. display: flex;
  391. align-items: center;
  392. flex-grow: 1;
  393. .goods-imgs{
  394. position: relative;
  395. .goods-staus{
  396. width: 100%;
  397. height: 100%;
  398. position: absolute;
  399. z-index: 10000;
  400. border-radius: 15rpx;
  401. background: rgba($color: #000000, $alpha: 0.4);
  402. text-align: center;
  403. line-height: 140rpx;
  404. left: 0;
  405. top: 0;
  406. color: #eee;
  407. font-size: 24upx;
  408. font-weight: bold;
  409. }
  410. }
  411. .goods-text{
  412. padding-left: 20upx;
  413. flex-grow: 1;
  414. .good-name{
  415. font-weight: bold;
  416. word-break: break-all;
  417. }
  418. }
  419. }
  420. .goods-price{
  421. display: flex;
  422. align-items: center;
  423. justify-content: space-between;
  424. padding-top: 20upx;
  425. >view{
  426. &:first-child{
  427. font-size: 22upx;
  428. display: flex;
  429. align-items: center;
  430. text{
  431. color: red;
  432. font-size: 32upx;
  433. margin-right: 6upx;
  434. font-weight: bold;
  435. }
  436. }
  437. }
  438. }
  439. }
  440. }
  441. .cart-submit{
  442. padding: 20upx;
  443. background: #FFFFFF;
  444. box-shadow: 1px 1px 3px #eee;
  445. border-top: 1px solid #eee;
  446. display: flex;
  447. align-items: center;
  448. justify-content: space-between;
  449. >view{
  450. &:last-child{
  451. display: flex;
  452. align-items: center;
  453. font-size: 26upx;
  454. text{
  455. color: red;
  456. font-size: 40upx;
  457. }
  458. > view{
  459. padding-right: 50upx;
  460. }
  461. .heji{
  462. display: flex;
  463. align-items: center;
  464. font-weight: bold;
  465. }
  466. }
  467. }
  468. }
  469. }
  470. </style>