psH5/pages/shop/becomeShop.vue

<template>
	<view class="content">
		<image class="shop-banner" src="../../static/images/shop-banner.png" mode="widthFix"></image>
		<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="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>
			<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" @click="getLocation"> -->
				<view class="box-item">
					<view class="item-left">商家地址：</view>
					<view class="item-right">
						<input type="text" placeholder="请填写详细地址" v-model="showaddress" />
					</view>
				</view>
				<view class="box-item">
					<view class="item-left">商户类型：</view>
					<view class="item-right">
						<picker mode="selector" :range="typeList" range-key='type_name' @change="changeType">
							<view>{{type.type_name}}</view>
						</picker>
					</view>
				</view>
				<view class="box-item">
					<view class="item-left">店铺类型：</view>
					<view class="item-right">
						<picker mode="selector" :range="classifyList" range-key='category_name'
							@change="changeClassify">
							<view>{{classify.category_name}}</view>
						</picker>
					</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="Idcard" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">店铺简介：</view>
					<view class="item-right"><input type="text" placeholder="请输入店铺简介" v-model="introductory" /></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="account" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">商户密码：</view>
					<view class="item-right"><input type="password" placeholder="请输入商户密码" v-model="pwd" /></view>
				</view>
				<view class="box-item">
					<view class="item-left">重复密码：</view>
					<view class="item-right"><input type="password" placeholder="请重复输入商户密码" v-model="pwdRs" /></view>
				</view>
			</view>

			<view class="enterprise-box">
				<view class="box-item1">
					<view class="item-left">商户门头：</view>
					<view class="item-right">
						<image :src="cardimg" mode="" class="upload-img" @click.stop="imgsub" v-if="cardimg">
						</image>
						<image src="../../static/images/up-img.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">商户logo：</view>
					<view class="item-right">
						<image :src="imgY" mode="" class="upload-img" @click.stop="imgsubY" v-if="imgY">
						</image>
						<image src="../../static/images/up-img.png" class="upload-img" mode="" v-if="!imgY"
							@click.stop="imgsubY"></image>
					</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-item1">
					<view class="item-left">店内照片：</view>
					<view class="item-right">
						<image :src="shopImg" mode="" class="upload-img" @click.stop="imgsub('imgsub')" v-if="shopImg"></image>
						<image src="../../static/images/up-img.png" class="upload-img" mode="" v-if="!shopImg" @click.stop="imgsut"></image>
					</view>
				</view>
			</view> -->
		</view>
		<!-- <view class="flex">
			<view class="">
			</view>
			<view class="">
				我已阅读并同意
			</view>
			<view class="shopDetail">
			《商户入驻协议》
			</view>
		</view> -->
		<view class="comfirm" @click="comfirm">提交申请</view>
		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
	</view>
</template>

<script>
	// import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		upload
	} from '@/api/order.js';
	import {
		apply,
		gettype,
		getclassify
	} from '@/api/shop.js';
	export default {
		// components: {
		// 	pickerAddress
		// },
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				classify: {
					category_name: '请选择店铺类型'
				}, //选择的商户分类
				classifyList: [], //商户分类列表
				type: {
					type_name: '请选择商户类型'
				}, //选择的商户类型
				typeList: [], //商户类型列表
				imgY: '', //商户logo
				checked: false,
				name: '', //店铺名
				introductory: '', //简介
				Idcard: '', //身份证号码
				nameP: '', //联系人
				phone: '', //联系人电话
				showaddress: '', //详细地址
				// addressDetail: '', //省市区
				cardimg: '', //商户门头
				// latitude: '',
				// longitude: '',
				account: '', //商户账号
				pwd: '', //商户密码
				canvasStatus: false,
				canvasWidth: '',
				canvasHeight: '',
				pwdRs: ''
			};
		},
		onShow() {
			this.getType();
			this.getClassify();
		},
		methods: {
			// 获取商户分类列表
			getType() {
				gettype().then(({
					data
				}) => {
					this.typeList = data
				})
			},
			// 获取店铺类型列表
			getClassify() {
				getclassify().then(({
					data
				}) => {
					this.classifyList = data
				})
			},
			changeClassify(e) {
				let i = e.detail.value
				this.classify = this.classifyList[i]
				console.log(this.classify, '123');
			},
			changeType(e) {
				let i = e.detail.value
				this.type = this.typeList[i]
			},
			// 上传门内图片
			imgsut() {
				// console.log('上传logo');
				upload({
					filename: ''
				}).then(data => {
					// console.log('data', data);
					this.shopImg = data[0].url;
				});
			},
			// 上传门店logo图片
			imgsub() {
				// console.log('上传logo');
				const obj = this
				this.canvasStatus = true
				this.$util.uploadImageChange('upload/image', function(res) {
					obj.cardimg = res.data.url;
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},
			// 上传营业执照图片
			imgsubY() {
				const obj = this
				// console.log('i上传营业执照');
				this.$util.uploadImageChange('upload/image', function(res) {
					obj.imgY = res.data.url;
					console.log(obj.imgY, '12345');
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},
			check() {
				this.checked = !this.checked;
			},
			// getLocation() {
			// 	console.log('选择当前位置');
			// 	let obj = this;
			// 	uni.chooseLocation({
			// 		success: function(res) {
			// 			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;
				}
				if (obj.classify.category_name == '请选择店铺类型') {
					obj.$api.msg('请选择店铺类型');
					return;
				}
				if (obj.type.type_name == '请选择商户类型') {
					obj.$api.msg('请选择商户类型');
					return;
				}
				if (obj.introductory == '') {
					obj.$api.msg('请输入您的商铺简介');
					return;
				}
				if (obj.Idcard == '') {
					obj.$api.msg('请输入身份证号');
					return;
				}
				if (obj.nameP == '') {
					obj.$api.msg('请输入联系人');
					return;
				}
				if (obj.phone == '') {
					obj.$api.msg('请输入联系人电话');
					return;
				}
				if (obj.showaddress == '') {
					obj.$api.msg('请选择详细地址');
					return;
				}
				if (obj.cardimg == '') {
					obj.$api.msg('请上传门头照片');
					return;
				}
				if (obj.imgY == '') {
					obj.$api.msg('请上传营业执照');
					return;
				}
				if (obj.account == '') {
					obj.$api.msg('请填写商户账号');
					return;
				}
				if (obj.pwd == '') {
					obj.$api.msg('请填写商户密码');
					return;
				}
				if (obj.pwd != obj.pwdRs) {
					obj.$api.msg('重复密码输入不相同请重新输入');
					return;
				}
				apply({
						mer_name: obj.name,
						category_id: obj.classify.merchant_category_id,
						type_id: obj.type.mer_type_id,
						name: obj.nameP,
						account: obj.account,
						pwd: obj.pwd,
						phone: obj.phone,
						mer_address: obj.showaddress,
						Idcard: obj.Idcard,
						introduction: obj.introductory,
						image: obj.imgY,
						shopImg: obj.cardimg
					})
					.then(e => {
						uni.showToast({
							title: '申请成功，请耐心等待审核',
							icon: 'success',
							duration: 2000
						});
					})
					.catch(function(e) {
						console.log('出错了');
						console.log(e);
					});
			}
		}
	};
</script>

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

	.shop-banner {
		width: 750rpx;
	}

	.enterprise {
		padding: 30rpx;
	}

	.enterprise-box {
		background-color: #ffffff;
		border-radius: 12rpx;
		width: 100%;
		margin-bottom: 30rpx;

		.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;
		width: 750rpx;
		height: 80rpx;
		background: #681445;
		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>