订单详情修改

pages/order/order-detail.vue

@@ -1,81 +1,89 @@
 <template>
-	<view class="order-detail" :class="{ hasBottom: hasControlNav }">
-		<tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
-		
-		<view class="detail-top">
-			<!-- 订单状态 -->
-			<view class="order-status">{{ stateExpFormat(orderInfo.status) }}</view>
-			<!-- 收货地址 -->
-			<cm-choose-address :addressData="userInfo" disabled></cm-choose-address>
-		</view>
+    <view class="order-detail" :class="{ hasBottom: hasControlNav }">
+        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
 
-		<!-- 订单商品列表 -->
-		<template v-for="(shopOrder, shopOrderIndex) in shopOrderList">
-			<view class="grid" :key="shopOrderIndex"></view>
-			<view class="shop-section" :key="shopOrderIndex">
-				<!-- 供应商 -->
-				<view class="origin">
-					<image class="cover" :src="shopOrder.shopLogo"></image>
-					<view class="name">{{ shopOrder.shopName }}</view>
-				</view>
-				<!-- 商品列表 -->
-				<view class="goods-list">
-					<!-- 商品信息 -->
-					<view class="order-goods" v-for="goods in shopOrder.orderProductList" :key="goods.productId">
-						<cm-order-prodcut :goods-data="goods"></cm-order-prodcut>
-					</view>
-				</view>
-				<view class="line"></view>
-				<!-- 统计 -->
-				<view class="total">
+        <view class="detail-top">
+            <!-- 订单状态 -->
+            <view class="order-status">{{ stateExpFormat(orderInfo.status) }}</view>
+            <!-- 收货地址 -->
+            <cm-choose-address :addressData="userInfo" disabled></cm-choose-address>
+        </view>
+
+        <!-- 订单商品列表 -->
+        <template v-for="(shopOrder, shopOrderIndex) in shopOrderList">
+            <view class="grid" :key="shopOrderIndex"></view>
+            <view class="shop-section" :key="shopOrderIndex">
+                <!-- 供应商 -->
+                <view class="origin">
+                    <image class="cover" :src="shopOrder.shopLogo"></image>
+                    <view class="name">{{ shopOrder.shopName }}</view>
+                </view>
+                <!-- 商品列表 -->
+                <view class="goods-list">
+                    <!-- 商品信息 -->
+                    <view class="order-goods" v-for="goods in shopOrder.orderProductList" :key="goods.productId">
+                        <cm-order-prodcut :goods-data="goods"></cm-order-prodcut>
+                    </view>
+                </view>
+                <view class="line"></view>
+                <!-- 统计 -->
+                <!-- <view class="total">
 					<view class="count">共{{ shopOrder.itemCount }}件商品</view>
 					<view class="status">
 						<text class="label">商品总额：</text>
 						<text>￥{{ shopOrder.totalAmount | formatPrice }}</text>
 					</view>
-				</view>
-			</view>
-		</template>
+				</view> -->
+                <view class="description">
+                    <view class="row"> <text class="label">商品总额：</text> <text>￥200</text> </view>
+                    <view class="row"> <text class="label">优惠：</text> <text>￥200</text> </view>
+                    <view class="row"> <text class="label">应付金额：</text> <text>￥200</text> </view>
+                    <view class="row"> <text class="label">已付金额：</text> <text>￥200</text> </view>
+                    <view class="row"> <text class="label">待付金额：</text> <text>￥200</text> </view>
+                    <view class="collapse">收起</view>
+                </view>
+            </view>
+        </template>
 
-		<view class="grid"></view>
-		<!-- 订单详细信息 -->
-		<cm-order-information :orderInfo="orderInfo"></cm-order-information>
+        <view class="grid"></view>
+        <!-- 订单详细信息 -->
+        <cm-order-information :orderInfo="orderInfo"></cm-order-information>
 
-		<!-- 操作 -->
-		<view class="order-control" v-if="hasControlNav" :class="{'has-bottom': isIphoneX}">
-			<cm-order-control-nav
-				:orderInfo="orderInfo"
-				@confirm="handleConfirmClick"
+        <!-- 操作 -->
+        <view class="order-control" v-if="hasControlNav" :class="{ 'has-bottom': isIphoneX }">
+            <cm-order-control-nav
+                :orderInfo="orderInfo"
+                @confirm="handleConfirmClick"
                 :hasBottom="isIphoneX"
                 @change="getButtonCount"
-			></cm-order-control-nav>
-		</view>
+            ></cm-order-control-nav>
+        </view>
 
-		<!-- 操作弹窗 -->
-		<tui-modal
-			:show="modal"
-			:content="modalText"
-			:size="32"
-			:maskClosable="false"
-			color="#333"
-			shape="circle"
-			@click="handleModalConfirm"
-		></tui-modal>
+        <!-- 操作弹窗 -->
+        <tui-modal
+            :show="modal"
+            :content="modalText"
+            :size="32"
+            :maskClosable="false"
+            color="#333"
+            shape="circle"
+            @click="handleModalConfirm"
+        ></tui-modal>
 
-		<!-- 加载框 -->
-		<cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
+        <!-- 加载框 -->
+        <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
 
-		<!-- 失效商品列表 -->
-		<cm-order-invalid-modal
-			:goodsList="invalidList"
-			:visible="buyAgainModal"
-			@confirm="buyAgainModalClick"
-			@cancel="buyAgainModalHide"
-		></cm-order-invalid-modal>
+        <!-- 失效商品列表 -->
+        <cm-order-invalid-modal
+            :goodsList="invalidList"
+            :visible="buyAgainModal"
+            @confirm="buyAgainModalClick"
+            @cancel="buyAgainModalHide"
+        ></cm-order-invalid-modal>
 
-		<!-- 底部占位 -->
-		<view class="reserved" v-if="isIphoneX"></view>
-	</view>
+        <!-- 底部占位 -->
+        <view class="reserved" v-if="isIphoneX"></view>
+    </view>
 </template>
 
 <script>
@@ -90,201 +98,200 @@ import wechatPay from './mixins/wechatPay.js'
 
 import { mapGetters } from 'vuex'
 export default {
-	mixins: [wechatPay, orderList],
-	components: {
-		CmOrderProdcut,
-		CmOrderInformation,
-		CmOrderControlNav,
-		CmOrderInvalidModal,
-		CmLoading,
-		CmChooseAddress
-	},
-	data() {
-		return {
-			isRequest: false,
-			orderId: '',
-			discernReceiptList: [],
-			shopOrderList: [],
-			orderInfo: {},
-			userInfo: {},
-		}
-	},
-	computed: {
-		...mapGetters(['userId', 'userIdentity', 'isIphoneX']),
-		// 当前用户是否为协销
-		isDealer() {
-			return this.userIdentity === 2
-		},
-		hasControlNav() {
-			return this.orderInfo.buyUserId === this.userId
-		},
-	},
-	onLoad(option) {
-		this.orderId = option.orderId
-		this.getOrderDetail()
-		this.$on('orderAction', () => {
-			this.getOrderDetail()
-		})
+    mixins: [wechatPay, orderList],
+    components: {
+        CmOrderProdcut,
+        CmOrderInformation,
+        CmOrderControlNav,
+        CmOrderInvalidModal,
+        CmLoading,
+        CmChooseAddress
+    },
+    data() {
+        return {
+            isRequest: false,
+            orderId: '',
+            discernReceiptList: [],
+            shopOrderList: [],
+            orderInfo: {},
+            userInfo: {}
+        }
+    },
+    computed: {
+        ...mapGetters(['userId', 'userIdentity', 'isIphoneX']),
+        // 当前用户是否为协销
+        isDealer() {
+            return this.userIdentity === 2
+        },
+        hasControlNav() {
+            return this.orderInfo.buyUserId === this.userId
+        }
+    },
+    onLoad(option) {
+        this.orderId = option.orderId
+        this.getOrderDetail()
+        this.$on('orderAction', () => {
+            this.getOrderDetail()
+        })
         this.orderPaySuccess()
-	},
-	beforeDestroy(){
-		this.$off('orderAction')
-	},
-	methods: {
+    },
+    beforeDestroy() {
+        this.$off('orderAction')
+    },
+    methods: {
         // 支付回调执行函数
-        orderPaySuccess(){
-        	this.$on('orderPaySuccess', ()=>{
+        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' })
-        	    }
-        	})
+                if (orderInfo.collageFlag) {
+                    uni.navigateTo({ url: `/pages/fight-order/fight-detail?collageId=${orderInfo.collageId}` })
+                } else {
+                    uni.redirectTo({ url: '/pages/order/success' })
+                }
+            })
         },
-        
-        
-		getOrderDetail() {
-			this.OrderService.QueryOrderDetails({ orderId: this.orderId })
-				.then(res => {
-					this.discernReceiptList = res.data.discernReceiptList
-					this.shopOrderList = res.data.shopOrderList
-					this.orderInfo = res.data.order
-					this.userInfo = res.data.userInfo
+
+        getOrderDetail() {
+            this.OrderService.QueryOrderDetails({ orderId: this.orderId })
+                .then(res => {
+                    this.discernReceiptList = res.data.discernReceiptList
+                    this.shopOrderList = res.data.shopOrderList
+                    this.orderInfo = res.data.order
+                    this.userInfo = res.data.userInfo
                     this.isRequest = false
-				})
-				.catch(err => {
-					this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
-					    this.$api.switchTabTo('/pages/tabBar/index/index')
-					})
-				})
-		},
-        getButtonCount(e){
+                })
+                .catch(err => {
+                    this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
+                        this.$api.switchTabTo('/pages/tabBar/index/index')
+                    })
+                })
+        },
+        getButtonCount(e) {
             this.buttonCount = e.count
             console.log(e.count)
         }
-	}
+    }
 }
 </script>
 
 <style lang="scss" scoped>
 .order-detail {
-	min-height: 100vh;
-	background: #f7f7f7;
+    min-height: 100vh;
+    background: #f7f7f7;
 
-	padding-top: 138rpx + 60rpx;
-	box-sizing: border-box;
+    padding-top: 138rpx + 60rpx;
+    box-sizing: border-box;
 
-	&.has-bottom {
-		padding-bottom: 100rpx;
-	}
-	
-	.order-status{
-		height: 60rpx;
-		font-size: 26rpx;
-		line-height: 26rpx;
-		padding: 34rpx 24rpx 0;
-		box-sizing: border-box;
-		color: #FF457B;
-		background: #fff;
-	}
-	
-	.detail-top {
-		height: 134rpx + 60rpx;
-		position: fixed;
-		top: 0;
-		z-index: 999;
-	}
-	
-	.grid {
-		height: 20rpx;
-		background: #f7f7f7;
-	}
+    &.has-bottom {
+        padding-bottom: 100rpx;
+    }
 
-	.shop-section {
-		background: #fff;
-		overflow: hidden;
+    .order-status {
+        height: 60rpx;
+        font-size: 26rpx;
+        line-height: 26rpx;
+        padding: 34rpx 24rpx 0;
+        box-sizing: border-box;
+        color: #ff457b;
+        background: #fff;
+    }
 
-		.line {
-			width: 702rpx;
-			height: 1px;
-			background: #f7f7f7;
-			margin: 0 auto;
-		}
+    .detail-top {
+        height: 134rpx + 60rpx;
+        position: fixed;
+        top: 0;
+        z-index: 999;
+    }
 
-		.origin {
-			padding: 0 24rpx;
-			margin-top: 24rpx;
-			margin-bottom: 16rpx;
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
+    .grid {
+        height: 20rpx;
+        background: #f7f7f7;
+    }
 
-			.cover {
-				width: 56rpx;
-				height: 56rpx;
-				border-radius: 4rpx;
-				border: 1px solid #f7f7f7;
-				box-sizing: border-box;
-			}
+    .shop-section {
+        background: #fff;
+        overflow: hidden;
 
-			.name {
-				margin-left: 16rpx;
-				font-size: 30rpx;
-				color: #333333;
-				font-weight: bold;
-			}
-		}
+        .line {
+            width: 702rpx;
+            height: 1px;
+            background: #f7f7f7;
+            margin: 0 auto;
+        }
 
-		.goods-list {
-			margin-bottom: 32rpx;
-			.order-goods {
-				padding-top: 32rpx;
-				&:first-child {
-					padding-top: 0;
-				}
-			}
-		}
-	}
+        .origin {
+            padding: 0 24rpx;
+            margin-top: 24rpx;
+            margin-bottom: 16rpx;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
 
-	.total {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+            .cover {
+                width: 56rpx;
+                height: 56rpx;
+                border-radius: 4rpx;
+                border: 1px solid #f7f7f7;
+                box-sizing: border-box;
+            }
 
-		padding: 0 24rpx;
-		margin: 32rpx 0;
+            .name {
+                margin-left: 16rpx;
+                font-size: 30rpx;
+                color: #333333;
+                font-weight: bold;
+            }
+        }
+
+        .goods-list {
+            margin-bottom: 32rpx;
+            .order-goods {
+                padding-top: 32rpx;
+                &:first-child {
+                    padding-top: 0;
+                }
+            }
+        }
+    }
 
-		font-size: 26rpx;
-		color: #333333;
+    .total {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-		.count {
-			font-weight: bold;
-		}
+        padding: 0 24rpx;
+        margin: 32rpx 0;
 
-		.status {
-			color: #ff457b;
+        font-size: 26rpx;
+        color: #333333;
 
-			.label {
-				color: #333333;
-			}
-		}
-	}
+        .count {
+            font-weight: bold;
+        }
+
+        .status {
+            color: #ff457b;
+
+            .label {
+                color: #333333;
+            }
+        }
+    }
 
-	.order-control {
-		position: fixed;
-		width: 100%;
-		box-sizing: border-box;
-		height: 100rpx;
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		bottom: 0;
-		background: #fff;
-        &.has-bottom{
+    .order-control {
+        position: fixed;
+        width: 100%;
+        box-sizing: border-box;
+        height: 100rpx;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        bottom: 0;
+        background: #fff;
+        &.has-bottom {
             bottom: 50rpx;
         }
-	}
+    }
 }
 </style>