web-africa-h5/pages/user/gift/edit.vue

<template>
	<form @submit="formSubmit" @reset="formReset">
		<view class="prefecture form-group"> 
		<view class="form-item">
			<view class="form-label w150">
				<text class="domation mr10">*</text>
				<text>{{ $t('MY_ORD_10') }}</text>
			</view>
			<view class="flex-1">
				<input class="form-input bg" type="text" value="" v-model="editaddress.accountName" disabled  :placeholder="$t('S_C_70')" />
			</view> 
		</view>
		<view class="form-item">
			<view class="form-label w150">
				<text class="domation mr10">*</text>
				<text>{{ $t('w_0052') }}</text>
			</view>
			<view class="flex-1">
				<input class="form-input bg" type="text" value="" v-model="editaddress.phone" disabled  :placeholder="$t('S_C_70')" />
			</view> 
		</view>
		<view class="form-item">
			<view class="form-label w150">
				<text class="domation mr10">*</text>
				<text>{{ $t('w_0068') }}</text>
			</view>
			<view class="flex-1">
				<view class="d-b-c" @click="showMulLinkageThreePicker" > 
					<input class="f28 pointer-enents" type="text" placeholder-class="grary9" :placeholder="$t('w_0069')" v-model="selectCity" disabled="true" />
					<view class="icon iconfont fb icon-icon1"></view>
				</view>
			</view> 
		</view>
		<view class="form-item">
			<view class="form-label w150">
				<text class="domation mr10">*</text>
				<text>{{ $t('S_C_27') }}</text>
			</view>
			<view class="flex-1">
				<textarea
					name="address"
					class="ww100 f28"
					placeholder-class="grary9"
					:auto-height="true"
					v-model="editaddress.address"
					:placeholder="$t('w_0070')"
				></textarea>
			</view> 
		</view>
		<view class="addBtn">
			<button form-type="submit" class="f32 mt60 normal-sub-btn">{{ $t('w_0035') }}</button>
		</view>
		<mpvue-city-picker
			v-if="is_load"
			ref="mpvueCityPicker"
			:province="province"
			:city="city"
			:area="area"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
		></mpvue-city-picker>
	 </view>
	</form>
	 
</template>

<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			cityPickerValueDefault: [0, 0, 0],
			pkProvince: 0,
			pkCity: 0,
			pkCounty: 0,
			/*地址id*/
			pkId: 0,
			/*地址数据*/
			 editaddress: {
      			accountName: '', 
      			phone: '',
      			pkProvince: 0,
      			pkCity: 0,
      			pkCounty: 0,
      			address: '',
				dizhi: [],
    		},
			/*地区*/
			is_load: false,
			province: [],
			city: [],
			area: [],
			isDefault: false,
			selectCity: this.$t('S_C_30'),
		};
	},
	onLoad(e) {
		  // 获取传递的参数
		 this.editaddress = e;
		 this.editaddress.dizhi = [e.pkProvince || 0,e.pkCounty || 0,e.pkCity || 0]
		 this.selectCity = e.showName;
		  if(!e.showName){
			this.selectCity = this.$t('S_C_30');
		  }
	},
	mounted() {
		/*获取地址数据*/
		this.getCityData();
	},
	methods: {
		// 获取省市区
		getCityData() {
			let self = this;
			self._get('system/api/area/tree', {}, function(res) {
				self.province = res.data;
				self.is_load = true;
			});
		},

		/*提交地址*/
		formSubmit: function(e) {
			let self = this;
			const { pkId, pkProvince, pkCity, pkCounty, address, dizhi } = this.editaddress;
			let params = {
				pkId,
				pkProvince,
				pkCity,
				pkCounty,
				address,
				dizhi,
			}
			if (pkProvince == 0 || pkCity == 0 || pkCounty == 0) {
				if (address == '') {
					uni.showToast({
						title: self.$t('S_C_30'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
			}

			self._post('member/api/member-gift/update-gift', params, function(res) {
				self.showSuccess(res.msg, function() {
					// #ifndef H5
					uni.navigateBack({
						delta: parseInt(1)
					});
					// #endif
					// #ifdef H5
					history.go(-1);
					// #endif
				});
			});
		},

		/*清空数据*/
		formReset: function(e) {
			console.log('清空数据');
		},

		/*三级联动选择*/
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show();
		},

		/*选择之后绑定*/
		onConfirm(e) {
			this.selectCity = e.label;
			this.editaddress.dizhi = e.cityCode;
			this.editaddress.pkProvince = e.cityCode[0];
			this.editaddress.pkCity = e.cityCode[1];
			this.editaddress.pkCounty = e.cityCode[2];
		}
	}
};
</script>

<style lang="scss" scoped> 
/* .address-form {
	padding: 0;
	border-radius: 0;
}

.address-box {
	padding: 0 31rpx 0 27rpx;
}

.address-form .key-name {
	width: 180rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 28rpx;
}

.address-form .btn-red {
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, 0.6);
}



.address-input {
	line-height: 90rpx;
	height: 90rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}

.addtextarea {
	font-size: 28rpx;
	line-height: 1.5;
	padding: 25rpx 0;
}

.icon.icon-icon1 {
	font-size: 28rpx;
	color: #999;
} */
.addBtn {
	position: fixed;
	bottom: 60rpx;
	left: 0rpx;
	margin: 0 auto;
	width: 750rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>