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