medicine-xcx/pagesA/my_other_list/webmaster_application/index.vue

<template>
	<view class="page_box">
		<view class="bg_img">
			<image :src="img_url+'webmaster_application_pic.png'" mode=""></image>
		</view>
		<view class="card">
				<!-- <view class="row">
					<text>推荐人</text>
					<view class="text_box" >
						<u-input v-model="top_name" disabled> </u-input>
					</view>
				</view> -->
				<u-form :model="form"  ref="uForm">
					<u-form-item prop="share_id" :border-bottom="false">
						<view class="row">
							<text>邀请码</text>
							<view class="text_box" >
								<u-input v-model="form.share_id" :disabled="state>0" placeholder="请输入邀请码"> </u-input>
							</view>
						</view>
						<view class="flex align-center" style="color: #FF0000;">
							<text class="p-l-30 font-22">{{stationmaster_code.title }}: {{stationmaster_code.value}}</text>
							<view class="text-white font-22 my-header-copy--txt"  @click="copy(stationmaster_code.value)">复制</view>
						</view>
					</u-form-item>
					<u-form-item prop="shop_name" :border-bottom="false">
						<view class="row">
							<text>店铺名称</text>
							<view class="text_box" >
								<u-input v-model="form.shop_name" :disabled="state>0" placeholder="请输入店铺名称"> </u-input>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="address" :border-bottom="false"  @tap="chooseCity(1)">
						<view class="row"  @tap="chooseCity(1)" >
							<text>店铺地址</text>
							<view class="text_box">
								<text v-if="!form.address">请选择区域</text>
								<text class="black" v-else>{{form.address}}</text> 
								<!-- <u-input placeholder="请选择区域" v-model="" disabled> </u-input> -->
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="area" :border-bottom="false">
						<view class="row">
							<text>详细地址</text>
							<view  class="text_box black" > 
								<u-input v-model="form.area" :disabled="state>0" type="textarea" height="79" auto-height />
								<!-- <input type="text" v-model="area" placeholder="请输入店铺地址"> -->
								<!-- <text v-if="!area"></text>
								<text class="black" v-else>{{area}}</text> -->
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="name" :border-bottom="false">
						<view class="row">
							<text>联系人</text>
							<view class="text_box" >
								<u-input placeholder="请输入联系人" :disabled="state>0" v-model="form.name"> </u-input>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="phone" :border-bottom="false">
						<view class="row">
							<text>联系电话</text>
							<view class="text_box" >
								<u-input placeholder="请输入电话号码" :disabled="state>0" v-model="form.phone" type="number" maxlength="11"> </u-input>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="nature">
						<view class="row">
							<text>站长性质</text>
							<view class="text_box" @click="toshow">
								<text v-if="!form.nature">请选择</text>
								<text class="black" v-else>{{form.nature}}</text>
							</view>
						</view>
					</u-form-item>
					<view class="row">
						<text>地图定位</text>
						<view @tap.stop="getChooseLocation"  class="text_box" v-if="form.latitude == null && form.longitude == null" >
							<text>请选择区域</text>
						</view>
						<map v-else style="width: 480rpx; height: 160rpx; position: relative;"
							:latitude="form.latitude" :longitude="form.longitude" :markers="markers" 
							@regionchange="onMapDrag" show-location>
							<!-- :polyline="polyline" 线 onLocationChange handleAuthorize--> 
							<!-- <cover-image class="locate-img" src="https://cheum.oss-cn-beijing.aliyuncs.com/chemuXcx-img/newimg/locate2.png"></cover-image> -->
							<view class="location-img-box"  @click.stop="getChooseLocation">
								<image style="width: 80rpx; height:80rpx;" :src="img_url + 'location.png'" mode=""></image>
							</view>
						<!-- 	<cover-view class=""  @click.stop="getChooseLocation">
								<cover-image class="location-img" :src="img_url + 'location.png'"></cover-image>
							</cover-view> -->
						</map>
					</view>
					
				</u-form>
				<view class="hint" v-if="form.nature !== '非商户'">
					<text class="">*上传营业执照照片</text>
				</view>
				<view class="img_box" v-if="form.nature !== '非商户'">
					<view class="hint_pic">
						<u-upload ref="uUpload3"
						:header="headerInfo" 
						:action="upload_img"
						:custom-btn="true" 
						:disabled="state>0"
						image-mode="none"
						@before-upload="isUpload"
						@on-success="onSuccess3"
						@on-error="onErrorInfo"
						max-count="1" width="281" height="192"  >
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<image :src="form.hintImage?form.hintImage:(img_url+'upLoad.png')" mode=""></image>
							</view>
						</u-upload>
						<template v-if="state>0">
							<image :src="form.hintImage" mode=""></image>
						</template>
					</view>
				</view>
				<view class="hint">
					<text class="">*上传站长身份证正反面照片</text>
				</view>
				<view class="img_box">
					
					<view class="pic_box">
						<u-upload ref="uUpload" 
						:header="headerInfo" 
						:action="upload_img"
						:custom-btn="true" 
						:disabled="state>0"
						@before-upload="isUpload"
						image-mode="none"
						@on-success="onSuccess"
						@on-error="onErrorInfo"
						max-count="1" width="281" height="192"  >
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<image :src="form.idPhoto?form.idPhoto:(img_url+'member/obverse.png')" mode=""></image>
							</view>
						</u-upload>
						<template v-if="state>0">
							<image :src="form.idPhoto" mode=""></image>
						</template>
					</view>
					<view class="pic_box">
						<u-upload ref="uUpload2" 
						:header="headerInfo" 
						:action="upload_img"
						:custom-btn="true" 
						image-mode="none"
						:disabled="state>0"
						@on-success="onSuccess2"
						@before-upload="isUpload"
						@on-error="onErrorInfo"
						max-count="1" width="281" height="192"  >
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<image :src="form.idPhotoImage?form.idPhotoImage:(img_url+'member/reverse.png')" mode=""></image>
							</view>
						</u-upload>
						<template v-if="state>0">
							<image :src="form.idPhotoImage" mode=""></image>
						</template>
					</view>
				</view>
				<view class="pay_info" v-if="stationmaster_go_money.isOpen == 0">
					<text>￥</text>
					<text>{{stationmaster_go_money.value}}</text>
					<text>元/年</text>
				</view>
				<view class="m-l-30 m-t-20" v-if="state == '-1' || state == '0'">
					<u-checkbox-group active-color="#01AD19" >
						<u-checkbox v-model="isAgreement" shape="circle" @change="handleChekChange">
							<view class="login-agreement">
								请勾选
								<text class="login-agreement--text" @click.stop="toAgreement('合作协议', 0)">《合作协议》</text>
								<!-- <text class="login-agreement--text" @click.stop="toAgreement('隐私政策', 1)"></text> -->
							</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				
				<!-- <button class="sumbtn success" @click="submit">{{title_pay}}</button> -->
				<button class="sumbtn" @click="submit" v-if="title_text == '提交申请'">{{title_text}}</button>
				<button class="sumbtn_shz" @click="submit" v-if="title_text == '审核中'">{{title_text}}</button>
				<button class="sumbtn_pay" @click="submit" v-if="title_text == '去支付'">{{title_text}}</button>
				<button class="sumbtn" @click="submit" v-if="title_text == '编辑'">{{title_text}}</button>
				<button class="sumbtn_success" @click="submit" v-if="title_text == '已完成'">{{title_text}}</button>
				
				
				
			<u-picker :popup="true" v-model="is_show" mode="selector" zIndex="1000" :default-selector="[0]" :range="selectChange" @confirm='selectNature' @cancel="onCancel"></u-picker>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import config_img from "@/utils/js/config.js";
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				img_url: config_img.img_url,
				isAgreement: false,
				upload_img: '',
				href: 'api/info/upload',
				headerInfo: {
					"content-type": "application/x-www-form-urlencoded",
					"X-Access-Token": ''
				},
				fileList1: [],
				is_show: false,
				selectChange: ['商户', '非商户'],
				cityPickerValue: [0, 0, 0],
				themeColor: '#007AFF',
				markers: [], //  标记点列表
				select_show: 0, //用户点击的是那一个0 区域 1 地址
				form: {
					share_id: '',
					shop_name: "",
					name: "",
					phone: "",
					address: "",
					area: "",
					latitude: 1, // 当前位置经纬度
					longitude: 1, // 当前位置经纬度
					nature: "",
					idPhoto: "",   //正面身份证
					idPhotoImage: "", //反面身份证
					hintImage: "", // 营业执照
				},
				rules: {
					share_id: [
						{
							required: true, 
							message: '请输入邀请码',
							trigger: ['blur']
						}
					],
					shop_name: [
						{
							required: true, 
							message: '请输入店铺名称',
							trigger: ['blur']
						}
					],
					address: [
						{
							required: true,
							message: '请选择店铺地址',
							trigger: ['change', 'blur']
						}
					],
					area: [
						{
							required: true, 
							message: '请输入店铺地址',
							trigger: ['blur']
						}
					],
					name: [
						{
							message: '请输入联系人',
						},
						{
							validator: (rule, value, callback) => {
								let username = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,99}$/;
								return username.test(value);
							},
							message: '请输入正确格式的联系人',
							trigger: ['blur']
						}
					],
					phone: [
						{
							required: true,
							message: '请输入手机号码',
							trigger: ['change', 'blur']
						},
						{
							message: '请输入正确格式的手机号码',
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							}
						}
					],
					nature: [
						{
							required: true,
							message: '站长性质',
							trigger: ['change', 'blur']
						}
					],
				},
			
				title_text: "提交申请",
				title_pay: "去支付",
				isEdit: false,
				id: '',   //支付id
				payType: null,  // 是否已经支付
				stationmaster_go_money: {},
				stationmaster_code: {},
				state: -1,  //-1为添加 0为编辑 1 支付 2 已完成
				isReject : 0 ,//  0 不是 3 是
			}
		},
		onLoad() {
			let token = uni.getStorageSync("__user_token");
			this.headerInfo["X-Access-Token"] = token;
			this.upload_img = this.$upload_img;
			this.getIsStation()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			toAgreement(title, type) {
				this.$tools.navigateTo({
					url: `/pages/agreement/index?title=${title}&type=${type}`
				})
			},
			// 查询站长是否存在
			getIsStation() {
				uni.showLoading()
					this.$api('getIsStation')
					.then(res => {
						let { code, result, message } = res
						if (code === 200) {
							console.log(result)
							if (result.stationmaster) {
								this.form.share_id = result.pid
								this.form.shop_name = result.stationmaster.shopName
								this.form.name = result.stationmaster.name
								this.form.phone = result.stationmaster.phone
								this.form.address = result.stationmaster.shopAddress 
								this.form.area = result.stationmaster.address
								this.form.nature = result.stationmaster.nature 
								this.form.latitude = result.stationmaster.latitude  // 当前位置经纬度
								this.form.longitude = result.stationmaster.longitude  // 当前位置经纬度
								this.form.idPhoto = result.stationmaster.idPhoto  //正面身份证
								this.form.idPhotoImage = result.stationmaster.idPhotoImage //反面身份证
								this.form.hintImage = result.stationmaster.businessLicenseImage // 营业执照
								this.state = result.stationmaster.state //状态
								if( result.stationmaster.state == 0){
									this.title_text = "审核中";
									this.isEdit = true
								}else if (result.stationmaster.state == 1){ 
									this.title_text = "初步审核通过";
								}else if (result.stationmaster.state == 3){
									this.title_text = "编辑";
									this.isEdit = true
									this.isReject = result.stationmaster.state;
								}
								else if (result.stationmaster.state == 4){
									this.title_text = "去支付";
									this.isEdit = true
									this.isReject = result.stationmaster.state;
								}else{
									this.title_text = "已完成";
								}
								this.id = result.stationmaster.id
								this.payType = result.stationmaster.payType
								// this.isEdit = true;
								// 是站长
							}else {
								
								// 不是
							}
							this.stationmaster_code = result.stationmaster_code
							this.stationmaster_go_money = result.stationmaster_go_money
							uni.hideLoading();
						} else {
							this.$Toast(message)
							uni.hideLoading();
						}
					})
					.catch(err => {
						this.$Toast(err.message)
					})
			},
			onSuccess(data) {
				this.form.idPhoto = data.result
			},
			onSuccess2(data){
				this.form.idPhotoImage = data.result
			},
			onSuccess3(data){
				this.form.hintImage = data.result
			},
			onErrorInfo(data) {
				console.log(data)
				if(data.code == 401){
					this.$tools.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			getChooseLocation() {
				if(this.latitude == null && this.longitude == null){
					uni.getLocation({
						type: 'gcj02 ',
						success: res => {
							console.log(res)
							this.form.latitude = res.latitude;
							this.form.longitude = res.longitude;
							this.handleAuthorize()
						},
						fail: err=> {
							this.$Toast('定位失败！')
						}
					})
				}else {
					this.handleAuthorize()
				}
				
			},
			
			// 授权定位
			handleAuthorize() {
				uni.chooseLocation({
					latitude: this.form.latitude,
					longitude: this.form.longitude,
					success: res =>{
						console.log(res)
						this.latitude = res.latitude
						this.longitude = res.longitude
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			copy (val) {
				uni.setClipboardData({
					data: val,
					showToast: true
				})
			},
			onMapDrag(e){
				// 获取用户定位的经纬度
				var map = uni.createMapContext('myMap', this);
				map.getCenterLocation({
					success:(res)=>{
						console.log(res)
						this.qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (location) => {
								let {result} = location
								console.log('location=======>',result,result.formatted_addresses.recommend)
								this.locale = result.formatted_addresses.recommend
							},
						})
						setTimeout(()=>{
								this.getMarkeres(res.latitude, res.longitude)
						},1000)
					}
				})
			},
			submit() {
				if(this.title_text == '已完成' || this.title_text == '审核中') return false
				// 是否勾选协议
				if(!this.isAgreement && (this.state == '-1' || this.state == '0')) {
					this.$Toast('请勾选合作协议！');
					return
				}
				// share_id //未确定
				const params = {
					pid: this.form.share_id,
					name: this.form.name,
					phone: this.form.phone,
					nature: this.form.nature,
					// pid: this.top_name,
					shopName: this.form.shop_name,
					shopAddress: this.form.address ,
					address: this.form.area,
					latitude: this.form.latitude,
					longitude: this.form.longitude,
					idPhoto: this.form.idPhoto,
					idPhotoImage: this.form.idPhotoImage,
					businessLicenseImage: this.form.hintImage,
				}
				if(this.isReject === 3) {
					params.state = 3
				}
				if(params.nature == '非商户'){
					delete params.businessLicenseImage;
				}
				console.log(params)
				this.$refs.uForm.validate(valid => {
					if (valid) {
						//   检测是否都输入了
						if(!this.detection()) {
							return "";
						}
						if(this.title_text == '去支付') {
							// 支付
							this.payMoney()
						}else {
							// 是否是编辑
							if(this.isEdit){
								this.addStation(params,'editStation');
							}else{
								this.addStation(params,'addStation');
							}
						}
					} else {
						console.log('验证失败');
					}
				});
				
			},
			detection() {
				
				if(this.form.latitude == null && this.form.longitude == null){
					this.$Toast('请进行地图定位！');
					return false;
				}
				if(this.hintImage == "") {
					this.$Toast('请上传营业执照！');
					return false;
				}
				if(this.idPhoto == "") {
					this.$Toast('请上传身份证正面图片！');
					return false;
				}
				if(this.idPhotoImage == "") {
					this.$Toast('请上传身份证反面图片！');
					return false;
				}
				return true
			},
			// 支付
			payMoney(){
				this.$api("createStation",{id:this.id}).then(res => {
					let { code, result, message} = res;
					if(code == 200) {
						this.weChatPay(result)
					}else {
						this.$Toast(message)
					}
				}).catch(err => {
					this.$Toast(err.message)
				})
			},
			weChatPay (params) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: params.timeStamp,
					nonceStr: params.nonceStr,
					package: params.packageValue,
					signType: params.signType,
					paySign: params.paySign,
					success: res => {
						this.title_text = '已完成'
						this.$Toast('支付成功');
					},
					fail:error=>{
						this.$Toast('取消支付')
					}
				})
			},
			// 提交
			addStation (params,url) {
				uni.showLoading()
					this.$api(url,params)
					.then(res => {
						let { code, result, message } = res
						if (code === 200) {
							console.log(result)
							
							this.$Toast(message+"请耐心等待！")
							uni.hideLoading();
							setTimeout(() => {
								this.getIsStation();
							},1500)
							this.id  = result.id
							this.isDisabled = true
						} else {
							this.$Toast(message);
							uni.hideLoading();
						}
					})
					.catch(err => {
						this.$Toast(err.message)
					})
			},
			toshow(){
				// 0 为编辑状态  1 支付 2已完成
				if(this.state > 0) {
					return
				}
				this.is_show = true;
				console.log(this.is_show)
			},
			onCancel(e) {
			},
			selectNature(res) {
				// 选择的性质
				console.log(res)
				const index = res[0];
				this.form.nature = this.selectChange[index];
			},
			chooseCity(index) {
				// 0 为编辑状态  1 支付 2已完成
				if(this.state > 0) {
					return
				}
				this.select_show = index;
				console.log(index)
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
				// console.log(e)
				let arr = e.label.split('-');
				this.form.address = `${arr[0]} ${arr[1]} ${arr[2]}`
				console.log(e)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item{
		padding: 0 !important;
		margin: 0 !important;
	}
	.locate-img {
		width: 50rpx;
		height: 82rpx;
	}
	.location-img-box{
		width: 80rpx;
		position: absolute;
		bottom: 0;
		right: 20rpx;
		z-index: 11;
	}
	.pic_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
		/deep/.u-list-item {
			margin: 0;
			width: 264rpx !important;
			height: 158rpx !important;
			border-radius: 12rpx;
			.u-preview-image{
				width: 264rpx;
				height: 158rpx;
			}
			image {
				width: 264rpx;
				height: 158rpx;
			}
		}
		image {
			width: 264rpx;
			height: 158rpx;
			border-radius: 12rpx;
		}
	}
	.hint_pic{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
		/deep/.u-list-item {
			margin: 0;
			width: 232rpx !important;
			height: 232rpx !important;
			border-radius: 12rpx;
			.u-preview-image{
				width: 264rpx;
				height: 232rpx;
			}
			image {
				width: 232rpx;
				height: 232rpx;
			}
		}
		image {
			width: 232rpx;
			height: 232rpx;
			border-radius: 12rpx;
		}
	}
.page_box{
	position: relative;
	.bg_img{
		width: 100%;
		height: 494rpx;
		background-size: 750rpx 494rpx;
	}
	.card{
		position: absolute;
		top: 320rpx;
		left: 38rpx;
		background-color: #fff;
		border-radius: 17rpx;
		width: 674rpx;
		padding-bottom: 50rpx;
		box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
		.row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 17rpx;
			margin-right: 20rpx;
			margin-left: 40rpx;
			&:first-child{
				margin-top: 34rpx;
			}
			
			&:nth-child(3){
				margin-left: 32rpx;
			}
			
			.mome_box{
				height: inherit;
				min-height: 79rpx;
				border: none;
				.mome_address{
					width: 480rpx;
					min-height: 79rpx;
					box-sizing: border-box;
					border: 1px solid #DCDCDC;
					padding-left: 32rpx;
					padding-top: 20rpx;
					padding-right: 10rpx;
					padding-bottom: 10rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 36rpx;
				}
			}
		}
		.text_box{
			width: 480rpx;
			min-height: 79rpx;
			border: 1px solid #DCDCDC;
			/deep/ .u-input__input{
				padding-left: 35rpx;
			}
			.black{
				color: #000000;
			}
			text{
				padding-left: 35rpx;
				line-height: 79rpx;
				font-size: 28rpx;
				color: #9B9B9B;
			}
		}
		.hint{
			margin-top: 33rpx;
			margin-left: 32rpx;
			margin-bottom: 39rpx;
			font-size: 28rpx;
			color: #000000;
		}
		.img_box{
			margin-left: 59rpx;
			display: flex;
		}
		.sumbtn{
			width: 611rpx;
			height: 88rpx;
			margin-top: 70rpx;
			border-radius: 38rpx;
			background-color: #01AEEA;
			color: #fff;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.sumbtn_pay{
			width: 611rpx;
			height: 88rpx;
			margin-top: 70rpx;
			border-radius: 38rpx;
			background-color: #FF0000;
			color: #fff;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.sumbtn_shz{
			width: 611rpx;
			height: 88rpx;
			margin-top: 70rpx;
			border-radius: 38rpx;
			background-color: #C0C0C0;
			color: #fff;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.sumbtn_success{
			width: 611rpx;
			height: 88rpx;
			margin-top: 70rpx;
			border-radius: 38rpx;
			background-color: #00FF00;
			color: #fff;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.sumbtn{
			width: 611rpx;
			height: 88rpx;
			margin-top: 70rpx;
			border-radius: 38rpx;
			background-color: #01AEEA;
			color: #fff;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.sumbtn_stop{
			background-color: #a5a5a5;
		}
		.pay_info{
			width: 611rpx;
			height: 102rpx;
			margin: 0 auto;
			border-radius: 17rpx;
			line-height: 102rpx;
			text-align: center;
			background-color: #FFEDCF;
			color: #8B5B13;
			margin-top: 17rpx;
			text{
				&:nth-child(1){
					font-size: 36rpx;
				}
				&:nth-child(2){
					font-size: 50rpx;
				}
				&:nth-child(3){
					font-size: 30rpx;
				}
			}
		}
		.red{
			background-color: #DB0618;
		}
		.success{
			background-color: #1AA810;
		}
	}
}
// 合作协议样式
.login-agreement--text{
	color: $u-type-primary;
}
.my-header-copy--txt{
	margin-left: 20rpx;
	opacity: 0.4;
	background: #000000;
	width: 100rpx;
	height: 28rpx;
	line-height: 28rpx;
	text-align: center;
	border-radius: 10rpx;
}
</style>