IHG/pages/my/integral/integralOrder.vue

<template>
	<view class="exchangePrize">
		<!-- 表单 -->
		<view class="form">
			<view class="">
				<uni-forms :modelValue="formData">
					<uni-forms-item name="type" v-if="istype">
						<view class="selectType" @click="openSelect">
							<view class="uni-input">
								<text v-if="formData.type==''||formData.type==null"
									style="color: #999999 ;font-size: 30rpx;">请选择配送方式</text>
								<text v-if="formData.type!=''" style="font-size: 30rpx;">{{formData.type}}</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-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>
							</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?productDetail.cover_img:'http://t9.9026.com/imgs/Kudosbg.png'"></image>
				<view style="margin-left: 24rpx;">
					<text class="name">{{productDetail.name}}</text>
					<text class="tag">礼盒装 </text>
				</view>
			</view>
			<view class="shopNumber">
				<text>件数</text>
				<text>1件</text>
			</view>
			<view class="shopNumber">
				<text>积分</text>
				<text>{{productDetail.integral}}积分</text>
			</view>
			<view style="width: 694rpx;height: 4rpx;border: 2rpx solid #F2F2F2;margin-top: 38rpx;"></view>
			<view class="shopNumber">
				<text>合计</text>
				<text>{{productDetail.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 "
						:sgActive='activeIndex==index'>
						<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,index)" class="language" v-for="(item,index) in regionSelect "
						:sgActive='activeIndex==index'>
						<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 {
				activeIndex: null,
				// 是否核销
				isVerification: false,
				// 产品信息
				productDetail:'',
				// 表单数据
				formData: {
					type: '',
					phone: '',
					name: '',
					region: '',
					shop: '',
					address: '',
				},
				Data:{
					// 快递类型(1.快递发货 2.到店自提也是线下核销)
					express_type:'',
					// 收货人
					receiver:"",
					// 联系电话
					phone:'',
					// 地址ID，最小行政单位地区ID，express_type=1时必传
					area_id:2000,
					// 详细地址，express_type=1时必传
					address:'',
					// 门店ID，express_type=2时必传
					hotel_id:'',
					// 产品ID
					product_id:'',
					// 产品规格ID
					product_attr_id:1,
				},
				// 配送方式
				typeSelect: [{
					name: '快递配送',
				}, {
					name: '到店自提',
				}],
				// 是否显示配送方式
				istype: true,
				// 选择门店
				regionSelect: [{
					name: '第一门店',
				}, {
					name: '第二门店',
				}, {
					name: '第三门店',
				}, {
					name: '第四门店',
				}, {
					name: '第五门店',
				}, {
					name: '第六门店',
				}, {
					name: '第七门店',
				}]
			}
		},
		onLoad(op) {
			console.log(op,"产品id")
			this.Data.product_id=op.product_id
			this.getProductDetail(op.product_id)
		},
		methods: {
			change(ret){
				this.formData.region = ret.data.join('-')

			},
			//打开门店弹框
			openShop() {
				this.$refs.shopSelected.open('bottom')
			},
			companyedShop(i, index) {
				this.typestatus2 = i
				this.activeIndex = index
				console.log(i, this.activeIndex)
				this.Data.hotel_id=index
			},
			//确定按钮
			sureShopBtn() {
				if (this.typestatus2 == undefined) {
					uni.showToast({
						icon: "none",
						title: '请选择门店'
					})
				} else {
					this.formData.shop = this.typestatus2
					this.$refs.shopSelected.close()
				}
			},
			//取消按钮
			cancelShopBtn() {
				this.$refs.shopSelected.close()
			},

			// 打开配送弹框
			openSelect() {
				this.$refs.Recipient.open('bottom')
			},
			//选择配送方式
			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
				}
			},
			//确定按钮
			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()
			},

			// 跳转积分兑换详情
			goExDetail(integral) {
				uni.navigateTo({
					url: '/pages/my/integral/integralExchange?integral='+integral
				})
			},
			// 积分兑换
			goExchange(){
				console.log(this.Data,"提交表单")
				this.$api.integral.integralExchange({
					...this.Data
				}).then(res=>{
					console.log(res)
					if(res.code==0){
						this.goExDetail(this.productDetail.integral)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			// 获取产品信息
			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
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

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

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

	.exchangePrize {
		height: 100%;
		// background: #f9f9f9;
	}
	
	.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: #405E49 !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;
			}
		}
	}
</style>