cart.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  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 ret >= goldLimit
  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. },
  250. // 立即下单
  251. toOrder(){
  252. let goods = this.getCheckGoods(1)
  253. console.log(goods)
  254. if(goods.length){
  255. this.$u.vuex("vuex_toOrderList",goods)
  256. uni.redirectTo({
  257. url:"/pages/toOrder/index"
  258. })
  259. }else{
  260. uni.showToast({
  261. title:"请选择商品",
  262. icon:"none"
  263. })
  264. }
  265. },
  266. // 删除商品
  267. delGoods(){
  268. let ids = this.getCheckGoods(0)
  269. if(ids.length){
  270. uni.$emit("delCartGood", ids)
  271. }else{
  272. uni.showToast({
  273. title:"请选择要删除的商品",
  274. icon:"none"
  275. })
  276. }
  277. },
  278. // 更改商品数量
  279. goodsNumsChange(e){
  280. console.log(e)
  281. uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
  282. }
  283. },
  284. }
  285. </script>
  286. <style lang="scss">
  287. page{
  288. height: 100%;
  289. }
  290. .cart-pages{
  291. width: 100%;
  292. height: 100%;
  293. display: flex;
  294. flex-direction: column;
  295. .cart-bar{
  296. display: flex;
  297. justify-content: space-between;
  298. padding:20upx;
  299. .edit{
  300. color: #666;
  301. }
  302. .save{
  303. color: #00aaff;
  304. }
  305. }
  306. .goods-list{
  307. flex-grow: 1;
  308. overflow: auto;
  309. .goods-class-box{
  310. background: #FFFFFF;
  311. box-shadow: 1px 1px 3px #eee;
  312. margin-bottom: 20upx;
  313. .goods-class-head{
  314. display: flex;
  315. align-items: center;
  316. padding: 20upx;
  317. border-bottom: 1px solid #F8F8F8;
  318. justify-content: space-between;
  319. .des{
  320. display: flex;
  321. align-items: center;
  322. font-size: 26upx;
  323. color: #999;
  324. text{
  325. color: #FA3534;
  326. }
  327. }
  328. }
  329. }
  330. .goods-item{
  331. padding: 20upx;
  332. display: flex;
  333. align-items: center;
  334. border-bottom: 1px solid #F8F8F8;
  335. &:last-child{
  336. border: 0;
  337. }
  338. .checkbox{
  339. width: 60rpx;
  340. overflow: hidden;
  341. }
  342. .goods-info{
  343. display: flex;
  344. align-items: center;
  345. flex-grow: 1;
  346. .goods-imgs{
  347. position: relative;
  348. .goods-staus{
  349. width: 100%;
  350. height: 100%;
  351. position: absolute;
  352. z-index: 10000;
  353. border-radius: 15rpx;
  354. background: rgba($color: #000000, $alpha: 0.4);
  355. text-align: center;
  356. line-height: 140rpx;
  357. left: 0;
  358. top: 0;
  359. color: #eee;
  360. font-size: 24upx;
  361. font-weight: bold;
  362. }
  363. }
  364. .goods-text{
  365. padding-left: 20upx;
  366. flex-grow: 1;
  367. .good-name{
  368. font-weight: bold;
  369. word-break: break-all;
  370. }
  371. }
  372. }
  373. .goods-price{
  374. display: flex;
  375. align-items: center;
  376. justify-content: space-between;
  377. padding-top: 20upx;
  378. >view{
  379. &:first-child{
  380. font-size: 22upx;
  381. display: flex;
  382. align-items: center;
  383. text{
  384. color: red;
  385. font-size: 32upx;
  386. margin-right: 6upx;
  387. font-weight: bold;
  388. }
  389. }
  390. }
  391. }
  392. }
  393. }
  394. .cart-submit{
  395. padding: 20upx;
  396. background: #FFFFFF;
  397. box-shadow: 1px 1px 3px #eee;
  398. border-top: 1px solid #eee;
  399. display: flex;
  400. align-items: center;
  401. justify-content: space-between;
  402. >view{
  403. &:last-child{
  404. display: flex;
  405. align-items: center;
  406. font-size: 26upx;
  407. text{
  408. color: red;
  409. font-size: 40upx;
  410. }
  411. > view{
  412. padding-right: 50upx;
  413. }
  414. .heji{
  415. display: flex;
  416. align-items: center;
  417. font-weight: bold;
  418. }
  419. }
  420. }
  421. }
  422. }
  423. </style>