huihouqin-new-ph/pages/order/detail.vue

<template>
	<view>
		<view class="main" v-if="info">
			<view class="order-box-list">
				<view class="order-box-header">
					<text class="order-box-title">{{info.orgName}}</text>
					<text class="order-box-desc" v-if="info.status == 1">已预约</text>
					<text class="order-box-desc" v-if="info.status == 2">已取消</text>
				</view>
				<view v-for="(item,index) in info.goods" :key="index" class="order-box-body">
					<view class="order-box-body-left">
						<image :src="item.goodsImg"></image>
					</view>
					<view class="order-box-body-middle">
						<text class="order-box-body-desc">{{item.goodsName}}</text>
						<text class="order-box-body-cate">x{{item.nums}}</text>
					</view>
					<view class="order-box-body-right">
						￥{{(item.nums*item.price).toFixed(2)}}
					</view>
				</view>
				<view class="order-box-footer">
					合计 ￥{{info.amount}}
				</view>
			</view>
		
			<view class="box">
				<view class="box-title">配送信息</view>
				<view class="box-body">
					<view class="box-list">
						<text class="box-list-label">姓名</text>
						<text class="box-list-body">{{info.name}}</text>
					</view>
					<view class="box-list">
						<text class="box-list-label">电话</text>
						<text class="box-list-body">{{info.phone}}</text>
					</view>
					<view class="box-list">
						<text class="box-list-label">配送时间</text>
						<text class="box-list-body">{{info.deliveryTime}}</text>
					</view>
					<view class="box-list">
						<text class="box-list-label">配送地址</text>
						<text class="box-list-body">{{info.address}}</text>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box-title">订单信息</view>
				<view class="box-body">
					<view class="box-list">
						<text class="box-list-label">订单编号</text>
						<text class="box-list-body">{{info.orderSn}}</text>
					</view>
					<view class="box-list">
						<text class="box-list-label">下单日期</text>
						<text class="box-list-body">{{info.createTime}}</text>
					</view>
				</view>
			</view>
			
			
			<view class="uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			
			<view v-if="info.cancel == 1" class="cancel-btn" @click="cancelOrder">
				取消订单
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				id: 0,
				info: null,
			}
		},
		onLoad(option) {
			this.id = option.id?option.id:0;
			this.getDetail();
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'order'){
					this.info = res.data.data;
					
				} else if (apiname == 'cancel'){
					that.getDetail();
				}
			}
		},
		methods: {
			getDetail(){
				app.ajax({
					url: app.globalData.serverUrl + 'shopOrder/orderDetails',
					type: 'POST',
					apiname: 'order',
					data: {
						id: this.id
					}
				});
			},
			cancelOrder(){
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要取消此订单吗？',
				    success: function (res) {
				        if (res.confirm) {
				            app.ajax({
				            	url: app.globalData.serverUrl + 'shopOrder/cancel',
				            	type: 'POST',
				            	apiname: 'cancel',
				            	data: {
				            		id: that.id
				            	}
				            });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.box{
		width: 680rpx;
		height: auto;
		border-radius: 8rpx;
		margin: 15rpx auto;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		overflow: hidden;
	}
	.box-title{
		width: 680rpx;
		height: 78rpx;
		line-height: 78rpx;
		border-bottom: 1rpx solid #F6F6F6;
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
	}
	.box-body{
		overflow: hidden;
	}
	.box-list{
		overflow: hidden;
		padding: 20rpx 0;
	}
	.box-list-label{
		display: inline-block;
		width: 130rpx;
		height: auto;
		float: left;
		color: #949494;
		font-size: 30rpx;
	}
	.box-list-body{
		display: inline-block;
		width: 500rpx;
		height: auto;
		float: right;
		color: #333333;
		font-size: 30rpx;
		text-align: right;
	}
	
	
	
	.order-box-list{
		width: 680rpx;
		height: auto;
		border-radius: 8rpx;
		margin: 15rpx auto;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		overflow: hidden;
	}
	.order-box-header{
		width: 680rpx;
		height: 78rpx;
		line-height: 78rpx;
		border-bottom: 1rpx solid #F6F6F6;
	}
	.order-box-title{
		display: inline-block;
		width: 500rpx;
		height: 100%;
		font-size: 34rpx;
		font-weight: bold;
	}
	.order-box-desc{
		display: inline-block;
		width: 180rpx;
		text-align: right;
		height: 100%;
		color: #949494;
		font-size: 30rpx;
	}
	.order-box-body{
		padding: 20rpx 0 30rpx 0;
		overflow: hidden;
	}
	.order-box-body-left{
		display: inline-block;
		width: 88rpx;
		height: 88rpx;
		float: left;
	}
	.order-box-body-left image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.order-box-body-middle{
		display: inline-block;
		width: 380rpx;
		float: left;
		padding-left: 20rpx;
	}
	.order-box-body-right{
		display: inline-block;
		width: 180rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: right;
		float: right;
	}
	.order-box-body-desc{
		display: inline-block;
		width: 100%;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.order-box-body-cate{
		display: inline-block;
		width: 100%;
		font-size: 24rpx;
		color: #949494;
	}
	.order-box-footer{
		border-top: 1rpx solid #F6F6F6;
		padding: 20rpx;
		text-align: right;
	}
	
	.cancel-btn{
		width: 700rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #FFFFFF;
		background-color: #d9534f;
		border-radius: 10rpx;
		margin: 50rpx auto 20rpx auto;
		text-align: center;
	}
</style>