hflllll
2 weeks ago
22 changed files with 859 additions and 304 deletions
Split View
Diff Options
-
+22 -2api/model/index.js
-
+1 -1api/model/order.js
-
+1 -1components/product/productItem.vue
-
+2 -1mixins/list.js
-
+3 -0pages.json
-
+1 -1pages/index/cart.vue
-
+16 -38pages/index/category.vue
-
+1 -1pages/index/center.vue
-
+66 -17pages/index/index.vue
-
+2 -2pages/index/oldIndex.vue
-
+25 -7pages/index/order.vue
-
+5 -5pages_order/auth/wxLogin.vue
-
+1 -1pages_order/auth/wxUserInfo.vue
-
+15 -12pages_order/components/order/placeOrder.vue
-
+32 -23pages_order/mine/coupon.vue
-
+2 -8pages_order/mine/share.vue
-
+18 -14pages_order/mine/unbindTeam.vue
-
+1 -1pages_order/mine/wallet.vue
-
+548 -0pages_order/order/cartOrder.vue
-
+83 -164pages_order/order/newOrderDetail.vue
-
+13 -4store/store.js
-
+1 -1utils/utils.js
+ 22
- 2
api/model/index.js
View File
+ 1
- 1
api/model/order.js
View File
+ 1
- 1
components/product/productItem.vue
View File
+ 2
- 1
mixins/list.js
View File
+ 3
- 0
pages.json
View File
+ 1
- 1
pages/index/cart.vue
View File
+ 16
- 38
pages/index/category.vue
View File
+ 1
- 1
pages/index/center.vue
View File
+ 66
- 17
pages/index/index.vue
View File
+ 2
- 2
pages/index/oldIndex.vue
View File
+ 25
- 7
pages/index/order.vue
View File
+ 5
- 5
pages_order/auth/wxLogin.vue
View File
+ 1
- 1
pages_order/auth/wxUserInfo.vue
View File
+ 15
- 12
pages_order/components/order/placeOrder.vue
View File
+ 32
- 23
pages_order/mine/coupon.vue
View File
+ 2
- 8
pages_order/mine/share.vue
View File
+ 18
- 14
pages_order/mine/unbindTeam.vue
View File
+ 1
- 1
pages_order/mine/wallet.vue
View File
+ 548
- 0
pages_order/order/cartOrder.vue
View File
| @ -0,0 +1,548 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <!-- 导航栏 --> | |||
| <navbar title="购物车支付 " leftClick @leftClick="navigateBack" bgColor="#019245" color="#fff" /> | |||
| <!-- 店铺信息 --> | |||
| <view class="shop-info"> | |||
| <view class="shop-header"> | |||
| <image class="shop-logo" :src="teamLeader.spotImage" mode="aspectFill"></image> | |||
| <view class="shop-name-container"> | |||
| <text class="shop-name"> {{ teamLeader.spotName }} </text> | |||
| <view class="shop-address"> | |||
| <view style="padding-top: 7rpx;"> | |||
| <!-- 需要置顶 --> | |||
| <uv-icon name="map-fill" color="#019245" size="28rpx"></uv-icon> | |||
| </view> | |||
| <text class="address-text">{{ teamLeader.area }} {{ teamLeader.address }}</text> | |||
| </view> | |||
| <view class="shop-phone"> | |||
| <view style="padding-top: 7rpx;"> | |||
| <!-- 需要置顶 --> | |||
| <uv-icon name="phone-fill" color="#019245" size="28rpx"></uv-icon> | |||
| </view> | |||
| <text class="phone-text">{{ teamLeader.phone }}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="order-status"> | |||
| <!-- 商品列表 --> | |||
| <view class="food-list"> | |||
| <view class="food-item" v-for="(food, index) in showedFoods" :key="food.id"> | |||
| <image class="food-image" :src="food.goods.image" mode="aspectFill" /> | |||
| <view class="food-info"> | |||
| <text class="food-name">{{ food.goods.title }}</text> | |||
| <view class="food-sold"> | |||
| <uv-icon name="bag" size="28rpx"></uv-icon> | |||
| <text>已售出 {{ food.goods.sales }}单</text> | |||
| </view> | |||
| <text class="food-price"> <text style="font-size: 20rpx;">￥</text> {{ food.goods.price }}</text> | |||
| <text class="food-count">×{{ food.num }}</text> | |||
| </view> | |||
| </view> | |||
| <view class="expand-more" @tap="showAllFoods = !showAllFoods" v-if="cartData.sendData.length > 3"> | |||
| <text>{{ showAllFoods ? '收起' : '展开' }} (共{{ cartData.sendData.length }}个)</text> | |||
| <uv-icon :name="showAllFoods ? 'arrow-up' : 'arrow-down'" size="28rpx"></uv-icon> | |||
| </view> | |||
| </view> | |||
| <!-- 订单信息 --> | |||
| <view class="order-info"> | |||
| <view class="info-item"> | |||
| <text class="info-label">合计:</text> | |||
| <!-- <text class="info-value price">￥{{ thePriceAll.toFixed(2) || 0 }}</text> --> | |||
| <text class="info-value price">￥{{ (cartData.priceAll || 0).toFixed(2) || 0 }}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="discount-info-container"> | |||
| <!-- 优惠信息 --> | |||
| <view class="discount-info"> | |||
| <view class="discount-header"> | |||
| <text>优惠</text> | |||
| </view> | |||
| <view class="discount-item" @click="gotoCoupon"> | |||
| <view class="discount-left"> | |||
| <image src="@/static/image/券.webp" mode="aspectFill" class="coupon-icon" v-if="couponData.couponId" /> | |||
| <view :style="{ color: couponData.couponId ? 'inherit' : '#ccc' }">{{ couponData.couponId_dictText || '点击选择优惠卷->' }} | |||
| </view> | |||
| <text class="discount-amount">{{ couponData.discount ? ('-' + couponData.discount) : '' }}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 备注 --> | |||
| <view class="remark-section"> | |||
| <view class="remark-header"> | |||
| <text>备注</text> | |||
| </view> | |||
| <view class="remark-content"> | |||
| <input type="text" v-model="orderDetail.remark" | |||
| placeholder="请输入您要备注的内容" placeholder-style="font-size: 28rpx" /> | |||
| </view> | |||
| </view> | |||
| <!-- 支付方式 --> | |||
| <uv-radio-group v-model="payMethod"> | |||
| <view class="payment-methods"> | |||
| <view class="payment-item"> | |||
| <uv-icon name="weixin-circle-fill" size="70rpx" color="#019245" /> | |||
| <text class="payment-name">微信支付</text> | |||
| <uv-radio activeColor="#019245" size="40rpx" name="0" /> | |||
| </view> | |||
| <view class="payment-item"> | |||
| <uv-icon name="red-packet" size="70rpx" color="#019245" /> | |||
| <text class="payment-name">账户余额<text class="balance-text">(余额: ￥{{ userInfo.balance | |||
| }})</text></text> | |||
| <uv-radio activeColor="#019245" size="40rpx" name="1" /> | |||
| </view> | |||
| </view> | |||
| </uv-radio-group> | |||
| <!-- 底部支付栏 --> | |||
| <view class="bottom-bar"> | |||
| <view class="total-section"> | |||
| <text class="total-label"> | |||
| 共{{ cartData.sendData.length }}个， | |||
| <text style="color: black;">合计</text> | |||
| </text> | |||
| <text class="total-price">￥{{ (pricePay || 0).toFixed(2) || 0 }}</text> | |||
| </view> | |||
| <view class="pay-button" @tap="handlePay">立即下单</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import navbar from '@/components/base/navbar.vue' | |||
| import { mapState, mapMutations } from 'vuex' | |||
| export default { | |||
| components: { | |||
| navbar | |||
| }, | |||
| data() { | |||
| return { | |||
| payMethod: '0', | |||
| showAllFoods: false, | |||
| teamLeader: {}, | |||
| thePriceAll: 0, | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState(['cartData', 'userInfo', 'couponData']), | |||
| showedFoods() { | |||
| return this.showAllFoods ? this.cartData.sendData : this.cartData.sendData.slice(0, 3) | |||
| }, | |||
| pricePay() { | |||
| return this.cartData.priceAll - (this.couponData.discount || 0) | |||
| }, | |||
| // 格式为 goodId,goodNum;goodId2,goodsNum | |||
| goodss() { | |||
| return this.cartData.sendData.map(item => { | |||
| return `${item.goodsId},${item.num},${item.goods.price * item.num}` | |||
| }).join(';') | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getLeaderData() | |||
| }, | |||
| onHide() { | |||
| this.clearCouponData() | |||
| }, | |||
| methods: { | |||
| ...mapMutations(['clearCouponData']), | |||
| // 返回上一页 | |||
| navigateBack() { | |||
| uni.navigateBack() | |||
| }, | |||
| // 获取团长信息 | |||
| getLeaderData() { | |||
| this.$api('queryMyLeader', {}, res => { | |||
| if (res.code === 200) { | |||
| this.teamLeader = res.result | |||
| }else { | |||
| uni.showModal({ | |||
| title: '提示', | |||
| content: res.message, | |||
| confirmColor: '#019245', | |||
| confirmText: '去绑定', | |||
| cancelText: '晚点再绑', | |||
| success: (result) => { | |||
| console.log('弹窗操作结果', result); | |||
| if (result.confirm) { | |||
| this.$utils.navigateTo({ | |||
| url: '/pages_order/mine/unbindTeam' | |||
| }) | |||
| } else { | |||
| this.$utils.navigateBack() | |||
| } | |||
| }, | |||
| fail: (err) => { | |||
| console.error('弹窗显示失败', err); | |||
| } | |||
| }) | |||
| } | |||
| }) | |||
| }, | |||
| // 处理支付 | |||
| handlePay() { | |||
| uni.showLoading({ | |||
| title: '支付处理中...' | |||
| }) | |||
| this.$api('createOrder', { | |||
| priceAll: this.cartData.priceAll, | |||
| pricePay: this.pricePay, | |||
| pricePreferential: this.couponData.discount || 0, | |||
| payType: this.payMethod, | |||
| leaderId: this.teamLeader.id, | |||
| goodss: this.goodss | |||
| }, res => { | |||
| uni.hideLoading() | |||
| if (res.code === 200) { | |||
| if (this.payMethod == '0') { | |||
| uni.requestPaymentWxPay(res) | |||
| .then(n => { | |||
| setTimeout(uni.redirectTo, 700, { | |||
| url: '/pages/index/order?tabIndex=1' | |||
| }) | |||
| }) | |||
| } else { | |||
| uni.showToast({ | |||
| title: '下单成功', | |||
| icon: 'success' | |||
| }) | |||
| setTimeout(uni.redirectTo, 700, { | |||
| url: '/pages/index/order?tabIndex=1' | |||
| }) | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| // 去优惠页面 | |||
| gotoCoupon() { | |||
| // 只有在待支付订单的情况下 才会进入优惠卷页面进行选择 | |||
| this.$utils.navigateTo({ | |||
| url: '/pages_order/mine/coupon?usein=1' | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| background-color: #f5f5f5; | |||
| min-height: 100vh; | |||
| padding-bottom: 120rpx; | |||
| } | |||
| .status-bar { | |||
| background-color: #019245; | |||
| padding: 30rpx; | |||
| color: #fff; | |||
| font-size: 32rpx; | |||
| font-weight: 500; | |||
| } | |||
| .shop-info { | |||
| background-color: #fff; | |||
| margin: 20rpx; | |||
| border-radius: 16rpx; | |||
| padding: 20rpx; | |||
| .shop-header { | |||
| display: flex; | |||
| align-items: center; | |||
| // background-color: red; | |||
| .shop-logo { | |||
| width: 150rpx; | |||
| height: 150rpx; | |||
| // border-radius: 10rpx; | |||
| margin-right: 20rpx; | |||
| } | |||
| .shop-name-container { | |||
| flex: 1; | |||
| .shop-name { | |||
| font-size: 30rpx; | |||
| font-weight: 500; | |||
| margin-bottom: 10rpx; | |||
| display: block; | |||
| } | |||
| .shop-address, | |||
| .shop-phone { | |||
| display: flex; | |||
| align-items: start; | |||
| font-size: 24rpx; | |||
| color: $uni-color-third; | |||
| margin-top: 8rpx; | |||
| .address-text, | |||
| .phone-text { | |||
| margin-left: 8rpx; | |||
| width: 80%; | |||
| white-space: wrap; | |||
| // overflow: hidden; | |||
| // text-overflow: ellipsis; | |||
| } | |||
| } | |||
| .shop-address-top { | |||
| display: flex; | |||
| align-items: start; | |||
| background-color: red; | |||
| // gap: 10rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .order-status { | |||
| background-color: #fff; | |||
| margin: 20rpx; | |||
| border-radius: 16rpx; | |||
| padding: 20rpx; | |||
| .food-list { | |||
| // gap: 20rpx; | |||
| // background-color: #019245; | |||
| .food-item { | |||
| display: flex; | |||
| margin-bottom: 20rpx; | |||
| // background-color: red; | |||
| .food-image { | |||
| width: 120rpx; | |||
| height: 120rpx; | |||
| // border-radius: 10rpx; | |||
| margin-right: 20rpx; | |||
| } | |||
| .food-info { | |||
| flex: 1; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-between; | |||
| position: relative; | |||
| .food-name { | |||
| font-size: 28rpx; | |||
| font-weight: 500; | |||
| } | |||
| .food-sold { | |||
| display: flex; | |||
| align-items: center; | |||
| font-size: 24rpx; | |||
| color: $uni-color-third; | |||
| } | |||
| .food-price { | |||
| font-size: 28rpx; | |||
| color: #f00; | |||
| } | |||
| .food-count { | |||
| color: black; | |||
| position: absolute; | |||
| bottom: 50%; | |||
| right: 0; | |||
| } | |||
| } | |||
| } | |||
| .expand-more { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| padding: 20rpx 0 0; | |||
| font-size: 24rpx; | |||
| color: $uni-color-third; | |||
| } | |||
| } | |||
| .order-info { | |||
| padding-top: 20rpx; | |||
| .info-item { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| margin-bottom: 15rpx; | |||
| font-size: 26rpx; | |||
| .info-label { | |||
| color: black; | |||
| } | |||
| .info-value { | |||
| color: #333; | |||
| &.price { | |||
| color: #f00; | |||
| font-weight: 500; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .discount-info-container { | |||
| background-color: #fff; | |||
| margin: 20rpx; | |||
| border-radius: 16rpx; | |||
| padding: 20rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 40rpx; | |||
| } | |||
| .discount-info { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| .discount-header { | |||
| font-size: 28rpx; | |||
| } | |||
| .discount-item { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| gap: 20rpx; | |||
| .discount-left { | |||
| display: flex; | |||
| align-items: center; | |||
| gap: 10rpx; | |||
| .coupon-icon { | |||
| width: 36rpx; | |||
| height: 36rpx; | |||
| margin-top: 6rpx; | |||
| } | |||
| } | |||
| .discount-amount { | |||
| color: #f00; | |||
| font-weight: 500; | |||
| } | |||
| .none-discount-amount { | |||
| color: gray; | |||
| font-weight: 500; | |||
| } | |||
| } | |||
| } | |||
| .remark-section { | |||
| display: flex; | |||
| // flex-direction: column; | |||
| gap: 40rpx; | |||
| // background-color: red; | |||
| align-items: center; | |||
| .remark-header { | |||
| font-size: 28rpx; | |||
| // font-weight: 500; | |||
| } | |||
| .remark-content { | |||
| font-size: 26rpx; | |||
| color: black; | |||
| min-height: 60rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| } | |||
| } | |||
| .payment-methods { | |||
| background-color: #fff; | |||
| width: 100%; | |||
| margin: 20rpx; | |||
| border-radius: 16rpx; | |||
| padding: 20rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 20rpx; | |||
| .payment-item { | |||
| display: flex; | |||
| align-items: center; | |||
| padding: 20rpx 0; | |||
| border-bottom: 1rpx solid #f5f5f5; | |||
| &:last-child { | |||
| border-bottom: none; | |||
| } | |||
| .payment-name { | |||
| flex: 1; | |||
| margin-left: 20rpx; | |||
| font-size: 28rpx; | |||
| .balance-text { | |||
| font-size: 24rpx; | |||
| color: $uni-color-third; | |||
| margin-left: 10rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .bottom-bar { | |||
| position: fixed; | |||
| bottom: 0; | |||
| left: 0; | |||
| right: 0; | |||
| height: 100rpx; | |||
| background-color: #fff; | |||
| display: flex; | |||
| align-items: center; | |||
| padding: 0 30rpx; | |||
| box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); | |||
| .total-section { | |||
| flex: 1; | |||
| .total-label { | |||
| font-size: 26rpx; | |||
| color: $uni-color-third; | |||
| } | |||
| .total-price { | |||
| font-size: 32rpx; | |||
| color: #f00; | |||
| margin-left: 10rpx; | |||
| } | |||
| } | |||
| .pay-button { | |||
| width: 240rpx; | |||
| height: 80rpx; | |||
| background-color: #019245; | |||
| color: #fff; | |||
| font-size: 30rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| border-radius: 40rpx; | |||
| } | |||
| } | |||
| </style> | |||