wardrobe/tm-vuetify/components/tm-switchList/tm-switchList.vue

<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>