cart.vue 11 KB

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