wangfukang
3 years ago
1 changed files with 221 additions and 0 deletions
@ -0,0 +1,221 @@ |
|||
<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> |
|||
Loading…
Reference in new issue