miao33: 从 main 同步 single_uniapp22miao，dart-sass 兼容修复，DEPLOY.md 更新
- 从 main 获取 single_uniapp22miao 子项目 - dart-sass: /deep/ -> ::v-deep，calc 运算符加空格 - DEPLOY.md 采用 shccd159 版本（4 子项目架构说明） Made-with: Cursor
This commit is contained in:
apple
230
single_uniapp22miao/pages/integral/rules.vue
Normal file
230
single_uniapp22miao/pages/integral/rules.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<view class="rules-page">
|
||||
<scroll-view class="content" scroll-y>
|
||||
<view class="rules-content" v-html="rulesContent"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rulesContent: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadRules()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async loadRules() {
|
||||
uni.showLoading({ title: '加载中...' })
|
||||
|
||||
try {
|
||||
// TODO: 调用积分规则API
|
||||
// const res = await this.$api.integral.getPointsRules()
|
||||
|
||||
// 模拟数据 - 使用HTML格式
|
||||
const res = {
|
||||
code: 0,
|
||||
data: {
|
||||
content: this.getDefaultRules()
|
||||
}
|
||||
}
|
||||
|
||||
if (res.code === 0) {
|
||||
this.rulesContent = res.data.content
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载积分规则失败:', error)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
// 显示默认规则
|
||||
this.rulesContent = this.getDefaultRules()
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
|
||||
getDefaultRules() {
|
||||
return `
|
||||
<div class="rules-section">
|
||||
<h2 class="section-title">如何获得积分</h2>
|
||||
|
||||
<div class="rule-item">
|
||||
<h3 class="item-title">📅 每日签到</h3>
|
||||
<ul class="item-list">
|
||||
<li>连续签到第1天：10积分</li>
|
||||
<li>连续签到第2天：20积分</li>
|
||||
<li>连续签到第3天：30积分</li>
|
||||
<li>连续签到第4天：40积分</li>
|
||||
<li>连续签到第5天：50积分</li>
|
||||
<li>连续签到第6天：60积分</li>
|
||||
<li>连续签到第7天：100积分</li>
|
||||
</ul>
|
||||
<p class="item-note">注：中断签到后重新开始计算</p>
|
||||
</div>
|
||||
|
||||
<div class="rule-item">
|
||||
<h3 class="item-title">🛍️ 购物返积分</h3>
|
||||
<ul class="item-list">
|
||||
<li>消费1元返1积分</li>
|
||||
<li>单笔订单最高返500积分</li>
|
||||
<li>订单完成后自动到账</li>
|
||||
<li>退货退款将扣除对应积分</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rule-item">
|
||||
<h3 class="item-title">👥 邀请好友</h3>
|
||||
<ul class="item-list">
|
||||
<li>成功邀请1位好友注册：50积分</li>
|
||||
<li>好友首次下单：额外100积分</li>
|
||||
<li>无邀请上限，多邀多得</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rule-item">
|
||||
<h3 class="item-title">📤 分享商品</h3>
|
||||
<ul class="item-list">
|
||||
<li>分享商品到朋友圈：10积分/次</li>
|
||||
<li>每日最多获得30积分</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rule-item">
|
||||
<h3 class="item-title">🎁 新人奖励</h3>
|
||||
<ul class="item-list">
|
||||
<li>注册成功：500积分</li>
|
||||
<li>首次下单：额外500积分</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rules-section">
|
||||
<h2 class="section-title">积分使用规则</h2>
|
||||
|
||||
<div class="rule-item">
|
||||
<ul class="item-list">
|
||||
<li>100积分 = 1元</li>
|
||||
<li>积分不可提现</li>
|
||||
<li>积分有效期：2年</li>
|
||||
<li>积分可用于兑换积分商城商品</li>
|
||||
<li>兑换订单取消后积分自动退回</li>
|
||||
<li>部分商品可能有限购要求</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rules-section">
|
||||
<h2 class="section-title">注意事项</h2>
|
||||
|
||||
<div class="rule-item">
|
||||
<ul class="item-list warning">
|
||||
<li>严禁通过非法手段刷积分，一经发现将清零并封号</li>
|
||||
<li>积分不可转赠他人</li>
|
||||
<li>积分过期后自动清零，不予找回</li>
|
||||
<li>平台有权根据运营需要调整积分规则</li>
|
||||
<li>如有疑问请联系客服</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rules-footer">
|
||||
<p>本规则最终解释权归平台所有</p>
|
||||
<p>更新时间：2025年12月17日</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rules-page {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.rules-content {
|
||||
padding: 30rpx;
|
||||
|
||||
::v-deep .rules-section {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
::v-deep .section-title {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 2rpx solid #F0F0F0;
|
||||
}
|
||||
|
||||
::v-deep .rule-item {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .item-title {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
::v-deep .item-list {
|
||||
padding-left: 40rpx;
|
||||
|
||||
li {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 2;
|
||||
list-style: disc;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
&.warning li {
|
||||
color: #FF4D4F;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .item-note {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 16rpx;
|
||||
padding: 16rpx;
|
||||
background-color: #FFF9E6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
::v-deep .rules-footer {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user