Skip to content

M
member
Commit d7b288bd by Kyle_Li
Options

update：提取详情悬浮框为组件

parent 06478b04
Showing with 136 additions and 382 deletions
src/components/posmembers/posmembers.js
......@@ -10,6 +10,7 @@ import {
} from "../../../static/js/checkStatus";
import { formatLongTime, paddingBorth } from "@/utils/utils";
import { mapState } from "vuex";
import UserInfoCard from '../wechatmembers/UserInfoCard.vue'
let showFields = [];
......@@ -1062,6 +1063,7 @@ export default {
components: {
searchinput,
Navbar,
NavPath
NavPath,
UserInfoCard
}
};
src/components/posmembers/posmembers.vue
......@@ -170,71 +170,12 @@
class="tablecontent-cell"
@click="linkDetail(scope.row.memberId)"
>
<el-popover
placement="top-start"
width="400"
height="180"
trigger="hover"
@show="showSingleInfo(scope.row.memberId)"
>
<div class="pointer">
<div class="singelinfo">
<div class="singelinfo-img">
<img
width="100"
height="100"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
>
</div>
<div class="singelinfo-content pLeft10 pRight10">
<span class="lheigth0">{{ scope.row.memberName }}
<span
:title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
class="channelicon fr"
:class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
></span>
<span
:title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
class="channelicon fr mr6"
:class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
></span>
</span>
<p class="lheigth0">
<span class="evl-right">{{ singleInfo.sex }}</span><span class="evl-right">{{ singleInfo.age }}</span><span :title="singleInfo.cardNo">{{ singleInfo.cardNo | filterCarNo }}</span></p>
<p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
<div class="singelinfo-cost">
<div class="singelinfo-costitem">
<p>{{ singleInfo.costFee }}</p>
<p>消费总额</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.costTimes }}</p>
<p>消费次数</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.lastCost }}</p>
<p>最近消费</p>
</div>
</div>
</div>
</div>
<div class="singelinfo-jl mBottom20 mTop20">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
</div>
</div>
<span slot="reference" class="member-span">
<img
class="tablecontent-cellimg mr6"
width="60"
height="60"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
>
</span>
</el-popover>
<User-info-card
:scopeData="scope.row"
@showSingleInfo="showSingleInfo(scope.row.memberId)"
@linkDetail="linkDetail(scope.row.memberId)"
:singleInfo="singleInfo"
></User-info-card>
<span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
</div>
<span v-else-if="item == 'grade'">{{ scope.row.gradeName }}</span>
......@@ -359,69 +300,12 @@
v-if="item == 'name'"
class="tablecontent-cell"
>
<el-popover
placement="top-start"
width="400"
height="180"
trigger="hover"
@show="showSingleInfo(scope.row.memberId)"
>
<div class="pointer">
<div class="singelinfo">
<div class="singelinfo-img">
<img
width="100"
height="100"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
>
</div>
<div class="singelinfo-content pLeft10 pRight10">
<span class="lheigth0">{{ scope.row.memberName }}
<span
:title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
class="channelicon fr"
:class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
></span>
<span
:title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
class="channelicon fr mr6"
:class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
></span>
</span>
<p class="lheigth0">
<span class="evl-right">{{ singleInfo.sex }}</span><span class="evl-right">{{ singleInfo.age }}</span><span :title="singleInfo.cardNo">{{ singleInfo.cardNo | filterCarNo }}</span></p>
<p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
<div class="singelinfo-cost">
<div class="singelinfo-costitem">
<p>{{ singleInfo.costFee }}</p>
<p>消费总额</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.costTimes }}</p>
<p>消费次数</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.lastCost }}</p>
<p>最近消费</p>
</div>
</div>
</div>
</div>
<div class="singelinfo-jl mBottom20 mTop20">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
</div>
</div>
<span slot="reference" class="member-span"><img
class="tablecontent-cellimg mr6"
width="60"
height="60"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt="">
</span>
</el-popover>
<User-info-card
:scopeData="scope.row"
@showSingleInfo="showSingleInfo(scope.row.memberId)"
@linkDetail="linkDetail(scope.row.memberId)"
:singleInfo="singleInfo"
></User-info-card>
<span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
</div>
<span v-else-if="item == 'grade'">{{ scope.row.gradeName }}</span>
......
src/components/wechatmembers/UserInfoCard.vue 0 → 100644
<template>
<div id="UserInfoCard">
<el-popover
placement="top-start"
width="400"
height="180"
trigger="hover"
@show="showSingleInfo">
<div
class="pointer"
@click="linkDetail"
>
<div class="singelinfo">
<div class="singelinfo-img"><img
width="100"
height="100"
:src="scopeData.thirdImgUrl ? scopeData.thirdImgUrl : './static/img/default.png'"
alt=""
></div>
<div class="singelinfo-content pLeft10 pRight10">
<span class="lheigth0">{{ scopeData.memberName }}
<span
:title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
class="channelicon fr"
:class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
></span>
<span
:title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
class="channelicon fr mr6"
:class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
></span>
</span>
<p class="lheigth0">
<span class="evl-right">{{ singleInfo.sex}}</span>
<span class="evl-right">{{ singleInfo.age }}</span>
<span :title="singleInfo.cardNo">{{ singleInfo.cardNo | formatCardName }}</span></p>
<p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
<div class="singelinfo-cost">
<div class="singelinfo-costitem">
<p>{{ singleInfo.costFee }}</p>
<p>消费总额</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.costTimes }}</p>
<p>消费次数</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.lastCost }}</p>
<p>最近消费</p>
</div>
</div>
</div>
</div>
<div class="singelinfo-jl mBottom20 mTop20">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
</div>
</div>
<span slot="reference" class="member-span"><img
class="tablecontent-cellimg mr6"
width="60"
height="60"
:src="scopeData.thirdImgUrl ? scopeData.thirdImgUrl : './static/img/default.png'"
alt=""
></span>
</el-popover>
</div>
</template>
<script>
export default {
name: 'UserInfoCard',
methods: {
showSingleInfo() {
this.$emit('showSingleInfo')
},
linkDetail() {
this.$emit('linkDetail')
}
},
props: {
scopeData: Object,
singleInfo: Object
}
}
</script>
<style lang="scss" scoped>
#UserInfoCard {
display: inline-block;
}
</style>
src/components/wechatmembers/total.js
......@@ -10,6 +10,7 @@ import {
} from "../../../static/js/checkStatus";
import { formatLongTime, paddingBorth } from "@/utils/utils";
import { mapState } from "vuex";
import UserInfoCard from './UserInfoCard.vue'
let showFields = [];
......@@ -1071,6 +1072,7 @@ export default {
components: {
searchinput,
Navbar,
NavPath
NavPath,
UserInfoCard,
}
};
src/components/wechatmembers/wechat-total.vue
......@@ -181,71 +181,12 @@
@click="linkDetail(scope.row.memberId)"
style="cursor: pointer;"
class="tablecontent-cell">
<el-popover
placement="top-start"
width="400"
height="180"
trigger="hover"
@show="showSingleInfo(scope.row.memberId)">
<div
class="pointer"
@click="linkDetail(scope.row.memberId)"
>
<div class="singelinfo">
<div class="singelinfo-img"><img
width="100"
height="100"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
></div>
<div class="singelinfo-content pLeft10 pRight10">
<span class="lheigth0">{{ scope.row.memberName }}
<span
:title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
class="channelicon fr"
:class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
></span>
<span
:title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
class="channelicon fr mr6"
:class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
></span>
</span>
<p class="lheigth0">
<span class="evl-right">{{ singleInfo.sex}}</span>
<span class="evl-right">{{ singleInfo.age }}</span>
<span :title="singleInfo.cardNo">{{ singleInfo.cardNo | formatCardName }}</span></p>
<p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
<div class="singelinfo-cost">
<div class="singelinfo-costitem">
<p>{{ singleInfo.costFee }}</p>
<p>消费总额</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.costTimes }}</p>
<p>消费次数</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.lastCost }}</p>
<p>最近消费</p>
</div>
</div>
</div>
</div>
<div class="singelinfo-jl mBottom20 mTop20">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
</div>
</div>
<span slot="reference" class="member-span"><img
class="tablecontent-cellimg mr6"
width="60"
height="60"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
></span>
</el-popover>
<User-info-card
:scopeData="scope.row"
@showSingleInfo="showSingleInfo(scope.row.memberId)"
@linkDetail="linkDetail(scope.row.memberId)"
:singleInfo="singleInfo"
></User-info-card>
<span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
</div>
<span v-else-if="item == 'grade'">{{ scope.row.gradeName ? scope.row.gradeName : '-' }}</span>
......@@ -371,66 +312,12 @@
v-if="item == 'name'"
class="tablecontent-cell"
@click="linkDetail(scope.row.memberId)">
<el-popover
placement="top-start"
width="400"
height="180"
trigger="hover"
@show="showSingleInfo(scope.row.memberId)">
<div class="pointer">
<div class="singelinfo">
<div class="singelinfo-img"><img
width="100"
height="100"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
></div>
<div class="singelinfo-content pLeft10 pRight10">
<span class="lheigth0">{{ scope.row.memberName }}
<span
:title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
class="channelicon fr"
:class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
></span>
<span
:title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
class="channelicon fr mr6"
:class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
></span>
</span>
<p class="lheigth0">
<span class="evl-right">{{ singleInfo.sex }} </span><span class="evl-right">{{ singleInfo.age }} </span><span :title="singleInfo.cardNo">{{ singleInfo.cardNo | formatCardName }}</span></p>
<p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
<div class="singelinfo-cost">
<div class="singelinfo-costitem">
<p>{{ singleInfo.costFee }}</p>
<p>消费总额</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.costTimes }}</p>
<p>消费次数</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.lastCost }}</p>
<p>最近消费</p>
</div>
</div>
</div>
</div>
<div class="singelinfo-jl mBottom20 mTop20">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
</div>
</div>
<span slot="reference" class="member-span"><img
class="tablecontent-cellimg mr6"
width="60"
height="60"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : ''"
alt=""
></span>
</el-popover>
<User-info-card
:scopeData="scope.row"
@showSingleInfo="showSingleInfo(scope.row.memberId)"
@linkDetail="linkDetail(scope.row.memberId)"
:singleInfo="singleInfo"
></User-info-card>
<span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
</div>
<span v-else-if="item == 'grade'">{{ scope.row.gradeName }}</span>
......
src/components/wechatmembers/wechatmembers.js
......@@ -10,6 +10,7 @@ import {
} from "../../../static/js/checkStatus";
import { formatLongTime, paddingBorth } from "@/utils/utils";
import { mapState } from "vuex";
import UserInfoCard from './UserInfoCard.vue'
let showFields = [];
let fieldOptions = [];
......@@ -1005,6 +1006,7 @@ export default {
components: {
searchinput,
Navbar,
NavPath
NavPath,
UserInfoCard
}
};
src/components/wechatmembers/wechatmembers.vue
......@@ -179,71 +179,12 @@
@click="linkDetail(scope.row.memberId)"
style="cursor: pointer;"
class="tablecontent-cell">
<el-popover
placement="top-start"
width="400"
height="180"
trigger="hover"
@show="showSingleInfo(scope.row.memberId)">
<div
class="pointer"
@click="linkDetail(scope.row.memberId)"
>
<div class="singelinfo">
<div class="singelinfo-img"><img
width="100"
height="100"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
></div>
<div class="singelinfo-content pLeft10 pRight10">
<span class="lheigth0">{{ scope.row.memberName }}
<span
:title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
class="channelicon fr"
:class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
></span>
<span
:title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
class="channelicon fr mr6"
:class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
></span>
</span>
<p class="lheigth0">
<span class="evl-right">{{ singleInfo.sex}}</span>
<span class="evl-right">{{ singleInfo.age }}</span>
<span :title="singleInfo.cardNo">{{ singleInfo.cardNo | formatCardName }}</span></p>
<p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
<div class="singelinfo-cost">
<div class="singelinfo-costitem">
<p>{{ singleInfo.costFee }}</p>
<p>消费总额</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.costTimes }}</p>
<p>消费次数</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.lastCost }}</p>
<p>最近消费</p>
</div>
</div>
</div>
</div>
<div class="singelinfo-jl mBottom20 mTop20">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
</div>
</div>
<span slot="reference" class="member-span"><img
class="tablecontent-cellimg mr6"
width="60"
height="60"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
></span>
</el-popover>
<User-info-card
:scopeData="scope.row"
@showSingleInfo="showSingleInfo(scope.row.memberId)"
@linkDetail="linkDetail(scope.row.memberId)"
:singleInfo="singleInfo"
></User-info-card>
<span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
</div>
<span v-else-if="item == 'grade'">{{ scope.row.gradeName ? scope.row.gradeName : '-' }}</span>
......@@ -370,67 +311,12 @@
v-if="item == 'name'"
class="tablecontent-cell"
@click="linkDetail(scope.row.memberId)">
<el-popover
placement="top-start"
width="400"
height="180"
trigger="hover"
@show="showSingleInfo(scope.row.memberId)">
<div class="pointer">
<div class="singelinfo">
<div class="singelinfo-img"><img
width="100"
height="100"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : './static/img/default.png'"
alt=""
></div>
<div class="singelinfo-content pLeft10 pRight10">
<span class="lheigth0">{{ scope.row.memberName }}
<span
:title="singleInfo.status == 0 ? '取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'"
class="channelicon fr"
:class="singleInfo.status == 0 ? 'gzhiconcanclegray' : singleInfo.status == 1 ? 'gzhicon' : 'gzhicongray'"
></span>
<span
:title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''"
class="channelicon fr mr6"
:class="singleInfo.wxStatus == 0 ? 'xcxicongray' : singleInfo.wxStatus == 1 ? 'xcxicon' : ''"
></span>
</span>
<p class="lheigth0">
<span class="evl-right">{{ singleInfo.sex }} </span><span class="evl-right">{{ singleInfo.age }} </span><span :title="singleInfo.cardNo">{{ singleInfo.cardNo | formatCardName }}</span></p>
<p class="lheigth0"><span>{{ singleInfo.mainStoreName }}</span></p>
<div class="singelinfo-cost">
<div class="singelinfo-costitem">
<!-- 调整 跑数据的时候取错了 这里调换一下 -->
<p>{{ singleInfo.costFee }}</p>
<p>消费总额</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.costTimes }}</p>
<p>消费次数</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.lastCost }}</p>
<p>最近消费</p>
</div>
</div>
</div>
</div>
<div class="singelinfo-jl mBottom20 mTop20">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfmarket }})</a>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.couponCount }})</a>
</div>
</div>
<span slot="reference" class="member-span"><img
class="tablecontent-cellimg mr6"
width="60"
height="60"
:src="scope.row.thirdImgUrl ? scope.row.thirdImgUrl : ''"
alt=""
></span>
</el-popover>
<User-info-card
:scopeData="scope.row"
@showSingleInfo="showSingleInfo(scope.row.memberId)"
@linkDetail="linkDetail(scope.row.memberId)"
:singleInfo="singleInfo"
></User-info-card>
<span class="fix-block">{{ scope.row.memberName | formatMember }}</span>
</div>
<span v-else-if="item == 'grade'">{{ scope.row.gradeName }}</span>
......
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