|
@@ -0,0 +1,177 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="page_top">
|
|
|
+ <view
|
|
|
+ :class="i === current ? 'active tage' : 'tage'"
|
|
|
+ v-for="(v, i) in dataList"
|
|
|
+ :key="i"
|
|
|
+ v-if="v.type === '2'"
|
|
|
+ @click="changeFn(i)"
|
|
|
+ >
|
|
|
+ 数据{{ i }}
|
|
|
+ </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'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ items: [
|
|
|
+ '选项1',
|
|
|
+ '选项2',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3',
|
|
|
+ '选项3'
|
|
|
+ ],
|
|
|
+ current: 1,
|
|
|
+ id: '',
|
|
|
+ dataList: [],
|
|
|
+ titleList: [],
|
|
|
+ contentList: [],
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo', 'isLogin', 'userId'])
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.id = options.id
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //切换数据
|
|
|
+ changeFn(index) {
|
|
|
+ this.current = index
|
|
|
+ this.contentList = []
|
|
|
+ for (let item in this.dataList[index]) {
|
|
|
+ if (item.indexOf('field') !== -1) {
|
|
|
+ this.contentList.push(this.dataList[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: this?.userInfo?.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(1)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.active {
|
|
|
+ border-bottom: 2px solid #0081fd;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|