WenWuGuanJia/answer_pages/gift/order_detail.vue

<template>
	<view class="wrap">
		<u-navbar title="订单详情" :placeholder="true" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<view class="main" v-if="hasLoad">
			<view class="state-box" :class="stateStyle">
				<view class="iconfont" :class="stateIcon"></view>
				<view class="s-tit">{{ state.status_text }}</view>
			</view>
			<view class="gift-view" @click="onJumpGift(state.gift_data.id)">
				<view class="b-left">
					<image :src="state.gift_data.cover_url" mode="aspectFill"></image>
				</view>
				<view class="b-main">
					<view class="b-title">{{ state.gift_data.name }}</view>
					<view class="b-spec" v-if="state.gift_data.spec_data">
						<view class="s-tit">规格:</view>
						<view class="s-value">{{ state.gift_data.spec_data.name }}</view>
					</view>
					<view class="b-fund">
						<view class="s-worth" v-if="state.gift_data.order_worth > 0">价值 {{ state.gift_data.order_worth }}元</view>
					</view>
				</view>
			</view>
			<view class="box" v-if="state.gift_data.type == 1">
				<view class="b-row">
					<view class="b-tit">领取方式</view>
					<view class="b-cont">
						<view class="s-cont s-text">{{ state.gain_method == 1 ? '线下领取' : '快递邮寄' }}</view>
					</view>
				</view>
				<view class="b-row" v-if="state.gain_method == 1 && state.gift_data.offline_place">
					<view class="b-tit">领取地点</view>
					<view class="b-cont">
						<view class="s-cont s-text">{{ state.gift_data.offline_place }}</view>
					</view>
				</view>
				<template v-if="state.address_data">
					<view class="b-row">
						<view class="b-tit">收货人</view>
						<view class="b-cont">
							<text class="s-name s-text">{{ state.address_data.name }}</text>
							<text class="s-phone s-text">{{ state.address_data.phone }}</text>
						</view>
					</view>
					<view class="b-row">
						<view class="b-tit">收件地址</view>
						<view class="b-cont">
							<view class="s-text">
								<text class="s-province">{{ state.address_data.province }}</text>
								<text class="s-city">{{ state.address_data.city }}</text>
								<text class="s-area">{{ state.address_data.area }}</text>
								<text class="s-address">{{ state.address_data.address }}</text>
							</view>
						</view>
					</view>
				</template>
				<view class="b-row">
					<view class="b-tit">留言</view>
					<view class="b-cont">
						<text class="s-text">{{ state.note }}</text>
					</view>
				</view>
				<template v-if="state.express_data">
					<view class="b-row">
						<view class="b-tit">快递公司</view>
						<view class="b-cont">
							<text class="s-text">{{ state.express_data.company }}</text>
						</view>
					</view>
					<view class="b-row">
						<view class="b-tit">快递单号</view>
						<view class="b-cont">
							<text class="s-text">{{ state.express_data.number }}</text>
							<text class="s-copy" @click="onCopy(state.express_data.number)">点击复制</text>
						</view>
					</view>
				</template>
				<view class="b-row" v-if="state.status == 2">
					<view class="b-tit">发货时间</view>
					<view class="b-cont">
						<text class="s-text">{{ timeFormat(state.deployed_at) }}</text>
					</view>
				</view>
			</view>
			<view class="box" v-if="state.gift_data.type == 2">
				<view class="b-row">
					<view class="b-tit">券码信息</view>
					<view class="b-cont">
						<text class="s-text">{{ state.gift_data.code_data.data }}</text>
						<text class="s-copy" @click="onCopy(state.gift_data.code_data.data)">点击复制</text>
					</view>
				</view>
				<view class="b-row f-link" v-if="state.gift_data.external_link">
					<view class="b-tit">兑换入口</view>
					<view class="b-cont">
						<view class="s-btn" @click="onExternalLink">点击进入</view>
					</view>
				</view>
				<view class="b-row" v-if="state.status == 2">
					<view class="b-tit">发货时间</view>
					<view class="b-cont">
						<text class="s-text">{{ timeFormat(state.deployed_at) }}</text>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="b-row">
					<view class="b-tit">订单编号</view>
					<view class="b-cont">
						<text class="s-text">{{ state.number }}</text>
						<text class="s-copy" @click="onCopy(state.id)">点击复制</text>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">兑换时间</view>
					<view class="b-cont">
						<text class="s-text">{{ timeFormat(state.created_at) }}</text>
					</view>
				</view>
			</view>

			<view class="action" v-if="submitIn">
				<view class="b-home" @click="onHome">返回首页</view>
				<view class="b-order" @click="onOrderList">我的订单</view>
			</view>

			<view class="navbar" v-if="!submitIn && state.gift_data.type == 1 && (state.status == 1 || state.express_data)">
				<view class="b-action">
					<view class="b-btn f-cancel" @click="onCancel" v-if="state.status == 1">取消订单</view>
					<view class="b-btn f-feed" @click="onExpressFeed" v-if="state.express_data">物流动态</view>
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
	</view>
</template>

<script>
import { getOrderDetail, orderCancel } from '@/service/api/gift.js';
import mixinsCommon from '@/mixins/common.js';
import mixinsAuth from '../../mixins/auth.js';
export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			recordId: 0,
			state: null,
			hasLoad: false,
			submitIn: false,
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		this.loadDetail(options.id);
		this.recordId = options.id;
		if (options.submit) {
			this.submitIn = true;
		}
	},
	computed: {
		stateStyle() {
			return {
				'f-wait': this.state.status === 1,
				'f-done': this.state.status === 2,
				'f-cancel': this.state.status === 3
			};
		},
		stateIcon() {
			return {
				'icon-wait': this.state.status === 1,
				'icon-done': this.state.status === 2,
				'icon-cancel': this.state.status === 3
			};
		}
	},
	methods: {
		loadDetail(recordId) {
			getOrderDetail(recordId).then(([err, res]) => {
				console.log('getOrderDetail', err, res);
				if (!err) {
					this.hasLoad = true;
					this.loadingType = -1;
					this.state = res;
				} else {
					this.loadingType = 3;
					this.loadingText = err.data.msg || '加载失败';
				}
			});
		},
		onExpressFeed() {
			uni.navigateTo({
				url: '/answer_pages/gift/express_feed?id=' + this.recordId
			});
		},
		onCancel() {
			orderCancel(this.recordId).then(([err, res]) => {
				console.log('orderCancel', err, res);
				if (!err) {
					this.$logic.showToast('取消成功');
					this.loadDetail(this.recordId);
				}
			});
		},
		onExternalLink() {
			uni.navigateTo({
				url: '/answer_pages/home/webview?url=' + encodeURIComponent(this.state.gift_data.external_link)
			});
		},
		onOrderList() {
			uni.reLaunch({
				url: '/answer_pages/gift/order'
			});
		},
		onHome() {
			uni.navigateTo({
				url: '/answer_pages/gift/index'
			});
		},
		onJumpGift(giftId) {
			uni.navigateTo({
				url: '/answer_pages/gift/detail?gift_id=' + giftId
			});
		}
	}
};
</script>

<style lang="scss">
// page {
// 	padding-bottom: env(safe-area-inset-bottom);
// 	background: $pq-bg-color;
// }

.wrap {
	padding-bottom: 100upx;
}

.state-box {
	height: 180upx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;

	&.f-wait {
		color: #ffc300;
	}

	&.f-done {
		color: #da5650;
	}

	&.f-cancel {
		color: #666;
	}

	.iconfont {
		font-size: 64upx;
	}

	.s-tit {
		margin-left: 20upx;
		font-size: 50upx;
		font-weight: bold;
	}
}

.gift-view {
	margin-top: 30upx;
	background: #fff;
	padding: 30upx;
	display: flex;

	.b-left {
		width: 160upx;
		height: 160upx;

		image {
			width: 160upx;
			height: 160upx;
		}
	}

	.b-main {
		margin-left: 30upx;
		flex: 1;
		display: flex;
		flex-direction: column;

		.b-title {
			font-size: 28upx;
			color: #333;
		}

		.b-spec {
			margin-top: 20upx;
			display: flex;
			align-items: center;

			.s-tit {
				font-size: 24upx;
				color: #999;
			}

			.s-value {
				margin-left: 10upx;
				font-size: 24upx;
				color: #666;
			}
		}

		.b-fund {
			margin-top: 20upx;
			display: flex;
			align-items: baseline;

			.s-worth {
				font-size: 24upx;
				color: #999;
			}
		}
	}
}

.box {
	margin-top: 30upx;
	background: #fff;
	padding: 15upx 0;

	.b-row {
		padding: 15upx 30upx;
		display: flex;
		// justify-content: space-between;
		&.f-link {
			align-items: center;
		}

		.b-tit {
			font-size: 28upx;
			width: 180upx;
			color: #666;
		}

		.b-cont {
			width: 510upx;
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #333;
		}

		.s-copy {
			margin-left: 20upx;
			font-size: 24upx;
			color: #ffc300;
		}

		.s-province,
		.s-city,
		.s-area {
			margin-right: 10upx;
		}

		.s-phone {
			margin-left: 20upx;
		}

		.s-text {
			color: #333;
			font-weight: bold;
		}

		.s-btn {
			padding: 0 30upx;
			background: #ffc300;
			color: #fff;
			font-size: 24upx;
			height: 60upx;
			line-height: 60upx;
			border-radius: 30upx;
		}
	}
}

.action {
	margin-top: 100upx;
	display: flex;
	padding: 0 20upx;

	.b-home {
		flex: 1;
		height: 78upx;
		line-height: 78upx;
		text-align: center;
		color: #da5650;
		font-size: 32upx;
		border: 1upx solid #da5650;
		border-radius: 50upx;
		letter-spacing: 5upx;
	}

	.b-order {
		margin-left: 50upx;
		flex: 1;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		font-size: 32upx;
		background: #da5650;
		border-radius: 50upx;
		letter-spacing: 5upx;
	}
}

.navbar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100upx;
	background: #fff;
	border-top: 1upx solid #f6f6f6;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-top: 1upx solid #eee;

	.b-action {
		margin: 0 30upx;
		display: flex;
		align-items: center;

		.b-btn {
			margin-left: 20upx;
			background: #da5650;
			height: 60upx;
			border-radius: 30upx;
			padding: 0 30upx;
			line-height: 60upx;
			font-size: 26upx;
			color: #fff;
			letter-spacing: 4upx;

			&.f-feed {
				color: #fff;
				background: #ffc300;
			}

			&.f-cancel {
				color: #666;
				background: none;
				border: 2upx solid #eee;
			}
		}
	}
}
</style>