141 lines
3.6 KiB
Vue
141 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<obj-modal
|
||
|
|
ref="modal"
|
||
|
|
labelWidth="150px"
|
||
|
|
:modalCols="modalCols"
|
||
|
|
:modalConfig="modalConfig"
|
||
|
|
:modalData="modalData"
|
||
|
|
:modalHandles="modalHandles"
|
||
|
|
>
|
||
|
|
<template slot="dialog__after">
|
||
|
|
<div style="padding: 20px">
|
||
|
|
<el-descriptions title="用户信息">
|
||
|
|
<el-descriptions-item label="头像">
|
||
|
|
<el-image
|
||
|
|
style="width: 60px; height: 60px"
|
||
|
|
:src="modalData.headUrl"
|
||
|
|
:preview-src-list="[modalData.headUrl]"
|
||
|
|
>
|
||
|
|
</el-image>
|
||
|
|
</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="用户名">{{
|
||
|
|
modalData.username
|
||
|
|
}}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="ID">{{
|
||
|
|
modalData.userId
|
||
|
|
}}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="手机号">{{
|
||
|
|
modalData.mobile
|
||
|
|
}}</el-descriptions-item>
|
||
|
|
<!-- <el-descriptions-item label=""
|
||
|
|
>江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
|
||
|
|
> -->
|
||
|
|
</el-descriptions>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-if="modalData.id"
|
||
|
|
style="margin-top: 20px; border-top: 1px solid #ccc; padding: 20px"
|
||
|
|
>
|
||
|
|
<el-descriptions title="会员信息">
|
||
|
|
<el-descriptions-item label="会员名称">{{
|
||
|
|
modalData.levelName
|
||
|
|
}}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="生日">{{
|
||
|
|
modalData.birthday
|
||
|
|
}}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="加入会员时间">{{
|
||
|
|
modalData.joinTime
|
||
|
|
}}</el-descriptions-item>
|
||
|
|
</el-descriptions>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</obj-modal>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { debounce, cloneDeep } from "lodash";
|
||
|
|
import { Divider } from "element-ui";
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isAdd: true,
|
||
|
|
//表格属性
|
||
|
|
modalConfig: {
|
||
|
|
title: "用户详情",
|
||
|
|
show: false,
|
||
|
|
width: "60%",
|
||
|
|
},
|
||
|
|
modalData: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
"modalConfig.show"(newVal) {
|
||
|
|
if (newVal) {
|
||
|
|
//关闭弹窗清空校验
|
||
|
|
setTimeout(() => {
|
||
|
|
this.$refs.modal.resetFields();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
queryTableData(pageNo, pageSize) {},
|
||
|
|
toggle(e) {
|
||
|
|
if (this.modalConfig.show == false) {
|
||
|
|
this.modalConfig.show = true;
|
||
|
|
} else {
|
||
|
|
this.modalConfig.show = false;
|
||
|
|
}
|
||
|
|
if (e) {
|
||
|
|
this.init(cloneDeep(e));
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
add: () => {
|
||
|
|
this.modalConfig.title = "用户详情";
|
||
|
|
this.isAdd = true;
|
||
|
|
},
|
||
|
|
update: () => {
|
||
|
|
this.isAdd = false;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
init(row) {
|
||
|
|
this.modalData = row;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
modalCols() {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
modalHandles() {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
label: "取消",
|
||
|
|
handle: () => {
|
||
|
|
this.toggle();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: this.isAdd ? "确认添加" : "确认",
|
||
|
|
type: "primary",
|
||
|
|
loading: this.isLoading,
|
||
|
|
submit: true,
|
||
|
|
handle: () => {
|
||
|
|
console.log(JSON.parse(JSON.stringify(this.modalData)));
|
||
|
|
this.$emit(
|
||
|
|
"addCouponData",
|
||
|
|
JSON.parse(JSON.stringify(this.modalData))
|
||
|
|
);
|
||
|
|
this.toggle();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
asyncComputed: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
</style>
|