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

25
pages/activity/index.vue
View File

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

4
pages/activity/info.vue
View File

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

102
pages/activity/publish.vue
View File

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