@kaiyinchem/ky-uniui 1.0.3

package/components/ky-price.vue

@@ -0,0 +1,97 @@
+<!--价格展示组件，2022-10-10-->
+<template>
+  <view class="ky-price-wrap">
+    <view v-if="Number(data.unitPrice) > 0 && Number(data.priceType) !== 3" class="ky-price-main">
+      <view class="ky-price-text price-color">
+        <text class="ky-price-symbol">￥</text>
+        <text :style="{ 'font-size': fontSize + 'rpx' }" class="ky-price-num">{{ data.unitPrice }}</text>
+        <text v-if="data.unitName || data.unit || data.skuUnitName" class="ky-price-name">/{{ data.unitName || data.unit || data.skuUnitName }}</text>
+      </view>
+      <view v-if="Number(data.priceTrend) < 0" class="ky-price-trend price-trend-down">
+        <text class="iconfont">&#xeb0a;</text>
+        <text>{{ data.priceTrend }}%</text>
+      </view>
+      <view v-if="Number(data.priceTrend) > 0" class="ky-price-trend price-trend-up">
+        <text class="iconfont">&#xeb0b;</text>
+        <text>{{ data.priceTrend }}%</text>
+      </view>
+      <view v-if="Number(data.priceTrend) === 0" class="ky-price-trend price-trend-none gray-color">
+        <text class="iconfont" style="transform: rotate(90deg);">&#xeb0b;</text>
+        <text>{{ data.priceTrend }}%</text>
+      </view>
+    </view>
+    <view
+      v-if="Number(data.unitPrice) <= 0 || Number(data.priceType) === 3"
+      :style="{ 'font-size': (fontSize * 0.8) + 'rpx' }"
+    >
+      <text v-if="Number(data.unitPrice) <= 0 && Number(data.priceType) !== 3" class="ky-price-invalid gray-color">暂无报价</text>
+      <text v-else class="ky-price-callphone price-color">来电询价</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      /**
+       * 价格对象data
+       * @property { Number } data.unitPrice 价格
+       */
+      data: {
+        type: Object,
+        default: () => {
+          return {
+            unitPrice: 0, // 单位价格
+            unitName: '', // 单位名称
+            priceTrend: NaN, // 价格涨跌，百分比
+            priceType: 0, // 价格类型，为3显示来电询价
+            skuUnitName: '',
+            unit: ''
+          }
+        }
+      },
+      fontSize: {
+        type: Number,
+        default: 28
+      }
+    },
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .ky-price-wrap {
+    display: flex;
+    align-items: center;
+    .ky-price-main {
+      display: flex;
+      align-items: center;
+      .ky-price-num {
+        font-weight: bold;
+        font-size: 32rpx;
+      }
+      .ky-price-name, .ky-price-symbol {
+        font-size: 24rpx;
+      }
+    }
+    .ky-price-trend {
+      display: flex;
+      align-items: center;
+      margin-left: 12rpx;
+      .iconfont {
+        display: inline-block;
+        margin-right: 12rpx;
+      }
+      &.price-trend-down {
+        color: #07d007;
+      }
+      &.price-trend-up {
+        color: #ff201c;
+      }
+    }
+  }
+</style>

package/components/ky-radio.vue

@@ -0,0 +1,80 @@
+<!--radio组件 2020-9-28 zzc添加-->
+<template>
+	<view
+    :class="{ small: size === 'small', large: size === 'large', normal: size === 'normal' }"
+     class="ky-radiocheck"
+		 @click="$emit('click')"
+    >
+		<text v-if="!active" class="no iconfont" >&#xe618;</text>
+		<text v-else class="primary-color yes iconfont">&#xe61a;</text>
+		<text v-if="label" :class="{ 'primary-color': active }" class="check-label">{{ label }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		emits: ['click'],
+		props: {
+			checked: {
+				type: [Boolean, Number],
+				default: false,
+			},
+			label: {
+				type: String,
+				default: ''
+			},
+			// small, normal, large
+			size: {
+				type: String,
+				default: 'normal'
+			}
+		},
+		data() {
+			return {
+				active: false
+			}
+		},
+		mounted() {
+			this.active = this.checked
+		},
+		watch: {
+			checked(v) {
+				this.active = v
+			}
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.ky-radiocheck {
+		display: flex;
+		align-items: center;
+		&.small {
+			.iconfont {
+				font-size: 34rpx;
+			}
+			.check-label {
+				font-size: 24rpx;
+			}
+		}
+		&.large {
+			.iconfont {
+				font-size: 60rpx;
+			}
+			.check-label {
+				font-size: 32rpx;
+			}
+		}
+		.iconfont {
+			display: inline-block;
+			font-size: 40rpx;
+			&.no {
+				color: var(--border-2);
+			}
+		}
+		.check-label {
+			display: inline-block;
+			margin-left: 12rpx;
+		}
+	}
+</style>

package/components/ky-search-history.vue

@@ -0,0 +1,231 @@
+<template>
+	<view class="ky-search-history">
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="ky-search-top">
+		  <view class="ky-search-box">
+				<view class="ky-search-main flex-start">
+				  <text class="iconfont gray-color">&#xe64d;</text>
+				  <input
+				    v-model="str"
+						:placeholder="placeholder"
+						:auto-focus="autoFocus"
+				    type="text"
+				    class="ky-search-input"
+				    @confirm="handleSearch"
+						@focus="handleFocus"
+						@input="handleInput"
+				  />
+				  <text v-if="str" class="iconfont gray-color ky-search-clear" @click.stop="handleClear">&#xe634;</text>
+				</view>
+				<ky-btn width="150rpx" height="75rpx" radius="0" size="small" @click="handleSearch">搜索</ky-btn>
+			</view>
+		</view>
+		<!-- #endif -->
+		
+		<!--历史展示-->
+		<view v-if="historyList.length && state" class="ky-search-history-wrap white-bg">
+		  <view class="ky-search-history-main">
+		    <view class="ky-search-history-head">
+		      <text class="ky-search-history-title">搜索历史</text>
+		      <text class="iconfont" @click="clearHistory">&#xe614;</text>
+		    </view>
+		    <view class="ky-search-history-list">
+		      <view v-for="(item, index) in historyList" :key="index" class="ky-search-history-item" @click="selectKeyword(item)">
+		        <text class="ky-search-history-name">{{ item }}</text>
+		        <text class="iconfont"  @click.stop="clearSignle(index)">&#xe634;</text>
+		      </view>
+		    </view>
+		  </view>
+		</view>
+		<!--end历史展示-->
+	</view>
+</template>
+
+<script>
+	export default {
+		emits: ['select', 'search'],
+		props: {
+			keyword: {
+				type: String,
+				default: ''
+			},
+			visible: {
+				type: Boolean,
+				default: false,
+			},
+			autoFocus: {
+				type: Boolean,
+				default: false,
+			},
+			// 本地存储的键名
+			keyName: {
+				type: String,
+				default: ''
+			},
+			placeholder: {
+				type: String,
+				default: '请输入关键词'
+			},
+		},
+		data() {
+			return {
+				str: '',
+				historyList: [],
+				state: false,
+			}
+		},
+		watch: {
+			keyword(val) {
+				this.str = val
+			},
+			visible(val) {
+				this.state = val
+			}
+		},
+		computed: {
+			keyStr() {
+				return `${this.keyName}KeywordsHistory`
+			}
+		},
+		mounted() {
+			const loaclKeywords = uni.getStorageSync(this.keyStr) || [] 
+			this.str = this.keyword
+			this.state = this.visible
+			this.historyList = loaclKeywords.reverse()
+		},
+		methods: {
+			show() {
+				this.state = true
+			},
+			hide() {
+				this.state = false
+			},
+			save() {
+				const hasSame = this.historyList.some(e => e === this.str)
+				if (!hasSame) {
+				  this.historyList.push(this.str)
+				  this.$db.set(this.keyStr, this.historyList)
+				}
+			  this.state = false
+			  uni.hideKeyboard()
+			},
+			handleClear() {
+			  this.str = undefined
+				this.state = false
+			},
+			handleSearch() {
+				this.$emit('search', this.str)
+			},
+			handleInput() {
+				this.$emit('update:keyword', this.str)
+			},
+			handleFocus() {
+				if (!this.str) {
+					this.state = true
+				}
+			},
+			selectKeyword(str) {
+			  this.str = str
+			  this.$emit('select', str)
+			},
+			clearSignle(index) {
+			  this.historyList.splice(index, 1)
+			  this.$db.set(this.keyStr, this.historyList)
+			},
+			clearHistory() {
+			  this.$confirm({ content: '确定清除全部历史吗？' }, (res) => {
+			    if (res.confirm) {
+			      this.historyList = []
+			      this.$db.set(this.keyStr, [])
+			    }
+			  })
+			},
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.ky-search-top {
+	  position: fixed;
+	  top: 0;
+	  left: 0;
+	  right: 0;
+	  background-color: var(--bg-white);
+	  padding: 24rpx;
+	  z-index: 100;
+		display: flex;
+		align-items: center;
+		.ky-search-box {
+			border-radius: 12rpx;
+			overflow: hidden;
+			display: flex;
+			align-items: center;
+			flex: 1;
+		}
+	  .ky-search-main {
+	    flex: 1;
+	    background-color: var(--bg-gray);
+			height: 78rpx;
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+			overflow: hidden;
+			.iconfont {
+				display: inline-block;
+				margin-left: 24rpx;
+			}
+	  }
+	
+	  .ky-search-input {
+	    flex: 1;
+	    margin-left: 24rpx;
+	  }
+		.ky-search-clear {
+			padding: 0 24rpx;display: inline-block;font-size: 32rpx;
+		}
+	
+	}
+	
+	.ky-search-history-wrap {
+	  position: fixed;
+	  left: 0;
+	  right: 0;
+	  top: 0;
+		/* #ifdef MP-WEIXIN */
+		top: 118rpx;
+		/* #endif */
+		/* #ifdef H5 */
+		top: 44px;
+		/* #endif */
+		z-index: 100;
+	  bottom: 0;
+	  width: 100%;
+	  height: 100%;
+	  .ky-search-history-main {
+	    padding: 36rpx;
+	  }
+	  .ky-search-history-head {
+	    display: flex;
+	    justify-content: space-between;
+	    align-items: center;
+	    margin-bottom: 12rpx;
+	    .ky-search-history-title {
+	      font-size: 32rpx;
+	    }
+	    .iconfont {
+	      color: var(--color-gray);
+	      font-size: 32rpx;
+	    }
+	  }
+	  .ky-search-history-item {
+	    display: flex;
+	    justify-content: space-between;
+	    padding: 24rpx 0;
+	    border-bottom: 1px solid var(--border-1);;
+	  }
+	  .iconfont {
+	    font-size: 24rpx;
+	    color: var(--color-gray);
+	  }
+	}
+	
+</style>

package/components/ky-smscode.vue

@@ -0,0 +1,70 @@
+<template>
+	<ky-btn
+		:disabled="isGetCode"
+		@click="getSmsCode"
+		type="text"
+		size="small"
+	>
+	{{ isGetCode ? `重发${countDownTime}s` : '获取验证码' }}
+	</ky-btn>
+</template>
+
+<script>
+  const code_type = {
+    login: '登录',
+    reg: '注册',
+    find: '找回密码',
+    change: '修改密码'
+  }
+	export default {
+		props: {
+			mobile: {
+				required: true
+			},
+      service_type: {
+        type: String,
+        default: '',
+      }
+		},
+		data() {
+			return {
+				countDownTime: 60,
+				timeInterval: null,
+				isGetCode: false,
+        is_success: false,
+        errMsg: ''
+			};
+		},
+		methods: {
+			async getSmsCode() {
+				this.$db.del('isToLogin')
+				this.code = ''
+				if (!this.mobile || !/^1\d{10}$/.test(this.mobile)) {
+					this.$toast('请输入正确的手机号码')
+					return;
+				}
+				try {
+					await this.$api.user.GetSmsCode(this.mobile)
+					this.isGetCode = true;
+          this.is_success = true
+					this.$toast('验证码已发送')
+					this.timeInterval = setInterval(() => {
+						if (this.countDownTime === 0) {
+							clearInterval(this.timeInterval);
+							this.countDownTime = 60
+							this.isGetCode = false
+							return;
+						}
+						this.countDownTime -= 1
+					}, 1000)
+				} catch (e) {
+					console.log(e)
+          this.errMsg = e.errMsg
+          this.is_success = false
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss"></style>