前端工作总结245-uni-修改其他页面整体样式

简介: 前端工作总结245-uni-修改其他页面整体样式
<template>
  <view class="wrap">
    <u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
      <u-form-item label="标题" class="label-left" style="margin-left:30rpx" prop="title">
        <u-input v-model="form.title" placeholder="请输入要输入的文章标题" />
      </u-form-item>
      <u-form-item label="类别" class="label-left" style="margin-left:30rpx">
        <u-input type="select" v-model="form.cate" placeholder="请选择" @click="show = true"></u-input>
        <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
      </u-form-item>
      <!-- 控制富文本输入的逻辑 -->
      <navigator url="../LevineHua-editor/LevineHua-editor" class="single">
      <u-form-item label="内容" prop="container"  class="label-left">
        <input placeholder="请输入内容" v-model="form.content" type="texarea" />
      </u-form-item>
      </navigator>
      <u-form-item label-position="top" class="label-left" label="封面图" prop="coverImage">
         <u-image v-if="form.coverImage!=''" width="188rpx" height="188rpx" @click="choose" :src="messimg"></u-image>
        <view v-else @click="choose" style="width: 188rpx;height: 188rpx;background-color: #CCCCCC;display: flex;justify-content: center;align-items: center;">
          <u-icon name="plus"></u-icon>
        </view>
      </u-form-item>
      <u-form-item label="开始时间" label-width="140" prop="startDate"  class="label-left">
        <u-input type="select" v-model="form.startDate" placeholder="请选择" @click="start_time_show = true"></u-input>
        <u-picker mode="time" v-model="start_time_show" @confirm="confirm1" :params="params"></u-picker>
      </u-form-item>
      <u-form-item label="结束时间" label-width="140"  prop="endDate"  class="label-left">
        <u-input type="select" v-model="form.endDate" placeholder="请选择" @click="end_time_show = true"></u-input>
        <u-picker mode="time" v-model="end_time_show" @confirm="confirm2" :params="params"></u-picker>
      </u-form-item>
      <!-- <u-picker mode="time" v-model="start_time_show" :params="params" @confirm="startTimeConfirm"></u-picker>
      <u-picker mode="time" v-model="end_time_show" :params="params" @confirm="endTimeConfirm"></u-picker> -->
    </u-form>
    <u-button class="sub-btn" @click="submit">提交</u-button>
  </view>
</template>
<script>
  /* 引入富文本编辑器 */
  import jinEdit from '@/components/jin-edit/jin-edit.vue';
  export default {
    /* 注册组件 */
    components: {
      jinEdit
    },
    data() {
      return {
        params: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: true
        },
        messimg: '',
        /* 获取token值 */
        header1: {
          Authorization: this.vuex_token
        },
        /* 存储上传地址 */
        action1: '',
        show: false,
        //控制选择框显示
        end_time_show: false,
        //控制选择框显示
        start_time_show: false,
        form: {
          content:''
        },
        /* list的数据 */
        list: [{
            value: '市场动态',
            label: '市场动态'
          },
          {
            value: '市场党建',
            label: '市场党建'
          },
          {
            value: '通知公告',
            label: '通知公告'
          },
          {
            value: '生活窍门',
            label: '生活窍门'
          },
          {
            value: '健康饮食',
            label: '健康饮食'
          },
          {
            value: '家政服务',
            label: '家政服务'
          },
          {
            value: '街道服务',
            label: '街道服务'
          },
        ],
        //提示
        errorType: ['message'],
        //验证
        rules: {
          title: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur',
            },
            {
              min: 3,
              max: 5,
              message: '姓名长度在3到5个字符',
              trigger: ['change', 'blur'],
            },
          ],
          content: [{
              required: true,
              message: '请输入通知内容',
              trigger: ['change', 'blur'],
            },
          ],
        },
      }
    },
    created() {
      /* "loginId": 0,
        "marketId": 0, */
      this.form.loginId = this.vuex_user.id
      this.form.marketId = this.vuex_user.market_id
      console.log(this.vuex_token)
      var url = this.$u.http.config.baseUrl + '/uploadFile/file'
      console.log(url)
      this.action1 = url
    },
    methods: {
      changeList(val){
        console.log(1)
        console.log(val)
      },
      open() {
        this.show = true;
      },
      // 注意返回值为一个数组,单列时取数组的第一个元素即可(只有一个元素)
      confirm(e) {
        console.log(e);
        this.form.cate = e[0].value
      },
      confirm1(e) {
        let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.second
        this.form.startDate = date
      },
      confirm2(e) {
        console.log(e);
        let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.second
        this.form.endDate = date
      },
      submit() {
        this.$u.api.getPartyAdd(this.form).then(res => {
          console.log(res)
          uni.navigateTo({
            url:"../notice_notice_list/notice_notice_list"
          })
        })
      },
      /* 上传图片 */
      choose() {
        uni.chooseImage({
          success: (chooseImageRes) => {
            var tempFilePaths = chooseImageRes.tempFilePaths;
            uni.uploadFile({
              url: this.$u.http.config.baseUrl + '/uploadFile/file',
              filePath: tempFilePaths[0],
              header: {
                Authorization: this.vuex_token
              },
              name: 'file',
              success: (uploadFileRes) => {
                let data_res = JSON.parse(uploadFileRes.data)
                if (data_res.code == 200) {
                  this.messimg = data_res.data;
                  this.form.coverImage = data_res.data;
                  console.log(this.messimg)
                }
              }
            });
          }
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  .label-left{
    margin-left: 25rpx;
  }
  .sub-btn {
    width: 684rpx;
    height: 96rpx;
    background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);
    opacity: 1;
    border-radius: 66rpx;
    border: 0rpx;
    font-size: 36rpx;
    font-family: PingFangSC;
    font-weight: 400;
    line-height: 40rpx;
    color: #FFFFFF;
    position: fixed;
    bottom: 18rpx;
  }
  .title-sm {
    background: #F7F7F7;
    width: 100%;
    padding: 23rpx 0rpx;
  }
  .wrap {
    padding: 30rpx;
  }
  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    .agreement-text {
      padding-left: 8rpx;
      color: $u-tips-color;
    }
  }
</style>

image.png

相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
13 1
.自定义认证前端页面
|
1月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
1月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
42 18
|
2月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
498 8
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
254 1
|
2月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
33 1
|
2月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
190 2

热门文章

最新文章