college/pages/index/europeShop.vue

<template>
	<view class="content">
		<view>
			<image  src="../../static/img/europeShop.png" mode="" class="europeShopImg"></image>
		</view>
		<view class="box">
			<view class="cont">
				<view class="line">
					<view class="lineTitle">
						<span class="xx">*</span>
						<span class="title">门店名称</span>
					</view>
					<view class="lineInputBox">
						<image src="../../static/img/shop.png" mode="" class="lineImg"></image>
						<input v-model="shopName" type="text" class="lineInput" placeholder="请填写您的门店名称"/>
					</view>
				</view>
				<view class="line">
					<view class="lineTitle">
						<span class="xx">*</span>
						<span class="title">姓名</span>
					</view>
					<view class="lineInputBox">
						<image src="../../static/img/name.png" mode="" class="lineImg"></image>
						<input v-model="contactor" type="text" class="lineInput" placeholder="请填写姓名"/>
					</view>
				</view>
				<view class="line">
					<view class="lineTitle">
						<span class="xx">*</span>
						<span class="title">手机号</span>
					</view>
					<view class="lineInputBox">
						<image src="../../static/img/call.png" mode="" class="lineImg"></image>
						<input v-model="contactorPhone" type="number" maxlength="11" class="lineInput" placeholder="请填写手机号"/>
					</view>
				</view>
				<view class="line" @click="open">
					<view class="lineTitle">
						<span class="title">省市区</span>
					</view>
					<view class="lineInputBox">
						<image src="../../static/img/adress.png" mode="" class="lineImg"></image>
						<view  v-if="!str" class="city">请选择</view>
						<view  v-if="str" class="city2">{{str}}</view>
					</view>
				</view>
				<view class="line">
					<view class="lineTitle">
						<span class="title">地址</span>
					</view>
					<view class="lineInputBox">
						<image src="../../static/img/adress.png" mode="" class="lineImg"></image>
						<input v-model="address" type="text" class="lineInput" placeholder="请填写地址"/>
					</view>
				</view>
				<view class="BtnBox">
					<view class="btn" @click="submitFn">提交申请</view>
				</view>
				
			</view>
		</view>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
	    
		<view class="tisBox" v-if="tisSHow">
			<view class="tisCont">
				<view class="tisLine">申请成功，您可登录下面的地址进行体验</view>
				<view class="tisline">
					地址：<a href="https://edms.eurorepar.cn/login">https://edms.eurorepar.cn/login</a>
				</view>
				<view class="tisLine">账号密码均为您申请时填写的手机号，账号有效期60天。</view>
			 	<view class="btn2" @click="copy">复制文本</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	 import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		components: {
		    cityPicker
		},
		data() {
			return {
				title: '',
				 visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				shopName:'',
				contactorPhone:'',
				contactor:'',
				address:'',
				province:'',
				provinceName:'',
				city:'',
				cityName:'',
				area:'',
				areaName:'',
				tisSHow:false,
			}
		},
		onLoad() {
		  uni.setNavigationBarTitle({
		      title: '欧洲维修DMS系统体验申请' // 设定新标题
		    });
		},
		methods: {
            open () {
                this.visible = true
            },
            confirm (val) {
                console.log(val)
				this.province=val.code.slice(0,1)+'0000'
				this.provinceName=val.provinceName
				this.city=val.code.slice(0,3)+'00'
				this.cityName=val.cityName
				this.area=val.code
				this.areaName=val.areaName
                this.str = val.name
                this.visible = false
            },
            cancel () {
                this.visible = false
            },
			submitFn(){
				let that = this
				if(!this.shopName){
					uni.showToast({
						title:'门店名称必填',
						icon: 'none',
						duration: 3000
					}); 
					return false
				}
				if(!this.contactor){
					uni.showToast({
						title:'姓名必填',
						icon: 'none',
						duration: 3000
					}); 
					return false
				}
				if(!this.contactorPhone){
					uni.showToast({
						title:'手机号必填',
						icon: 'none',
						duration: 3000
					}); 
					return false
				}
				if(this.contactorPhone.length!=11){
					uni.showToast({
						title:'请输入正确的手机号',
						icon: 'none',
						duration: 3000
					}); 
					return false
				}
				
				uni.showLoading({
					title: '加载中'
				});
				
				this.$request.europehttp('sys/addSuperShopApplicationEurope', {
					shopName:this.shopName,
					contactorPhone:this.contactorPhone,
					contactor:this.contactor,
					address:this.address,
					province:this.province,
					provinceName:this.provinceName,
					city:this.city,
					cityName:this.cityName,
					area:this.area,
					areaName:this.areaName,
				}, 'POST').then(res => {
					uni.hideLoading();
					if(res.code==0){
						this.tisSHow=true
					}else{
						/* uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						}); */
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
					}
				
				})
			},
			copy(){
				var txt='申请成功，您可登录下面的地址进行体验。地址：https://edms.eurorepar.cn/login，账号密码均为您申请时填写的手机号，账号有效期60天。'
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		} 
	}
</script>

<style scoped>
	.content{
		background: #F15E2A;
		min-height: 100vh;
	}
	.europeShopImg{
		width: 100%;    display: block;
	}
	.box{
		padding: 0 24rpx;
		
	}
	.cont{
		background: #FEF8F6;
		padding-left: 34rpx;
		padding-right: 20rpx;
		margin-top: -2rpx;
		padding-top: 2rpx;
	}
	.line{
		padding-top: 32rpx;padding-bottom: 16rpx;
	}
	.xx{
		color: #FF0000;font-size: 28rpx;
	}
	.title{
		font-size: 28rpx;color: #222222;font-weight: 600;
	}
	.lineImg{
		width: 30rpx;height: 30rpx;margin-top: 22rpx;
	}
	.lineInputBox{
		border-radius: 10rpx;
		border: 2rpx solid rgba(34,34,34,0.2);
		display: flex;
		line-height: 72rpx;
		height: 72rpx;
		padding-left: 23rpx;
	}
	.lineInput{
		line-height: 72rpx;
		height: 72rpx;
		padding-left: 18rpx;
		font-size: 28rpx;
		width: calc(100% - 50rpx);
	}
	.lineTitle{
		padding-bottom: 16rpx;
	}
	.city{
		line-height: 72rpx;
		height: 72rpx;
		padding-left: 18rpx;
		font-size: 28rpx;
		color: #666;
	}
	.city2{
		line-height: 72rpx;
		height: 72rpx;
		padding-left: 18rpx;
		font-size: 28rpx;
		color: #222;
	}
	.BtnBox{
		padding-top: 40rpx;
		padding-bottom: 26rpx;
	}
	.btn{
		width: 100%;
		height: 98rpx;
		background: #F05E23;
		border-radius: 20rpx;
		text-align: center;
		line-height: 98rpx;
		color: #FFFFFF;
		font-weight: 600;
		font-size: 28rpx;
	}
	.tisBox{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
	}
	.tisCont{
		background: #FFFFFF;
		padding: 20rpx;
		margin-top: 30vh;
		margin-left: 5vw;
		width: calc(90vw - 40rpx);
		font-size: 28rpx;
		color: #222222;
		border-radius: 12rpx;
	}
	.btn2{
		width: 148rpx;
		height: 68rpx;
		background: #F05E23;
		border-radius: 20rpx;
		text-align: center;
		line-height: 68rpx;
		color: #FFFFFF;
		font-weight: 600;
		font-size: 28rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>