3
0
Fork 0
web-store-retail-h5/components/mustAgreeMent.vue

134 lines
2.7 KiB
Vue

<!--
* @Descripttion:
* @version:
* @Author: 王三华
* @Date: 2023-06-15 10:41:52
-->
<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2023-04-27 15:54:20
-->
<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, #fb3024, #fb3024 )">{{$t('w_0210')}}({{ readTime }})s</u-button>
<u-button type="success"
v-else
class="uBtn"
shape="circle"
color="linear-gradient(to right, #fb3024, #fb3024 )"
@tap="toAgree">{{$t('w_0210')}}</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>