敢为人鲜小程序前端代码仓库
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.

355 lines
9.7 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="page">
  3. <navbar></navbar>
  4. <text class="control-text" @tap="isManaged = !isManaged">{{ isManaged ? '退出管理' : '管理' }}</text>
  5. <view class="cart-items">
  6. <uv-checkbox-group shape="circle" v-model="checkboxValue" @change="toggleSelect">
  7. <view v-for="(item, index) in cartData.items" :key="item.id" class="cart-item">
  8. <view class="checkbox">
  9. <uv-checkbox :key="index" :name="item.id" size="40rpx" iconSize="35rpx" activeColor="#019245" />
  10. </view>
  11. <view class="item-content">
  12. <image class="food-image" :src="item.image" mode="aspectFill" />
  13. <view class="food-info">
  14. <text class="food-name">{{ item.name }}</text>
  15. <view class="food-sold">
  16. <uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon>
  17. <text>已售出 {{ item.sold }}</text>
  18. </view>
  19. <view class="food-price-row">
  20. <text class="food-price">
  21. <text style="font-size: 22rpx; margin-right: 6rpx;">¥</text>
  22. {{ item.price.toFixed(1) }}
  23. </text>
  24. <view class="number-box">
  25. <view class="number-btn minus" @tap="decreaseQuantity(item)">
  26. <text>-</text>
  27. </view>
  28. <text class="number-value">{{ item.quantity }}</text>
  29. <view class="number-btn plus" @tap="increaseQuantity(item)">
  30. <text>+</text>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. </uv-checkbox-group>
  38. <uv-empty mode="car" style="padding-top: 300rpx;" v-if="!cartData.items.length"
  39. text="购物车空空如也~" />
  40. </view>
  41. <view class="cart-footer">
  42. <view class="select-all">
  43. <uv-checkbox-group v-model="allCheckbox">
  44. <uv-checkbox size="40rpx" iconSize="35rpx" activeColor="#019245" shape="circle" name="all"
  45. @change="toggleSelectAll" />
  46. </uv-checkbox-group>
  47. <text>全选</text>
  48. </view>
  49. <view class="cart-total">
  50. <text v-if="!isManaged" style="font-size: 24rpx; color: #999;">已选{{ cartData.selectedCount }}</text>
  51. <text v-if="!isManaged">合计</text>
  52. <text v-if="!isManaged" class="total-price">¥{{ (cartData.totalPrice).toFixed(1) }}</text>
  53. <view v-if="isManaged" class="checkout-btn checkbox-collect" @tap="addCollect">
  54. <text>添加收藏</text>
  55. </view>
  56. </view>
  57. <view v-if="!isManaged" class="checkout-btn checkbox-primary" @tap="checkout">
  58. <text>去下单</text>
  59. </view>
  60. <view v-if="isManaged" class="checkout-btn checkbox-primary" @tap="deleteCart">
  61. <text>删除</text>
  62. </view>
  63. </view>
  64. <tabber select="cart" />
  65. </view>
  66. </template>
  67. <script>
  68. import tabber from '@/components/base/tabbar.vue'
  69. import { mockCartData } from '@/static/js/mockCartData.js'
  70. import navbar from '@/components/base/navbar.vue'
  71. export default {
  72. components: {
  73. tabber,
  74. navbar
  75. },
  76. data() {
  77. return {
  78. cartData: mockCartData,
  79. checkboxValue: [],
  80. isManaged: false
  81. }
  82. },
  83. computed: {
  84. allSelected() {
  85. return this.cartData.items.every(item => this.checkboxValue.includes(item.id))
  86. },
  87. // 全选的值
  88. allCheckbox(){
  89. return this.allSelected ? ['all'] : []
  90. }
  91. },
  92. methods: {
  93. toggleSelect(item) {
  94. this.updateCart();
  95. },
  96. toggleSelectAll() {
  97. if (this.allSelected){
  98. this.checkboxValue = []
  99. }else{
  100. this.checkboxValue = this.cartData.items.map(item => item.id)
  101. }
  102. this.updateCart();
  103. },
  104. increaseQuantity(item) {
  105. item.quantity += 1;
  106. this.updateCart();
  107. },
  108. decreaseQuantity(item) {
  109. if (item.quantity > 1) {
  110. item.quantity -= 1;
  111. this.updateCart();
  112. }
  113. },
  114. updateCart() {
  115. // 计算选中的商品数量
  116. this.cartData.selectedCount = this.checkboxValue.length;
  117. // 计算总价
  118. this.cartData.totalPrice = this.cartData.items.reduce((total, item) => {
  119. if (this.checkboxValue.includes(item.id)){
  120. total += item.price * item.quantity
  121. }
  122. return total
  123. }, 0)
  124. },
  125. // 结账
  126. checkout() {
  127. // const selectedItems = this.cartData.items.filter(item => item.selected);
  128. if (this.checkboxValue.length === 0) {
  129. uni.showToast({
  130. title: '请选择商品',
  131. icon: 'none'
  132. });
  133. return;
  134. }
  135. // 跳转到创建订单页面
  136. uni.navigateTo({
  137. url: '/pages_order/order/newOrderDetail?status=pending'
  138. });
  139. },
  140. // 添加收藏
  141. addCollect(){
  142. if (!this.checkboxValue.length) {
  143. uni.showToast({
  144. title: '请选择商品',
  145. icon: 'none'
  146. });
  147. return;
  148. }
  149. uni.showLoading({
  150. title: '添加收藏中...'
  151. })
  152. setTimeout(() => {
  153. uni.hideLoading()
  154. uni.showToast({
  155. title: '添加收藏成功',
  156. })
  157. // 编写收藏函数的调用
  158. }, 800)
  159. },
  160. // 删除购物车
  161. deleteCart(){
  162. if (!this.checkboxValue.length) {
  163. uni.showToast({
  164. title: '请选择商品',
  165. icon: 'none'
  166. });
  167. return;
  168. }
  169. uni.showLoading({
  170. title: '删除中...'
  171. })
  172. setTimeout(() => {
  173. uni.hideLoading()
  174. uni.showToast({
  175. title: '删除成功',
  176. })
  177. this.cartData.items = this.cartData.items.filter(item => !this.checkboxValue.includes(item.id))
  178. this.checkboxValue = []
  179. this.updateCart()
  180. // 编写删除函数的调用
  181. }, 800)
  182. }
  183. }
  184. }
  185. </script>
  186. <style lang="scss" scoped>
  187. .page {
  188. // background-color: #f5f5f5;
  189. // padding-bottom: 120rpx;
  190. // background-color: red;
  191. position: relative;
  192. .cart-items {
  193. .cart-item {
  194. width: 100%;
  195. display: flex;
  196. align-items: center;
  197. background-color: #fff;
  198. padding: 20rpx;
  199. margin-bottom: 20rpx;
  200. border-radius: 10rpx;
  201. .checkbox {
  202. margin-right: 20rpx;
  203. display: flex;
  204. align-items: center;
  205. }
  206. .item-content {
  207. flex: 1;
  208. display: flex;
  209. .food-image {
  210. width: 150rpx;
  211. height: 150rpx;
  212. margin-right: 20rpx;
  213. }
  214. .food-info {
  215. flex: 1;
  216. display: flex;
  217. flex-direction: column;
  218. justify-content: space-around;
  219. .food-name {
  220. font-size: 28rpx;
  221. margin-bottom: 10rpx;
  222. font-weight: 500;
  223. }
  224. .food-sold {
  225. display: flex;
  226. align-items: center;
  227. font-size: 24rpx;
  228. color: $uni-color-third;
  229. margin-bottom: 10rpx;
  230. }
  231. .food-price-row {
  232. display: flex;
  233. justify-content: space-between;
  234. align-items: center;
  235. .food-price {
  236. color: #ff0000;
  237. font-size: 32rpx;
  238. }
  239. .number-box {
  240. display: flex;
  241. align-items: center;
  242. border-radius: 28rpx;
  243. margin-right: 20rpx;
  244. contain: content;
  245. border: 2rpx solid $uni-color-third;
  246. .number-btn {
  247. width: 50rpx;
  248. height: 50rpx;
  249. display: flex;
  250. justify-content: center;
  251. align-items: center;
  252. }
  253. .number-value {
  254. width: 50rpx;
  255. height: 50rpx;
  256. display: flex;
  257. justify-content: center;
  258. align-items: center;
  259. font-size: 28rpx;
  260. border-left: 2rpx solid $uni-color-third;
  261. border-right: 2rpx solid $uni-color-third;
  262. }
  263. }
  264. }
  265. }
  266. }
  267. }
  268. }
  269. .cart-footer {
  270. position: fixed;
  271. bottom: 120rpx;
  272. // bottom: calc(120rpx + env(safe-area-inset-bottom));
  273. left: 0;
  274. width: 100%;
  275. height: 100rpx;
  276. background-color: #fff;
  277. display: flex;
  278. align-items: center;
  279. padding: 0 20rpx ;
  280. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  281. box-sizing: border-box;
  282. .select-all {
  283. display: flex;
  284. align-items: center;
  285. font-size: 28rpx;
  286. text {
  287. margin-left: 10rpx;
  288. }
  289. }
  290. .cart-total {
  291. flex: 1;
  292. display: flex;
  293. align-items: center;
  294. justify-content: flex-end;
  295. font-size: 28rpx;
  296. margin-right: 20rpx;
  297. // background-color: red;
  298. .total-price {
  299. color: #ff0000;
  300. font-size: 32rpx;
  301. font-weight: bold;
  302. margin-left: 10rpx;
  303. }
  304. }
  305. .checkout-btn {
  306. width: 200rpx;
  307. height: 60rpx;
  308. display: flex;
  309. justify-content: center;
  310. align-items: center;
  311. border-radius: 35rpx;
  312. font-size: 28rpx;
  313. }
  314. .checkbox-primary{
  315. background-color: #019245;
  316. color: #fff;
  317. }
  318. .checkbox-collect{
  319. color: $uni-color;
  320. background-color: $uni-color-fourth;
  321. }
  322. }
  323. .control-text{
  324. position: absolute;
  325. right: 150rpx;
  326. top: 60rpx;
  327. font-size: 26rpx;
  328. color: #fff;
  329. z-index: 10000;
  330. }
  331. }
  332. </style>