kaiguan-zfb/page_components/newtaocan.vue

213 lines
4.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<u-navbar title="套餐管理" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
height='50'></u-navbar>
<view class="box" v-if="loading">
<view class="" style="color: #ccc;font-size: 28rpx;font-weight: 600;">
左滑可删除指定套餐
</view>
<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.suitId" @click="click(item)" @open="open" :options="options">
<view class="boxlist" @click="btnedit(item)">
<view class="toptime">
<text>{{item.name.length > 5 ? item.name.substring(0,4) + '...' : item.name}}通电时长{{item.value}} <text v-if="item.timeUnit == 1">日</text> <text v-if="item.timeUnit == 2">时</text> <text v-if="item.timeUnit == 3">分钟</text> <text v-if="item.timeUnit == 4">秒</text> </text> <text>¥{{item.price}}</text>
</view>
<view class="bumday" v-if="item.description">
<text class="shi">{{item.description.length > 20 ? item.description.substring(0, 20) + '...' : item.description}}</text></text>
</view>
</view>
</u-swipe-action>
<view class="" v-if="list.length == 0" style="color: #ccc;font-size: 36rpx;margin-top: 200rpx;text-align: center;">
该设备暂无套餐
</view>
<view class="anniu">
<view class="xinz" @click="btnadd">
新增套餐
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
loading:false,
disabled: false,
btnWidth: 180,
show: false,
options: [{
text: '删除',
style: {
backgroundColor: '#dd524d'
}
}],
deviceId:'',
bgc: {
backgroundColor: "#8883f0",
},
};
},
onLoad(option) {
console.log(option);
this.deviceId = option.id
},
onShow() {
this.getlist()
},
// 分享到好友(会话)
onShareAppMessage: function () {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function () {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
methods: {
getlist() {
let data = {
pageNum: 1,
pageSize: 99
}
this.$u.get(`/app/suit/tempList`, data).then((res) => {
if (res.code == 200) {
this.list = res.rows
this.loading = true
this.list = this.list.map(item => ({
...item,
checked: false,
isActive: false
}))
console.log(this.list);
this.loading = true
}
})
},
btnedit(item){
uni.navigateTo({
url:'/page_fenbao/statulist/taocanlist/addtaocan/index?id=' + this.deviceId + '&suitId=' + item.suitId
})
},
click(item) {
this.$u.delete(`/app/suit/${item.suitId}`).then((res) => {
if (res.code == 200) {
this.$u.toast(`删除成功`);
this.getlist()
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000,
})
}
});
},
open(index) {
this.list[index].show = true
this.list.map((val, idx) => {
if (index != idx) this.list[idx].show = false;
})
},
btnadd(){
uni.navigateTo({
url:'/page_fenbao/statulist/taocanlist/addtaocan/index?id=' + this.deviceId
})
}
}
};
</script>
<style lang="scss">
/deep/ .u-title{
padding-bottom: 22rpx;
}
/deep/ .u-icon__icon{
padding-bottom: 22rpx;
}
page {
background: #F4F5F7;
}
.page {
width: 750rpx;
padding-bottom: 400rpx;
.box {
width: 750rpx;
height:100%;
background: #F4F5F7;
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding: 50rpx;
.anniu{
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 200rpx;
padding-top: 40rpx;
background-color: #fff;
padding-left: 50rpx;
padding-right: 50rpx;
.xinz{
width: 100%;
height: 84rpx;
background: #8883F0;
filter: blur(0px);
text-align: center;
line-height: 84rpx;
font-size: 36rpx;
color: #FFFFFF;
border-radius: 50rpx;
}
}
.boxlist{
padding: 40rpx 42rpx;
box-sizing: border-box;
.toptime{
font-size: 32rpx;
// color: #000000;
display: flex;
justify-content: space-between;
}
.bumday{
margin-top: 10rpx;
text{
font-size: 32rpx;
color: #95989D;
}
}
}
/deep/ .u-swipe-action {
margin-top: 30rpx;
border-radius: 20rpx;
width: 654rpx;
height: 182rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
filter: blur(0px);
border: 0;
}
/deep/ .u-swipe-del {
height: 190rpx;
}
}
}
</style>