H5_module/open/info/index.vue

<template>
	<view :style="[mainStyle]">
		<view class="ttop" :style="'height:' + systems.barHeight + 'rpx;'">
			<view class="back"
				:style="'margin-top:' + systems.ktxStatusHeight + 'rpx;height:' + systems.navigationHeight + 'rpx;'"
				@click="back()">
				<image :src="picUrlss+'back_black.png'"></image>
			</view>
		</view>
		<view class="top">
			<view class="top-c">
				<view>您已开通健康卡，请完善健康档案</view>
				<image src="../static/images/dangan.png" class="dangan-img"></image>
			</view>
		</view>
		<view class="box" style="margin-top: -150rpx;z-index: 5;">
			<view class="tits ddflex">基本信息</view>
			<view class="form">
				<view class="li ddflex">
					<view class="label">姓名</view>
					<input v-model="name" placeholder="请填写真实姓名" placeholder-class="placeholder" class="ipt fflex" />
				</view>
				<view class="li ddflex">
					<view class="label">证件</view>
					<picker :range="idType" class="picker fflex" @change="changeType">
						<view v-if="typeIndex > -1">{{idType[typeIndex]}}</view>
						<view class="placeholder" v-else>请选择证件类型</view>
						<image src="../../static/pages/images/bico.png" class="bico"></image>
					</picker>
				</view>
				<view class="li ddflex">
					<view class="label">身份证号</view>
					<input type="idcard" maxlength="18" v-model="idcard" placeholder="输入身份证号码"
						placeholder-class="placeholder" class="ipt fflex" />
				</view>
				<view class="li ddflex">
					<view class="label">性别</view>
					<view class="gender ddflex fflex">
						<view class="lis ddflex" @click="checkGender(1)">
							<image :src="picUrlss+(gender == 1 ? 'lvluo/open_gou_h.png' : 'lvluo/open_gou.png')"
								class="gou"></image>男
						</view>
						<view class="lis ddflex" @click="checkGender(2)">
							<image :src="picUrlss+(gender == 2 ? 'lvluo/open_gou_h.png' : 'lvluo/open_gou.png')"
								class="gou"></image>女
						</view>
					</view>
				</view>
				<view class="li ddflex">
					<view class="label">手机号</view>
					<input type="number" maxlength="11" v-model="mobile" placeholder="输入接收通知的手机号"
						:disabled="isClickButton" placeholder-class="placeholder" class="ipt fflex" />
					<!-- #ifdef MP-WEIXIN -->
					<view v-if="!mobile" @click="limitIpt">
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" hover-class="none"
							class="shou">授权</button>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="box">
			<view class="tits ddflex">
				<view class="fflex">联系地址</view>
				<view class="edit ddflex" v-if="address"
					@click="jumpUrl('/mine/editAddress/editAddress?id=' + address.id+'&isOpen='+true)">修改<image
						src="../../static/pages/images/crico1.png"></image>
				</view>
			</view>
			<view class="addr ddflex" v-if="address">
				<image :src="picUrlss+'lvluo/open_dz.png'"></image>
				<view class="fflex">
					<view class="addr-dz">{{address.address}}
						<block v-if="address.house">{{address.house}}</block>
					</view>
					<view class="addr-info">{{address.name}}<text>{{address.phone}}</text></view>
				</view>
			</view>
			<view class="add-box" v-else>
				<!-- <view class="add" @click="chooseAddress">授权微信地址</view> -->
				<view class="add" @click="addOrUpdateAddress()">选择添加地址</view>
			</view>
		</view>
		<view style="height: 156rpx;"></view>
		<view class="bot">
			<view class="btn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	const route = require('../../utils/route');
	const utils = require('../../utils/util.js');
	export default {
		data() {
			return {
				mainStyle: app.globalData.mainStyle,
				picUrlss: req.public.picUrls,
				systems: '',
				opt: {},
				sessionKey: '',
				userInfo: {},
				gender: 1,
				idType: ['身份证'],
				typeIndex: -1,
				name: '',
				idcard: '',
				mobile: '',
				address: '',
				isClickButton: false
			};
		},
		onLoad: function(options) {
			this.opt = options;
			this.getUserInfo();
			app.globalData.getCheckSessoin(json => {
				this.sessionKey = json.session_key;
			});
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			changeType(e) {
				this.typeIndex = e.detail.value;
			},
			checkGender(gender) {
				this.gender = gender;
			},
			limitIpt() {
				this.isClickButton = true;
			},
			getPhoneNumber(event) {
				this.isClickButton = false;
				const _ts = this;
				const detail = event.detail;


				if (!detail || !detail.encryptedData || !detail.iv) return false;
				req.postRequest('/api/weixin/mobile', {
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					sessionKey: _ts.sessionKey
				}, res => {
					let userInfo = req.getStorage('userInfo');
					userInfo.mobile = res.mobile;
					req.setStorage('userInfo', userInfo);
					_ts.mobile = res.mobile;
				});
			},
			chooseAddress() {
				let _ts = this;
				req.scopeAddress(data => {
					console.log('微信地址==', data)
					let region = [data.provinceName, data.cityName, data.countyName];
					let params = {
						address: data.provinceName + data.cityName + (data.countyName ? data.countyName : ''),
						isDefault: 1,
						name: data.userName,
						phone: data.telNumber,
						house: data.detailInfo,
						region: region.join(',')
					}
					this.saveAddress(params);
				});
			},
			saveAddress(params) {
				req.postRequest('/api/address/save', params, data => {
					this.address = data;
				})
			},

			addOrUpdateAddress() {
				let url = 'mine/addAddress/addAddress?isChoose=true';

				if (this.address && this.address.id) {
					url = 'mine/address/address?isChoose=true' + '&addressId=' + this.address
						.id;
				}

				app.globalData.openPage(url);
			},

			submit() {
				let that = this;
				let d = {
					realName: that.name,
					mobile: that.mobile,
					cardNo: that.idcard,
					gender: that.gender == 0 ? 1 : 2,
					address: that.address.house ? that.address.address + that.address.house : that.address.address
				};
				let reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
				if (!reg.test(d.realName)) return req.msg("请输入正确真实姓名（至少2位汉字）");
				if (!d.cardNo) return req.msg('请输入证件号码');
				let sfz = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (!sfz.test(d.cardNo)) return req.msg('请输入正确的证件号码');
				if (!d.mobile) return req.msg('请输入手机号');
				let isShowLoading = false;
				if (!isShowLoading) {
					req.loadIng('保存中');
					isShowLoading = true;
				}
				req.postRequest('/api/user/save', d, res => {
					uni.redirectTo({
						url: '/open/index/index'
					})
					// that.buy();
				});
			},
			//购买
			buy() {
				let that = this;
				route.vip({
						strategyId: this.opt.id,
						scene: req.getStorage('scene')
					},
					data => {
						route.vipPay(data.id, data.status, this.opt.money, res => {
							uni.hideLoading();
							if (res) {
								app.globalData.switchTab('pages/index/index');
							}
						});
					}
				);
			},
			getUserInfo() {
				req.getRequest('/api/user/info', {}, data => {
					this.userInfo = data;
					if (data.mobile) this.mobile = data.mobile;
					if (data.realName) this.name = data.realName;
					if (data.gender > 0) this.gender = data.gender;
					if (data.cardNo) {
						this.idcard = data.cardNo;
						this.typeIndex = 0;
					}
				})
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		beforeMount() {
			const systemInfo = uni.getSystemInfoSync();
			console.log('systemInfo==', systemInfo)
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			this.pxToRpxScale = pxToRpxScale;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		}
	};
</script>

<style>
	@import "./index.css"
</style>