xihaigou/pages/user/joinShop.vue

<template>
	<view class="content">
		<view class="jg"></view>
		<view class="tab">
			<view class="tab-item flex">
				<view class="item-name">店铺名称</view>
				<input type="text" placeholder="请输入店铺名称" class="item-val" v-model="merchant_name">
			</view>
			<view class="tab-item flex">
				<view class="item-name">联系人：</view>
				<input type="text" placeholder="请输入联系人" class="item-val" v-model="link_user">
			</view>
			<view class="tab-item flex">
				<view class="item-name">联系手机：</view>
				<input type="text" placeholder="请输入联系手机" class="item-val" v-model="link_tel">
			</view>
			<view class="tab-item flex">
				<view class="item-name">省市区：</view>
				<pickerAddress class="item-val" :class="{'nosz': addressDetail == ''}" @change="onCityClick">
					{{addressDetail||'请选择地址'}}
				</pickerAddress>
			</view>
			<view class="tab-item flex">
				<view class="item-name">详细地址：</view>
				<input type="text" placeholder="请输入详细地址" class="item-val" v-model="address">
			</view>
			<view class="up-img flex" style="justify-content: flex-start;">
				<view class="item-name">商户证书：</view>
				<image :src="charter" mode="" @click="imgsub" v-if="charter"></image>
				<image src="../../static/img/add.png" mode="" @click="imgsub" v-else></image>
			</view>
		</view>
		<view class="sub" @click="sub" :class="{'hui': load}">
			申请入驻
		</view>
	</view>
</template>

<script>
	import {
		upload
	} from '@/api/order.js'
	import {
		ssrz
	} from '@/api/user.js'
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	export default {
		components: {
			pickerAddress,
		},
		data() {
			return {
				ssq: [],
				addressDetail: '',
				address: '',
				merchant_name: '',
				link_user: '',
				link_tel: '',
				charter: '',
				load: false
			}
		},
		methods: {
			imgsub() {
				let obj = this
				console.log('上传头像')
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择、摄像头
						success: function(res) {
									obj.charter = res.tempFilePaths[0]
									console.log(obj.charter,'obj.charter');
								}
				})
				upload({
					filename: ''
				}).then(res => {
					console.log(res[0].url, 'url')
					obj.charter = res[0].url
				});

			},
			bindIndustryChange(e) {
				this.industry = this.industryList[e.detail.value]
			},
			//职称选择
			handleTap2(name) {
				this.$refs[name].show()
			},
			//职称选择
			handleChange2(item) {},
			//职称选择
			handleConfirm2(item) {
				let obj = this;
				obj.doctor_level = item.item.name;
				obj.level_id = item.item.id;
				console.log(obj.doctor_level, obj.level_id)
			},
			// 选中城市切换
			// 选中城市切换
			onCityClick({
				data
			}) {
				console.log(data)
				this.ssq = data
				this.addressDetail = data.join(' ');
			},
			// 发布
			sub() {
				let obj = this
				if (obj.load) {
					return
				}
				if (obj.merchant_name == '') {
					return obj.$api.msg('请输入店铺名称')
				}
				if (obj.link_user == '') {
					return obj.$api.msg('请输入联系人')
				}
				if (obj.link_tel == '') {
					return obj.$api.msg('请输入联系电话')
				}
				if (obj.addressDetail == '') {
					return obj.$api.msg('请选择省市区')
				}
				if (obj.address == '') {
					return obj.$api.msg('请输入详细地址')
				}
				if (obj.charter == '') {
					return obj.$api.msg('请上传商户证书')
				}
				obj.load = true
				ssrz({
					address: obj.address,
					merchant_name: obj.merchant_name,
					link_user: obj.link_user,
					link_tel: obj.link_tel,
					charter: obj.charter,
					province: obj.ssq[0],
					city: obj.ssq[1],
					district: obj.ssq[2]
				}).then(res => {
					obj.load = false
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					uni.switchTab({
						url:'./user'
					})
				}).catch(err => {
					obj.load = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.place {
		color: #999;
	}

	.jg {
		height: 20rpx;
	}

	.tab {
		width: 690rpx;
		margin: auto;
		border-radius: 10px;
		background-color: #fff;
		margin-bottom: 20rpx;

		.tab-item {
			padding: 0 20rpx;
			font-size: 30rpx;
			align-items: flex-start;
			line-height: 100rpx;
			border-bottom: 1px #F0F0F0 solid;

			image {
				height: 160rpx;
				width: 160rpx;
			}

			&:last-of-type {
				border-bottom: none;
			}

			.item-name {
				flex-shrink: 0;
				width: 220rpx;
				color: #333333;
			}

			.item-val {
				display: inline-block;
				flex-grow: 1;
				text-align: left;
				line-height: 100rpx;
				height: 100rpx;
			}

			.nosz {
				color: #999;
			}
		}
	}

	.sub {
		text-align: center;
		width: 560rpx;
		line-height: 80rpx;
		background: #fc4141;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: 500;
		margin: 80rpx auto 0;
	}

	.up-img {
		justify-content: flex-start;
		align-items: flex-start;
		padding: 28rpx 20rpx;
		font-size: 30rpx;

		.item-name {
			flex-shrink: 0;
			width: 220rpx;
			color: #333333;
		}

		image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	.hui {
		background-color: #999;
	}
</style>