recycle-mobile/src/pages/profile/other/index.vue

<template>
  <view class="app-container">
    <u-sticky bgColor="#fff">
      <view class="tab-container">
        <u-tabs :list="tabList" :scrollable="false" @click="changeTab"></u-tabs>
      </view>
    </u-sticky>

    <!-- 产品话术 -->
    <view class="list-container" v-if="curTab === 1">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="openDetail(item.wordsTechniqueId)">
        <view class="title">{{item.wordsTechniqueName}}</view>
        <view class="row it2">
          <view class="label">品牌</view>
          <view class="value">{{item.brandName}}</view>
        </view>
        <view class="row it2">
          <view class="label">答案</view>
          <view class="value ellipsis-3">{{item.wordsTechniqueOverview}}</view>
        </view>
      </view>
    </view>

    <!-- 故障代码 -->
    <view class="list-container" v-if="curTab === 2">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="openDetail(item.faultId)">
        <view class="row">
          <view class="label">产品品牌</view>
          <view class="value">{{item.brandName}}</view>
        </view>
        <view class="row">
          <view class="label">显示代码</view>
          <view class="value">{{item.faultCode}}</view>
        </view>
        <view class="row">
          <view class="label">适用产品</view>
          <view class="value">{{item.categoryName}}</view>
        </view>
        <view class="row">
          <view class="label">故障原因</view>
          <view class="value ellipsis-3">{{item.faultWhy}}</view>
        </view>
        <view class="row">
          <view class="label">备注内容</view>
          <view class="value ellipsis-3">{{item.remark}}</view>
        </view>
      </view>
    </view>

    <!-- 说明书 -->
    <view class="list-container" v-if="curTab === 3">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="openDetail(item.instructionsId)">
        <view class="title">{{item.instructionsName}}</view>
        <view class="row">
          <view class="label">产品品牌</view>
          <view class="value">{{item.brandName}}</view>
        </view>
        <view class="row">
          <view class="label">产品型号</view>
          <view class="value">{{item.productCode}}</view>
        </view>
      </view>
    </view>

    <u-empty
      mode="data"
      :icon="require('@/static/common/empty_data.png')"
      v-if="loadStatus == 'nomore' && dataList.length < 1">
    </u-empty>
    <u-loadmore :status="loadStatus" v-else />

    <u-action-sheet
      :title="curTab | titleFilter"
      :closeOnClickOverlay="true"
      :show="isShowDetail"
      :round="10"
      @close="isShowDetail = false">
      <!-- 产品话术 -->
      <view class="detail-container" v-if="curTab === 1">
        <view class="row">
          <view class="label">品牌</view>
          <view class="value">{{detail.brandName}}</view>
        </view>
        <view class="row">
          <view class="label">产品类别</view>
          <view class="value">{{detail.categoryName}}</view>
        </view>
        <view class="row">
          <view class="label">关键字词</view>
          <view class="value">{{detail.entryName}}</view>
        </view>
        <view class="row">
          <view class="label">问题</view>
          <view class="value ellipsis">{{detail.wordsTechniqueName}}</view>
        </view>
        <view class="row">
          <view class="label">答案</view>
          <view class="value">{{detail.wordsTechniqueOverview}}</view>
        </view>
      </view>

      <!-- 故障代码 -->
      <view class="detail-container" v-if="curTab === 2">
        <view class="title">{{detail.wordsTechniqueName}}</view>
        <view class="row">
          <view class="label">产品品牌</view>
          <view class="value">{{detail.brandName}}</view>
        </view>
        <view class="row">
          <view class="label">显示代码</view>
          <view class="value">{{detail.faultCode}}</view>
        </view>
        <view class="row">
          <view class="label">适用产品</view>
          <view class="value">{{detail.categoryName}}</view>
        </view>
        <view class="row">
          <view class="label">产品型号</view>
          <view class="value">{{detail.productCode}}</view>
        </view>
        <view class="row">
          <view class="label">故障原因</view>
          <view class="value ellipsis-3">{{detail.faultWhy}}</view>
        </view>
        <view class="row">
          <view class="label">备注内容</view>
          <view class="value ellipsis-3">{{detail.remark}}</view>
        </view>
        <view class="row">
          <view class="label">解除条件</view>
          <view class="value">{{detail.removeConditions}}</view>
        </view>
      </view>

      <!-- 说明书 -->
      <view class="detail-container" v-if="curTab === 3">
        <view class="row">
          <view class="label">标题</view>
          <view class="value">{{detail.instructionsName}}</view>
        </view>
        <view class="row">
          <view class="label">产品品牌</view>
          <view class="value">{{detail.brandName}}</view>
        </view>
        <view class="row">
          <view class="label">产品型号</view>
          <view class="value">{{detail.productCode}}</view>
        </view>
      </view>
    </u-action-sheet>

  </view>
</template>

<script>
export default {
  filters: {
    titleFilter(val) {
      const MAP = {
        1: '产品话术',
        2: '故障代码',
        3: '说明书',
      }
      return MAP[val]
    }
  },

  data() {
    return {
      tabList: [
        { name: '产品话术', value: 1 },
        { name: '故障代码', value: 2 },
        { name: '说明书', value: 3 },
      ],
      curTab: 1,
      dataList: [],
      pageNum: 1,
      loadStatus: 'loadmore', // 加载前=loadmore，加载中=loading，没有数据=nomore

      isShowDetail: false,
      detail: {},
    }
  },

  onLoad() {
    this.getList();
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1;
    this.getList();
  },

  // 上拉加载
  onReachBottom() {
    this.getList(1);
  },

  methods: {
    // 获取列表
    getList(loadMore) {
      if(this.loadStatus == 'nomore' && loadMore)return;
      this.loadStatus = 'loadmore';
      if(!loadMore){
      	this.pageNum = 1;
      }else{
      	this.loadStatus = 'loading';
      }
      let url = '';
      if(this.curTab === 1) {
        url = '/personal/words-technique'
      }else if(this.curTab === 2) {
        url = '/personal/fault'
      }else if(this.curTab === 3) {
        url = '/personal/instruction'
      }
      this.$api.post(url, {
        pageNum: this.pageNum,
        pageSize: 10,
        accountCode: this.$store.getters.usercode,
      }).then(res => {
        let _list = res.data.records;
        let pageTotal = res.data.pages;
        if(this.pageNum >= pageTotal){
        	this.loadStatus = 'nomore';
        }
        if (_list.length) {
        	this.pageNum += 1;
        }
        if (loadMore) {
        	this.dataList = this.dataList.concat(_list);
        	this.loadStatus = 'loadmore';
        } else {
        	this.dataList = _list;
        }
      }).catch(res => {
        this.loadStatus = 'nomore';
      }).finally(res => {
        uni.stopPullDownRefresh();
      })
    },

    changeTab(item) {
      this.curTab = item.value;
      this.pageNum = 1;
      this.getList();
    },

    openDetail(id) {
      let url = '';
      let param = {};
      if(this.curTab === 1) {
        url = '/words-technique/detail';
        param = {wordsTechniqueId: id};
      }else if(this.curTab === 2) {
        url = '/fault/detail'
        param = {faultId: id};
      }else if(this.curTab === 3) {
        url = '/instructions/detail'
        param = {instructionsId: id};
      }
      this.$api.post(url, {
        source: 1,
        accountCode: this.$store.getters.usercode,
        ...param
      }).then(res => {
        this.detail = res.data;
        this.isShowDetail = true;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-bottom: 1px;
}

.list-container {
  padding: 20rpx 30rpx 0;
  .item {
    padding: 20rpx 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .title {
      font-size: 30rpx;
      font-weight: 500;
    }
    .row {
      display: flex;
      margin-top: 14rpx;
      &:first-child {
        margin-top: 0;
      }
      .label {
        font-size: 28rpx;
        color: #666666;
        flex-shrink: 0;
        width: 140rpx;
      }
      .value {
        font-size: 28rpx;
        color: #333333;
      }
      &.it2 {
        .label {
          width: 80rpx !important;
        }
      }
    }
  }
}

.detail-container {
  padding: 20rpx 30rpx 80rpx;
  text-align: left !important;
  .title {
    font-size: 30rpx;
    font-weight: 500;
  }
  .row {
    display: flex;
    margin-top: 14rpx;
    &:first-child {
      margin-top: 0;
    }
    .label {
      font-size: 28rpx;
      color: #666666;
      flex-shrink: 0;
      width: 140rpx;
    }
    .value {
      font-size: 28rpx;
      color: #333333;
    }
    &.it2 {
      .label {
        width: 80rpx !important;
      }
    }
  }
}
</style>