web-zk-h5/components/mustAgreeMent.vue

<template>
  <u-popup :show="centerDialogVisible"
           :round="10"
           mode="center">
    <view class="popList">
      <view class="pop_t">
        <view v-for="(item, index) in agreementList.waresExtList"
              :key="index"
              v-show="item.isForcedRead == 0">
          <view class="tit">
            {{ item.title }}
          </view>
          <view v-html="item.content"></view>
        </view>
      </view>
      <view class="footer">
        <view class="disflx">
          <u-button type="success"
                    v-if="readTime > 0"
                    disabled
                    class="uBtn"
                    shape="circle"
                    color="linear-gradient(to right, #005BAC, #005BAC )">{{'我已阅读以上协议'}}({{ readTime }})s</u-button>
          <u-button type="success"
                    v-else
                    class="uBtn"
                    shape="circle"
                    color="linear-gradient(to right, #005BAC, #005BAC )"
                    @tap="toAgree">{{'我已阅读以上协议'}}</u-button>
        </view>

      </view>
    </view>

  </u-popup>
</template>

<script>
import * as api from '@/config/regiest'
export default {
  data() {
    return {
      centerDialogVisible: false,
      agreementList: {},
      readTime: 0,
      // SP00014
    }
  },
  watch: {
    waresCodeList: {
      deep: true,
      handler(n) {
        this.getAgreeMent(n)
      },
    },
  },
  props: {
    waresCodeList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    toAgree() {
      this.centerDialogVisible = false
    },
    getAgreeMent(arr) {
      api
        .waresAgreement({
          waresCodeList: arr,
        })
        .then((res) => {
          this.agreementList = res.data || []
          this.readTime = res.data.alertTime
          if (this.readTime > 0) {
            this.centerDialogVisible = true
            this.timeInterval()
          }
        })
    },
    timeInterval() {
      this.hasQyj = 0
      let that = this
      setInterval(() => {
        if (that.readTime > 0) {
          that.readTime--
        }
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.tit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}
::v-deep .u-popup__content {
  width: 90%;
}
.popList {
  padding: 40rpx;
  
}
.pop_t {
  height: 70vh;
  overflow-y: auto;
}
.redBtn {
  background: #d61820;
  border-color: #d61820;
}
.footer {
  text-align: center;
}
</style>