更改头部

jiangping

2024-11-01 8fc9b0db58df2e1e3b13d456175e404ee9dca72b

 h5/pages/notice/notice.vue

@@ -1,146 +1,141 @@
<template>
   <div class="container">
      <video src="https://vdept3.bdstatic.com/mda-nj7gwfue9kdnbtsh/sc/cae_h264/1665488517815949255/mda-nj7gwfue9kdnbtsh.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1715141591-0-0-6dfdf4d4c3d94b60b9adeb53368a72f3&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=0791905773&vid=13790089500387859718&klogid=0791905773&abtest="></video>
      <scroll-view scroll-y class="content">
         <div class="title">安泰物流厂外来人员安全告知</div>
         <div class="text">
            <div>{{ content }}</div>
         </div>
         <div class="empty"></div>
      </scroll-view>
      <div class="button" @click="toapply">确认了解</div>
   </div>
  <view class="container">
    <!-- <video
      src="https://vdept3.bdstatic.com/mda-nj7gwfue9kdnbtsh/sc/cae_h264/1665488517815949255/mda-nj7gwfue9kdnbtsh.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1715141591-0-0-6dfdf4d4c3d94b60b9adeb53368a72f3&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=0791905773&vid=13790089500387859718&klogid=0791905773&abtest="
    ></video> -->
    <scroll-view scroll-y class="content">
      <view>
        <view v-html="content"></view>
      </view>
      <view class="empty"></view>
    </scroll-view>
    <view class="button" :class="{ disable: num > 0 }" @click="toapply">
      已知晓，下一步
      <text v-if="num > 0">({{ num }}秒)</text>
    </view>
  </view>
</template>

<script>
   export default {
      name: 'Index',
      data() {
         return {
            content: `
            1确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            `,
            answer: ''
         }
      },
      onLoad() {
         // this.getInfo()
      },
      methods: {
         getInfo() {
            // 入场须知详情
            this.$u.api.getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'VISIT_NOTICE'
            }).then(res => {
               if (res.code === 200) {
                  this.content = res.data.code
               }
            })
            // 是否需要答题
            this.$u.api.getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'PROBLEM_VISIT_REQUIRED'
            }).then(res => {
               if (res.code === 200) {
                  this.answer = res.data.code
               }
            })
         },
         toapply() {
            if (this.answer === '0') {
               uni.navigateTo({
                  url: '/pages/userinfo/userinfo'
               })
            } else {
               uni.navigateTo({
                  url: '/pages/answer/answer'
               })
            }
         }
      }
   }
let timer
import { getSystemDictData } from "@/api"
export default {
  name: 'Index',
  data() {
    return {
      content: ``,
      answer: '',
      num: 5
    }
  },
  onLoad() {
    this.getInfo()
    if (!this.$store.state.openId) {
      // this.initToken()
    }
  },
  methods: {
    initToken() {
      const appID = 'wxac2a80c2144c4ee0'
      // const AppSecret = '922c93596d134fedf5bd22a9354b3bfe'
      let uri = encodeURIComponent('http://xiaopiqiu2.natapp1.cc/static/redirect.html')
      let authURL =
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
      window.location.href = authURL
    },
    getInfo() {
      // 入园须知详情
      getSystemDictData({
        dictCode: 'SYSTEM',
        label: 'VISIT_NOTICE'
      }).then(res => {
        if (res.code === 200) {
          this.content = res.data.code
        }
      })
      // 倒计时时间
      getSystemDictData({
        dictCode: 'SYSTEM',
        label: 'NOTICE_CUTNTDOWN'
      }).then(res => {
        if (res.code === 200) {
          this.num = res.data.code
          timer = setInterval(() => {
            this.num--
            if (this.num === 0) {
              clearInterval(timer)
            }
          }, 1000)
        }
      })
      // 是否需要答题
      getSystemDictData({
        dictCode: 'SYSTEM',
        label: 'PROBLEM_VISIT_REQUIRED'
      }).then(res => {
        if (res.code === 200) {
          this.answer = res.data.code
        }
      })
    },
    toapply() {
      if (this.num > 0) return
      if (this.answer === '0') {
        uni.navigateTo({
          url: '/pages/userinfo/userinfo'
        })
      } else {
        uni.navigateTo({
          url: '/pages/answer/answer'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
   .container {
      width: 100%;
      height: 100vh;
      padding: 10rpx 30rpx 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      video{
         width: 690rpx;
         height: 388rpx;
         margin-bottom: 10rpx;
      }
      .content {
         height: calc( 100% - 400rpx );
         .title{
            color: #333333;
            font-weight: 500;
            margin-bottom: 16rpx;
         }
         .text{
            font-weight: 350;
         }
         .empty{
            height: 160rpx;
         }
      }
      .button {
         width: 690rpx;
         height: 88rpx;
         line-height: 88rpx;
         text-align: center;
         background: #4d99a8;
         border-radius: 44rpx;
         font-size: 32rpx;
         color: #FFFFFF;
         position: absolute;
         bottom: 42rpx;
         left: 30rpx;
      }
   }
.container {
  width: 100%;
  height: 100vh;
  padding: 10rpx 30rpx 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  video {
    width: 690rpx;
    height: 388rpx;
    margin-bottom: 10rpx;
  }
  .content {
    height: calc(100% - 170rpx);
    .title {
      color: #333333;
      font-weight: 600;
      margin-bottom: 16rpx;
    }
    .text {
      font-weight: 350;
    }
    .empty {
      height: 160rpx;
    }
  }
  .button {
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #4d99a8;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #ffffff;
    position: fixed;
    bottom: 30rpx;
    left: 30rpx;
  }
  .disable {
    background-color: #cccccc;
  }
}
</style>