<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="600px"
|
:withFooter="false"
|
>
|
<div class="detail-container">
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">用户信息</span>
|
<span class="status-tag">
|
<el-tag type="success" v-if="detailInfo.telephone">已授权手机号</el-tag>
|
<el-tag type="warning" v-else>未授权手机号</el-tag>
|
</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">微信openid：</span>
|
<span class="value">{{ detailInfo.openId }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">用户昵称：</span>
|
<span class="value">{{ detailInfo.nickName }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">会员姓名：</span>
|
<span class="value">{{ detailInfo.name }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">授权手机号：</span>
|
<span class="value">{{ detailInfo.telephone }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">状态：</span>
|
<span class="value">{{ detailInfo.status === 0 ? '正常' : detailInfo.status === 1 ? '停用' : '已注销' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getById } from '@/api/business/memberManage'
|
import BaseOpera from '@/components/base/BaseOpera'
|
export default {
|
name: 'OperaMemberDetail',
|
extends: BaseOpera,
|
components: { GlobalWindow, BaseOpera },
|
data () {
|
return {
|
detailInfo: {
|
id: null,
|
openId: '',
|
nickName: '',
|
name: '',
|
phone: '',
|
status: 1
|
}
|
}
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
getById(row.id).then(res => {
|
this.detailInfo = {
|
id: res.id,
|
openId: res.openId,
|
nickName: res.nickName,
|
name: res.name,
|
phone: res.phone,
|
status: res.status
|
}
|
this.visible = true
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.detail-container {
|
padding: 20px;
|
}
|
.section {
|
margin-bottom: 30px;
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
gap: 15px;
|
margin-bottom: 15px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
padding-left: 10px;
|
border-left: 4px solid #2E68EC;
|
}
|
.status-tag {
|
padding: 4px 12px;
|
border-radius: 4px;
|
font-size: 12px;
|
}
|
.status-pending {
|
background: #fdf6ec;
|
color: #E6A23C;
|
}
|
.status-success {
|
background: #f0f9eb;
|
color: #67C23A;
|
}
|
.status-reject {
|
background: #fef0f0;
|
color: #F56C6C;
|
}
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 15px;
|
padding: 0 10px;
|
}
|
.info-item {
|
display: flex;
|
font-size: 14px;
|
}
|
.info-item .label {
|
color: #909399;
|
min-width: 90px;
|
}
|
.info-item .value {
|
color: #606266;
|
}
|
.info-item .amount {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
.info-item.full-width {
|
grid-column: span 2;
|
}
|
.timeline-content {
|
padding: 10px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
}
|
.timeline-title {
|
font-size: 14px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 8px;
|
}
|
.timeline-info {
|
display: flex;
|
gap: 20px;
|
font-size: 13px;
|
color: #606266;
|
margin-bottom: 5px;
|
}
|
.timeline-remark {
|
font-size: 13px;
|
color: #909399;
|
}
|
.approval-form {
|
padding: 20px;
|
background: #f5f7fa;
|
border-top: 1px solid #eee;
|
}
|
.approval-form /deep/ .el-form-item {
|
margin-bottom: 15px;
|
}
|
.approval-form /deep/ .el-form-item:last-child {
|
margin-bottom: 0;
|
}
|
.approval-buttons {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
margin-top: 15px;
|
}
|
</style>
|
