景徳镇旅游微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

163 lines
3.2 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <view class="page">
  3. <navbar title="购物车" leftClick @leftClick="$utils.navigateBack" />
  4. <view class="user">
  5. <uv-checkbox-group
  6. shape="circle"
  7. v-model="cartCheckboxValue">
  8. <uv-swipe-action>
  9. <view
  10. v-for="(item, index) in cartList"
  11. :key="index">
  12. <view style="margin-top: 20rpx;"></view>
  13. <uv-swipe-action-item
  14. :options="options"
  15. @click="delCart(item, index)">
  16. <view class="item">
  17. <view class="checkbox">
  18. <uv-checkbox
  19. :name="item.shopcar.id"
  20. activeColor="#FA5A0A"
  21. size="40rpx"
  22. icon-size="35rpx"
  23. ></uv-checkbox>
  24. </view>
  25. <image
  26. class="image"
  27. :src="item.wares.waresImage"
  28. mode=""></image>
  29. <view class="info">
  30. <view class="title">
  31. <view class="">
  32. {{ item.wares.waresTitle }}
  33. </view>
  34. <view class="">
  35. <uv-number-box v-model="item.shopcar.shopcarNumber"
  36. @change="e => valChange(item, e)"></uv-number-box>
  37. </view>
  38. </view>
  39. <!-- <view class="unit">
  40. 规格{{ item.unit }}
  41. <uv-icon name="arrow-down"></uv-icon>
  42. </view> -->
  43. <view class="price">
  44. <text>{{ item.wares.waresPrice }}</text>
  45. </view>
  46. </view>
  47. </view>
  48. </uv-swipe-action-item>
  49. </view>
  50. </uv-swipe-action>
  51. </uv-checkbox-group>
  52. <cartAction/>
  53. </view>
  54. <tabber select="3" />
  55. </view>
  56. </template>
  57. <script>
  58. import cartAction from '../components/product/cartAction.vue'
  59. import { mapState } from 'vuex'
  60. export default {
  61. components: {
  62. cartAction
  63. },
  64. data() {
  65. return {
  66. options: [
  67. {
  68. text: '删除',
  69. style: {
  70. backgroundColor: '#FA5A0A'
  71. }
  72. },
  73. ],
  74. }
  75. },
  76. computed: {
  77. ...mapState(['cartList', 'cartCheckboxValue']),
  78. },
  79. onShow() {
  80. this.$store.commit('getCartList')
  81. },
  82. methods: {
  83. valChange(item, e){
  84. this.$api('updateShopcar', {
  85. id : item.shopcar.id,
  86. shopcarNumber : e.value,
  87. })
  88. },
  89. // 删除购物车
  90. delCart(item, index){
  91. this.$api('deleteShopcar', {
  92. shopcarId : item.shopcar.id
  93. }, res => {
  94. if(res.code == 200){
  95. this.$store.commit('getCartList')
  96. uni.showToast({
  97. title: '删除成功',
  98. });
  99. }
  100. })
  101. },
  102. }
  103. }
  104. </script>
  105. <style scoped lang="scss">
  106. .page {
  107. padding-bottom: 200rpx;
  108. /deep/ .uv-swipe-action{
  109. width: 100%;
  110. }
  111. }
  112. .user {
  113. .item{
  114. background-color: #fff;
  115. display: flex;
  116. padding: 30rpx;
  117. .checkbox{
  118. display: flex;
  119. justify-content: center;
  120. align-items: center;
  121. }
  122. .image{
  123. width: 200rpx;
  124. height: 200rpx;
  125. border-radius: 20rpx;
  126. }
  127. .info{
  128. flex: 1;
  129. .title{
  130. display: flex;
  131. padding: 10rpx 20rpx;
  132. justify-content: space-between;
  133. }
  134. .unit{
  135. font-size: 24rpx;
  136. padding: 10rpx 20rpx;
  137. color: #717171;
  138. display: flex;
  139. align-items: center;
  140. }
  141. .price{
  142. color: $uni-color;
  143. font-size: 28rpx;
  144. padding: 10rpx 20rpx;
  145. text{
  146. font-size: 36rpx;
  147. font-weight: 900;
  148. }
  149. }
  150. }
  151. }
  152. }
  153. </style>