liveShop/pages/freeShop/enterprise.vue

<template>
	<view class="content">
		<view class="enterprise">
			<view class="enterprise-box">
				<view class="box-item">
					<view class="item-left">企业名称：</view>
					<view class="item-right">
						<input type="text" placeholder="请输入企业全称" v-model="name" />
					</view>
				</view>
				<view class="box-item">
					<view class="item-left">商家电话：</view>
					<view class="item-right">
						<input type="text" placeholder="请输入商家电话" v-model="telphone" />
					</view>
				</view>
				<view class="box-item">
					<view class="item-left">主营项目：</view>
					<view class="item-right">
						<input type="text" placeholder="请输入您的主营项目" v-model="introduction" />
					</view>
				</view>
			</view>
			<view class="enterprise-box">
				<view class="box-item">
					<view class="item-left">联系人：</view>
					<view class="item-right">
						<input type="text" placeholder="请输入联系人" v-model="nameP"/>
					</view>
				</view>
				<view class="box-item">
					<view class="item-left">联系手机：</view>
					<view class="item-right">
						<input type="text" placeholder="请输入联系电话" v-model="phone"/>
					</view>
				</view>
				<view class="box-item">
					<view class="item-left">商家地址：</view>
					<view class="item-right">
						<input type="text" placeholder="请输入详细地址" v-model="adress"/>
					</view>
				</view>
			</view>
			<view class="enterprise-box">
				<view class="box-item">
					<view class="item-left">店铺名称：</view>
					<view class="item-right">
						<input type="text" placeholder="请输入店铺名称" v-model="nameS"/>
					</view>
				</view>
				<view class="box-item1">
					<view class="item-left">店铺logo：</view>
					<view class="item-right">
						<image :src="cardimg" mode="" class="upload-img" @click.stop="imgsub" v-if="cardimg"></image>
						<image src="https://zhibo.liuniu946.com/img/phone.png" class="upload-img" mode="" v-if="!cardimg" @click.stop="imgsub"></image>
					</view>
				</view>
			</view>
			<view class="enterprise-box">
				<view class="box-item1">
					<view class="item-left">营业执照：</view>
					<view class="item-right">
						<image :src="imgY" mode="" class="upload-img" @click.stop="imgsubY" v-if="imgY"></image>
						<image src="https://zhibo.liuniu946.com/img/phone.png" class="upload-img" mode="" v-if="!imgY" @click.stop="imgsubY"></image>
					</view>
				</view>
			</view>
			<view class="agree" @click="check">
				<label class="radio"><view class="iconfont iconroundcheckfill checkbox" :class="{ checked: checked }"></view></label>
				
				<view>我已阅读并同意<text class="tip">《企业店铺入驻协议》</text></view> 
			</view>
		</view>
		<!-- <view class="comfirm" @click="navTo('/pages/freeShop/success')"> -->
		<!-- <view class="comfirm" @click="comfirm">
			提交申请
		</view> -->
		<view class="comfirm1" v-if="userInfo.company == 0">
			正在审核中
		</view>
		<view class="comfirm1" v-if="userInfo.company == 1">
			已通过
		</view>
		<view class="comfirm" v-else @click="comfirm" >
			提交申请
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import {
		uploads,applyQ
	} from '@/api/apply.js';
	export default{
		computed: {
			...mapState(['userInfo']),
		},
		data(){
			return{
				imgY: '',
				checked: false,
				name:'',
				telphone:'',
				introduction:'',
				nameP:'',
				phone:'',
				adress:'',
				nameS:'',
				cardimg:'',
			}
		},
		methods:{
			// 上传图片
			imgsub() {
				console.log('上传logo')
				uploads({
					filename: ''
				}).then(data => {
					console.log("data",data);
					this.cardimg = data[0].url;
				})
			},
			// 上传图片
			imgsubY() {
				console.log('i上传营业执照')
				uploads({
					filename: ''
				}).then(data => {
					this.imgY = data[0].url;
				})
			},
			check() {
				this.checked = !this.checked;
			},
			// 提交申请
			comfirm(){
				const obj = this;
				if (obj.name == '') {
					obj.$api.msg('请输入企业全称');
					return;
				}
				const reg1 = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg1.test(obj.telphone)) {
					obj.$api.msg('请输入商家电话');
					return;
				}
				if (obj.name == '') {
					obj.$api.msg('');
					return;
				}
				if (obj.introduction == '') {
					obj.$api.msg('请输入您的主营项目');
					return;
				}
				if (obj.nameP == '') {
					obj.$api.msg('请输入联系人');
					return;
				}
				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(obj.phone)) {
					obj.$api.msg('请填写正确的手机号码');
					return;
				}
				if (obj.adress == '') {
					obj.$api.msg('请输入详细地址');
					return;
				}
				if (obj.nameS == '') {
					obj.$api.msg('请输入店铺名称');
					return;
				}
				if (obj.cardimg== '') {
					obj.$api.msg('请上传店铺LOGO');
					return;
				}
				if (obj.imgY== '') {
					obj.$api.msg('请上传营业执照');
					return;
				}
				// imgY
				// nameS cardimg
				applyQ({
					type: 4,
					address: obj.address,
					jobs: obj.introduction,
					license: obj.imgY,
					company_name: obj.name,
					company_phone: obj.telphone,
					name: obj.nameS,
					introduction: obj.introduction,
					image: obj.cardimg,
					phone: obj.phone,
				}).then(e => {
					obj.name = '';
					uni.navigateTo({
						url: '/pages/wallet/tjSuccess'
					});
				}).catch(function(e) {
					console.log('出错了')
					console.log(e);
				});
			}
		}
	}
</script>

<style lang="scss">
	.content{
		
	}
	.enterprise{
		padding: 0 24rpx 24rpx;
	}
	.enterprise-box{
		background-color: #FFFFFF;
		border-radius: 12rpx;
		width: 100%;
		margin-top: 24rpx;
		.box-item{
			display: flex;
			border-bottom: 1rpx solid #f0f0f0;
			padding: 32rpx 24rpx;
			align-items: center;
			&:nth-last-child(1){
				border-bottom: none;
			}
		}
		.item-left{
			font-size: 28rpx;
			width: 160rpx;
			flex-shrink: 0;
		}
		.item-right{
			width: 100%;
			margin-left: 24rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			color: #999999;
			input{
				font-size: 28rpx;
			}
			image{
				width: 160rpx;
				height: 160rpx;
				margin-top: 24rpx;
				margin-left: 60rpx;
			}
		}
		.box-item1{
			display: flex;
			border-bottom: 1rpx solid #f0f0f0;
			padding: 32rpx 24rpx;
			// align-items: center;
			&:nth-last-child(1){
				border-bottom: none;
			}
		}
	}
	.agree{
		padding: 24rpx 0;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
		.tip{
			color: #ff0000;
		}
	}
	.comfirm{
		width: 100%;
		height: 100rpx;
		background: linear-gradient(180deg, #FD4646, #FF3535);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.comfirm1{
		width: 100%;
		height: 100rpx;
		background: #b1b1b1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.checkbox {
		font-size: 32rpx;
		color: #EEEEEE;
		background: #EEEEEE;
		border-radius: 50px;
	}
	.checked {
		color: #FD4343;
		background:#FFFFFF;
	}
	.radio {
		padding-top: 5rpx;
		margin-right: 15rpx;
	}
</style>