front/pages/sales/setting.vue

<template>
	<view class="content bg-drak ft-main">
	  <use-tabbar :tabbar="false"></use-tabbar>
	  <view class="gap"></view>
	
	  <view class="row dflex padding-lr">
	    <text class="tit">店铺名称</text>
	    <input class="input" placeholder="请输入店铺名称" maxlength="140" v-model="fetch.name"/>
	  </view>
	  
	  <view class="row dflex padding-lr">
	    <text class="tit">联系人</text>
	    <input class="input" placeholder="请输入联系人姓名" maxlength="340" v-model="fetch.truename"/>
	  </view>
	  
	  <view class="row dflex padding-lr">
	    <text class="tit">宣传语</text>
	    <input class="input" placeholder="请输入宣传语" maxlength="340" v-model="fetch.info"/>
	  </view>
	
	  <view class="row dflex padding-left" v-if="fetch.area">
	    <text class="tit">所在地区</text>
	    <view class="dflex-b flex1">
	      <view class="flex1 input_t" @click="openAddress">{{ fetch.area_string }}</view>
	      <sx-address-picker v-model="address" :selected="fetch.area" @confirm="addressConfirm"/>
	    </view>
	  </view>
	
	  <view class="use-area margin-lr-sm" v-if="fetch.area">
	    <view class="tit">详细地址</view>
	    <textarea class="bg-drak w-full border-radius-sm margin-top-sm padding" placeholder="请输入详细地址" maxlength="120" style="min-height: 70px; height: auto;" v-model="fetch.address"/>
	  </view>
	
	  <view class="padding w-full margin-top-big" @click="save">
	    <view class="dflex-b border-radius-big">
	      <view class="tac padding-tb-sm flex1 bg-base">提交</view>
	    </view>
	  </view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				address:false,
				
				fetch: {
					id:-1,
					province_id:0,
					city_id:0,
					county_id:0,
					town_id:0,
					address:'',
					name:'',
					truename: '',
					info:'',
					sales_type:0,
					sales_id:0,
					area:['CN', '11', '1101', '110107', '110107005'],
					area_string: '请选择地址',
				}
			};
		},
		onLoad(options) {
			this.fetch.sales_type = options.type;
			this.fetch.sales_id = options.id;
			if (!this.fetch.sales_type || !this.fetch.sales_id) {
				return Dever.goUser()
			}
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, 'sales.getInfo', {sales_type:this.fetch.sales_type, sales_id: this.fetch.sales_id});
			},
			save() {
				if (!this.fetch.name) {
					return this.Dever.alert('请输入店铺名称');
				}
				if (!this.fetch.info) {
					return this.Dever.alert('请输入宣传语');
				}
				if (!this.fetch.truename) {
					return this.Dever.alert('请输入联系人姓名');
				}

				if (!this.fetch.province_id) {
					return this.Dever.alert('请选择省份');
				}
				if (!this.fetch.city_id) {
					return this.Dever.alert('请选择城市');
				}
				if (!this.fetch.county_id) {
					return this.Dever.alert('请选择区县');
				}
				if (!this.fetch.town_id) {
					return this.Dever.alert('请选择街道');
				}
				if (!this.fetch.address) {
					return this.Dever.alert('请输入详细地址');
				}
				this.DeverApi.post('sales.update', this.fetch, res => {
					this.Dever.success('提交成功', () => {
						uni.navigateBack()
					});
				});
			},
			openAddress() {
				this.address = true
			},
			// 选择地址
			addressConfirm(res) {
				var name = [];
				res.forEach((item, index) => {
					if (index > 0) {
						if (name != '市辖区') {
							name.push(item.name)
						}
						if (index == 1) {
							this.fetch.province_id = item.code;
						} else if (index == 2) {
							this.fetch.city_id = item.code;
						} else if (index == 3) {
							this.fetch.county_id = item.code;
						} else if (index == 4) {
							this.fetch.town_id = item.code;
						}
					}
				});
				this.fetch.area_string = name.join('-')
			},
		}
	};
</script>

<style lang="scss">
	.row {
		background: #fff;
		position: relative;
		height: 104rpx;
		margin: 18rpx;
		border-radius: 18rpx;
	
		.input {
			flex: 1;
			font-size: 28rpx;
			padding-left: 0;
		}
	
		.tit {
			flex-shrink: 0;
			width: 144rpx;
		}
	}
	
	.use-area {
		border-radius: 18rpx;
		background: #fff;
		padding: 28rpx;
		margin-top: 18rpx;
	}


</style>