xc/pages/user/gzsq.vue

<template>
	<view class="content">
		<view class="tab-wrapper">
			<view class="itemx">
				<view class="item-tit">公司名称：</view>
				<input type="text" v-model="companyname" placeholder="请输入公司名称" />
			</view>
			<view class="itemx">
				<view class="item-tit">负责人姓名：</view>
				<input type="text" v-model="name" placeholder="请输入负责人姓名" />
			</view>
			<view class="itemx">
				<view class="item-tit">联系方式：</view>
				<input type="text" v-model="phone" placeholder="请输入联系方式" />
			</view>
			<view class="itemx">
				<view class="item-tit">身份证号：</view>
				<input type="text" v-model="cardid" placeholder="请输入身份证号" />
			</view>
		</view>
		<view class="scsfz-wrap">
			<image v-if="imagezm == ''" src="../../static/img/sfzzm.png" mode="" @click="uploads('imagezm')"></image>
			<image v-if="imagezm != ''" :src="imagezm" mode="" @click="uploads('imagezm')"></image>
			<view class="" style="padding-bottom: 33rpx;">
				添加身份证正面
			</view>
			<image v-if="imagefm == ''" src="../../static/img/sfzzm.png" mode="" @click="uploads('imagefm')"></image>
			<image v-if="imagefm != ''" :src="imagefm" mode="" @click="uploads('imagefm')"></image>
			<view class="">
				添加身份证反面
			</view>
		</view>
		<view class="tab-wrapper" style="padding-top: 0;">
			<view class="itemx">
				<view class="item-tit">店铺地址：</view>
				<input type="text" v-model="address" placeholder="请输入店铺地址" />
			</view>
			<view class="itemx"  style="height: 250rpx;">
				<view class="item-tit">营业执照：</view>
				<image v-if="yyzz == ''" src="../../static/img/add.png" mode="" @click="uploads('yyzz')"></image>
				<image v-if="yyzz != ''" :src="yyzz" mode="" @click="uploads('yyzz')"></image>
			</view>
		</view>
		<view class="tab-wrapper" style="padding-top: 0;">
			<view class="itemx"  style="height: 250rpx;">
				<view class="item-tit">门店照片：</view>
				<image v-if="imageshop == ''" src="../../static/img/add.png" mode=""  @click="uploads('imageshop')"></image>
				<image v-if="imageshop != ''" :src="imageshop" mode=""  @click="uploads('imageshop')"></image>
			</view>
		</view>
		<view class="sq-xz" @click="dagou = !dagou">
			<text class="sq-gou"  v-if="!dagou"></text>
			<image src="../../static/icon/gou.png" mode="" class="sq-gou-g" v-else></image>
			<text>我已阅读并同意</text><text style="color: #DC262B;">《馆长申请须知》</text>
		</view>
		<view class="sq-btn" @click="subSq()">
			提交申请
		</view>
		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
		<uni-popup ref="popup" type="center">
			<view class="alertprogress">
			{{progress}}%
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { upload } from '@/api/order.js';
	import { apply } from '@/api/user.js'
	export default {
		data() {
			return {
				dagou: true,
				companyname:'',//公司名称
				name:'',//负责人姓名
				phone:'',//联系方式
				cardid:'',//身份证号码
				imagezm:'',//身份证正面
				imagefm:'',//身份证反面
				address:'',//店铺地址
				yyzz:'',//营业执照
				imageshop:'',//门店照片
				upFileLoding:false,
				canvasStatus: false,
				canvasWidth:0,
				canvasHeight:0,
				progress:0,
			}
		},
		methods: {
			subSq() {
				let obj = this
				if(obj.companyname == ''){
					return this.$api.msg("请填写公司名称")
				}
				if(obj.name == ''){
					return this.$api.msg("请填写负责人姓名")
				}
				if(obj.phone == ''){
					return this.$api.msg("请填写联系方式")
				}
				if(obj.cardid == ''){
					return this.$api.msg("请填写身份证号码")
				}
				if(obj.imagezm == ''){
					return this.$api.msg("请填写身份证正面")
				}
				if(obj.imagefm == ''){
					return this.$api.msg("请填写身份证反面")
				}
				if(obj.address == ''){
					return this.$api.msg("请填写店铺地址")
				}
				if(obj.yyzz == ''){
					return this.$api.msg("请填写营业执照")
				}
				if(obj.imageshop == ''){
					return this.$api.msg("请填写门店照片")
				}
				// if(!obj.dagou) {
				// 	return this.$api.msg('')
				// }
				apply().then(({data}) =>{
					this.$api.msg('申请成功')
				})
			},
			uploads(type) {
				const that = this;
				if (that.upFileLoding) {
					return
				}
				that.upFileLoding = true;
				setTimeout(()=>{
					that.upFileLoding = false;
				},1000);
				that.canvasStatus = true;
				upload({
					filename: ''
				}, (res) => {
					that[type] = res[0].url;
					that.canvasStatus = false
				}, (res) => {
					that.canvasStatus = false
				}, (res) => {
					that.canvasWidth = res.w
					that.canvasHeight = res.h
				},(res)=>{
					// console.log(res,'res');
					if(res.progress==100){
						this.$refs.popup.close()
						uni.showToast({
							title: '上传成功'
						});
					}else if(res.progress==0){
						this.$refs.popup.open()
					}
					that.progress = res.progress;
					// console.log(res,'进度条');
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab-wrapper {
		padding: 20rpx 30rpx;
		// background-color: #f2f3f5;

	}

	.itemx {
		margin: 0 auto;
		width: 100%;
		background-color: #fff !important;
		height: 100rpx;
		display: flex;
		// width: 690px;
		border: 1px #f4f4f4 solid;
		image {
			margin-top: 63rpx;
			margin-left: 55rpx;
			width: 160rpx;
			height: 160rpx;
		}
		.code {
			width: 150rpx;
			flex-shrink: 0;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF4C4C;
			line-height: 100rpx;
		}

		.item-tit {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			width: 220rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			flex-shrink: 0;
		}

		input {
			width: 530rpx;
			padding-right: 20rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

	.scsfz-wrap {
		width: 690rpx;
		height: 673rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		margin: 0 auto 20rpx;
		font-size: 29rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #B2B2B2;
		text-align: center;
		padding-top: 33rpx;
		image {
			display: block;
			width: 354rpx;
			height: 240rpx;
			margin: auto;
		}
	}
	.sq-btn {
		width: 750rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #DC262B;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.sq-xz {
		height: 32rpx;
		line-height: 32rpx;
		display: flex;
		margin: 21rpx 0 75rpx 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0C1732;
		.sq-gou {
			display: inline-block;
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			border: 1px solid #999;
			margin-right: 15rpx;
		}
		.sq-gou-g {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
	}
</style>