|
|
@@ -0,0 +1,457 @@
|
|
|
+<template>
|
|
|
+ <div class="noVisit">
|
|
|
+ <div class="header">
|
|
|
+ <van-nav-bar class="navBar" title="建店" left-arrow @click-left="onClickLeft" />
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <van-collapse v-model="activeName" accordion @change="collapseCange">
|
|
|
+ <van-collapse-item v-for="(val, key, ind) in list" :key="ind" :name="key">
|
|
|
+ <template #title>
|
|
|
+ <div class="title">{{ key | storeType }}</div>
|
|
|
+ <div class="num">{{ val.storeNum }}家</div>
|
|
|
+ </template>
|
|
|
+ <div class="itemContent">
|
|
|
+ <template v-if="val.storeList && val.storeList.length">
|
|
|
+ <div class="item" v-for="(item, index) in val.storeList" :key="index">
|
|
|
+ <van-cell>
|
|
|
+ <div class="card">
|
|
|
+ <div></div>
|
|
|
+ <div class="title" style="padding-right: 74px">
|
|
|
+ <span class="btn" :data-clipboard-text="item.storeCode">
|
|
|
+ <span>{{ item.storeName }}</span>
|
|
|
+ (<span style="color: #0057ba">{{ item.storeCode }}</span
|
|
|
+ >)
|
|
|
+ <van-icon
|
|
|
+ :name="require('@/assets/paste.png')"
|
|
|
+ color="#ee0a24"
|
|
|
+ size="20"
|
|
|
+ style="top: 6px; margin-left: 4px" />
|
|
|
+ </span>
|
|
|
+ <!-- validFlag: 0正常门店，1无效门店，2临时门店 -->
|
|
|
+ <span
|
|
|
+ v-if="item.validFlag == 2"
|
|
|
+ style="
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 100px;
|
|
|
+ width: 20px;
|
|
|
+ text-align: center;
|
|
|
+ color: orange;
|
|
|
+ font-weight: normal;
|
|
|
+ "
|
|
|
+ >临</span
|
|
|
+ >
|
|
|
+ <!-- "approvalStatus": 1:已结案;0:未结案， -->
|
|
|
+ <!-- "processApprovalStatus": 审批状态（0=未提交，1=已提交待审核，2=审批通过，3=审批拒绝） -->
|
|
|
+ <template v-if="item.approvalStatus == 0 && item.validFlag == 0">
|
|
|
+ <span class="statusIcon submit" v-if="item.processApprovalStatus == 1"
|
|
|
+ >已提交</span
|
|
|
+ >
|
|
|
+ <span class="statusIcon noSubmit" v-if="item.processApprovalStatus == 0"
|
|
|
+ >未提交</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <van-button
|
|
|
+ type="info"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ class="centerBtn ctns"
|
|
|
+ @click="storeDetailFn(item.storeId)"
|
|
|
+ >客户信息<van-icon name="arrow"
|
|
|
+ /></van-button>
|
|
|
+ <div class="info" style="position: relative">
|
|
|
+ 联系人：{{ item.contactName }}
|
|
|
+ <div
|
|
|
+ style="position: absolute; bottom: 0px; right: 0px"
|
|
|
+ v-if="item.storeLabels">
|
|
|
+ <el-popover
|
|
|
+ popper-class="zpover zpover6"
|
|
|
+ placement="bottom"
|
|
|
+ trigger="click">
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ 本店{{ timeData }}下单SKU数：<a
|
|
|
+ @click="linkList(item)"
|
|
|
+ style="text-decoration: underline"
|
|
|
+ >点击查看详情</a
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="visitStoreIco"
|
|
|
+ v-if="item.storeLabels.zysslNums"
|
|
|
+ style="background-color: #fff; position: relative"
|
|
|
+ slot="reference">
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0.2px;
|
|
|
+ width: 22px;
|
|
|
+ margin: 0;
|
|
|
+ margin-left: 3.6px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ ">
|
|
|
+ {{ item.storeLabels.zysslNums }}
|
|
|
+ </p>
|
|
|
+ <van-icon :name="ord" size="26" />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ popper-class="zpover zpover5"
|
|
|
+ placement="bottom"
|
|
|
+ width="200"
|
|
|
+ trigger="click">
|
|
|
+ <div v-if="item.storeLabels">
|
|
|
+ <p>已参加:</p>
|
|
|
+ <p v-for="tt in (item.storeLabels.targetOne + '').split(';')">
|
|
|
+ {{ tt }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="visitStoreIco"
|
|
|
+ v-if="item.storeLabels.targetOne"
|
|
|
+ style="background-color: #fff"
|
|
|
+ slot="reference">
|
|
|
+ <van-icon :name="targetOne" size="26" />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ popper-class="zpover"
|
|
|
+ placement="bottom"
|
|
|
+ width="200"
|
|
|
+ trigger="click"
|
|
|
+ content="同城店近60天未下单">
|
|
|
+ <div
|
|
|
+ v-if="item.storeLabels.fxNoOrder"
|
|
|
+ class="visitStoreIco"
|
|
|
+ style="background-color: #fff"
|
|
|
+ slot="reference">
|
|
|
+ <van-icon :name="order60" size="26" />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ popper-class="zpover"
|
|
|
+ placement="bottom"
|
|
|
+ width="200"
|
|
|
+ trigger="click"
|
|
|
+ content="金牌店近30天未下单">
|
|
|
+ <div
|
|
|
+ v-if="item.storeLabels.noOrder"
|
|
|
+ class="visitStoreIco"
|
|
|
+ style="background-color: #fff"
|
|
|
+ slot="reference">
|
|
|
+ <van-icon :name="order" size="26" />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ popper-class="zpover"
|
|
|
+ placement="bottom"
|
|
|
+ width="200"
|
|
|
+ trigger="click"
|
|
|
+ content="本店本月进过专业时时丽">
|
|
|
+ <div
|
|
|
+ v-if="item.storeLabels.zyssl"
|
|
|
+ class="visitStoreIco"
|
|
|
+ style="background-color: #ed5c68"
|
|
|
+ slot="reference">
|
|
|
+ 专
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ popper-class="zpover zpover1"
|
|
|
+ placement="bottom"
|
|
|
+ width="200"
|
|
|
+ trigger="click"
|
|
|
+ content="本店本月进过超好贴">
|
|
|
+ <div
|
|
|
+ v-if="item.storeLabels.chtczj"
|
|
|
+ class="visitStoreIco"
|
|
|
+ style="background-color: #0057ba"
|
|
|
+ slot="reference">
|
|
|
+ 超
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ popper-class="zpover zpover1 zpover1sb"
|
|
|
+ trigger="click"
|
|
|
+ :content="'本店本月已拜访过' + item.storeLabels.visitTimes + '次'">
|
|
|
+ <div
|
|
|
+ v-if="item.storeLabels.visitTimes && item.storeLabels.visitTimes > 0"
|
|
|
+ class="visitStoreIco"
|
|
|
+ slot="reference"
|
|
|
+ style="background-color: #fff; position: relative">
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ top: -2px;
|
|
|
+ margin: 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ ">
|
|
|
+ {{ item.storeLabels.visitTimes }}
|
|
|
+ </p>
|
|
|
+ <van-icon :name="ordernum" size="26" />
|
|
|
+ </div>
|
|
|
+ <el-table :data="item.userVisitTimesMap" border max-height="180px">
|
|
|
+ <el-table-column label="业务员" prop="userName" />
|
|
|
+ <el-table-column label="拜访次数" prop="visitTimes" />
|
|
|
+ </el-table>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ 类型：{{ item.storeCategoryName }}
|
|
|
+ <el-popover
|
|
|
+ popper-class="zpover zpover6"
|
|
|
+ placement="bottom-start"
|
|
|
+ trigger="click">
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ 本店经营品项指导:
|
|
|
+ <a @click="linkimg(item)" style="text-decoration: underline"
|
|
|
+ >点击查看</a
|
|
|
+ >
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <van-icon name="question-o" size="18" slot="reference" />
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <div class="info">联系电话：{{ item.telephone }}</div>
|
|
|
+ <div class="info">地址：{{ item.addressLine }}</div>
|
|
|
+ <!-- 分销店 -->
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ item.sfaStoreType &&
|
|
|
+ item.sfaStoreType.type == 'fxd' &&
|
|
|
+ item.sfaStoreChainsContactList
|
|
|
+ ">
|
|
|
+ <div class="info">
|
|
|
+ 经销商：
|
|
|
+ <div
|
|
|
+ class="TCFXListItem"
|
|
|
+ v-for="(item, index) in item.sfaStoreChainsContactList">
|
|
|
+ <el-popover
|
|
|
+ popper-class="zpover zpoverStoreztype"
|
|
|
+ placement="bottom-start"
|
|
|
+ trigger="click">
|
|
|
+ <div>
|
|
|
+ <div>{{ item.chainCode }}</div>
|
|
|
+ <div>{{ item.chainName }}</div>
|
|
|
+ </div>
|
|
|
+ <div slot="reference" :key="index">
|
|
|
+ {{ item.categoryDescribe }}
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="info">经销商：{{ item.chainName }}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else><div style="text-align: center">暂无数据</div></template>
|
|
|
+ </div>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { selectUserStoreNoVisits } from '@/api/index';
|
|
|
+import { getPosition, getTicketFun } from '@/utils/TXApiFun';
|
|
|
+import { mapState } from 'vuex';
|
|
|
+import store from '@/store';
|
|
|
+export default {
|
|
|
+ name: 'unCreateStore',
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ activaTypeStore: (state) => state.user.activaTypeStore,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: '',
|
|
|
+ list: {},
|
|
|
+ TXPiont: {}, //腾讯定位数据
|
|
|
+ TXisBD: {}, // 腾讯定位数据转百度
|
|
|
+ activatStoreVal: {}, //当前点击门店数据
|
|
|
+ visitRoutePath: '', //拜访页面路径
|
|
|
+ clickIsFlage: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ storeType(value) {
|
|
|
+ let type = '';
|
|
|
+ if (value == 'keKong') {
|
|
|
+ type = '可控店';
|
|
|
+ } else if (value == 'jinPai') {
|
|
|
+ type = '金牌店';
|
|
|
+ } else if (value == 'TuLiao') {
|
|
|
+ type = '同城分销-涂料店';
|
|
|
+ } else if (value == 'QiTa') {
|
|
|
+ type = '同城分销-其他店';
|
|
|
+ }
|
|
|
+ return type;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 授权
|
|
|
+ getTicketFun().then(() => {
|
|
|
+ // 获取定位
|
|
|
+ getPosition()
|
|
|
+ .then((res) => {
|
|
|
+ let { TXisBD } = res;
|
|
|
+ this.getList(TXisBD);
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.$dialog.alert({
|
|
|
+ message: error,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.activeName = this.activaTypeStore || '';
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ collapseCange(value) {
|
|
|
+ store.dispatch('setActivaTypeStore', value);
|
|
|
+ },
|
|
|
+ getList(TXisBD) {
|
|
|
+ selectUserStoreNoVisits({
|
|
|
+ lat: TXisBD.lat,
|
|
|
+ lon: TXisBD.lon,
|
|
|
+ }).then((res) => {
|
|
|
+ this.list = res.data;
|
|
|
+ console.log(this.list);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ storeDetailFn(id) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/storeDetail',
|
|
|
+ query: { id: id },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onClickLeft() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.noVisit {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ /* overflow-y: auto; */
|
|
|
+ .content {
|
|
|
+ padding: 8px 10px;
|
|
|
+ .item {
|
|
|
+ padding: 8px 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ background: #fff;
|
|
|
+ .van-cell__right-icon {
|
|
|
+ height: 144px;
|
|
|
+ line-height: 144px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .van-cell {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909090;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .visitStoreIco {
|
|
|
+ float: left;
|
|
|
+ float: left;
|
|
|
+ width: 26px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #ffba13;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 100%;
|
|
|
+ margin-left: 14px;
|
|
|
+ line-height: 26px;
|
|
|
+ height: 26px;
|
|
|
+ }
|
|
|
+ .centerBtn {
|
|
|
+ margin: 0 auto 10px;
|
|
|
+ display: block;
|
|
|
+ width: 92%;
|
|
|
+ color: #0057ba;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 0 6px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ .ctns {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ right: 12px;
|
|
|
+ width: 74px;
|
|
|
+ }
|
|
|
+ .statusIcon {
|
|
|
+ padding: 3px;
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0 3px;
|
|
|
+ color: #fff;
|
|
|
+ display: inline-block;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 16px;
|
|
|
+ vertical-align: -1px;
|
|
|
+ }
|
|
|
+ .submit {
|
|
|
+ background: #ffba13;
|
|
|
+ }
|
|
|
+ .noSubmit {
|
|
|
+ background: #f11818;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-collapse-item {
|
|
|
+ border-bottom: 1px solid #dcdcdc;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.noVisit {
|
|
|
+ .van-cell__title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .num {
|
|
|
+ color: #909090;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-collapse-item__wrapper {
|
|
|
+ border-top: 1px solid #dcdcdc;
|
|
|
+ }
|
|
|
+ .van-collapse-item__title--expanded {
|
|
|
+ position: sticky;
|
|
|
+ top: 0px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .van-collapse-item__content {
|
|
|
+ background-color: unset;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
