talk
/
talk_appAmin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复活动页面背景展示出错问题

main
26947 2024-06-08 21:22:20 +08:00
parent 547649e4a4
commit 5609f6d946
3 changed files with 104 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
pages/activity/index.vue
View File

@ -1,8 +1,6 @@
<template class="content">
<view class="fixed-header">
<!-- 顶部导航栏 -->
<up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
<!-- 顶部导航栏 -->
<up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
<template class="img1BOX" #left>
<view class="leftinfo">
<span class="lefttext">时间</span>
@ -17,7 +15,7 @@
</up-navbar>
<view class="bgc"></view>
<!-- 搜索栏 -->
<view class="sousuoBox1 flex alignCenter justifyBetween">
<view class="sousuoBox1 flex alignCenter justifyBetween">
<view class="sousuoBox flex alignCenter justifyBetween" @click="toESearch">
<view class="souBOx flex alignCenter">
<image :src="tu22" class="img3"></image>
@ -35,10 +33,12 @@
color: '#999999',
fontSize: '28rpx',
transform: 'scale(1.05)'
}" itemStyle=" width: 200rpx; padding-bottom:18rpx;">
}" itemStyle=" width: 185rpx; padding-bottom:18rpx;">
</up-tabs>
</view>
</view>
<!-- 列表信息 -->
<view>
<ActiInfoList v-model="actiInfoList" @scrolltolower="scrolltolower"></ActiInfoList>
@ -64,9 +64,9 @@ const tu52 = iconConfig.tu52;
const tu53 = iconConfig.tu53;
const total = ref()
const imgInfo = ref("")
const search = ref("电音节节日活动")
// 创建响应式数据 ref('#001f3f')
const bgColor = ref('');
bgColor.value = 'rgba(170, 0, 0, 0)'
const bgColor = ref('rgba(170, 0, 0, 0)');
const store = useStore()
const list4 = reactive([
{ name: '全部',state:9 },
@ -229,9 +229,6 @@ page{
background-color: #FBFBFB;
}
.fixed-header {
overflow: auto;
}
.leftinfo {
@ -278,18 +275,18 @@ page{
}
.bgc {
width: 100%;
width: 750rpx;
height: 500rpx;
background: linear-gradient(180deg, rgb(201, 246, 245), rgb(248, 248, 226));
position: fixed;
top: 0rpx;
left: 0rpx;
z-index: -1;
}
.sousuoBox1 {
margin: 10rpx 32rpx;
width: auto;
}
.sousuoBox {
@ -298,9 +295,11 @@ page{
border: #B3D7FF solid 2rpx;
border-radius: 30rpx 30rpx 30rpx 30rpx;
background: #ffffff80;
z-index: 1;
}
.souBOx {
width: 684rpx;
margin-left: 32rpx;
}
@ -319,6 +318,6 @@ page{
.tabsinfo {
height: 80rpx;
margin: 0 auto;
margin: 0 32rpx;
}
</style>

4
pages/activity/info.vue
View File

@ -16,9 +16,7 @@
<view class="addrs">活动地点：{{ actiInfoList.addres }}</view>
</view>
<view class="cardz">
<!-- <up-parse :content="processContent(actiInfoList.acContent)" :tagStyle="style"></up-parse> -->
<view v-if="textopen" v-html="actiInfoList.acContent" class="acContentstyle"></view>
<up-text size="15" color="#000000" lineHeight="23" v-else :text="actiInfoList.acContent"></up-text>
<up-text size="15" color="#000000" lineHeight="23" :text="actiInfoList.acContent"></up-text>
</view>
<view class="cardx" v-for="(item, index) in toimage(actiInfoList.file)" :key="index">

128
pages/activity/publish.vue
View File

@ -20,60 +20,70 @@
</view>
<view class="contentInfo">
<up-form-item label="" prop="acContent" borderBottom>
<up-textarea v-model="form.acContent" placeholder="输入活动内容
活动图片最多可发布两张
输入准确定位可以更好提供活动信息奥！安全指南：请勿发布带有个人信息（如：住址）" count border="none" height="270" maxlength="500"
placeholderStyle="color: #c0c0c0;font-size: 30rpx; background:none;"></up-textarea>
<textarea class="text_style" v-model="form.acContent"
placeholder="输入活动内容\n活动图片最多可发布两张\n输入准确定位可以更好提供活动信息奥！\n安全指南：请勿发布带有个人信息（如：住址）\n" cols="50"
rows="10" maxlength="500"
placeholderStyle="color: #c0c0c0;font-size: 30rpx; white-space: pre-wrap"
@linechange="inputtextInfo"></textarea>
<view class="char-count">{{ form.acContent.length }}/500</view>
</up-form-item>
</view>
<up-form-item label="" prop="file" borderBottom>
<view class="cardzfile">
<fileUpload v-model="form.file" :fileTypeInfo="fileTypeInfo1" :limit="2"></fileUpload>
</view>
</up-form-item>
<fileUpload v-model="form.file" :fileTypeInfo="fileTypeInfo1" :limit="2"></fileUpload>
</view>
</up-form-item>
</view>
<view class="cardx">
<up-cell-group :border="false">
<up-form-item label="" prop="startTime" borderBottom @click="showStartTime =! showStartTime">
<up-form-item label="" prop="startTime" borderBottom @click="showStartTime = !showStartTime">
<view style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image v-if="showtext1" :src="tu52" style="width: 30rpx; height: 32rpx; margin-right: 12rpx;"></image>
<image v-if="showtext1" :src="tu52" style="width: 30rpx; height: 32rpx; margin-right: 12rpx;">
</image>
<image v-else :src="tu522" style="width: 30rpx; height: 32rpx; margin-right: 12rpx;"></image>
<up-input v-model="form.startTime" disabled disabledColor="#ffffff" color="#C9F6F5"
placeholder="请选择活动开始时间" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
placeholder="请选择活动开始时间" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
border="none">
<span v-if="showtext2">请选择活动开始时间</span>
</up-input>
<span v-if="showtext2">请选择活动开始时间</span>
</up-input>
<up-icon slot="right" name="arrow-right"></up-icon>
</view>
</up-form-item>
<up-form-item label="" prop="endTime" borderBottom @click="showEndTime = !showEndTime">
<view style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image v-if="showtext2" :src="tu53" style="width: 30rpx; height: 32rpx;margin-right: 12rpx;"></image>
<image v-if="showtext2" :src="tu53" style="width: 30rpx; height: 32rpx;margin-right: 12rpx;">
</image>
<image v-else :src="tu532" style="width: 30rpx; height: 32rpx; margin-right: 12rpx;"></image>
<up-input v-model="form.endTime" disabled disabledColor="#ffffff" color="#C9F6F5"
placeholder="请选择活动结束时间" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
placeholder="请选择活动结束时间" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
border="none">
<span v-if="showtext2">请选择活动结束时间</span>
</up-input>
<span v-if="showtext2">请选择活动结束时间</span>
</up-input>
<up-icon slot="right" name="arrow-right"></up-icon>
</view>
</up-form-item>
<up-form-item label="" prop="addres" borderBottom @click="showaddres = !showaddres">
<view style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image v-if="showtext3" :src="tu51" style="width: 30rpx; height: 32rpx;margin-right: 12rpx;">
</image>
<image v-else :src="tu512" style="width: 30rpx; height: 32rpx; margin-right: 12rpx;"></image>
<up-input v-model="form.addres" disabledColor="#ffffff" color="#C9F6F5" @change="change1"
placeholder="添加活动具体位置" placeholderStyle="color: #333333 !important;font-size: 30rpx;"
border="none">
<span v-if="showtext2">添加活动具体位置</span>
</up-input>
<up-icon slot="right" name="arrow-right"></up-icon>
</view>
</up-form-item>
<up-cell :border="false" :isLink="true" :center="true">
<template #title
style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image v-if="showtext3" :src="tu51" style="width: 30rpx; height: 32rpx;"></image>
<image v-else :src="tu512" style="width: 30rpx; height: 32rpx;"></image>
<span>添加活动具体位置</span>
</template>
</up-cell>
</up-cell-group>
</view>
<up-datetime-picker :show="showStartTime" v-model="newData" :modelValue="newData" @confirm="confirm1" format="YYYY-MM-DD HH:mm:ss"
@cancel="cancel" mode="datetime"></up-datetime-picker>
<up-datetime-picker :show="showEndTime" v-model="newData" @confirm="confirm2" :modelValue="newData" format="YYYY-MM-DD HH:mm:ss"
@cancel="cancel" mode="datetime"></up-datetime-picker>
<up-datetime-picker :show="showStartTime" v-model="newData" :modelValue="newData" @confirm="confirm1"
format="YYYY-MM-DD HH:mm:ss" @cancel="cancel" mode="datetime"></up-datetime-picker>
<up-datetime-picker :show="showEndTime" v-model="newData" @confirm="confirm2" :modelValue="newData"
format="YYYY-MM-DD HH:mm:ss" @cancel="cancel" mode="datetime"></up-datetime-picker>
<view class="cardxx">
<up-button color="#C9F6F5" size="large" shape="circle" @click="publish" throttleTime="500"><span
class="fbText">发布</span></up-button>
@ -108,6 +118,9 @@ const data = reactive({
endTime: null,
file: null,
state: null,
addres: null,
longitude: null,
latitude: null
},
rules: {
acTitle: [
@ -123,15 +136,18 @@ const data = reactive({
],
endTime: [
{ required: true, message: '请选择活动结束时间', trigger: 'change' },
{ validator: (rule, value, callback) => {
console.log(form.value.startTime," ",value," ",value <= form.value.startTime)
if (value <= form.value.startTime) {
callback( proxy.$modal.msgError('时间选择错误') );
} else {
callback();
}
}, trigger: 'change' }
]
{
validator: (rule, value, callback) => {
console.log(form.value.startTime, " ", value, " ", value <= form.value.startTime)
if (value <= form.value.startTime) {
callback(proxy.$modal.msgError('时间选择错误'));
} else {
callback();
}
}, trigger: 'change'
}
],
addres: []
}
});
const { form, rules } = toRefs(data);
@ -141,6 +157,7 @@ const bgColor = ref('');
bgColor.value = 'rgba(170, 0, 0, 0)'
const showStartTime = ref(false);
const showEndTime = ref(false);
const showaddres = ref(false);
const StartTime = ref('请选择活动开始时间');
const showtext1 = ref(true);
const showtext2 = ref(true);
@ -169,6 +186,15 @@ const publish = () => {
submitForm('publish');
console.log("发布");
}
const change1 = (e) => {
showtext3.value = false;
}
const inputtextInfo = (e) => {
console.log("测试输入1：", e);
}
const submitForm = (type) => {
if (uFormRef.value) {
@ -211,7 +237,7 @@ const confirm1 = (e) => {
console.log(e);
showtext1.value = false;
StartTime.value = e.value
form.value.startTime = timeFormat(e.value,'yyyy-mm-dd hh:MM:ss');
form.value.startTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
showStartTime.value = !showStartTime.value
}
@ -219,7 +245,7 @@ const confirm2 = (e) => {
console.log(e);
showtext2.value = false;
EndTime.value = e.value
form.value.endTime = timeFormat(e.value,'yyyy-mm-dd hh:MM:ss');
form.value.endTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
showEndTime.value = !showEndTime.value
}
@ -229,6 +255,9 @@ const cancel = (e) => {
}
</script>
<style lang="scss">
page{
background-color: #FFFFFF;
}
.navbarcenter {
font-weight: 400;
font-size: 36rpx;
@ -243,7 +272,7 @@ const cancel = (e) => {
position: fixed;
top: 0rpx;
left: 0rpx;
z-index: -1;
}
.cardz {
@ -263,6 +292,23 @@ const cancel = (e) => {
.contentInfo {
margin-top: 46rpx;
.text_style {
white-space: pre-wrap;
width: 100%;
overflow: auto;
color: #c0c0c0;
font-weight: 400;
font-size: 30rpx;
line-height: 46rpx;
}
.char-count {
text-align: right;
font-size: 24rpx;
color: #999999;
}
}
.cardzfile {