WenWuGuanJia/answer_pages/gift/exchange.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="gift-view">
				<view class="b-left">
					<image :src="giftData.cover_url" mode="aspectFill"></image>
				</view>
				<view class="b-main">
					<view class="b-title">{{ giftData.name }}</view>
					<view class="b-spec" v-if="giftData.spec_data">
						<view class="s-tit">规格:</view>
						<view class="s-value">{{ giftData.spec_data.name }}</view>
					</view>
					<view class="b-fund">
						<view class="s-worth" v-if="giftData.order_worth > 0">价值 {{ giftData.order_worth }}元</view>
					</view>
				</view>
			</view>
			<template v-if="giftData.type == 1">
				<view class="box">
					<view class="b-row">
						<view class="b-tit">领取方式</view>
						<view class="b-cont f-option">
							<picker @change="onFilter" :value="gainMethodIndex" :range="gainMethodList" range-key="name">
								<view class="b-main">
									<view class="s-cont">{{ gainMethodList[gainMethodIndex].name }}</view>
									<view class="iconfont icon-more"></view>
								</view>
							</picker>
						</view>
					</view>
					<view class="b-row" v-if="gainMethodList[gainMethodIndex].value == 1 && giftData.offline_place">
						<view class="b-tit">领取地点</view>
						<view class="b-cont f-text">{{ giftData.offline_place }}</view>
					</view>
					<view class="b-address" v-if="gainMethodList[gainMethodIndex].value == 2">
						<view class="b-row">
							<view class="b-tit">收件人:</view>
							<view class="b-cont">
								<input type="text" value="" placeholder="请填写收件人姓名" @input="onInputText" data-field="name" />
							</view>
						</view>
						<view class="b-row">
							<view class="b-tit">手机号:</view>
							<view class="b-cont">
								<input type="text" value="" placeholder="请填写收件人手机号" @input="onInputText" data-field="phone" />
							</view>
						</view>
						<view class="b-row">
							<view class="b-tit">所在地区:</view>
							<view class="b-cont f-area">
								<area-picker v-on:getAddressResultObj="getAddressResultObj" :addressList.sync="addressList">
									<div class="b-areas">
										<view class="b-item">
											<view class="s-cont">{{ addressList[0] }}</view>
										</view>
										<view class="b-item">
											<view class="s-cont">{{ addressList[1] }}</view>
										</view>
										<view class="b-item">
											<view class="s-cont">{{ addressList[2] }}</view>
										</view>
									</div>
								</area-picker>
							</view>
						</view>
						<view class="b-row">
							<view class="b-tit">详细地址:</view>
							<view class="b-cont f-textarea">
								<textarea placeholder="请填写详细地址，包括门牌号" auto-height @input="onInputText" data-field="address"></textarea>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<!-- <view class="b-row f-fund">
						<view class="b-tit">剩余机会:</view>
						<view class="b-cont">
							<view class="s-num">{{chanceData.chance_left}}</view>
						</view>
					</view> -->
				</view>
				<view class="box">
					<view class="b-row">
						<view class="b-tit">留言:</view>
						<view class="b-cont f-textarea">
							<textarea placeholder="这里填写内容" auto-height @input="onInputText" data-field="note"></textarea>
						</view>
					</view>
				</view>
			</template>
			<!-- <view class="box" v-else>
				<view class="b-row f-fund">
					<view class="b-tit">剩余机会:</view>
					<view class="b-cont">
						<view class="s-num">{{chanceData.chance_left}}</view>
					</view>
				</view>
			</view> -->
			<view class="navbar">
				<view class="b-action">
					<view class="s-exchange" @click="onExchange" v-if="amountEnough">确认兑换</view>
					<view class="s-exchange f-disable" v-else>机会不足</view>
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
	</view>
</template>

<script>
import { getPreview, exchange } from '@/service/api/gift.js';
import mixinsCommon from '@/mixins/common.js';
import mixinsAuth from '../../mixins/auth.js';
export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			disable: {
				submit: false
			},
			giftData: {},
			chanceData: {},
			orderData: {},
			formData: {
				gift_id: 0,
				gift_spec_id: 0,
				gain_method: 0,
				name: '',
				phone: '',
				province: '',
				city: '',
				area: '',
				address: '',
				note: ''
			},
			gainMethodList: [
				{
					value: 2,
					name: '快递邮寄'
				}
			],
			gainMethodIndex: 0,
			hasLoad: false,
			loadingType: 1,
			loadingText: '',
			addressList: ['', '', '']
		};
	},
	onLoad(options) {
		this.loadPreview(options.gift_id, options.spec_id);
		this.formData.gift_id = options.gift_id;
		this.formData.gift_spec_id = options.spec_id;
	},
	computed: {
		amountEnough() {
			return this.chanceData.chance_left > 0;
		}
	},
	methods: {
		loadPreview(giftId, specId) {
			getPreview(giftId, specId).then(([err, res]) => {
				console.log('getPreview', err, res);
				if (!err) {
					this.hasLoad = true;
					this.loadingType = -1;
					this.giftData = res.gift_data;
					res.chance_data.chance_left = 100;
					this.chanceData = res.chance_data;
					this.orderData = res.order_data;
					// 领取方式
					if (this.giftData.gain_methods) {
						this.gainMethodList = [];
						if (this.giftData.gain_methods.indexOf('2') !== -1) {
							console.log('test2');
							this.gainMethodList.push({
								value: 2,
								name: '快递邮寄'
							});
							console.log(this.gainMethodList);
						}
						if (this.giftData.gain_methods.indexOf('1') !== -1) {
							console.log('test1');
							this.gainMethodList.push({
								value: 1,
								name: '线下领取'
							});
						}
					}
					this.formData.gain_method = this.gainMethodList[this.gainMethodIndex].value;
				} else {
					this.loadingType = 3;
					this.loadingText = err.data.msg || '加载失败';
				}
			});
		},
		onExchange() {
			if (this.disable.submit) {
				return;
			}
			if (this.giftData.type == 1) {
				if (this.formData.gain_method == 2) {
					if (!this.formData.name) {
						return this.$logic.showToast('收件人不能为空');
					}
					if (!this.formData.phone) {
						return this.$logic.showToast('手机号不能为空');
					}
					if (!this.formData.province || !this.formData.city || !this.formData.area) {
						return this.$logic.showToast('所在地区不能为空');
					}
					if (!this.formData.address) {
						return this.$logic.showToast('详细地址不能为空');
					}
				}
			} else {
				this.formData.gain_method = 3;
			}
			this.disable.submit = true;
			exchange(this.formData).then(([err, res]) => {
				console.log('exchange', err, res);
				this.disable.submit = false;
				if (!err) {
					uni.reLaunch({
						url: '/answer_pages/gift/order_detail?submit=1&id=' + res.id
					});
				}
			});
		},
		// 输入内容
		onInputText(e) {
			console.log('onInputText', e);
			this.formData[e.target.dataset.field] = e.detail.value;
		},
		getAddressResultObj(e) {
			console.log('getAddressResultObj', e);
			this.addressList = [e.province.name, e.city.name, e.county.name];
			this.formData.province = e.province.name;
			this.formData.city = e.city.name;
			this.formData.area = e.county.name;
		},
		onFilter(e) {
			console.log('onFilter', e.detail.value);
			this.gainMethodIndex = e.detail.value;
			this.formData.gain_method = this.gainMethodList[this.gainMethodIndex].value;
		}
	}
};
</script>

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

.wrap {
}

.gift-view {
	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;

	.b-row {
		padding: 30upx;
		display: flex;
		justify-content: space-between;

		&.f-fund {
			padding: 40upx 30upx;

			.b-cont {
				.s-num {
					font-size: 32upx;
					color: #da5650;
				}
			}
		}

		.b-tit {
			font-size: 28upx;
			width: 160upx;
		}

		.b-cont {
			// flex: 1;
			display: flex;
			align-items: center;

			&.f-option {
				.b-main {
					display: flex;
					align-items: center;

					.s-cont {
						font-size: 28upx;
					}

					.iconfont {
						margin-left: 10upx;
					}
				}
			}

			&.f-textarea {
				textarea {
					width: 530upx;
					font-size: 28upx;
				}
			}

			&.f-text {
				font-size: 28upx;
				color: #666;
			}
		}
	}

	.b-address {
		.b-row {
			border-bottom: 1upx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			.b-tit {
				color: #666;
				width: 160upx;
			}

			.b-cont {
				flex: 1;

				&.f-area {
					.b-areas {
						display: flex;
						align-items: center;
					}

					.b-item {
						margin-right: 40upx;

						.s-cont {
							font-size: 28upx;
						}
					}
				}

				textarea {
					width: 530upx;
					height: 200upx;
				}
			}
		}
	}

	.line {
		width: 100%;
		height: 16upx;
		background-image: url(https://huli-app.wenlvti.net/app_static/wuyuan/static/wenwu/answer/imgs/line-bg.png);
		background-repeat: repeat-x;
		background-size: auto 100%;

		image {
			width: 100%;
			height: 20upx;
		}
	}

	input {
		font-size: 28upx;
	}

	.input-placeholder {
		font-size: 28upx;
	}
}

.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: space-between;

	.b-action {
		flex: 1;
		.s-exchange {
			background: #da5650;
			height: 100upx;
			padding: 0 60upx;
			line-height: 100upx;
			font-size: 30upx;
			color: #fff;
			letter-spacing: 4upx;
			text-align: center;
		}
	}
}
</style>