<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>
|
