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

<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :isScroll="true" :refresherTriggered="refresherTriggered" @refresherrefresh="refresherrefresh">
    <template slot="header">
      <view class="search-container">
        <u-search shape="round" :showAction="false" placeholder="输入网点名称搜索" v-model="keyword"> </u-search>
      </view>
    </template>
    <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 == 'OK'
              ? '已入驻'
              : item.examineStatus == 'FAIL'
              ? '驳回'
              : item.examineStatus == 'WAIT'
              ? '待审核'
              : item.examineStatus == 'N'
              ? '未申请入驻'
              : ''
          }}</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" />
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageMine/pages/myWebsit`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  data() {
    return {
      refresherTriggered: false,
      loadStatus: 2,
      pageNum: 1,
      dataList: [],
      keyword: "",
    }
  },

  onShow() {
    this.refreshLish();
  },

  computed: {
    showDataList() {
      return this.dataList.filter(item=>!!~item.name.indexOf(this.keyword))
    }
  },

  methods: {
    async getList() {
      // var { latitude, longitude } = await this.$getLocation()
      this.$api.get('/user/apply/websit', {
        isAll: true,
        // lat:latitude,
        // lng:longitude
      }).then(res => {
        this.refresherTriggered = false;
        this.dataList = res.data
      })
    },

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

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

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

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

// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },
  onLoad(pam) {
    this.pam = pam;
  }
}
// #endif
</script>

<style lang="scss" scoped>
.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>