storevisit-ui-mobile/src/views/home/hintTabPage/unCreateStore.vue

<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 }}&nbsp;
                      <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() {
    this.toastLoading(0, '加载中...', true);
    // 授权
    getTicketFun()
      .then(() => {
        // 获取定位
        getPosition()
          .then((res) => {
            let { TXisBD } = res;
            this.getList(TXisBD);
          })
          .catch((error) => {
            this.$dialog.alert({
              message: error,
            });
          });
      })
      .catch(() => {
        this.toastLoading().clear();
      });
    this.activeName = this.activaTypeStore || '';
  },
  methods: {
    collapseCange(value) {
      store.dispatch('setActivaTypeStore', value);
    },
    getList(TXisBD) {
      selectUserStoreNoVisits({
        lat: TXisBD.lat,
        lon: TXisBD.lon,
      })
        .then((res) => {
          this.toastLoading().clear();
          this.list = res.data;
          console.log(this.list);
        })
        .catch(() => {
          this.toastLoading().clear();
        });
    },
    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>