1806 lines
44 KiB
Vue
1806 lines
44 KiB
Vue
<template>
|
||
<view class="">
|
||
<view>
|
||
<uni-popup ref="inputDialog" type="dialog">
|
||
<uni-popup-dialog type="info" cancelText="关闭" confirmText="继续" title="提示" content="该功能还在开发中!"
|
||
@confirm="dialogConfirm" @close="dialogClose">
|
||
</uni-popup-dialog>
|
||
</uni-popup>
|
||
</view>
|
||
<view class="v-preview">
|
||
<image :src="templateSrc" alt="" class="img" mode="widthFix" />
|
||
<view class="btn-area">
|
||
<view class="red-btn-area">
|
||
<button class="red-btn" @click="btn(0)">老兵直播</button>
|
||
<button class="red-btn" @click="btn(1)">老兵故事</button>
|
||
<button class="red-btn" @click="btn(2)">在线注册</button>
|
||
</view>
|
||
<view class="red-btn-plain-area">
|
||
<view class="red-btn-plain" @click="btn(3)">新四军</view>
|
||
<view class="red-btn-plain" @click="btn(4)">抗美援朝</view>
|
||
<view class="red-btn-plain" @click="btn(5)">抗美援越</view>
|
||
<view class="red-btn-plain" @click="btn(6)">对越自卫反击战</view>
|
||
<view class="red-btn-plain" @click="btn(7)">和平时期退役兵</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<unicloud-db v-slot:default="{data, loading, error, options}" :collection="collection" :options="formData"
|
||
:getone="true" :where="where" :manual="true" ref="detail" foreignKey="uni-cms-articles.user_id"
|
||
@load="loadData" class="article">
|
||
<template v-if="!loading && data">
|
||
<view>
|
||
<view class="meta">
|
||
<view class="title">
|
||
<text class="text">{{ data.title }}</text>
|
||
</view>
|
||
<view class="excerpt">
|
||
<text class="text">{{ data.excerpt }}</text>
|
||
</view>
|
||
|
||
|
||
<view class="author" @click="toPersonalpage()">
|
||
<template>
|
||
<cloud-image height="64rpx" width="64rpx" borderRadius="50%"
|
||
:src="data.user_id[0].avatar_file.url"></cloud-image>
|
||
<text class="at">{{ data.user_id[0].nickname || '' }}</text>
|
||
<text class="split">·</text>
|
||
</template>
|
||
<text class="date">{{ publishTime( data.publish_date) }}</text>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<render-article-detail :content="data.content" :content-images="data.content_images"
|
||
:ad-config="{ adpId, watchAdUniqueType }"></render-article-detail>
|
||
</template>
|
||
<view class="detail-loading" v-else>
|
||
<uni-icons type="spinner-cycle" size="35px" />
|
||
</view>
|
||
|
||
<uni-grid :column="3" :highlight="true" @change="change" :show-border="false">
|
||
<uni-grid-item v-for="(item, index) in gridLst" :index="index" :key="index">
|
||
<view class="grid-item-box" style="background-color: #fff;">
|
||
<uni-icons :type="item.icon" :size="30" :color="item.select_flag?'#e66':'#777'" />
|
||
<text class="text">{{item.value}}</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
|
||
<view class="">
|
||
<text class="date" @click="complaint">投诉</text> | 阅读 {{ data.view_count }}
|
||
|
||
</view>
|
||
<view class="example-body" style="justify-content:center" v-for="(item, index) in cmsArticleLogList"
|
||
:key="index">
|
||
<cloud-image v-if="item1.user_id[0].avatar_file.url" height="64rpx" width="64rpx" borderRadius="50%"
|
||
v-for="(item1, index1) in item" :key="index1" :src="item1.user_id[0].avatar_file.url"></cloud-image>
|
||
<image v-else
|
||
src="https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/static/center/avatar.png?expire_at=1741142218&er_sign=2f723854c2a07dcb5571d2ede5458f7f"
|
||
style="width: 64rpx;height: 64rpx;border-radius: 50%;"></image>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="btn-gift-charts " @click="openGiftCharts()">
|
||
{{ "送礼榜单 >" }}
|
||
</view>
|
||
|
||
|
||
|
||
<!-- comment_count -->
|
||
<view class="comment-eg">
|
||
<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @relike="relike" @focusOn="focusOn"
|
||
@replyAdd="replyAdd" @getTreeComment="getTreeComment" :deleteTip="'确认删除？'" :cmData="commentData"
|
||
:articlesData="data" v-if="commentData">
|
||
</hb-comment>
|
||
</view>
|
||
</unicloud-db>
|
||
|
||
<uni-popup ref="giftCharts" type="bottom" background-color="#fff" >
|
||
<view class="tab-container">
|
||
<view
|
||
class="tab-item"
|
||
:class="{active: activeTab === 'monthly'}"
|
||
@click="switchTab('monthly')">
|
||
月度榜单
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{active: activeTab === 'total'}"
|
||
@click="switchTab('total')">
|
||
总榜单
|
||
</view>
|
||
</view>
|
||
<view class="totalGiftCharts" v-if="activeTab === 'total'">
|
||
<unicloud-db ref='totalGiftCharts' v-slot:default="{ pagination, hasMore, loading, error, options }" @error="onqueryerror"
|
||
@onPullDownRefresh="onPullDownRefresh" :collection="totalGiftChartsCollecttion" :page-size="20" orderby="publish_date desc"
|
||
@load="totalGiftChartsListLoad">
|
||
<!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<list class="uni-list giftCharts" :border="false" >
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<scroll-view scroll-y class="uni-list" refresher-enabled :refresher-triggered="loadType=== 'refresh'"
|
||
@refresherrefresh="totalGiftChar_refresh" @scrolltolower="totalGiftChar_loadMore">
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<refresh-box :loading="loading" @refresh="totalGiftChar_refresh"></refresh-box>
|
||
<!-- #endif -->
|
||
|
||
<!-- 列表渲染 -->
|
||
<template v-for="(item, index) in totalGiftChartsList">
|
||
<view class="giftCharts-item">
|
||
<!-- 序号列 -->
|
||
<view class="order-index">
|
||
{{ index + 1 }}
|
||
</view>
|
||
|
||
<!-- 头像列 -->
|
||
<view class="avatar-column">
|
||
<cloud-image v-if="item.user_id[0].avatar_file"
|
||
borderRadius="50%" :src="item.user_id[0].avatar_file.url"></cloud-image>
|
||
<image class="avatar" :src="emptyAvatar" v-else></image>
|
||
</view>
|
||
|
||
<!-- 昵称列 -->
|
||
<view class="nickname-column">
|
||
{{ item.user_id[0].nickname || '匿名用户' }}
|
||
</view>
|
||
|
||
<!-- 礼物值列 -->
|
||
<view class="gift-value">
|
||
{{ item.gift_value }} 礼物值
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<uni-list-item>
|
||
<template v-slot:body>
|
||
<!-- #endif -->
|
||
<uni-load-state @networkResume="totalGiftChar_refresh"
|
||
:state="{ data: totalGiftChartsList, pagination, hasMore, loading, error }" @loadMore="totalGiftChar_loadMore">
|
||
</uni-load-state>
|
||
<!-- #ifdef APP-PLUS -->
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
</list>
|
||
<!-- #endif -->
|
||
</unicloud-db>
|
||
</view>
|
||
<view class="monthlyGiftCharts" v-if="activeTab === 'monthly'">
|
||
<unicloud-db ref='monthlyGiftCharts' v-slot:default="{ pagination, hasMore, loading, error, options }" @error="onqueryerror"
|
||
@onPullDownRefresh="onPullDownRefresh" :collection="monthlyGiftChartsCollecttion" :page-size="20" orderby="publish_date desc"
|
||
@load="monthlyGiftChartsListLoad">
|
||
<!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<list class="uni-list giftCharts" :border="false">
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<scroll-view scroll-y class="uni-list" refresher-enabled :refresher-triggered="loadType=== 'refresh'"
|
||
@refresherrefresh="monthlyGiftCharts_refresh" @scrolltolower="monthlyGiftCharts_loadMore">
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
<refresh-box :loading="loading" @refresh="monthlyGiftCharts_refresh"></refresh-box>
|
||
<!-- #endif -->
|
||
|
||
<!-- 列表渲染 -->
|
||
<template v-for="(item, index) in monthlyGiftChartsList">
|
||
<view class="giftCharts-item">
|
||
<!-- 序号列 -->
|
||
<view class="order-index">
|
||
{{ index + 1 }}
|
||
</view>
|
||
|
||
<!-- 头像列 -->
|
||
<view class="avatar-column">
|
||
<cloud-image v-if="item.user_id[0].avatar_file"
|
||
borderRadius="50%" :src="item.user_id[0].avatar_file.url"></cloud-image>
|
||
<image class="avatar" :src="emptyAvatar" v-else></image>
|
||
</view>
|
||
|
||
<!-- 昵称列 -->
|
||
<view class="nickname-column">
|
||
{{ item.user_id[0].nickname || '匿名用户' }}
|
||
</view>
|
||
|
||
<!-- 礼物值列 -->
|
||
<view class="gift-value">
|
||
{{ item.gift_value }} 礼物值
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<uni-list-item>
|
||
<template v-slot:body>
|
||
<!-- #endif -->
|
||
<uni-load-state @networkResume="monthlyGiftCharts_refresh"
|
||
:state="{ data: monthlyGiftChartsList, pagination, hasMore, loading, error }" @loadMore="monthlyGiftCharts_loadMore">
|
||
</uni-load-state>
|
||
<!-- #ifdef APP-PLUS -->
|
||
</template>
|
||
</uni-list-item>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
</list>
|
||
<!-- #endif -->
|
||
</unicloud-db>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="popup" background-color="#fff" type="bottom">
|
||
|
||
<view class="">
|
||
<uni-notice-bar text="本月送出 0 礼物值,快来支持作者" moreText="规则" show-get-more @getmore="getMore"/>
|
||
|
||
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
|
||
:mode="mode" field="content">
|
||
<swiper class="swiper" :indicator-dots="true">
|
||
<swiper-item class="swiper-box">
|
||
<view class="grid-container">
|
||
<view v-for="(item, index) in giftList" :key="index" :class="{
|
||
'grid-item': true,
|
||
'select-gift': item.is_select_gift
|
||
}"
|
||
@click="setGiftItem(item, index)">
|
||
<view class="grid-item-box">
|
||
<image :src="item.url" class="image" mode="aspectFill" />
|
||
<text class="text">{{"￥ " + item.price }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</swiper-item>
|
||
|
||
</swiper>
|
||
</uni-swiper-dot>
|
||
<view class="wallet-container">
|
||
<view class="uni-px-5 uni-pb-5">
|
||
<uni-data-checkbox mode="list" multiple v-model="isBalance" :localdata="hobby"></uni-data-checkbox>
|
||
</view>
|
||
<view class=""></view>
|
||
<view class="wallet-info">
|
||
钱包余额：{{ 0 }} 元
|
||
</view>
|
||
<button class="gift-btn" @tap="handleGift()">
|
||
赠送
|
||
</button>
|
||
</view>
|
||
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
|
||
import renderArticleDetail from "@/uni_modules/uni-cms-article/components/render-article-detail/index.vue";
|
||
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
|
||
|
||
const uniIdCo = uniCloud.importObject("uni-id-co")
|
||
import {
|
||
store,
|
||
mutations
|
||
} from '@/uni_modules/uni-id-pages/common/store.js'
|
||
|
||
|
||
const db = uniCloud.database()
|
||
const _ = db.command;
|
||
|
||
const articleDBName = 'uni-cms-articles'
|
||
const userDBName = 'uni-id-users'
|
||
|
||
|
||
|
||
const date = new Date();
|
||
const nowMonths = (date.getUTCFullYear() - 1970)*12 + date.getUTCMonth() + 1;
|
||
|
||
console.log(nowMonths);
|
||
|
||
export default {
|
||
components: {
|
||
uniNavBar,
|
||
renderArticleDetail
|
||
},
|
||
data() {
|
||
return {
|
||
monthlyGiftChartsList:[],
|
||
totalGiftChartsList:[],
|
||
|
||
emptyAvatar: "https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/center/avatar.png?expire_at=1741157497&er_sign=9b8381ae7875137d28c57d502762691b",
|
||
|
||
showRefresh: false, // 是否显示刷新按钮
|
||
listHeight: 0, // 列表高度
|
||
mpButtonLeftPlaceholderSize: 0, // 小程序左侧icon占位大小
|
||
mpButtonPlaceholderSize: 87, // 小程序导航栏按钮占位大小
|
||
navBarHeight: 44, // 导航栏高度
|
||
refreshStatus: 0, // 刷新状态 0: 未刷新 1: 刷新中 2: 刷新完成
|
||
listData: [], // 列表数据
|
||
loadType: null,
|
||
|
||
activeTab: 'monthly',
|
||
selectGift:{},
|
||
isBalance: [],
|
||
hobby: [{
|
||
text: '余额抵扣',
|
||
value: 0
|
||
}],
|
||
swiperDotIndex: 0,
|
||
giftList: [],
|
||
gridLst: [{
|
||
text: "点赞",
|
||
icon: "heart",
|
||
value: 0,
|
||
select_flag: false
|
||
},
|
||
{
|
||
text: "收藏",
|
||
icon: "folder-add",
|
||
value: 0,
|
||
select_flag: false
|
||
},
|
||
{
|
||
text: "打赏",
|
||
icon: "gift",
|
||
value: 0,
|
||
select_flag: false
|
||
}
|
||
],
|
||
cmsArticleLogList: [],
|
||
templateSrc: "https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/bg.jpg?expire_at=1741101988&er_sign=c9732cddaaead925cf110d9a11751231",
|
||
"commentData": null,
|
||
"reqFlag": false,
|
||
id: "", // 文章ID
|
||
title: "", // 文章标题
|
||
formData: {}, // 表单数据
|
||
user_id: {},
|
||
|
||
// 广告相关配置
|
||
adpId: "", // TODO: 请填写广告位ID
|
||
watchAdUniqueType: "device" // TODO: 观看广告的唯一标识类型，可选值为 user 或者 device，user 表示用户唯一，device 表示设备唯一
|
||
}
|
||
},
|
||
onShow() {
|
||
let uid = this.userInfo._id;
|
||
console.log(uid);
|
||
if (this.id) {
|
||
this.detailLog(this.id, uid);
|
||
this.getComment();
|
||
}
|
||
},
|
||
computed: {
|
||
userInfo() {
|
||
return store.userInfo
|
||
},
|
||
realNameStatus() {
|
||
if (!this.userInfo.realNameAuth) {
|
||
return 0
|
||
}
|
||
|
||
return this.userInfo.realNameAuth.authStatus
|
||
},
|
||
where() {
|
||
return `_id =="${this.id}"`
|
||
},
|
||
collection() {
|
||
return [
|
||
db.collection(articleDBName).where(this.where).field(
|
||
'user_id,thumbnail,excerpt,publish_date,title,content,last_modify_date,view_count,_id,comment_count,like_count,last_modify_ip,_id,gift_count,collect_count'
|
||
).getTemp(),
|
||
db.collection(userDBName).field('_id, nickname,avatar_file').getTemp()
|
||
]
|
||
},
|
||
// 总榜单为0 当前榜单为 时间撮对应的总月份数
|
||
monthlyGiftChartsCollecttion() {
|
||
return [
|
||
db.collection("users-give-gift")
|
||
.where({
|
||
months:nowMonths
|
||
})
|
||
.field(
|
||
'_id, gift_value,user_id,article_id,months'
|
||
)
|
||
.orderBy('gift_value', 'desc')
|
||
.getTemp(),
|
||
db.collection("uni-id-users").field('_id, nickname,avatar_file').getTemp()
|
||
]
|
||
},
|
||
totalGiftChartsCollecttion() {
|
||
return [
|
||
db.collection("users-give-gift")
|
||
.where({
|
||
months:0
|
||
})
|
||
.field(
|
||
'_id, gift_value,user_id,article_id,months'
|
||
)
|
||
.orderBy('gift_value', 'desc')
|
||
.getTemp(),
|
||
db.collection("uni-id-users").field('_id, nickname,avatar_file').getTemp()
|
||
]
|
||
}
|
||
|
||
},
|
||
onReady() {
|
||
// 开始加载数据，修改 where 条件后才开始去加载 clinetDB 的数据 ，需要等组件渲染完毕后才开始执行 loadData，所以不能再 onLoad 中执行
|
||
if (this.id) { // ID 不为空，则发起查询
|
||
this.$refs.detail.loadData()
|
||
this.$refs.totalGiftCharts.totalGiftChartsListLoad();
|
||
this.$refs.monthlyGiftCharts.monthlyGiftChartsListLoad();
|
||
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: 'id 不能为空'
|
||
})
|
||
}
|
||
},
|
||
async onLoad(event) {
|
||
//获取文章id，通常 id 来自上一个页面
|
||
if (event.id) {
|
||
this.id = event.id
|
||
}
|
||
|
||
await this.getArticleInfo();
|
||
await this.getCmsArticleLog(this.id);
|
||
|
||
// 监听解锁内容事件
|
||
uni.$on('onUnlockContent', this.onUnlockContent)
|
||
},
|
||
onUnload() {
|
||
// 页面卸载时，移除监听事件
|
||
uni.$off('onUnlockContent', this.onUnlockContent)
|
||
},
|
||
onPageScroll(e) {
|
||
// 根据滚动位置判断是否显示导航栏
|
||
if (e.scrollTop > 100) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.title
|
||
})
|
||
} else {
|
||
uni.setNavigationBarTitle({
|
||
title: ''
|
||
})
|
||
}
|
||
},
|
||
async created() {
|
||
await this.getGiftList()
|
||
},
|
||
methods: {
|
||
async monthlyGiftChartsListLoad(data) {
|
||
console.log(data);
|
||
|
||
this.monthlyGiftChartsList = this.loadType === 'loadMore' ? this.monthlyGiftChartsList.concat(data) : data
|
||
this.loadType = null
|
||
},
|
||
async totalGiftChartsListLoad(data) {
|
||
console.log(data);
|
||
|
||
this.totalGiftChartsList = this.loadType === 'loadMore' ? this.totalGiftChartsList.concat(data) : data
|
||
this.loadType = null
|
||
},
|
||
dialogConfirm() {
|
||
console.log('点击确认')
|
||
},
|
||
|
||
dialogClose() {
|
||
console.log('点击关闭')
|
||
},
|
||
inputDialogToggle() {
|
||
this.$refs.inputDialog.open()
|
||
},
|
||
btn(item) {
|
||
if (item === 0) {
|
||
this.inputDialogToggle();
|
||
} if ([1, 3, 4, 5, 6, 7].indexOf(item) !== -1) {
|
||
uni.switchTab({
|
||
url: "/uni_modules/uni-cms-article/pages/list/slist"
|
||
})
|
||
} else if (item === 2) {
|
||
let token = uni.getStorageSync("uni_id_token");
|
||
console.log(token);
|
||
if (!token) {
|
||
uni.navigateTo({
|
||
url:"/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=weixin"
|
||
})
|
||
}
|
||
else {
|
||
uni.navigateTo({
|
||
url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true"
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
async listLoad(data) {
|
||
console.log(data);
|
||
const listData = data.map(item => {
|
||
if (typeof item.thumbnail === 'string') {
|
||
item.thumbnail = [item.thumbnail]
|
||
}
|
||
|
||
return item
|
||
})
|
||
|
||
// 处理腾讯云文件链接
|
||
for (const article of listData) {
|
||
const parseImages = await parseImageUrl(article.thumbnail)
|
||
|
||
article.thumbnail = parseImages ? parseImages.map(image => image.src) : []
|
||
}
|
||
|
||
this.listData = this.loadType === 'loadMore' ? this.listData.concat(listData) : listData
|
||
this.loadType = null
|
||
},
|
||
// 初始化导航栏大小
|
||
initNavBarSize() {
|
||
// 获取小程序导航栏按钮信息
|
||
// #ifdef MP-TOUTIAO
|
||
let menuButtonInfo = tt.getCustomButtonBoundingClientRect()
|
||
menuButtonInfo.width = menuButtonInfo.capsule.width // 小程序按钮区域中使用的按钮宽度
|
||
this.mpButtonLeftPlaceholderSize = menuButtonInfo.leftIcon.width + 10
|
||
// #endif
|
||
// #ifndef MP-TOUTIAO
|
||
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
// #endif
|
||
// 计算小程序导航栏按钮占位大小
|
||
this.mpButtonPlaceholderSize = menuButtonInfo.width + 10
|
||
// 获取系统信息，判断是否为 iOS 系统，设置导航栏高度
|
||
this.navBarHeight = uni.getSystemInfoSync().system.toLowerCase().includes('ios') ? 44 : 48
|
||
},
|
||
// 重试
|
||
retry() {
|
||
this.refresh()
|
||
},
|
||
// 刷新
|
||
async totalGiftChar_refresh() {
|
||
this.loadType = 'refresh'
|
||
|
||
console.log(this.$refs.totalGiftCharts);
|
||
this.$refs.totalGiftCharts.loadData({
|
||
clear: true
|
||
}, () => {
|
||
uni.stopPullDownRefresh()
|
||
// #ifdef APP-NVUE
|
||
this.showRefresh = false
|
||
// #endif
|
||
})
|
||
},
|
||
async monthlyGiftCharts_refresh() {
|
||
this.loadType = 'refresh'
|
||
this.$refs.monthlyGiftCharts.loadData({
|
||
clear: true
|
||
}, () => {
|
||
uni.stopPullDownRefresh()
|
||
// #ifdef APP-NVUE
|
||
this.showRefresh = false
|
||
// #endif
|
||
})
|
||
},
|
||
// 加载更多
|
||
totalGiftChar_loadMore() {
|
||
this.loadType = 'loadMore'
|
||
this.$refs.totalGiftChar.loadMore();
|
||
},
|
||
monthlyGiftCharts_loadMore() {
|
||
this.loadType = 'loadMore'
|
||
this.$refs.monthlyGiftCharts.loadMore();
|
||
},
|
||
monthlyGiftCharts_data_clear() {
|
||
this.loadType = 'clear'
|
||
this.$refs.monthlyGiftCharts.clear();
|
||
},
|
||
|
||
totalGiftChar__data_clear() {
|
||
this.loadType = 'clear'
|
||
this.$refs.totalGiftChar.clear();
|
||
},
|
||
// 查询出错
|
||
onqueryerror(e) {
|
||
console.error(e);
|
||
},
|
||
switchTab(tab) {
|
||
this.activeTab = tab
|
||
// 动态加载榜单数据...
|
||
},
|
||
openGiftCharts() {
|
||
this.$refs.giftCharts.open();
|
||
},
|
||
async getGiftList() {
|
||
try {
|
||
const res = await uniCloud.importObject("gift_info").getGiftList();
|
||
console.log(res);
|
||
this.giftList = res.data;
|
||
} catch(e) {
|
||
console.log(e);
|
||
}
|
||
},
|
||
async handleGift() {
|
||
try {
|
||
if (this.selectGift && this.selectGift !== {}) {
|
||
console.log(this.selectGift);
|
||
}
|
||
} catch(e) {
|
||
console.log(e)
|
||
}
|
||
},
|
||
setGiftItem(item, index) {
|
||
for (let i = 0 ; i < this.giftList.length ; i ++ ) {
|
||
this.giftList[i].is_select_gift = false;
|
||
}
|
||
this.giftList[index].is_select_gift = true;
|
||
this.selectGift = item;
|
||
console.log(this.selectGift)
|
||
console.log(this.selectGift._id === item._id);
|
||
},
|
||
getMore() {
|
||
console.log("规则");
|
||
},
|
||
toPersonalpage() {
|
||
console.log(this.user_id);
|
||
uni.navigateTo({
|
||
url: "/uni_modules/zetank-personalpage/pages/personalpage/personalpage?uid=" + this.user_id._id
|
||
})
|
||
},
|
||
|
||
giftChange(e) {
|
||
console.log(e)
|
||
},
|
||
chunkDataIntoGroups(originalArray) {
|
||
|
||
const MAX_PER_GROUP = 7;
|
||
const MAX_TOTAL = 21;
|
||
const result = [];
|
||
|
||
const workingArray = originalArray.slice(0, MAX_TOTAL);
|
||
|
||
for (let i = 0; i < workingArray.length; i += MAX_PER_GROUP) {
|
||
const group = workingArray.slice(i, i + MAX_PER_GROUP);
|
||
result.push(group);
|
||
}
|
||
|
||
return result;
|
||
},
|
||
async getCmsArticleLog(id) {
|
||
try {
|
||
let res = await uniCloud.importObject("article_info").getCmsArticleLog({
|
||
article_id: id
|
||
});
|
||
console.log(res);
|
||
|
||
if (res.code === 200) {
|
||
if (res.cmsArticleLog.length > 0) {
|
||
this.cmsArticleLogList = this.chunkDataIntoGroups(res.cmsArticleLog);
|
||
}
|
||
console.log(this.cmsArticleLogList);
|
||
|
||
}
|
||
console.log(this.cmsArticleLogList);
|
||
} catch (e) {
|
||
console.log(e.message);
|
||
}
|
||
},
|
||
async getArticleInfo() {
|
||
try {
|
||
let res = await uniCloud.importObject("article_info").getInfo({
|
||
user_id: this.userInfo._id,
|
||
article_id: this.id
|
||
});
|
||
|
||
console.log(res);
|
||
|
||
if (res.code === 200) {
|
||
this.gridLst[0].select_flag = res.isLike;
|
||
this.gridLst[1].select_flag = res.isCollect;
|
||
}
|
||
|
||
} catch (e) {
|
||
console.log(e.message);
|
||
}
|
||
},
|
||
async change(e) {
|
||
console.log(e);
|
||
let index = e.detail.index;
|
||
console.log(index);
|
||
if (this.gridLst[index].text === "点赞") {
|
||
if (!this.gridLst[index].select_flag) {
|
||
let res = await uniCloud.importObject("cms-articles-like").likeArticle({
|
||
user_id: this.userInfo._id,
|
||
article_id: this.id
|
||
});
|
||
console.log(res);
|
||
this.gridLst[index].value++;
|
||
} else {
|
||
let res = await uniCloud.importObject("cms-articles-like").relikeArticle({
|
||
user_id: this.userInfo._id,
|
||
article_id: this.id
|
||
});
|
||
console.log(res);
|
||
this.gridLst[index].value--;
|
||
}
|
||
|
||
} else if (this.gridLst[index].text === "收藏") {
|
||
if (!this.gridLst[index].select_flag) {
|
||
let res = await uniCloud.importObject("cms-articles-collect").collectArticle({
|
||
user_id: this.userInfo._id,
|
||
article_id: this.id
|
||
});
|
||
console.log(res);
|
||
this.gridLst[index].value++;
|
||
} else {
|
||
let res = await uniCloud.importObject("cms-articles-collect").recollectArticle({
|
||
user_id: this.userInfo._id,
|
||
article_id: this.id
|
||
});
|
||
console.log(res);
|
||
this.gridLst[index].value--;
|
||
}
|
||
} else if (this.gridLst[index].text === "打赏") {
|
||
console.log("点击了打赏");
|
||
this.$refs.popup.open("bottom")
|
||
}
|
||
|
||
this.gridLst[index].select_flag = !this.gridLst[index].select_flag;
|
||
|
||
|
||
},
|
||
async detailLog(id, uid) {
|
||
console.log(uid);
|
||
let res = await uniCloud.importObject("uni-cms-articles").detailLog({
|
||
articleId: id,
|
||
userId: uid,
|
||
});
|
||
},
|
||
|
||
publishTime(timestamp) {
|
||
return translatePublishTime(timestamp)
|
||
},
|
||
|
||
setReadHistory() {
|
||
|
||
const historyCache = uni.getStorageSync('readHistory') || []
|
||
|
||
const readHistory = historyCache.filter(item => item.article_id !== this.id)
|
||
|
||
readHistory.unshift({
|
||
article_id: this.id,
|
||
last_time: Date.now()
|
||
})
|
||
|
||
uni.setStorageSync('readHistory', readHistory)
|
||
|
||
},
|
||
|
||
loadData(data) {
|
||
console.log(data);
|
||
this.gridLst[0].value = data.like_count;
|
||
this.gridLst[1].value = data.collect_count
|
||
this.gridLst[2].value = data.gift_count
|
||
this.title = data.title
|
||
this.user_id = data.user_id[0]
|
||
this.setReadHistory()
|
||
},
|
||
|
||
async onUnlockContent() {
|
||
this.$refs.detail.loadData()
|
||
},
|
||
|
||
check() {
|
||
const token = uni.getStorageSync('uni_id_token');
|
||
const tokenExpired = uni.getStorageSync('uni_id_token_expired');
|
||
const now = Date.now();
|
||
|
||
// 检查 Token 存在性 + 有效期
|
||
if (token && now < tokenExpired) {
|
||
return true;
|
||
} else if (token && now >= tokenExpired) {
|
||
uni.showToast({
|
||
title: '登录已过期',
|
||
icon: 'none'
|
||
});
|
||
this.clearLoginState(); // 清理过期凭证
|
||
return false;
|
||
}
|
||
},
|
||
checkLogin() {
|
||
// 防抖处理（防止连续触发）
|
||
if (this._lastCheckTime && Date.now() - this._lastCheckTime < 1500) return false;
|
||
this._lastCheckTime = Date.now();
|
||
|
||
try {
|
||
// 增强校验逻辑（结合本地存储和服务端验证）
|
||
const token = uni.getStorageSync('uni_id_token');
|
||
const isLogin = !!token && this.verifyTokenExpiration(token);
|
||
|
||
if (isLogin) return true;
|
||
|
||
// 优化提示交互（带图标和动画）
|
||
uni.showModal({
|
||
title: '🔐 登录提示',
|
||
content: '体验完整功能需要先登录哦~',
|
||
confirmText: '立即登录',
|
||
cancelText: '稍后再说',
|
||
confirmColor: '#007AFF',
|
||
animationType: 'slide-in-bottom',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
}
|
||
});
|
||
return false;
|
||
} catch (error) {
|
||
uni.showToast({
|
||
title: '登录状态异常，请重新登录',
|
||
icon: 'error'
|
||
});
|
||
this.clearInvalidSession();
|
||
return false;
|
||
}
|
||
},
|
||
|
||
// 新增 Token 校验方法
|
||
verifyTokenExpiration(token) {
|
||
return true;
|
||
},
|
||
|
||
// 新增会话清理
|
||
clearInvalidSession() {
|
||
uni.removeStorageSync('uni_id_token');
|
||
},
|
||
// 输入框聚焦
|
||
focusOn() {
|
||
this.checkLogin();
|
||
},
|
||
async getTreeComment(root_id) {
|
||
try {
|
||
let query = {
|
||
root_id: root_id
|
||
};
|
||
const res = await uniCloud.importObject("comments").getReplyComment(query);
|
||
console.log(res.data.commentList)
|
||
const index = this.commentData.comment.findIndex(
|
||
item => item._id === root_id
|
||
)
|
||
console.log(1, this.commentData, index)
|
||
if (index !== -1) {
|
||
console.log(this.commentData.comment);
|
||
this.commentData.comment[index].children = [...this.commentData.comment[index].children, ...res
|
||
.data.commentList
|
||
];
|
||
this.commentData.comment[index].replyCount -= res.data.commentList.length;
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('获取评论失败:', error);
|
||
// 设置默认值或提示用户
|
||
this.commentData = {
|
||
readNumer: 0,
|
||
commentSize: 0,
|
||
comment: []
|
||
};
|
||
uni.showToast({
|
||
title: '评论加载失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
},
|
||
async getComment() {
|
||
try {
|
||
console.log(this.id);
|
||
console.log('开始获取评论');
|
||
let query = {
|
||
article_id: this.id
|
||
};
|
||
const res = await uniCloud.importObject("comments").getComments(query);
|
||
|
||
const readNumer_res = await uniCloud.importObject("comments").getReadCount(query);
|
||
|
||
// 处理正常响应
|
||
this.commentData = {
|
||
readNumer: readNumer_res.data.view_count,
|
||
commentSize: res.data.commentList.length,
|
||
comment: res.data.commentList
|
||
};
|
||
} catch (error) {
|
||
console.error('获取评论失败:', error);
|
||
// 设置默认值或提示用户
|
||
this.commentData = {
|
||
readNumer: 0,
|
||
commentSize: 0,
|
||
comment: []
|
||
};
|
||
uni.showToast({
|
||
title: '评论加载失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
// 新增评论
|
||
async add(content) {
|
||
try {
|
||
// 获取当前用户信息（需确保已登录）
|
||
const uniIdToken = uni.getStorageSync('uni_id_token');
|
||
if (!uniIdToken) {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
console.log(this.id);
|
||
// 构建符合后端接口规范的评论对象
|
||
const comment = {
|
||
article_id: this.id,
|
||
content: content,
|
||
parent_id: 0,
|
||
};
|
||
|
||
// 调用云对象方法
|
||
const commentObj = uniCloud.importObject("comments");
|
||
const res = await commentObj.addComment(comment);
|
||
|
||
// 处理响应结果
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '评论成功'
|
||
});
|
||
this.commentData.comment.splice(0, 0, res.data);
|
||
this.commentData.commentSize++;
|
||
}
|
||
} catch (e) {
|
||
console.error('评论失败:', e);
|
||
|
||
// 错误分类处理（根据后端错误码映射）
|
||
const errorHandler = {
|
||
'PERMISSION_DENIED': '登录状态失效，请重新登录',
|
||
'INVALID_PARAMS': '评论内容不能为空',
|
||
'CONTENT_BLOCKED': '包含违禁词汇: ' + e.message.split(':')[1],
|
||
'PARENT_COMMENT_NOT_FOUND': '回复的评论不存在'
|
||
};
|
||
|
||
uni.showToast({
|
||
title: errorHandler[e.errorType] || '评论失败，请稍后重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
// 点赞评论
|
||
// 修改后的点赞方法（带防抖和状态反馈）
|
||
async like(comment) {
|
||
if (!this.checkLogin()) {
|
||
return;
|
||
}
|
||
|
||
// 防抖处理（500ms间隔）
|
||
if (this._lastClickTime && Date.now() - this._lastClickTime < 500) {
|
||
uni.vibrateShort();
|
||
return;
|
||
}
|
||
this._lastClickTime = Date.now();
|
||
|
||
try {
|
||
// 显示加载状态
|
||
let commentId = comment._id;
|
||
let userInfo = uniCloud.getCurrentUserInfo();
|
||
console.log(userInfo);
|
||
let uid = userInfo.uid;
|
||
|
||
const commentObj = uniCloud.importObject("comments");
|
||
const res = await commentObj.likeComment(uid, commentId);
|
||
|
||
// 更新UI状态（带动画效果）
|
||
this.$refs.hbComment.likeComplete(comment);
|
||
|
||
// 视觉反馈
|
||
} catch (error) {
|
||
console.error(error);
|
||
// 错误处理
|
||
uni.showToast({
|
||
title: error.message || '操作失败',
|
||
icon: 'error'
|
||
});
|
||
} finally {
|
||
this.reqFlag = false;
|
||
}
|
||
},
|
||
async relike(comment) {
|
||
if (!this.checkLogin()) {
|
||
return;
|
||
}
|
||
|
||
// 防抖处理（500ms间隔）
|
||
if (this._lastClickTime && Date.now() - this._lastClickTime < 500) {
|
||
uni.vibrateShort();
|
||
return;
|
||
}
|
||
this._lastClickTime = Date.now();
|
||
|
||
try {
|
||
// 显示加载状态
|
||
let commentId = comment._id;
|
||
let userInfo = uniCloud.getCurrentUserInfo();
|
||
console.log(userInfo);
|
||
let uid = userInfo.uid;
|
||
|
||
const commentObj = uniCloud.importObject("comments");
|
||
const res = await commentObj.relikeComment(uid, commentId);
|
||
|
||
// 更新UI状态（带动画效果）
|
||
this.$refs.hbComment.likeComplete(comment);
|
||
|
||
// 视觉反馈
|
||
|
||
|
||
} catch (error) {
|
||
console.error(error);
|
||
// 错误处理
|
||
uni.showToast({
|
||
title: error.message || '操作失败',
|
||
icon: 'error'
|
||
});
|
||
|
||
} finally {
|
||
this.reqFlag = false;
|
||
}
|
||
},
|
||
async replyAdd(commentReq) {
|
||
try {
|
||
let content = commentReq.content;
|
||
|
||
// 获取当前用户信息（需确保已登录）
|
||
const uniIdToken = uni.getStorageSync('uni_id_token');
|
||
if (!uniIdToken) {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
// return;
|
||
// 构建符合后端接口规范的评论对象
|
||
|
||
const comment = {
|
||
article_id: this.id,
|
||
root_id: commentReq.root_id,
|
||
content: commentReq.content,
|
||
parent_id: commentReq.pId
|
||
};
|
||
console.log(comment)
|
||
// 调用云对象方法
|
||
const commentObj = uniCloud.importObject("comments");
|
||
const res = await commentObj.replyComment(comment);
|
||
|
||
// 处理响应结果
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '评论成功'
|
||
});
|
||
// this.commentData.comment.splice(0, 0, res.data);
|
||
const index = this.commentData.comment.findIndex(
|
||
item => item._id === commentReq.root_id
|
||
);
|
||
console.log(this.commentData);
|
||
console.log(index);
|
||
if (index !== -1) {
|
||
this.commentData.comment[index].children.splice(0, 0, res.data)
|
||
this.commentData.commentSize++;
|
||
}
|
||
console.log(this.commentData.comment);
|
||
}
|
||
} catch (e) {
|
||
console.error('评论失败:', e);
|
||
|
||
const errorHandler = {
|
||
'PERMISSION_DENIED': '登录状态失效，请重新登录',
|
||
'INVALID_PARAMS': '评论内容不能为空',
|
||
'CONTENT_BLOCKED': '包含违禁词汇: ' + e.message.split(':')[1],
|
||
'PARENT_COMMENT_NOT_FOUND': '回复的评论不存在'
|
||
};
|
||
|
||
uni.showToast({
|
||
title: errorHandler[e.errorType] || '评论失败，请稍后重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
async del(item) {
|
||
try {
|
||
if (this.reqFlag) {
|
||
uni.showToast({
|
||
title: '操作受限',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
console.log(item);
|
||
|
||
this.reqFlag = true;
|
||
|
||
uni.hideToast();
|
||
|
||
uni.showLoading({
|
||
title: '安全检查中...',
|
||
mask: true
|
||
});
|
||
|
||
|
||
const {
|
||
confirm
|
||
} = await uni.showModal({
|
||
title: '删除确认',
|
||
content: '确定删除这条评论？删除后不可恢复',
|
||
confirmText: '确认删除',
|
||
confirmColor: '#dd514d'
|
||
});
|
||
|
||
if (!confirm) {
|
||
this._resetOperationState();
|
||
return;
|
||
}
|
||
|
||
|
||
let commentId = item.id;
|
||
|
||
uni.showLoading({
|
||
title: '数据删除中...',
|
||
mask: true
|
||
});
|
||
const commentObj = uniCloud.importObject("comments");
|
||
const res = await commentObj.deleteComment(commentId, item.root_id);
|
||
|
||
|
||
console.log(res);
|
||
|
||
console.log(this.commentData.comment);
|
||
|
||
if (item.root_id === 0) {
|
||
const index = this.commentData.comment.findIndex(
|
||
item => item._id === commentId
|
||
);
|
||
if (index !== -1) {
|
||
this.commentData.comment.splice(index, 1);
|
||
}
|
||
this.commentData.commentSize--;
|
||
uni.showLoading({
|
||
title: '删除成功',
|
||
mask: true
|
||
});
|
||
} else {
|
||
const index = this.commentData.comment.findIndex(
|
||
i => i._id === item.root_id
|
||
);
|
||
if (index !== -1) {
|
||
let comment = this.commentData.comment[index].children;
|
||
const index2 = comment.findIndex(
|
||
i => i._id === item.root_id
|
||
);
|
||
this.commentData.comment[index].children.splice(index2, 1);
|
||
uni.showLoading({
|
||
title: '删除成功',
|
||
mask: true
|
||
});
|
||
}
|
||
}
|
||
|
||
|
||
|
||
} catch (error) {
|
||
this._handleDeleteError(error);
|
||
|
||
this.$refs.commentList?.refresh();
|
||
|
||
} finally {
|
||
this._resetOperationState();
|
||
}
|
||
},
|
||
_updateLocalData(commentId, serverData) {
|
||
this.$store.commit('comments/REMOVE', commentId);
|
||
this.$store.commit('articles/UPDATE_STATS', {
|
||
id: serverData.article_id,
|
||
type: 'comment',
|
||
value: -1
|
||
});
|
||
},
|
||
|
||
// 错误处理（网页4/6）
|
||
_handleDeleteError(error) {
|
||
const errorConfig = {
|
||
'PERMISSION_DENIED': {
|
||
title: '操作权限不足',
|
||
icon: 'none'
|
||
},
|
||
'COMMENT_NOT_FOUND': {
|
||
title: '内容已删除',
|
||
icon: 'none'
|
||
},
|
||
'NETWORK_ERROR': {
|
||
title: '网络不稳定',
|
||
icon: 'none'
|
||
},
|
||
'default': {
|
||
title: error.errMsg || '操作失败',
|
||
icon: 'none'
|
||
}
|
||
};
|
||
console.log(error);
|
||
uni.showToast(errorConfig[error.code] || errorConfig.default);
|
||
},
|
||
inputDialogToggle() {
|
||
this.$refs.inputDialog.open()
|
||
},
|
||
btn(item) {
|
||
if (item === 0) {
|
||
this.inputDialogToggle();
|
||
} else if ([1, 3, 4, 5, 6, 7].indexOf(item)) {
|
||
uni.switchTab({
|
||
url: "/uni_modules/uni-cms-article/pages/list/slist"
|
||
})
|
||
} else if (item === 2) {
|
||
let token = uni.getStorageSync("uni_id_token");
|
||
console.log(token);
|
||
|
||
if (!token) {
|
||
uni.navigateTo({
|
||
url: "/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=weixin"
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true"
|
||
})
|
||
}
|
||
}
|
||
},
|
||
_resetOperationState() {
|
||
try {
|
||
uni.hideLoading();
|
||
} catch (e) {}
|
||
this.reqFlag = false;
|
||
},
|
||
getTree(data) {
|
||
let result = [];
|
||
let map = {};
|
||
data.forEach(item => {
|
||
map[item.id] = item;
|
||
});
|
||
data.forEach(item => {
|
||
let parent = map[item.parentId];
|
||
if (parent) {
|
||
(parent.children || (parent.children = [])).push(item);
|
||
} else {
|
||
result.push(item);
|
||
}
|
||
});
|
||
return result;
|
||
},
|
||
complaint() {
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* #ifdef APP-NVUE */
|
||
.article {
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
@mixin cp {
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.detail-loading {
|
||
margin: 100rpx auto 0;
|
||
width: 35px;
|
||
height: 35px;
|
||
animation: rotate360 2s linear infinite;
|
||
}
|
||
|
||
@keyframes rotate360 {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
transform-origin: center center;
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
transform-origin: center center;
|
||
}
|
||
}
|
||
|
||
.meta {
|
||
@include cp;
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-top: 20rpx;
|
||
|
||
.title {
|
||
.text {
|
||
font-size: 40rpx;
|
||
line-height: 66rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.excerpt {
|
||
margin-top: 10rpx;
|
||
|
||
.text {
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.author {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
margin-top: 20rpx;
|
||
|
||
.at,
|
||
.split,
|
||
.date {
|
||
font-size: 26rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
.split {
|
||
margin: 0 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.example-body {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
/* align-items: flex-end; */
|
||
/* flex-wrap: wrap; */
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.btn {
|
||
text-align: center;
|
||
color: #fff;
|
||
padding: 20rpx;
|
||
margin: 20rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #2979ff;
|
||
}
|
||
|
||
.tab {
|
||
text-indent: 2rem;
|
||
}
|
||
|
||
.v-preview {
|
||
.img {
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-area {
|
||
position: relative;
|
||
top: -50rpx;
|
||
}
|
||
|
||
.red-btn-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10rpx 0;
|
||
margin: 0 40rpx 20rpx 40rpx;
|
||
font-size: 20rpx;
|
||
|
||
.red-btn {
|
||
position: relative;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 24rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
margin: 0;
|
||
background-image: linear-gradient(to bottom, #c11c1f, #5c0201);
|
||
|
||
+.red-btn {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.red-btn-plain-area {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10rpx 0;
|
||
margin: 0 40rpx;
|
||
font-size: 21rpx;
|
||
border-top: 2px solid;
|
||
border-bottom: 2px solid;
|
||
border-image: linear-gradient(to right,
|
||
#fff,
|
||
#f44336bf,
|
||
#b13636,
|
||
#f44336bf,
|
||
#fff) 1;
|
||
|
||
.red-btn-plain {
|
||
position: relative;
|
||
color: #b13636;
|
||
font-weight: 700;
|
||
padding-left: 15rpx;
|
||
|
||
+.red-btn-plain {
|
||
margin-left: 10rpx;
|
||
|
||
&::before {
|
||
// border-left: 2px solid #f44336;
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 2px;
|
||
height: 20rpx;
|
||
background-color: #b13636;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.game_content .person_info:nth-child(1) .person_detail .user_avatar_box .rank_box {
|
||
background-image: url();
|
||
}
|
||
|
||
.game_content .person_info:nth-child(2) .person_detail .user_avatar_box .rank_box {
|
||
background-image: url();
|
||
}
|
||
|
||
.game_content .person_info:nth-child(3) .person_detail .user_avatar_box .rank_box {
|
||
background-image: url();
|
||
}
|
||
|
||
.image {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.example-body {
|
||
/* #ifndef APP-NVUE */
|
||
// display: block;
|
||
/* #endif */
|
||
}
|
||
|
||
.grid-dynamic-box {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.grid-item-box {
|
||
flex: 1;
|
||
// position: relative;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 0;
|
||
}
|
||
|
||
.grid-item-box-row {
|
||
flex: 1;
|
||
// position: relative;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 0;
|
||
}
|
||
|
||
.grid-dot {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 15px;
|
||
}
|
||
|
||
.swiper {
|
||
height: 600rpx;
|
||
}
|
||
|
||
.gifImage {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.swiper-box {
|
||
height: 800rpx;
|
||
}
|
||
|
||
.swiper-item {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 200px;
|
||
color: #fff;
|
||
}
|
||
|
||
.grid-container {
|
||
.grid-item {
|
||
width: calc(98% / 3);
|
||
}
|
||
display: flex; /* 启用 Flex 布局 */
|
||
flex-wrap: wrap; /* 允许换行 */
|
||
box-sizing: border-box; /* 包含 padding 计算 */
|
||
padding: 10rpx; /* 容器内边距（控制边缘间距） */
|
||
width: 100%; /* 确保容器宽度占满父元素 */
|
||
}
|
||
|
||
|
||
/* 外层容器 */
|
||
.wallet-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
border-radius: 16rpx;
|
||
margin: 20rpx;
|
||
}
|
||
|
||
/* 钱包信息 */
|
||
.wallet-info {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
flex: 1; /* 允许内容区域自动扩展 */
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.gift-btn {
|
||
background: #2979ff;
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
padding: 12rpx 32rpx;
|
||
font-size: 26rpx;
|
||
margin-left: 20rpx;
|
||
border: none;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.select-gift {
|
||
border: #e80 solid 1rpx;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* 处理iOS弹性盒bug */
|
||
.ios-fix {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 微信小程序特殊适配 */
|
||
::v-deep .wx-comp {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
}
|
||
/* 点击态反馈 */
|
||
.btn:active {
|
||
transform: scale(0.95);
|
||
opacity: 0.8;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
|
||
.active {
|
||
border-bottom: #3cc solid 5rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
line-height: 100rpx;
|
||
color: #c44;
|
||
}
|
||
/* 弹窗容器 */
|
||
.giftCharts {
|
||
min-height: 800rpx;
|
||
height: 100%;
|
||
|
||
|
||
}
|
||
|
||
/* 弹性容器 */
|
||
.tab-container {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
position: relative;
|
||
padding-bottom: 8rpx;
|
||
border-bottom: 2rpx solid #eee;
|
||
}
|
||
|
||
.btn-gift-charts {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
line-height: 100rpx;
|
||
color: #c44;
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
.pages view {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.pages {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.refresh {
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-box {
|
||
background-color: #FFFFFF;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
|
||
/* #ifndef APP-PLUS */
|
||
z-index: 9;
|
||
/* #endif */
|
||
}
|
||
|
||
.pages .nav {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.uni-search-box {
|
||
flex: 1;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.uni-search-box ::v-deep .uni-searchbar {
|
||
padding: 0;
|
||
}
|
||
|
||
.uni-search-box ::v-deep .uni-searchbar__box {
|
||
height: 32px;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.cover-search-bar {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
/* #ifndef APP-NVUE */
|
||
z-index: 999;
|
||
/* #endif */
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list-item__container {
|
||
flex-direction: row;
|
||
width: 100%;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list-item {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-load-more {
|
||
display: flex;
|
||
}
|
||
|
||
.pages .uni-list ::v-deep .uni-list--border:after {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.giftCharts-item {
|
||
display: flex;
|
||
align-items: center; /* 垂直居中 */
|
||
padding: 20rpx;
|
||
margin: 15rpx 0;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* 公共样式 */
|
||
[class$="-column"],
|
||
.order-index,
|
||
.gift-value {
|
||
padding: 0 15rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
/* 比例分配 */
|
||
.order-index {
|
||
flex: 1; /* 占比1 */
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #666;
|
||
}
|
||
|
||
.avatar-column {
|
||
flex: 1; /* 占比1 */
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #f0f0f0;
|
||
}
|
||
|
||
.nickname-column {
|
||
flex: 4; /* 占比4 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.gift-value {
|
||
flex: 2; /* 占比2 */
|
||
text-align: right;
|
||
color: #e6a23c;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 响应式优化 */
|
||
@media (max-width: 480px) {
|
||
.nickname-column {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.gift-value {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
</style> |