771 lines
18 KiB
Vue
771 lines
18 KiB
Vue
<template>
|
||
<view class="body">
|
||
<uni-nav-bar
|
||
title="预览"
|
||
leftText="取消"
|
||
left-icon="left"
|
||
right-text="完成"
|
||
backgroundColor="#ffffff"
|
||
color="#000000"
|
||
@clickRight="success()"
|
||
@clickLeft="back()">
|
||
</uni-nav-bar>
|
||
|
||
<view class="v-preview" v-if="temp && temp.temptele_src">
|
||
<image :src="temp.temptele_src" 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>
|
||
|
||
<view class="" :style="backgrond_color">
|
||
<u-parse :content="titleContent"></u-parse>
|
||
|
||
<view class="">
|
||
<view class="meta">
|
||
|
||
<view class="author">
|
||
|
||
<cloud-image
|
||
height="64rpx" width="64rpx" borderRadius="50%"
|
||
:src="userInfo.avatar_file.url"></cloud-image>
|
||
<text class="at" :style="color">{{ userInfo.nickname || '' }}</text>
|
||
<text class="split">·</text>
|
||
|
||
<text class="date" :style="color">刚刚</text>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<view class="">
|
||
<view class="" v-for="(item, index) in cms.cmsLst" :key="index">
|
||
<u-parse
|
||
:content="item.html"
|
||
v-if="item.type === 'image' || item.type === 'video'">
|
||
</u-parse>
|
||
<view class="" v-if="item.type === 'image'"
|
||
style="width: 100wv;margin-top: 30rpx;margin-bottom: 30rpx;">
|
||
<cloud-image
|
||
width="100%"
|
||
height="500rpx"
|
||
mode="aspectFit"
|
||
:src="item.image.src">
|
||
</cloud-image>
|
||
</view>
|
||
<view class="" v-if="item.type === 'video'"
|
||
style="width: 100wv;margin-top: 30rpx;margin-bottom: 30rpx;">
|
||
<!-- <cloud-image
|
||
width="100%"
|
||
height="500rpx"
|
||
mode="aspectFit"
|
||
:src="item.video.poster">
|
||
</cloud-image> -->
|
||
<video
|
||
style="width: 100%; height: 500rpx;"
|
||
:src="item.video.src"
|
||
enable-danmu
|
||
danmu-btn
|
||
controls>
|
||
</video>
|
||
|
||
</view>
|
||
|
||
<view class="" v-if="item.type === 'vote'">
|
||
<uni-card>
|
||
<view class="vote-container">
|
||
<text class="vote-title">{{ item.vote.voteTitle }}</text>
|
||
<text class="deadline">截止时间：{{ item.vote.datetime }}</text>
|
||
<view class="" v-if="item.vote.type === voteType[0]">
|
||
<u-radio-group
|
||
v-model="item.vote.selectValue"
|
||
placement="column"
|
||
@change="groupChange"
|
||
wrap
|
||
>
|
||
|
||
<u-radio
|
||
:customStyle="{marginBottom: '8px'}"
|
||
v-for="(radio, radioIndex) in item.vote.voteLst"
|
||
:key="radioIndex"
|
||
:label="radio.value"
|
||
:name="radio.value"
|
||
@change="radioChange"
|
||
style="width: 100%;"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
|
||
<view class="" v-if="item.vote.type === voteType[1]">
|
||
<u-checkbox-group
|
||
v-model="item.vote.selectValue"
|
||
placement="column"
|
||
@change="checkboxChange"
|
||
>
|
||
<u-checkbox
|
||
:customStyle="{marginBottom: '8px'}"
|
||
v-for="(checkbox, checkboxIndex) in item.vote.voteLst"
|
||
:key="checkboxIndex"
|
||
:label="checkbox.value"
|
||
:name="checkbox.value"
|
||
>
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
|
||
<view class="" v-if="item.vote.type === voteType[2]">
|
||
<u-checkbox-group
|
||
v-model="item.vote.selectValue"
|
||
placement="column"
|
||
@change="checkboxChange"
|
||
|
||
>
|
||
<view class="">
|
||
<u-checkbox
|
||
:customStyle="{marginBottom: '8px'}"
|
||
v-for="(checkbox, checkboxIndex) in item.vote.voteLst"
|
||
:key="checkboxIndex"
|
||
:label="checkbox.value"
|
||
:name="checkbox.value"
|
||
:disabled="isCheckboxDisabled(item.vote.selectValue, checkbox.value)"
|
||
>
|
||
</u-checkbox>
|
||
</view>
|
||
|
||
</u-checkbox-group>
|
||
</view>
|
||
|
||
|
||
<view class=""
|
||
v-if="isExpired"
|
||
:disabled="isExpired || !selectedValue"
|
||
style="border-top: 3rpx solid #ccc;padding-top: 20rpx;margin-top: 20rpx;
|
||
text-align: center;;">
|
||
已截止
|
||
</view>
|
||
|
||
<view class=""
|
||
v-else
|
||
:disabled="isExpired || !selectedValue"
|
||
style="border-top: 3rpx solid #ccc;padding-top: 20rpx;margin-top: 20rpx;
|
||
text-align: center;;">
|
||
{{ isExpired ? '已截止' : '点击登录后投票' }}
|
||
</view>
|
||
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
<u-tabbar
|
||
:value="tabbarValue"
|
||
>
|
||
<u-tabbar-item
|
||
v-for="(item, index) in tabbarText"
|
||
:key="index"
|
||
@click="tabbarClick"
|
||
:text="item.text">
|
||
</u-tabbar-item>
|
||
|
||
</u-tabbar>
|
||
|
||
<hqs-popup :title="tabbarText[tabbarValue].text" :from="popFrom" :mask-click="maskClick"
|
||
@back="onBack"
|
||
v-model="showPop">
|
||
<view class="page-container" v-if="tabbarText[tabbarValue].text === '模板'">
|
||
<media-list
|
||
:dataType="'template'"
|
||
:pageSize="12"
|
||
:currentTemplate="updateTemplateConfig"
|
||
@update="updateTemplate"
|
||
/>
|
||
</view>
|
||
|
||
<view class="page-container" v-if="tabbarText[tabbarValue].text === '音乐'">
|
||
<media-list
|
||
:dataType="'music'"
|
||
:pageSize="12"
|
||
:currentTemplate="updateTemplateConfig"
|
||
@update="updateTemplate"
|
||
/>
|
||
</view>
|
||
|
||
<!-- <view class="page-container" v-if="tabbarText[tabbarValue].text === '字体'">
|
||
<media-list
|
||
:dataType="'font'"
|
||
:pageSize="12"
|
||
:currentTemplate="updateTemplateConfig"
|
||
@update="updateTemplate"
|
||
/>
|
||
</view> -->
|
||
|
||
<view class="page-container" v-if="tabbarText[tabbarValue].text === '排版'">
|
||
<!-- <media-list
|
||
:dataType="'font'"
|
||
:pageSize="12"
|
||
:currentTemplate="updateTemplateConfig"
|
||
@update="updateTemplate"
|
||
/> -->
|
||
|
||
</view>
|
||
</hqs-popup>
|
||
|
||
<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">
|
||
<uni-icons :type="item.icon" :size="30"
|
||
:color="item.select_flag?select_icon_color:icon_color" />
|
||
<text class="text" :style="item.select_flag?select_font_color:icon_font_color">
|
||
{{item.value?item.value:0}}
|
||
</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const uniIdCo = uniCloud.importObject("uni-id-co")
|
||
|
||
import {
|
||
store,
|
||
mutations
|
||
} from '@/pages3/uni_modules/uni-id-pages/common/store.js';
|
||
import uRadioGroup from "@/uni_modules/uview-ui/components/u-radio-group/u-radio-group.vue";
|
||
import uRadio from "@/uni_modules/uview-ui/components/u-radio/u-radio.vue";
|
||
import uParse from "@/uni_modules/uview-ui/components/u-parse/u-parse.vue";
|
||
import uTabbar from "@/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue";
|
||
import uTabbarItem from "@/uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue";
|
||
import mediaList from "@/components/image-grid/media-list.vue";
|
||
import cloudImage from "@/components/cloud-image.vue";
|
||
import uCheckboxGroup from "@/uni_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue";
|
||
import uCheckbox from "@/uni_modules/uview-ui/components/u-checkbox/u-checkbox.vue";
|
||
|
||
export default {
|
||
computed: {
|
||
btn_send_commends_color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `background-color: ${this.temp.btn_send_commends_color};`
|
||
},
|
||
btn_send_commends_font_color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `color: ${this.temp.btn_send_commends_font_color};`
|
||
},
|
||
btn_color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `color: ${this.temp.btn_color}`
|
||
},
|
||
select_icon_color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `${this.temp.select_icon_color};`
|
||
},
|
||
icon_color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `${this.temp.icon_color};`
|
||
},
|
||
icon_font_color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `color:${this.temp.icon_color};`
|
||
},
|
||
select_font_color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `color: ${this.temp.select_icon_color};`
|
||
},
|
||
backgrond_color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `background-color: ${this.temp.backgrond_color};`
|
||
},
|
||
color() {
|
||
if (!this.temp) {
|
||
return "";
|
||
}
|
||
return `color: ${this.temp.font_color};`
|
||
},
|
||
userInfo() {
|
||
return store.userInfo
|
||
},
|
||
realNameStatus() {
|
||
if (!this.userInfo.realNameAuth) {
|
||
return 0
|
||
}
|
||
|
||
return this.userInfo.realNameAuth.authStatus
|
||
},
|
||
isExpired(voteEndTime) {
|
||
return new Date() > new Date(voteEndTime);
|
||
},
|
||
|
||
},
|
||
async onShow() {
|
||
let cms = uni.getStorageSync("cms");
|
||
this.titleContent = cms.title_html;
|
||
this.cms = cms;
|
||
|
||
await this.getTemp();
|
||
|
||
},
|
||
components: {
|
||
uTabbar,
|
||
uTabbarItem,
|
||
mediaList,
|
||
uParse,
|
||
cloudImage,
|
||
uRadioGroup,
|
||
uRadio,
|
||
uCheckboxGroup,
|
||
uCheckbox
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
voteType: [
|
||
"单选（默认)",
|
||
"多选，无限制",
|
||
"多选， 最多两项"
|
||
],
|
||
|
||
|
||
voteEndTime: '2025-04-20 23:59:59', // 截止时间
|
||
|
||
cms:{},
|
||
|
||
temp: {},
|
||
titleContent:"",
|
||
con: "<p>露从今夜白，月是故乡明</p>",
|
||
tabbarValue: 0,
|
||
tabbarText: [
|
||
{
|
||
text: "模板",
|
||
|
||
},
|
||
{
|
||
text: "音乐"
|
||
},
|
||
{
|
||
text: "排版"
|
||
}
|
||
],
|
||
|
||
currentTemplate: "",
|
||
templateConfig: [
|
||
|
||
],
|
||
|
||
showPop: false,
|
||
popFrom: 'bottom',
|
||
list: new Array(20).fill(0),
|
||
maskClick: true,
|
||
}
|
||
},
|
||
methods: {
|
||
isCheckboxDisabled(arr, name) {
|
||
console.log(arr, name)
|
||
if (arr.length < 2 || arr.includes(name)) {
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
checkboxChange(e) {
|
||
console.log(e)
|
||
},
|
||
groupChange(n) {
|
||
console.log('groupChange', n);
|
||
},
|
||
radioChange(n) {
|
||
console.log('radioChange', n);
|
||
},
|
||
formatDate(date, format) {
|
||
const map = {
|
||
'yyyy': date.getFullYear(),
|
||
'MM': String(date.getMonth() + 1).padStart(2, '0'),
|
||
'dd': String(date.getDate()).padStart(2, '0'),
|
||
'HH': String(date.getHours()).padStart(2, '0'),
|
||
'mm': String(date.getMinutes()).padStart(2, '0'),
|
||
'ss': String(date.getSeconds()).padStart(2, '0')
|
||
};
|
||
|
||
return format.replace(
|
||
/yyyy|MM|dd|HH|mm|ss/g,
|
||
matched => map[matched]
|
||
);
|
||
},
|
||
// 时间格式化
|
||
formatTime() {
|
||
return this.formatDate(new Date(), 'yyyy-MM-dd HH:mm');
|
||
},
|
||
async getTemp() {
|
||
console.log(this.currentTemplate)
|
||
if (this.currentTemplate === "not_image") {
|
||
this.temp = {};
|
||
}
|
||
if (!this.currentTemplate) {
|
||
this.temp = {};
|
||
return
|
||
}
|
||
const temp = await uniCloud.importObject("uni-cms-articles").getTemp({
|
||
temp_id: this.currentTemplate
|
||
})
|
||
console.log(temp);
|
||
if (temp.code === 200) {
|
||
this.temp = temp.data;
|
||
}
|
||
},
|
||
async updateTemplate(e) {
|
||
console.log(e);
|
||
this.currentTemplate = e;
|
||
await this.getTemp();
|
||
},
|
||
onBack() {
|
||
uni.showToast({
|
||
title: 'test',
|
||
})
|
||
},
|
||
onShowPopup(e) {
|
||
this.showPop = e.detail.value
|
||
},
|
||
onMaskClick(e) {
|
||
this.maskClick = e.detail.value
|
||
},
|
||
showPopupFrom(from) {
|
||
this.showPop = true
|
||
},
|
||
tabbarClick(e) {
|
||
console.log(e)
|
||
this.tabbarValue = e;
|
||
this.showPopupFrom();
|
||
},
|
||
async success() {
|
||
let cms = uni.getStorageSync("cms");
|
||
let id = cms._id;
|
||
let title = cms.title;
|
||
let title_html = cms.title_html;
|
||
let title_delta = cms.title_delta;
|
||
let temp_id = this.currentTemplate;
|
||
let music_url_id = "";
|
||
let edit_type = "mobile";
|
||
let view_count = 0;
|
||
let article_status = 1;
|
||
let user_id = this.userInfo._id;
|
||
let cmsLst = cms.cmsLst;
|
||
let excerpt = "";
|
||
// let publish_date = new Date();
|
||
// let last_modify_date = new Date();
|
||
let res = await uniCloud.importObject("user-info").getIP({uid: this.userInfo._id});
|
||
let last_modify_ip = res.code === 200 ? res.data.last_login_ip : "";
|
||
console.log(last_modify_ip)
|
||
console.log(this.userInfo)
|
||
console.log(cms);
|
||
console.log(id);
|
||
// return;
|
||
if (id) {
|
||
|
||
let query = {};
|
||
query.id = id;
|
||
query.title = cms.title;
|
||
query.user_id = user_id;
|
||
query.title_html = cms.title_html;
|
||
query.title_delta = cms.title_delta;
|
||
query.thumbnail = cms.thumbnail;
|
||
query.p_type = cms.p_type;
|
||
query.category_id = cms.category_id;
|
||
query.temp_id = temp_id;
|
||
query.edit_type = edit_type;
|
||
query.view_count = view_count;
|
||
query.cmsLst = cms.cmsLst;
|
||
query.excerpt = excerpt;
|
||
// query.publish_date = publish_date;
|
||
// query.last_modify_date = last_modify_date;
|
||
query.last_modify_ip = last_modify_ip;
|
||
query.article_status = article_status;
|
||
|
||
let r = await uniCloud.importObject("uni-cms-articles").update_cms_articles(query);
|
||
console.log(r)
|
||
|
||
} else {
|
||
let query = {};
|
||
query.title = cms.title;
|
||
query.user_id = user_id;
|
||
query.title_html = cms.title_html;
|
||
query.title_delta = cms.title_delta;
|
||
query.thumbnail = cms.thumbnail;
|
||
query.p_type = cms.p_type;
|
||
query.category_id = cms.category_id;
|
||
query.temp_id = temp_id;
|
||
query.edit_type = edit_type;
|
||
query.view_count = view_count;
|
||
query.cmsLst = cms.cmsLst;
|
||
query.excerpt = excerpt;
|
||
// query.publish_date = publish_date;
|
||
// query.last_modify_date = last_modify_date;
|
||
query.last_modify_ip = last_modify_ip;
|
||
query.article_status = article_status;
|
||
|
||
console.log(query)
|
||
|
||
let r = await uniCloud.importObject("uni-cms-articles").add_cms_articles(query);
|
||
console.log(r)
|
||
}
|
||
|
||
|
||
|
||
|
||
uni.setStorageSync("cms", "")
|
||
|
||
uni.switchTab({
|
||
url:"/pages/my/my"
|
||
})
|
||
|
||
},
|
||
async back() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
fail: (err) => {
|
||
uni.navigateTo({
|
||
url:"/pages2/editCms/editCms"
|
||
})
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.grid-container {
|
||
display: flex;
|
||
gap: 10px; /* 列间距 */
|
||
padding: 15px;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.grid-item {
|
||
flex: 1; /* 等分容器宽度 */
|
||
min-width: 0; /* 防止内容溢出 */
|
||
aspect-ratio: 1; /* 默认正方形 */
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.page-container {
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.rectangle-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
aspect-ratio: 16/9; /* 设置长方形比例 */
|
||
}
|
||
|
||
.meta {
|
||
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.body {
|
||
padding: 20rpx;
|
||
.cms-body {
|
||
display: flex;
|
||
min-height: 60hv;
|
||
width: 100wv;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.vote-container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.vote-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.deadline {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-bottom: 30rpx;
|
||
display: block;
|
||
}
|
||
|
||
.radio-group {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.option-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 15rpx 0;
|
||
}
|
||
|
||
.option-label {
|
||
margin-left: 20rpx;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.vote-btn {
|
||
background-color: #2979FF;
|
||
color: white;
|
||
border-radius: 8rpx;
|
||
font-size: 14px;
|
||
margin-top: 30rpx;
|
||
|
||
&[disabled] {
|
||
background-color: #CCCCCC;
|
||
}
|
||
}
|
||
</style>
|