<template>
<view class="tm-switchList fulled overflow border-b-1" :class="[black_tmeme?'grey-darken-4 bk':bgColor]"
:style="{height:height+'rpx'}">
<movable-area :style="{height:height+'rpx',width:w+'px'}">
<movable-view :disabled="disabled" :animation="showright" :x="activeOn"
:style="{height:height+'rpx',width:(w-i_w)+'px'}" inertia @change="onChange" direction="horizontal">
<view :style="{width:(w-i_w)+'px'}" :class="[disabled?'gray-100':'']"
class="fulled fulled-height flex-between relative">
<view @click="click" @touchend="move_action_end" @touchstart="move_action_start"
:style="{width:(w+i_w)+'px',left:-(w)+'px'}" class=" fulled-height flex-shrink absolute">
<view class="fulled-height " :style="{width:(w)+'px',marginLeft:(w-i_w)+'px'}">
<view class="fulled fulled-height flex-start overflow ">
<view v-if="icon" class=" d-inline-block">
<view class="overflow flex-end" style="width: 102rpx;height: 80rpx;">
<view v-if="dotObj.dot!==null" class="absolute fulled-height fulled" style="z-index: 10;">
<tm-badges :dot="dotObj.dot" :label="dotObj.label" :icon="dotObj.icon"
:offset="[5,10]"></tm-badges>
</view>
<view class=" flex-center overflow flex-shrink round-4" style="width: 80rpx;height: 80rpx;">
<slot name="left" :hdata="{width:80,height:80}">
<tm-images :round="4" :src="iconName" :width="80" :height="80" v-if="vtype==false"></tm-images>
<view v-if="vtype==true" class="round-4 flex-center "
:class="[color_tmeme,black_tmeme?'bk':'']"
style="width: 80rpx;height: 80rpx;">
<text :style="{fontSize: iconSize+'rpx'}"
:class="[prefx_computed,iconName]"></text>
</view>
</slot>
</view>
</view>
</view>
<view class="d-inline-block overflow px-32 "
:style="{width: `calc(100% - ${icon?164:0}rpx)`,height:height+'rpx'}">
<view class="fulled-height flex-between overflow">
<view :style="{width: `calc(100% - ${icon?160:150}rpx)`}">
<slot name="default">
<view class="text-size-n text-overflow ">{{title}}</view>
<view v-if="label" class="text-size-s text-grey text-overflow pt-4">
{{label}}
</view>
</slot>
</view>
<view class="flex-end fulled-height relative">
<view class=" absolute flex-shrink" style="z-index: 9;">
<slot name="right">
<view v-if="rightLabel"
class="text-size-s text-grey text-align-right nowrap">{{rightLabel}}
</view>
<view v-if="rightIcon" class="flex-end nowrap pt-10">
<tm-icons :fllowTheme="fllowTheme" :color="color_tmeme"
:name="rightIcon"></tm-icons>
</view>
</slot>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view @click="click" @touchend="move_action_end" @touchstart="move_action_start"
:style="{width:w+'px'}" class="fulled fulled-height flex-end absolute">
<block v-if="showright">
<view @click.stop="actionsClick(index,item)" v-for="(item,index) in actions" :key="index"
:style="{width:(item.width||itemWidth)+'rpx'}" :class="[item['color']||'white']"
class=" fulled-height flex-center text-size-n flex-shrink">{{item.text}}</view>
</block>
</view>
</view>
</movable-view>
</movable-area>
</view>
</template>
<script>
/**
* 滑动单元格
* @property {String | Boolean} black = [true|false] 默认：null，是否开启暗黑模式
* @property {String | Boolean} disabled = [true|false] 默认：false，是否禁用，禁用后无法操作。
* @property {String | Boolean} on = [true|false] 默认：false，是否打开操作栏
* @property {Number} width = [] 默认：0，单元格的宽度，rpx,可不提供，默认为父组件的宽度
* @property {Number} height = [] 默认：120，单元格的高度度，rpx,
* @property {Number} item-width = [] 默认：140，底部操作按钮的宽度，rpx,
* @property {Number} icon-size = [] 默认：40，项目左边的图标大小，rpx,
* @property {String} color = [] 默认：primary，主题颜色名称
* @property {String} bgColor = [] 默认：white，项目的背景色
* @property {String} icon = [] 默认：''，项目左边的图标
* @property {String} right-icon = [] 默认：''，项目右边的图标
* @property {String} right-label = [] 默认：''，项目右边的文字
* @property {String} title = [] 默认：''，项目的标题
* @property {String} label = [] 默认：''，项目的详细信息文字
* @property {String|Boolean|Number} dot = [] 默认：false，是否显示左边图标的角标.Boolean类型时，显示dot。String类型时显示图标,Number类型时显示数字角标。
* @property {String} actions = [] 默认：[]，底部的操作按钮格式：{text: "删除列表",width: 190,color: 'red'}
* @param {Function} click 点击项目时触发
* @param {Function} actionsClick 点击操作按钮时触发，{index:index,item:item}
*/
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
import tmBadges from '@/tm-vuetify/components/tm-badges/tm-badges.vue';
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
export default {
name: "tm-switchList",
components: {
tmIcons,
tmBadges,tmImages
},
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 140
},
itemWidth: {
type: Number,
default: 180
},
on: {
type: Boolean,
default: false
},
color: {
type: String,
default: 'primary'
},
bgColor: {
type: String,
default: 'white'
},
// 跟随主题色的改变而改变。
fllowTheme: {
type: Boolean | String,
default: true
},
// 是否开启暗黑模式
black: {
type: String | Boolean,
default: null
},
disabled: {
type: String | Boolean,
default: false
},
icon: {
type: String,
default: ''
},
iconSize: {
type: Number | String,
default: 40
},
rightIcon: {
type: String,
default: ''
},
rightLabel: {
type: String,
default: ''
},
title: {
type: String,
default: '标题'
},
label: {
type: String,
default: ''
},
dot: {
type: String | Boolean | Number,
default: false
},
actions: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
x: 0,
old_x: 0,
w: 0,
h: 0,
i_w: 0,
showright: false,
isopnen: 0,
timidId: 88656,
isDrageUp: false,
is_js_cha_old_x: true,
cha_old_x: 0,
last_len: 0, //最后一次的距离差，
last_dir: 0 //最后一次的方向。原因在于滑动时，可能断点
};
},
watch:{
on:function(){
if(this.on==true){
this.$nextTick(function(){
this.activeOn = 0
})
}else if(this.on==false){
this.$nextTick(function(){
this.activeOn = this.i_w;
})
}
},
actions:function () {
this.initsWH();
}
},
computed: {
vtype: function() {
if (this.icon[0] == "." ||
this.icon[0] == "/" ||
this.icon.substring(0, 4) == 'http' ||
this.icon.substring(0, 5) == 'https' ||
this.icon.substring(0, 3) == 'ftp'
) {
return false;
}
return true;
},
iconName: function() {
return this.icon;
},
prefx_computed(){
let prefix = this.icon.split('-')[0];
if(prefix=='icon') return 'iconfont';
if(prefix=='mdi') return 'mdi';
return prefix;
},
dotObj: function() {
if (typeof this.dot === 'number' && this.dot) {
return {
dot: false,
label: this.dot,
icon: ''
};
}
if (typeof this.dot === 'string' && this.dot) {
if(this.dot.indexOf('-')>0){
return {
dot: false,
label: 0,
icon: this.dot
};
}else{
return {
dot: false,
label: this.dot,
icon: ''
};
}
}
if (typeof this.dot === 'boolean' && this.dot) {
return {
dot: true,
label: 0,
icon: ''
};
}
return {
dot: null,
label: 0,
icon: ''
};
},
activeOn: {
get: function() {
if (this.disabled) return this.i_w;
return this.isopnen;
},
set: function(val) {
this.isopnen = val
}
},
black_tmeme: function() {
if (this.black !== null) return this.black;
return this.$tm.vx.state().tmVuetify.black;
},
color_tmeme: function() {
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
.fllowTheme) {
return this.$tm.vx.state().tmVuetify.color;
}
return this.color;
},
},
async mounted() {
this.initsWH();
},
methods: {
initsWH(){
let t = this;
let iitemw = uni.upx2px(this.itemWidth);
let total = 0;
for (let i = 0; i < this.actions.length; i++) {
if (this.actions[i]['width']) {
total += uni.upx2px(this.actions[i]['width'])
} else {
total += iitemw
}
}
this.$nextTick(async function() {
let p = await this.$Querey(".tm-switchList", this,30).catch(e => {})
this.w = uni.upx2px(this.width) || p[0].width
this.i_w = total
this.x = this.on ? 0 : this.i_w;
this.isopnen = this.on ? 0 : this.i_w;
setTimeout(function() {
t.showright = true;
}, 50)
})
},
move_action_start(e) {
if (this.activeOn)
this.isDrageUp = false;
this.is_js_cha_old_x = true
},
async move_action_end(e) {
this.isDrageUp = true;
let t = this;
await uni.$tm.sleep(50)
//t.last_len移动的距离。
//t.last_dir 负为左。正为右
//左方向。需要达到一定的距离差才会执行
//以免误触。
if (t.last_dir < 0) {
// console.log('左');
// 如果此时，已经在左边。如果还继续往左拉，就是复位到左边。而不是右边。
if (t.activeOn == 0) {
t.activeOn = 20;
await uni.$tm.sleep(200)
t.activeOn = 0;
return;
}
if (t.last_len > 20) {
t.activeOn = t.i_w + 10;
t.$nextTick(function() {
t.activeOn = 0;
})
} else if (t.last_len <= 20) {
t.activeOn = t.x - 10
t.$nextTick(function() {
t.activeOn = t.i_w;
})
}
//右方向
} else if (t.last_dir > 0) {
// console.log('右');
t.activeOn = t.i_w + 10
await uni.$tm.sleep(10)
t.$nextTick(function() {
t.activeOn = t.i_w;
})
}
},
actionsClick(index, item) {
if (this.disabled) return;
this.$emit('actionsClick', {
index: index,
item: item
});
},
click(e) {
this.activeOn = this.i_w;
if (this.disabled) return;
this.$emit('click', e)
},
onChange: function(e) {
let t = this;
let pos_x = e.detail.x;
this.last_dir = pos_x - this.x; //上一次移动到下一次移动的距离。正为右，负为反方向左。
if (this.is_js_cha_old_x == true && this.isDrageUp == false) {
this.cha_old_x = pos_x;
this.is_js_cha_old_x = false;
// console.log('按下', pos_x);
}
if (this.isDrageUp == true && this.is_js_cha_old_x == false) {
this.$nextTick(function() {
this.is_js_cha_old_x = true;
this.last_len = Math.floor(Math.abs(this.cha_old_x - pos_x)); //从第一次移动到结束时的移动距离。
// console.log('松开', this.last_len);
})
}
t.x = pos_x;
}
}
}
</script>
<style lang="scss">
</style>