smart-tourism/smart-ui-app/pages/order/detail.vue

<template>
	<view>
		<view class="list">
			<view class="item">
				<view class="order_title">
					<text>广安农机农技智慧服务</text>
					<view class="zhu">
						<text class="theme_bg" v-if="item.state == 0">待支付</text>
						<text style="color: #4CAF50;" v-if="item.state == 1">支付成功,待确认</text>
						<text style="color: #4CAF50;" v-if="item.state == 2">进行中...</text>
						<text style="color: #4CAF50;" v-if="item.state == 3">完成交易</text>
						<text style="color: #4CAF50;" v-if="item.state == -1">已退款</text>
					</view>
				</view>
				<view class="order_item" v-for="(it, index) in item.orderList" :key="index" @click="detail(it)">
					<image :src="ip + it.pic" class="pic" mode="aspectFill"></image>
					<view class="con">
						<view class="title">{{ it.title }}</view>
						<view class="price">
							<text>¥{{ it.price }}</text>
							<text class="day">/天</text>
						</view>
					</view>
					<view class="clear"></view>
				</view>
				<button class="kf" open-type="contact">
					<view class="icon">&#xe62a;</view>
					<view class="tag">客服</view>
				</button>
				<button class="kf" @click="phone()">
					<view class="icon">&#xe610;</view>
					<view class="tag">电话</view>
				</button>
				<view class="hj">
					合计:
					<text class="theme_bg bo pad_left_5">¥ {{ item.totalPrice }}</text>
				</view>
				<view class="clear"></view>
				<view class="tk" v-if="item.state == -1">抱歉，由于我们无法提供服务，该订单由系统取消，你的款项将退回到微信零钱。</view>
			</view>
			<view class="info">
				<u-divider style="padding: 10px;">订单信息</u-divider>
				<view class="form_group hr">
					<view class="lable">姓名：</view>
					<input type="text" v-model="item.name" disabled />
				</view>
				<view class="form_group hr">
					<view class="lable">联系电话：</view>
					<input type="number" v-model="item.phone" disabled />
				</view>
				<view class="form_group hr">
					<view class="lable">租赁天数：</view>
					<input type="number" v-model="item.days" disabled />
				</view>
				<view class="form_group hr">
					<view class="lable">备注信息：</view>
					<textarea v-model="item.notes" disabled />
				</view>
				<view class="form_group hr">
					<view class="lable">创建时间：</view>
					<input type="text" v-model="item.createTime" disabled />
				</view>
				<view class="form_group hr" v-if="item.paySuccessTime">
					<view class="lable">付款时间：</view>
					<input type="text" v-model="item.paySuccessTime" disabled />
				</view>
				<view class="form_group hr" v-if="item.orderCompleteTime">
					<view class="lable">完成时间：</view>
					<input type="text" v-model="item.orderCompleteTime" disabled />
				</view>
				<view class="form_group hr" v-if="item.payRefundTime">
					<view class="lable">退款时间：</view>
					<input type="text" v-model="item.payRefundTime" disabled />
				</view>
				<view class="form_group hr">
					<view class="lable">订单编号：</view>
					<input type="text" v-model="item.orderNum" disabled />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			item: {}
		};
	},
	onLoad(e) {
		this.$http.request({
			url: this.$http.urls.order_detail,
			data: { orderNum: e.orderNum },
			success: res => {
				this.item = res.data.data;
			}
		});
	},
	methods: {
		phone() {
			uni.makePhoneCall({
				phoneNumber: this.$getInfo().phone
			});
		},
		detail(item) {
			uni.navigateTo({
				url: '/pages/goods/detail?id=' + item.goodsId
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $page;
}
.list {
	padding: 10px 15px 25px 15px;
	.item {
		background-color: white;
		padding: 5px 10px;
		border-radius: 5px;
		.kf {
			line-height: 18px !important;
			float: left;
			background-color: white;
			margin-top: 9px;
			.icon {
				font-size: 20px;
			}
			.tag {
				font-size: 13px;
			}
		}
		.hj {
			text-align: right;
			padding-top: 15px;
			.pirce {
				padding-left: 10px;
				color: $theme-color;
			}
		}
	}
	.info {
		background-color: white;
		border-radius: 5px;
		margin-top: 10px;
	}
}
</style>