building-materials-shop-uniapp-241014/pages/order/orderDetail.vue

<template>
    <view>
        <navbar title="订单详情" bgColor="#DC2828" color="#fff" leftClick @leftClick="$utils.navigateBack" />

        <view class="">
            <view class="controls">
                <view class="title">
                    <image src="@/static/image/order/icon.png" mode=""></image>
                    服务完成
                </view>
                <view class="tips">
                    {{ tabs[order.status].name }}
                </view>
                <view class="steps" v-if="order.status != 3">
                    <uv-steps activeColor="#FD5100" :current="stepsCurrent" dot>
                        <uv-steps-item :title="item" :key="index" v-for="(item, index) in steps"></uv-steps-item>
                    </uv-steps>
                </view>
                <view class="btns">
                    <view class="btn2" v-if="order.status == 0"
                    @click.stop="toPayOrder(order)"
                    >
                        立即支付
                    </view>
                    <view class="btn2" v-if="order.status == 2"
                    @click.stop="confirmOrder(order)"
                    >
                        确认收货
                    </view>
                    <view class="btn1" v-if="order.status == 0"
                    @click.stop="cancelOrder(order)"
                    >
                        取消订单
                    </view>
                </view>
            </view>
        </view>
		
        <!-- 送货图 -->
		<view class="" v-if="deliveryPictures.length > 0">
		    <view class="controls">
		        <view class="delivery-title">
		            <view class="flex" style="display: flex; align-items: center;">
		                <view style="width: 8rpx;height: 30rpx;
						background: #FD5100;border-radius: 6rpx;" />
		                <view class="head-title">送货图</view>
		            </view>
		        </view>
		        <view class="delivery-images">
		            <view class="image-item" 
		                v-for="(image, index) in deliveryPictures" 
		                :key="index"
		                @click="previewImage(image, deliveryPictures)">
		                <image :src="image.trim()" mode="aspectFill"></image>
		            </view>
		        </view>
		    </view>
		</view>

        <view class="info">
            <view class="flex" style="display: flex;">
                <view style="width: 8rpx;height: 30rpx;
				background: #FD5100;border-radius: 6rpx;" />
                <view class="head-title">产品</view>
            </view>

            <view class="flex">
                <view class="server-item"
				v-for="(shop, i) in order.children"
				:key="i">
                    <view class="img-box">
                        <image :src="shop.image && shop.image.split(',')[0]" mode="aspectFill"></image>
                    </view>

                    <view class="server-info">

                        <view class="server-title">
                            {{ shop.title }}
                            <!-- <view class="coupon">领券立减</view> -->
                        </view>

                        <view class="current-price">
                            价格：<text class="unit">￥</text>{{ shop.price }}
                        </view>

                        <view class="sales-volume" style="margin-top: 5px;">
                            <view class="desc">产品材质：{{ shop.material }}</view>
                        </view>

                        <view class="sales-volume" style="margin-top: 5px;">
                            <view class="desc">产品数量：{{ shop.num }}</view>
                        </view>
                    </view>

                </view>
            </view>

            <view class="line address">
                <view class="address-top">
                    <view class="">
                        地址信息
                    </view>
                    <view class="copy">
                        <image @click="$utils.copyText('1')" src="../static/order/copy.png"></image>
                    </view>
                </view>
                <view class="addressDetail">
                    <view class="">{{ order.name }} {{ order.phone }}</view>
                    <view class="">{{ order.address }}</view>
                </view>
            </view>


            <!-- <view class="line">
				<view class="t min_tips">
					<view class="">
						实付款
					</view>
					<view class="current-price">
						￥{{ order.money }}
					</view>
				</view>
				<view class="min_tips">
					<view class="">
						租赁费用
					</view>
					<view class="">
						￥{{ order.price }}
					</view>
				</view>
				<view class="min_tips">
					<view class="">
						水洗费用
					</view>
					<view class="">
						￥{{ order.price}}
					</view>
				</view>
				<view class="min_tips">
					<view class="">
						押金
					</view>
					<view class="">
						￥{{ order.price }}
					</view>
				</view>
			</view> -->

            <!-- 订单信息 -->
            <view class="line">
                <view class="t min_tips">
                    <view class="">
                        订单信息
                    </view>
                </view>
                <view class="min_tips">
                    <view class="">
                        总金额
                    </view>
                    <view class="">
                        ￥{{ order.price }}
                    </view>
                </view>
                <view class="min_tips">
                    <view class="">
                        订单编号
                    </view>
                    <view class="">
                        {{ order.id }}
                    </view>
                </view>
                <view class="min_tips">
                    <view class="">
                        下单时间
                    </view>
                    <view class="">
                        {{ order.createTime }}
                    </view>
                </view>
            </view>


            <!-- 下单须知 -->
            <view class="line">
                <!-- <view class="t min_tips">
                    <view class="">
                        下单须知
                    </view>
                </view>
                <view class="min_tips" style="line-height: 40rpx;">
                    {{ order.projectExplain }}
                </view> -->
                <!-- <view class="btns">
                    <view @click="clickService" class="btn">
                        联系客服
                    </view>
                </view> -->
            </view>

        </view>
		
		<kefu></kefu>
		
		<quick-order-entry
		ref="quickOrderEntry"
		/>
		
        <!-- 联系客服弹框 -->
        <customerServicePopup ref="customerServicePopup" />
    </view>
</template>

<script>
import customerServicePopup from "@/components/config/customerServicePopup.vue";
import { mapGetters } from 'vuex'
import orderMixin from '@/mixins/order.js'
export default {
    mixins: [orderMixin],
    computed: {
        ...mapGetters(['userShop']),
    },
    components: {
        customerServicePopup
    },
    data() {
        return {
            stepsCurrent: 0,
            steps: [
                '付款',
                '配送',
                '完成',
            ],
            tabs: [
                {
                    name: '待付款'
                },
                {
                    name: '已付款'
                },
                {
                    name: '配送中'
                },
                {
                    name: '已完成'
                },
                {
                    name: '已取消'
                }
            ],
            order: {},
            id: '',
            deliveryPictures: [],
        }
    },
    onLoad(options) {
        this.id = options.id
        this.getData()
    },
    methods: {
        getData() {
            this.$api('getOrderInfoById', {
                orderId : this.id
            }, res => {
                this.order = res.result;
                this.stepsCurrent = this.order.status;
                this.deliveryPictures = this.getAllDeliveryPictures();
            })
        },
        // 联系客服
        clickService() {
            this.$refs.customerServicePopup.open();
        },
        // 预览送货图片
        previewImage(current, urls) {
            uni.previewImage({
                current: current.trim(),
                urls: urls.map(url => url.trim())
            });
        },
        // 提取所有送货图片（包括主订单和子订单）
        getAllDeliveryPictures() {
            let allPictures = [];
            
            // 提取主订单的送货图
            if (this.order.deliveryPicture) {
                const mainPictures = this.order.deliveryPicture.split(',').map(pic => pic.trim()).filter(pic => pic);
                allPictures = allPictures.concat(mainPictures);
            }
            
            // 提取所有子订单的送货图
            if (this.order.children && Array.isArray(this.order.children)) {
                this.order.children.forEach(child => {
                    if (child.deliveryPicture) {
                        const childPictures = child.deliveryPicture.split(',').map(pic => pic.trim()).filter(pic => pic);
                        allPictures = allPictures.concat(childPictures);
                    }
                });
            }
            
            // 去重（如果有重复的图片）
            return [...new Set(allPictures)];
        },
    }
}
</script>

<style scoped lang="scss">
.order {
    background: linear-gradient(#4899a6, #6fc6ad, #6fc6ad);
    padding-bottom: 10px;
}

.controls {
    margin: 20rpx;
    background-color: #fff;
    // height: 400rpx;
    display: flex;
    flex-direction: column;
    // width: 710rpx;
    border-radius: 20rpx;
    justify-content: center;
    align-items: center;
    padding: 20rpx;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;

        image {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
        }
    }

    .tips {
        font-size: 26rpx;
        color: #FD5100;
        margin-top: 10rpx;
    }

    .steps {
        height: 60rpx;
    }

    .btns {
        // margin-top: 50rpx;
        display: flex;

        view {
            font-size: 26rpx;
            margin: 0 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            background-color: $uni-color;
            padding: 15rpx 40rpx;
            border-radius: 40rpx;
        }

        .btn1 {
            background-color: rgba($color: $uni-color, $alpha: 0.2);
            border: 1px solid $uni-color;
            color: $uni-color;
        }
    }

    .delivery-title {
        width: 100%;
        margin-bottom: 20rpx;
        
        .head-title {
            font-family: PingFang SC, PingFang SC-Bold;
            color: #2f2e2e;
            line-height: 30rpx;
            margin-left: 10rpx;
        }
    }

    .delivery-images {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        .image-item {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
            overflow: hidden;
            
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.steps {
    margin: 20rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    width: 710rpx;
    border-radius: 20rpx;
    padding: 70rpx 0;

    /deep/ .uv-text__value {
        font-size: 22rpx !important;
    }
}

.box {
    padding: 20px;

    .btns {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;

        .btn {
            color: #fff;
            padding: 10rpx 50rpx;
            background-color: #ffb300;
            border-radius: 30rpx;
            font-size: 25rpx;
            margin-right: 10rpx;
        }

        .btc {
            background: #ccc;
        }
    }
}

.info {
    margin: 10px;
    padding: 20rpx;
    background-color: #fff;
    width: calc(100% - 40px);
    border-radius: 10px;

    .head-title {
        font-family: PingFang SC, PingFang SC-Bold;
        color: #2f2e2e;
        line-height: 30rpx;
        margin-left: 10rpx;
    }

    .server-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background: white;
        border-radius: 15rpx;
        box-sizing: border-box;
        margin: 20rpx 0rpx;
        width: 100%;

        .img-box {
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
            overflow: hidden;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .server-info {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: calc(100% - 180rpx);
            box-sizing: border-box;
            padding: 10rpx 15rpx;

            .server-title {
                display: flex;
                margin-bottom: 10rpx;
            }

            .coupon {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #F29E45;
                color: white;
                width: 120rpx;
                height: 40rpx;
                border-radius: 10rpx;
                margin-left: 10rpx;
                font-size: 22rpx;
            }

            .time-coupon,
            .price {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }

            .time-coupon {
                margin: 10rpx 0rpx;
                font-size: 26rpx;
                justify-content: space-between;
                width: 100%;

                .flex {
                    justify-content: center;
                    align-items: center;
                }

                image {
                    width: 25rpx;
                    height: 25rpx;
                }

                .time {
                    color: #B8B8B8;
                    margin-left: 6rpx;
                }
            }

            .sales-volume {
                display: flex;
                align-items: center;
                color: #B8B8B8;
                font-size: 24rpx;

                image {
                    width: 25rpx;
                    height: 25rpx;
                }
            }
        }
    }

    .address {

        .address-top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            image {
                width: 30rpx;
                height: 30rpx;
            }
        }

        .addressDetail {
            color: #777;
            font-size: 28rpx;
            padding: 5px 0;

        }

        text {
            background-color: #F29E45;
            padding: 8rpx 10rpx;
            color: #fff;
            font-size: 20rpx;
            margin-left: 10px;
            border-radius: 5px;
        }
    }

    .min_tips {
        font-size: 22rpx;
        color: #777;
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        align-items: center;
    }

    .current-price {
        font-size: 27rpx;
        color: #FD5100;
    }

    .line {
        border-top: 2px dotted #00000011;
        padding: 20rpx 0;

        .t {
            padding: 5px 0;
            color: #000;
            font-size: 26rpx;
        }
    }

    .head-div {
        .nickname {
            font-size: 30rpx;
            font-weight: 600;
            text-align: left;
            line-height: 42rpx;
            display: flex;
            align-items: center;

            .tag {
                position: relative;
                display: flex;
                align-items: center;

                image {
                    height: 45rpx;
                    width: 90rpx;
                    vertical-align: middle;
                }

                .auth {
                    position: absolute;
                    white-space: nowrap;
                    color: #FF6200;
                    left: 23rpx;
                    font-size: 17rpx;
                }
            }
        }

        .days {
            font-size: 20rpx;
            font-weight: 400;
            text-align: left;
            line-height: 56rpx;
            display: flex;
            align-items: center;

            view {
                padding-left: 5px;
            }
        }
    }

    .btns {
        display: flex;
        justify-content: center;

        .btn {
            color: $uni-color;
            border: 1px solid $uni-color;
            padding: 10rpx 20rpx;
            border-radius: 30rpx;
        }
    }
}
</style>