主要功能實(shí)現(xiàn)?
- 完成發(fā)生時(shí)間選擇功能，用戶可以通過日期選擇器選擇事件發(fā)生的時(shí)間。
- 實(shí)現(xiàn)事件類型選擇功能，用戶可以通過下拉選擇框選擇事件的類型。
- 添加子養(yǎng)殖場編號(hào)輸入框，用戶可以輸入與事件相關(guān)的子養(yǎng)殖場編號(hào)。
- 完成事件描述輸入功能，用戶可以通過文本輸入框描述事件的詳細(xì)情況。
- 增加上傳圖片功能，用戶可以選擇并上傳相關(guān)圖片。
- 增加上傳視頻功能，用戶可以選擇并上傳相關(guān)視頻。
- 實(shí)現(xiàn)處理結(jié)果輸入功能，用戶可以通過文本輸入框記錄事件的處理結(jié)果。
- 添加是否已解決選擇功能，用戶可以通過單選按鈕選擇事件是否已經(jīng)解決。
大概有兩個(gè)樣子的版本，一個(gè)是用內(nèi)置組件完成的，另一個(gè)是用uni-ui擴(kuò)展組件完成的，都在下面
未加樣式版本
稍微加了點(diǎn)樣式的樣子
這是簡陋的代碼
<template>
<view class="mainCSS">
<view class="column">1. 發(fā)生時(shí)間</view>
<picker class="input" mode="date" :end="endDate" @change="bindDateChange">
<view>{{date}}</view>
</picker>
<view class="column">2. 事件類型</view>
<picker class="input" :range="kind" :value="kindIndex" @change="bingKindChange">
<view>{{kind[kindIndex]}}</view>
</picker>
<view class="column">3. 子養(yǎng)殖場編號(hào)</view>
<input class="input" placeholder="二號(hào)區(qū)③" @confirm="bindFarmCode"/>
<view class="column">4. 事件描述</view>
<textarea class="input" @confirm="bindTextDetail" placeholder="請(qǐng)輸入"></textarea>
<view class="column">5. 上傳圖片</view>
<view v-for="(imageName, index) in imageNames" :key="index">
<text>{{imageName}}</text>
</view>
<button type="primary" size="mini" @click="loadImage">選擇圖片</button>
<view class="column">6. 上傳視頻</view>
<view v-for="(videoName, index) in videoNames" :key="index">
<text>{{videoName}}</text>
</view>
<button type="primary" size="mini" @click="loadVideo">選擇視頻</button>
<view class="column">7. 處理結(jié)果</view>
<textarea class="input" placeholder="是如何處理的？" @confirm="bindResult"></textarea>
<view class="column">8. 是否已經(jīng)解決了</view>
<radio-group @change="bindDoneChange">
<label>
<radio value="false" checked="checked">未解決</radio>
<radio value="true">已解決</radio>
</label>
</radio-group>
<button class="column" type="primary">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
date: this.getDate(),
kind: ['養(yǎng)殖物異常', '設(shè)備異常', '偷盜', '野生動(dòng)物', '災(zāi)害', '其他異常'],
kindIndex: 0,
farmCode:"",
detail: {},
imageNames: [],
videoNames: [],
result:"",
done:false
}
},
computed: {
endDate() {
return this.getDate();
}
},
methods: {
getDate() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
bindDateChange: function(e) {
this.date = e.detail.value;
},
bingKindChange: function(e) {
this.kindIndex = e.detail.value;
},
bindFarmCode:function(e){
this.farmCode=e.detail.value;
},
bindTextDetail: function(e) {
this.detail = e.detail.value;
},
bindResult:function(e){
this.result=e.detail.value;
},
bindDoneChange: function(e) {
this.done = e.detail.value;
},
loadImage() {
uni.chooseImage({
success: (response) => {
for (let file of response.tempFiles) {
let imageName = file.name.substring(file.name.lastIndexOf('/') + 1);
this.imageNames.push(imageName);
}
}
})
},
loadVideo() {
uni.chooseVideo({
success: (response) => {
let videoName = response.tempFile.name;
videoName = videoName.substring(videoName.lastIndexOf('/') + 1);
this.videoNames.push(videoName);
}
})
}
}
}
</script>
<style>
.mainCSS {
margin: 30rpx;
}
.input{
margin: 15rpx;
border: 1rpx solid #cbd5de;
width: 100%;
}
.column{
margin: 30rpx;
font-weight: bold;
}
</style>然后是用了uni-ui擴(kuò)展組件大改了一下樣式
?
?主要就是樣式通過uni-ui組件完成文章來源：http://www.zghlxwxcb.cn/news/detail-659682.html
<template>
<view class="mainCSS">
<view class="column">1. 發(fā)生時(shí)間</view>
<uni-datetime-picker type="date" :end="endDate" @change="bindDateChange"></uni-datetime-picker>
<view class="column">2. 事件類型</view>
<uni-data-select placeholder="請(qǐng)選擇事件類型" :localdata="kind" :value="kindValue" @change="bindKindChange"></uni-data-select>
<view class="column">3. 子養(yǎng)殖場編號(hào)</view>
<uni-easyinput placeholder="二號(hào)區(qū)③" @confirm="bindFarmCode"></uni-easyinput>
<view class="column">4. 事件描述</view>
<uni-easyinput type="textarea" autoHeight placeholder="請(qǐng)描述緊急事件的具體情況" @confirm="bindTextDetail"></uni-easyinput>
<view class="column">5. 上傳圖片</view>
<uni-file-picker title="最多選擇九張圖片"></uni-file-picker>
<view class="column">6. 上傳視頻</view>
<uni-file-picker file-mediatype="video"></uni-file-picker>
<view class="column">7. 處理結(jié)果</view>
<uni-easyinput type="textarea" autoHeight placeholder="請(qǐng)描述事件是如何處理的" @confirm="bindResult"></uni-easyinput>
<view class="column">8. 是否已經(jīng)解決了</view>
<radio-group @change="bindDoneChange">
<label>
<radio value="false" checked="checked">未解決</radio>
<radio value="true">已解決</radio>
</label>
</radio-group>
<button class="column" type="primary" @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
date: this.getDate(),
kindValue: 0,
kind: [{
value: 0,
text: '養(yǎng)殖物異常'
},
{
value: 1,
text: '設(shè)備異常'
},
{
value: 2,
text: '偷盜'
},
{
value: 3,
text: '野生動(dòng)物'
},
{
value: 4,
text: '災(zāi)害'
},
{
value: 5,
text: '其他異常'
}
],
farmCode: "",
detail: {},
result: "",
done: false
}
},
computed: {
endDate() {
return this.getDate();
}
},
methods: {
getDate() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
bindDateChange: function(e) {
this.date = e.detail.value;
},
bindKindChange: function(e) {
this.kindValue = e;
},
bindFarmCode: function(e) {
this.farmCode = e.detail.value;
},
bindTextDetail: function(e) {
this.detail = e.detail.value;
},
bindResult: function(e) {
this.result = e.detail.value;
},
bindDoneChange: function(e) {
this.done = e.detail.value;
},
submit(){
uni.showModal({
content:"緊急事件登記提交成功",
title:"提示",
showCancel:false,
success: (response) => {
if(response.confirm){
uni.switchTab({
url:'/pages/WorkOrder/WorkOrder'
})
}
}
})
}
}
}
</script>
<style lang="scss">
.mainCSS {
padding: 25rpx;
background-color: white;
}
.column {
margin-top: 30rpx;
margin-bottom: 15rpx;
font-weight: bold;
font-size: 30rpx;
}
button {
border-radius: 30rpx;
}
</style>后面加上了和后端對(duì)接的請(qǐng)求發(fā)送，以及修復(fù)了一些bug的改版代碼，后端也是我寫的對(duì)接起來十分輕松?文章來源地址http://www.zghlxwxcb.cn/news/detail-659682.html
<template>
<view class="mainCSS">
<view class="column">1. 發(fā)生時(shí)間</view>
<uni-datetime-picker type="date" :end="endDate" @change="bindDateChange"></uni-datetime-picker>
<view class="column">2. 事件類型</view>
<uni-data-select placeholder="請(qǐng)選擇事件類型" :localdata="kind" :value="kindValue"
@change="bindKindChange"></uni-data-select>
<view class="column">3. 子養(yǎng)殖場編號(hào)</view>
<uni-easyinput placeholder="二號(hào)區(qū)③" @input="bindFarmCode"></uni-easyinput>
<view class="column">4. 事件描述</view>
<uni-easyinput type="textarea" autoHeight placeholder="請(qǐng)描述緊急事件的具體情況" @input="bindTextDetail"></uni-easyinput>
<view class="column">5. 上傳圖片</view>
<uni-file-picker title="最多選擇九張圖片" ref="files" @select="bindSelect" @delete="bindDelete"></uni-file-picker>
<view class="column">6. 上傳視頻</view>
<uni-file-picker file-mediatype="video" @select="bindVideoSelect" @delete="bindVideoDelete"
limit="1"></uni-file-picker>
<view class="column">7. 處理結(jié)果</view>
<uni-easyinput type="textarea" autoHeight placeholder="請(qǐng)描述事件是如何處理的" @input="bindResult"></uni-easyinput>
<view class="column">8. 是否已經(jīng)解決了</view>
<uni-data-checkbox :value="doneValue" :localdata="done" @change="bindDoneChange"></uni-data-checkbox>
<button class="column" type="primary" @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
date: '',
kindValue: 0,
kind: [{
value: 0,
text: '養(yǎng)殖物異常'
},
{
value: 1,
text: '設(shè)備異常'
},
{
value: 2,
text: '偷盜'
},
{
value: 3,
text: '野生動(dòng)物'
},
{
value: 4,
text: '災(zāi)害'
},
{
value: 5,
text: '其他異常'
}
],
farmCode: "未填寫",
detail: '未填寫',
images: '',
imagesPaths: [],
video: '',
videoPath: '',
result: "未填寫",
doneValue: 0,
done: [{
text: '未解決',
value: 0
}, {
text: '已解決',
value: 1
}]
}
},
computed: {
endDate() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
},
methods: {
bindDateChange: function(e) {
this.date = e;
},
bindKindChange: function(e) {
this.kindValue = e;
},
bindFarmCode: function(e) {
this.farmCode = e;
},
bindTextDetail: function(e) {
this.detail = e;
},
bindResult: function(e) {
this.result = e;
},
bindDoneChange: function(e) {
this.doneValue = e.detail.value;
},
submit() {
if (this.imagesPaths.length != 0) {
var uploadTask = uni.uploadFile({
url: 'http://192.168.6.128:8080', // 上傳圖片的接口地址
files: this.imagesPaths,
success: (response) => {
this.images = response.data;
},
fail: (response) => {
console.log(response)
}
})
uploadTask.onProgressUpdate((response) => {
// console.log(response.progress)
})
}
if (this.videoPath != '') {
var uploadTask = uni.uploadFile({
url: 'http://192.168.6.128:8080', // 上傳視頻的接口地址
filePath: this.videoPath,
name: 'file',
success: (response) => {
this.video = response.data;
},
fail: (response) => {
console.log(response)
}
})
uploadTask.onProgressUpdate((response) => {
// console.log(response.progress)
})
}
this.sendRequstToServer();
},
bindSelect(e) {
for (let file of e.tempFiles) {
this.imagesPaths.push({
uri: file.path
})
}
},
bindDelete(e) {
this.imagesPaths.splice(this.imagesPaths.indexOf({
uri: e.tempFilePath
}), 1)
},
bindVideoSelect(e) {
this.videoPath = e.tempFilePaths[0] // 限制一個(gè)視頻
},
bindVideoDelete(e) {
this.videoPath = ''
},
sendRequstToServer() {
uni.request({
url: 'http://192.168.6.128:8080', // 緊急事件登記的接口地址
method: 'POST',
data: {
date: this.date,
kind: this.kind[this.kindValue].text,
farmCode: this.farmCode,
detail: this.detail,
images: this.images,
video: this.video,
result: this.result,
done: this.doneValue==1
},
header: {
'content-type': 'application/json' // 自定義請(qǐng)求頭信息
},
success: (response) => {
if (response.statusCode == 200) {
uni.showToast({
title: '提交成功'
});
setTimeout(() => {
uni.switchTab({
url: '/pages/WorkOrder/WorkOrder',
})
}, 2000)
} else {
console.log('提交失?。?, response);
uni.showToast({
title: '提交失敗',
icon: 'error'
})
}
},
fail: (response) => {
console.log('請(qǐng)求后端失?。?, response);
uni.showToast({
title: '提交失敗',
icon: 'error'
})
}
})
}
}
}
</script>
<style lang="scss">
.mainCSS {
padding: 25rpx;
background-color: white;
}
.column {
margin-top: 30rpx;
margin-bottom: 15rpx;
font-weight: bold;
font-size: 30rpx;
}
button {
border-radius: 30rpx;
}
</style>到了這里，關(guān)于uni-app的Vue.js實(shí)現(xiàn)微信小程序的緊急事件登記頁面功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
