tükörképe a:
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
feat: 文章详情支持投票功能
This commit is contained in:
@@ -173,6 +173,9 @@
|
|||||||
|
|
||||||
/* 文本省略样式 结束 */
|
/* 文本省略样式 结束 */
|
||||||
|
|
||||||
|
.box-border{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
// 定义尺寸变量(单位:rpx)
|
// 定义尺寸变量(单位:rpx)
|
||||||
$spacing-sizes: (
|
$spacing-sizes: (
|
||||||
|
|||||||
@@ -0,0 +1,490 @@
|
|||||||
|
<template>
|
||||||
|
<view class="vote-card" :class="[loading]">
|
||||||
|
<view v-if="loading !=='success'" class="vote-error" @click="fnGetData()">
|
||||||
|
{{loadingText}}
|
||||||
|
</view>
|
||||||
|
<template v-else>
|
||||||
|
<view class="vote-card-head flex flex-col">
|
||||||
|
<view class="flex">
|
||||||
|
<tm-tags color="orange" style="min-width:40rpx;" :shadow="0" rounded size="s"
|
||||||
|
model="fill">{{ index+1 }}</tm-tags>
|
||||||
|
|
||||||
|
<tm-tags v-if="vote.spec.type==='single'" color="light-blue" :shadow="0" rounded size="s"
|
||||||
|
model="fill">单选</tm-tags>
|
||||||
|
<tm-tags v-else-if="vote.spec.type==='multiple'" color="light-blue" :shadow="0" rounded size="s"
|
||||||
|
model="fill">多选</tm-tags>
|
||||||
|
<tm-tags v-else-if="vote.spec.type==='pk'" color="light-blue" :shadow="0" rounded size="s"
|
||||||
|
model="fill">双选PK</tm-tags>
|
||||||
|
|
||||||
|
<tm-tags v-if="vote.spec.hasEnded" color="red" rounded :shadow="0" size="s"
|
||||||
|
model="text">已结束</tm-tags>
|
||||||
|
<tm-tags v-else color="green" rounded size="s" :shadow="0" model="text">进行中</tm-tags>
|
||||||
|
</view>
|
||||||
|
<view class="title">
|
||||||
|
{{ vote.spec.title }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="vote-card-body">
|
||||||
|
|
||||||
|
<view v-if="vote.spec.remark" class="remark text-size-s">
|
||||||
|
{{vote.spec.remark}}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 单选 -->
|
||||||
|
<view v-if="vote.spec.type==='single'" class="single">
|
||||||
|
<view class="w-full flex flex-col uh-gap-8">
|
||||||
|
<tm-button v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex" :shadow="0"
|
||||||
|
:theme="option.checked?'light-blue':'grey-lighten-3'" :plan="false" size="m"
|
||||||
|
:height="72" :block="true" class="flex-1 w-full"
|
||||||
|
@click="handleSelectSingleOption(option)">
|
||||||
|
<view class="flex flex-between w-full">
|
||||||
|
<text class="text-align-left text-overflow">
|
||||||
|
{{option.title }}
|
||||||
|
</text>
|
||||||
|
<text v-if="vote.spec.isVoted" class="flex-shrink ml-12">
|
||||||
|
{{option.percent }}%
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</tm-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 多选 -->
|
||||||
|
<view v-else-if="vote.spec.type==='multiple'" class="multiple">
|
||||||
|
<view class="w-full flex flex-col uh-gap-8">
|
||||||
|
<tm-button v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex" :shadow="0"
|
||||||
|
:theme="option.checked?'light-blue':'grey-lighten-3'" :plan="false" size="m"
|
||||||
|
:height="72" :block="true" class="flex-1 full"
|
||||||
|
@click="handleSelectCheckboxOption(option)">
|
||||||
|
<view class="flex flex-between w-full">
|
||||||
|
<text class="text-align-left text-overflow">
|
||||||
|
{{option.title }}
|
||||||
|
</text>
|
||||||
|
<text v-if="vote.spec.isVoted" class="flex-shrink ml-12">
|
||||||
|
{{option.percent }}%
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</tm-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- PK -->
|
||||||
|
<view v-else-if="vote.spec.type==='pk'" class="pk">
|
||||||
|
<view class="pk-container">
|
||||||
|
<view class="radio-item" v-for="(option,optionIndex) in vote.spec.options"
|
||||||
|
:key="optionIndex" :class="[optionIndex==0?'radio-left':'radio-right']"
|
||||||
|
:style="{width:option.percent + '%'}">
|
||||||
|
<view class="option-item"
|
||||||
|
:class="[optionIndex==0?'option-item-left':'option-item-right']">
|
||||||
|
{{option.percent }}%
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="option-foot w-full flex flex-between uh-mt-12">
|
||||||
|
<view class="w-full flex flex-col uh-gap-8">
|
||||||
|
<tm-button v-for="(option,optionIndex) in vote.spec.options" :key="optionIndex"
|
||||||
|
:shadow="0" :theme="option.checked?'light-blue':'grey-lighten-3'" :plan="false"
|
||||||
|
size="m" :height="72" :block="true" class="flex-1"
|
||||||
|
@click="handleSelectSingleOption(option)">
|
||||||
|
<view class="flex flex-between w-full">
|
||||||
|
<text class="text-align-left text-overflow">
|
||||||
|
选项{{ optionIndex+1}}:{{option.title }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</tm-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
<view class="vote-card-foot flex flex-between">
|
||||||
|
<view class="left flex">
|
||||||
|
<tm-tags color="grey-darken-2" rounded size="s"
|
||||||
|
model="text">{{ {d: vote.spec.endDate, f: 'yyyy-MM-dd HH:mm'} | formatTime }} 结束</tm-tags>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="right flex flex-end">
|
||||||
|
<tm-tags color="grey-darken-2" rounded size="s" model="text">{{ vote.stats.voteCount }}
|
||||||
|
人已参与</tm-tags>
|
||||||
|
<tm-tags v-if="vote.spec.isVoted" color="blue" rounded size="s" model="text">已投票</tm-tags>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="submitForm.voteData.length!==0" class="box-border uh-mt-12 w-full uh-px-2">
|
||||||
|
<tm-button v-if="!vote.spec.canAnonymously" theme="red" :shadow="0" class="w-full" text :block="true"
|
||||||
|
:height="72" @click="handleSubmit()">不允许匿名投票</tm-button>
|
||||||
|
<tm-button v-else-if="fnCalcIsVoted()" theme="white" text :block="true" :height="72"
|
||||||
|
class="w-full">您已参与投票</tm-button>
|
||||||
|
<tm-button v-else theme="light-blue" class="w-full" :block="true" :height="72"
|
||||||
|
@click="handleSubmit()">提交投票</tm-button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||||||
|
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
|
||||||
|
import {
|
||||||
|
voteCacheUtil
|
||||||
|
} from '@/utils/vote.js'
|
||||||
|
|
||||||
|
const types = {
|
||||||
|
"pk": "双选PK",
|
||||||
|
"multiple": "多选",
|
||||||
|
"single": "单选"
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ArticleVote",
|
||||||
|
components: {
|
||||||
|
tmButton,
|
||||||
|
tmTags
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
voteId: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: "loading",
|
||||||
|
loadingText: "加载中,请稍等...",
|
||||||
|
detail: null,
|
||||||
|
vote: null,
|
||||||
|
submitForm: {
|
||||||
|
voteData: []
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fnGetData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fnGetData() {
|
||||||
|
this.loadingText = "加载中,请稍等...";
|
||||||
|
this.loading = "loading";
|
||||||
|
this.$httpApi.v2
|
||||||
|
.getVoteDetail(this.voteId)
|
||||||
|
.then(res => {
|
||||||
|
this.pageTitle = "投票详情" + `(${types[res.vote.spec.type]})`
|
||||||
|
|
||||||
|
const tempVoteRes = res;
|
||||||
|
|
||||||
|
tempVoteRes.vote.spec.isVoted = this.fnCalcIsVoted()
|
||||||
|
tempVoteRes.vote.spec.disabled = this.fnCalcIsVoted()
|
||||||
|
|
||||||
|
tempVoteRes.vote.spec.options.map((option, index) => {
|
||||||
|
option.value = option.id
|
||||||
|
option.label = option.title
|
||||||
|
option.isVoted = this.fnCalcIsVoted()
|
||||||
|
option.checked = this.fnCalcIsChecked(option)
|
||||||
|
|
||||||
|
if (tempVoteRes.vote.spec.type === 'single') {
|
||||||
|
option.percent = this.fnCalcPercent(option, tempVoteRes.vote.stats);
|
||||||
|
} else if (tempVoteRes.vote.spec.type === 'multiple') {
|
||||||
|
option.percent = this.fnCalcPercent(option, tempVoteRes.vote.stats);
|
||||||
|
} else if (tempVoteRes.vote.spec.type === 'pk') {
|
||||||
|
option.percent = this.fnCalcPercent(option, tempVoteRes.vote.stats);
|
||||||
|
}
|
||||||
|
|
||||||
|
option.dataStr = JSON.stringify(option)
|
||||||
|
|
||||||
|
return option
|
||||||
|
})
|
||||||
|
|
||||||
|
this.vote = tempVoteRes.vote
|
||||||
|
this.detail = tempVoteRes;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = 'success';
|
||||||
|
}, 200);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error(err);
|
||||||
|
this.loading = 'error';
|
||||||
|
this.loadingText = "投票内容加载失败,点击重试"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fnCalcPercent(voteOption, stats) {
|
||||||
|
if (!this.fnCalcIsVoted()) return 0;
|
||||||
|
if (!stats?.voteDataList) return 0;
|
||||||
|
const option = stats.voteDataList.find(x => x.id == voteOption.id)
|
||||||
|
if (!option) return 0;
|
||||||
|
const percent = (option.voteCount / stats.voteCount) * 100
|
||||||
|
return Math.round(percent)
|
||||||
|
},
|
||||||
|
|
||||||
|
fnCalcIsVoted() {
|
||||||
|
return voteCacheUtil.has(this.voteId)
|
||||||
|
},
|
||||||
|
|
||||||
|
fnCalcIsChecked(option) {
|
||||||
|
const data = voteCacheUtil.get(this.voteId)
|
||||||
|
if (!data) return false;
|
||||||
|
const checked = data.selected.includes(option.id)
|
||||||
|
return checked
|
||||||
|
},
|
||||||
|
|
||||||
|
formatJsonStr(jsonStr) {
|
||||||
|
return jsonStr ? JSON.parse(jsonStr) : {}
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
if (!this.vote.spec.canAnonymously) {
|
||||||
|
uni.showModal({
|
||||||
|
icon: "none",
|
||||||
|
title: "提示",
|
||||||
|
content: "该投票不允许匿名,请到博主的 网站端 进行投票!",
|
||||||
|
cancelColor: "#666666",
|
||||||
|
cancelText: "关闭",
|
||||||
|
confirmText: "复制地址",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.$utils.copyText(this.$baseApiUrl, "复制成功")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.showLoading({
|
||||||
|
title: "正在保存..."
|
||||||
|
})
|
||||||
|
|
||||||
|
this.$httpApi.v2
|
||||||
|
.submitVote(this.voteId, this.submitForm, this.vote.spec.canAnonymously)
|
||||||
|
.then(res => {
|
||||||
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
title: "提交成功"
|
||||||
|
})
|
||||||
|
|
||||||
|
voteCacheUtil.set(this.voteId, {
|
||||||
|
selected: [...this.submitForm.voteData],
|
||||||
|
data: this.vote
|
||||||
|
})
|
||||||
|
|
||||||
|
this.fnGetData()
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.error(err);
|
||||||
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
title: "提交失败,请重试"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectSingleOption(option) {
|
||||||
|
if (this.vote.spec.disabled) return
|
||||||
|
this.vote.spec.options.map(item => {
|
||||||
|
if (option.id == item.id) {
|
||||||
|
item.checked = true
|
||||||
|
} else {
|
||||||
|
item.checked = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.submitForm.voteData = this.vote.spec.options.filter(x => x.checked).map(item => item.id)
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectCheckboxOption(option) {
|
||||||
|
if (this.vote.spec.disabled) return
|
||||||
|
this.vote.spec.options.map(item => {
|
||||||
|
if (option.id == item.id) {
|
||||||
|
item.checked = !item.checked
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.submitForm.voteData = this.vote.spec.options.filter(x => x.checked).map(item => item.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.w-full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wp-50 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 24rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
background-color: #ffff;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
padding: 0;
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: #e88080;
|
||||||
|
color: #e88080;
|
||||||
|
background-color: rgba(232, 128, 128, 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
padding: 0;
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: rgba(3, 174, 252, 1);
|
||||||
|
color: rgba(3, 174, 252, 1);
|
||||||
|
background-color: rgba(3, 174, 252, 0.075);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.vote-error {
|
||||||
|
padding: 50rpx 24rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-card-head {
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding: 12rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-card-body {
|
||||||
|
|
||||||
|
.remark {
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgba(0, 0, 0, 0.75);
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-card-foot {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 6px;
|
||||||
|
margin-top: 12px;
|
||||||
|
border-top: 2rpx solid #eee;
|
||||||
|
|
||||||
|
.left {}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.single {
|
||||||
|
::v-deep {
|
||||||
|
.tm-groupradio {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tm-checkbox {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tm-button-label {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiple {
|
||||||
|
::v-deep {
|
||||||
|
.tm-groupcheckbox {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tm-checkbox {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tm-button-label {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pk {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
|
||||||
|
::v-deep {
|
||||||
|
.pk-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item {
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: 30% !important;
|
||||||
|
max-width: 70% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-left {}
|
||||||
|
|
||||||
|
.radio-right {}
|
||||||
|
|
||||||
|
.option-item {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 24rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item-left {
|
||||||
|
background: linear-gradient(90deg, #3B82F6, #60A5FA);
|
||||||
|
color: white;
|
||||||
|
clip-path: polygon(0 0, calc(100% - 40rpx) 0, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-item-right {
|
||||||
|
background: linear-gradient(90deg, #F87171, #EF4444);
|
||||||
|
color: white;
|
||||||
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 40rpx 100%);
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-foot {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
const _DEV_ = false
|
const _DEV_ = false
|
||||||
const _DEV_TO_TYPE_ = "page"
|
const _DEV_TO_TYPE_ = "page"
|
||||||
const _DEV_TO_PATH_ = "/pagesA/votes/votes"
|
const _DEV_TO_PATH_ = ""
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [pluginAvailable],
|
mixins: [pluginAvailable],
|
||||||
@@ -71,7 +71,7 @@
|
|||||||
methods: {
|
methods: {
|
||||||
fnCheckShowStarted() {
|
fnCheckShowStarted() {
|
||||||
// 本地开发,快速跳转页面,发布请设置 _DEV_ = false
|
// 本地开发,快速跳转页面,发布请设置 _DEV_ = false
|
||||||
if (_DEV_) {
|
if (_DEV_ && _DEV_TO_PATH_) {
|
||||||
if (_DEV_TO_TYPE_ == 'tabbar') {
|
if (_DEV_TO_TYPE_ == 'tabbar') {
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: _DEV_TO_PATH_
|
url: _DEV_TO_PATH_
|
||||||
|
|||||||
@@ -79,17 +79,10 @@
|
|||||||
<view class="markdown-wrap">
|
<view class="markdown-wrap">
|
||||||
<view v-if="checkPostRestrictRead(result)">
|
<view v-if="checkPostRestrictRead(result)">
|
||||||
<view v-if="showContentArr.length == 0">
|
<view v-if="showContentArr.length == 0">
|
||||||
<restrict-read-skeleton
|
<restrict-read-skeleton :loading="true" :lines="3"
|
||||||
:loading="true"
|
:tip-text="`此处内容已隐藏,「${getRestrictReadTypeName(result)}可见」`" button-text="查看更多"
|
||||||
:lines="3"
|
button-color="#1890ff" skeleton-color="#f0f0f0" skeleton-highlight="#e0e0e0"
|
||||||
:tip-text="`此处内容已隐藏,「${getRestrictReadTypeName(result)}可见」`"
|
animation-duration="2" @refresh="readMore" />
|
||||||
button-text="查看更多"
|
|
||||||
button-color="#1890ff"
|
|
||||||
skeleton-color="#f0f0f0"
|
|
||||||
skeleton-highlight="#e0e0e0"
|
|
||||||
animation-duration="2"
|
|
||||||
@refresh="readMore"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
<view v-else v-for="showContent in showContentArr">
|
<view v-else v-for="showContent in showContentArr">
|
||||||
<mp-html class="evan-markdown" lazy-load :domain="markdownConfig.domain"
|
<mp-html class="evan-markdown" lazy-load :domain="markdownConfig.domain"
|
||||||
@@ -97,28 +90,42 @@
|
|||||||
:tag-style="markdownConfig.tagStyle" :container-style="markdownConfig.containStyle"
|
:tag-style="markdownConfig.tagStyle" :container-style="markdownConfig.containStyle"
|
||||||
:content="showContent" :markdown="true" :showLineNumber="true" :showLanguageName="true"
|
:content="showContent" :markdown="true" :showLineNumber="true" :showLanguageName="true"
|
||||||
:copyByLongPress="true" />
|
:copyByLongPress="true" />
|
||||||
<restrict-read-skeleton
|
<restrict-read-skeleton :loading="true" :lines="3"
|
||||||
:loading="true"
|
:tip-text="`此处内容已隐藏,「${getRestrictReadTypeName(result)}可见」`" button-text="查看更多"
|
||||||
:lines="3"
|
button-color="#1890ff" skeleton-color="#f0f0f0" skeleton-highlight="#e0e0e0"
|
||||||
:tip-text="`此处内容已隐藏,「${getRestrictReadTypeName(result)}可见」`"
|
animation-duration="2" @refresh="readMore" />
|
||||||
button-text="查看更多"
|
|
||||||
button-color="#1890ff"
|
|
||||||
skeleton-color="#f0f0f0"
|
|
||||||
skeleton-highlight="#e0e0e0"
|
|
||||||
animation-duration="2"
|
|
||||||
@refresh="readMore"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
<mp-html class="evan-markdown" lazy-load :domain="markdownConfig.domain"
|
<mp-html class="evan-markdown" lazy-load :domain="markdownConfig.domain"
|
||||||
:loading-img="markdownConfig.loadingGif" :scroll-table="true" :selectable="true"
|
:loading-img="markdownConfig.loadingGif" :scroll-table="true" :selectable="true"
|
||||||
:tag-style="markdownConfig.tagStyle" :container-style="markdownConfig.containStyle"
|
:tag-style="markdownConfig.tagStyle" :container-style="markdownConfig.containStyle"
|
||||||
:content="result.content.raw" :markdown="true" :showLineNumber="true" :showLanguageName="true"
|
:content="result.content.raw" :markdown="true" :showLineNumber="true"
|
||||||
:copyByLongPress="true"/>
|
:showLanguageName="true" :copyByLongPress="true" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 投票 -->
|
||||||
|
<view v-if="result._voteIds.length!==0" class="vote-wrap copyright-wrap bg-white mt-24 pa-24 round-4">
|
||||||
|
<PluginUnavailable v-if="!uniHaloPluginAvailable" :pluginId="uniHaloPluginId"
|
||||||
|
:error-text="uniHaloPluginAvailableError" />
|
||||||
|
<template v-else>
|
||||||
|
<view class="copyright-title text-weight-b flex items-center justify-between">
|
||||||
|
<text>相关投票</text>
|
||||||
|
<text class="vote-opra" @click="voteIsOpen=!voteIsOpen">
|
||||||
|
{{ voteIsOpen?'收起':'展开' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view v-show="voteIsOpen" class="flex flex-col uh-gap-8 uh-mt-8">
|
||||||
|
<ArticleVote v-for="(voteId,voteIdIndex) in result._voteIds" :key="voteId" :voteId="voteId" :index="voteIdIndex">
|
||||||
|
</ArticleVote>
|
||||||
|
</view>
|
||||||
|
<view v-show="!voteIsOpen" class="vote-tip" @click="voteIsOpen=!voteIsOpen">
|
||||||
|
投票已收起,点击展开 {{result._voteIds.length}} 个投票项
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 版权声明 -->
|
<!-- 版权声明 -->
|
||||||
<view v-if="postDetailConfig && postDetailConfig.copyrightEnabled"
|
<view v-if="postDetailConfig && postDetailConfig.copyrightEnabled"
|
||||||
class="copyright-wrap bg-white mt-24 pa-24 round-4">
|
class="copyright-wrap bg-white mt-24 pa-24 round-4">
|
||||||
@@ -248,24 +255,18 @@
|
|||||||
|
|
||||||
<!-- 验证码弹窗 -->
|
<!-- 验证码弹窗 -->
|
||||||
<tm-dialog v-model="verificationCodeModal.show" :disabled="true" title="验证提示"
|
<tm-dialog v-model="verificationCodeModal.show" :disabled="true" title="验证提示"
|
||||||
:confirmText="verificationCodeModal.confirmText"
|
:confirmText="verificationCodeModal.confirmText" :showCancel="true" model="verificationCodeModal.model"
|
||||||
:showCancel="true" model="verificationCodeModal.model" theme="split" confirmColor="blue shadow-blue-0"
|
theme="split" confirmColor="blue shadow-blue-0" @cancel="verificationCodeModal.show = false"
|
||||||
@cancel="verificationCodeModal.show = false"
|
|
||||||
@confirm="restrictReadCheckOrViewVideo">
|
@confirm="restrictReadCheckOrViewVideo">
|
||||||
<template #default>
|
<template #default>
|
||||||
<view class="pa-20">
|
<view class="pa-20">
|
||||||
<!-- 扫码验证模式 -->
|
<!-- 扫码验证模式 -->
|
||||||
<view v-if="verificationCodeModal.type === 'scan'" class="flex flex-col flex-center">
|
<view v-if="verificationCodeModal.type === 'scan'" class="flex flex-col flex-center">
|
||||||
<text class="mb-20">请扫描下方二维码获取验证码</text>
|
<text class="mb-20">请扫描下方二维码获取验证码</text>
|
||||||
<tm-images
|
<tm-images :width="180" :height="180" :src="verificationCodeModal.imgUrl" preview
|
||||||
:width="180"
|
round="5"></tm-images>
|
||||||
:height="180"
|
<tm-input bg-color="grey-lighten-5" required v-model="restrictReadInputCode"
|
||||||
:src="verificationCodeModal.imgUrl"
|
placeholder="请输入验证码" :border-bottom="false" :flat="true"></tm-input>
|
||||||
preview
|
|
||||||
round="5"
|
|
||||||
></tm-images>
|
|
||||||
<tm-input bg-color="grey-lighten-5" required v-model="restrictReadInputCode" placeholder="请输入验证码"
|
|
||||||
:border-bottom="false" :flat="true"></tm-input>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 观看视频模式 -->
|
<!-- 观看视频模式 -->
|
||||||
@@ -278,8 +279,7 @@
|
|||||||
<!-- 密码弹窗 -->
|
<!-- 密码弹窗 -->
|
||||||
<tm-dialog v-model="passwordModal.show" :disabled="true" title="验证提示" confirmText="确定" content="请输入密码"
|
<tm-dialog v-model="passwordModal.show" :disabled="true" title="验证提示" confirmText="确定" content="请输入密码"
|
||||||
:showCancel="true" model="confirm" theme="split" confirmColor="blue shadow-blue-0"
|
:showCancel="true" model="confirm" theme="split" confirmColor="blue shadow-blue-0"
|
||||||
:input-val.sync="restrictReadInputCode"
|
:input-val.sync="restrictReadInputCode" @cancel="passwordModal.show = false"
|
||||||
@cancel="passwordModal.show = false"
|
|
||||||
@confirm="restrictReadCheck"></tm-dialog>
|
@confirm="restrictReadCheck"></tm-dialog>
|
||||||
|
|
||||||
<!-- 评论弹窗 -->
|
<!-- 评论弹窗 -->
|
||||||
@@ -305,11 +305,16 @@ import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
|
|||||||
import commentList from '@/components/comment-list/comment-list.vue';
|
import commentList from '@/components/comment-list/comment-list.vue';
|
||||||
import commentItem from '@/components/comment-item/comment-item.vue';
|
import commentItem from '@/components/comment-item/comment-item.vue';
|
||||||
import commentModal from '@/components/comment-modal/comment-modal.vue';
|
import commentModal from '@/components/comment-modal/comment-modal.vue';
|
||||||
|
import ArticleVote from '@/components/article-vote/article-vote.vue';
|
||||||
|
|
||||||
import rCanvas from '@/components/r-canvas/r-canvas.vue';
|
import rCanvas from '@/components/r-canvas/r-canvas.vue';
|
||||||
import barrage from '@/components/barrage/barrage.vue';
|
import barrage from '@/components/barrage/barrage.vue';
|
||||||
import {getAppConfigs} from '@/config/index.js'
|
import {
|
||||||
import {upvote} from '@/utils/upvote.js'
|
getAppConfigs
|
||||||
|
} from '@/config/index.js'
|
||||||
|
import {
|
||||||
|
upvote
|
||||||
|
} from '@/utils/upvote.js'
|
||||||
import {
|
import {
|
||||||
checkPostRestrictRead,
|
checkPostRestrictRead,
|
||||||
copyToClipboard,
|
copyToClipboard,
|
||||||
@@ -320,9 +325,11 @@ import HaloTokenConfig from "@/config/uhalo.config";
|
|||||||
import RestrictReadSkeleton from "@/components/restrict-read-skeleton/restrict-read-skeleton.vue";
|
import RestrictReadSkeleton from "@/components/restrict-read-skeleton/restrict-read-skeleton.vue";
|
||||||
import TmImages from "@/tm-vuetify/components/tm-images/tm-images.vue";
|
import TmImages from "@/tm-vuetify/components/tm-images/tm-images.vue";
|
||||||
import TmInput from "@/tm-vuetify/components/tm-input/tm-input.vue";
|
import TmInput from "@/tm-vuetify/components/tm-input/tm-input.vue";
|
||||||
|
import pluginAvailable from "@/common/mixins/pluginAvailable.js"
|
||||||
|
|
||||||
let videoAd = null;
|
let videoAd = null;
|
||||||
export default {
|
export default {
|
||||||
|
mixins:[pluginAvailable],
|
||||||
components: {
|
components: {
|
||||||
TmInput,
|
TmInput,
|
||||||
TmImages,
|
TmImages,
|
||||||
@@ -339,7 +346,8 @@ export default {
|
|||||||
commentItem,
|
commentItem,
|
||||||
rCanvas,
|
rCanvas,
|
||||||
barrage,
|
barrage,
|
||||||
commentModal
|
commentModal,
|
||||||
|
ArticleVote
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -389,7 +397,9 @@ export default {
|
|||||||
title: ""
|
title: ""
|
||||||
},
|
},
|
||||||
|
|
||||||
commentListScrollTop: 0
|
commentListScrollTop: 0,
|
||||||
|
|
||||||
|
voteIsOpen: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -436,7 +446,12 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(e) {
|
async onLoad(e) {
|
||||||
|
// 检查插件
|
||||||
|
this.setPluginId(this.NeedPluginIds.PluginVote)
|
||||||
|
this.setPluginError("阿偶,检测到当前插件没有安装或者启用,无法使用投票功能,请联系管理员")
|
||||||
|
await this.checkPluginAvailable()
|
||||||
|
|
||||||
this.fnSetPageTitle('文章加载中...');
|
this.fnSetPageTitle('文章加载中...');
|
||||||
this.queryParams.name = e.name;
|
this.queryParams.name = e.name;
|
||||||
this.fnGetData();
|
this.fnGetData();
|
||||||
@@ -472,7 +487,8 @@ export default {
|
|||||||
.getPostByName(this.queryParams.name)
|
.getPostByName(this.queryParams.name)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
console.log('详情', res);
|
console.log('详情', res);
|
||||||
this.result = res;
|
const tempResult = res;
|
||||||
|
tempResult._voteIds = this.extractVoteBlockIds(res.content?.raw || res.content?.content || "")
|
||||||
|
|
||||||
const openid = uni.getStorageSync('openid');
|
const openid = uni.getStorageSync('openid');
|
||||||
if (openid === '' || openid === null) {
|
if (openid === '' || openid === null) {
|
||||||
@@ -480,11 +496,11 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const toolsPluginEnabled = getAppConfigs().pluginConfig.toolsPlugin?.enabled;
|
const toolsPluginEnabled = getAppConfigs().pluginConfig.toolsPlugin?.enabled;
|
||||||
const restrictRead = checkPostRestrictRead(this.result);
|
const restrictRead = checkPostRestrictRead(tempResult);
|
||||||
|
|
||||||
if (restrictRead && toolsPluginEnabled) {
|
if (restrictRead && toolsPluginEnabled) {
|
||||||
let verifyCodeType = getAppConfigs().pluginConfig.toolsPlugin?.verifyCodeType;
|
let verifyCodeType = getAppConfigs().pluginConfig.toolsPlugin?.verifyCodeType;
|
||||||
const postVerifyCodeType = this.result?.metadata?.annotations?.verifyCodeType;
|
const postVerifyCodeType = tempResult?.metadata?.annotations?.verifyCodeType;
|
||||||
if (postVerifyCodeType) {
|
if (postVerifyCodeType) {
|
||||||
verifyCodeType = postVerifyCodeType;
|
verifyCodeType = postVerifyCodeType;
|
||||||
}
|
}
|
||||||
@@ -505,10 +521,10 @@ export default {
|
|||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
const showableContentArr = getShowableContent(this.result);
|
const showableContentArr = getShowableContent(tempResult);
|
||||||
this.showContentArr = showableContentArr;
|
this.showContentArr = showableContentArr;
|
||||||
}
|
}
|
||||||
|
this.result = tempResult;
|
||||||
this.fnSetPageTitle('文章详情');
|
this.fnSetPageTitle('文章详情');
|
||||||
this.loading = 'success';
|
this.loading = 'success';
|
||||||
this.fnHandleSetFlotButtonItems(this.haloConfigs);
|
this.fnHandleSetFlotButtonItems(this.haloConfigs);
|
||||||
@@ -970,7 +986,8 @@ export default {
|
|||||||
filePath: this.poster.url,
|
filePath: this.poster.url,
|
||||||
success: () => {
|
success: () => {
|
||||||
uni.$tm.toast('保存成功');
|
uni.$tm.toast('保存成功');
|
||||||
}, fail: (e) => {
|
},
|
||||||
|
fail: (e) => {
|
||||||
uni.$tm.toast('保存失败,请重试');
|
uni.$tm.toast('保存失败,请重试');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -1140,7 +1157,8 @@ export default {
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.$httpApi.v2.requestRestrictReadCheck(this.result?.metadata?.annotations?.restrictReadEnable, this.restrictReadInputCode, this.result?.metadata?.name)
|
this.$httpApi.v2.requestRestrictReadCheck(this.result?.metadata?.annotations?.restrictReadEnable, this
|
||||||
|
.restrictReadInputCode, this.result?.metadata?.name)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.passwordModal.show = false;
|
this.passwordModal.show = false;
|
||||||
@@ -1162,8 +1180,7 @@ export default {
|
|||||||
videoAd = wx.createRewardedVideoAd({
|
videoAd = wx.createRewardedVideoAd({
|
||||||
adUnitId: this.verificationCodeModal.adId
|
adUnitId: this.verificationCodeModal.adId
|
||||||
})
|
})
|
||||||
videoAd.onError(err => {
|
videoAd.onError(err => {})
|
||||||
})
|
|
||||||
videoAd.onClose((status) => {
|
videoAd.onClose((status) => {
|
||||||
if (status && status.isEnded || status === undefined) {
|
if (status && status.isEnded || status === undefined) {
|
||||||
//这里写广告播放完成后的事件
|
//这里写广告播放完成后的事件
|
||||||
@@ -1223,6 +1240,27 @@ export default {
|
|||||||
}).exec();
|
}).exec();
|
||||||
}, 2 * 1000)
|
}, 2 * 1000)
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从HTML字符串中提取所有vote-block的id
|
||||||
|
* @param {string} html - 包含vote-block的HTML字符串
|
||||||
|
* @returns {string[]} 提取到的id数组
|
||||||
|
*/
|
||||||
|
extractVoteBlockIds(html) {
|
||||||
|
// 正则表达式匹配<vote-block id="xxx">格式
|
||||||
|
// 捕获组提取id值
|
||||||
|
const regex = /<vote-block\s+id="(vote-\w+)"\s*\/?>/g;
|
||||||
|
const ids = [];
|
||||||
|
let match;
|
||||||
|
|
||||||
|
// 循环匹配所有符合条件的id
|
||||||
|
while ((match = regex.exec(html)) !== null) {
|
||||||
|
// 第一个捕获组是id值
|
||||||
|
ids.push(match[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ids;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1284,8 +1322,7 @@ export default {
|
|||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|
||||||
&-name {
|
&-name {}
|
||||||
}
|
|
||||||
|
|
||||||
&-time {
|
&-time {
|
||||||
margin-left: 36rpx;
|
margin-left: 36rpx;
|
||||||
@@ -1397,6 +1434,25 @@ export default {
|
|||||||
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03);
|
box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vote-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vote-opra {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
color:#999;
|
||||||
|
}
|
||||||
|
.vote-tip{
|
||||||
|
margin-top:12rpx;
|
||||||
|
padding:50rpx 24rpx;
|
||||||
|
background:#F1F5F9;
|
||||||
|
color:#666;
|
||||||
|
font-size:24rpx;
|
||||||
|
border-radius:12rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.markdown-wrap {
|
.markdown-wrap {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
|
|||||||
@@ -193,7 +193,6 @@
|
|||||||
class="w-full">您已参与投票</tm-button>
|
class="w-full">您已参与投票</tm-button>
|
||||||
<tm-button v-else theme="light-blue" class="w-full" :block="true"
|
<tm-button v-else theme="light-blue" class="w-full" :block="true"
|
||||||
@click="handleSubmit()">提交投票</tm-button>
|
@click="handleSubmit()">提交投票</tm-button>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</block>
|
</block>
|
||||||
|
|||||||
Reference in New Issue
Block a user