caimei-distribution-www/src/views/ins-intention-report/index.vue

<template>
  <div class="ins-report">
    <nav-bar title="机构意向订单报备" @click-left="$router.back()">
      <template>
        <search-head @handlerSelect="handlerSelect" @onSearch="onSearch" />
      </template>
    </nav-bar>
    <div class="report-list" v-for="item in dataList" :key="item.id">
      <order-report-card
        :style="{
          padding: isShowReportMember ? '13.3vw 3.2vw 5.3vw 3.2vw' : '5.3vw 3.2vw',
        }"
        :odRpCd="item.cmReportingClub"
        :isTabImg="true"
      >
        <template #InsUsername="{ username }" v-if="isShowReportMember">
          <div class="name">成员：{{ username.linkMan }}</div>
        </template>
        <template #card-foot="{ data }">
          <div class="examine">
            <div>审核状态：<span style="color: #333333">{{ item.auditStatus | isAuditStatus }}</span></div>
            <div>锁定状态：<span style="color: #ff9100">{{ data.lockStatus | isLockStatus }}</span></div>
          </div>
          <div v-if="active === 0">
            <div class="change-btn" v-if="isReportAuditStatus(item.auditStatus) && !isReportDeal(data.orderStatus)">
              <van-button @click="handlerPlaceOrder(item.cmReportingClub)">下单</van-button>
              <van-button @click="handlerDetail(item)">查看详情</van-button>
            </div>
            <div class="detail-btn" v-else>
              <van-button @click="handlerDetail(item)">查看详情</van-button>
            </div>
          </div>
        </template>
      </order-report-card>
    </div>
    <bottom-detector
      :loadingMore="hasNextPage"
      :noMore="!hasNextPage"
      @arriveBottom="getMoreInfo"
    />
    <div class="to-report" v-if="active === 0">
      <van-button color="#FF5B00" @click="$router.push('/ins-intention-add')"
        >去报备</van-button
      >
    </div>
  </div>
</template>

<script>
import { insIntentionReportList } from '../../api/userApi/ins-intention-report'
import reportStatus from './mixins/index'
import SearchHead from './components/search-head'
export default {
  components: { SearchHead },
  mixins: [reportStatus],
  data () {
    return {
      formData: {
        pageNo: 1,
        pageSize: 10,
        clubName: ''
      },
      active: 0,
      showTips: true,
      dataList: [],
      hasNextPage: false
    }
  },
  computed: {
    isShowReportMember () {
      return this.$store.getters.isManage && this.active !== 0
    }
  },
  mounted () {
    this.getInsIntentionReportList(this.active)
    this.initAppMessageShareData()
  },
  methods: {
    tipsHidden (val) {
      this.showTips = val
    },
    getMoreInfo () {
      this.formData.pageNo += 1
      this.getInsIntentionReportList(this.active)
    },
    handlerSelect ($event) {
      this.active = $event
      this.dataList = []
      this.formData.pageNo = 1
      this.getInsIntentionReportList($event)
    },
    onSearch ($event) {
      this.formData.clubName = $event
      this.getInsIntentionReportList(this.active)
    },
    handlerDetail ($event) {
      window.location.href = `/ins-intention-detail?id=${$event.id}&reference=1`
    },
    handlerPlaceOrder ($event) {
      window.location.href = `/goods-detail?productId=${$event.productId}&typeId=0&isLock=1&cId=${$event.id}`
    },
    async getInsIntentionReportList ($event) {
      const j = $event === 0 ? { id: this.$store.getters.userInfo.id } : { parentId: this.$store.getters.userInfo.id }
      const form = {
        ...this.formData,
        ...j
      }
      const { results: data, hasNextPage } = await insIntentionReportList(form)
      this.hasNextPage = hasNextPage
      this.dataList = [...data]
    },
    // 分享当前页面
    initAppMessageShareData () {
      this.$wxReady((wx) => {
        // 需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: '分销商城', // 分享标题
          desc: '分销商城', // 分享描述
          link: `${process.env.VUE_APP_DATA_API}intention-confirm?id=${this.resultInfo.cmReportingClub.id}&image=${this.$store.getters.userInfo.image}&linkMan=${this.$store.getters.userInfo.linkMan}&distributionId=${this.$store.getters.userInfo.id}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
          imgUrl: `${process.env.VUE_APP_DATA_API}favicon.png`,
          success: () => {
          },
          fail: () => {
            if (process.env.NODE_ENV === 'production') {
              window.location.reload()
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ins-report {
  padding-bottom: 17.3vw;
  min-height: 100vh;
  position: relative;
}
.report-list {
  padding: 2.4vw;
  .name {
    position: absolute;
    left: 0;
    top: 2vw;
    padding: 0.5vw 2.6vw 0.5vw 3.5vw;
    font-size: 2.8vw;
    color: #fff;
    line-height: 6.9vw;
    text-align: center;
    background: #ff5b00;
    border-top-right-radius: 1.2vw;
    border-bottom-right-radius: 1.2vw;
  }
  .examine {
    @include display-flex-between;
    font-size: 3.7vw;
    color: #999999;
    margin-bottom: 6vw;
  }
  .detail-btn {
    width: 100%;
    @include display-flex-center;
    ::v-deep .van-button {
      width: 86.4vw;
      height: 13vw;
      border-radius: 1.2vw;
    }
  }
  .change-btn {
    width: 100%;
    @include display-flex-between;
    ::v-deep .van-button {
      width: 40vw;
      height: 13vw;
      border-radius: 1.2vw;
    }
  }
}
.to-report {
  @include display-flex-center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 2vw 0 7vw 0;
  background: #fff;
  ::v-deep .van-button {
    width: 86.4vw;
    height: 13vw;
    border-radius: 1.2vw;
  }
}
</style>