mnsx/pages/set/pointManage.vue

<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">自提点名称</text>
			<input class="input" type="text" v-model="name" placeholder="请请填写自提点名称" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">联系电话</text>
			<input class="input" type="number" v-model="phone" placeholder="请填写联系电话" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">自提点地址</text>
			<pickerAddress class="input" @change="onCityClick">{{ address || '请选择自提地址' }}</pickerAddress>
			<text class="iconfont iconlocation"></text>
		</view>
		<view class="row b-b">
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="detailed_address" placeholder="请填写详细地址" placeholder-class="placeholder" />
		</view>
		<view class="row b-b" @click="chooseLocation">
			<text class="tit">经纬度</text>
			<input class="input" type="text" v-model="latlng" placeholder="请输入经纬度" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">营业开始时间</text>
			<picker mode="time" :value="time"  @change="bindBgTimeChange"  class="input">
				<view class="uni-input">{{ bgTime }}</view>
			</picker>
		</view>
		<view class="row b-b">
			<text class="tit">营业结束时间</text>
			<picker mode="time" :value="time" @change="bindEdTimeChange"  class="input">
				<view class="uni-input">{{ edTime }}</view>
			</picker>
		</view>
		<uni-list class="margin-t-20">
			<uni-list-item title="是否显示" :switch-checked="show" :show-switch="true" :show-arrow="false" switch-color="#921a23" @switchChange="switchChange"></uni-list-item>
		</uni-list>
		<view class="del-btn" v-if="showDel"><text @click="delAddr">删除地址</text></view>
		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
import { addressEdit, editPoint } from '@/api/user.js';
export default {
	components: {
		uniList,
		uniListItem,
		pickerAddress,
		uniPopup
	},
	data() {
		return {
			name: '', //自提点名称
			phone: '', //自提点电话
			show: true, //是否显示
			addressDetail: '',
			showDel: false,
			latlng: '',
			detailed_address: '', //用户自填详细字段
			address: '', //【省、市、区】
			point_id: 0, //自提点id
			bgTime: '00:00', //自提点开始营业时间
			edTime: '00:00', //自提点结束营业时间
			time: '00:00',
			timeOptions: [
				['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
				['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']
			]
		};
	},
	onLoad(option) {
		let title = '新增自提点';
		if (option.type === 'edit') {
			title = '编辑自提点';
			let data = JSON.parse(option.data);
			console.log(data);

			this.name = data.name;
			this.show = data.is_show == 1 ? true : false;
			this.latlng = data.latitude + ',' + data.longitude;
			this.detailed_address = data.detailed_address;
			this.address = data.address;
			this.phone = data.phone;
			this.point_id = data.id;
			let time = data.day_time
			let arr = time.split(' - ')
			this.bgTime = arr[0].slice(0,5)
			this.edTime = arr[1].slice(0,5)
			console.log(arr,'arr++++++++++++++++++++++++')
		}
		this.manageType = option.type;
		uni.setNavigationBarTitle({
			title
		});
	},
	methods: {
		// 选中城市切换
		onCityClick({ data }) {
			// let address = this.detailed_address;
			let province = data[0];
			let city = data[1];
			let district = data[2];
			this.address = province + ',' + city + ',' + district;
		},
		//地图选择地址
		chooseLocation() {
			uni.chooseLocation({
				success: res => {
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					this.latlng = res.latitude + ',' + res.longitude;
				}
			});
		},
		// 设置是否为显示
		switchChange(e) {
			this.show = e.value;
		},
		//提交
		confirm() {
			let obj = this;
			if (!obj.name) {
				this.$api.msg('请填写自提点名称');
				return;
			}
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(obj.phone)) {
				this.$api.msg('请输入正确的手机号码');
				return;
			}
			if (!obj.address) {
				this.$api.msg('请选择地址');
				return;
			}
			if (!obj.latlng) {
				this.$api.msg('请输入经纬度');
				return;
			}
			let bgH = obj.bgTime.slice(0,2)*1
			let edH = obj.edTime.slice(0,2)*1
			// if(bgH > edH) {
			// 	this.$api.msg('请输入正确的经营时间')
			// 	return
			// }else if( bgH == edH) {
			// 	let bgM = obj.bgTime.slice(3,5)*1
			// 	let edM = obj.edTime.slice(3,5)*1
			// 	if(bgM > edM) {
			// 		this.$api.msg('请输入正确的经营时间')
			// 		return
			// 	}
			// }
			uni.showLoading({
				title: '提交中...',
				mask: true
			})
			//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
			editPoint(
				{
					name: obj.name,
					phone: obj.phone,
					address: obj.address.split(','),
					detailed_address: obj.detailed_address,
					latlng: obj.latlng,
					is_show: obj.show ? 1 : 0,
					day_time: [obj.bgTime+':00',obj.edTime+':00']
				},
				obj.point_id
			).then(function(e) {
				uni.hideLoading()
				obj.$api.prePage().refreshList();
				uni.showToast({
					title: '提交成功',
					duration: 2000
				});
				setTimeout(function() {
					uni.navigateBack();
				}, 800);
			})
		},
		bindBgTimeChange(e) {
			console.log(e,'shijian')
			this.bgTime = e.detail.value
		},
		bindEdTimeChange(e) {
			this.edTime = e.detail.value
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16rpx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 300rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16rpx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16rpx) scale(0.9);
	}
}
.del-btn {
	width: 750rpx;
	height: 99rpx;
	margin-top: 28rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #901b21;
	background-color: #fff;
	line-height: 99rpx;
	padding-left: 42rpx;
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 60rpx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}

.alert-box {
	background-color: #ffffff;
}
</style>