cart.vue 10 KB

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