tlfb/pages/category/fillTable.vue

<template>
	<view class="content">
		<view class="item">
			<view class="item-tit">店铺名称</view>
			<input type="text" v-model="store.name" placeholder="请输入店铺名称" />
		</view>
		<view class="item">
			<view class="item-tit">店铺logo</view>
			<view class="up-wrapper">
				<image :src="store.image" mode="" v-if="store.image" @click.stop="upImg"></image>
				<image src="../../static/img/add.png" mode="" v-else @click.stop="upImg"></image>
			</view>
		</view>
		<view class="item">
			<view class="item-tit">联系电话</view>
			<input type="number" v-model="store.phone" placeholder="请输入商家电话" />
		</view>
		<view class="item">
			<view class="item-tit">营业时间</view>
			<picker mode="time" :value="bgtime" @change="bindBgtimeChange" class="picker">
				<view class="uni-input">{{ bgtime }}</view>
			</picker>
			<view class="line">至</view>
			<picker mode="time" :value="edtime" @change="bindEdtimeChange" class="picker prcker-t">
				<view class="uni-input">{{ edtime }}</view>
			</picker>
		</view>
		<view class="item" @click="getLocation" v-if="type == 'add'">
			<view class="item-tit">经纬度</view>
			<input type="text" v-model="store.latlng" placeholder="请选择经纬度" />
		</view>
		<view class="item">
			<view class="item-tit">详细地址</view>
			<input type="text" v-model="store.detailed_address" placeholder="请输入详细地址" />
		</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 { myStore, editStore } from '@/api/user.js';
import { upload } from '@/api/order.js';
export default {
	data() {
		return {
			store: {
				name: '',
				phone: '',
				id: '',
				image: '',
				id: '',
				detailed_address: '',
				day_time: '',
				latlng: ''
			},
			bgtime: '请选择时间',
			edtime: '请选择时间',
			detailed_address: '',
			type: 'edit'
		};
	},
	onLoad(opt) {
		if (opt.type == 'edit') {
			this.loadData();
		}
		if (opt.type == 'add') {
			this.type = 'add';
			this.bgtime = '00:00';
			this.edtime = '00:00';
		}
	},
	methods: {
		loadData() {
			myStore().then(({ data }) => {
				this.store = data[0];
				let time = this.store.day_time.split(' - ');
				this.bgtime = time[0].substring(0, 5);
				this.edtime = time[1].substring(0, 5);
			});
			
		},
		// 选择当前位置
		getLocation() {
			console.log('选择当前位置');
			let obj = this;
			uni.chooseLocation({
				success: function(res) {
					// obj.addressData.area = res.name;
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					// obj.addressData.latitude = res.latitude;
					// obj.addressData.longitude = res.longitude;
					obj.$set(obj.store, 'latlng', res.latitude + ',' + res.longitude);
					// obj.store.latlng = res.latitude + ',' + res.longitude
				}
			});
		},
		bindBgtimeChange(e) {
			console.log(e);
			this.bgtime = e.detail.value;
		},
		bindEdtimeChange(e) {
			console.log(e);
			this.edtime = e.detail.value;
		},
		indicatorStyle() {},
		// 修改logo
		upImg() {
			let obj = this;
			upload({
				filename: ''
			}).then(res => {
				console.log(res[0].url);
				obj.store.image = res[0].url;
			});
		},
		//提交
		sub() {
			let obj = this;
			let store = obj.store;
			if (store.name == '') {
				obj.$api.msg('请输入店铺名称');
				return;
			}
			if (store.phone == '') {
				obj.$api.msg('请输入店铺电话');
				return;
			}
			if (store.image == '') {
				obj.$api.msg('请选择店铺logo');
				return;
			}
			if (store.day_time == '') {
				obj.$api.msg('请输入营业时间');
				return;
			}
			if (store.detailed_address == '') {
				obj.$api.msg('请输入店铺地址');
				return;
			}
			uni.showLoading({
				title: '提交中...',
				mask: true
			});
			let day_time = obj.bgtime + ':00 - ' + obj.edtime + ':00';
			editStore({
				id: store.id,
				name: store.name,
				detailed_address: store.detailed_address,
				image: store.image,
				phone: store.phone,
				day_time: day_time,
				latlng: store.latitude + ',' + store.longitude
			})
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					obj.$api.prePage().refreshList();
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
				});
		},
		add() {
			let obj = this;
			let store = obj.store;
			if (store.name == '') {
				obj.$api.msg('请输入店铺名称');
				return;
			}
			if (store.phone == '') {
				obj.$api.msg('请输入店铺电话');
				return;
			}
			if (store.image == '') {
				obj.$api.msg('请选择店铺头像');
				return;
			}
			// if (store.day_time == '') {
			// 	obj.$api.msg('请输入营业时间');
			// 	return;
			// }
			if (store.introduction == '') {
				obj.$api.msg('请输入店铺简介');
				return;
			}
			if (store.detailed_address == '') {
				obj.$api.msg('请输入店铺地址');
				return;
			}
			let day_time = obj.bgtime + ':00 - ' + obj.edtime + ':00';
			editStore({
				id: 0,
				name: store.name,
				introduction: store.introduction,
				image: store.image,
				phone: store.phone,
				day_time: day_time,
				latlng: store.latlng,
				detailed_address: store.detailed_address,
				is_show: 0
			})
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					obj.$api.prePage().refreshList();
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background-color: #f8f6f6;
}
.item {
	background-color: #fff !important;
	min-height: 100rpx;
	display: flex;
	width: 750px;
	border: 1px #f4f4f4 solid;
	.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;
	}
	textarea {
		width: 550rpx;
		height: 257rpx;
		padding-top: 25rpx;
		padding-right: 30rpx;
		line-height: 50rpx;
		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: 674rpx;
	height: 88rpx;
	background: #ff4c4c;
	border-radius: 44rpx;
	line-height: 88rpx;
	text-align: center;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	position: absolute;
	bottom: 35rpx;
	left: 0;
	right: 0;
	margin: auto;
}
.picker {
	display: inline-block;
	padding-right: 40rpx;
	height: 100rpx;
	line-height: 100rpx;
}
.prcker-t {
	padding-left: 40rpx;
}
</style>