dianpin-h5-4000-0827/pages/home/index.vue

<template>
	<view>
		<view class="home-pages">
			<view
				style="position: absolute;top: 0; left: 0; height: 188rpx; width: 100%; z-index: 100; background-color: #FFFFFF; box-shadow: 0px 15px 10px -15px #E8E8E8;">
				<view style="margin: 28rpx 24rpx; display: flex;" @click="newDetail()">
					<image :showLoading="true" :src="userInfo?userInfo.headImage : morenSrc"
						style="width: 148rpx;height: 148rpx;border-radius: 50%;"></image>
					<view style="padding: 28rpx;">
						<view style="font-size: 32rpx;font-weight: 600">{{userInfo?userInfo.nickName: '点击登录'}}</view>
						<view style="margin-top: 30rpx;font-size: 28rpx;font-weight: 500">不积跬步 无以至千里</view>
					</view>
					<view style="padding: 28rpx;">
						<view style="font-size: 30rpx;font-weight: 500">订阅记录 ></view>
					</view>
				</view>
			</view>

			<view class="home-content">
				<view class="pay-btn-2" @click="seeDetail()">
					<view style="margin-right: 110rpx;">刊物介绍</view>
					<!-- <span  ></span> -->
					
				</view>
				<view style="margin: 10rpx; font-weight: 200;">
					<span>订阅申请</span>
				</view>

				<view class="from">

					<view class="from-line">
						<span class="label-class"  style="margin-top: 20rpx;">姓名:</span>
						<view><input style="margin-top: 20rpx;border-bottom: 1px solid #ccc;" v-model="release.userName"  placeholder="请输入学生姓名" /></view>
					</view>
					<view class="from-line">
						<span class="label-class">电话:</span>
						<view><input type="number" style="border-bottom: 1px solid #ccc;" v-model="release.mobilePhone"  placeholder="请输入手机号码" /></view>
					</view>
					
					
					
					
					<view class="from-line" >
						<span class="label-class">省份:</span>
						<view class="uni-list-cell-left" >
							<picker @change="selectedSf" :range="provinceNames" range-key="name" >
								<!-- {{release.provinceName ? release.provinceName:"请选择省份"}} -->
								<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
									<spen >{{release.provinceName?release.provinceName:'请选择省份'}}</spen>
								</view>
								<!-- <spen  :readonly="true" v-model="release.provinceName" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择省份" >
									
									</spen> -->
							</picker>
						</view>
					</view>
					<view class="from-line">
						<span class="label-class">区域:</span>
						<view class="uni-list-cell-left">
							<picker @change="selectedQy" :range="regionNames" range-key="name">
								<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
									<spen >{{release.regionName?release.regionName:'请选择区域'}}</spen>
								</view>
								<!-- <input :readonly="true" v-model="release.regionName" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择区域" /> -->
							</picker>
						</view>
					</view>

					<view class="from-line">
						<span class="label-class">学历:</span>
						<view class="uni-list-cell-left">
							<picker @change="selectedXl" :range="schoolTypes">
								<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
									<spen >{{release.schoolType?release.schoolType:'请选择学历'}}</spen>
								</view>
								<!-- <input :readonly="true" v-model="release.schoolType" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择学历" /> -->
							</picker>
						</view>
					</view>
					
					
					<view class="from-line">
						<span class="label-class">学校:</span>
						<view class="uni-list-cell-left">
							<picker @change="selectedXx"  :range="schoolNames" range-key="name">
								<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
									<spen >{{release.schoolName?release.schoolName:'请选择学校'}}</spen>
								</view>
								<!-- <input :readonly="true"  v-model="release.schoolName" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择学校" /> -->
							</picker>
						</view>
						
						
						
						<!-- <view><input v-model="release.schoolName" placeholder="请选择学校" /></view> -->
					</view>
					<view class="from-line">
						<span class="label-class">年级:</span>
						<view class="uni-list-cell-left">
							<picker @change="selectedNj"  :range="gradeNames" range-key="name">
								<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
									<spen >{{release.gradeName?release.gradeName:'请选择年级'}}</spen>
								</view>
								<!-- <input :readonly="true" v-model="release.gradeName" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择年级 " /> -->
							</picker>
						</view>
						<!-- <view><input v-model="release.gradeName" placeholder="请选择年级" /></view> -->
					</view>
					<view class="from-line">
						<span class="label-class">班级:</span>
						<view class="uni-list-cell-left">
							<picker @change="selectedBj"  :range="classNames" range-key="name">
								<view style="font-weight: bold;font-size: 20;color: #000;margin-top: 20rpx;">
											<spen >{{release.className?release.className:'请选择班级'}}</spen>
										</view>
								<!-- <input :readonly="true" v-model="release.className" style="font-weight: bold;font-size: 20;color: #000;" placeholder="请选择班级" /> -->
							</picker>
						</view>
						<!-- <view><input v-model="release.className" placeholder="请选择班级" /></view> -->
					</view>

					<view class="home-modal" v-show="showj == true">
						<!-- :class="{'active': release.topid === item.id}" -->
						<view class="title">订阅项目</view>
						<view v-for="(item,index) in dianList" @click='clickLable(index)' class="label-class" :class="{'active': item.selected === true}">
							￥{{item.price}} {{item.name}}</view>
					</view>

				</view>
				<view class="pay-btn" @click="getCreteClick()">
					提交申请
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked: false,
				morenSrc: require('@/static/img/logon-icon.png'),
				userInfo: null,
				showj: false,
				provinceNames:[],
				regionNames:[],
				schoolTypes: ['小学', '初中', '高中'],
				schoolNames:[],
				dianList:[],
				selectId: [],
				gradeNames:[],
				classNames:[],
				clicked:false,
				
				
				
				vsc: [
					['广东省', '湖南省'],
					['怀山区', '广州区']
				],
				release: {
					userName: "",
					mobilePhone: "",
					vsClass: "",
					provinceName:"",
					regionName:"",
					schoolType: "",
					schoolName: "",
					gradeName: "",
					className: "",
					items: "",
					totalPrice: 0.00,
					schoolType: "",
					topid: ""
				}
			}
		},
		onShow() {
			this.getmyInfo();
			this.getProvinceNameList();
			// this.getYerList();
			this.getClassList();
		},
		onLoad() {

		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		methods: {
			// stopKeyborad () {
			//   this.$refs.scanTextbox.setAttribute('readonly', 'readonly');
			//   setTimeout(() => {
			//     this.$refs.scanTextbox.removeAttribute('readonly');
			//   }, 200);
			// },
			//获取省
			getProvinceNameList(){
				this.$api('getProvinceNameList', {}).then(res => {
					if(res.code == 200){
						this.provinceNames =res.result;
					}
				})
			},
			//获取区域
			getRegionNameList(provinceName){
				this.$api('getRegionNameList', {"provinceName":provinceName}).then(res => {
					console.log("---")
					console.log(res)
					if(res.code == 200){
						this.regionNames = res.result;
						console.log("regionNames2")
						console.log(this.regionNames)
					}
				})
				console.log("regionNames")
				console.log(this.regionNames)
			},
			//获取学校
			getSchoolList(provinceName,regionName,schoolType){
				this.$api('getSchoolList', 
					{
						"provinceName":provinceName,
						"regionName":regionName,
						"schoolType":schoolType,
					}).then(res => {
					if(res.code == 200){
						this.schoolNames =res.result;
					}
				})
			},
			//获取订阅信息
			getDinList(provinceName,regionName,schoolType,schoolName,gradeName){
				
				this.$api('getDinList',
					{
						"provinceName":provinceName,
						"regionName":regionName,
						"schoolType":schoolType,
						"schoolName":schoolName,
						"gradeName":gradeName,
					}).then(res => {
					if(res.code == 200){
						this.dianList =res.result;
					}
				})
			},
			//获取订阅信息
			getYerList(schoolType){
				this.$api('getYerList',
					{
						"schoolType":schoolType,
					}).then(res => {
					if(res.code == 200){
						this.gradeNames =res.result;
					}
				})
			},
			//获取订阅信息
			getClassList(){
				this.$api('getClassList',
					{
						
					}).then(res => {
					if(res.code == 200){
						this.classNames =res.result;
					}
				})
			},
			
			
			
			
			// 单个复选框事件
			checkboxChange(e) {
				let values = e.detail.value;
				if (values[0] == 1) {
					this.isChecked = true;
				} else {
					this.isChecked = false;
				}
			},
			//提交创建订单
			createOrder() {

			},

			getmyInfo() {
				this.$api('myInfo')
				.then(res => {
					if (res.code == 200) {
						this.role = res.result.role;
						this.userInfo = res.result;
						this.$store.commit('set_userInfo', res.result)
					} else {
						this.userInfo = null
					}
					if (!this.userInfo) {
						uni.navigateTo({
							url: "/pages/my/login-kehu"
						})
					}
				})
			},
			//跳转刊物介绍
			seeDetail() {
				if (!this.userInfo) {
					uni.navigateTo({
						url: "/pages/my/login-kehu"
					})
				} else {
					uni.navigateTo({
						url: "/pages/my/kanwus"
					})
				}
			},
			getCreteClick() {
				let that = this;
				if(that.clicked == true){
					this.$Toast('请不要重复提交！');
					setTimeout(()=>{
						that.clicked = false;
					},1500)
					return
				}
				that.clicked = true;
				
				
				this.$api('createShopOrder', {
						"userName": this.release.userName,
						"mobilePhone": this.release.mobilePhone,
						"provinceName": this.release.provinceName,
						"regionName": this.release.regionName,
						"schoolType": this.release.schoolType,
						"schoolName": this.release.schoolName,
						"gradeName": this.release.gradeName,
						"className": this.release.className,
						"items": this.release.items,
						// "totalPrice":  this.release.totalPrice,
					})
					.then(res => {
						if(res.code == 500){
							this.$Toast(res.message)
						}
						if (res.code == 200) {

							that.$api('create', {
									id: res.result.id
								})
								.then(res => {

									console.log(res)
									that.$jweixin.config({
										debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
										appId: 'wx77fe1fcd6471ecbe', // 必填，公众号的唯一标识
										timestamp: res.result.timestamp, // 必填，生成签名的时间戳
										nonceStr: res.result.noncestr, // 必填，生成签名的随机串
										signature: res.result.sgture, // 必填，签名
										jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',
											'onMenuShareTimeline', 'onMenuShareAppMessage',
											'chooseWXPay'
										]
									});

									that.$jweixin.chooseWXPay({
										appId: 'wx77fe1fcd6471ecbe',
										timestamp: res.result
											.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
										nonceStr: res.result.nonceStr, // 支付签名随机串，不长于 32 位
										package: res.result
											.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
										signType: res.result
											.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
										paySign: res.result.paySign, // 支付签名
										success: function(res) {
											that.erop = true;
											that.clicked = false;
											uni.navigateTo({
												url: "/pages/my/orders"
											})
										}
									});
								})



						}
					})
				
			},
			//跳转订阅记录
			newDetail() {
				console.log(":============订阅")
				if (!this.userInfo) {
					uni.navigateTo({
						url: "/pages/my/login-kehu"
					})
				} else {
					console.log(":============订阅订单")
					uni.navigateTo({
						url: "/pages/my/orders"
					})
				}

			},
			lower() {

			},
			
			//省份
			selectedSf(event) {
				console.log(event.detail.value)
				// if (event.detail.value) {
					this.release.provinceName = this.provinceNames[event.detail.value].name
				// }
				//清空值
				this.release.regionName = "";
				this.release.schoolType = "";
				this.release.schoolName = "";
				this.release.gradeName = "";
				//得到区域
				this.getRegionNameList(this.release.provinceName);
				
			},
			//区域
			selectedQy(event) {
				// if (event.detail.value) {
					this.release.regionName = this.regionNames[event.detail.value].name
					
					this.release.schoolType = "";
					this.release.schoolName = "";
					this.release.gradeName = "";
				// }
			},
			//学历
			selectedXl(event) {
				// if (event.detail.value) {
					this.release.schoolType = this.schoolTypes[event.detail.value]
					this.getSchoolList(this.release.provinceName,this.release.regionName,this.release.schoolType);
					this.getYerList(this.release.schoolType);
					
					
					this.release.schoolName = "";
					this.release.gradeName = "";
					
				// }
			},
			//学校
			selectedXx(event) {
				// if (event.detail.value) {
					this.release.schoolName = this.schoolNames[event.detail.value].name
				// }
			},
			
			
			
			
			
			
			
			
			selectedNj(event) {
				// if (event.detail.value) {
					this.release.gradeName = this.gradeNames[event.detail.value].name
					this.getDinList(this.release.provinceName,this.release.regionName,this.release.schoolType,this.release.schoolName,this.release.gradeName);
					this.showj = true
				// }
			},
			
			selectedBj(event) {
				console.log(event.detail.value)
				// if (event.detail.value) {
					this.release.className = this.classNames[event.detail.value].name
				// }
			},
			
			
			selectedVs(event) {
				if (event.type === 'columnchange') {
					if (event.detail.column === 0) {
						const value = this.vsc[event.detail.column][event.detail.value];
						console.log("选中：" + value);
						if (1 === event.detail.value) {
							this.vsc[1] = ["永州教育区", "长沙教育区"]
						}
					}
				} else {
					if (event.detail) {
						this.release.vsClass = ""
						event.detail.value.forEach((v, k) => {
							this.release.vsClass += (this.vsc[k][v] + " ");
						})
					}
				}
			},
			clickLable(index) {
				// this.release.topid = item.id
				// this.release.subItems = item.name
				// this.release.totalPrice = item.price
				let ids = "";
				if (this.dianList[index].selected == true) {
						this.dianList[index].selected = false;
						//取消选中时删除数组中的值
						for (var i = 0; i < this.selectId.length; i++) {
							if (this.selectId[i] === this.dianList[index].id) {
								this.selectId.splice(i, 1);
								
							}
						}
						console.log("选中的值", this.selectId)
					} else {
						this.dianList[index].selected = true;
						this.selectId.push(this.dianList[index].id)
						
						console.log("选中的值", this.selectId)
					}
					this.release.items = this.selectId;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.home-content {
		.from {
			margin-top: 20rpx;
			background-color: #F7F7F7;
		}

		.from-line {
			height: 108rpx;
			display: flex;
			background-color: #FFFFFF;

			.label-class {
				text-align: justify;
				text-align-last: justify;
				line-height: 68rpx;
				width: 138rpx;
				padding: 0 24rpx;
			}

			input {
				padding-left: 10rpx;
				height: 68rpx;
			}
		}

		.from-line-box {
			background-color: #FFFFFF;
			height: 328rpx;
			margin-right: 50rpx;
			display: flex;

			.label-class {
				text-align: justify;
				text-align-last: justify;
				line-height: 128rpx;
				width: 168rpx;
				padding: 0 24rpx;
			}

			input {
				padding-left: 20rpx;
			}
		}

		.pay-btn {
			text-align: center;
			border-radius: 12rpx;
			line-height: 78rpx;
			background-color: #00CCCC;
			color: #FFFFFF;
		}

		.pay-btn-2 {
			margin: 10rpx auto;
			text-align: left;
			border-radius: 12rpx;
			height: 78rpx;
			font-weight: 200rpx;
			line-height: 78rpx;
			font-size: 48;
			background-color: #FFFFFF;
		}
	}

	.home-pages {
		padding: 188rpx 10rpx 0;
		background-color: #F7F7F7;

		.scroll-Y {
			height: calc(100vh - 200rpx);
			padding-top: 20rpx;
		}
	}

	.home-modal {
		width: 100vw;
		min-height: 20vh;

		.title {
			line-height: 100rpx;
			margin-top: 40rpx;
			background-color: #FFF;
		}

		.label-class {
			line-height: 100rpx;
			padding: 0 26rpx;
			background-color: #FFF;
			position: relative;
		}

		.label-class::after {
			content: "";
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 1rpx solid #888;

			position: absolute;
			right: 36rpx;
			top: calc((100rpx - 32rpx) / 2);
		}

		.label-class.active::after {
			background-color: #544AFF;
			border-color: #544AFF;
		}

		.label-class.active::before {
			background-color: #FFF;
			border: none;
			content: ' ';
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			z-index: 1;

			position: absolute;
			top: calc((100rpx - 12rpx) / 2);
			right: 46rpx;
		}

	}
</style>