|
|
@@ -1,52 +1,52 @@
|
|
|
<template>
|
|
|
- <view class="order-pay">
|
|
|
- <view class="top-tip">请对每家店铺分别进行付款</view>
|
|
|
- <template v-for="order in orderList">
|
|
|
- <view class="shop-info" :key="order.shopId">
|
|
|
- <view class="shop-name">{{ item.shopName }}</view>
|
|
|
- <view class="product-list">
|
|
|
- <template v-for="product in order.orderProductList">
|
|
|
- <view class="product" :key="product.orderProductId">
|
|
|
- <image class="cover" :src="product.productImage" mode="widthFix"></image>
|
|
|
- <view class="content">
|
|
|
- <view class="count">×{{ product.num }}</view>
|
|
|
- <view class="title">{{ product.name }}</view>
|
|
|
- <view class="unit">规格：{{ product.productUnit }}</view>
|
|
|
- <view class="tags">
|
|
|
- <template v-if="product.activeStatus">
|
|
|
- <view class="tag type1" v-if="userId === product.heUserId">促销</view>
|
|
|
- <view class="tag type1" v-else>自营</view>
|
|
|
- <view
|
|
|
- class="tag type2"
|
|
|
- v-if="product.ladderList && product.ladderList.length > 0"
|
|
|
- >
|
|
|
- 活动价
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <text class="active">￥{{ product.price | formatPrice }}</text>
|
|
|
- <text class="deleted">￥{{ product.normalPrice | formatPrice }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view class="total">
|
|
|
- <text v-if="order.eachDiscount">优惠：￥{{ order.eachDiscount }}</text>
|
|
|
- <text v-if="order.receiptAmount">已付：￥{{ order.receiptAmount }}</text>
|
|
|
- </view>
|
|
|
- <view class="foot" v-if="receiptStatus !== 3">
|
|
|
- <view class="price">
|
|
|
- <text>待付：</text>
|
|
|
- <text class="active">￥{{ order.restAmount | formatPrice }}</text>
|
|
|
- </view>
|
|
|
- <view class="submit" @click="onPayOrder(order)">付款</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
+ <view class="order-pay">
|
|
|
+ <view class="top-tip">请对每家店铺分别进行付款</view>
|
|
|
+ <template v-for="order in orderList">
|
|
|
+ <view class="shop-info" :key="order.shopId">
|
|
|
+ <view class="shop-name">{{ order.shopName }}</view>
|
|
|
+ <view class="product-list">
|
|
|
+ <template v-for="product in order.orderProductList">
|
|
|
+ <view class="product" :key="product.orderProductId">
|
|
|
+ <image class="cover" :src="product.productImage" mode="widthFix"></image>
|
|
|
+ <view class="content">
|
|
|
+ <view class="count">×{{ product.num }}</view>
|
|
|
+ <view class="title">{{ product.name }}</view>
|
|
|
+ <view class="unit">规格：{{ product.productUnit }}</view>
|
|
|
+ <view class="tags">
|
|
|
+ <template v-if="product.activeStatus">
|
|
|
+ <view class="tag type1" v-if="userId === product.heUserId">促销</view>
|
|
|
+ <view class="tag type1" v-else>自营</view>
|
|
|
+ <view
|
|
|
+ class="tag type2"
|
|
|
+ v-if="product.ladderList && product.ladderList.length > 0"
|
|
|
+ >
|
|
|
+ 活动价
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <text class="active">￥{{ product.price | formatPrice }}</text>
|
|
|
+ <text class="deleted">￥{{ product.normalPrice | formatPrice }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="total">
|
|
|
+ <text v-if="order.eachDiscount">优惠：￥{{ order.eachDiscount }}</text>
|
|
|
+ <text v-if="order.receiptAmount">已付：￥{{ order.receiptAmount }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="foot" v-if="order.receiptStatus !== 3">
|
|
|
+ <view class="price">
|
|
|
+ <text>待付：</text>
|
|
|
+ <text class="active">￥{{ order.restAmount | formatPrice }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="submit" @click="onPayOrder(order)">付款</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
|
|
|
- <!-- <view class="shop-info">
|
|
|
+ <!-- <view class="shop-info">
|
|
|
<view class="shop-name">采美快递物流商</view>
|
|
|
<view class="product-list">
|
|
|
<view class="product">
|
|
|
@@ -71,20 +71,20 @@
|
|
|
</view>
|
|
|
</view> -->
|
|
|
|
|
|
- <!-- 操作弹窗 -->
|
|
|
- <tui-modal
|
|
|
- :show="modal"
|
|
|
- content="确认支付？"
|
|
|
- :size="32"
|
|
|
- :maskClosable="false"
|
|
|
- color="#333"
|
|
|
- shape="circle"
|
|
|
- @click="handleModalConfirm"
|
|
|
- ></tui-modal>
|
|
|
+ <!-- 操作弹窗 -->
|
|
|
+ <tui-modal
|
|
|
+ :show="modal"
|
|
|
+ content="确认支付？"
|
|
|
+ :size="32"
|
|
|
+ :maskClosable="false"
|
|
|
+ color="#333"
|
|
|
+ shape="circle"
|
|
|
+ @click="handleModalConfirm"
|
|
|
+ ></tui-modal>
|
|
|
|
|
|
- <!-- 加载框 -->
|
|
|
- <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
|
|
|
- </view>
|
|
|
+ <!-- 加载框 -->
|
|
|
+ <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -92,227 +92,227 @@ import { mapGetters } from 'vuex'
|
|
|
import wechatPay from './mixins/wechatPay.js'
|
|
|
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
|
|
|
export default {
|
|
|
- mixins: [wechatPay],
|
|
|
- components: {
|
|
|
- CmLoading
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- orderId: '',
|
|
|
- modal: false,
|
|
|
- orderList: [],
|
|
|
- hanldOrder: {
|
|
|
- order: {}
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['userId'])
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.orderId = option.orderId
|
|
|
- this.getOrderDetail()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 支付回调执行函数
|
|
|
- orderPaySuccess() {
|
|
|
- this.$on('orderPaySuccess', () => {
|
|
|
- const orderInfo = this.hanldOrder.order
|
|
|
- this.getOrderDetail()
|
|
|
- if (orderInfo.collageFlag) {
|
|
|
- uni.navigateTo({ url: `/pages/fight-order/fight-detail?collageId=${orderInfo.collageId}` })
|
|
|
- } else {
|
|
|
- uni.redirectTo({ url: '/pages/order/success' })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handleModalConfirm() {
|
|
|
- this.modal = false
|
|
|
- this.miniWxPayFor(this.hanldOrder.order)
|
|
|
- },
|
|
|
- // 子订单支付
|
|
|
- onPayOrder(orderInfo) {
|
|
|
- orderInfo.payableAmount = orderInfo.restAmount
|
|
|
- this.hanldOrder.order = orderInfo
|
|
|
- this.modal = true
|
|
|
- },
|
|
|
- getOrderDetail() {
|
|
|
- this.OrderService.QueryOrderDetails({ orderId: this.orderId })
|
|
|
- .then(res => {
|
|
|
- this.orderList = res.data.shopOrderList
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
|
|
|
- this.$api.switchTabTo('/pages/tabBar/index/index')
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ mixins: [wechatPay],
|
|
|
+ components: {
|
|
|
+ CmLoading
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderId: '',
|
|
|
+ modal: false,
|
|
|
+ orderList: [],
|
|
|
+ hanldOrder: {
|
|
|
+ order: {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['userId'])
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.orderId = option.orderId
|
|
|
+ this.getOrderDetail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 支付回调执行函数
|
|
|
+ orderPaySuccess() {
|
|
|
+ this.$on('orderPaySuccess', () => {
|
|
|
+ const orderInfo = this.hanldOrder.order
|
|
|
+ this.getOrderDetail()
|
|
|
+ if (orderInfo.collageFlag) {
|
|
|
+ uni.navigateTo({ url: `/pages/fight-order/fight-detail?collageId=${orderInfo.collageId}` })
|
|
|
+ } else {
|
|
|
+ uni.redirectTo({ url: '/pages/order/success' })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleModalConfirm() {
|
|
|
+ this.modal = false
|
|
|
+ this.miniWxPayFor(this.hanldOrder.order)
|
|
|
+ },
|
|
|
+ // 子订单支付
|
|
|
+ onPayOrder(orderInfo) {
|
|
|
+ orderInfo.payableAmount = orderInfo.restAmount
|
|
|
+ this.hanldOrder.order = orderInfo
|
|
|
+ this.modal = true
|
|
|
+ },
|
|
|
+ getOrderDetail() {
|
|
|
+ this.OrderService.QueryOrderDetails({ orderId: this.orderId })
|
|
|
+ .then(res => {
|
|
|
+ this.orderList = res.data.shopOrderList
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
|
|
|
+ this.$api.switchTabTo('/pages/tabBar/index/index')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.order-pay {
|
|
|
- min-height: 100vh;
|
|
|
- background: #f7f7f7;
|
|
|
- .top-tip {
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- z-index: 99;
|
|
|
- width: 750rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- background: #fff3f7;
|
|
|
- color: #ff457b;
|
|
|
- font-size: 26rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f7f7f7;
|
|
|
+ .top-tip {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: #fff3f7;
|
|
|
+ color: #ff457b;
|
|
|
+ font-size: 26rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
|
|
|
- .shop-info {
|
|
|
- padding: 32rpx 24rpx;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- .shop-name {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .product-list {
|
|
|
- .product {
|
|
|
- display: flex;
|
|
|
- margin: 20rpx 0;
|
|
|
- .cover {
|
|
|
- width: 180rpx;
|
|
|
- height: 180rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- }
|
|
|
- .content {
|
|
|
- position: relative;
|
|
|
- width: 500rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
+ .shop-info {
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .shop-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .product-list {
|
|
|
+ .product {
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ .cover {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ width: 500rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
|
|
|
- .count {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
+ .count {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
|
|
|
- &.between {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
+ &.between {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333333;
|
|
|
- text-align: justify;
|
|
|
- height: 72rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- }
|
|
|
- .unit {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #999999;
|
|
|
- margin: 8rpx 0;
|
|
|
- }
|
|
|
- .tags {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 30rpx;
|
|
|
- .tag {
|
|
|
- margin-right: 8rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- height: 30rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- text-align: center;
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: justify;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin: 8rpx 0;
|
|
|
+ }
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 30rpx;
|
|
|
+ .tag {
|
|
|
+ margin-right: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- &.type1 {
|
|
|
- padding: 0 8rpx;
|
|
|
- background: #f83c6c;
|
|
|
- border-radius: 4rpx;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ &.type1 {
|
|
|
+ padding: 0 8rpx;
|
|
|
+ background: #f83c6c;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- &.type2 {
|
|
|
- width: 80rpx;
|
|
|
- color: #f83c6c;
|
|
|
- background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top
|
|
|
- center no-repeat;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
- &.type3 {
|
|
|
- width: 80rpx;
|
|
|
- background: linear-gradient(270deg, #ff457b 0%, #b03bb8 51%, #6431f2 100%);
|
|
|
- color: #fff;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
- &.type4 {
|
|
|
- border: 1rpx solid #f83c6c;
|
|
|
- padding: 0 6rpx;
|
|
|
- color: #f83c6c;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .price {
|
|
|
- font-size: 26rpx;
|
|
|
- .active {
|
|
|
- color: #ff457b;
|
|
|
- }
|
|
|
+ &.type2 {
|
|
|
+ width: 80rpx;
|
|
|
+ color: #f83c6c;
|
|
|
+ background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top
|
|
|
+ center no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ &.type3 {
|
|
|
+ width: 80rpx;
|
|
|
+ background: linear-gradient(270deg, #ff457b 0%, #b03bb8 51%, #6431f2 100%);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ &.type4 {
|
|
|
+ border: 1rpx solid #f83c6c;
|
|
|
+ padding: 0 6rpx;
|
|
|
+ color: #f83c6c;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 26rpx;
|
|
|
+ .active {
|
|
|
+ color: #ff457b;
|
|
|
+ }
|
|
|
|
|
|
- .deleted {
|
|
|
- margin-left: 24rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .total {
|
|
|
- padding-left: 220rpx - 24rpx;
|
|
|
- margin: 16rpx 0 20rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
+ .deleted {
|
|
|
+ margin-left: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total {
|
|
|
+ padding-left: 220rpx - 24rpx;
|
|
|
+ margin: 16rpx 0 20rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
|
|
|
- text {
|
|
|
- &:nth-child(2) {
|
|
|
- margin-left: 56rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .foot {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- .price {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
+ text {
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-left: 56rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .foot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ .price {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
|
|
|
- .active {
|
|
|
- color: #ff457b;
|
|
|
- }
|
|
|
- }
|
|
|
- .submit {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 160rpx;
|
|
|
- height: 64rpx;
|
|
|
- margin-left: 40rpx;
|
|
|
- background: linear-gradient(90deg, #fa55bf 0%, #f83c6c 100%);
|
|
|
- color: #ffffff;
|
|
|
- border-radius: 32rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .active {
|
|
|
+ color: #ff457b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ background: linear-gradient(90deg, #fa55bf 0%, #f83c6c 100%);
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
yuwenjun1997