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.
331 lines
11 KiB
331 lines
11 KiB
<template>
|
|
<view class="locer-manage">
|
|
<device-name :name="optionsQuery.name"></device-name>
|
|
<view class="lm-list">
|
|
<view class="ll-item" v-for="(e,i) in boxList" :key="i" @click="itemClick(i)">
|
|
<view class="li-left">
|
|
|
|
<view class="ll-box">{{e.id || '-'}}号</view>
|
|
<view
|
|
v-if="getleaseBoxType(e)"
|
|
class="ll-tag"
|
|
:class="[e.usage_status==0?'grey':e.usage_status==1&&!isRent(e)?'orange':'']"
|
|
>{{getleaseBoxType(e)}}</view>
|
|
</view>
|
|
|
|
<view class="li-content">
|
|
|
|
<view>
|
|
<view class="lc-name">{{isRent(e)?e.cabinet_name || '-':e.goods_name || '-'}}</view>
|
|
<view class="lc-price">
|
|
<view>{{e.price || '0'}}<text>{{e.unit || '-'}}</text></view>
|
|
<view v-if="optionsQuery.page_id == 8&&isRent(e)">押金：{{e.deposit || '0'}}元</view>
|
|
</view>
|
|
</view>
|
|
|
|
<image
|
|
v-if="e._isSelected"
|
|
class="active"
|
|
mode="aspectFit"
|
|
src="/subpackage/device/static/images/selected_987.png">
|
|
</image>
|
|
<image v-else></image>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lm-tip">{{getTip}}</view>
|
|
|
|
<view class="lm-fixed-bar">
|
|
<view class="lfb-select-all" @click="selectAll">
|
|
<image v-if="isSelectedAll" class="active" mode="aspectFit" src="/subpackage/device/static/images/selected_987.png"></image>
|
|
<image v-else></image>
|
|
<text>全选</text>
|
|
</view>
|
|
<view class="lfb-confirm" hover-class="hover-active" @click="openLocker">打开柜子</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import util from '../../../../utils/util';
|
|
import device_name from '../../components/device_name/device_name';
|
|
import deviceServer from '../../js/device_server';
|
|
import deviceApi from '../../js/device_api';
|
|
// e.page_id == 8 || // 租售柜
|
|
// e.page_id == 9 || // 储物柜
|
|
export default {
|
|
components: {
|
|
'device-name': device_name
|
|
},
|
|
computed: {
|
|
getTip(){
|
|
let { optionsQuery } = this;
|
|
if(optionsQuery.page_id == 8)return 'Tips：如需更换货物、设置价格请前往PC端商家后台设置';
|
|
if(optionsQuery.page_id == 9)return 'Tips：如需设置柜子信息、设置价格请前往PC端商家后台设置';
|
|
return
|
|
},
|
|
isSelectedAll(){
|
|
let { boxList } = this;
|
|
let _is = true;
|
|
boxList.forEach(el=>{
|
|
if(!el._isSelected)_is = false;
|
|
})
|
|
return _is
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
optionsQuery: {},
|
|
boxList: [],
|
|
}
|
|
},
|
|
onLoad(options){
|
|
let _query = util.jsonPar(options.query);
|
|
this.optionsQuery = _query;
|
|
console.log(_query);
|
|
this.getBoxList();
|
|
},
|
|
methods: {
|
|
selectAll(){
|
|
let { isSelectedAll } = this;
|
|
let _boxList = this.boxList.slice();
|
|
this.boxList = _boxList.map(el=>{
|
|
el._isSelected = !isSelectedAll;
|
|
return el;
|
|
});
|
|
},
|
|
itemClick(index){
|
|
let _boxList = this.boxList.slice();
|
|
_boxList[index]._isSelected = !_boxList[index]._isSelected;
|
|
this.boxList = _boxList;
|
|
},
|
|
isRent(info){
|
|
if(!info)return false;
|
|
return info.cabinet_type === 'rent'
|
|
},
|
|
getleaseBoxType(info){
|
|
let _rentArr = ['未租', '已租'];
|
|
let _sellArr = ['未卖', '已卖'];
|
|
if(!info)return '';
|
|
if(info.cabinet_type == 'rent')return _rentArr[info. usage_status] || '';
|
|
if(info.cabinet_type == 'sell')return _sellArr[info. usage_status] || '';
|
|
},
|
|
getBoxList(){
|
|
deviceServer.get({
|
|
url: this.getListApi(),
|
|
data: {},
|
|
failMsg: '加载失败！'
|
|
})
|
|
.then(res=>{
|
|
let _list = res.list || [];
|
|
this.boxList = _list;
|
|
console.log(res);
|
|
})
|
|
},
|
|
getListApi(){
|
|
let { optionsQuery } = this;
|
|
if(optionsQuery.page_id == 8)return deviceApi.leaseList;
|
|
if(optionsQuery.page_id == 9)return deviceApi.lockerList;
|
|
},
|
|
openLocker(){
|
|
let { optionsQuery } = this;
|
|
if(optionsQuery.page_id == 9)return util.showModal({
|
|
title: '提示',
|
|
content: '是否补货',
|
|
showCancel: true,
|
|
success: modalRes=>{
|
|
console.log(modalRes)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
.locer-manage{
|
|
padding-bottom: 108upx;
|
|
padding-bottom: calc( 108upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
padding-bottom: calc( 108upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
}
|
|
.lm-list{
|
|
padding: 24upx;
|
|
.ll-item{
|
|
margin-bottom: 24upx;
|
|
padding: 30upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
@include centerFlex(space-between);
|
|
&:nth-child(odd){
|
|
.li-left{
|
|
border: none;
|
|
background-color: #f0f0f1;
|
|
.ll-box{
|
|
border: none;
|
|
background-color: #e3e3e5;
|
|
&::before{
|
|
border: none;
|
|
background-color: #f0f0f1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.li-left{
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
margin-right: 22upx;
|
|
width: 156upx;
|
|
height: 156upx;
|
|
border-radius: 10upx;
|
|
border: 2upx solid #ededf5;
|
|
@include centerFlex(center);
|
|
.ll-box{
|
|
position: relative;
|
|
padding: 10upx;
|
|
width: 120upx;
|
|
height: 120upx;
|
|
line-height: 100upx;
|
|
text-align: center;
|
|
border-radius: 10upx;
|
|
font-size: 32upx;
|
|
color: #9a9a9d;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
border: 2upx solid #ededf5;
|
|
&::before{
|
|
content: '';
|
|
position: absolute;
|
|
left: 10upx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 10upx;
|
|
height: 20upx;
|
|
border-radius: 6upx;
|
|
border: 2upx solid #ededf5;
|
|
}
|
|
}
|
|
.ll-tag{
|
|
position: absolute;
|
|
top: -14upx;
|
|
right: -26upx;
|
|
padding: 0 6upx;
|
|
border-radius: 6upx;
|
|
border: 2upx solid $themeColor;
|
|
text-align: center;
|
|
line-height: 28upx;
|
|
font-size: 20upx;
|
|
color: $themeColor;
|
|
&.grey{
|
|
border-color: #D8D8D8;
|
|
color: #9A9A9D;
|
|
}
|
|
&.orange{
|
|
border-color: #FF873D;
|
|
color: #FF873D;
|
|
}
|
|
}
|
|
}
|
|
.li-content{
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
>image{
|
|
flex-shrink: 0;
|
|
margin-left: 10upx;
|
|
width: 32upx;
|
|
height: 32upx;
|
|
border-radius: 50%;
|
|
border: 2upx solid #dddddd;
|
|
align-self: center;
|
|
&.active{
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
>view{
|
|
flex-grow: 1;
|
|
.lc-name{
|
|
margin-bottom: 18upx;
|
|
line-height: 50upx;
|
|
font-size: 36upx;
|
|
color: #333;
|
|
@include textHide(1);
|
|
}
|
|
.lc-price{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
>view{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
width: 50%;
|
|
@include textHide(1);
|
|
&:first-child{
|
|
line-height: 56upx;
|
|
font-size: 40upx;
|
|
color: #FF873D;
|
|
>text{
|
|
font-size: 28upx;
|
|
}
|
|
}
|
|
&:nth-child(2){
|
|
line-height: 44upx;
|
|
font-size: 28upx;
|
|
color: #9a9a9d;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.lm-tip{
|
|
padding: 0 24upx;
|
|
margin-bottom: 24upx;
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
color: #9a9a9d;
|
|
|
|
}
|
|
.lm-fixed-bar{
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 10upx 24upx;
|
|
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
|
|
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
|
|
padding-top: 10upx;
|
|
background-color: #fff;
|
|
@include centerFlex(space-between);
|
|
.lfb-select-all{
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #494949;
|
|
>image{
|
|
margin-right: 12upx;
|
|
vertical-align: middle;
|
|
width: 32upx;
|
|
height: 32upx;
|
|
border: 2upx solid #d8d8d8;
|
|
border-radius: 50%;
|
|
&.active{
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
.lfb-confirm{
|
|
padding: 0 56upx;
|
|
text-align: center;
|
|
height: 86upx;
|
|
line-height: 86upx;
|
|
font-size: 32upx;
|
|
border-radius: 46upx;
|
|
background-color: $themeColor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|