mlh/pages/user/shop.vue

<template>
	<view class="content">
		<view class="box">
			<view class="item">
				<view class="item-tit">店铺名称:</view>
				<input type="text" v-model="storeName" placeholder="请输入店铺名称" />
			</view>
			<view class="item">
				<view class="item-tit">店铺简介:</view>
				<input type="text" v-model="storeinfo" placeholder="请输入店铺简介" />
			</view>
		</view>
		<view class="box">
			<view class="item">
				<view class="item-tit">姓名:</view>
				<input type="text" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="item">
				<view class="item-tit">手机号:</view>
				<input type="text" v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="item">
				<view class="item-tit">地址:</view>
				<pickerAddress class="input" @change="onCityClick">{{ addressDetail || '请选择地址' }}</pickerAddress>
				<!-- <text class="iconfont iconlocation"></text> -->
			</view>
			<view class="item">
				<view class="item-tit">详细地址:</view>
				<input type="text" v-model="detailed_address" placeholder="请输入详细地址" />
			</view>
		</view>

		<view class="sub" @click="sub" v-if="type == 'edit'">确认修改</view>
		<view class="sub" @click="add" v-if="type == 'add'">提交</view>
	</view>
</template>

<script>
import { editStore } from '@/api/user.js';
import { upload } from '@/api/order.js';
import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
export default {
	components: {
		pickerAddress
	},
	data() {
		return {
			type: 'add',
			storeName: '',
			storeinfo: '',
			name: '',
			phone: '',
			addressDetail: '',
			detailed_address: '',
			address: {
				province: '',
				city: '',
				district: ''
			}
		};
	},
	onLoad(opt) {},
	methods: {
		onCityClick({ data }) {
			let address = this.address;
			address.province = data[0];
			address.city = data[1];
			address.district = data[2];
			this.addressDetail = data.join('');
		},
		//提交
		sub() {
			let obj = this;
			if (obj.storeName == '') {
				obj.$api.msg('请输入店铺姓名');
				return;
			}
			if (obj.storeinfo == '') {
				obj.$api.msg('请输入店铺简介');
				return;
			}
			if (obj.name == '') {
				obj.$api.msg('请输入姓名');
				return;
			}
			if (obj.phone == '') {
				obj.$api.msg('请输入手机号');
				return;
			}
			if (obj.addressDetail == '') {
				obj.$api.msg('请选择地址');
				return;
			}
			if (obj.detailed_address == '') {
				obj.$api.msg('请输入详细地址');
				return;
			}
			uni.showLoading({
				title: '提交中...',
				mask: true
			});
			editStore({
				shop_name: obj.storeName,
				shop_introduce: obj.storeinfo,
				name: obj.name,
				phone: obj.phone,
				province: obj.address.province,
				city: obj.address.city,
				district: obj.address.district,
				detail: obj.detailed_address,
				type: 2
			})
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
				});
		},
		add() {
			let obj = this;
			if (obj.storeName == '') {
				obj.$api.msg('请输入店铺姓名');
				return;
			}
			if (obj.storeinfo == '') {
				obj.$api.msg('请输入店铺简介');
				return;
			}
			if (obj.name == '') {
				obj.$api.msg('请输入姓名');
				return;
			}
			if (obj.phone == '') {
				obj.$api.msg('请输入手机号');
				return;
			}
			if (obj.addressDetail == '') {
				obj.$api.msg('请选择地址');
				return;
			}
			if (obj.detailed_address == '') {
				obj.$api.msg('请输入详细地址');
				return;
			}
			uni.showLoading({
				title: '提交中...',
				mask: true
			});
			editStore({
				shop_name: obj.storeName,
				shop_introduce: obj.storeinfo,
				name: obj.name,
				phone: obj.phone,
				province: obj.address.province,
				city: obj.address.city,
				district: obj.address.district,
				detail: obj.detailed_address,
				type: 2
			})
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background-color: #f8f6f6;
}

.box {
	margin-top: 20rpx;
}
.item {
	background-color: #fff !important;
	min-height: 100rpx;
	display: flex;
	width: 690rpx;
	margin: 0 auto;

	.line {
		display: inline-block;
		line-height: 100rpx;
	}

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

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

	.input {
		width: 550rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.up-wrapper {
		height: 352rpx;
		width: 550rpx;
		position: relative;

		image {
			position: absolute;
			height: 160rpx;
			width: 160rpx;
			top: 0;
			bottom: 0;
			left: 94rpx;
			margin: auto;
		}
	}
}

.sub {
	width: 100%;
	height: 88rpx;
	background: #ff4c4c;
	line-height: 88rpx;
	text-align: center;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.picker {
	display: inline-block;
	padding-right: 40rpx;
	height: 100rpx;
	line-height: 100rpx;
}

.prcker-t {
	padding-left: 40rpx;
}
</style>