IHG/pages/my/prize/exchangePrize.vue

<template>
	<view class="exchangePrize">
		<!-- 表单 -->
		<view class="form">
			<uni-forms :modelValue="formData">
				<view style="margin-bottom: 24rpx;" class="tab_nav" v-if="isPhy == 1">
					<view class="navTitle" v-for="(item,index) in typeSelect" :key="index"
						@click="checked(index,item.id)">
						<view :class="{'active':isActive === index}">
							{{item.name}}
						</view>
					</view>
				</view>
				<uni-forms-item name="name" v-if="formData.type!=''||isVerification==true">
					<uni-easyinput type="text" v-model="Data.receiver" placeholder="联系人" />
				</uni-forms-item>
				<uni-forms-item name="phone" v-if="formData.type!=''||isVerification==true">
					<uni-easyinput type="number" v-model="Data.phone" placeholderStyle='color:#333,font-size:32rpx'
						placeholder="联系电话" maxlength=11 />
				</uni-forms-item>
				<uni-forms-item name="region" v-if="formData.type=='快递配送'">

					<pickerAddress @change="change">
						<!-- <uni-easyinput type="text" v-model="formData.region" placeholder="所在地区" /> -->
						<view class="selectType">
							<view class="uni-input">
								<text v-if="formData.region==''||formData.region==null"
									style="color: #999999 ; font-size: 30rpx; ">所在地区</text>
								<text style="font-size: 30rpx;" v-if="Data.area_id!=''">{{formData.region}}</text>
							</view>
							<image src="/static/icon/right.png"
								style="width: 14rpx;height: 24rpx;position: absolute;top:22rpx;right: 30rpx;">
							</image>
						</view>
					</pickerAddress>
				</uni-forms-item>
				<uni-forms-item name="region" v-if="formData.type=='快递配送'">
					<textarea placeholder-style="#999" class="text-area" type="text" placeholder="详细地址"
						v-model="Data.address" />
				</uni-forms-item>
				<uni-forms-item name="region" v-if="formData.type=='门店自提'||isVerification==true">
					<view class="selectType" @click="openShop" v-if="hotelList.length != 0 " >
						<view class="uni-input">
							<text v-if="formData.shop==''||formData.shop==null"
								style="color: #999999 ; font-size: 30rpx; ">请选择门店</text>
							<text style="font-size: 30rpx;" v-if="formData.shop!=''">{{formData.shop}}</text>
							<text class="distance" v-if="formData.shop!=''">{{formData.distanceToMe}}km</text>
						</view>
						<image src="/static/icon/right.png"
							style="width: 14rpx;height: 24rpx;position: absolute;top:22rpx;right: 30rpx;">
						</image>
					</view>
					<view class="selectTypeNone" v-if="hotelList.length == 0 ">
						暂无门店,请选择其他配送方式
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<!-- 奖品信息 -->
		<view class="msg">
			<view class="title">
				<text>奖品信息</text>
			</view>
			<view class="shopCard">
				<image :src="coverImg"></image>
				<view style="margin-left: 24rpx;">
					<text class="name">{{prizeDetail[0].name}}</text>
					<!-- <text class="tag">礼盒装 </text> -->
				</view>
			</view>
			<view class="shopNumber">
				<text>件数</text>
				<text>1件</text>
			</view>
			<view style="width: 694rpx;height: 4rpx;border: 2rpx dashed #F2F2F2;margin-top: 38rpx;"></view>
			<view class="shopRemark">
				<view class="shopRemark-title">
					<text>奖品说明</text>
				</view>
				<view class="shopRemark-content">
					<u-parse :content="prizeDetail[0].details"></u-parse>
				</view>
			</view>
			<!-- 占位 -->
			<view style="height: 158rpx;"></view>
		</view>

		<!-- 兑换按钮 -->
		<view class="bottombtn" @click="goExDetail">
			<view class="btnitem">
				<text>确认兑换</text>
			</view>
		</view>


		<!-- 配送方式-->
		<!-- <uni-popup ref="Recipient" type="bottom" mask-background-color=" rgba(0,0,0,0.7);">
			<view class="pop">
				<view class="popuptitle">
					<view @click="cancelBtn" style="width: 68rpx;color: #999;font-size: 32rpx;">
						<text>取消</text>
					</view>
					<view>
						<text style="font-weight: bold; font-size: 32rpx; color: #080F18; ">配送方式</text>
					</view>
					<view @click="sureBtn" style="width: 68rpx;"><text
							style="font-size: 32rpx; color: #FF6200;line-height: 34rpx">确定</text></view>
				</view>
				<view class="chooselag">
					<view @click="companyed(item.name,index)" class="language" v-for="(item,index) in typeSelect "
						:key="index" :class="[activeIndex === index?'sgActive': ''] ">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</uni-popup> -->
		<!-- 门店选择-->
		<uni-popup ref="shopSelected" type="bottom" mask-background-color=" rgba(0,0,0,0.7);">
			<view class="pop">
				<view class="popuptitle">
					<view @click="cancelShopBtn" style="width: 68rpx;color: #999;font-size: 32rpx;">
						<text>取消</text>
					</view>
					<view>
						<text style="font-weight: bold; font-size: 32rpx; color: #080F18; ">配送方式</text>
					</view>
					<view @click="sureShopBtn" style="width: 68rpx;"><text
							style="font-size: 32rpx; color: #FF6200;line-height: 34rpx">确定</text></view>
				</view>
				<view class="chooselag">
					<view @click="companyedShop(item.name,item.id,item.distanceToMe,index)" class="language"
						v-for="(item,index) in hotelList" :key="index"
						:class="[activeIndex2 === index?'sgActive': ''] ">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import pickerAddress from '@/uni_modules/hu-pickerAddress/hu-pickerAddress.vue'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				//经纬度
				latitude: '',
				longitude: '',
				//实物奖品和线下奖品区分
				isPhy: '',
				activeIndex: '',
				activeIndex2: '',
				coverImg: '',
				prizeDetail: '',
				//产品
				id: '',
				// 是否核销
				isVerification: false,
				// 表单数据
				formData: {
					type: '',
					region: '',
					shop: '',
					distanceToMe: ''
				},
				//激活指定table菜单
				isActive: 0,
				// 配送方式
				typeSelect: [{
					name: '快递配送',
				}, {
					name: '门店自提',
				}],
				// 选择门店
				hotelList: [],
				// 表单数据
				Data: {
					//奖品id
					product_id: '',
					order_id: '', //订单id
					// 快递类型(1.快递发货 2.到店自提也是线下核销)
					express_type: '',
					// 收货人
					receiver: "",
					// 联系电话
					phone: '',
					// 地址ID，最小行政单位地区ID，express_type=1时必传
					area_id: '',
					// 详细地址，express_type=1时必传
					address: '',
					//门店ID，express_type=2时必传
					hotel_id: 0,
				},
			}
		},

		async onLoad(o) {
			if (o.id) {
				this.id = o.id
				this.product_id = o.product_id
				console.log(this.id,'---->订单id');
				this.isPhy = o.isPhy
				if (this.isPhy == 1) {
					//实物奖品
					await this.init(this.product_id)
					await this.getPrizeList(0)
				} else {
					//虚拟奖品
					await this.init(this.product_id)
					await this.getPrizeList(1)
				}
			}
		},

		methods: {

			//初始化
			async init(id) {
				await this.goLocation();
				await this.getHotel(id);
			},

			//菜单index切换
			async checked(index, id) {
				this.isActive = index
				if (this.isActive == 0) {
					this.formData.type = '快递配送'
					this.Data.express_type = 1
				} else {
					this.formData.type = '门店自提'
					this.Data.express_type = 2
					await this.goLocation()
					await this.getHotel(this.product_id)

				}
			},
			space(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				return s // 单位千米
			},
			//门店列表
			getHotel(id) {
				this.$api.hotel.getHotelList({
					page: 1,
					type: 2,
					latitude: this.latitude,
					longitude: this.longitude,
					product_id: id
				}).then(res => {
					this.hotelList = res.data.data.map(item => {
						item.distanceToMe = this.space(this.latitude, this.longitude, item.latitude, item
							.longitude).toFixed(1);
						return item;
					})
					console.log(this.hotelList, '-------->this.hotelList');
					//最近的酒店
					this.formData.shop = this.hotelList[0].name
					this.formData.distanceToMe = this.hotelList[0].distanceToMe
					this.Data.hotel_id = this.hotelList[0].id
				})
			},
			//获取定位
			goLocation() {
				let _this = this
				uni.getLocation({
					type: "gcj02", //返回可以用于wx.openLocation的经纬度
					success: function(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
					},
					fail: function(res) {
						console.log(res)
					}
				})
			},

			//订单兑换
			goExDetail() {
				if (this.formData.type == '' && this.isPhy == 1) {
					uni.showToast({
						icon: 'none',
						title: '请选择配送方式'
					})
					return
				}
				if (this.Data.receiver == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写联系人'
					})
					return
				}
				if (this.Data.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写联系电话'
					})
					return
				}
				if (this.formData.region == '' && this.Data.express_type == 1) {
					uni.showToast({
						icon: 'none',
						title: '请填写所在地区'
					})
					return
				}
				if (this.Data.address == '' && this.Data.express_type == 1) {
					uni.showToast({
						icon: 'none',
						title: '请填写详细地址'
					})
					return
				}
				if (this.Data.hotel_id == '' && this.Data.express_type == 2) {
					uni.showToast({
						icon: 'none',
						title: '请选择门店'
					})
					return
				}
				if (this.isPhy == 1) {
					if (this.Data.express_type == 1) {
						this.$api.product.orderExchange({
							...this.Data
						}).then(res => {
							if (res.code == 0) {
								uni.navigateTo({
									url: `/pages/my/prize/exchangeDetail?productType=2`
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}
						})
					} else {
						let obj = {}
						obj.express_type = this.Data.express_type
						obj.order_id = this.Data.order_id
						obj.receiver = this.Data.receiver
						obj.phone = this.Data.phone
						obj.hotel_id = this.Data.hotel_id
						this.$api.product.orderExchange({
							...obj
						}).then(res => {
							if (res.code == 0) {
								uni.navigateTo({
									url: `/pages/my/prize/exchangeDetail?productType=2`
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}
						})
					}
				} else {
					let obj = {}
					obj.express_type = this.Data.express_type
					obj.order_id = this.Data.order_id
					obj.receiver = this.Data.receiver
					obj.phone = this.Data.phone
					obj.hotel_id = this.Data.hotel_id
					this.$api.product.orderExchange({
						...obj
					}).then(res => {
						if (res.code == 0) {
							uni.navigateTo({
								url: `/pages/my/prize/exchangeDetail?productType=2`
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}
			},

			//打开门店弹框
			openShop() {
				this.$refs.shopSelected.open('bottom')
			},
			companyedShop(i, id, distance, index) {
				this.typestatus2 = i
				this.activeIndex2 = index
				this.distanceToMe1 = distance
				this.Data.hotel_id = id
			},
			//确定按钮
			sureShopBtn() {
				if (this.typestatus2 == undefined) {
					uni.showToast({
						icon: "none",
						title: '请选择门店'
					})
				} else {
					this.formData.shop = this.typestatus2
					this.formData.distanceToMe = this.distanceToMe1
					this.$refs.shopSelected.close()
				}
			},
			//取消按钮
			cancelShopBtn() {
				this.$refs.shopSelected.close()
			},
			change(ret) {
				this.formData.region = ret.data.join('-')
				this.Data.area_id = ret.code[2]
			},
			//取消按钮
			cancelBtn() {
				this.$refs.Recipient.close()
			},
			//选择配送方式
			companyed(i, index) {
				this.typestatus1 = i
				this.activeIndex = index
				console.log(i, this.activeIndex)
				if (index == 0) {
					this.Data.express_type = 1
				} else if (index == 1) {
					this.Data.express_type = 2
					this.goLocation()
					setTimeout(() => {
						this.getHotel(this.product_id)
					}, 1000)
				}
			},
			//确定按钮
			sureBtn() {
				if (this.typestatus1 == undefined) {
					uni.showToast({
						icon: "none",
						title: '请选择配送方式'
					})
				} else {
					this.formData.type = this.typestatus1
					this.$refs.Recipient.close()
				}
			},
			// 打开配送弹框
			openSelect() {
				this.$refs.Recipient.open('bottom')
			},

			// 获取奖品列表
			getPrizeList(type) {
				this.$api.lottery.getDrawRecord({
					is_virtual: type,
					page: 0
				}).then(res => {
					this.prizeDetail = res.data.data.filter(item => {
						return item.id == this.id
					})
					this.coverImg = this.prizeDetail[0].img_urls
					this.Data.order_id = this.prizeDetail[0].order_id
					this.Data.product_id = this.prizeDetail[0].product_id
					this.product_id = this.Data.product_id
					console.log(this.product_id, '----->this.product_id');
					this.init(this.product_id)
					if (this.isPhy == 2) {
						this.isVerification = true
						this.Data.express_type = 2
						this.goLocation()
						setTimeout(() => {
							this.getHotel(this.product_id)
						}, 500)
					}else if(this.isPhy == 1 ){
						this.formData.type = '快递配送'
						this.Data.express_type = 1
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.exchangePrize {
		height: 100%;
		background: $bgColor;
	}

	.distance {
		position: absolute;
		right: 60rpx;
		top: 15rpx;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 24rpx;
	}

	::v-deep .uni-forms-item__content {
		font-size: 30rpx;
		border: 2rpx solid #EAEAEA;
		padding: 18rpx 0;
		border-radius: 8rpx;
		background-color: #fff;
	}

	::v-deep .is-input-border {
		border: none;
	}
	
	
	//奖品备注
	.shopRemark{
		margin-top: 30rpx;
		margin-bottom: 66rpx;
		padding: 30rpx 24rpx 26rpx;
		background: #F4F5F6;
		border-radius: 12rpx;
		.shopRemark-title{
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		.shopRemark-content{
			margin-top: 20rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #666666;
		}
	}
	
	.form {
		background: $pageColor;
		width: 750rpx;
		padding: 24rpx 30rpx 12rpx 30rpx;
		box-sizing: border-box;

		.selectType {
			width: 690rpx;
			height: 68rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			box-sizing: border-box;
			position: relative;
		}
		.selectTypeNone{
			color: #df6220;
			padding-left: 20rpx;
		}
	}

	.msg {
		width: 750rpx;
		height: 700rpx;
		background: $bgColor;
		border-radius: 12rpx 12rpx 0px 0px;
		padding: 32rpx 30rpx;

		.title {
			margin-bottom: 24rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #080F18;
			}
		}

		.shopCard {
			margin-top: 28rpx;
			width: 694rpx;
			height: 164rpx;
			background: #F4F5F6;
			border-radius: 10rpx;
			display: flex;
			align-items: center;

			image {
				width: 132rpx;
				height: 132rpx;
				margin-left: 16rpx;
				display: inline-block;
				border-radius: 10rpx;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #080F18;
				display: block;
			}

			.tag {
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.shopNumber {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 25rpx;

			text {
				font-size: 26rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.bottombtn {
		width: 690rpx;
		height: 92rpx;
		background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
		border-radius: 12rpx;
		margin-left: 30rpx;
		position: fixed;
		bottom: 72rpx;
		@include flexlayout();

		.btnitem {
			@include flexlayout();

			text {
				font-size: 30rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: $bgColor;
			}
		}
	}

	.pop {
		width: 100%;
		height: 616rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0 0;
		overflow: scroll;

		.popuptitle {
			position: fixed;
			top: 0;
			display: flex;
			width: 100%;
			padding: 0 30rpx;
			height: 122rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				display: inline-block;
				width: 33rpx;
				height: 33rpx;
				border-radius: 1rpx;
			}
		}

		.chooselag {

			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #FFFFFF;
			padding: 0 30rpx;
			overflow-y: scroll;
			margin-top: 122rpx;

			.language {
				width: 100%;
				font-size: 32rpx;
				font-weight: 400;
				color: #777777;
				border-bottom: 1rpx #E2E4EA solid;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
			}

			.sgActive {
				color: #FF6200 !important;
				font-weight: bold !important;
			}
		}
	}

	.text-area {
		width: 100%;
		height: 130rpx;
		padding: 0rpx 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #000;
		line-height: 30rpx;
	}

	::v-deep .uni-icons {
		color: #c0c4cc !important;
		font-size: 24px !important;
	}

	::v-deep .uni-easyinput__content-input {
		color: #333333;
		font-size: 30rpx;
	}

	::v-deep .uni-easyinput__placeholder-class {
		color: #999 !important;
		font-size: 30rpx !important;
	}
	
	//菜单切换
	.tab_nav {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;	
	}
	
	.tab_nav .navTitle {
		flex: none;
		width: 336rpx;
		height: 88rpx;
		font-size: 30rpx;
		background: #E8E8E8;
		color: #333;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.active {
		width: 336rpx;
		height: 88rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, #FF9342 0%, #FF6200 100%);
		color: #fff;
	}
	
	
	
</style>