前端工作总结239-uni-弹出框显示数据
作者：互联网
<template>
<view class="wrap">
<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
<u-form-item label="标题" label-width="140" style="margin-left:30rpx" prop="title">
<u-input v-model="form.title" placeholder="请输入要输入的文章标题" />
</u-form-item>
<u-form-item label="类别" label-width="140" 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="content" label-width="150">
<input placeholder="请输入内容" v-model="form.content" type="texarea" />
</u-form-item>
</navigator>
<u-form-item label-position="top" label-width="140" label="封面图" prop="coverImage">
<u-image width="320rpx" height="188rpx" @click="choose" :src="messimg"></u-image>
</u-form-item>
<u-form-item label="开始时间" prop="startDate" label-width="200">
<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="结束时间" prop="endDate" label-width="200">
<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-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: {
},
/* 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)
})
},
/* 上传图片 */
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">
.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>
标签：console,log,form,data,value,弹出,239,uni,true 来源： https://www.cnblogs.com/yao-655442/p/16701551.html