my_loan/htmldev/loan/src/views/partner/marketing/index.vue

<template>
  <div class="conatainer">
    <div class="header">
      <h2 class="title">您好，{{ userInfo.partnerName }}</h2>
      <p class="nav-wrap">
        <router-link
          :to="{path: '/partner/goods' + '?partnerId=' + userInfo.id + '&partnerName=' + userInfo.partnerName + '&partnerImgUrl=' + userInfo.partnerImgUrl}">
          <img src="./image/bg_xindai_tuiguang@2x.png" alt="">
        </router-link>
        <a href="javascript:;" @click="funJumpParterExplain">
          <img src="./image/bg_hehuoren_zhaomu@2x.png" alt="">
        </a>
      </p>
    </div>
    <div class="my-customer border-bottom-1px">
      <div class="top">
        <p class="label">我的客户</p>
        <p class="nav-wrap">
          <a href="javascript:;" :class="{'active': $route.name === 'partnerCustomer'}"
             @click="funJump('/partner')">客户</a>
          <a href="javascript:;" :class="{'active': $route.name === 'partnerAll'}"
             @click="funJump('/partner/business')">门店业务</a>
        </p>
      </div>
      <van-search
        :show-action="true"
        v-model="searChValue"
        @search="searchHandle"
        @clear="clearHandle"
        placeholder="输入姓名、手机号">
        <template #action>
          <span @click="searchHandle">搜索</span>
        </template>
      </van-search>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <Poster :posterBg="posterBg"
            :codeParams="codeParams"
            ref="myPoster"/>
  </div>
</template>

<script>
import { Search } from 'vant'
import Poster from '../poster'
import { mapGetters } from 'vuex'

export default {
  name: 'marketing',
  components: {
    'van-search': Search,
    Poster
  },
  data () {
    return {
      posterBg: require('./image/poster_partner_20221104.png'),
      codeParams: {
        canvasWidth: 668,
        canvasHeight: 1167,
        partnerImgUrl: '',
        partnerName: '',
        link: '',
        x: 106,
        y: 930,
        width: 185,
        height: 185,
        partnerLabelY: 885,
        partnerImgUrlY: 855
      }
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'partnerMine/userInfo'
    }),
    searChValue: {
      get () {
        let result = ''
        switch (this.$route.name) {
          case 'partnerCustomer':
            result = this.$store.getters['business/searchValueOfMyCustomer']
            break
          case 'partnerAll':
            result = this.$store.getters['business/searchValueOfPartner']
            break
        }
        return result
      },
      set (val) {
        switch (this.$route.name) {
          case 'partnerCustomer':
            this.$store.dispatch('business/setSearchValueOfMyCustomer', val)
            break
          case 'partnerAll':
            this.$store.dispatch('business/setSearchValueOfPartner', val)
            break
        }
      }
    }
  },
  methods: {
    funJumpParterExplain () {
      const { partnerImgUrl, partnerName, inviteCode } = this.userInfo
      this.$set(this.codeParams, 'partnerImgUrl', partnerImgUrl)
      this.$set(this.codeParams, 'partnerName', partnerName)
      this.$set(this.codeParams, 'link', `${location.origin}/partner/explain?inviteCode=${inviteCode}`)
      this.$nextTick(() => {
        this.$refs.myPoster.createQRCode()
      })
    },
    funJump (path) {
      this.$router.replace({ path: path })
    },
    searchHandle () {
      switch (this.$route.name) {
        case 'partnerCustomer':
          this.$store.dispatch('business/setIsSearchOfMyCustomer', 1)
          break
        case 'partnerAll':
          this.$store.dispatch('business/setIsSearchOfPartner', 1)
          break
      }
    },
    clearHandle () {
      this.searchHandle()
    }
  }
}
</script>

<style lang="scss" scoped>
.conatainer {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 0 22px;

  .title {
    width: 100%;
    padding-left: 24px;
    line-height: 33px;
    font-size: 24px;
    font-weight: 500;
    color: #333;
  }

  .nav-wrap {
    display: flex;
    align-items: center;
    padding-left: 17px;
    margin-top: 12px;

    a:nth-of-type(2) {
      margin-left: 18px;
    }
  }

  img {
    display: block;
    width: 163px;
    height: 88px;
  }
}

.my-customer {
  width: 100%;
  margin-bottom: 12px;
  background: #fff;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 40px 15px 24px;
    @include border-bottom-1px(#E0E0E0);
  }

  .label {
    line-height: 25px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }

  .nav-wrap {
    display: flex;
    align-items: center;
  }

  a {
    position: relative;
    left: 0;
    top: 0;
    padding: 0 9px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #333;

    &:nth-of-type(2) {
      margin-left: 27px;
    }

    &.active:after {
      position: absolute;
      left: 0;
      bottom: -2px;
      display: block;
      content: '';
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
      border-radius: 2px;
    }
  }
}

::v-deep .van-search {
  width: 327px;
  height: 40px;
  padding-left: 0;
  margin: 10px auto 11px;

  .van-search__content {
    border-radius: 20px;
    background: #F2F2F2;
  }

  .van-cell {
    align-items: center;
  }

  .van-icon-search {
    font-size: 22px;
    color: #DDDDDD;
  }

  .van-field__control {
    line-height: 17px;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    background: transparent;
    -webkit-text-fill-color: #333;
    opacity: 1;

    &::-webkit-input-placeholder {
      color: #999;
      -webkit-text-fill-color: #999;
      opacity: 1;
    }
  }
}
</style>