cooperationDetail.vue
5.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<template>
<view class="page">
<view class="head">
<view class="logo-title">
<image @click="goBack" src="../../static/left.png"></image>
参与互助
</view>
<view class="title">
</view>
<view class="setting-mess"></view>
</view>
<view class="main">
<view class="goods-top">
<!-- 标题 -->
<view class="goods-title">
<view><text>成都市社区工作者互助关爱保障计划</text></view>
</view>
<view class="goods-jj">
在当今这个充满不确定性的世界里，保险作为一种风险管理工具，扮演着越来越重要的角色。它不仅能为个人和家庭提供财务上的安全保障，还能在意外发生时，帮助我们减轻经济负担，迅速恢复正常生活。本文将深入解析保险的基本概念、种类、选择方法以及购买时需要注意的事项，帮助您更好地理解并利用这一重要的金融工具。
</view>
<!-- 价格 -->
<view class="price-info">
<view class="price-info-right-bg">
<image src="../../static/img/2.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="cooperationDetail-bg">
<view class="detail-zhu">
<view class="detail-zhu-left">保障计划：互助关爱</view>
<view>费用：50元/人</view>
</view>
<view class="address-list">
<view class="list">
<view class="list-img">
保障内容
</view>
<view class="edit">
意外身故/伤残
</view>
</view>
<view class="list">
<view class="list-img">互助关爱额</view>
<view class="edit">
10000元
</view>
</view>
<view class="list width100">
<view class="list-img">说明</view>
<view class="">
<textarea maxlength="-1" auto-height placeholder="28类重大疾病一次性给付"
placeholder-class="placeholder" class="textarea"></textarea>
</view>
</view>
</view>
<view class="address-list">
<view class="list">
<view class="list-img">
保障内容
</view>
<view class="edit">
住院医疗
</view>
</view>
<view class="list">
<view class="list-img">互助关爱额</view>
<view class="edit">
10000元
</view>
</view>
<view class="list width100">
<view class="list-img">说明</view>
<view class="">
<textarea maxlength="-1" auto-height placeholder="28类重大疾病一次性给付"
placeholder-class="placeholder" class="textarea"></textarea>
</view>
</view>
</view>
</view>
<!-- 底部 -->
<view class="page-footer">
<view class="footer-fn">
<text>￥100.00</text>
</view>
<view class="footer-buy" @click="isRule = true">
<view class="buy-at">
<text>参与互助</text>
</view>
</view>
</view>
</view>
<!-- 弹窗 -->
<view class="rule-win">
<view class="cu-modal" :class="{'show':isRule}">
<view class="cu-dialog">
<view class="rule-content">
<view class="rule-title">用户须知</view>
<scroll-view class="scroll-view" scroll-y="true">
<view class="rule-text">尊敬的用户：
欢迎您加入我们的互助计划平台！为了保障您的权益，确保您能够充分了解并合理使用我们的服务，请您在注册并使用本平台前，仔细阅读以下用户须知：</view>
<view class="rule-text">一、平台介绍</view>
<view class="rule-text">
本平台是一个基于互联网技术的互助计划平台，旨在为用户提供一个风险共担、互助共济的社区环境。通过加入本平台，您可以与其他成员共同分担特定风险，并在需要时获得相应的互助支持。
</view>
<view class="rule-text">二、注册与认证</view>
<view class="rule-text">1.您需要按照平台提示进行账号注册，并填写真实、准确的个人信息。</view>
<view class="rule-text">2.注册完成后，您可能需要进行身份验证，以确保您的账号安全。</view>
</scroll-view>
<view class="rule-btn">
<view class="rule-btnleft" v-if="remainingTime > 0">请详细阅读用户须知：{{ remainingTime }}s</view>
<view class="rule-btnright" v-if="remainingTime === 0" @click="cooperationContract">我已阅读并同意，点此查看合同</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isRule: false,
remainingTime: 15, // 初始剩余时间设置为30秒
timer: null ,// 计时器
info:{}
};
},
mounted() {
this.startCountdown();
},
beforeDestroy() {
this.clearCountdown();
},
onLoad() {
this.cyhz();
},
methods: {
// 获取参与互助
cyhz(){
this.API.cyhz().then(res=>{
console.log("111",res);
this.info = res.data
})
},
goBack() {
uni.navigateBack({
delta: 1
});
},
cooperationContract() {
uni.navigateTo({
url: '/pages/cooperationContract/cooperationContract'
})
},
startCountdown() {
this.timer = setInterval(() => {
if (this.remainingTime > 0) {
this.remainingTime--;
} else {
this.clearCountdown();
}
}, 1000);
},
clearCountdown() {
clearInterval(this.timer);
this.timer = null;
// 这里可以添加倒计时结束需要执行的代码
console.log('倒计时结束！');
}
}
};
</script>
<style>
/deep/ ::-webkit-scrollbar {
/*滚动条整体样式*/
width: 15rpx !important;
height: 10rpx !important;
background: #ccc !important;
display: block !important;
border-radius: 100rpx;
}
/deep/ ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 100rpx;
background-color: #477eff;
width: 15rpx;
}
/deep/ ::-webkit-scrollbar-track {
background: #f2f3f7;
border-radius: 100rpx;
}
</style>
<style scoped lang="scss">
@import 'cooperationDetail.scss';
</style>