147 lines
4.1 KiB
Vue
147 lines
4.1 KiB
Vue
<template>
|
|
<div class="address-list">
|
|
<el-dialog title="更换地址" :visible.sync="showDialog" width="900px">
|
|
<div class="list black">
|
|
<div
|
|
:class="['item m-b-16', { active: item.id == selectId }]"
|
|
v-for="(item, index) in addressList"
|
|
:key="index"
|
|
@click="selectId = item.id"
|
|
>
|
|
<div>
|
|
<span class="weigth-500">{{ item.contact }}</span>
|
|
{{ item.telephone }}
|
|
<el-tag
|
|
size="mini"
|
|
type="warning"
|
|
effect="dark"
|
|
v-if="item.is_default"
|
|
>默认</el-tag
|
|
>
|
|
</div>
|
|
<div class="lighter m-t-8">
|
|
{{ item.province }} {{ item.city }} {{ item.district }}
|
|
{{ item.address }}
|
|
</div>
|
|
<div class="oprate lighter flex">
|
|
<div
|
|
class="m-r-16"
|
|
@click.stop="
|
|
editId = item.id
|
|
showAddressAdd = true
|
|
"
|
|
>
|
|
修改
|
|
</div>
|
|
<div @click.stop="setDefault(item.id)">设为默认</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="onConfirm">确认</el-button>
|
|
<el-button @click="showDialog = false">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<address-add
|
|
v-model="showAddressAdd"
|
|
:aid="editId"
|
|
@success="getAddress"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
showDialog: false,
|
|
showAddressAdd: false,
|
|
addressList: [],
|
|
selectId: 0,
|
|
editId: '',
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async getAddress() {
|
|
const { code, data } = await this.$get('user_address/lists')
|
|
if (code == 1) {
|
|
this.addressList = data
|
|
}
|
|
},
|
|
async setDefault(id) {
|
|
const { code, data, msg } = await this.$post(
|
|
'user_address/setDefault',
|
|
{
|
|
id,
|
|
}
|
|
)
|
|
if (code == 1) {
|
|
this.$message({
|
|
message: msg,
|
|
type: 'success',
|
|
})
|
|
this.getAddress()
|
|
}
|
|
},
|
|
onConfirm() {
|
|
this.$emit('confirm', this.selectId)
|
|
this.showDialog = false
|
|
},
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
this.showDialog = val
|
|
if (val == true) {
|
|
this.getAddress()
|
|
}
|
|
},
|
|
showDialog(val) {
|
|
this.$emit('input', val)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.address-list {
|
|
::v-deep .el-dialog__body {
|
|
height: 460px;
|
|
overflow-y: auto;
|
|
}
|
|
.list {
|
|
margin: 0 auto;
|
|
width: 800px;
|
|
.item {
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: 16px 20px;
|
|
height: 100px;
|
|
padding-right: 150px;
|
|
border: 1px solid $--border-color-base;
|
|
border-radius: 2px;
|
|
&.active {
|
|
border-color: $--color-primary;
|
|
}
|
|
.oprate {
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 9px;
|
|
}
|
|
}
|
|
}
|
|
.dialog-footer {
|
|
text-align: center;
|
|
.el-button {
|
|
width: 160px;
|
|
}
|
|
}
|
|
}
|
|
</style> |