warm_man/pages/Report/qrcode.vue

<template>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      bgColor="transparent"
      leftIconColor="#fff"
      :titleStyle="{color:'#fff'}"
  ></u-navbar>
  <view class="body-background">
    <u-image
        :show-loading="true"
        :src="staticImage.background"
        width="100%"
        height="420"
        radius="10"
        mode="widthFix"
        class="img"
    ></u-image>
  </view>
  <view class="app-wallpaper border-box row">
    <view class="qrcode-container col">
      <u-image
          :show-loading="true"
          :src="staticImage.qrcodeBackground"
          width="100%"
          height="auto"
          radius="10"
          mode="widthFix"
          class="img"
          :custom-style="{margin:'auto auto'}"
      ></u-image>
      <view class="qrcode-content row">
        <view class="qrcode-main">
          <u-image
              :show-loading="true"
              :src="staticImage.qrcode"
              width="360"
              height="360"
              radius="10"
              mode="widthFix"
              class="img"
              :custom-style="{flex:'0 0 100%'}"
          ></u-image>
          <u-text text="请扫码签到" size="32" color="#020B18" align="center" :custom-style="{marginTop:'96rpx'}"></u-text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      title: '党员报到码',
      loading: true,
      staticImage: {
        background: imghost + '/report-bg.png',
        qrcodeBackground: imghost + '/report-qrcode-bg.png',
        qrcode: imghost + '/report-qrcode.png',
      },
      user: {
        avatar: imghost + '/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685,
      },
      isTop: false,
      lists: [
        {
          id: 1,
          thumb: imghost + '/new-1.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true,
          type:1
        }, {
          id: 2,
          thumb: imghost + '/new-2.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true,
          type:1
        }, {
          id: 3,
          thumb: imghost + '/new-3.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”111开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: false,
          type:2
        },
      ],
      size: {
        height: 0,
      },
      content:'' +
          '<ul>' +
            '<li style="font-size:16px;color:#666666;line-height:1.5;">知理，就是懂得做人的道理，具备独立思考的能力。 </li>' +
            '<li style="font-size:16px;color:#666666;line-height:1.5;">知理的人，从书本中学习做人的道理，在实践中理解事物的发展规律。在学习知识、探寻真理的过程中，他们形成了自己的世界观和人生观，能够独立思考，不会人云亦云。</li>' +
          '</ul>' + 
          '<div style="text-align: center;margin:30px auto;"><img src="http://live.admin.jinghkb.com/warm-man/cron-rule.png" alt=""></div>'
    }
  },
  onLoad() {

  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
  },
  methods: {
    listHeight() {
      let that = this;
      let info = uni.createSelectorQuery().in(this).select('.top-container');
      info.boundingClientRect(function (data) {
        that.size.height += data.height;
      }).exec(function(res){});
    },
    chatDetail(item) {
      wx.navigateTo({
        url: '/pages/ChatDetail/index?id=' + item.id
      });
    },
    checkSection(index) {
      this.current = edit;
    },
    scrollToLower() {

    },
  },
  options:{
	  styleIsolation:'shared'
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {
    this.listHeight();
    // this.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  }
}
</script>

<style lang="scss">
@import './components/qrcode.scss';
</style>