<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.idthis.form.marketId = this.vuex_user.market_idconsole.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.secondthis.form.startDate = date},confirm2(e) {console.log(e);let date = e.year + '-' + e.month + '-' + e.day + " " + e.hour + ':' + e.minute + ':' + e.secondthis.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>

總結

以上是生活随笔為你收集整理的工作312:uni-弹出框显示数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。