From a640a68b55034ad38b1936eedd33c23f63bec0f0 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 26 四月 2024 14:29:28 +0800
Subject: [PATCH] 调整医事制度、医学流派
---
src/uni_modules/next-search-more/components/next-search-more/next-search-more.vue | 602 +++++++++++++++++++++++++++++-------------------------
1 files changed, 323 insertions(+), 279 deletions(-)
diff --git a/src/uni_modules/next-search-more/components/next-search-more/next-search-more.vue b/src/uni_modules/next-search-more/components/next-search-more/next-search-more.vue
index 3063357..5e64190 100644
--- a/src/uni_modules/next-search-more/components/next-search-more/next-search-more.vue
+++ b/src/uni_modules/next-search-more/components/next-search-more/next-search-more.vue
@@ -1,28 +1,55 @@
<template>
- <view class="next-search-more">
- <view class="search" :style="{ backgroundColor: backgroundColor }">
- <!-- 涓嬫媺鑿滃崟 -->
- <template>
- <view class="button xiala active" @click="selectMore">
- <view class="button-item">
- <!-- <text class="icon icon-more"></text> -->
- <uni-data-select style="width: 100%;" v-model="val" :localdata="selectValue" @change="change"
- :clear="false" ></uni-data-select>
- </view>
- </view>
- </template>
- <view class="content" :style="{ 'border-radius': radius + 'px', border: border }">
- <view class="content-box" :class="{ center: mode === 'center' }">
- <!-- <text class="icon icon-search"></text> -->
- <text style="display: inline-block;padding-left: 20rpx;"></text>
- <input class="input" @confirm="search" :class="{ center: !active && mode === 'center' }" :focus="isFocus"
- :placeholder="' '+placeholder" v-model="inputVal" id="sdf" @input="input" @focus="focus" @blur="blur" />
- <text v-if="isDelShow" class="icon icon-del" @click="clear"></text>
- </view>
- <view v-show="(active && isFixedSearchBtn && button === 'inside') || (isDelShow && button === 'inside')"
- class="searchBtn" @click="search">鎼滅储</view>
- </view>
- <!-- <template v-if="mode === 'common' || mode ==='center'">
+ <view class="next-search-more">
+ <view class="search" :style="{ backgroundColor: backgroundColor }">
+ <!-- 涓嬫媺鑿滃崟 -->
+ <template>
+ <view class="button xiala active" @click="selectMore">
+ <view class="button-item">
+ <!-- <text class="icon icon-more"></text> -->
+ <uni-data-select
+ style="width: 100%"
+ v-model="val"
+ :localdata="selectValue"
+ @change="change"
+ :clear="false"
+ ></uni-data-select>
+ </view>
+ </view>
+ </template>
+ <view
+ class="content"
+ :style="{ 'border-radius': radius + 'px', border: border }"
+ >
+ <view class="content-box" :class="{ center: mode === 'center' }">
+ <!-- <text class="icon icon-search"></text> -->
+ <text style="display: inline-block; padding-left: 20rpx"></text>
+ <input
+ class="input"
+ @confirm="search"
+ :class="{ center: !active && mode === 'center' }"
+ :focus="isFocus"
+ :placeholder="' ' + placeholder"
+ v-model="inputVal"
+ id="sdf"
+ @input="input"
+ @focus="focus"
+ @blur="blur"
+ />
+ <text v-if="isDelShow" class="icon icon-del" @click="clear"
+ ></text
+ >
+ </view>
+ <view
+ v-show="
+ (active && isFixedSearchBtn && button === 'inside') ||
+ (isDelShow && button === 'inside')
+ "
+ class="searchBtn"
+ @click="search"
+ >鎼滅储</view
+ >
+ </view>
+ <!-- <template v-if="mode === 'common' || mode ==='center'">
<view v-if="button === 'outside'" class="button" :class="{ active: isFixedSearchBtn || active }" @click="search">
<view class="button-item">{{ !isFixedSearchBtn ? searchName : '鎼滅储' }}</view>
</view>
@@ -32,279 +59,296 @@
<view class="button-item"><text class="icon icon-more"></text></view>
</view>
</template> -->
- <template>
- <view class="button btnn" :class="{ active: isFixedSearchBtn || active }" @click="search">
- <view class="button-item btn">{{ !isFixedSearchBtn ? searchName : '鎼滅储' }}</view>
- </view>
- </template>
-
- </view>
- <view class="more-container-parent">
- <view v-if="mode === 'more' && showMore" class="more-container">
- <slot name="more"></slot>
- </view>
- </view>
- </view>
+ <template>
+ <view
+ class="button btnn"
+ :class="{ active: isFixedSearchBtn || active }"
+ @click="search"
+ >
+ <view class="button-item btn">{{
+ !isFixedSearchBtn ? searchName : "鎼滅储"
+ }}</view>
+ </view>
+ </template>
+ </view>
+ <view class="more-container-parent">
+ <view v-if="mode === 'more' && showMore" class="more-container">
+ <slot name="more"></slot>
+ </view>
+ </view>
+ </view>
</template>
<script>
- export default {
- props: {
- val:{
- type: Number,
- default: 0
- },
- selectValue: {
- type: Array,
- default () {
- return [{
- value: 0,
- text: '绡悆sdf'
- }]
- }
- },
- mode: {
- type: String,
- default: 'common'
- },
- button: {
- type: String,
- default: 'outside'
- },
- isFixedSearchBtn: {
- type: Boolean,
- default: true
- },
- radius: {
- type: String,
- default: '60'
- },
- placeholder: {
- type: String,
- default: '璇疯緭鍏ユ悳绱㈠唴瀹�'
- },
- backgroundColor: {
- type: String,
- default: '#fff'
- },
- showMore: {
- type: Boolean,
- default: false
- },
- border: {
- type: String,
- default: '1px #f5f5f5 solid'
- }
-
- },
- data() {
- return {
- active: false,
- inputVal: '',
- searchName: '鍙栨秷',
- isDelShow: false,
- isFocus: false,
- timer: 0
- };
- },
- methods: {
- focus() {
- this.active = true;
- },
- blur() {
- this.isFocus = false;
- if (!this.inputVal) {
- this.active = false;
- }
- },
- input() {
- clearInterval(this.timer)
- this.timer = setTimeout(() => {
- this.$emit('input', this.inputVal);
- }, 500)
- },
- clear() {
- this.inputVal = '';
- this.active = false;
- this.$emit('input', this.inputVal);
- this.$emit('search', '');
- },
- getFocus() {
- this.isFocus = true;
- },
- // 鎼滅储
- search() {
- if (!this.inputVal) return;
- // console.log(this.inputVal);
- this.$emit('search', this.inputVal);
- },
- selectMore() {
- this.$emit('moreClick')
- },
- // 鎼滅储涓嬫媺妗�
- change(e){
- this.$emit('select',e)
- console.log(e);
- }
- },
- created() {
- this.$watch(() => this.inputVal, (newVal) => {
- if (newVal) {
- this.searchName = '鎼滅储';
- this.isDelShow = true;
- } else {
- this.searchName = '鍙栨秷';
- this.isDelShow = false;
- }
- })
- }
- };
+export default {
+ props: {
+ val: {
+ type: Number,
+ default: 0
+ },
+ selectValue: {
+ type: Array,
+ default() {
+ return [
+ {
+ value: 0,
+ text: ""
+ }
+ ];
+ }
+ },
+ mode: {
+ type: String,
+ default: "common"
+ },
+ button: {
+ type: String,
+ default: "outside"
+ },
+ isFixedSearchBtn: {
+ type: Boolean,
+ default: true
+ },
+ radius: {
+ type: String,
+ default: "60"
+ },
+ placeholder: {
+ type: String,
+ default: "璇疯緭鍏ユ悳绱㈠唴瀹�"
+ },
+ backgroundColor: {
+ type: String,
+ default: "#fff"
+ },
+ showMore: {
+ type: Boolean,
+ default: false
+ },
+ border: {
+ type: String,
+ default: "1px #f5f5f5 solid"
+ },
+ keyword: {
+ type: String
+ }
+ },
+ data() {
+ return {
+ active: false,
+ inputVal: "",
+ searchName: "鍙栨秷",
+ isDelShow: false,
+ isFocus: false,
+ timer: 0
+ };
+ },
+ methods: {
+ focus() {
+ this.active = true;
+ },
+ blur() {
+ this.isFocus = false;
+ if (!this.inputVal) {
+ this.active = false;
+ }
+ },
+ input() {
+ clearInterval(this.timer);
+ this.timer = setTimeout(() => {
+ this.$emit("input", this.inputVal);
+ }, 500);
+ },
+ clear() {
+ this.inputVal = "";
+ this.active = false;
+ this.$emit("input", this.inputVal);
+ this.$emit("search", "");
+ },
+ getFocus() {
+ this.isFocus = true;
+ },
+ // 鎼滅储
+ search() {
+ this.$emit("search", this.inputVal);
+ },
+ selectMore() {
+ this.$emit("moreClick");
+ },
+ // 鎼滅储涓嬫媺妗�
+ change(e) {
+ this.$emit("select", e);
+ console.log(e);
+ }
+ },
+ created() {
+ this.inputVal = this.keyWord;
+ this.$watch(
+ () => this.inputVal,
+ (newVal) => {
+ if (newVal) {
+ this.searchName = "鎼滅储";
+ this.isDelShow = true;
+ } else {
+ this.searchName = "鍙栨秷";
+ this.isDelShow = false;
+ }
+ }
+ );
+ },
+ watch: {
+ keyword(value) {
+ console.log(value);
+ this.inputVal = value;
+ }
+ }
+};
</script>
<style lang="scss" scoped>
- ::v-deep .uni-select{
- border-style: none;
- }
- ::v-deep .content{
- border-radius: 0 !important;
- // border: 1px solid #7d8ea5 !important;
- }
- ::v-deep .button-item {
- width: 100% !important;
- }
-
- .xiala {
- width: 200rpx !important;
- }
- .next-search-more {
- .search {
- display: flex;
- width: 100%;
- border-bottom: 1px #f5f5f5 solid;
- box-sizing: border-box;
- // padding: 15upx;
- border-radius: 35rpx;
- font-size: $uni-font-size-base;
- background: #fff;
- border: 1px solid #7d8ea5 ;
- margin: 30rpx 0;
+::v-deep .uni-select {
+ border-style: none;
+}
+::v-deep .content {
+ border-radius: 0 !important;
+ // border: 1px solid #7d8ea5 !important;
+}
+::v-deep .button-item {
+ width: 100% !important;
+}
- .content {
- display: flex;
- align-items: center;
- width: 100%;
- height: 60upx;
- border: 1px #ccc solid;
- background: #fff;
- overflow: hidden;
- transition: all 0.2s linear;
- border-radius: 30px;
+.xiala {
+ width: 200rpx !important;
+}
+.next-search-more {
+ .search {
+ display: flex;
+ width: 100%;
+ border-bottom: 1px #f5f5f5 solid;
+ box-sizing: border-box;
+ // padding: 15upx;
+ border-radius: 35rpx;
+ font-size: $uni-font-size-base;
+ background: #fff;
+ border: 1px solid #7d8ea5;
+ margin: 30rpx 0;
- .content-box {
- width: 100%;
- display: flex;
- align-items: center;
+ .content {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 60upx;
+ border: 1px #ccc solid;
+ background: #fff;
+ overflow: hidden;
+ transition: all 0.2s linear;
+ border-radius: 30px;
- &.center {
- justify-content: center;
- }
+ .content-box {
+ width: 100%;
+ display: flex;
+ align-items: center;
- .icon {
- padding: 0 15upx;
+ &.center {
+ justify-content: center;
+ }
- &.icon-del {
- font-size: 38upx;
- }
- }
+ .icon {
+ padding: 0 15upx;
- .input {
- width: 100%;
- max-width: 100%;
- line-height: 60upx;
- height: 60upx;
- transition: all 0.2s linear;
+ &.icon-del {
+ font-size: 38upx;
+ }
+ }
- &.center {
- width: 200upx;
- }
+ .input {
+ width: 100%;
+ max-width: 100%;
+ line-height: 60upx;
+ height: 60upx;
+ transition: all 0.2s linear;
- &.sub {
- // position: absolute;
- width: auto;
- color: grey;
- }
- }
- }
+ &.center {
+ width: 200upx;
+ }
- .searchBtn {
- height: 100%;
- flex-shrink: 0;
- padding: 0 30upx;
- background: $uni-color-success;
- line-height: 60upx;
- color: #fff;
- border-left: 1px #ccc solid;
- transition: all 0.3s;
- }
- }
+ &.sub {
+ // position: absolute;
+ width: auto;
+ color: grey;
+ }
+ }
+ }
- .button {
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- flex-shrink: 0;
- // width: 0;
- transition: all 0.2s linear;
- white-space: nowrap;
- // overflow: hidden;
- &.active {
- padding-left: 15upx;
- width: 100upx;
- }
+ .searchBtn {
+ height: 100%;
+ flex-shrink: 0;
+ padding: 0 30upx;
+ background: $uni-color-success;
+ line-height: 60upx;
+ color: #fff;
+ border-left: 1px #ccc solid;
+ transition: all 0.3s;
+ }
+ }
- .icon-more {
- font-size: 48upx;
- }
- }
- }
+ .button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ flex-shrink: 0;
+ // width: 0;
+ transition: all 0.2s linear;
+ white-space: nowrap;
+ // overflow: hidden;
+ &.active {
+ width: 100upx;
+ }
- .more-container-parent {
- flex-shrink: 0;
- width: 100%;
- // position: fixed;
- // position: sticky;
- z-index: 997;
- flex-wrap: nowrap;
- display: flex;
- flex-direction: row;
- position: relative;
- flex-direction: column;
+ .icon-more {
+ font-size: 48upx;
+ }
+ }
+ }
- .more-container {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: auto;
- background-color: #ffffff;
- padding: 20rpx;
- border-radius: 0 0 30rpx 30rpx;
- box-sizing: border-box;
- overflow: hidden;
- }
- }
- }
+ .more-container-parent {
+ flex-shrink: 0;
+ width: 100%;
+ // position: fixed;
+ // position: sticky;
+ z-index: 997;
+ flex-wrap: nowrap;
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ flex-direction: column;
- @font-face {
- font-family: 'iconfont';
- src: url('https://at.alicdn.com/t/c/font_4110624_nikfg21uyk8.ttf?t=1686190660183') format('truetype');
- }
+ .more-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: auto;
+ background-color: #ffffff;
+ padding: 20rpx;
+ border-radius: 0 0 30rpx 30rpx;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+ }
+}
- .icon {
- font-family: iconfont;
- font-size: 32upx;
- font-style: normal;
- color: #999;
- }
-</style>
\ No newline at end of file
+@font-face {
+ font-family: "iconfont";
+ src: url("https://at.alicdn.com/t/c/font_4110624_nikfg21uyk8.ttf?t=1686190660183")
+ format("truetype");
+}
+
+.icon {
+ font-family: iconfont;
+ font-size: 32upx;
+ font-style: normal;
+ color: #999;
+}
+</style>
--
Gitblit v1.9.1