yunshengtai-uniapp/pages/user/openStore/index.vue

<template>
	<view class="openshop-box">
		<view class="status info" v-if="status == 0">等待审核</view>
		<view class="status message" v-if="status == -1">
			<text>审核不通过</text>
			<text class="reason">{{message}}</text>
		</view>
		<view class="form-box">
			<view class="form-item">
				<view class="label">店铺名称:<text class="colR">*</text></view>
				<input type="text" v-model="name" placeholder="请输入店铺名称" />
			</view>
			<view class="form-item">
				<view class="label">联系电话:<text class="colR">*</text></view>
				<input type="text" v-model="phone" maxlength="11" placeholder="请输入联系电话" />
			</view>
			<view class="form-item">
				<view class="label">选择地区:<text class="colR">*</text></view>
				<picker mode="region" :value="address" @change="regionChange">
					<view>{{address[0]}} - {{address[1]}} - {{address[2]}}</view>
				</picker>
				<image src="../../../static/images/arrow-d-g.png" class="arrow"></image>
			</view>
			<view class="form-item">
				<view class="label">详细地址:<text class="colR">*</text></view>
				<input type="text" v-model="detailedAddress"  placeholder="请输入详细地址"/>
			</view>
			<!-- <view class="form-item">
				<view class="label">店铺类型:</view>
				<picker mode="selector">
					<view>{{region[0]}}</view>
				</picker>
				<image src="../../../static/images/arrow-d-g.png" class="arrow"></image>
			</view> -->
			<view class="form-item">
				<view class="label">店铺logo:<text class="colR">*</text></view>
				<view class="img-box">
					<image src="../../../static/images/addimg.png" v-if="image == ''" @click="uploadImg"></image>
					<image :src="image" @click="uploadImg" v-else mode="aspectFill"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">店铺简介:</view>
				<textarea v-model="introduction" placeholder="请输入店铺简介" />
			</view>
		</view>
		
		<view class="add-btn" @click="addShop">提交</view>
	</view>
</template>

<script>
	import { chooseImage } from "@/utils"
	import { addStore } from "@/api/store.js"
	export default{
		data(){
			return {
				name: '',
				phone: '',
				detailedAddress: '',
				introduction: '',
				address: ['湖北省','武汉市','洪山区'],
				image: '',
				id: '',
				status: null,
				message: ''
			}
		},
		onLoad(){
			let store = uni.getStorageSync('userInfo').store
			// console.log(store)
			if(store){
				this.name = store.name
				this.phone = store.phone
				this.address = store.address.split(',')
				this.detailedAddress = store.detailedAddress
				this.introduction = store.introduction
				this.image = store.image
				this.id = store.id
				this.status = store.status
				this.message = store.refuseMessage
			}
		},
		methods:{
			regionChange(e){
				this.address = e.detail.value
			},
			uploadImg(){
				chooseImage((img)=>{
					this.image = img
				})
			},
			addShop(){
				if(this.name == ''){
					return this.alertMessage('请输入店铺名称')
				} else if(this.phone == ''){
					return this.alertMessage('请输入联系方式')
				} else if(this.detailedAddress == ''){
					return this.alertMessage('请填写详细地址')
				} else if(this.image == ''){
					return this.alertMessage('请上传店铺logo')
				} else{
					let data = {
						name: this.name,
						phone: this.phone,
						address: this.address.join(','),
						detailedAddress: this.detailedAddress,
						image: this.image,
						introduction: this.introduction
					}
					if(this.id) data.id = this.id
					addStore(data).then((res)=>{
						if(res.success){
							uni.showToast({
								title: '操作成功！',
								duration: 1500
							})
							setTimeout((res)=>{
								// this.$yrouter.push('/pages/user/myShop/index')
								uni.redirectTo({
								   url: '/pages/user/myShop/index'
								});
							},1500)
						} else{
							uni.showToast({
								title: res.msg,
								icon: none
							})
						}
					})
				}
			},
			alertMessage(msg){
				uni.showToast({
					title: msg,
					icon: "none"
				})
			},
		}
	}
</script>

<style lang="less">
	.openshop-box{
		width: 100%;
		min-height: 100vh;
		background: #eee;
		.form-box{
			padding: 20rpx 40rpx;
			.form-item{
				width: 100%;
				padding: 30rpx 28rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				color: #1D1D1D;
				font-size: 26rpx;
				position: relative;
				.label{
					width: 160rpx;
				}
				.img-box{
					width: 108rpx;
					height: 108rpx;
					border-radius: 8rpx;
					position: relative;
				}
				image{
					width: 108rpx;
					height: 108rpx;
					border-radius: 8rpx;
				}
				textarea{
					width: 100%;
					height: 126rpx;
				}
				&:nth-last-child(1){
					align-items: flex-start;
				}
				.arrow{
					width: 24rpx;
					height: 14rpx;
					position: absolute;
					right: 36rpx;
					top: 42rpx;
				}
				picker{
					width: 70%;
				}
				.colR{
					color: #FF0303;
				}
			}
		}
		.add-btn{
			width: 670rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			background: #000;
			border-radius: 40rpx;
			margin: 110rpx auto 30rpx;
		}
		.status{
			text-align: center;
			font-size: 38rpx;
			font-weight: bold;
			padding-top: 32rpx;
		}
		.info{
			color: #67c23a;
		}
		.succsess{
			color: #409eff;
		}
		.message{
			color:#ff4949;
			display: flex;
			flex-direction: column;
			align-items: center;
			.reason{
				font-size: 26rpx;
				font-weight: normal;
			}
		}
	}
</style>