<template>
	<view class="container">
		<view class="order-status"> {{info.order_status == 0?'待支付':info.order_status == 1?'待发货':"已完成"}}</view>
		<view class="page-block">
			<view class="page-title-block">
				<view class="title">订单信息</view>
			</view>
			<view class="content">
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>积分：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">￥{{info.integral}}</view>
					</view>
				</view>

				<!-- <view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>支付金额：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">￥{{info.pay_price}}</view>
					</view>
				</view -->

				<view class="cell flex flex-y-center" v-if="info.is_pay">
					<view class="title-block required">
						<text>支付方式：</text>
					</view>
					<view class="desc flex flex-y-center">
						<image src="'../static/images/total.png" mode="aspectFit" class="pay-type-icon"></image>
						<view class="info">{{info.pay_type == 1?'微信支付':info.pay_type == 2?'支付宝支付':'积分兑换'}}</view>
					</view>
				</view>

				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>订单编号：</text>
					</view>
					<view class="desc">
						<view class="info">{{info.order_no}}</view>
					</view>
				</view>

				<view class="cell flex flex-y-center" v-if="info.is_pay">
					<view class="title-block required">
						<text>支付时间：</text>
					</view>
					<view class="desc">
						<view class="info">{{info.pay_time}}</view>
					</view>
				</view>


				<view class="cell flex flex-y-center" v-if="info.remark">
					<view class="title-block required">
						<text>备注：</text>
					</view>
					<view class="desc">
						<view class="info">{{info.remark}}</view>
					</view>
				</view>

				<block v-if="info.name||info.address||info.mobile">
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>收货人：</text>
						</view>
						<view class="desc">
							<view class="info">{{info.name}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>收货地址：</text>
						</view>
						<view class="desc">
							<view class="info">{{info.address}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>联系电话：</text>
						</view>
						<view class="desc">
							<view class="info">{{info.mobile}}</view>
						</view>
					</view>

				</block>

				<view class="cell flex flex-y-center" v-if="info.express">
					<view class="title-block required">
						<text>快递公司：</text>
					</view>
					<view class="desc">
						<view class="info">{{info.express}}</view>
					</view>
				</view>

				<view class="cell flex flex-y-center" v-if="info.express_no">
					<view class="title-block required">
						<text>快递单号：</text>
					</view>
					<view class="desc">
						<view class="info">{{info.express_no}}</view>
					</view>
				</view>


			</view>
		</view>
		<!--  -->
		<view class="page-block">
			<view class="page-title-block">
				<view class="title">商品信息</view>
			</view>
			<view class="content">
				<view class="goods flex flex-y-center box-pack-between">
					<view class="name">{{info.goods_name}}</view>
					<view class="price" style="color:#FEAF44">积分：{{info.integral}}</view>
				</view>
			</view>
		</view>

		<!--  -->

		<view class="footer-bar" v-if="info.state==1&&info.order_status == 1">
			<view class="content flex flex-center" @click="fahuo" style="background: none;position: relative;">
				<button class="btn" hover-class="none" form-type="submit">
					发货
				</button>
			</view>
		</view>

		<view class="footer-bar" v-if="info.state==2&&info.hx_time == 1">
			<view class="content flex flex-center" style="background: none;position: relative;">
				<navigator url="./Applied" class="btn" hover-class="none" form-type="submit">
					去核销
				</navigator>
			</view>
		</view>

		<view class="model flex-center" v-if="is_show" @click="bindshow">

			<view class="model-home" @click.stop="bind">
				<form @submit="onSubmit">
					<view @click="express" class="flex-y-center model-home-item arr-r">
						<text>快递公司：</text>
						<view class="ft28">{{expressName}}</view>
					</view>
					<view class="flex-y-center model-home-item">
						<text>快递单号：</text>
						<input placeholder="请输入快递单号" name='express_no'></input>
					</view>
					<button form-type="submit" type="default">发货</button>
				</form>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				info: {},
				goods_list: [],
				expressName: "请输入快递公司",
				is_show: false
			}
		},

		onLoad(options) {
			this.id = options.id
		},

		onShow() {

			this.getData()
			console.log(this.expressName, "expressName")
		},

		methods: {
			fahuo() {
				this.is_show = true;
			},
			bindshow() {
				this.is_show = false;
			},
			bind() {

			},
			express(e) {
				uni.navigateTo({
					url: "./express-list?id=" + this.info.id
				})
			},
			onSubmit(e) {

				this.request({
					url: 'Smdcshop/paytype',
					data: {
						id: this.info.id,
						express: this.expressName,
						express_no: e.detail.value.express_no,
					}
				}).then(res => {
					if (res.code == '200') {
						this.is_show = false;
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.getData()

					}
				})
			},
			getData() {
				this.request({
					url: 'Smdcshop/jforderinfo',
					data: {
						id: this.id
					}
				}).then(res => {
					this.info = res.data
					// this.goods_list = res.data.goods_list
				})
			}
		}
	}
</script>


<style>
	.model {
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;

	}

	.model-home {
		width: 600rpx;
		height: 400rpx;
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 10rpx;
		padding-top: 50rpx;
	}

	.model-home-item {
		margin-bottom: 54rpx;
	}

	.model button {
		width: 500rpx;
		height: 100rpx;
		background: -webkit-linear-gradient(135deg, #3387ff 2%, #569bff 99%);
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}


	page {
		width: 100%;
		height: 100%;
		background-color: #F4F5F7;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.order-status {
		width: 100%;
		height: 130rpx;
		background: url(../static/images/order_detail_bg.png) no-repeat center;
		background-size: 100%;
		text-align: center;
		line-height: 130rpx;
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;

	}

	.page-block {}

	.page-block .page-title-block {
		height: 90rpx;
		padding: 0 35rpx;
	}

	.page-block .page-title-block .title {
		font-size: 32rpx;
		line-height: 90rpx;
		color: #999;
		font-weight: bold;
	}

	.page-block .content {
		padding: 30rpx 35rpx 0;
		background-color: #fff;
		overflow: hidden;
	}

	.page-block .cell {
		min-height: 45rpx;
		margin-bottom: 30rpx;
	}


	.page-block .cell .title-block {
		width: 175rpx;
		flex: none;
		font-size: 30rpx;
		line-height: 45rpx;
		font-weight: 600;
		color: #333;
	}

	.page-block .cell .desc {
		flex: auto;
		min-height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #333;
	}

	.pay-type-icon {
		display: block;
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}

	.goods {
		font-size: 32rpx;
		color: #333;
		line-height: 45rpx;
		margin-bottom: 30rpx;
	}

	.footer-bar {
		margin-top: 50rpx;
	}

	.footer-bar .content .btn {
		width: 700rpx;
		height: 100rpx;
		background: -webkit-linear-gradient(135deg, #3387ff 2%, #569bff 99%);
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
</style>
