myjtp/pages/apply/information.vue

<template>
	<view class="">
		<view class="information">
			<view class="list">
				<view class="lable">{{isType?'姓名':'企业单位'}}：</view>
				<view class="input">
					<input type="text" v-model="list.name" :placeholder="isType?'请输入姓名':'请输入企业单位'" />
				</view>
			</view>
			<view class="list">
				<view class="lable">{{isType?'身份证号':'企业统一代码'}}：</view>
				<view class="input">
					<input type="text" v-model="list.id" :placeholder="isType?'请输入身份证号':'请输入企业统一代码'" />
				</view>
			</view>
			<view class="list">
				<view class="lable">联系方式：</view>
				<view class="input">
					<input type="text" v-model="list.phone" placeholder="请输入联系方式" />
				</view>
			</view>
			<view class="list">
				<view class="lable" style="">所在地区：</view>
				<view class="input" style="width: calc(100% - 240rpx);padding: 20rpx;">
					<pickerAddress class="pickerAddress" :class="{pickerColor: !location}" @change="onCityClick">
						{{location||'请选择地址'}}
					</pickerAddress>
				</view>
				<view><img src="@/static/img/jt.png" v-show="!location"></view>
			</view>
			<view class="list">
				<view class="lable">详细地址：</view>
				<view class="input">
					<input type="text" v-model="list.address" placeholder="请输入详细地址" />
				</view>
			</view>
			<view class="list">
				<view class="lable">{{isType?'职业':'主营领域'}}：</view>
				<view class="input">
					<input type="text" v-model="list.occupation" :placeholder="isType?'请输入职业':'请输入主营领域'" />
				</view>
			</view>
			<view class="list">
				<view class="lable">{{isType?'职业年限':'公司年限'}}：</view>
				<view class="input">
					<input type="text" v-model="list.careerYears" :placeholder="isType?'请输入职业年限':'请输入公司年限'" />
				</view>
			</view>
			<view class="list">
				<view class="lable">保荐人：</view>
				<view class="input">
					<input type="text" v-model="list.sponsor" placeholder="请输入保荐人" />
				</view>
			</view>
		</view>
		<view class="img">
			<p>{{isType?'半身照':'品牌logo'}}：</p>
			<view class="photo" @click='pic'>
				<img :src="list.img" v-if="list.img" />
				<img src="@/static/img/k.png" v-else>
			</view>
		</view>
		<view class="button" @click="eject">
			提交申请
		</view>
		<view class="gradeList" v-if="isEject">
			<view class="title">
				选择会员
			</view>
			<view class="grade" v-for="( g,index ) in gradeList"  @click="chooseGradeList(g,index)">
				<view style="width: 230rpx;">{{ g.name }}</view>
				<view class="right">
					{{ g.price == 0 ? '': g.price }}
					<view class="border">
						<view v-if="chooseGrade == index" class="xzTip"></view>
					</view>
				</view>
			</view>
			<view class="gradeButton" @click="type == 1?submit1():submit2()">
				确定提交
			</view>
		</view>
		<view class="bg" v-if="isEject" @click="isEject = false"></view>
	</view>
</template>

<script>
	import {
		apply,
		getPrice,
		uploads
	} from '../../api/apply.js'
	import {
		getUserInfo
	} from '../../api/login.js'
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import weixinObj from '@/plugin/jweixin-module/index.js';
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				list: {
					name: '', // 姓名/企业单位
					id: '', // 身份证号/企业统一代码
					phone: '', // 联系方式
					location: '', // 所在地区
					address: '', // 详细地址
					occupation: '', // 职业/主营领域
					careerYears: '', // 职业年限/公司年限
					sponsor: '', // 保荐人
					img: '', // 半身照/品牌logo
					pay_type: 'weixin', //weixin：微信支付,yue：余额支付
					grade: '' // 等级
				},
				province: '', // 省
				city: '', // 市
				district: '', // 区
				type: '', // 1代表个人会员2代表企业会员
				isEject: false, //会员价格弹窗
				gradeList: [],
				chooseGrade: 0,
				money: 0.0, //订单金额
				// // #ifdef H5
				// froms: '', //保存h5中数据来源对象
				// // #endif
				// orderKey: '',
				// orderId: '', //保存订单id
				payLoding: false, //判断是否在支付中
			}
		},
		computed: {
			// #ifdef H5
			...mapState(['weichatObj']),
			// #endif
			isType() {
				return this.type == 1
			},
			// 所在地区
			location() {
				return this.province + this.city + this.district
			},
			...mapState('user', ['hasLogin'])
		},
		mounted() {
			this.price()
		},
		watch: {
			location() {
				this.list.location = this.location
			}
		},
		onLoad(options) {
			this.type = options.type;
			getUserInfo()
		},
		methods: {
			...mapMutations('user', ['setInformation']),
			// 选择会员价格
			chooseGradeList(data, index) {
				this.chooseGrade = index
				this.list.grade = data.grade
				this.money = data.price
				console.log(this.list)
			},
			// 会员价格
			price() {
				getPrice({}, this.type).then(res => {
					this.gradeList = res.data
					this.list.grade = res.data[0].grade
					console.log(this.list)
				})
			},
			//会员价格选择
			eject() {
				this.isEject = true
			},
			// 个人申请提交
			submit1() {
				console.log('1')
				const obj = this;
				if (obj.payLoding) {
					return;
				}
				obj.payLoding = true;
				apply(obj.list, obj.type).then(res => {
					let da = res.data.result.jsConfig;
					let data = {
						timestamp: da.timestamp,
						nonceStr: da.nonceStr,
						package: da.package,
						signType: da.signType,
						paySign: da.paySign,
						success: function(res) {
							console.log(res)
							obj.paySuccessToP();
							obj.payLoding = false;
						},
						fail: () => {
							obj.payLoding = false;
						}
					};
					weixinObj.chooseWXPay(data);
				}).catch(res => {
					obj.payLoding = false;
					console.log(res)
				})
			},
			//企业申请
			submit2() {
				const obj = this;
				console.log('2')
				apply(obj.list, obj.type).then(res => {
					console.log(res)
					obj.paySuccessTo();
				}).catch(res => {
					console.log(res)
				})
			},
			// 上传图片
			pic() {
				console.log(this.hasLogin, '当前状态');
				if (this.hasLogin) {
					uploads().then(res => {
						console.log(res, '返回图片');
						this.list.img = res[0].url
					})
				} else {
					uni.showModal({
						title: "登陆",
						content: '您未登录！是否马上登录？',
						success: (e) => {
							// 判断是否点击确认按钮
							if (e.confirm) {
								// 保存当前页面地址
								saveUrl()
								// 跳转页面
								interceptor()
							}
						}
					})
				}
			},
			// 选中城市切换
			onCityClick({ data }) {
				this.province = data[0] + '/';
				this.city = data[1] + '/';
				this.district = data[2];
			},
			//提交申请成功
			paySuccessTo() {
				const that = this
				uni.showToast({
					title: '申请成功，请等待三个工作日审核',
					duration: 2000,
					position: 'top'
				});
				this.isEject = !this.isEject
			},
			// 个人申请提交申请成功
			paySuccessToP() {
				this.paySuccessTo()
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/apply/verification'
					})
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	body {
		background-color: #f3f3f3;
	}

	.information {
		background-color: #fff;
		margin: 0 10rpx;
		padding: 0 40rpx;
		border-radius: 20rpx 20rpx 0 0;
		font-size: 30rpx;
	}

	.list {
		display: flex;
		border-bottom: solid 1rpx #f3f3f3;

		.lable {
			padding: 20rpx;
			width: 270rpx;
		}

		img {
			padding-top: 26rpx;
			width: 0rpx;
			float: right;
		}

		.input {
			input {
				border: 0;
				width: calc(100% - 20rpx);
				font-size: 30rpx;
				padding: 20rpx;
			}
		}
	}

	.img {
		font-size: 30rpx;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		height: 340rpx;
		position: relative;
		margin: 0 10rpx;
		padding: 0 40rpx;

		p {
			padding: 20rpx;
		}

		img {
			width: 160rpx;
		}
	}

	.photo {
		width: 160rpx;
		height: 160rpx;
		margin: auto auto;
	}

	.button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		background-color: #3b66f5;
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.pickerAddress {}

	.pickerColor {
		color: #808080;
	}

	.gradeList {
		padding: 40rpx;
		width: 600rpx;
		left: calc(50% - 300rpx);
		position: absolute;
		top: 30%;
		border-radius: 20rpx;
		z-index: 99;
		background-color: #fff;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}

		.grade {
			text-align: center;
			display: flex;
			justify-content: space-between;
			padding: 40rpx 20rpx;
		}

		.right {
			display: flex;
			margin: auto 0;
		}

		.border {
			margin: auto 15rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			border: solid 1rpx #3b66f5;

			.xzTip {
				width: 12rpx;
				height: 12rpx;
				margin-top: 2rpx;
				margin-left: 2rpx;
				border-radius: 50%;
				background-color: #3b66f5;
			}
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		z-index: 98;
	}

	.gradeButton {
		padding: 10rpx;
		background-color: #3b66f5;
		color: #fff;
		width: 80%;
		margin: 0 auto;
		border-radius: 10rpx;
		font-size: 32rpx;
		text-align: center;
	}
</style>