tlfb/pages/category/fillTable.vue

<template>
	<view class="wrapper">
		<view class="tab-wrapper">
			<view class="tab-item">
				<view class="itemx">
					<view class="item-tit">店铺名称：</view>
					<input type="text" v-model="merchant_name" placeholder="请输入店铺名称" />
				</view>
				<view class="up-wrapper">
					店铺logo
					<view class="imgs">
						<view class="imgs-item">
							<image :src="sfzz" mode="" v-if="yyzz" @click.stop="upImg('yyzz')"></image>
							<image src="../../static/img/add.png" mode="" v-if="!yyzz" @click.stop="upImg('yyzz')"></image>
						</view>
					</view>
				</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="time" placeholder="请输入营业时间" disabled />
				</view>
				<view class="itemx">
					<view class="item-tit">店铺地址：</view>
					<input type="text" v-model="area" placeholder="请输入店铺地址" />
				</view>
			</view>
			
			<view class="btn-tc"></view>
			<view class="sub-btn" @click="sub">提交申请</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { register, verify } from '@/api/login.js';
import { upload, enter } from '@/api/user.js';
export default {
	data() {
		return {
			phone: '',
			time:'',//输入营业时间
			yyzz: '', //店铺logo
			merchant_name: '', //店铺名称
			area: '' //店长区域
		};
	},
	onLoad() {
		let obj = this;
		obj.speed_id = uni.getStorageSync('spread') || '';
		if (obj.speed_id == '') {
			obj.speed_id = obj.userInfo.spread_uid || '';
		}
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	watch: {
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	methods: {
		upImg(item) {
			let obj = this;
			upload({
				filename: ''
			})
				.then(res => {
					console.log(res[0].url);

					obj[item] = res[0].url;
				})
				.catch(err => {
					console.log(err);
				});
		},
		//提交
		sub() {
			let obj = this;
			if (obj.phone == '') {
				obj.$api.msg('请输入联系方式');
				return;
			}
			if (this.phone.length < 11) {
				this.$api.msg('请输入正确的手机号');
				return;
			}
			if (obj.yyzz == '') {
				obj.$api.msg('请上传店铺logo');
				return;
			}
			if (obj.area == '') {
				obj.$api.msg('请输入店铺地址');
				return;
			}
			let card_id = obj.sfzz + ',' + obj.sfzf;
			uni.showLoading({
				title: '提交中...',
				mask: true
			});
			enter({
				type: 1,
				merchant_name: obj.area,
				link_user: obj.name,
				link_tel: obj.phone,
				spread_uid: obj.speed_id,
				charter: obj.yyzz,
				card_id: card_id
			})
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack({});
					}, 2000);

					console.log(res);
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100%;
}
.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;
		.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: 310rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			flex-shrink: 0;
		}
		input {
			width: 440rpx;
			padding-right: 20rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
}
.sub-btn {
	// position: fixed;
	// bottom: 0;
	margin: 60rpx auto;
	width: 600rpx;
	height: 98rpx;
	border-radius: 49rpx;
	background: linear-gradient(180deg, #fd4646, #ff3535);
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 98rpx;
	text-align: center;
}
.btn-tc {
	height: 98rpx;
}
.up-wrapper {
	margin: auto;
	padding: 38rpx 21rpx;
	width: 690rpx;
	// height: 250rpx;
	background: #ffffff;
	border-radius: 10rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	.imgs {
		padding: 27rpx 70rpx;
		display: flex;
		justify-content: space-around;
		.imgs-item {
			height: 160rpx;
			width: 160rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>