cart.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  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. onLoad() {
  143. this.hasCheckAll()
  144. },
  145. methods: {
  146. // 获取当前选择的商品, type: 0 删除,1 立即下单
  147. getCheckGoods(type){
  148. let arr = this.cartList
  149. let goods = []
  150. arr.map(item=>{
  151. item.shoppingCartGoodsList.map(a =>{
  152. if(a.checked){
  153. goods.push(type?a:a.id)
  154. }
  155. })
  156. })
  157. return goods
  158. },
  159. // 全选 或 取消全选
  160. checkAllChange(e) {
  161. let arr = this.cartList
  162. arr.map(item=>{
  163. item.checked = e.value
  164. item.shoppingCartGoodsList.map(goods=>{
  165. goods.checked = e.value
  166. })
  167. })
  168. arr.splice()
  169. },
  170. // 每个分类的全选
  171. goodsClasChange(e){
  172. console.log(e);
  173. let index = this.cartList.findIndex(item => item.goodsTypeNo == e.name)
  174. this.cartList[index].checked = e.value
  175. this.cartList[index].shoppingCartGoodsList.map(goods=>{
  176. goods.checked = e.value
  177. })
  178. // 判断是否全选
  179. this.hasCheckAll()
  180. },
  181. // 商品选择
  182. goodsChange(e){
  183. console.log(e)
  184. let a = e.name.split('-')
  185. let row = this.cartList[a[1]]
  186. let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
  187. row.shoppingCartGoodsList[goodsIndex].checked = e.value
  188. // 判断当前分类是否全选
  189. this.clasGoodsHasCheckAll(a[1])
  190. // 判断是否全选
  191. this.hasCheckAll()
  192. },
  193. // 判断某个分类是否全选
  194. clasGoodsHasCheckAll(index){
  195. let row = this.cartList[index]
  196. let len = row.shoppingCartGoodsList.length
  197. let clen = 0
  198. row.shoppingCartGoodsList.map(item=>{
  199. console.log(item.checked)
  200. if(item.checked){
  201. clen = clen + 1
  202. }
  203. })
  204. row.checked = clen == len
  205. this.cartList.splice()
  206. },
  207. // 是否全选
  208. hasCheckAll(){
  209. let list = this.cartList
  210. let len = list.length
  211. let clen = 0
  212. list.map(item => {
  213. if(item.checked){
  214. clen = clen + 1
  215. }
  216. })
  217. this.checkAll = clen == len
  218. list.splice()
  219. },
  220. // 编辑购物车
  221. editCart(){
  222. this.isEdit = !this.isEdit
  223. },
  224. // 立即下单
  225. toOrder(){
  226. let goods = this.getCheckGoods(1)
  227. console.log(goods)
  228. if(goods.length){
  229. this.$u.vuex("vuex_toOrderList",goods)
  230. uni.redirectTo({
  231. url:"/pages/toOrder/index"
  232. })
  233. }else{
  234. uni.showToast({
  235. title:"请选择商品",
  236. icon:"none"
  237. })
  238. }
  239. },
  240. // 删除商品
  241. delGoods(){
  242. let ids = this.getCheckGoods(0)
  243. if(ids.length){
  244. uni.$emit("delCartGood", ids)
  245. }else{
  246. uni.showToast({
  247. title:"请选择要删除的商品",
  248. icon:"none"
  249. })
  250. }
  251. },
  252. // 更改商品数量
  253. goodsNumsChange(e){
  254. console.log(e)
  255. uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
  256. }
  257. },
  258. }
  259. </script>
  260. <style lang="scss">
  261. page{
  262. height: 100%;
  263. }
  264. .cart-pages{
  265. width: 100%;
  266. height: 100%;
  267. display: flex;
  268. flex-direction: column;
  269. .cart-bar{
  270. display: flex;
  271. justify-content: space-between;
  272. padding:20upx;
  273. .edit{
  274. color: #666;
  275. }
  276. .save{
  277. color: #00aaff;
  278. }
  279. }
  280. .goods-list{
  281. flex-grow: 1;
  282. overflow: auto;
  283. .goods-class-box{
  284. background: #FFFFFF;
  285. box-shadow: 1px 1px 3px #eee;
  286. margin-bottom: 20upx;
  287. .goods-class-head{
  288. display: flex;
  289. align-items: center;
  290. padding: 20upx;
  291. border-bottom: 1px solid #F8F8F8;
  292. justify-content: space-between;
  293. .des{
  294. display: flex;
  295. align-items: center;
  296. font-size: 26upx;
  297. color: #999;
  298. text{
  299. color: #FA3534;
  300. }
  301. }
  302. }
  303. }
  304. .goods-item{
  305. padding: 20upx;
  306. display: flex;
  307. align-items: center;
  308. border-bottom: 1px solid #F8F8F8;
  309. &:last-child{
  310. border: 0;
  311. }
  312. .checkbox{
  313. width: 60rpx;
  314. overflow: hidden;
  315. }
  316. .goods-info{
  317. display: flex;
  318. align-items: center;
  319. flex-grow: 1;
  320. .goods-imgs{
  321. position: relative;
  322. .goods-staus{
  323. width: 100%;
  324. height: 100%;
  325. position: absolute;
  326. z-index: 10000;
  327. border-radius: 15rpx;
  328. background: rgba($color: #000000, $alpha: 0.4);
  329. text-align: center;
  330. line-height: 140rpx;
  331. left: 0;
  332. top: 0;
  333. color: #eee;
  334. font-size: 24upx;
  335. font-weight: bold;
  336. }
  337. }
  338. .goods-text{
  339. padding-left: 20upx;
  340. flex-grow: 1;
  341. .good-name{
  342. font-weight: bold;
  343. word-break: break-all;
  344. }
  345. }
  346. }
  347. .goods-price{
  348. display: flex;
  349. align-items: center;
  350. justify-content: space-between;
  351. padding-top: 20upx;
  352. >view{
  353. &:first-child{
  354. font-size: 22upx;
  355. display: flex;
  356. align-items: center;
  357. text{
  358. color: red;
  359. font-size: 32upx;
  360. margin-right: 6upx;
  361. font-weight: bold;
  362. }
  363. }
  364. }
  365. }
  366. }
  367. }
  368. .cart-submit{
  369. padding: 20upx;
  370. background: #FFFFFF;
  371. box-shadow: 1px 1px 3px #eee;
  372. border-top: 1px solid #eee;
  373. display: flex;
  374. align-items: center;
  375. justify-content: space-between;
  376. >view{
  377. &:last-child{
  378. display: flex;
  379. align-items: center;
  380. font-size: 26upx;
  381. text{
  382. color: red;
  383. font-size: 40upx;
  384. }
  385. > view{
  386. padding-right: 50upx;
  387. }
  388. .heji{
  389. display: flex;
  390. align-items: center;
  391. font-weight: bold;
  392. }
  393. }
  394. }
  395. }
  396. }
  397. </style>