FE_CRM/pages/orderDetail/orderDetail.vue

<template>
	<view class="container">
		<uni-section title="基本信息" type="line">
			<view class="form">
				<uni-forms ref="baseForm" :modelValue="form" label-width="100">
					<uni-forms-item label="商务经理">
						<uni-easyinput v-model="form.provience" disabled />
					</uni-forms-item>
					<uni-forms-item label="省份">
						<uni-easyinput v-model="form.provience" disabled />
					</uni-forms-item>
					<uni-forms-item label="城市">
						<uni-easyinput v-model="form.city" disabled />
					</uni-forms-item>
					<uni-forms-item label="联系人">
						<uni-easyinput v-model="form.orderContact" disabled />
					</uni-forms-item>
					<uni-forms-item label="电话">
						<uni-easyinput v-model="form.phone" disabled />
					</uni-forms-item>
					<uni-forms-item label="邮箱">
						<uni-easyinput v-model="form.email" disabled />
					</uni-forms-item>
					<uni-forms-item label="订单类型">
						<uni-data-checkbox v-model="form.orderType" :localdata="orderTypes" disabled></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="订单编号">
						<uni-easyinput v-model="form.orderNumber" disabled />
					</uni-forms-item>
					<uni-forms-item label="订单时间">
						<uni-easyinput v-model="form.createTime" disabled />
					</uni-forms-item>
					<uni-forms-item label="订单金额(元)">
						<uni-easyinput v-model="form.orderAmount" disabled />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		
		<uni-section title="实训课程" type="line">
			<uni-card :is-shadow="false" :border="false" is-full>
				<ul class="pro-list">
					<li>
						<view class="name">
							程序设计
						</view>
						<view class="info">
							<view class="line">
								<view class="label">使用期限</view>
								<view class="val">202323-34123</view>
							</view>
							<view class="line">
								<view class="label">市场价（元）</view>
								<view class="val">20232</view>
							</view>
							<view class="line">
								<view class="label">结算价</view>
								<view class="val">2023</view>
							</view>
							<view class="line">
								<view class="label">折扣率</view>
								<view class="val">23</view>
							</view>
							<view class="line">
								<view class="label">平台服务费</view>
								<view class="val">2123</view>
							</view>
							<view class="line done">
								<view class="label">成交价格</view>
								<view class="val">2123</view>
							</view>
						</view>
					</li>
				</ul>
			</uni-card>
		</uni-section>
		<view class="product">
			<view class="total">
				<text>订单总成交价合计：231245元</text>
			</view>
			<view class="list">
				<view class="line">总采购成本：</view>	
				<view class="line">总产品利润：</view>	
			</view>
		</view>
		<uni-card :is-shadow="false" :border="false" is-full>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderTypes: [{
					text: '正式',
					value: 0
				}, {
					text: '试用',
					value: 1
				}],
				candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'],
				dataTree: [{
						text: "一年级",
						value: "1-0",
						children: [{
								text: "1.1班",
								value: "1-1"
							},
							{
								text: "1.2班",
								value: "1-2"
							}
						]
					},
					{
						text: "二年级",
						value: "2-0",
						children: [{
								text: "2.1班",
								value: "2-1"
							},
							{
								text: "2.2班",
								value: "2-2"
							}
						]
					},
					{
						text: "三年级",
						value: "3-0",
						disable: true
					}
				],
				form: {
					orderType: 0,
					provience: '',
					city: '',
					industryId: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
			}
		},
		onLoad() {
			console.log(getApp())
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			onchange(e) {
				console.log('---------onchange:', e);
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.form {
	padding: 15px;
	background-color: #fff;
}
.pro-list {
	li {
		padding: 10px 0;
		border-bottom: 1px solid #f1f1f1;
	}
	.name {
		margin-bottom: 5px;
		font-size: 16px;
		color: #666;
	}
	.line {
		display: flex;
		margin: 5px 0;
		font-size: 12px;
	}
	.done {
		font-size: 13px;
		color: #333;
	}
	.label {
		width: 100px;
	}
}
.product {
	margin: 10px 0;
	background-color: #fff;
	.total {
		padding: 10px 15px;
		font-size: 13px;
		border-bottom: 1px solid #ddd;
	}
	.list {
		padding: 10px 15px;
		.line {
			line-height: 30px;
			font-size: 12px;
		}
	}
}
</style>