warm_man/pages/Cron/detail.vue

<template>
  <view class="body-background">
    <u-image
        :show-loading="true"
        :src="staticImage.bg"
        width="100%"
        height="420"
        radius="10"
        mode="widthFix"
        class="img"
    ></u-image>
  </view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="transparent"
  ></u-navbar>
  <view class="top-container">
      <view class="top-price">
        8,256,256
      </view>
      <view class="top-desc">
        暖新币余额
      </view>
  </view>
  <view class="app-wallpaper">
    <u-tabs
        :list="list"
        u-sticky
        lineWidth="64"
        lineHeight="8"
        :inactiveStyle="{color:'#AFB5BE'}"
        :activeStyle="{color:'#F47210'}"
        lineColor="#F47210"
    ></u-tabs>
  </view>
  <u-list
      :height="(size.height)+'px'"
      :custom-style="{padding:'0 26rpx',boxSizing:'border-box'}"
  >
    <u-list-item
        v-for="(item, index) in lists"
        :key="index"
    >
    <u-cell
        title="提交线索-环境污染"
        label="2023-08-26"
        :icon="staticImage.bg"
        :icon-style="{width:'64rpx',height:'64rpx',marginRight:'22rpx'}"
        :border="false"
        :custom-style="{backgroundColor:'#ffffff',borderRadius:'20rpx',marginBottom:'16rpx'}"
        :title-style="{fontSize: '28rpx',fontWeight: '400',color: '#020B18',marginBottom:'20rpx'}"
    >
      <template #value>
        <view class="cell-value-add" v-if="item.type === 1">
          +50币
        </view>
        <view class="cell-value-dec" v-else>
          -50币
        </view>
      </template>
      <template #label>
        <view class="cell-label">
          2023-08-26
        </view>
      </template>
    </u-cell>
    </u-list-item>
  </u-list>
</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 {
      model1: {
        userInfo: {
          name: '',
          sex: 1,
        },
      },
      rules: {
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.sex': {
          type: 'string',
          max: 1,
          required: true,
          message: '请选择男或女',
          trigger: ['blur', 'change']
        },
      },
      sexList:[
        {
          id:1,
          name: '男',
          disabled: false,
        },
        {
          i:2,
          name: '女',
          disabled: false,
        },
      ],
      list: [{
        name: '暖新币获得'
      }, {
        name: '暖新币兑换'
      },],
      // 或者如下，也可以配置keyName参数修改对象键名
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      current: 1,
      title: '暖新币明细',
      loading: true,
      staticImage: {
        bg: imghost + '/static/image/cron-bg.png',
        newIcon: imghost + '/static/image/new-icon.png',
      },
      user: {
        avatar: imghost + '/static/image/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685,
      },
      isTop: false,
      lists: [
        {
          id: 1,
          thumb: imghost + '/static/image/new-1.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true,
          type:1
        }, {
          id: 2,
          thumb: imghost + '/static/image/new-2.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”新闻发布会召开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: true,
          type:1
        }, {
          id: 3,
          thumb: imghost + '/static/image/new-3.png',
          title: '全市公安机关夏季治安打击整治“彭安行动”111开',
          desc: '需要您带一点猫砂上门，谢谢',
          time: '2023/06/16',
          is_new: false,
          type:2
        },
      ],
      size: {
        height: 0,
      }
    }
  },
  onLoad() {

  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight
    let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight
    console.log('headerHeight',headerHeight)

    let info = uni.createSelectorQuery().in(this);
    info.select('.top-container').boundingClientRect(function (data) {

    }).exec(function (res) {});
    info.select('.app-wallpaper').boundingClientRect(function (data) {

    }).exec(function (res) {
      let otherHeight = 0;
      res.forEach((item,index) => {
        otherHeight += item.height;
      });
      that.size.height = that.size.height = height - headerHeight - otherHeight - uni.$u.getPx('40rpx');
      console.log(that.size.height)
    });
  },
  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: {
    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.pagePadding = (api.navHeight().navPaddingTop +
    // 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  }
}
</script>

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