定制商品

peng

2025-10-13 8a70b6f369fdee32ceabefdd5abaf42f3c1d25bb

定制商品

 pages/order/constomize/constomize.vue

New file
@@ -0,0 +1,198 @@
<template>
    <view class="customize-container">
        <!-- 订单信息头部 -->
        <view class="order-header">
            <view class="order-info">
                <text class="label">订单编号：</text>
                <text class="value">{{ orderSn }}</text>
            </view>
            <view class="template-info">
                <text class="label">模板名称：</text>
                <text class="value">{{ templateName }}</text>
            </view>
        </view>
		
        <!-- 选中的模板样式 -->
        <view class="template-preview" v-if="chooseImg">
            <text class="section-title">选中的模板图片</text>
            <view class="image-wrapper">
                <image :src="chooseImg" mode="widthFix" class="template-image"></image>
            </view>
        </view>
		
        <!-- 定制内容列表 -->
        <view class="content-section">
            <text class="section-title">定制内容</text>
            <view class="content-list" v-if="customizeList.length > 0">
                <view class="content-item" v-for="(item, index) in customizeList" :key="index">
                    <view class="item-header">
                        <text class="sub-name">{{ item.subName }}</text>
                    </view>
                    <view class="item-content">
                        <!-- 文本类型内容 -->
                        <text v-if="item.contentType === 'TEXT'" class="text-content">{{ item.content }}</text>
						
                        <!-- 图片类型内容 -->
                        <view v-else-if="item.contentType === 'IMAGE'" class="image-content">
                            <image :src="item.content" mode="widthFix" class="custom-image"></image>
                        </view>
                    </view>
                </view>
            </view>
			
            <view class="empty-tip" v-else>
                暂无定制信息
            </view>
        </view>
    </view>
</template>

<script>
    import { getOrderCustomize } from "@/api/order.js";
    export default {
        data() {
            return {
                orderSn: '',
                templateName: '',
                chooseImg: '',
                customizeList: []
            }
        },
        methods: {
			
        },
        async onLoad(options) {
            if(options.sn){
                const res = await getOrderCustomize(options.sn)
                console.log('获取到的模板填写信息为：',JSON.stringify(res))
                if(res.data && res.data.result && res.data.result.length > 0) {
                    // 从第一个元素中提取订单信息
                    const firstItem = res.data.result[0];
                    this.orderSn = firstItem.orderSn || '';
                    this.templateName = firstItem.templateName || '';
                    this.chooseImg = firstItem.chooseImg || '';
					
                    // 保存定制内容列表
                    this.customizeList = res.data.result;
                }
            }
        }
    }
</script>

<style scoped>
    .customize-container {
        padding: 20rpx;
        background-color: #f5f5f5;
        min-height: 100vh;
    }
	
    .order-header {
        background-color: #fff;
        padding: 30rpx;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    }
	
    .order-info, .template-info {
        margin-bottom: 15rpx;
        display: flex;
    }
	
    .order-info:last-child, .template-info:last-child {
        margin-bottom: 0;
    }
	
    .label {
        font-size: 28rpx;
        color: #666;
        width: 180rpx;
    }
	
    .value {
        font-size: 28rpx;
        color: #333;
        flex: 1;
    }
	
    .template-preview {
        background-color: #fff;
        border-radius: 10rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    }
	
    .content-section {
        background-color: #fff;
        border-radius: 10rpx;
        padding: 30rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    }
	
    .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
        display: block;
    }
	
    .image-wrapper {
        text-align: center;
    }
	
    .template-image {
        max-width: 100%;
        border-radius: 10rpx;
        border: 1rpx solid #eee;
    }
	
    .content-list {
        display: flex;
        flex-direction: column;
        gap: 30rpx;
    }
	
    .content-item {
        padding: 20rpx;
        border: 1rpx solid #eee;
        border-radius: 10rpx;
    }
	
    .item-header {
        border-bottom: 1rpx solid #eee;
        padding-bottom: 15rpx;
        margin-bottom: 15rpx;
    }
	
    .sub-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
    }
	
    .text-content {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
    }
	
    .image-content {
        width: 100%;
        text-align: center;
    }
	
    .custom-image {
        max-width: 100%;
        border-radius: 10rpx;
    }
	
    .empty-tip {
        text-align: center;
        padding: 60rpx 0;
        font-size: 28rpx;
        color: #999;
    }
</style>