Skip to content

M
member
Commit 70143a3f by chenyu
Options

update: 详情交互更改

parent 5d2ed985
Showing with 364 additions and 348 deletions
src/components/allCustomers/allCustomersList.vue
......@@ -87,8 +87,8 @@
><use xlink:href="#icon-weixinquguan"></use>
</svg></span><i :title="row.status==1?'已关注公众号':'未关注公众号'" v-else
:class="['iconfont status-icon ',row.status==1?'icon-weixin1 follow':'icon-weixin1']"></i><i
:title="row.status==1?'已使用小程序':'未使用小程序'"
:class="['iconfont status-icon icon-xiaochengxu1',row.status==1?'used':'']"></i>
:title="row.wxStatus==1?'已使用小程序':'未使用小程序'"
:class="['iconfont status-icon icon-xiaochengxu1',row.wxStatus==1?'used':'']"></i>
</span>
<!-- 关联渠道 -->
<span v-else-if="colum == 'channel'">
......
src/components/allCustomers/components/baseinfoDialog.vue
......@@ -24,11 +24,28 @@
v-model="form.memberBirthday" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="手机号码：">
<el-select style="width: 106px;margin-right:6px;" v-model="form.nationCode">
<el-select style="width: 106px;margin-right:6px;" v-model="form.nationCode"
:disabled="phoneNumber&&!isEditPhone">
<el-option v-for="item in nationCodeList" :key="item.dictCode" :value="item.dictCode"
:label="item.dictName"></el-option>
</el-select>
<el-form-item prop="phoneNumber" style="display:inline-block" class="gray-phone-error">
<el-form-item v-if="phoneNumber" prop="phoneNumber" style="display:inline-block"
class="gray-phone-error">
<el-input v-model="form.phoneNumber" :style="{width: isEditPhone?'170px':'215px'}"
:disabled="phoneNumber&&!isEditPhone">
</el-input>
<el-button type="text" v-if="!isEditPhone" style="margin-left:20px;"
@click="isEditPhone=true">修改</el-button>
<template v-else>
<el-button type="text" style="margin-left:20px;" @click="cancelPhoneEdit">取消
</el-button>
<el-button type="text" :disabled="!form.phoneNumber" @click="savePhoneEdit">保存
</el-button>
</template>
<div v-if="showError" class="el-form-item__error" style="color:#c0c4cc;">请输入正确的手机号码</div>
</el-form-item>
<el-form-item v-else prop="phoneNumber" style="display:inline-block"
class="gray-phone-error">
<el-input v-model="form.phoneNumber" style="width: 270px"></el-input>
</el-form-item>
</el-form-item>
......@@ -71,50 +88,6 @@ export default {
},
},
data() {
var validateTel = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入号码"));
// return callback();
} else if (value.indexOf('*') == -1) {
if (!this.form.nationCode) {
this.form.nationCode = "86";
if (!/^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
callback(new Error("请输入正确号码"));
}
}
if (this.form.nationCode) {
if (this.form.nationCode == "86") {
if (!/^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
callback(new Error("请输入正确号码"));
}
} else {
if (!/^(\d{1,11})$/.test(value)) {
callback(new Error("请输入正确号码"));
}
}
}
callback();
} else {
if (!this.form.nationCode) {
this.form.nationCode = "86";
if (!/^0?1[3|4|5|6|7|8|9][0-9]\*{4}\d{4}$/.test(value)) {
callback(new Error("请输入正确号码"));
}
}
if (this.form.nationCode) {
if (this.form.nationCode == "86") {
if (!/^0?1[3|4|5|6|7|8|9][0-9]\*{4}\d{4}$/.test(value)) {
callback(new Error("请输入正确号码"));
}
} else {
if (!/^\d{3}\*{4}\d{4}$/.test(value)) {
callback(new Error("请输入正确号码"));
}
}
}
callback();
}
};
return {
form: {
memberId: '',
......@@ -126,9 +99,11 @@ export default {
phoneNumber: '',
nationCode: '86'
},
phoneNumber: '',
showError: false,
isEditPhone: false,
rules: {
remark: [ { required: true, message: "请输入原因备注", trigger: "blur" } ],
phoneNumber: [ { validator: validateTel, trigger: "blur" } ]
remark: [ { required: true, message: "请输入原因备注", trigger: "blur" } ]
},
btnLoading: false,
};
......@@ -141,6 +116,18 @@ export default {
this.$refs[ 'form' ].resetFields();
this.$emit('update:dialogVisible', false);
},
cancelPhoneEdit() {
this.form.phoneNumber = this.phoneNumber;
this.isEditPhone = false;
},
savePhoneEdit() {
if (this.phoneNumber === this.form.phoneNumber || this.form.phoneNumber == Number(this.form.phoneNumber)) {
this.isEditPhone = false;
this.showError = false;
} else {
this.showError = true;
}
},
submit() {
this.$refs[ 'form' ].validate(valid => {
if (valid) {
......@@ -191,6 +178,7 @@ export default {
phoneNumber,
nationCode: this.baseInfo.nationCode || '86'
});
this.phoneNumber = phoneNumber;
this.$refs[ 'form' ].clearValidate();
}
}
......@@ -207,8 +195,5 @@ export default {
}
.customer-dailog .el-dialog__body {
padding-bottom: 0;
.gray-phone-error.is-error .el-form-item__error {
color: #c0c4cc;
}
}
</style>
\ No newline at end of file
src/components/allCustomers/customerDetail.less
......@@ -140,6 +140,7 @@
}
}
.extended-field-wrap {
padding-left: 20px;
.flex-header {
display: flex;
justify-content: flex-start;
......@@ -165,7 +166,7 @@
}
}
.extend-description {
padding: 20px 20px 0;
padding: 20px 0 0;
}
}
}
......@@ -173,81 +174,172 @@
.card-info-contain {
padding: 20px 20px 30px;
}
// 资产信息
.assets-info-contain {
padding: 20px 20px 30px;
.card-list-wrap {
// 客户记录
.customer-record-contain {
padding: 20px 26px 30px;
.flex-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
height: 89px;
.card-item {
display: flex;
justify-content: flex-start;
align-items: center;
.flex-moudle-item {
width: 285px;
height: 89px;
padding: 0 20px;
margin-right: 40px;
height: 224px;
padding: 20px;
background: #ffffff;
border-radius: 2px;
border-radius: 8px;
border: 1px solid #e4e7ed;
box-sizing: border-box;
transition: all 0.3s;
&:hover {
cursor: pointer;
transform: translateY(-5px);
box-shadow: 0 2px 7px rgba(122, 138, 203, 0.2);
}
&.balance.nohover:hover {
cursor: default;
transform: translateY(0);
box-shadow: none;
& + .flex-moudle-item {
margin: 0 20px;
}
.icon-wrap {
}
.flex-item {
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 7px;
margin-right: 21px;
color: #fff;
.iconfont {
font-size: 35px;
}
&.integral {
background: #ffcb48;
.icon-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
margin: 0 25px 0 0;
border-radius: 6px;
&.integral {
background: rgba(255, 203, 71, 0.15);
.icon-jifen1 {
font-size: 33px;
color: #ffcb48;
}
}
&.coupon {
background: #ecf8fe;
.icon-01_kaquanguanli {
font-size: 38px;
color: #26dad0;
}
}
&.balance {
background: #ecf8fe;
.icon-chuzhizhanghu {
font-size: 27px;
color: #5c89ff;
}
}
&.market {
background: #ECF8FE;
.icon-yingxiaojilu {
font-size: 26px;
color: #26DAD0;
}
}
&.tel {
background: #ECF8FE;
.icon-tonghuajilu1 {
font-size: 26px;
color: #5C89FF;
}
}
}
&.coupon {
background: #597ef7;
.iconfont {
font-size: 45px;
.middle {
display: flex;
flex-direction: column;
justify-content: space-between;
.label {
margin-bottom: 5px;
font-size: 14px;
color: #303133;
}
.num {
font-size: 20px;
font-weight: bold;
color: #303133;
}
}
}
.el-icon-arrow-right {
color: #909399;
margin-bottom: 3px;
font-size: 12px;
transition: all 0.5s;
}
&.hover:hover {
cursor: pointer;
.el-icon-arrow-right {
color: #1890ff;
transform: translateX(5px);
}
&.balance {
background: #26dad0;
}
& + .assets-item {
margin-top: 20px;
}
// 资产信息
&.assets-item {
.el-icon-arrow-right {
align-self: flex-end;
}
}
.middle {
flex: 1;
// 交易记录
&.transaction-item {
& + .transaction-item {
margin-top: 10px;
}
.icon-wrap {
width: 40px;
height: 40px;
margin-right: 10px;
background: #ecf8fe;
img {
height: 26px;
}
.iconfont {
color: #597ef7;
&.icon-mendianbaojiadan {
font-size: 22px;
}
&.icon-a-weimeng2 {
font-size: 30px;
}
&.icon-dingdan-copy {
font-size: 24px;
}
}
}
.label {
margin-bottom: 8px;
font-size: 14px;
color: #303133;
line-height: 20px;
line-height: 28px;
}
.num {
margin-left: 13px;
font-size: 20px;
font-weight: bold;
color: #303133;
line-height: 28px;
vertical-align: middle;
}
}
.el-icon-arrow-right {
display: block;
align-self: flex-end;
margin-bottom: 22px;
}
.flex-column-wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 224px;
.flex-column-item {
width: 223px;
height: 107px;
padding: 20px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #e4e7ed;
box-sizing: border-box;
.el-icon-arrow-right{
align-self: flex-end;
margin-bottom: 9px;
}
}
}
}
......@@ -294,106 +386,6 @@
}
}
}
// 交易记录
.transaction-record-contain {
padding: 20px 20px 30px;
.card-list-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
.card-item {
margin-right: 127px;
cursor: pointer;
&:hover {
.one-line {
color: #1890ff;
.el-icon-arrow-right {
color: #1890ff;
}
}
}
.one-line {
margin-bottom: 10px;
line-height: 20px;
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
.svg,
img {
margin-right: 6px;
line-height: 20px;
}
.svg {
font-size: 20px;
vertical-align: top;
&.icon-mendianbaojiadan {
color: #5c89ff;
}
}
img {
width: 14px;
vertical-align: middle;
}
.el-icon-arrow-right {
font-size: 14px;
color: #909399;
margin-left: 4px;
}
}
.two-line {
margin-left: 23px;
font-size: 20px;
font-weight: bold;
color: #303133;
line-height: 28px;
}
}
}
}
// 交互记录
.interactive-record-contain {
padding: 20px 20px 30px;
.card-list-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
.vertical-line {
margin: 0 50px;
width: 1px;
height: 13px;
background: #e4e7ed;
}
.card-item {
font-size: 14px;
color: #303133;
line-height: 20px;
cursor: default;
.iconfont {
margin-right: 8px;
font-size: 20px;
color: #606266;
&.icon-tonghuajilu {
font-size: 19px;
}
}
span {
margin-left: 15px;
font-size: 16px;
font-weight: bold;
color: #303133;
}
&.numOfTel:hover {
cursor: pointer;
color: #1890ff;
.iconfont,
span {
color: #1890ff;
}
}
}
}
}
// 标签备注
.label-remarks-contain {
padding: 20px 0 30px;
......@@ -442,6 +434,16 @@
color: #303133;
line-height: 18px;
}
&.member-tag-group {
p {
width: 84px;
text-align: right;
}
.no-data {
font-size: 14px;
color: #c0c4cc;
}
}
}
.clerk-remarks-item {
border-bottom: 1px solid #e4e7ed;
......
src/components/allCustomers/info.js
......@@ -68,7 +68,7 @@ export default {
},
totalCount: 0,
defaultImg,
labelTabsActive: "groupName",
labelTabsActive: "memberTagGroup",
fullscreenLoading: false, // 全局loading
tableLoading: false, // 用户日志列表loading
imgLoading: false, // 刷新头像loading
......@@ -93,32 +93,79 @@ export default {
class: "card-info-contain max1600"
},
{
title: "资产信息",
name: "assets",
class: "assets-info-contain",
childrenList: [
{
label: "积分",
icon: "icon-jifen1",
iconTheme: "integral",
key: "accumulatPoints",
path: "/integralDataPage"
},
{
label: "卡券",
icon: "icon-01_kaquanguanli",
iconTheme: "coupon",
key: "couponCount",
path: "/cardvoucher"
},
{
label: "储值余额",
icon: "icon-chuzhizhanghu",
iconTheme: "balance",
key: "storedValue",
path: ""
}
]
title: "客户记录",
name: "customerRecord",
class: "customer-record-contain max1600",
childrenList: {
// 资产信息
assets: [
{
label: "积分",
icon: "icon-jifen1",
iconTheme: "integral",
key: "accumulatPoints",
path: "/integralDataPage"
},
{
label: "卡券",
icon: "icon-01_kaquanguanli",
iconTheme: "coupon",
key: "couponCount",
path: "/cardvoucher"
},
{
label: "储值余额",
icon: "icon-chuzhizhanghu",
iconTheme: "balance",
key: "storedValue",
path: ""
}
],
// 交易记录
transaction: [
{
label: "门店消费",
icon: "icon-mendianbaojiadan",
key: "numOfSale",
path: "/consumption"
},
{
label: "微盟订单",
icon: "icon-a-weimeng2",
key: "weimobMallNum",
path: "/wmDetail"
},
{
label: "达摩商城订单",
icon: "",
key: "wechatMallNum",
path: "/infoMall"
},
{
label: "其他订单",
icon: "icon-dingdan-copy",
key: "otherMallNum",
path: "/otherDetail"
}
],
// 交互记录
interactive: [
{
label: "营销记录",
icon: "icon-yingxiaojilu",
iconTheme: "market",
key: "numOfMarket",
path: ""
},
{
label: "通话记录",
icon: "icon-tonghuajilu1",
iconTheme: "tel",
key: "numOfTel",
path: "/talkLogPage"
}
]
}
},
{
title: "归属信息",
......@@ -126,56 +173,6 @@ export default {
class: "ascription-info-contain max160"
},
{
title: "交易记录",
name: "transaction",
class: "transaction-record-contain",
childrenList: [
{
label: "门店消费",
icon: "icon-mendianbaojiadan",
key: "numOfSale",
path: "/consumption"
},
{
label: "达摩商城",
icon: "",
key: "wechatMallNum",
path: "/infoMall"
},
{
label: "微盟订单",
icon: "icon-weimeng",
key: "weimobMallNum",
path: "/wmDetail"
},
{
label: "其他订单",
icon: "icon-dingdan-copy",
key: "otherMallNum",
path: "/otherDetail"
}
]
},
{
title: "交互记录",
name: "interactive",
class: "interactive-record-contain",
childrenList: [
{
label: "营销记录",
icon: "icon-yingxiao",
key: "numOfMarket",
path: ""
},
{
label: "通话记录",
icon: "icon-tonghuajilu",
key: "numOfTel",
path: "/talkLogPage"
}
]
},
{
title: "标签备注",
name: "label",
class: "label-remarks-contain",
......@@ -349,9 +346,12 @@ export default {
if (v) this.$router.push({ path: v, query: { memberId: this.memberId } });
},
goStoreValue() {
if(this.memberInfo.storedValueFlag) {
this.$router.push({ path: '/storedValue', query: { memberId: this.memberId } });
}else {
if (this.memberInfo.storedValueFlag) {
this.$router.push({
path: "/storedValue",
query: { memberId: this.memberId }
});
} else {
this.$message.info("未对接储值明细，暂无数据");
}
},
......
static/font/demo_index.html
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
......@@ -55,6 +55,24 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe68f;</span>
<div class="name">通话记录</div>
<div class="code-name">&amp;#xe68f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe691;</span>
<div class="name">营销记录</div>
<div class="code-name">&amp;#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeba7;</span>
<div class="name">微盟 (2)</div>
<div class="code-name">&amp;#xeba7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe74b;</span>
<div class="name">账单</div>
<div class="code-name">&amp;#xe74b;</div>
......@@ -79,12 +97,6 @@
</li>
<li class="dib">
<span class="icon iconfont">&#xe765;</span>
<div class="name">营销</div>
<div class="code-name">&amp;#xe765;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b8;</span>
<div class="name">收起</div>
<div class="code-name">&amp;#xe6b8;</div>
......@@ -109,12 +121,6 @@
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e4;</span>
<div class="name">微盟</div>
<div class="code-name">&amp;#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe685;</span>
<div class="name">微信</div>
<div class="code-name">&amp;#xe685;</div>
......@@ -1746,9 +1752,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1637285227740') format('woff2'),
url('iconfont.woff?t=1637285227740') format('woff'),
url('iconfont.ttf?t=1637285227740') format('truetype');
src: url('iconfont.woff2?t=1637803071519') format('woff2'),
url('iconfont.woff?t=1637803071519') format('woff'),
url('iconfont.ttf?t=1637803071519') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -1775,6 +1781,33 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-tonghuajilu1"></span>
<div class="name">
通话记录
</div>
<div class="code-name">.icon-tonghuajilu1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yingxiaojilu"></span>
<div class="name">
营销记录
</div>
<div class="code-name">.icon-yingxiaojilu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-weimeng2"></span>
<div class="name">
微盟 (2)
</div>
<div class="code-name">.icon-a-weimeng2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhangdan"></span>
<div class="name">
账单
......@@ -1811,15 +1844,6 @@
</li>
<li class="dib">
<span class="icon iconfont icon-yingxiao"></span>
<div class="name">
营销
</div>
<div class="code-name">.icon-yingxiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouqi1"></span>
<div class="name">
收起
......@@ -1856,15 +1880,6 @@
</li>
<li class="dib">
<span class="icon iconfont icon-weimeng"></span>
<div class="name">
微盟
</div>
<div class="code-name">.icon-weimeng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weixin1"></span>
<div class="name">
微信
......@@ -4314,6 +4329,30 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tonghuajilu1"></use>
</svg>
<div class="name">通话记录</div>
<div class="code-name">#icon-tonghuajilu1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yingxiaojilu"></use>
</svg>
<div class="name">营销记录</div>
<div class="code-name">#icon-yingxiaojilu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-weimeng2"></use>
</svg>
<div class="name">微盟 (2)</div>
<div class="code-name">#icon-a-weimeng2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhangdan"></use>
</svg>
<div class="name">账单</div>
......@@ -4346,14 +4385,6 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yingxiao"></use>
</svg>
<div class="name">营销</div>
<div class="code-name">#icon-yingxiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouqi1"></use>
</svg>
<div class="name">收起</div>
......@@ -4386,14 +4417,6 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weimeng"></use>
</svg>
<div class="name">微盟</div>
<div class="code-name">#icon-weimeng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weixin1"></use>
</svg>
<div class="name">微信</div>
......
static/font/iconfont.css
This source diff could not be displayed because it is too large. You can view the blob instead.
static/font/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
static/font/iconfont.json
......@@ -6,6 +6,27 @@
"description": "",
"glyphs": [
{
"icon_id": "25982878",
"name": "通话记录",
"font_class": "tonghuajilu1",
"unicode": "e68f",
"unicode_decimal": 59023
},
{
"icon_id": "25982879",
"name": "营销记录",
"font_class": "yingxiaojilu",
"unicode": "e691",
"unicode_decimal": 59025
},
{
"icon_id": "23690641",
"name": "微盟 (2)",
"font_class": "a-weimeng2",
"unicode": "eba7",
"unicode_decimal": 60327
},
{
"icon_id": "17102423",
"name": "账单",
"font_class": "zhangdan",
......@@ -34,13 +55,6 @@
"unicode_decimal": 59017
},
{
"icon_id": "5880283",
"name": "营销",
"font_class": "yingxiao",
"unicode": "e765",
"unicode_decimal": 59237
},
{
"icon_id": "672034",
"name": "收起",
"font_class": "shouqi1",
......@@ -69,13 +83,6 @@
"unicode_decimal": 59012
},
{
"icon_id": "7722415",
"name": "微盟",
"font_class": "weimeng",
"unicode": "e6e4",
"unicode_decimal": 59108
},
{
"icon_id": "15933094",
"name": "微信",
"font_class": "weixin1",
......
static/font/iconfont.ttf
No preview for this file type
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