jsm-mall-h5-front/src/packageMine/pages/myWebsit.vue

<template>
  <view style="width: 100%; height: 100vh; background: rgb(247, 248, 255)">
    <zj-page-container>
      <view class="toubuyangs">
        <view class="toubuyangsTab">
          <view class="toubuyangsTabItem" @click="tabQiehuan(0)">
            <view>未入驻</view>
            <view :class="{ hengxian: true, xuanzhong: tab == 0 }"> </view>
          </view>
          <view class="toubuyangsTabItem" @click="tabQiehuan(1)">
            <view>待审核</view>
            <view :class="{ hengxian: true, xuanzhong: tab == 1 }"></view>
          </view>
          <view class="toubuyangsTabItem" @click="tabQiehuan(2)">
            <view>已入驻</view>
            <view :class="{ hengxian: true, xuanzhong: tab == 2 }"></view>
          </view>
        </view>
        <view class="search-container">
          <u-search shape="round" :showAction="false" placeholder="输入网点名称搜索" v-model="keyword"> </u-search>
        </view>
      </view>
      <zj-page-fill>
        <zj-page-layout
          :isScroll="true"
          :refresherTriggered="refresherTriggered"
          @refresherrefresh="refresherrefresh"
          @scrolltolower="scrolltolower"
        >
          <view class="list-container" v-if="showDataList.length > 0">
            <view class="mode" @click="navToPage(item)" v-for="(item, index) in showDataList" :key="index">
              <view class="flex_asb order">
                <view class="title"></view>
                <view class="status">{{
                  item.examineStatus == 'WAIT_WORKER'
                    ? '待师傅购买'
                    : item.examineStatus == 'POLICY_WAIT'
                    ? '保险待审核'
                    : item.examineStatus == 'OK'
                    ? '状态正常'
                    : item.examineStatus == 'FAIL'
                    ? '已驳回'
                    : item.examineStatus == 'EXPIRED'
                    ? '证件快过期'
                    : item.examineStatus == 'OVERDUE'
                    ? '证件已过期'
                    : item.examineStatus == 'STOP'
                    ? '已经离职'
                    : item.examineStatus == 'QUIT'
                    ? '已经离职'
                    : item.examineStatus == 'WAIT'
                    ? '入驻申请待审核'
                    : ''
                }}</view>
              </view>
              <view class="flex_asb" style="align-items: flex-start">
                <image class="img" src="/static/mine/workerEnter/order.png" mode="aspectFill"></image>
                <view class="content flex1">
                  <view class="flex_asb">
                    <view class="title">{{ item.name }}</view>
                  </view>
                  <view class="flex">
                    <view class="hui">地址</view>
                    <view class="text">{{ item.address || '无' }}</view>
                  </view>
                  <view class="flex_end">
                    <u-button
                      v-if="item.examineStatus == 'N' || item.examineStatus == 'FAIL'"
                      style="width: 160rpx; height: 60rpx; margin: 0"
                      shape="circle"
                      type="primary"
                      text="入驻"
                      @tap="goEnter(item)"
                    ></u-button>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <Loading :loadStatus="loadStatus" :dataList="dataList" />
          <zjDialogPicker
            ref="websitDialog"
            :isShow="isShowWebsitDialog"
            :multiple="false"
            :styleType="2"
            :title="'选择对应网点购买保险'"
            :list="baoxiandangqianxianxitishi"
            :keyName="'websitName'"
            @cancel="isShowWebsitDialog = false"
            @confirm="confirmWebsitDialog"
          >
          </zjDialogPicker>
        </zj-page-layout>
      </zj-page-fill>
      <view class="quanjuanniu" v-if="!!baoxiandangqianxianxitishi.length">
        <u-button text="去购买" shape="circle" type="primary" @click="isShowWebsitDialog = true"> </u-button>
      </view>
    </zj-page-container>
  </view>
</template>

<script>
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
import { getStorage } from '@/common/utils/storage.js'
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'
export default {
  components: {
    zjPageContainer,
    zjPageFill,
    zjDialogPicker
  },
  data() {
    return {
      tab: 0,
      dataList: [],
      refresherTriggered: false,
      loadStatus: 0,
      keyword: '',
      baoxiandangqianxianxitishi: [],
      isShowWebsitDialog: false
    }
  },
  onShow() {
    this.refreshLish()
  },
  computed: {
    userInfo() {
      return getStorage('user')
    },
    showDataList() {
      return this.dataList.filter(item => !!~item.name.indexOf(this.keyword))
    }
  },
  methods: {
    confirmWebsitDialog(e) {
      this.isShowWebsitDialog = false
      this.$navToPage({
        url:
          '/packageEnter/pages/insurance/myInsuranceBuy/index?websitId=' +
          this?.baoxiandangqianxianxitishi?.[e[0]]?.websitId
      })
    },

    async getList() {
      this.loadStatus = 1
      var { latitude, longitude } = await this.$getLocation()
      this.$api
        .get('/user/apply/websit', {
          lat: latitude,
          lng: longitude,
          ...(() => {
            if (this.tab > 0) {
              return {
                examineStatus: [['WAIT'], ['OK', 'EXPIRED', 'EXPIRED', 'STOP', 'QUIT']][this.tab - 1]
              }
            } else {
              return {
                isAll: true
              }
            }
          })()
        })
        .then(res => {
          this.loadStatus = 2
          this.refresherTriggered = false
          this.dataList = res.data
        })
    },

    navToPage(url) {
      this.$navToPage({
        url
      })
    },

    // 触发下拉刷新
    refresherrefresh(e) {
      this.refresherTriggered = true
      this.refreshLish()
    },

    refreshLish() {
      this.dataList = []
      this.getList()
    },

    goEnter(item) {
      this.$navToPage({
        url: '/packageMine/pages/workerEnter?websitName=' + item.name + '&websitId=' + item.websitId
      })
    },

    tabQiehuan(index) {
      this.tab = index
      this.dataList = []
      this.getList()
    },

    // 滚动到底部
    scrolltolower(e) {},

    // 触发下拉刷新
    async refresherrefresh(e) {
      this.refresherTriggered = true
      this.dataList = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  background: #ffffff;
  padding: 20rpx;
  ::v-deep .u-search {
    height: 60rpx;
    input {
      background: #f7f8ff !important;
    }
    .u-search__content {
      background: #f7f8ff !important;
      height: 60rpx;
    }
  }
}
.quanjuanniu {
  width: 100%;
  height: auto;
  padding: 30rpx;
  box-sizing: border-box;
}
.neirongquyu {
  width: 100%;
  height: auto;
  padding: 30rpx 30rpx 15rpx 30rpx;
  box-sizing: border-box;
  .zhegeshineirong {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    .neirongbiaot {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      margin-bottom: 40rpx;
      text {
        font-size: 32rpx;
        font-weight: 700;
      }
    }
    .neironglieju {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      margin-bottom: 30rpx;
      text {
        font-size: 28rpx;
      }
    }
    .neironghengxin {
      width: 100%;
      border-bottom: 1rpx solid #aaa;
      margin-bottom: 30rpx;
    }
    .neironganniuqu {
      widows: 100%;
      text-align: right;
    }
  }
}
.toubuyangs {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 30rpx 30rpx 15rpx 30rpx;
  .toubuyangsTab {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .toubuyangsTabItem {
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .hengxian {
        margin-top: 20rpx;
        width: 100rpx;
      }
      .xuanzhong {
        border-bottom: 4rpx solid #000;
      }
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.flex_asb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex_end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 30rpx;
}
.flex1 {
  flex: 1;
}
.list-container {
  box-sizing: border-box;
  padding: 0 30rpx;
}
.mode {
  @include zj-card;
  padding: 30rpx 20rpx;
  margin-top: 30rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  .order {
    margin-bottom: 20rpx;
  }
  .content {
    width: 450rpx;
    .title {
      font-weight: bold;
      font-size: 30rpx;
    }
    .text,
    .hui {
      font-size: 28rpx;
      margin-top: 16rpx;
    }
    .hui {
      color: #999999;
      margin-right: 20rpx;
    }
  }
  .status {
    font-size: 28rpx;
    color: #0379ff;
  }
  .zhihui {
    .text,
    .hui,
    .title,
    .status {
      color: #999999 !important;
    }
  }
  .img {
    width: 100rpx;
    height: 100rpx;
    margin-right: 30rpx;
  }
}
.search-container {
  background: #ffffff;
  padding: 20rpx;
  ::v-deep .u-search {
    height: 60rpx;
    input {
      background: #f7f8ff !important;
    }
    .u-search__content {
      background: #f7f8ff !important;
      height: 60rpx;
    }
  }
}
</style>