Skip to content

M
member
You need to sign in or sign up before continuing.
Commit 8136efa4 by chenyu
Options

update: update

parent 36e29fc8
Showing with 266 additions and 11 deletions
src/components/allCustomers/customerDetail.vue
<template>
<div class="wechat-details">
<div class="customer-details">
<v-nav :navpath="navpath"></v-nav>
<div class="customer-contain-wrap">
<div class="customer-info-item">
<div class="info-item-header">
<h2 class="item-title"><i class="line"></i><span>基本信息</span></h2>
<el-button type="text">编辑</el-button>
</div>
<div class="basic-info-contain">
<div class="left">
<div class="user-avatar">
<div class="tag">冻结</div>
<div class="maskOperation">
<span @click="updateImgUrl">刷新头像</span><i class="line"></i>
<router-link tag="span"
:to="`/photo-album?memberId=${memberId}&from=1`">会员相册</router-link>
</div>
<img class="user-avatar-img"
:src="memberInfo.thirdImgUrl ? memberInfo.thirdImgUrl : defaultImg"
alt="">
</div>
</div>
<div class="right">
<el-descriptions :column="3"
labelClassName="info-lebel"
contentClassName="info-content">
<el-descriptions-item label="姓名">kooriookami<span>（昵称：梦奇）</span>
<el-tag type="success">微信会员</el-tag>
</el-descriptions-item>
<el-descriptions-item label="性别">未知</el-descriptions-item>
<el-descriptions-item label="出生日期（阳历）">1991-02-06</el-descriptions-item>
<el-descriptions-item label="手机号">15233659865</el-descriptions-item>
<el-descriptions-item label="常驻城市">未知</el-descriptions-item>
<el-descriptions-item label="关注来源">企业微信</el-descriptions-item>
<el-descriptions-item label="首次关注时间">2021-05-11 16:58:16</el-descriptions-item>
<el-descriptions-item label="达摩同意协议时间">达摩同意协议时间：</el-descriptions-item>
<el-descriptions-item label="达摩同意协议时间：">
<p>访问:2021-05-11 16:59:00</p>
<p>登录:2021-05-11 17:03:00</p>
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<div class="extended-field-wrap">
<div class="flex-header">
<el-radio-group v-model="showFieldType">
<el-radio-button :label="1">开卡拓展字段</el-radio-button>
<el-radio-button :label="2">会员信息字段</el-radio-button>
</el-radio-group>
<div class="line"></div>
<div class="toggleTag"
@click="toggleTag=!toggleTag">展开<i :class="toggleTag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
</div>
</div>
<div v-show="toggleTag">
<div class="extend-description"
v-show="showFieldType===1">
<el-descriptions :column="3"
labelClassName="info-lebel"
contentClassName="info-content">
<el-descriptions-item label="姓名">kooriookami<span>（昵称：梦奇）</span>
<el-tag type="success">微信会员</el-tag>
</el-descriptions-item>
<el-descriptions-item label="性别">未知</el-descriptions-item>
<el-descriptions-item label="出生日期（阳历）">1991-02-06</el-descriptions-item>
<el-descriptions-item label="手机号">15233659865</el-descriptions-item>
<el-descriptions-item label="常驻城市">未知</el-descriptions-item>
<el-descriptions-item label="关注来源">企业微信</el-descriptions-item>
<el-descriptions-item label="首次关注时间">2021-05-11 16:58:16</el-descriptions-item>
<el-descriptions-item label="达摩同意协议时间">达摩同意协议时间：</el-descriptions-item>
<el-descriptions-item label="达摩同意协议时间：">
<p>访问:2021-05-11 16:59:00</p>
<p>登录:2021-05-11 17:03:00</p>
</el-descriptions-item>
</el-descriptions>
</div>
<div class="extend-description"
v-show="showFieldType===2">
<el-descriptions :column="3"
labelClassName="info-lebel"
contentClassName="info-content">
<el-descriptions-item label="姓名">kooriookami<span>（昵称：梦奇）</span>
<el-tag type="success">微信会员</el-tag>
</el-descriptions-item>
<el-descriptions-item label="性别">未知</el-descriptions-item>
<el-descriptions-item label="出生日期（阳历）">1991-02-06</el-descriptions-item>
<el-descriptions-item label="手机号">15233659865</el-descriptions-item>
<el-descriptions-item label="常驻城市">未知</el-descriptions-item>
<el-descriptions-item label="关注来源">企业微信</el-descriptions-item>
<el-descriptions-item label="首次关注时间">2021-05-11 16:58:16</el-descriptions-item>
<el-descriptions-item label="达摩同意协议时间">达摩同意协议时间：</el-descriptions-item>
<el-descriptions-item label="达摩同意协议时间：">
<p>访问:2021-05-11 16:59:00</p>
<p>登录:2021-05-11 17:03:00</p>
</el-descriptions-item>
</el-descriptions>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import action from './info.js';
export default { ...action };
</script>
\ No newline at end of file
</script>
<style lang="less" scoped>
.customer-contain-wrap {
min-height: calc(100vh - 208px);
margin: 20px;
padding: 20px;
background: #fff;
box-sizing: border-box;
// 公共头部title
.info-item-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
padding: 0 20px 0 12px;
background: #f7f8fa;
.item-title {
display: flex;
justify-content: flex-start;
align-items: center;
line-height: 40px;
font-size: 14px;
font-weight: 500;
color: #303133;
.line {
display: block;
width: 3px;
height: 14px;
margin-right: 8px;
background: #1890ff;
}
}
}
.basic-info-contain {
display: flex;
max-width: 1600px;
margin-bottom: 10px;
padding: 20px 20px 0;
.left {
width: 120px;
margin-right: 20px;
.user-avatar {
position: relative;
width: 120px;
height: 120px;
border-radius: 2px;
overflow: hidden;
.tag {
position: absolute;
top: 0;
right: 0;
width: 35px;
height: 16px;
padding-right: 2px;
font-size: 12px;
text-align: right;
line-height: 16px;
color: #ffffff;
background: #f5222d;
border-radius: 0px 2px 0px 36px;
box-sizing: border-box;
cursor: default;
}
.maskOperation {
position: absolute;
bottom: 0;
width: 100%;
height: 34px;
transform: translateY(43px);
transition: transform 0.5s, -webkit-transform 0.5s;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
border-radius: 0px 0px 2px 2px;
font-size: 12px;
font-weight: 400;
color: #ffffff;
text-align: center;
line-height: 43px;
span {
display: inline-block;
cursor: pointer;
}
.line {
display: inline-block;
width: 1px;
height: 8px;
margin: 0 6px;
background: #e9e9e9;
}
}
.user-avatar-img {
display: block;
width: 100%;
}
&:hover {
.maskOperation {
transform: translateY(0px);
}
}
}
}
.right {
flex: 1;
}
}
.extended-field-wrap {
.flex-header {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 32px;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
color: #1890ff;
background-color: #fff;
border-left-color: #1890ff;
}
.line {
flex: 1;
height: 1px;
margin: 0 9px 0 13px;
background: #e4e7ed;
}
.toggleTag {
font-size: 14px;
font-weight: 400;
color: #1890ff;
cursor: default;
}
}
}
/deep/.el-descriptions {
.info-lebel,
.info-content {
font-size: 14px;
}
.el-descriptions-item__cell {
padding-bottom: 20px;
}
.el-descriptions-row {
vertical-align: top;
}
.el-descriptions__body
.el-descriptions__table
tbody:last-child
.el-descriptions-item__cell {
padding-bottom: 0;
}
}
</style>
\ No newline at end of file
src/components/allCustomers/index.js
......@@ -16,7 +16,7 @@ export default {
data() {
return {
sceneValue: "member", // 人群筛选器场景值
pageName: "wxMember", // 列表字段请求参数
pageName: "allCustomer", // 列表字段请求参数
navpath: [
{ name: "首页", path: "" },
{ name: "客户列表", path: "" },
......@@ -383,7 +383,7 @@ export default {
linkDetail(memberId) {
this.$router.push({
path: "/customerDetail",
query: { memberId: memberId }
query: { id: memberId }
});
},
getEnterpriseInfo() {
......
src/components/allCustomers/info.js
import nav from "../../common/navbar/navbar.vue";
import defaultImg from "../../../static/img/default.png";
export default {
name: "customersDetail",
data() {
......@@ -8,12 +8,19 @@ export default {
{ name: "首页", path: "" },
{ name: "客户列表", path: "/allCustomers" },
{ name: "客户详情", path: "" }
]
],
memberInfo: {},
defaultImg,
toggleTag: false,
showFieldType: 1 // 1开卡拓展字段 2会员信息字段
};
},
created() {
this.$store.commit("mutations-slide", false);
},
methods: {
updateImgUrl() {}
},
components: {
"v-nav": nav
}
......
static/css/dmreset.css
.dm-reset-style tbody{
font-size: 0px;
}
.dm-reset-style tbody .el-table__row {
font-size: 14px;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment