jsm-mall-h5-front/src/packageMine/pages/coreLssuedFile/detail.vue

<template>
  <view>
    <view class="page_top">
      <view
        v-for="(v, i) in dataList.filter(item => item.type == 2)"
        :key="i"
        :class="{
          active: i == current,
          tage: true
        }"
        @click="changeFn(i)"
      >
        数据{{ i + 1 }}
      </view>
    </view>
    <view class="list">
      <view class="list_row" v-for="(v, i) in list" :key="i">
        <view class="list_title"> {{ v.title }}: </view>
        <view class="list_right">
          {{ v.value }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/common/utils/util'
export default {
  data() {
    return {
      items: [
        '选项1',
        '选项2',
        '选项3',
        '选项3',
        '选项3',
        '选项3',
        '选项3',
        '选项3',
        '选项3',
        '选项3',
        '选项3',
        '选项3',
        '选项3',
        '选项3'
      ],
      current: 0,
      id: '',
      dataList: [],
      titleList: [],
      contentList: [],
      list: []
    }
  },
  computed: {
    ...mapState(['userInfo', 'isLogin', 'userId'])
  },
  onLoad(options) {
    this.id = options.id
  },
  mounted() {
    this.getData()
  },
  methods: {
    //切换数据
    changeFn(index) {
      this.current = index
      this.contentList = []
      for (let item in this.dataList?.filter(item => item.type == 2)?.[index]) {
        if (item.indexOf('field') !== -1) {
          this.contentList.push(this.dataList?.filter(item => item.type == 2)?.[index]?.[item])
        }
      }
      let list = []
      for (let i = 0; i < this.titleList.length; i++) {
        let obj = {
          title: this.titleList[i],
          value: this.contentList[i]
        }
        list.push(obj)
      }
      this.list = list
    },
    //获取数据
    async getData() {
      this.$api
        .get('/worker/comlist/record', {
          comListId: this.id,
          workerNumber: (await getUserInfo()).workerNumber
        })
        .then(({ data }) => {
          this.dataList = data
          for (let value in data[0]) {
            if (value.indexOf('field') !== -1) {
              this.titleList.push(data[0][value])
            }
          }
          this.changeFn(this.current)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  box-sizing: border-box;
  border-bottom: 2px solid #0081fd;
  background: #ff0000;
}

.page_top::-webkit-scrollbar {
  display: none;
}

.page_top {
  height: 88rpx;
  width: 750rpx;
  background-color: #fff;
  overflow-x: auto;
  white-space: nowrap;

  .tage {
    display: inline-block;
    width: 120rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
  }
}

.list {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding: 20rpx;

  // .list_left {
  // 	display: inline-block;
  // 	width: 140rpx;

  // 	// width: 120rpx;
  // 	// height: 100rpx;
  // 	.list_title {

  // 		line-height: 50rpx;
  // 		color: #909090;
  // 		border-bottom: 1px solid #f1f1f1;
  // 	}
  // }

  // .list_right {
  // 	display: inline-block;
  // 	width: 520rpx;

  // 	.list_content {
  // 		padding-left: 20rpx;
  // 		line-height: 50rpx;
  // 		color: #101010;
  // 		border-bottom: 1px solid #f1f1f1;
  // 	}
  // }
}

.list_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  line-height: 50rpx;
  border-bottom: 2rpx solid #f1f1f1;

  .list_title {
    color: #ff0000;
  }

  .list_right {
    color: #101010;
    padding-left: 20rpx;
  }
}
</style>