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

388 lines
10 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
  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.records" :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.goods.image" mode="aspectFill" />
  13. <view class="food-info">
  14. <text class="food-name">{{ item.goods.title }}</text>
  15. <view class="food-sold">
  16. <uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon>
  17. <text>已售出 {{ item.goods.sales }}</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.goods.price }}
  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.num }}</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.records || !cartData.records.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;">已选{{ checkboxValue.length }}</text>
  51. <text v-if="!isManaged">合计</text>
  52. <text v-if="!isManaged" class="total-price">¥{{ (totalPrice).toFixed(2) }}</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: {
  79. records: []
  80. },
  81. checkboxValue: [],
  82. isManaged: false,
  83. }
  84. },
  85. computed: {
  86. allSelected() {
  87. return this.cartData.records.every(item => this.checkboxValue.includes(item.id))
  88. },
  89. // 全选的值
  90. allCheckbox(){
  91. return this.allSelected ? ['all'] : []
  92. },
  93. totalPrice(){
  94. return this.cartData.records.reduce((total, item) => {
  95. if (this.checkboxValue.includes(item.id)){
  96. total += item.goods.price * item.num
  97. }
  98. return total
  99. }, 0)
  100. }
  101. },
  102. methods: {
  103. // 获取购物车数据
  104. getCartData(){
  105. this.$api('queryShopcarList', {}, res => {
  106. if (res.code == 200){
  107. this.cartData = res.result
  108. }
  109. })
  110. },
  111. modifyCart(item){
  112. this.$api('addShopcar', {
  113. goodsId: item.goodsId,
  114. id: item.id,
  115. num: item.num
  116. }, res => {
  117. console.log(res);
  118. })
  119. },
  120. // toggleSelect(item) {
  121. // this.updateCart();
  122. // },
  123. toggleSelectAll() {
  124. console.log(111);
  125. if (this.allSelected){
  126. this.checkboxValue = []
  127. }else{
  128. this.checkboxValue = this.cartData.records.map(item => item.id)
  129. }
  130. // this.updateCart();
  131. },
  132. increaseQuantity(item) {
  133. item.num += 1;
  134. this.modifyCart(item)
  135. // this.updateCart();
  136. },
  137. decreaseQuantity(item) {
  138. if (item.num > 1) {
  139. item.num -= 1;
  140. this.modifyCart(item)
  141. }
  142. },
  143. updateCart() {
  144. // // 计算选中的商品数量
  145. // this.cartData.selectedCount = this.checkboxValue.length;
  146. // // 计算总价
  147. // this.cartData.totalPrice = this.cartData.items.reduce((total, item) => {
  148. // if (this.checkboxValue.includes(item.id)){
  149. // total += item.price * item.quantity
  150. // }
  151. // return total
  152. // }, 0)
  153. },
  154. // 结账
  155. checkout() {
  156. // const selectedItems = this.cartData.items.filter(item => item.selected);
  157. if (this.checkboxValue.length === 0) {
  158. uni.showToast({
  159. title: '请选择商品',
  160. icon: 'none'
  161. });
  162. return;
  163. }
  164. // 跳转到创建订单页面
  165. uni.navigateTo({
  166. url: '/pages_order/order/newOrderDetail?status=pending'
  167. });
  168. },
  169. // 添加收藏
  170. addCollect(){
  171. if (!this.checkboxValue.length) {
  172. uni.showToast({
  173. title: '请选择商品',
  174. icon: 'none'
  175. });
  176. return;
  177. }
  178. uni.showLoading({
  179. title: '添加收藏中...'
  180. })
  181. setTimeout(() => {
  182. uni.hideLoading()
  183. uni.showToast({
  184. title: '添加收藏成功',
  185. })
  186. // 编写收藏函数的调用
  187. }, 800)
  188. },
  189. // 删除购物车
  190. // deleteCart(){
  191. // if (!this.checkboxValue.length) {
  192. // uni.showToast({
  193. // title: '请选择商品',
  194. // icon: 'none'
  195. // });
  196. // return;
  197. // }
  198. // uni.showLoading({
  199. // title: '删除中...'
  200. // })
  201. // setTimeout(() => {
  202. // uni.hideLoading()
  203. // uni.showToast({
  204. // title: '删除成功',
  205. // })
  206. // this.cartData.items = this.cartData.items.filter(item => !this.checkboxValue.includes(item.id))
  207. // this.checkboxValue = []
  208. // this.updateCart()
  209. // // 编写删除函数的调用
  210. // }, 800)
  211. // }
  212. },
  213. onShow(){
  214. this.getCartData()
  215. }
  216. }
  217. </script>
  218. <style lang="scss" scoped>
  219. .page {
  220. // background-color: #f5f5f5;
  221. // padding-bottom: 120rpx;
  222. // background-color: red;
  223. position: relative;
  224. .cart-items {
  225. .cart-item {
  226. width: 100%;
  227. display: flex;
  228. align-items: center;
  229. background-color: #fff;
  230. padding: 20rpx;
  231. margin-bottom: 20rpx;
  232. border-radius: 10rpx;
  233. .checkbox {
  234. margin-right: 20rpx;
  235. display: flex;
  236. align-items: center;
  237. }
  238. .item-content {
  239. flex: 1;
  240. display: flex;
  241. .food-image {
  242. width: 150rpx;
  243. height: 150rpx;
  244. margin-right: 20rpx;
  245. }
  246. .food-info {
  247. flex: 1;
  248. display: flex;
  249. flex-direction: column;
  250. justify-content: space-around;
  251. .food-name {
  252. font-size: 28rpx;
  253. margin-bottom: 10rpx;
  254. font-weight: 500;
  255. }
  256. .food-sold {
  257. display: flex;
  258. align-items: center;
  259. font-size: 24rpx;
  260. color: $uni-color-third;
  261. margin-bottom: 10rpx;
  262. }
  263. .food-price-row {
  264. display: flex;
  265. justify-content: space-between;
  266. align-items: center;
  267. .food-price {
  268. color: #ff0000;
  269. font-size: 32rpx;
  270. }
  271. .number-box {
  272. display: flex;
  273. align-items: center;
  274. border-radius: 28rpx;
  275. margin-right: 20rpx;
  276. contain: content;
  277. border: 2rpx solid $uni-color-third;
  278. .number-btn {
  279. width: 50rpx;
  280. height: 50rpx;
  281. display: flex;
  282. justify-content: center;
  283. align-items: center;
  284. }
  285. .number-value {
  286. width: 50rpx;
  287. height: 50rpx;
  288. display: flex;
  289. justify-content: center;
  290. align-items: center;
  291. font-size: 28rpx;
  292. border-left: 2rpx solid $uni-color-third;
  293. border-right: 2rpx solid $uni-color-third;
  294. }
  295. }
  296. }
  297. }
  298. }
  299. }
  300. }
  301. .cart-footer {
  302. position: fixed;
  303. bottom: calc(120rpx + env(safe-area-inset-bottom));
  304. left: 0;
  305. width: 100%;
  306. height: 100rpx;
  307. background-color: #fff;
  308. display: flex;
  309. align-items: center;
  310. padding: 0 20rpx ;
  311. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  312. box-sizing: border-box;
  313. .select-all {
  314. display: flex;
  315. align-items: center;
  316. font-size: 28rpx;
  317. text {
  318. margin-left: 10rpx;
  319. }
  320. }
  321. .cart-total {
  322. flex: 1;
  323. display: flex;
  324. align-items: center;
  325. justify-content: flex-end;
  326. font-size: 28rpx;
  327. margin-right: 20rpx;
  328. // background-color: red;
  329. .total-price {
  330. color: $uni-color-second;
  331. font-size: 32rpx;
  332. font-weight: bold;
  333. margin-left: 10rpx;
  334. }
  335. }
  336. .checkout-btn {
  337. width: 200rpx;
  338. height: 60rpx;
  339. display: flex;
  340. justify-content: center;
  341. align-items: center;
  342. border-radius: 35rpx;
  343. font-size: 28rpx;
  344. }
  345. .checkbox-primary{
  346. background-color: $uni-color;
  347. color: #fff;
  348. }
  349. .checkbox-collect{
  350. color: $uni-color;
  351. background-color: $uni-color-fourth;
  352. }
  353. }
  354. .control-text{
  355. position: absolute;
  356. right: 150rpx;
  357. top: calc(env(safe-area-inset-bottom) + 40rpx);
  358. font-size: 26rpx;
  359. color: #fff;
  360. z-index: 10000;
  361. }
  362. }
  363. </style>