过滤器小程序
This commit is contained in:
@@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="tui-bg-box">
|
||||
<view class="tui-photo"><image :src="apiHost+'/miniapp/static/scan_big.png'" class="tui-bg-img" @click="buttonClick"></image><span class="tui-title-1">扫描过滤器上二维码快速录</span></view>
|
||||
</view>
|
||||
<view class="header-1">
|
||||
<view class="sub-title">需要依次上传远景照片、更换前照片、更换后照片以及其他补充照片 </view>
|
||||
</view>
|
||||
<view class="tui-box-upload">
|
||||
<!-- <tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload> -->
|
||||
<!-- <tui-upload
|
||||
ref="upload"
|
||||
action="https://filter.api.opmonitor.com/?c=device&a=getPicture"
|
||||
@complete="result"
|
||||
>
|
||||
</tui-upload> -->
|
||||
<tui-upload ref="uploadRef" @complete="complete" @reupload="reUpload"></tui-upload>
|
||||
<view style="width: 28%;height: 36px;line-height: 36px;font-size: 14px;margin: 5px 0;">
|
||||
<tui-button bold type="gray-primary" btn-size="medium" @click="upload">上传</tui-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="header-1">
|
||||
<view class="sub-title">若无选择点位可手写输入，无需选择，示例<span style="color:red;">一部-3号楼-3层-308层流屋顶</span> </view>
|
||||
</view>
|
||||
<view style="padding-left: 90rpx;padding-top: 10rpx;">
|
||||
<textarea
|
||||
placeholder="需要补充的信息..."
|
||||
style="width: 80%; height: 80px; background: #f5f5f5; padding-left: 20rpx; padding-top: 20rpx;font-size:12px;"
|
||||
v-model="note"
|
||||
></textarea>
|
||||
</view>
|
||||
<view style="padding-left: 90rpx;padding-top: 20rpx;" @click="selectPosition">
|
||||
<image :src="apiHost+'/miniapp/static/map.png'" class="tui-bg-img-1"></image>
|
||||
<span class="tui-title-2" v-if="position==''">{{deviceInfo.position}}</span>
|
||||
<span class="tui-title-2" v-else>{{position}}</span>
|
||||
</view>
|
||||
<view style="padding-left: 90rpx;padding-top: 60rpx;">
|
||||
<span class="tui-title-3" v-if="deviceInfo.specification == 'undefined'">#尺寸规格：</span>
|
||||
<span class="tui-title-3" v-else>#尺寸规格：{{deviceInfo.specification}} {{deviceInfo.type}}</span>
|
||||
</view>
|
||||
<view style="padding-left: 58%;padding-top: 100rpx;">
|
||||
<tui-button width="200rpx" height="80rpx" :size="28" @click="detail">保存</tui-button>
|
||||
</view>
|
||||
<tui-tabbar :current="tabbarCurrent" backdropFilter :backgroundColor="tabbarBackgroundColor" :tabBar="tabBar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myapp from '@/common/js/myapp.js'
|
||||
//实际使用需要传入上传地址，以及上传接口返回数据进行调整组件
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
apiHost: myapp.apiHost,
|
||||
imageData: [],
|
||||
//上传地址
|
||||
serverUrl: "https://filter.api.opmonitor.com/?c=device&a=getPicture",
|
||||
value:[] ,//初始化图片
|
||||
position: '',
|
||||
deviceInfo: [],
|
||||
sn: '',
|
||||
tabBar: myapp.tabBar,
|
||||
tabbarCurrent: 3,
|
||||
tabbarBackgroundColor: '#FFF',
|
||||
imageList:[],
|
||||
serverImageList:[],
|
||||
note:'',
|
||||
account: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// setTimeout(()=>{
|
||||
// //实际开发中图片地址应为网络地址
|
||||
// this.value=['https://filter.api.opmonitor.com/miniapp/static/hospital.png']
|
||||
// },200)
|
||||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||||
let curRoute = routes[routes.length - 1].route //获取当前页面路由
|
||||
let curParam = routes[routes.length - 1].options; //获取路由参数
|
||||
this.position = curParam.position
|
||||
this.sn = curParam.sn
|
||||
let that = this;
|
||||
this.account = uni.getStorageSync('user')['account']
|
||||
if(curParam.sn != 'undefined')
|
||||
{
|
||||
myapp.request('/?c=device&a=getTagSystemQrcode',function(res) {
|
||||
that.deviceInfo = res.data.data
|
||||
},{sn:curParam.sn})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabbarSwitch: myapp.tabbarSwitch,
|
||||
|
||||
//以下为调用upload 方法上传示例
|
||||
//注：上传成功或失败处理，请按照下方示例返回(resolve, reject)信息，请勿修改格式
|
||||
uploadImg(file) {
|
||||
//上传的文件信息
|
||||
// 文件上传的函数，返回一个promise
|
||||
//上传成功后返回上传后的图片地址，上传失败则返回false即可
|
||||
let that = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
//调用api上传，所有需要参数自行补充【上传自行实现，便于扩展】
|
||||
uni.uploadFile({
|
||||
//请换成真实的上传接口地址，示例接口已关闭
|
||||
url: this.serverUrl,
|
||||
name: 'file',
|
||||
// header: {},
|
||||
// formData:{},
|
||||
filePath: file.path,
|
||||
success: (res) => {
|
||||
//上传成功后，将图片地址返回
|
||||
//此处逻辑自行根据接口返回判断
|
||||
if (true) {
|
||||
|
||||
//返回上传成功后的图片地址，根据实际接口返回处理数据
|
||||
const data = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
|
||||
let url = data.data
|
||||
//上传成功后务必返回图片地址信息
|
||||
that.serverImageList.push(url)
|
||||
resolve(url)
|
||||
} else {
|
||||
//上传失败
|
||||
reject(false)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
//上传失败
|
||||
console.log(err)
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
upload() {
|
||||
if(this.imageList.length===0){
|
||||
this.tui.toast('请选择图片！')
|
||||
return;
|
||||
}
|
||||
//调用upload 方法上传，并传入函数，初始上传时勿传入索引值
|
||||
this.$refs.uploadRef && this.$refs.uploadRef.upload(this.uploadImg)
|
||||
},
|
||||
//重新上传
|
||||
reUpload(e) {
|
||||
//当前上传按钮索引值
|
||||
//调用upload 方法上传，并传入函数，且此时需要传入index值
|
||||
this.$refs.uploadRef && this.$refs.uploadRef.upload(this.uploadImg, e.index)
|
||||
},
|
||||
complete(e) {
|
||||
this.imageList = e.imgArr
|
||||
},
|
||||
selectPosition: function() {
|
||||
uni.navigateTo({
|
||||
url:'/packagePage/pages/position/position?sn='+this.deviceInfo.sn+'&h_id='+this.deviceInfo.h_id
|
||||
})
|
||||
},
|
||||
detail: function() {
|
||||
// console.info(this.position)
|
||||
// console.info(this.deviceInfo.position)
|
||||
// console.info(this.note)
|
||||
// console.info(this.deviceInfo.type)
|
||||
// console.info(this.deviceInfo.specification)
|
||||
// console.info(this.serverImageList)
|
||||
// console.info(this.deviceInfo.sn)
|
||||
// console.info(this.account)
|
||||
// uni.navigateTo({
|
||||
// url:'/packagePage/pages/record/record'
|
||||
// })
|
||||
myapp.request('/?c=record&a=createdRecord',function(res) {
|
||||
if(res.data.data=='success'){
|
||||
uni.navigateTo({
|
||||
url:'/packagePage/pages/record/record'
|
||||
})
|
||||
}
|
||||
console.info(res.data.data)
|
||||
},{note:this.note,type:this.deviceInfo.type,specification:this.deviceInfo.specification,serverImageList:this.serverImageList,sn:this.deviceInfo.sn,account:this.account})
|
||||
},
|
||||
buttonClick() {
|
||||
let that = this;
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
let code = res.result;
|
||||
uni.request({
|
||||
url: 'https://filter.api.opmonitor.com/?c=device&a=getTagSystemQrcode',
|
||||
data: {sn: code},
|
||||
header: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
success: function(res){
|
||||
that.deviceInfo = res.data.data
|
||||
// console.info(res.data.data)
|
||||
// if(res.data.data.name === ""){
|
||||
// uni.showModal({
|
||||
// title: '提示',
|
||||
// content: '过滤器不存在，现在进行新增操作'
|
||||
// })
|
||||
// }else{
|
||||
// uni.showModal({
|
||||
// title: '提示',
|
||||
// content: '过滤器已存在，现在进行更换操作'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
fail: () => {
|
||||
console.info('小程序域名不正确，请检查域名的正确性')
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
console.info('调用照相功能失败！！！')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20rpx 0 120rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20rpx 90rpx 30rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-1 {
|
||||
padding: 20rpx 90rpx 30rpx 90rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 24rpx;
|
||||
color: #2f2f2f;
|
||||
padding-top: 16rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tui-box-upload {
|
||||
padding-left: 90rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tui-bg-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.tui-photo {
|
||||
padding-left: 90rpx;
|
||||
padding-bottom: 30rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tui-bg-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tui-title-1 {
|
||||
padding-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #2f2f2f;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.tui-title-2 {
|
||||
padding-left: 12rpx;
|
||||
font-size: 12px;
|
||||
color: #0303f5;
|
||||
float:left;
|
||||
position: relative;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.tui-bg-img-1 {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
float:left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tui-bg-img-2 {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
float:left;
|
||||
position: relative;
|
||||
padding-left: 30rpx;
|
||||
padding-top: 5rpx;
|
||||
}
|
||||
|
||||
.tui-title-3 {
|
||||
font-size: 12px;
|
||||
color: #0303f5;
|
||||
float:left;
|
||||
position: relative;
|
||||
padding-top: 10rpx;
|
||||
font-weight: 600;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user