|
@@ -4,41 +4,39 @@
|
|
|
<template v-if="list.length">
|
|
|
<div class="query adfacjb">
|
|
|
<div class="ql adfac">
|
|
|
- <image src="@/static/query_mini.png"></image>
|
|
|
+ <image src="http://106.54.209.120:8188/static/query_mini.png"></image>
|
|
|
<input type="text" placeholder="搜索" placeholder-class="ph">
|
|
|
</div>
|
|
|
<div class="qr" @tap="addRole"> + 新增角色</div>
|
|
|
</div>
|
|
|
<div class="list" :style="{'height':'calc(100vh - '+(mt+156)+'px)'}">
|
|
|
- <u-list @scrolltolower="scrolltolower">
|
|
|
- <u-list-item v-for="(item, index) in list" :key="index">
|
|
|
- <u-swipe-action @touchstart.stop>
|
|
|
- <u-swipe-action-item :options="options" @click="deleteRole(item)" :ref="'swipeAction' + index" :threshold="5"/>
|
|
|
- <view class="swipe-action u-border-top u-border-bottom">
|
|
|
- <view class="swipe-action__content">
|
|
|
- <div class="l_item adfacjb">
|
|
|
- <div class="li_l adfac">
|
|
|
- <image :src="require('@/static/role_avatar'+(index%3)+'.png')"></image>
|
|
|
- <div class="lil_info">
|
|
|
- <p>{{'词语接龙'}}</p>
|
|
|
- <div class="tip">
|
|
|
- <u--text :lines="2" :text="'擅长词语接龙,规范词汇,助你锻炼词汇量与反应能力'" size="24rpx" color="#A6A6A6" :bold="true" lineHeight="40rpx"></u--text>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="li_r">配置到设备</div>
|
|
|
+ <u-swipe-action>
|
|
|
+ <u-swipe-action-item v-for="(item, index) in list" :key="index"
|
|
|
+ :options="options" @click="e=>deleteRole(item,e)" :ref="'swipeAction' + index" :threshold="5"
|
|
|
+ >
|
|
|
+ <view class="swipe-action u-border-top u-border-bottom">
|
|
|
+ <view class="swipe-action__content">
|
|
|
+ <div class="l_item adfacjb">
|
|
|
+ <div class="li_l adfac">
|
|
|
+ <image :src="'http://106.54.209.120:8188/static/role_avatar0.png'"></image>
|
|
|
+ <div class="lil_info">
|
|
|
+ <p>{{'词语接龙'}}</p>
|
|
|
+ <div class="tip">
|
|
|
+ <u--text :lines="2" :text="'擅长词语接龙,规范词汇,助你锻炼词汇量与反应能力'" size="24rpx" color="#A6A6A6" :bold="true" lineHeight="40rpx"></u--text>
|
|
|
</div>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-swipe-action-item>
|
|
|
- </u-swipe-action>
|
|
|
- </u-list-item>
|
|
|
- </u-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="li_r">配置到设备</div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-swipe-action-item>
|
|
|
+ </u-swipe-action>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div class="empty adffcacjc" :style="{'height':'calc(100vh - '+(mt+106)+'px)'}">
|
|
|
- <image src="@/static/empty_device.png"></image>
|
|
|
+ <image src="http://106.54.209.120:8188/static/empty_device.png"></image>
|
|
|
<p>请先绑定设备</p>
|
|
|
<div class="zt_btn" @tap="addDevice"> + 添加新设备</div>
|
|
|
</div>
|
|
@@ -58,7 +56,7 @@
|
|
|
},
|
|
|
data(){
|
|
|
return {
|
|
|
- list:[1],
|
|
|
+ list:[1,1],
|
|
|
options: [{
|
|
|
text: '删除',
|
|
|
style: {
|
|
@@ -76,6 +74,19 @@
|
|
|
url:'/pagesRole/addRole'
|
|
|
})
|
|
|
},
|
|
|
+ deleteRole(item,e){
|
|
|
+ console.log(e,item);
|
|
|
+ uni.showModal({
|
|
|
+ content:'删除角色设备将自动解绑需重新添加,您确定删除吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if(res.confirm){
|
|
|
+ this.list.forEach((d, i) => {
|
|
|
+ this.$refs['swipeAction' + i][0].closeHandler();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -83,9 +94,8 @@
|
|
|
<style>
|
|
|
.u-swipe-action-item__right__button__wrapper {
|
|
|
background: #F55454 !important;
|
|
|
- font-size: 32rpx;
|
|
|
- font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
- font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
color: #FFFFFF;
|
|
|
letter-spacing: 2rpx;
|
|
|
}
|
|
@@ -97,7 +107,7 @@
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped lang="less">
|
|
|
- ::v-deep .list .u-list-item{
|
|
|
+ ::v-deep .list .u-swipe-action-item{
|
|
|
margin-top: 60rpx;
|
|
|
}
|
|
|
::v-deep .list .swipe-action{
|
|
@@ -150,13 +160,7 @@
|
|
|
|
|
|
.list{
|
|
|
padding: 0 30rpx;
|
|
|
- ::v-deep .u-list{
|
|
|
- width: 100%;
|
|
|
- height: 100% !important;
|
|
|
- }
|
|
|
- ::v-deep .u-list-item{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ overflow-y: auto;
|
|
|
.l_item{
|
|
|
width: 100%;
|
|
|
.li_l{
|