景徳镇旅游微信小程序
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.

140 lines
2.6 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
  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. <view class="item">
  16. <view class="checkbox">
  17. <uv-checkbox
  18. :name="item.id"
  19. activeColor="#FA5A0A"
  20. size="40rpx"
  21. icon-size="35rpx"
  22. ></uv-checkbox>
  23. </view>
  24. <image
  25. class="image"
  26. src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
  27. mode=""></image>
  28. <view class="info">
  29. <view class="title">
  30. <view class="">
  31. {{ item.title }}
  32. </view>
  33. <view class="">
  34. <uv-number-box v-model="item.num"
  35. @change="valChange"></uv-number-box>
  36. </view>
  37. </view>
  38. <view class="unit">
  39. 规格{{ item.unit }}
  40. <uv-icon name="arrow-down"></uv-icon>
  41. </view>
  42. <view class="price">
  43. <text>{{ item.price }}</text>
  44. </view>
  45. </view>
  46. </view>
  47. </uv-swipe-action-item>
  48. </view>
  49. </uv-swipe-action>
  50. </uv-checkbox-group>
  51. <cartAction/>
  52. </view>
  53. <tabber select="3" />
  54. </view>
  55. </template>
  56. <script>
  57. import cartAction from '../components/product/cartAction.vue'
  58. import { mapState } from 'vuex'
  59. export default {
  60. components: {
  61. cartAction
  62. },
  63. data() {
  64. return {
  65. options: [
  66. {
  67. text: '删除',
  68. style: {
  69. backgroundColor: '#FA5A0A'
  70. }
  71. },
  72. ],
  73. }
  74. },
  75. computed: {
  76. ...mapState(['cartList', 'cartCheckboxValue']),
  77. },
  78. methods: {
  79. valChange(){
  80. },
  81. }
  82. }
  83. </script>
  84. <style scoped lang="scss">
  85. .page {
  86. padding-bottom: 200rpx;
  87. }
  88. .user {
  89. .item{
  90. background-color: #fff;
  91. display: flex;
  92. padding: 30rpx;
  93. .checkbox{
  94. display: flex;
  95. justify-content: center;
  96. align-items: center;
  97. }
  98. .image{
  99. width: 200rpx;
  100. height: 200rpx;
  101. border-radius: 20rpx;
  102. }
  103. .info{
  104. flex: 1;
  105. .title{
  106. display: flex;
  107. padding: 10rpx 20rpx;
  108. justify-content: space-between;
  109. }
  110. .unit{
  111. font-size: 24rpx;
  112. padding: 10rpx 20rpx;
  113. color: #717171;
  114. display: flex;
  115. align-items: center;
  116. }
  117. .price{
  118. color: $uni-color;
  119. font-size: 28rpx;
  120. padding: 10rpx 20rpx;
  121. text{
  122. font-size: 36rpx;
  123. font-weight: 900;
  124. }
  125. }
  126. }
  127. }
  128. }
  129. </style>