kuaiyidian-HD/pages/other/logisticsAddress.vue

<template>
	<view class="">
		<view>
			<button size="default" type="default" @tap="addAddress" hover-class="is-hover">新增线路</button>
		</view>
		<view class="list-1" style="display: flex;flex-direction: column;height: 150rpx;">
			<view class="name-tel" style="width: 75%;overflow: hidden;">
				<text style="line-height: 75rpx;">河北省沧州市运河区</text>
			</view>
			<view class="name-tel" style="width: 75%;overflow: hidden;">
				<text style="line-height: 75rpx;">10公斤内/30元，每公斤/20元</text>
			</view>
			<view class="name-edit">
				<!-- <u-icon name="edit-pen-fill" size="24"></u-icon>
				<uni-icons color="red" type="trash" size="24"></uni-icons> -->
				<text @tap.stop="addAddress(item)" style='line-height: 75rpx;color: #088FEB;'>编辑</text>
				<text @tap.stop="delAddress(item)" style='color:red;line-height: 75rpx;'>删除</text>
			</view>
		</view>
		<!-- 弹出输入框 -->
		<uni-popup ref="inputDialog" background-color="#fff">
			<cc-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
			<view class="popup-pay-content">
				<view class="popup-pay-title">
					填写信息
				</view>
				<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="85px">
					<uni-forms-item label="地址" name="address1">
						<view class="input selectcity" @tap="openPicker">
							<input placeholder="请选择省市区" disabled type="text" v-model="formData.address1"></input>
						</view>
					</uni-forms-item>
					<uni-forms-item label="费用说明" name="address">
						<uni-easyinput type="textarea" v-model="formData.address" />
					</uni-forms-item>
				</uni-forms>
				<view class="address-btn" @tap="backPrevPage">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					address1: '',
					address: '',
					province: '',
					city: '',
					area: '',
					id: ''
				},
				show: false,
				rules: {
					address1: {
						rules: [{
							required: true,
							errorMessage: '请选择线路',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入费用说明',
						}]
					},
				},
			}
		},
		onShow() {

		},
		created() {
			uni.hideHomeButton() //左上角HOME按钮
		},
		onLoad(options) {

		},
		methods: {
			//新增人员
			addAddress(data) {
				this.$refs.inputDialog.open('bottom')
			},
			delAddress(){
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确定删除此条线路吗？",
					success: function(res) {
						if (res.confirm) {
							that.tui.toast('删除成功')
						}
						that.$forceUpdate()
					}
				})
			},
			openPicker() {
				this.show = true
			},
			onhideShow() {
				this.show = false
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let address = data.province + data.city + data.area;
				this.show = false
				this.formData.address1 = address;
				this.addressObj = {
					province: data.province,
					city: data.city,
					area: data.area,
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	button {
		color: #ffffff;
		background: #5fd9ee;
		width: 90%;
		margin-top: 20rpx;
	}

	.list-1 {
		display: flex;
		height: 150rpx;
		border-bottom: 1px solid #eee;
		background: #fff;
		font-size: 32rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.name-tel {
		width: 220rpx;
		height: 75rpx;
		line-height: 75rpx;
		padding-left: 40rpx;
	}

	.name-edit {
		width: 20%;
		height: 100%;
		position: absolute;
		right: 0;
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.standard-box {
		color: #088FEB;
		line-height: 75rpx;
		width: 50%;
		text-align: right;
		font-size: 26rpx;
	}


	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		width: 500rpx;
		height: 700rpx;
		background-color: #fff;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}

	.popup-container {
		margin-top: 20rpx;
	}

	.address-btn {
		width: 100%;
		height: 80rpx;
		background: #088FEB;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 10px;
	}

	.phone-btn {
		width: 150rpx;
		height: 75rpx;
		color: #088FEB;
		line-height: 75rpx;
		font-size: 26rpx;
	}

	.popup-pay-content {
		align-items: center;
		justify-content: center;
		padding: 0 15px 15px 15px;
		width: 95%;
		margin: 0 auto;
		height: auto;
		background-color: #fff;
	}

	.popup-pay-title {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
	}
</style>