cart.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  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="30rpx" height="30rpx" 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="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
  56. </view>
  57. <view v-if="good.goods.inventoryQty>0">
  58. <u-number-box :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">{{checkAll?'取消':'全选'}}</u-checkbox>
  76. </view>
  77. <view v-if="!isEdit">
  78. <view class="heji">
  79. <view>总计:<text>450</text></view>
  80. <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
  81. </view>
  82. <u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder">立即下单</u-button>
  83. </view>
  84. <view v-else>
  85. <u-button size="mini" :custom-style="toOrderButton" type="error" @click="delGoods">删除</u-button>
  86. </view>
  87. </view>
  88. </view>
  89. </template>
  90. <script>
  91. export default {
  92. data() {
  93. return {
  94. toOrderButton: {
  95. borderRadius:'100rpx',
  96. fontSize:'30rpx',
  97. width: '180rpx',
  98. height: '60rpx'
  99. },
  100. checkAll: false,// 全选
  101. isEdit: false, // 是否编辑模式
  102. cartList: [] // 购物车列表
  103. };
  104. },
  105. computed: {
  106. count() {
  107. let arr = this.$store.state.vuex_cartList
  108. let count = 0
  109. arr.map(item=>{
  110. count = count + item.shoppingCartGoodsList.length
  111. if(!item.hasOwnProperty("checked")){
  112. item.checked = false
  113. }
  114. item.shoppingCartGoodsList.map(goods=>{
  115. if(!goods.hasOwnProperty("checked")){
  116. goods.checked = false
  117. }
  118. })
  119. })
  120. return count
  121. },
  122. },
  123. onLoad() {
  124. this.cartList = this.$store.state.vuex_cartList
  125. },
  126. methods: {
  127. // 获取当前选择的商品
  128. getCheckGoods(){
  129. let arr = this.cartList
  130. let goods = []
  131. arr.map(item=>{
  132. item.checked = e.value
  133. item.shoppingCartGoodsList.map(a =>{
  134. if(a.checked){
  135. goods.push(a.id)
  136. }
  137. })
  138. })
  139. return goods
  140. },
  141. // 全选 或 取消全选
  142. checkAllChange(e) {
  143. let arr = this.cartList
  144. arr.map(item=>{
  145. item.checked = e.value
  146. item.shoppingCartGoodsList.map(goods=>{
  147. goods.checked = e.value
  148. })
  149. })
  150. arr.splice()
  151. },
  152. // 每个分类的全选
  153. goodsClasChange(e){
  154. console.log(e);
  155. let index = this.cartList.findIndex(item => item.goodsTypeNo == e.name)
  156. this.cartList[index].checked = e.value
  157. this.cartList[index].shoppingCartGoodsList.map(goods=>{
  158. goods.checked = e.value
  159. })
  160. // 判断是否全选
  161. this.hasCheckAll()
  162. },
  163. // 商品选择
  164. goodsChange(e){
  165. console.log(e)
  166. let a = e.name.split('-')
  167. let row = this.cartList[a[1]]
  168. let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
  169. row.shoppingCartGoodsList[goodsIndex].checked = e.value
  170. // 判断当前分类是否全选
  171. this.clasGoodsHasCheckAll(a[1])
  172. // 判断是否全选
  173. this.hasCheckAll()
  174. },
  175. // 判断某个分类是否全选
  176. clasGoodsHasCheckAll(index){
  177. let row = this.cartList[index]
  178. let len = row.shoppingCartGoodsList.length
  179. let clen = 0
  180. row.shoppingCartGoodsList.map(item=>{
  181. console.log(item.checked)
  182. if(item.checked){
  183. clen = clen + 1
  184. }
  185. })
  186. row.checked = clen == len
  187. this.cartList.splice()
  188. },
  189. // 是否全选
  190. hasCheckAll(){
  191. let list = this.cartList
  192. let len = list.length
  193. let clen = 0
  194. list.map(item => {
  195. if(item.checked){
  196. clen = clen + 1
  197. }
  198. })
  199. this.checkAll = clen == len
  200. list.splice()
  201. },
  202. // 编辑购物车
  203. editCart(){
  204. this.isEdit = !this.isEdit
  205. },
  206. //立即下单
  207. toOrder(){
  208. uni.redirectTo({
  209. url:"/pages/toOrder/index"
  210. })
  211. }
  212. },
  213. }
  214. </script>
  215. <style lang="scss">
  216. page{
  217. height: 100%;
  218. }
  219. .cart-pages{
  220. width: 100%;
  221. height: 100%;
  222. display: flex;
  223. flex-direction: column;
  224. .cart-bar{
  225. display: flex;
  226. justify-content: space-between;
  227. padding:20upx;
  228. .edit{
  229. color: #666;
  230. }
  231. .save{
  232. color: #00aaff;
  233. }
  234. }
  235. .goods-list{
  236. flex-grow: 1;
  237. overflow: auto;
  238. .goods-class-box{
  239. background: #FFFFFF;
  240. box-shadow: 1px 1px 3px #eee;
  241. margin-bottom: 20upx;
  242. .goods-class-head{
  243. display: flex;
  244. align-items: center;
  245. padding: 20upx;
  246. border-bottom: 1px solid #F8F8F8;
  247. justify-content: space-between;
  248. .des{
  249. display: flex;
  250. align-items: center;
  251. font-size: 26upx;
  252. color: #999;
  253. text{
  254. color: #FA3534;
  255. }
  256. }
  257. }
  258. }
  259. .goods-item{
  260. padding: 20upx;
  261. display: flex;
  262. align-items: center;
  263. border-bottom: 1px solid #F8F8F8;
  264. &:last-child{
  265. border: 0;
  266. }
  267. .checkbox{
  268. width: 60rpx;
  269. overflow: hidden;
  270. }
  271. .goods-info{
  272. display: flex;
  273. align-items: center;
  274. flex-grow: 1;
  275. .goods-imgs{
  276. position: relative;
  277. .goods-staus{
  278. width: 100%;
  279. height: 100%;
  280. position: absolute;
  281. z-index: 10000;
  282. border-radius: 15rpx;
  283. background: rgba($color: #000000, $alpha: 0.4);
  284. text-align: center;
  285. line-height: 140rpx;
  286. left: 0;
  287. top: 0;
  288. color: #eee;
  289. font-size: 24upx;
  290. font-weight: bold;
  291. }
  292. }
  293. .goods-text{
  294. padding-left: 20upx;
  295. flex-grow: 1;
  296. .good-name{
  297. font-weight: bold;
  298. word-break: break-all;
  299. }
  300. }
  301. }
  302. .goods-price{
  303. display: flex;
  304. align-items: center;
  305. justify-content: space-between;
  306. padding-top: 20upx;
  307. >view{
  308. &:first-child{
  309. font-size: 22upx;
  310. display: flex;
  311. align-items: center;
  312. text{
  313. color: red;
  314. font-size: 32upx;
  315. margin-right: 6upx;
  316. font-weight: bold;
  317. }
  318. }
  319. }
  320. }
  321. }
  322. }
  323. .cart-submit{
  324. padding: 20upx;
  325. background: #FFFFFF;
  326. box-shadow: 1px 1px 3px #eee;
  327. border-top: 1px solid #eee;
  328. display: flex;
  329. align-items: center;
  330. justify-content: space-between;
  331. >view{
  332. &:last-child{
  333. display: flex;
  334. align-items: center;
  335. font-size: 26upx;
  336. text{
  337. color: red;
  338. font-size: 40upx;
  339. }
  340. > view{
  341. padding-right: 50upx;
  342. }
  343. .heji{
  344. display: flex;
  345. align-items: center;
  346. font-weight: bold;
  347. }
  348. }
  349. }
  350. }
  351. }
  352. </style>