mycajt/pages/merchant/becomeShop.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>
					<pickerAddress class="item-right" @change="onCityClick">{{ addressDetail || '请选择地址（点击选择地址）' }}</pickerAddress>
				</view>
				<view class="box-item" @click="getLocation">
					<view class="item-left">商家地址：</view>
					<view class="item-right"><input type="text" placeholder="请选择详细地址" v-model="showaddress" /></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="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="introductory" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">身份证：</view>
					<view class="item-right"><input type="text" placeholder="请输入您的身份证" v-model="Idcard" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">推荐人id：</view>
					<view class="item-right"><input type="text" placeholder="请输入您的推荐人id" v-model="spared" /></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>
		<!-- <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 class="comfirm" @click="comfirm">提交申请</view>
	</view>
</template>

<script>
import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
import { mapState, mapMutations } from 'vuex';
import { upload, apply } from '@/api/order.js';
export default {
	components: {
		pickerAddress
	},
	computed: {
		...mapState(['userInfo'])
	},
	data() {
		return {
			imgY: '', //营业执照
			checked: false,
			name: '', //店铺名
			telphone: '', //商家电话
			introduction: '', //主营项目
			introductory: '', //简介
			Idcard: '', //身份证号码
			spared: '', //推荐人
			nameP: '', //联系人
			phone: '', //联系人电话
			showaddress: '', //详细地址
			addressDetail: '', //省市区
			cardimg: '', //店铺logo
			latitude: '',
			longitude: ''
		};
	},
	methods: {
		// 上传图片
		imgsub() {
			console.log('上传logo');
			upload({
				filename: ''
			}).then(data => {
				console.log('data', data);
				this.cardimg = data[0].url;
			});
		},
		// 上传图片
		imgsubY() {
			console.log('i上传营业执照');
			upload({
				filename: ''
			}).then(data => {
				this.imgY = data[0].url;
			});
		},
		check() {
			this.checked = !this.checked;
		},
		getLocation() {
			console.log('选择当前位置');
			let obj = this;
			uni.chooseLocation({
				success: function(res) {
					console.log('1111：' + res);
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					obj.latitude = res.latitude;
					obj.longitude = res.longitude;
					if (res.address) {
						obj.showaddress = res.address;
					} else {
						obj.showaddress = res.name;
					}
				}
			});
		},
		// 选中城市切换
		onCityClick({ data }) {
			this.addressDetail = data.join(',');
		},
		// 提交申请
		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.introduction == '') {
				obj.$api.msg('请输入您的主营项目');
				return;
			}
			if (obj.introductory == '') {
				obj.$api.msg('请输入您的商铺简介');
				return;
			}
			if (obj.spared == '') {
				obj.$api.msg('请输入您的推荐人');
				return;
			}
			if (obj.Idcard == '') {
				obj.$api.msg('请输入身份证号');
				return;
			}
			if (obj.nameP == '') {
				obj.$api.msg('请输入联系人');
				return;
			}
			if (obj.adress == '') {
				obj.$api.msg('请选择详细地址');
				return;
			}
			if (obj.addressDetail == '') {
				obj.$api.msg('请选择省市区');
				return;
			}
			if (obj.cardimg == '') {
				obj.$api.msg('请上传店铺LOGO');
				return;
			}
			if (obj.imgY == '') {
				obj.$api.msg('请上传营业执照');
				return;
			}
			apply({
				name: obj.name,
				introduction: obj.introductory,
				phone: obj.telphone,
				address: obj.addressDetail,
				detailed_address: obj.showaddress,
				image: obj.cardimg,
				latitude: obj.latitude,
				longitude: obj.longitude,
				leader: obj.nameP,
				id_card: obj.Idcard,
				job: obj.introduction,
				cert: obj.imgY,
				spread_uid: obj.spared
			})
				.then(e => {
					uni.showToast({
						title: '申请成功，请耐心等待审核',
						icon: 'success',
						duration: 2000
					});
				})
				.catch(function(e) {
					console.log('出错了');
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
.content {
}

.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;
		}
	}
}
.comfirm {
	margin: 20rpx auto 0;
	border-radius: 80rpx;
	width: 650rpx;
	height: 80rpx;
	background: #5dbb7c;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 36rpx;
}
.comfirm1 {
	margin: 0 auto;
	border-radius: 80rpx;
	width: 650rpx;
	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>