lifeline_h5/src/pages/citySafeNotic/index.vue

<template>
  <!-- 页面全局配置 -->
  <div class="pageconfig">
    <!--vuetop-->
    <van-tabs v-model="active" color="rgba(78, 135, 255, 1)" @change="getTabs">
      <van-tab title="全部" :name="`全部`"></van-tab>
      <van-tab title="待阅" :name="0"></van-tab>
      <van-tab title="已阅" :name="1"></van-tab>
    </van-tabs>
    <div class="morebox1 response">
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        :immediate-check="false"
        :offset="10"
        finished-text="加载完成"
        @load="onLoadList"
      >
        <div
          class="morebox4 response"
          v-for="item in noticList"
          @click="toDetail(item.id)"
        >
          <div class="text5">
            {{ item.title }}
          </div>
          <div class="flex6 response flex justify-between">
            <div class="text7">
              提交时间：{{ $common.transBaseDateTime(item.createTime) }}
            </div>
            <div class="text8" v-if="item.isRead == 1">已阅</div>
            <div class="text8" v-else style="color: rgba(226, 81, 0, 1)">
              待阅
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <!--vuebottom-->
  </div>
</template>
<script>
import { listForApp } from '@/service/api_company.js'
import { Toast } from 'vant'
import { getInitialCode, getUserInfo, fetchUserAccessToken } from '@/common/js/api_lingxi'
export default {
    data() {
        return {
            active: '',
            isUpLoading: false,
            isDownLoading: false,
            upFinished: false,
            noticList: [],
            search: {
                pageNum: 1,
                pageSize: '10',
                createdBy: 'smx_h5_userId'
            },
            appId: 'B1334087658781568',
            requestCode: '',
            userAccessToken: ''
        }
    },
    mounted() {
        // console.log('this.$route.params',this.$route.params,this.$route.params.openId)
        // this.search.createdBy=this.$route.params.openId
        // this.getList()
        this.getInitCode()
    },
    methods: {
        async getInitCode() {
            getInitialCode().then((res) => {
                // alert('getInitialCode==>' + JSON.stringify(res))
                this.initCode = res.data.initCode
                // alert('initCode==>' + this.initCode)
                this.handleAuthorization()
            })
        },
        handleAuthorization() {
            // // alert(this.initCode)
            const _this = this
            ls.ready(function() {
                ls.userAuth({
                    appId: _this.appId // 从开放平台申请到的 appId
                }, function(res) {
                    // alert('res:' + JSON.stringify(res))
                    if (res.code === 200) {
                        // // alert('requestCode:' + res.data.requestCode)
                        const reqData = {
                            requestCode: res.data.requestCode
                        }
                        fetchUserAccessToken(reqData).then(res => {
                            // alert('获取用户访问令牌——：' + res)
                            getUserInfo({ userAccessToken: res }).then((res) => {
                                // alert('用户信息——：' + JSON.stringify(res))
                                // alert('用户信息2——：' + res.openId)
                                // eslint-disable-next-line standard/object-curly-even-spacing
                                // _this.$router.push({ name: urlname, params: { openId: res.openId, realName: res.realName }})
                                // Toast('登录成功')

                                _this.search.createdBy = res.openId
                                // 执行下一步
                                _this.getList()
                            }).catch(e => {
                                Toast(e)
                            })
                        })
                    } else if (res.code === 9005) {
                        // 认证失败或登录失败
                        // console.log('认证失败或登录失败')
                        // alert('认证失败或登录失败')
                        // 如果在此处调用ls.close()关闭页面,需要延迟0.5秒执行，否则ls.close()会无效。
                    } else {
                        // 其余情况
                        // alert('userAuth error')
                        // 如果在此处调用ls.close()关闭页面,需要延迟0.5秒执行，否则ls.close()会无效。
                    }
                })
            })

            // 失败回调
            ls.error(function(res) {
                // 错误处理
                // alert('失败回调')
            })

            ls.config({
                debug: false, // 开发时建议把调试模式开启
                appId: this.appId, // 从开放平台申请到的 appId
                initCode: this.initCode // 从业务方自己后台请求到 initCode
            })
        },
        // ===上面是灵锡用的===========================================================================
        getTabs(e) {
            console.log(e)
            this.search.isRead = e == '全部' ? '' : e
            this.search.pageNum = 1
            this.isUpLoading = false
            this.isDownLoading = false
            this.upFinished = false
            this.noticList = []
            this.getList()
        },
        toDetail(id) {
            // alert('toDetail:' + id + '==>' + this.search.createdBy)

            // eslint-disable-next-line standard/object-curly-even-spacing
            this.$router.push({ name: 'citySafeNoticDetail', params: { openId: this.search.createdBy, id: id }})
        },
        async getList() {
            listForApp(this.search).then((res) => {
                if (res.data.rows.length) {
                    if (this.noticList.length >= res.data.total) {
                        this.upFinished = true
                    } else {
                        this.isDownLoading = false
                        this.noticList.push(...res.data.rows)
                        this.isUpLoading = false
                    }
                } else {
                    this.noticList = []
                    this.isDownLoading = false
                    this.isUpLoading = false
                    this.upFinished = true
                }
            })
        },
        onLoadList() {
            this.search.pageNum++
            this.isDownLoading = false
            this.getList()
        }
    }
}
</script>

<style lang="scss">
.pageconfig {
  width: 100%;
}

/**pagedomcss**/
.justify-end {
  justify-content: end;
}
.morebox1 {
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  margin-top: 24px;
  padding: 20px 0 20px 0;
}

.flex2 {
  width: 100%;
  align-items: flex-start;
}

.text3 {
  color: rgba(13, 47, 118, 1);
  padding-right: 40px;
  font-size: 36px;
}

.morebox4 {
  width: 100%;
  width: calc(100% - 64px);
  font-size: 34px;
  background-color: rgba(245, 247, 250, 1);
  margin: 24px 32px;
  padding: 24px;
  border-radius: 24px;
  box-sizing: border-box;
}

.text5 {
  color: rgba(51, 51, 51, 1);
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(230, 230, 230, 1);
}

.flex6 {
  width: 100%;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}

.text7 {
  color: rgba(136, 136, 136, 1);
}

.text8 {
  color: rgba(45, 140, 240, 1);
}
</style>