@kaiyinchem/ky-uniui 1.0.3

package/components/ky-highlight-keywords.vue

@@ -0,0 +1,229 @@
+<!--搜索高亮关键字组件， 2021-05-11, kingchem zzc-->
+<template>
+  <view class="keyword-select">
+    <view style="padding-right: 36rpx;flex: 1;">
+      <slot></slot>
+    </view>
+    <text v-if="content && showClear" class="form-clear iconfont" @click="clear">&#xe622;</text>
+    <scroll-view v-if="showTips" :scroll-y="true" :style="{ top: top + 'rpx' }"  class="keyword-list">
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="keyword-item"
+        @click.stop="select(item)"
+      >
+        {{ item[keyName] }}
+        <!-- <text
+          v-for="(str, idx) in item[keyName].split('')"
+          :key="idx"
+          :class="{ red: setRed(str) }"
+        >
+          {{ str }}
+        </text> -->
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import { debounce } from '@/utils/index.js'
+
+  export default {
+    props: {
+      // 关键字
+      value: {
+        type: String,
+        default: ''
+      },
+
+      // 询价位置
+      searchPosition: {
+        type: String,
+        default: ''
+      },
+
+      // 要返回的键名名称
+      keyName: {
+        type: String,
+        default: 'name'
+      },
+
+      // 查询列表的api地址
+      api: {
+        type: String,
+        default: ''
+      },
+
+      // 显示清除按钮
+      showClear: {
+        type: Boolean,
+        default: false
+      },
+      top: {
+        type: String,
+        default: '100'
+      },
+      // 初始化赋值的时候是否要显示，兼容小程序，小程序value会走watch
+      noShow: {
+        type: Boolean,
+        default: false
+      },
+    },
+    data() {
+      return {
+        content: '',
+        list: [],
+        curr: '',
+        showTips: false,
+        close: false
+      }
+    },
+    watch: {
+      value(newValue) {
+        this.content = newValue
+        this.onInput(newValue)
+      },
+      noShow(v) {
+        this.close = v
+      },
+    },
+    mounted() {
+      this.content = this.value
+      this.close = this.noShow
+    },
+    methods: {
+      clear() {
+        this.content = ''
+        this.curr = {}
+        this.showTips = false
+        this.$emit('change', this.curr)
+        this.$emit('input', '')
+      },
+
+      setRed(str) {
+        return this.content.toLocaleUpperCase().indexOf(str.toLocaleUpperCase()) > -1
+      },
+
+      // 名称输入
+      onInput(val) {
+        if (!val) {
+          this.clear()
+          this.curr = {}
+          this.showTips = false
+          this.$emit('change', this.curr)
+          this.$emit('input', '')
+        } else {
+          if (!this.curr[this.keyName]) {
+            debounce(this.search, 1000)
+          }
+        }
+        this.close = false
+      },
+
+      // 选中
+      select(item) {
+        this.showTips = false
+        this.content = item[this.keyName]
+        this.curr = item
+        this.$emit('input', this.content)
+        this.$emit('change', item)
+        setTimeout(() => {
+          this.curr = {}
+        })
+      },
+
+      onFocus() {
+        if (this.list.length) {
+          this.showTips = true
+        }
+        if (!this.content) {
+          this.list = []
+        }
+      },
+
+      closeTip() {
+        this.showTips = false
+      },
+
+      // 查找
+      async search() {
+        if (!this.api) {
+          return
+        }
+        if (!this.content) {
+          return
+        }
+        if (this.close) {
+          return
+        }
+        try {
+          const apiUrl = this.api.split('.')
+          const { data } = await this.$api[apiUrl[0]][apiUrl[1]](this.content, '', this.searchPosition)
+          this.list = data.lists || data.items || data || []
+          if (!this.list.length) {
+            this.$toast('未查找到相关内容')
+          } else {
+            this.showTips = true
+          }
+          this.$emit('finish', this.list)
+        } catch (e) {
+          this.curr = {}
+          this.showTips = false
+          this.$emit('change', this.curr)
+          console.log(e)
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .keyword-select {
+    position: relative;
+    background: var(--bg-white);
+    display: flex;
+    .keyword-list {
+      width: 100%;
+      left: 0;
+      right: 0;
+      position: absolute;
+      background: var(--bg-white);
+      box-shadow: 0 12rpx 12rpx #dddddd;
+      z-index: 3;
+      max-height: 500rpx;
+      overflow-y: auto;
+      border-top: 1px solid var(--border-1);;
+      .keyword-item {
+        display: block;
+        padding: 24rpx;
+        color: #666666;
+        border-bottom: 1px solid var(--border-1);;
+        &:last-child {
+          border: 0;
+        }
+        &:active {
+          background-color: #EEEEEE;
+        }
+        &.kl-close {
+          display: flex;
+          justify-content: flex-end;
+          border: 0;
+          text {
+            font-size: 26rpx;
+            color: #999999;
+          }
+        }
+      }
+      .red {
+        color: red;
+        font-weight: bold;
+      }
+    }
+    .form-clear {
+      position: absolute;
+      right: 24rpx;
+      color: #999999;
+      top: 40%;
+    }
+  }
+</style>

package/components/ky-loading.vue

@@ -0,0 +1,64 @@
+<template>
+	<view :class="{ isRelative }" class="ky-loading-box loading5">
+		<view class="shape shape1"></view>
+		<view class="shape shape2"></view>
+		<view class="shape shape3"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			isRelative: {
+				type: Boolean,
+				default: false,
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.ky-loading-box {
+		height: 25rpx;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 0;
+		&.isRelative {
+			position: relative;
+			min-height: 100rpx;
+		}
+	}
+	.shape {
+	  width: 25rpx;
+	  height: 25rpx;
+	  border-radius: 50%;
+	  background-color: var(--color-primary);
+		margin: 0 6rpx;
+	}
+	.shape1 {
+	  animation: pulse .4s ease 0s infinite alternate;
+	}
+	.shape2 {
+	  animation: pulse .4s ease .2s infinite alternate;
+	}
+	.shape3 {
+	  animation: pulse .4s ease .4s infinite alternate;
+	}
+	@keyframes pulse {
+	  from {
+	    opacity: 1;
+	    transform: scale(1);
+	  }
+	  to {
+	    opacity: .25;
+	    transform: scale(.5);
+	  }
+	}
+</style>

package/components/ky-nologin.vue

@@ -0,0 +1,47 @@
+<template>
+	<!--未登录遮罩-->
+	<view class="nologin-mask">
+		<view class="nologin-btn">
+			<slot></slot>
+			<text class="block ft-24 mb-12 gray-color">{{ msg }}</text>
+			<ky-btn size="mini" width="200rpx" round @click="$nav.push('Login')">去登录</ky-btn>
+		</view>
+	</view>
+	<!--end 未登录遮罩-->
+</template>
+
+<script>
+	export default {
+		props: {
+			msg: {
+				type: String,
+				default: ''
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.nologin-mask {
+		position: fixed;
+		z-index: 2;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(to top, var(--color-white) 45%, rgba(var(--rgb-white), 0.25));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.nologin-btn {
+			margin-top: 100rpx;
+			width: 480rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+		}
+	}
+</style>

package/components/ky-phone.vue

@@ -0,0 +1,86 @@
+<!--悬浮电话按钮 首页、推荐产品页，产品详情页）-->
+<template>
+  <view class="float-icon-box">
+    <view class="float-icon-wrap">
+      <view class="float-item" @click.stop="toPage('/pages/User/Feedback/Create')">
+        <text class="iconfont" style="font-size: 22rpx;">&#xe60e;</text>
+        <text class="iconname">建议</text>
+      </view>
+      <view class="float-item" @click.stop="callPhone">
+        <text v-if="noPhone" class="iconfont" >&#xe680;</text>
+        <text v-else class="iconfont">&#xe8ab;</text>
+        <text class="iconname">{{ !noPhone ? '客服' : '经纪人' }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { useUserInfo, useToken } from '@/stores/index.js'
+	import config from '@/config.js'
+
+  export default {
+    data() {
+      return {}
+    },
+		computed: {
+			noPhone() {
+				return useUserInfo().value && useUserInfo().value.customerOwnerPhone
+			}
+		},
+    methods: {
+      callPhone() {
+				const user = useUserInfo().value
+        const phoneNumber = user.customerOwnerPhone || config.CONTACT
+        uni.makePhoneCall({ phoneNumber })
+      },
+
+      toPage(url) {
+        this.$nav.push(useToken().value ? url : '/pages/Login')
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .float-icon-box {
+    position: fixed;
+    bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom) + 24rpx);
+    right: 24rpx;
+    z-index: 99;
+    width: 75rpx;
+  }
+  .float-icon-menu {
+    position: relative;
+    z-index: 1;
+  }
+  .float-item {
+    width: 100%;
+    height: 75rpx;
+    background: linear-gradient(to bottom, var(--color-light-primary), var(--color-primary));
+    box-shadow: 0 0 12rpx rgba(0,0,0,.2);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin-bottom: 24rpx;
+    &:active {
+      filter: contrast(2);
+    }
+    .iconfont {
+      display: block;
+      color: #f5f5f5;
+      font-size: 24rpx;
+    }
+    .iconname {
+      font-size: 14rpx;
+      color: #f5f5f5;
+      line-height: 10rpx;
+      margin-top: 8rpx;
+      /* #ifdef H5 */
+      transform: scale(0.7);
+      /* #endif */
+    }
+  }
+</style>

package/components/ky-picker.vue

@@ -0,0 +1,211 @@
+<template>
+	<picker
+    :value="mode === 'selector' ? index : multiIndex"
+    :range="names"
+    :mode="mode"
+		:disabled="disabled"
+    :range-key="mode === 'selector' ? '' : 'name'"
+    @change="bindPickerChange"
+    @columnchange="onColumnchange"
+  >
+		<view v-if="!$slots.default">
+      <view v-if="mode === 'selector'" class="picker">
+      	<text v-if="checked !== ''">{{ names[index] }}</text>
+      	<text v-else class="gray-color">{{ placeholder }}</text>
+      </view>
+      <view v-else class="picker">
+      	<text v-if="checked !== '' && checked.data[0]">{{ checked.data[0].name }} / {{ checked.data[1].name }}</text>
+      	<text v-else class="gray-color">{{ placeholder }}</text>
+      </view>
+    </view>
+    <slot v-else></slot>
+	</picker>
+</template>
+
+<script>
+	export default {
+		emits: ['update:value', 'change'],
+		props: {
+			/**
+			 * 回显对象
+			 */
+			value: {
+				type: [Object, String, Number, Array],
+			},
+			/**
+			 * 格式，[{ name: 'xx': id: 'xxx' }]
+			 */
+			list: {
+				type: Array,
+				default: () => []
+			},
+      placeholder: {
+        type: String,
+        default: '请选择'
+      },
+			keyName: {
+				type: String,
+				default: 'name'
+			},
+			valueName: {
+				type: String,
+				default: 'id'
+			},
+      mode: {
+        type: String,
+        default: 'selector',
+      },
+			disabled: {
+				type: Boolean,
+				default: false,
+			}
+		},
+		data() {
+			return {
+				index: 0,
+        multiIndex: [0, 0],
+				names: [],
+				ids: [],
+				checked: ''
+			}
+		},
+		watch: {
+			value(v) {
+				this.mapVal(v)
+			},
+			list(v) {
+				this.mapList(v)
+			},
+		},
+		mounted() {
+			this.mapList(this.list)
+			this.mapVal(this.value)
+		},
+		methods: {
+			bindPickerChange({ detail }) {
+        if (this.mode === 'multiSelector') {
+          this.onMultichange(detail.value)
+          return
+        }
+				const index = +detail.value
+				const currVal = this.list[index]
+				this.checked = this.ids[index]
+        const valProps = this.setVal(this.value)
+				if (valProps === this.checked) {
+					return
+				}
+				this.index = index
+				currVal.index = index
+				this.$emit('update:value', this.checked)
+				this.$emit('change', currVal)
+			},
+			mapVal(v) {
+				if (typeof v === 'undefined') {
+					return
+				}
+        this.$nextTick(function() {
+          if (this.mode === 'multiSelector') {
+            return
+          }
+          const val = this.setVal(v)
+          const itemIndex = this.list.findIndex(e => e[this.valueName] == val)
+          this.index = itemIndex
+          this.checked = this.ids[itemIndex]
+        })
+			},
+			mapList(v) {
+				if (typeof v === 'undefined') {
+					return
+				}
+        if (this.mode === 'multiSelector') {
+          const secondColumn = []
+          const firstColumn = this.list.map((e, i) => {
+            if (e.child) {
+              e.child.forEach((j, k) => {
+                secondColumn.push({
+                  parentId: e.id,
+                  parentIndex: i,
+                  id: j.id,
+                  name: j.name,
+                })
+              })
+            }
+            return { id: e.id, name: e.name, index: i }
+          })
+          this.names = [firstColumn, secondColumn]
+          setTimeout(() => {
+            this.setMultiIndex(this.value, firstColumn, secondColumn)
+          }, 200)
+          return
+        }
+				this.names = v.map(e => e[this.keyName])
+				this.ids = v.map(e => e[this.valueName])
+        this.mapVal(this.value)
+			},
+      setVal(v) {
+        if (!v && typeof v !== 'number') {
+          return ''
+        }
+        if (typeof v === 'string' || typeof v === 'number') {
+          return v
+        }
+        return v[this.valueName]
+      },
+
+      // 根据id进行反选索引, 延迟是因为等待value变化
+      setMultiIndex(v, firstColumn, secondColumn) {
+        if (v.length) {
+          v.forEach(i => {
+            firstColumn.forEach((e) => {
+              if (i === e.id) {
+                this.multiIndex[0] = e.index
+              }
+            })
+            secondColumn.forEach((e, k) => {
+              if (i === e.id) {
+                this.multiIndex[1] = k
+              }
+            })
+          })
+          console.log(this.multiIndex)
+          this.onMultichange(this.multiIndex, false)
+        }
+      },
+
+      // 多列的时候触发修改
+      onColumnchange({ detail }) {
+
+        const { column, value } = detail
+        const result = [...this.multiIndex]
+
+        console.log(detail)
+
+        if (column === 0) {
+          result[0] = value
+          result[1] = this.names[1].findIndex(e => e.parentIndex === value)
+        } else {
+          result[0] = this.names[1].find((e, i) => i === value).parentIndex
+          result[1] = value
+        }
+
+        console.log(result)
+
+        this.multiIndex = result
+      },
+
+      // 多列完成的时候触发
+      onMultichange(val, noEmit) {
+        this.checked = {
+          index: val,
+          data: [this.names[0][val[0]], this.names[1][val[1]]]
+        }
+        if (!noEmit) {
+          this.$emit('update:value', this.checked)
+          this.$emit('input', val)
+        }
+      }
+		}
+	}
+</script>
+
+<style scoped lang="scss"></style>