You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
7.6 KiB
263 lines
7.6 KiB
<template>
|
|
<view class="container">
|
|
<view class="lock-tips">
|
|
<u-icon name="info-circle" color="#A94F20" size="12"></u-icon>
|
|
<view style="margin-left: 3px;">
|
|
如搬家请及时修改门锁类型信息
|
|
</view>
|
|
</view>
|
|
<view class="lock-info">
|
|
<view class="address-info ">
|
|
<u--form labelPosition="left" ref="uForm">
|
|
<u-form-item required label="房屋类型" labelWidth="120" @click="showHouseType = true"
|
|
:customStyle="{backgroundColor: '#fff', marginTop: '10px',padding: '10px 10px 10px 20px',borderRadius:'4px'}"
|
|
ref="item1">
|
|
<u--input v-model="lockInfo.houseType" disabled disabledColor="#ffffff" placeholder="请选择"
|
|
placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
|
|
<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
|
|
</u-form-item>
|
|
<view style="background-color: #fff;border-radius:4px;margin-top: 10px;">
|
|
<u-form-item required label="家门锁类型" labelWidth="120" @click="showLockType = true"
|
|
:customStyle="{padding: '10px 10px 10px 20px'}"
|
|
ref="item2">
|
|
<u--input v-model="lockInfo.lockType" disabled disabledColor="#ffffff" placeholder="请选择"
|
|
placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
|
|
<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
|
|
</u-form-item>
|
|
<!-- <view style="padding: 7px 17px; color: #AAAAAA;">
|
|
请在提交订单时选择钥匙交接方式
|
|
</view> -->
|
|
</view>
|
|
<view v-if="false" style="background-color: #FFFCF2;border-radius:4px;margin-top: 10px;">
|
|
<u-form-item required v-if="lockInfo.lockType=='钥匙或门禁卡'" label="如何交接钥匙"
|
|
labelWidth="120" @click="showKeyHandover = true" borderBottom
|
|
:customStyle="{padding: '10px 10px 10px 20px'}"
|
|
ref="item3">
|
|
<u--input v-model="lockInfo.keyHandover"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
:customStyle="{backgroundColor:'#FFFCF2'}"
|
|
placeholder="请选择"
|
|
placeholderStyle="text-align:right;color:#AAA;" border="none" inputAlign="right"></u--input>
|
|
<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
|
|
</u-form-item>
|
|
<view v-if="lockInfo.lockType=='钥匙或门禁卡' && lockInfo.keyHandover=='藏于指定位置'"
|
|
style="background-color: #FFFCF2; padding: 14px 17px;">
|
|
<u-upload
|
|
accept="video"
|
|
:capture="['album','camera']"
|
|
:fileList="fileList"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
:max-count="1"
|
|
name="pet"
|
|
width="60"
|
|
height="60"
|
|
>
|
|
<image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/video.png" style="width: 80px;height: 80px;"></image>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
|
|
</u--form>
|
|
</view>
|
|
</view>
|
|
<u-picker :show="showHouseType" :showToolbar='false' :columns="houseTypeActions" @cancel="showHouseType = false" :immediateChange="true"
|
|
@confirm="houseTypeSelect"></u-picker>
|
|
<u-picker :show="showLockType" :showToolbar='false' :columns="lockTypeActions" @cancel="showLockType = false" :immediateChange="true"
|
|
@confirm="lockTypeSelect"></u-picker>
|
|
<u-picker :show="showKeyHandover" :showToolbar='false' :columns="keyHandoverActions" @cancel="showKeyHandover = false" :immediateChange="true"
|
|
@confirm="keyHandoverSelect"></u-picker>
|
|
|
|
<view class="address-save">
|
|
<button class="address-save-btn" @click="save">保存</button>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {getLock,addLock,updateLock} from '@/api/system/lock.js'
|
|
export default{
|
|
data(){
|
|
return{
|
|
lockInfo:{
|
|
id:"",
|
|
houseType:"",
|
|
lockType:"",
|
|
keyHandover:"",
|
|
keyStorageLocation:"",
|
|
},
|
|
fileList:[],
|
|
showHouseType:false,
|
|
showLockType:false,
|
|
showKeyHandover:false,
|
|
houseTypeActions:[['独户','合租']],
|
|
lockTypeActions:[['钥匙或门禁卡','密码锁']],
|
|
keyHandoverActions:[['闪送(直接送达至服务人员,自费往返费用）','存于快递柜(给与/归还)(上门前提供密码)','藏于指定位置']]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLock();
|
|
},
|
|
methods:{
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this.fileList.splice(event.index, 1)
|
|
},
|
|
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this.fileList.length
|
|
lists.map((item) => {
|
|
this.fileList.push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: ''
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this.fileList[fileListLen]
|
|
this.fileList.splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise(url) {
|
|
return new Promise((resolve, reject) => {
|
|
let a = uni.uploadFile({
|
|
url: 'https://store-test.catmdogd.com/test-api/h5/oss/upload', // 仅为示例，非真实的接口地址
|
|
filePath: url,
|
|
name: 'file',
|
|
formData: {
|
|
user: 'test'
|
|
},
|
|
success: (res) => {
|
|
setTimeout(() => {
|
|
if(res&&res.data){
|
|
let resData = JSON.parse(res.data);
|
|
resolve(resData.url);
|
|
}
|
|
reject("上传失败");
|
|
}, 1000)
|
|
}
|
|
});
|
|
})
|
|
},
|
|
save(){
|
|
if(!this.lockInfo.lockType){
|
|
this.$modal.showToast('请选择门锁类型!')
|
|
return;
|
|
}
|
|
if(this.lockInfo.lockType=='密码锁'){
|
|
this.lockInfo.keyHandover = '';
|
|
}
|
|
if(this.lockInfo.keyHandover=='藏于指定位置'){
|
|
this.lockInfo.keyStorageLocation = this.fileList[0].url;
|
|
}else{
|
|
this.lockInfo.keyStorageLocation = '';
|
|
}
|
|
|
|
let params =this.lockInfo;
|
|
console.log(params);
|
|
if(this.lockInfo.id){
|
|
updateLock(params).then(res=>{
|
|
if(res&&res.code==200){
|
|
this.$modal.showToast('保存成功');
|
|
}
|
|
|
|
})
|
|
} else{
|
|
addLock(params).then(res=>{
|
|
if(res&&res.code==200){
|
|
this.$modal.showToast('保存成功');
|
|
}
|
|
})
|
|
}
|
|
},
|
|
getLock() {
|
|
getLock().then(res => {
|
|
if (res.code == 200) {
|
|
if(res.data){
|
|
this.lockInfo=res.data
|
|
if(res.data.keyStorageLocation){
|
|
let url = res.data.keyStorageLocation
|
|
this.fileList=[{url:url}]
|
|
}
|
|
|
|
}
|
|
console.log(res)
|
|
} else {
|
|
this.$modal.showToast('获取门锁信息失败，请联系系统管理员！');
|
|
}
|
|
|
|
|
|
})
|
|
},
|
|
groupChange(n) {
|
|
console.log('groupChange', n);
|
|
this.lockInfo.isDefault=!this.lockInfo.isDefault
|
|
},
|
|
houseTypeSelect(e) {
|
|
this.lockInfo.houseType = e.value[0];
|
|
this.showHouseType=false;
|
|
},
|
|
lockTypeSelect(e) {
|
|
this.lockInfo.lockType = e.value[0];
|
|
this.showLockType=false;
|
|
},
|
|
keyHandoverSelect(e) {
|
|
this.lockInfo.keyHandover = e.value[0];
|
|
this.showKeyHandover=false;
|
|
},
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
position: relative;
|
|
height: 100%;
|
|
.address-save {
|
|
background-color: #FFFFFF;
|
|
padding: 10px 20px 40px;
|
|
width: 100%;
|
|
height: 90px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
|
|
.address-save-btn {
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
background: #FFB13F;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
.lock-info{
|
|
padding: 0 10px;
|
|
}
|
|
.lock-info-item {
|
|
background-color: #fff;
|
|
margin-top: 10px;
|
|
}
|
|
.lock-tips{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 38px;
|
|
background-color: #fff1e3;
|
|
color: #a94f20;
|
|
}
|
|
</style>
|