IHG/pages/my/integral/integralOrder.vue

<template>
	<view class="exchangePrize">
		<!-- 表单 -->
		<view class="form">
			<view class="">
				<uni-forms :modelValue="formData">
					<view class="tab_nav" v-if="is_virtual == 0 ">
						<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" 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="formData.region!=''">{{formData.region}}</text>
								</view>
								<image src="/static/icon/right.png"
									style="width: 14rpx;height: 24rpx;position: absolute;top:31rpx;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">
							<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:31rpx;right: 30rpx;">
							</image>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<!-- 产品信息 -->
		<view class="msg">
			<view class="title">
				<text>产品信息</text>
			</view>
			<view class="shopCard">
				<image :src="productDetail.cover_img">
				</image>
				<view style="margin-left: 24rpx;">
					<text class="name">{{productDetail.name}}</text>
					<text class="tag" v-if="attrArry[0]">{{attrArry[0].attr_group_name == '包装'?attrArry[1].attr_group_name.slice(0,2)+'装':'' }} {{integral}}积分</text>
				</view>
			</view>
			<view class="shopNumber">
				<text>件数</text>
				<text>1件</text>
			</view>
			<view class="shopNumber">
				<text>积分</text>
				<text>{{integral}}积分</text>
			</view>
			<view style="width: 694rpx;height: 4rpx;border: 2rpx dashed #F2F2F2;margin-top: 38rpx;"></view>
			<view class="shopNumber" style="margin-top: 38rpx;">
				<text>合计</text>
				<text>{{integral}}积分</text>
			</view>
		</view>
		<!-- 兑换按钮 -->
		<view class="bottombtn" @click="goExchange">
			<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 {
				//激活指定table菜单
				isActive: 0,
				//产品规格数组
				attrArry:[],
				//产品规格
				attrName:'',
				//积分
				integral: '',
				//选中激活样式
				activeIndex: '',
				activeIndex2: '',
				//经纬度
				latitude: '',
				longitude: '',
				//实物奖品0,虚拟奖品1
				is_virtual: '',
				// activeIndex: null,
				// 是否核销
				isVerification: false,
				// 产品信息
				productDetail: '',
				// 表单数据
				formData: {
					// 表单数据
					type: '',
					region: '',
					shop: '',
					distanceToMe: ''
				},
				Data: {
					// 快递类型(1.快递发货 2.到店自提也是线下核销)
					express_type: '',
					// 收货人
					receiver: "",
					// 联系电话
					phone: '',
					// 地址ID，最小行政单位地区ID，express_type=1时必传
					area_id: '',
					// 详细地址，express_type=1时必传
					address: '',
					//门店ID，express_type=2时必传
					hotel_id: 0,
					// 产品ID
					product_id: '',
					// 产品规格ID
					attr: '',
				},
				// 配送方式
				typeSelect: [{
					name: '快递配送',
				}, {
					name: '门店自提',
				}],
				// 是否显示配送方式
				istype: true,
				// 选择门店
				hotelList: []
			}
		},
		async onLoad(op) {
			console.log(op, "产品id")
			this.Data.product_id = op.product_id
			this.Data.attr = op.attr
			this.integral = op.integral
			this.attrName= op.attrName
			this.attrArry= this.attrName.split("-").map(item=>{
				return {
					attr_group_name: item
				}
			})
			console.log(this.attrArry[1].attr_group_name.split(','),1111111111111)
			await this.getProductDetail(op.product_id)
			await this.init()
		},
		methods: {
			//初始化
			async init() {
				await this.goLocation();
				await this.getHotel(this.Data.product_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.Data.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)
					}
				})
			},
			// 获取产品信息
			getProductDetail(id) {
				this.$loading()
				this.$api.product.getProductDetail({
					product_id: id
				}).then(res => {
					console.log(res, "产品信息")
					this.$hideLoading()
					if (res.code == 0) {
						this.productDetail = res.data
						this.is_virtual = res.data.is_virtual
						if (this.is_virtual == 1) {
							this.isVerification = true
							this.Data.express_type = 2
							this.goLocation()
							setTimeout(() => {
								this.getHotel(id)
							}, 1000)
						}else if(this.is_virtual == 0){
							this.formData.type = '快递配送'
							this.Data.express_type = 1
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			//订单兑换
			goExchange() {
				if (this.formData.type == '' && this.is_virtual == 0) {
					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.is_virtual == 0) {
					let _this = this
					uni.showModal({
						title: '提示',
						content: '确认使用积分兑换',
						success: function(res) {
							if (res.confirm) {
								if (_this.Data.express_type == 1) {
									_this.$api.product.integralExchange({
										..._this.Data
									}).then(res => {
										if (res.code == 0) {
											uni.navigateTo({
												url: `/pages/my/prize/exchangeDetail?productType=1&integral=${_this.integral}`
											})
										} else {
											uni.showToast({
												icon: 'none',
												title: res.msg
											})
										}
									})
								} else {
									let obj = {}
									obj.express_type = _this.Data.express_type
									obj.product_id = _this.Data.product_id
									obj.receiver = _this.Data.receiver
									obj.phone = _this.Data.phone
									obj.hotel_id = _this.Data.hotel_id
									obj.attr = _this.Data.attr
									_this.$api.product.integralExchange({
										...obj
									}).then(res => {
										if (res.code == 0) {
											uni.navigateTo({
												url: `/pages/my/prize/exchangeDetail?productType=1&integral=${_this.integral}`
											})
										} else {
											uni.showToast({
												icon: 'none',
												title: res.msg
											})
										}
									})
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					let _this = this
					uni.showModal({
						title: '提示',
						content: '确认使用积分兑换',
						success: function(res) {
							if (res.confirm) {
								let obj = {}
								obj.express_type = _this.Data.express_type
								obj.product_id = _this.Data.product_id
								obj.receiver = _this.Data.receiver
								obj.phone = _this.Data.phone
								obj.hotel_id = _this.Data.hotel_id
								obj.attr = _this.Data.attr
								_this.$api.product.integralExchange({
									...obj
								}).then(res => {
									if (res.code == 0) {
										uni.navigateTo({
											url: `/pages/my/prize/exchangeDetail?productType=1&integral=${_this.integral}`
										})
									} else {
										uni.showToast({
											icon: 'none',
											title: res.msg
										})
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},

			change(ret) {
				this.formData.region = ret.data.join('-')
				this.Data.area_id = ret.code[2]
			},
			//打开门店弹框
			openShop() {
				this.$refs.shopSelected.open('bottom')
			},
			companyedShop(i, id, distance, index) {
				this.typestatus2 = i
				this.distanceToMe1 = distance
				this.activeIndex2 = index
				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()
			},

			// 打开配送弹框
			openSelect() {
				this.$refs.Recipient.open('bottom')
			},
			//选择配送方式
			companyed(i, index) {
				this.typestatus1 = i
				this.activeIndex = index
				if (index == 0) {
					this.Data.express_type = 1
				} else if (index == 1) {
					this.Data.express_type = 2
					this.goLocation()
					setTimeout(() => {
						this.getHotel(this.Data.product_id)
					}, 1000)
				}
			},
			//确定按钮
			sureBtn() {
				if (this.typestatus1 == undefined) {
					uni.showToast({
						icon: "none",
						title: '请选择配送方式'
					})
				} else {
					this.formData.type = this.typestatus1
					this.$refs.Recipient.close()
				}
			},
			//取消按钮
			cancelBtn() {
				this.$refs.Recipient.close()
			},
		}
	}
</script>

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

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

	.exchangePrize {
		height: 100%;
		// background: #f9f9f9;
	}

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

	.uni-input-area {
		width: 100%;
		height: 98rpx;
		padding: 34rpx 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #EAEAEA;
		font-size: 30rpx;
		color: #000;
		line-height: 30rpx;
	}

	//底部弹框样式
	.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: 34rpx 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #EAEAEA;
		font-size: 30rpx;
		color: #000;
		line-height: 30rpx;
	}



	::v-deep .uni-forms-item {
		// height: 98rpx;
		margin-bottom: 0;
		margin-top: 24rpx;
		font-size: 30rpx !important;

		&:first-child {
			margin-top: 0;
		}
	}

	::v-deep .is-input-border {
		background-color: #ffffff !important;
		border: 2rpx solid #EAEAEA !important;
		height: 98rpx;

	}

	::v-deep .uni-icons {
		color: #c0c4cc !important;
	}

	::v-deep .uni-easyinput__placeholder-class {
		font-size: 30rpx !important;
		color: #999 !important;
	}

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


	.form {
		background: $pageColor;
		width: 750rpx;
		padding: 24rpx 30rpx;
		box-sizing: border-box;

		.selectType {
			width: 690rpx;
			height: 98rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 2rpx solid #EAEAEA;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			box-sizing: border-box;
			position: relative;
		}
	}

	.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;
			}
		}
	}
	
	//菜单切换
	.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>