@kaiyinchem/ky-uniui 1.0.3

package/components/ky-swiper.vue

@@ -0,0 +1,348 @@
+<template>
+	<view :style="{ height: full ? '100%' : 'auto'}" class="wrap">
+		<swiper
+      class="swiper"
+      :style="{ height: full ? '100%' : height + 'rpx'}"
+      :autoplay="autoplay"
+      :interval="interval"
+      :duration="duration"
+      :circular="loop"
+      :previous-margin="previousMargin + 'rpx'"
+      :next-margin="nextMargin + 'rpx'"
+      @change="change"
+      @touchmove.prevent=""
+    >
+			<swiper-item v-for="(item,index) in list" :key="index" @click="onItemClick(item, index)">
+				<view
+          v-if="list && list.length>0"
+          :class="[!crown ? '' : current==index ? 'crown-active':'crown']"
+          class="item"
+        >
+					<template v-if="!slots">
+            <image
+              v-if="item.type !== 'video'"
+              class="item-img"
+              :class="[imgShadow?'imgShadow':'']"
+              :src="item[imgKey] || '/static/img/pro_0.jpg'"
+              :style="{ borderRadius: imgRadius + 'px',width:imgWidth}"
+              mode="aspectFill"
+            >
+            </image>
+            <view 
+              v-else
+              :style="{ borderRadius: imgRadius + 'px',width:imgWidth}"
+              :class="[imgShadow?'imgShadow':'']"
+              class="item-img"
+            >
+              <view v-if="videoCtx.status !== 'play'" class="video-cover">
+                <image
+                  class="video-img"
+                  :src="item.poster"
+                  mode="aspectFill"
+                >
+                </image>
+                <text class="video-btn iconfont" @click="onVideoClick(index)">&#xe64b;</text>
+              </view>
+              <video
+                v-if="videoCtx.status === 'play'"
+                class="video-comp"
+                :id="'video_' + index"
+                :src="item[imgKey]"
+                :enable-progress-gesture="false"
+                :autoplay="true"
+                @touchmove="onVideoTouchMove"
+                @play="onVideoPlay"
+                @pause="onVideoPause"
+                @ended="onVideoEnded"
+                @error="onVideoError"
+              >
+              </video>
+            </view>
+          </template>
+					<slot v-else :data='item'></slot>
+				</view>
+			</swiper-item>
+		</swiper>
+		<view class="dots flex" :style="{bottom: bottom + 'rpx'}" v-if="dots">
+			<view class="dot" :class="[current == i ? 'curr-dot' : '']" v-for="(d,i) in list" :key='i'></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: () => []
+			},
+			// 轮播图片key
+			imgKey: {
+				type: String,
+				required: true
+			},
+			// 高度
+			height: {
+				type: Number,
+				default: 300
+			},
+			// 图片圆角
+			imgRadius: {
+				type: Number,
+				default: 0
+			},
+			// 图片阴影
+			imgShadow: {
+				type: Boolean,
+				default: false
+			},
+			// 前边距
+			previousMargin: {
+				type: Number,
+				default: 0
+			},
+			// 后边距
+			nextMargin: {
+				type: Number,
+				default: 0
+			},
+			// 图片宽度
+			imgWidth: {
+				type: String,
+				default: '100%'
+			},
+			// 是否循环
+			loop: {
+				type: Boolean,
+				default: true
+			},
+			// 自动播放
+			autoplay: {
+				type: Boolean,
+				default: true
+			},
+			// 播放时间间隔
+			interval: {
+				type: Number,
+				default: 3000
+			},
+			// 滑动速度
+			duration: {
+				type: Number,
+				default: 500
+			},
+			// 显示指示点
+			dots: {
+				type: Boolean,
+				default: true
+			},
+			// 轮播点下边距
+			bottom: {
+				type: Number,
+				default: 24
+			},
+			// 卡片特效
+			crown: {
+				type: Boolean,
+				default: false
+			},
+      // 全屏
+      full: {
+      	type: Boolean,
+      	default: false
+      },
+		},
+		data() {
+			return {
+				current: 0,
+				slots: false,
+        videoCtx: { status: '' }, // 视频对象
+			};
+		},
+		watch: {
+			// 判断异步数据源，是否使用插槽自定义样式
+			list: {
+				handler(val) {
+					if (val.length > 0 && this.$slots.default) {
+						this.slots = true
+					}
+          // this.videoCtx = []
+          // this.$nextTick(function() {
+          //   val.forEach((e, i) => {
+          //     if (e.type === 'video') {
+          //       const videoEle = uni.createVideoContext(`video_${i}`, this)
+          //       videoEle.index = i
+          //       videoEle.status = ''
+          //       this.videoCtx.push(videoEle)
+          //     }
+          //   })
+          // })
+				},
+				immediate: true,
+			}
+		},
+    computed: {
+      // currVideoCtx() {
+      //   return this.videoCtx.find(e => e.index === this.current)
+      // }
+    },
+    mounted() {
+    },
+		methods: {
+			change(event) {
+				let current = event.detail.current
+				this.current = current
+				this.$emit('change', this.list[current])
+
+        // 切换的时候把所有视频都暂停
+        if (this.videoCtx.id) {
+          this.videoCtx.pause()
+          // this.videoCtx.forEach((e) => {
+          //   if (current !== e.index) {
+          //     console.log('切换暂停')
+          //     e.pause()
+          //   }
+          // })
+        }
+			},
+
+      onItemClick(el, index) {
+        if (this.full) {
+          if (index === this.list.length - 1) {
+            this.$emit('selected', el)
+          }
+          return
+        }
+        this.$emit('selected', el)
+      },
+
+      onVideoClick(i) {
+        this.setVideoStatus('play')
+        const videoEle = uni.createVideoContext(`video_${i}`, this)
+        videoEle.index = i
+        videoEle.status = 'play'
+        this.videoCtx = videoEle
+        this.videoCtx.play()
+        console.log('点击了', this.videoCtx.status)
+      },
+
+      setVideoStatus(status) {
+        this.videoCtx.status =  status
+      },
+
+      onVideoPlay() {
+        this.setVideoStatus('play')
+      },
+
+      onVideoPause() {
+        this.setVideoStatus('pause')
+        console.log('pause')
+      },
+
+      onVideoEnded() {
+        this.setVideoStatus('ended')
+        this.videoCtx.exitFullScreen()
+        console.log('ended')
+      },
+
+      onVideoError() {
+        this.$toast('播放失败！')
+        this.setVideoStatus('error')
+      },
+
+      /**
+       * 视频滑动监听
+       * @description 因为video组件层级高，禁止了手势进度，所以没办法进行切换swiper
+       * @version 2021-09-28 zzc
+       */
+      onVideoTouchMove(e) {
+        console.log(e)
+      }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+  .video-comp {
+    width: 100%;
+    height: 100%;
+  }
+  .video-cover {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: rgba(0,0,0,0.1);
+    }
+    .video-img {
+      width: 100%;
+      height: 100%;
+    }
+    .video-btn {
+      position: absolute;
+      z-index: 1;
+      color: var(--color-dark);
+      font-size: 150rpx;
+    }
+  }
+	.wrap {
+		position: relative;
+
+		.crown {
+			transform: scale(0.93, 0.9);
+		}
+
+		.item {
+			height: 100%;
+			transition: 1.2s;
+		}
+
+		.item-img {
+			width: 100%;
+			height: 100%;
+		}
+
+		.imgShadow {
+			height: calc(100% - 10px);
+			margin-bottom: 10px;
+			box-shadow: 0 6px 6px rgba(0, 0, 0, .15);
+		}
+
+		.crown-active {
+			transform: scale(1);
+		}
+
+		.dots {
+			display: flex;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+
+			.dot {
+				width: 10rpx;
+				height: 10rpx;
+				border-radius: 50%;
+				background-color: #D6D6D6;
+				margin-right: 10rpx;
+        transition: all 0.3s;
+			}
+
+			.curr-dot {
+				height: 10rpx;
+				width: 30rpx;
+				border-radius: 5rpx;
+				background-color: #fff;
+			}
+		}
+
+	}
+</style>

package/components/ky-switch.vue

@@ -0,0 +1,159 @@
+<!--莉美易 switch组件-->
+<template>
+	<view class="lmy-switch">
+		<text v-if="label" :style="{ color }" class="ls-label">{{ label }}</text>
+		<view :style="{ 'background-color': checked ? actColor : inactColor }" class="ls-parent" @click="onSwitchClick">
+			<view :class="{ active: checked }" class="ls-pointer"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	const isDark = uni.getSystemInfoSync().theme === 'dark'
+	
+	export default {
+		emits: ['update:value', 'change'],
+		props: {
+			/**
+			 * @param { String }  label 提示文字
+			 */
+			label: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * @param { String }  color 文本颜色
+			 */
+			color: {
+				type: String,
+				default: '#666666'
+			},
+			/**
+			 * @param { String }  activeColor 激活的背景色
+			 */
+			activeColor: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * @param { String }  inactiveColor 未激活的背景色
+			 */
+			inactiveColor: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * @param { Boolean, Number, String }  value v-model 目前仅支持布尔值
+			 */
+			value: {
+				type: [Boolean, Number, String],
+				default: false
+			},
+			/**
+			 * @param { Boolean, Number, String }  inactiveValue 关闭的时候的值，值不是布尔值的时候使用的
+			 */
+			inactiveValue: {
+				type: [Boolean, Number, String],
+				default: false
+			},
+			/**
+			 * @param { Boolean, Number, String }  activeValue 打开的时候的值
+			 */
+			activeValue: {
+				type: [Boolean, Number, String],
+				default: true
+			}
+		},
+		computed: {
+			inactColor() {
+				if (this.inactiveColor) {
+					return this.inactiveColor
+				}
+				return this.isDark ? '#666666' : '#dddddd'
+			},
+			actColor() {
+				if (this.activeColor) {
+					return this.activeColor
+				}
+				return this.isDark ? '#067272' : '#00B2A9'
+			}
+		},
+		data() {
+			return {
+				actVal: false,
+				checked: false,
+				isDark
+			}
+		},
+		mounted() {
+			this.setValue(this.value !== this.activeValue, true)
+			uni.onThemeChange(res => {
+				this.isDark = res.theme === 'dark'
+			})
+		},
+		destroyed() {
+			uni.offThemeChange()
+		},
+		methods: {
+			onSwitchClick() {
+				this.setValue(this.checked)
+				this.$emit('update:value', this.actVal)
+				this.$emit('change', this.actVal)
+			},
+			setValue(flag, isInit) {
+				const inact = typeof this.inactiveValue !== 'undefined'
+				const act = typeof this.activeValue !== 'undefined'
+				if (inact || act) {
+          this.actVal = !this.checked ? this.activeValue : this.inactiveValue
+          this.checked = !flag
+				} else {
+          if (isInit) {
+            this.actVal = !!this.value
+            this.checked = !!this.value
+          } else {
+            this.actVal = !this.value
+            this.checked = !this.checked
+          }
+				}
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.lmy-switch {
+		display: flex;
+		align-items: center;
+	}
+	.ls-label {
+		display: inline-block;
+		margin-right: 12rpx;
+		color: var(--color-gray);
+		font-size: 24rpx;
+	}
+	.ls-parent {
+		width: 80rpx;
+		height: 40rpx;
+		background-color: var(--bg-gray);
+		border-radius: 40rpx;
+		position: relative;
+		display: flex;
+		align-items: center;
+		transition: all 0.3s;
+		.ls-pointer {
+			position: absolute;
+			width: 25rpx;
+			height: 25rpx;
+			border-radius: 50%;
+			background: var(--bg-white);
+			top: 0;
+			bottom: 0;
+			margin: auto;
+			left: 10rpx;
+			transition: left 0.3s;
+			&.active {
+				left: 50rpx;
+			}
+		}
+	}
+</style>

package/components/ky-tab.vue

@@ -0,0 +1,214 @@
+<template>
+	<scroll-view
+    :scroll-x="scrollX"
+    :class="{
+      fixed: position === 'fixed',
+      sticky: position === 'sticky',
+      iphonex: $safeBottom > 0 && position === 'fixed',
+      icon: hasIcon,
+      scroll: scrollX
+    }"
+    class="tab-scroll"
+  >
+		<view id="tab-parent" class="tab-components">
+      <view class="tab-box">
+      	<view
+      		v-for="(tab, i) in menu"
+      		:style="{ color: activeColor && i === tabIndex ? activeColor : color }"
+      		:key="i"
+      		:class="{ active: i === tabIndex, icon: tab.icon }"
+      		:id="'tab_'+i"
+      		class="tab-item"
+      		@click="onTabClick(tab, i)"
+        >
+          <text v-if="tab.icon" class="tab-icon iconfont">{{ tab.icon }}</text>
+          <text class="tab-text">{{ tab[label] }}</text>
+        </view>
+      </view>
+      <!-- <view
+      	v-if="tabItemWidth > 0 && !hasIcon"
+      	:style="{ left: tabItemOffsetLeft + 'px', width:  tabItemWidth + 'px', 'background-color': activeColor }"
+      	class="tab-slider"
+      >
+      </view> -->
+    </view>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		emits: ['update:value', 'change'],
+		props: {
+      // 显示字体图标传入icon: '\'
+			menu: {
+				type: Array,
+				default: () => [],
+				required: true
+			},
+			index: {
+				type: Number,
+				default: 0
+			},
+			activeColor: {
+				type: String,
+			},
+			color: {
+				type: String,
+			},
+
+      // fixed, sticky
+      position: {
+        type: String,
+        default: 'relative'
+      },
+
+      scrollX: {
+        type: Boolean,
+        default: false,
+      },
+      value: {
+        type: [ String, Number, Boolean ],
+        default: undefined
+      },
+      label: {
+        type: String,
+        default: 'name',
+      },
+      val: {
+        type: String,
+        default: 'id',
+      },
+		},
+		data() {
+			return {
+				tabItemOffsetLeft: 0,
+				tabItemWidth: 0,
+				tabIndex: 0,
+			}
+		},
+    watch: {
+      value(v) {
+        this.tabIndex = v
+      }
+    },
+    computed: {
+      hasIcon() {
+        return this.menu.find(e => e.icon)
+      },
+      $safeBottom() {
+      	return uni.getSystemInfoSync().safeAreaInsets.bottom
+      }
+    },
+		mounted() {
+      if (!this.hasIcon) {
+        this.onTabClick(this.menu[this.index], this.index)
+      } else {
+        this.tabIndex = typeof this.value !== 'undefined' ? this.value : this.index
+      }
+		},
+		methods: {
+			onTabClick(item, index) {
+        if (this.hasIcon) {
+          this.tabIndex = index
+          this.$emit('change', index)
+          this.$emit('update:value', index)
+          return
+        }
+				const query = uni.createSelectorQuery().in(this)
+				const parent = query.select('#tab-parent')
+				// vue3版本在真机上不能同时获取两个元素
+				parent.boundingClientRect(data => {
+					// console.log(data)
+					this.tabItemWidth = data.width / (this.menu.length * 2)
+					this.tabItemOffsetLeft = index * this.tabItemWidth * 2 + (data.left || (this.tabItemWidth/2.75))
+					if (this.tabIndex === index) {
+						return
+					}
+					this.tabIndex = index
+					this.$emit('change', index)
+				  this.$emit('update:value', index)
+				}).exec()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+  .tab-scroll {
+    background: var(--bg-white);
+    width: auto;
+    &.scroll {
+      padding: 0 24rpx;
+      .tab-components {
+        white-space: nowrap;
+        .tab-box {
+          justify-content: flex-start;
+					position: relative;
+        }
+      }
+    }
+    &.icon {
+      padding: 12rpx 24rpx;
+    }
+    &.fixed {
+      position: fixed;
+      z-index: 9;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      &.iphonex {
+        padding-bottom: 50rpx;
+      }
+    }
+    &.sticky {
+      position: sticky;
+      z-index: 999;
+      top: 0;
+    }
+  }
+	.tab-components {
+		position: relative;
+		z-index: 1;
+		.tab-box {
+			display: flex;
+			justify-content: space-around;
+			.tab-item {
+				margin: 0 12rpx;
+				padding: 12rpx 0;
+				transition: all 0.3s;
+				color: var(--color-gray);
+				border-bottom: 2px solid rgba(255,255,255,0);
+				box-sizing: border-box;
+				&.active {
+					font-weight: bold;
+					color: var(--color-primary);
+					border-color: var(--color-primary);
+				}
+        &.icon {
+          font-weight: normal;
+          .tab-text {
+            font-size: 22rpx;
+          }
+        }
+        .tab-icon, .tab-text {
+          display: block;
+          text-align: center;
+          color: inherit;
+        }
+        .tab-icon {
+          font-size: 48rpx;
+        }
+			}
+		}
+		.tab-slider {
+			position: absolute;
+			background-color: var(--color-primary);
+			height: 6rpx;
+			border-radius: 12rpx;
+			width: 50rpx;
+			left: 15%;
+			bottom: 0;
+      transition: all 0.5s;
+		}
+	}
+</style>