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="请输入店铺名称" :disabled="type == 'look'"/>
		</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="type != 'look'?upImg():''"></image>
				<image src="../../static/img/add.png" mode="" v-else @click.stop="type != 'look'?upImg():''"></image>
			</view>
		</view>
		<view class="item">
			<view class="item-tit">联系电话</view>
			<input type="number" v-model="store.phone" placeholder="请输入商家电话" v-if="type != 'look'"/>
			<input type="number" v-model="store.phone" placeholder="请输入商家电话" :disabled="type == 'look'" v-else @click="call(store.phone)"/>
		</view>
		<view class="item">
			<view class="item-tit">营业时间</view>
			<template v-if="type != 'look'">
				<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>
			</template>
			<input type="text" v-model="store.day_time" placeholder="" :disabled="type == 'look'" v-if="type == 'look'"/>
		</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="请输入详细地址" :disabled="type == 'look'"/>
		</view>
		<view class="item" v-if="type != 'look'">
			<view class="item-tit">申请等级</view>
			<input type="text" v-model="chooselevel" placeholder="请选择申请等级" disabled v-if="type=='edit'"/>
			<template v-if="type == 'add'">
				<picker mode="selector" :range="levelList" @change="bindLevelChange" class="picker">
					<input type="text" v-model="chooselevel" placeholder="请选择申请等级" disabled />
				</picker>
			</template>
			
		</view>
		<view class="sub" @click="sub" v-if="type == 'edit'">确认修改</view>
		<view class="sub" @click="add" v-if="type == 'add'">提交</view>
		<view class="sub" @click="goto" v-if="type == 'look'">
			一键导航
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	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: ''
				},
				chooselevel: '',
				levelList: ['美容院', '美容院B'],
				bgtime: '请选择时间',
				edtime: '请选择时间',
				detailed_address: '',
				type: 'edit'
			};
		},
		computed: {
			...mapState('user',['showStore'])
		},
		onLoad(opt) {
			if (opt.type == 'edit') {
				this.loadData();
			}
			if(opt.type == 'look') {
				this.type = 'look'
				uni.setNavigationBarTitle({
					title: '美容院详情'
				})
				this.store = uni.getStorageSync('showStore')
				let arr = this.store.day_time.split('- ')
				console.log(arr,'arr')
				this.bgtime = arr[0]
				this.edtime = arr[1]
			}
			if (opt.type == 'add') {
				this.type = 'add';
				this.bgtime = '00:00';
				this.edtime = '00:00';
			}
		},
		methods: {
			goto() {
				let latitude = this.store.latitude
				let longitude = this.store.longitude
				let address = this.store.name
				window.location.href =
					`http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			bindLevelChange(e) {
				console.log(e)
				this.chooselevel = this.levelList[e.detail.value];
			},
			loadData() {
				myStore().then(({
					data
				}) => {
					this.store = data[0];
					this.chooselevel = this.store.level == 3? '美容院': '美容院B'
					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;
				}
				if (obj.chooselevel == '') {
					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,
						level: obj.chooselevel == '美容院' ? 3 : 4
					})
					.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>