talk_appAmin/pages/activity/publish.vue

<template>

    <view>
        <!-- 顶部导航栏 -->
        <up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" @leftClick="leftClick"
            :bgColor="bgColor">

            <template #center>
                <div class="navbarcenter"><span>发布活动</span></div>
            </template>
        </up-navbar>
    </view>
    <view class="bgc"></view>
    <view class="cardz">
        <view class="titleInfo">
            <up-input placeholder="输入活动标题~（5~20个字）" v-model="title" border="none" maxlength="20" fontSize="34rpx"
                color="#C0C0C0" clearable></up-input>
            <view class="xian"></view>
        </view>
        <view class="contentInfo">
            <up-textarea v-model="content" placeholder="输入活动内容
活动图片最多可发布两张
输入准确定位可以更好提供活动信息奥！安全指南：请勿发布带有个人信息（如：住址）" count border="none" height="270" maxlength="500"
                placeholderStyle="color: #c0c0c0;font-size: 30rpx; background:none;"></up-textarea>
        </view>
        <view class="cardzfile">
            <fileUpload v-model="fileList1" :fileTypeInfo="fileTypeInfo1"></fileUpload>
        </view>
    </view>
    <view class="cardx">
        <up-cell-group :border="false">
            <up-cell :isLink="true" :center="true">
                <template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
                    <image :src="tu52" style="width: 30rpx; height: 32rpx;"></image>
                    <span>请选择活动开始时间</span>
                </template>
            </up-cell>
            <up-cell :isLink="true" :center="true">
                <template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
                    <image :src="tu53" style="width: 30rpx; height: 32rpx;"></image>
                    <span>请选择活动结束时间</span>
                </template>
            </up-cell>
            <up-cell :border="false" :isLink="true" :center="true">
                <template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
                    <image :src="tu51" style="width: 30rpx; height: 32rpx;"></image>
                    <span>添加活动具体位置</span>
                </template>
            </up-cell>
        </up-cell-group>
    </view>
    <view class="cardxx">
        <up-button    color="#C9F6F5" size="large" shape="circle" @click="publish"><span
                class="fbText">发布</span></up-button>
                <view style="width: 26rpx;height: 80rpx;"></view>
        <up-button  color="#F8F8E3" size="large" shape="circle" @click="draft" style="margin-left: 26rpx;"><span
                class="cgText">存草稿</span></up-button>
    </view>

</template>
<script setup>
import fileUpload from '../common/file/fileUpload'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance } from 'vue'
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const iconConfig = proxy.iconConfig;
const tu51 = iconConfig.tu51;
const tu52 = iconConfig.tu52;
const tu53 = iconConfig.tu53;
const title = ref('')
const content = ref('');
const fileList1 = ref([])
const fileTypeInfo1 = ref('image')
const bgColor = ref('');
bgColor.value = 'rgba(170, 0, 0, 0)'

onLoad((options) => {
    console.log("页面参数：", options.id);
})
const leftClick = () => {
    proxy.$tab.navigateBack(1)
}
const draft = () => {
    console.log("存草稿");
}
const publish = () => {
    console.log("发布");
}
</script>
<style lang="scss" >
.navbarcenter {
    font-weight: 400;

    font-size: 36rpx;
    text-align: left;
    color: #000000;
}

.bgc {
    width: 100%;
    height: 500rpx;
    background: linear-gradient(-180deg, #c9f6f5, #ffffff);
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    z-index: -1;
}

.cardz {
    margin-left: 32rpx;
    margin-right: 32rpx;

    .titleInfo {
        margin-top: 40rpx;

        .xian {
            margin-top: 32rpx;
            height: 2rpx;
            border-radius: 1rpx 1rpx 1rpx 1rpx;
            background: #ffffff;
        }
    }

    .contentInfo {
        margin-top: 46rpx;
    }

    .cardzfile {
        background-color: #FFFFFF;
    }
}

.cardx {
    background-color: #FFFFFF;
    padding-top: 72rpx;
    margin-left: 32rpx;
    margin-right: 32rpx;

    .c1 {
        margin-top: 2rpx;
        width: 100%;
        height: 102rpx;
        display: flex;
        align-items: center;
    }



}

.cardxx {
    display: flex;
    margin-left: 32rpx;
    margin-right: 32rpx;
    margin-top: 80rpx;
        
        .fbText {
        font-weight: 400;
        font-size: 30rpx;
        color: #FBFBFB !important;
    }
    
   
        
        .cgText {
        font-weight: 400;
        font-size: 30rpx;
        color: #999999 !important;
    }
    

}
</style>