前端工作总结245-uni-修改其他页面整体样式
  TEZNKK3IfmPf 2023年11月14日 31 0


<template>
<view class="wrap">
<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">

<u-form-item label="标题" class="label-left" prop="title">
<u-input v-model="form.title" placeholder="请输入要输入的文章标题" />
</u-form-item>
<u-form-item label="类别" class="label-left" >
<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" >
<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>

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

 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月14日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   24天前   51   0   0 java
  TEZNKK3IfmPf   2024年05月31日   55   0   0 java
TEZNKK3IfmPf