spark-sale/pagesMain/orderDetail.vue

<template>
	<view class="content">
		<u-cell-group>
			<u-cell-item :arrow="false" :title-style="{width: '100%'}">
				<view slot="title" style="display: flex;justify-content: center;">
					<u-avatar :src="orderInfo.url" size="140"></u-avatar>
				</view>
			</u-cell-item>
			<u-cell-item title="接收人" :value="orderInfo.coachName" :arrow="false"></u-cell-item>
			<u-cell-item title="家长姓名" :value="orderInfo.parentsName" :arrow="false"></u-cell-item>
			<u-cell-item title="学员姓名" :value="orderInfo.studentName" :arrow="false"></u-cell-item>
			<u-cell-item title="学员性别" :value="orderInfo.sex" :arrow="false"></u-cell-item>
			<u-cell-item title="学员年龄" :value="orderInfo.age" :arrow="false"></u-cell-item>
			<u-cell-item title="学生生日" :value="orderInfo.birthday" :arrow="false"></u-cell-item>
			<u-cell-item title="手机号码" :value="orderInfo.phone" :arrow="false"></u-cell-item>
			<u-cell-item title="报名班级" :value="orderInfo.className" :arrow="false"></u-cell-item>
			<u-cell-item title="课时数" :value="orderInfo.courseNumber" :arrow="false"></u-cell-item>
			<u-cell-item title="课时单价" :value="orderInfo.coursePrice" :arrow="false"></u-cell-item>
			<u-cell-item title="课时总价" :value="orderInfo.sumPrice" :arrow="false"></u-cell-item>
			<u-cell-item title="订单号" :value="orderInfo.orderNo" :arrow="false"></u-cell-item>
			<u-cell-item title="赠课数量" :value="orderInfo.lessonsGiveNumber" :arrow="false"></u-cell-item>
			<u-cell-item title="赠品" :title-style="{width: '100%'}" :arrow="false">
				<text slot="label">{{orderInfo.giftId.map( site => { return site.name } ).join('，')}}</text>
			</u-cell-item>
			<u-cell-item title="销售员" :value="orderInfo.saleName" :arrow="false"></u-cell-item>
			<u-cell-item title="谈单人" :value="orderInfo.talkerName" :arrow="false"></u-cell-item>
			<u-cell-item title="支付方式" :value="orderInfo.payTypeValue" :arrow="false"></u-cell-item>
			<u-cell-item title="备注" :label="orderInfo.remark" :arrow="false" :title-style="{width: '100%'}"></u-cell-item>
			<u-cell-item title="查看合同协议" @click="checkContract()"></u-cell-item>
		</u-cell-group>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'mainColor',
				'customStyle',
			])
		},
		data() {
			return {
				id: '',
				orderInfo: {
					url: '',
					coachName: '',
					parentsName: '',
					studentName: '',
					sex: '',
					age: '',
					birthday: '',
					phone: '',
					className: '',
					courseNumber: '',
					coursePrice: '',
					sumPrice: '',
					orderNo: '',
					lessonsGiveNumber: '',
					giftId: [],
					saleName: '',
					talkerName: '',
					payTypeValue: '',
					remark: '',
					contractUrl: '',
				},
			}
		},
		onLoad(options) {
			this.id = options.id
			this.initialize()
		},
		methods: {
			initialize() {
				NET.request(API.getOrderInfo, {
					id: this.id
				}, 'POST').then(res => {
					this.orderInfo = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  显示合同
			checkContract() {
				uni.downloadFile({
					url: this.orderInfo.contractUrl,
					success: (res) => {
						uni.openDocument({
							filePath: res.tempFilePath,
						});
					}
				})
			},
		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;
		box-sizing: border-box;

		.scroll-box {
			width: 100%;
			height: 100vh;
		}
	}
</style>