青蛙卖大米小程序2024-11-24
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.

261 lines
4.9 KiB

6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
  1. <template>
  2. <view class="page">
  3. <navbar/>
  4. <view class="user">
  5. <uv-checkbox-group
  6. shape="circle"
  7. v-model="checkboxValue">
  8. <uv-swipe-action>
  9. <view
  10. v-for="(item, index) in list"
  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. <view class="action">
  52. <view class="icon">
  53. <image src="/static/image/cart/1.png" mode=""></image>
  54. <view class="num">
  55. {{ checkboxValue.length }}
  56. </view>
  57. </view>
  58. <view class="price">
  59. <view class="count">
  60. 合计
  61. <view class="">
  62. <text>{{ totalPrice }}</text>
  63. </view>
  64. </view>
  65. <view class="text">
  66. {{ checkboxValue.length }}已享受更低优惠
  67. </view>
  68. </view>
  69. <view class="btn">
  70. 去结算
  71. </view>
  72. </view>
  73. </view>
  74. <tabber select="cart" />
  75. </view>
  76. </template>
  77. <script>
  78. import tabber from '@/components/base/tabbar.vue'
  79. import mixinsList from '@/mixins/list.js'
  80. export default {
  81. mixins : [mixinsList],
  82. components: {
  83. tabber,
  84. },
  85. data() {
  86. return {
  87. value : 0,
  88. checkboxValue : [],
  89. options: [
  90. {
  91. text: '删除',
  92. style: {
  93. backgroundColor: '#FA5A0A'
  94. }
  95. },
  96. ],
  97. list : [
  98. {
  99. id : 1,
  100. title : '桌布租赁',
  101. num : 1,
  102. price : 299,
  103. unit : '120*40*75【桌子尺寸】',
  104. },
  105. {
  106. id : 2,
  107. title : '桌布租赁',
  108. num : 1,
  109. price : 299,
  110. unit : '120*40*75【桌子尺寸】',
  111. },
  112. ],
  113. mixinsListApi : 'getCartPageList',
  114. }
  115. },
  116. computed: {
  117. totalPrice(){
  118. if (!this.checkboxValue.length) {
  119. return 0
  120. }
  121. let price = 0
  122. this.list.forEach(n => {
  123. if(this.checkboxValue.includes(n.id)){
  124. price += n.price * n.num
  125. }
  126. })
  127. return price
  128. },
  129. },
  130. methods: {
  131. valChange(){
  132. },
  133. }
  134. }
  135. </script>
  136. <style scoped lang="scss">
  137. .page {
  138. padding-bottom: 200rpx;
  139. /deep/ .uv-swipe-action{
  140. width: 100%;
  141. }
  142. }
  143. .user {
  144. .item{
  145. background-color: #fff;
  146. display: flex;
  147. padding: 30rpx;
  148. .checkbox{
  149. display: flex;
  150. justify-content: center;
  151. align-items: center;
  152. }
  153. .image{
  154. width: 200rpx;
  155. height: 200rpx;
  156. border-radius: 20rpx;
  157. }
  158. .info{
  159. flex: 1;
  160. .title{
  161. display: flex;
  162. padding: 10rpx 20rpx;
  163. justify-content: space-between;
  164. }
  165. .unit{
  166. font-size: 24rpx;
  167. padding: 10rpx 20rpx;
  168. color: #717171;
  169. display: flex;
  170. align-items: center;
  171. }
  172. .price{
  173. color: $uni-color;
  174. font-size: 28rpx;
  175. padding: 10rpx 20rpx;
  176. text{
  177. font-size: 36rpx;
  178. font-weight: 900;
  179. }
  180. }
  181. }
  182. }
  183. .action{
  184. width: 700rpx;
  185. position: fixed;
  186. bottom: 220rpx;
  187. left: 25rpx;
  188. background-color: #fff;
  189. height: 100rpx;
  190. border-radius: 50rpx;
  191. box-shadow: 0 0 6rpx 6rpx #00000010;
  192. display: flex;
  193. justify-content: center;
  194. align-items: center;
  195. overflow: hidden;
  196. .icon{
  197. position: relative;
  198. width: 80rpx;
  199. height: 80rpx;
  200. margin: 0 20rpx;
  201. image{
  202. width: 80rpx;
  203. height: 80rpx;
  204. }
  205. .num{
  206. position: absolute;
  207. right: 10rpx;
  208. top: 0rpx;
  209. background-color: $uni-color;
  210. color: #fff;
  211. font-size: 18rpx;
  212. border-radius: 50%;
  213. height: 30rpx;
  214. width: 30rpx;
  215. display: flex;
  216. justify-content: center;
  217. align-items: center;
  218. }
  219. }
  220. .price{
  221. .count{
  222. display: flex;
  223. font-size: 26rpx;
  224. align-items: center;
  225. view{
  226. color: $uni-color;
  227. margin-left: 10rpx;
  228. text{
  229. font-size: 32rpx;
  230. font-weight: 900;
  231. }
  232. }
  233. }
  234. .text{
  235. font-size: 20rpx;
  236. color: #717171;
  237. }
  238. }
  239. .btn{
  240. margin-left: auto;
  241. background-color: $uni-color;
  242. height: 100%;
  243. padding: 0 50rpx;
  244. color: #fff;
  245. display: flex;
  246. justify-content: center;
  247. align-items: center;
  248. }
  249. }
  250. }
  251. </style>