cart.vue 9.7 KB

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