parent
170d05bc5b
commit
8b6e0d2f90
@ -0,0 +1,24 @@ |
|||||||
|
## 1.1.2（2021-08-30） |
||||||
|
- 修复 value 属性与 modelValue 属性不兼容的Bug |
||||||
|
## 1.1.1（2021-08-24） |
||||||
|
- 新增 支持国际化 |
||||||
|
## 1.1.0（2021-07-30） |
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||||
|
## 1.0.9（2021-05-12） |
||||||
|
- 新增 项目示例地址 |
||||||
|
## 1.0.8（2021-04-21） |
||||||
|
- 优化 添加依赖 uni-icons, 导入后自动下载依赖 |
||||||
|
## 1.0.7（2021-04-15） |
||||||
|
- uni-ui 新增 uni-search-bar 的 focus 事件 |
||||||
|
|
||||||
|
## 1.0.6（2021-02-05） |
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件 |
||||||
|
|
||||||
|
## 1.0.5（2021-02-05） |
||||||
|
- 调整为uni_modules目录规范 |
||||||
|
- 新增 支持双向绑定 |
||||||
|
- 更改 input 事件的返回值，e={value:Number} --> e=value |
||||||
|
- 新增 支持图标插槽 |
||||||
|
- 新增 支持 clear、blur 事件 |
||||||
|
- 新增 支持 focus 属性 |
||||||
|
- 去掉组件背景色 |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"uni-search-bar.cancel": "cancel", |
||||||
|
"uni-search-bar.placeholder": "Search enter content" |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import en from './en.json' |
||||||
|
import zhHans from './zh-Hans.json' |
||||||
|
import zhHant from './zh-Hant.json' |
||||||
|
export default { |
||||||
|
en, |
||||||
|
'zh-Hans': zhHans, |
||||||
|
'zh-Hant': zhHant |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"uni-search-bar.cancel": "cancel", |
||||||
|
"uni-search-bar.placeholder": "请输入搜索内容" |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"uni-search-bar.cancel": "cancel", |
||||||
|
"uni-search-bar.placeholder": "請輸入搜索內容" |
||||||
|
} |
||||||
@ -0,0 +1,290 @@ |
|||||||
|
<template> |
||||||
|
<view class="uni-searchbar"> |
||||||
|
<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick"> |
||||||
|
<view class="uni-searchbar__box-icon-search"> |
||||||
|
<slot name="searchIcon"> |
||||||
|
<uni-icons color="#999999" size="18" type="search" /> |
||||||
|
</slot> |
||||||
|
</view> |
||||||
|
<input v-if="show || searchVal" :focus="showSync" :placeholder="placeholderText" :maxlength="maxlength" class="uni-searchbar__box-search-input" |
||||||
|
confirm-type="search" type="text" v-model="searchVal" @confirm="confirm" @blur="blur" @focus="emitFocus" /> |
||||||
|
<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text> |
||||||
|
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear" |
||||||
|
@click="clear"> |
||||||
|
<slot name="clearIcon"> |
||||||
|
<uni-icons color="#c0c4cc" size="15" type="clear" /> |
||||||
|
</slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelTextI18n}}</text> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
initVueI18n |
||||||
|
} from '@dcloudio/uni-i18n' |
||||||
|
import messages from './i18n/index.js' |
||||||
|
const { t } = initVueI18n(messages) |
||||||
|
|
||||||
|
/** |
||||||
|
* SearchBar 搜索栏 |
||||||
|
* @description 评分组件 |
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=866 |
||||||
|
* @property {Number} radius 搜索栏圆角 |
||||||
|
* @property {Number} maxlength 输入最大长度 |
||||||
|
* @property {String} placeholder 搜索栏Placeholder |
||||||
|
* @property {String} clearButton = [always|auto|none] 是否显示清除按钮 |
||||||
|
* @value always 一直显示 |
||||||
|
* @value auto 输入框不为空时显示 |
||||||
|
* @value none 一直不显示 |
||||||
|
* @property {String} cancelButton = [always|auto|none] 是否显示取消按钮 |
||||||
|
* @value always 一直显示 |
||||||
|
* @value auto 输入框不为空时显示 |
||||||
|
* @value none 一直不显示 |
||||||
|
* @property {String} cancelText 取消按钮的文字 |
||||||
|
* @property {String} bgColor 输入框背景颜色 |
||||||
|
* @property {Boolean} focus 是否自动聚焦 |
||||||
|
* @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number} |
||||||
|
* @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value |
||||||
|
* @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number} |
||||||
|
* @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number} |
||||||
|
* @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number} |
||||||
|
*/ |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "UniSearchBar", |
||||||
|
emits:['input','update:modelValue','clear','cancel','confirm','blur','focus'], |
||||||
|
props: { |
||||||
|
placeholder: { |
||||||
|
type: String, |
||||||
|
default: "" |
||||||
|
}, |
||||||
|
radius: { |
||||||
|
type: [Number, String], |
||||||
|
default: 5 |
||||||
|
}, |
||||||
|
clearButton: { |
||||||
|
type: String, |
||||||
|
default: "auto" |
||||||
|
}, |
||||||
|
cancelButton: { |
||||||
|
type: String, |
||||||
|
default: "auto" |
||||||
|
}, |
||||||
|
cancelText: { |
||||||
|
type: String, |
||||||
|
default: '取消' |
||||||
|
}, |
||||||
|
bgColor: { |
||||||
|
type: String, |
||||||
|
default: "#F8F8F8" |
||||||
|
}, |
||||||
|
maxlength: { |
||||||
|
type: [Number, String], |
||||||
|
default: 100 |
||||||
|
}, |
||||||
|
value: { |
||||||
|
type: [Number, String], |
||||||
|
default: "" |
||||||
|
}, |
||||||
|
modelValue: { |
||||||
|
type: [Number, String], |
||||||
|
default: "" |
||||||
|
}, |
||||||
|
focus: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
show: false, |
||||||
|
showSync: false, |
||||||
|
searchVal: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed:{ |
||||||
|
cancelTextI18n() { |
||||||
|
return this.cancelText || t("uni-search-bar.cancel") |
||||||
|
}, |
||||||
|
placeholderText() { |
||||||
|
return this.placeholder || t("uni-search-bar.placeholder") |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// #ifndef VUE3 |
||||||
|
value: { |
||||||
|
immediate: true, |
||||||
|
handler(newVal) { |
||||||
|
this.searchVal = newVal |
||||||
|
if (newVal) { |
||||||
|
this.show = true |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// #endif |
||||||
|
// #ifdef VUE3 |
||||||
|
modelValue: { |
||||||
|
immediate: true, |
||||||
|
handler(newVal) { |
||||||
|
this.searchVal = newVal |
||||||
|
if (newVal) { |
||||||
|
this.show = true |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// #endif |
||||||
|
focus: { |
||||||
|
immediate: true, |
||||||
|
handler(newVal) { |
||||||
|
if (newVal) { |
||||||
|
this.show = true; |
||||||
|
this.$nextTick(() => { |
||||||
|
this.showSync = true |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
searchVal(newVal, oldVal) { |
||||||
|
// #ifndef VUE3 |
||||||
|
this.$emit("input", newVal) |
||||||
|
// #endif |
||||||
|
// #ifdef VUE3 |
||||||
|
this.$emit("update:modelValue", newVal) |
||||||
|
// #endif |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
searchClick() { |
||||||
|
if (this.show) { |
||||||
|
return |
||||||
|
} |
||||||
|
this.show = true; |
||||||
|
this.$nextTick(() => { |
||||||
|
this.showSync = true |
||||||
|
}) |
||||||
|
}, |
||||||
|
clear() { |
||||||
|
this.$emit("clear", { |
||||||
|
value: this.searchVal |
||||||
|
}) |
||||||
|
this.searchVal = "" |
||||||
|
}, |
||||||
|
cancel() { |
||||||
|
this.$emit("cancel", { |
||||||
|
value: this.searchVal |
||||||
|
}); |
||||||
|
this.searchVal = "" |
||||||
|
this.show = false |
||||||
|
this.showSync = false |
||||||
|
// #ifndef APP-PLUS |
||||||
|
uni.hideKeyboard() |
||||||
|
// #endif |
||||||
|
// #ifdef APP-PLUS |
||||||
|
plus.key.hideSoftKeybord() |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
confirm() { |
||||||
|
// #ifndef APP-PLUS |
||||||
|
uni.hideKeyboard(); |
||||||
|
// #endif |
||||||
|
// #ifdef APP-PLUS |
||||||
|
plus.key.hideSoftKeybord() |
||||||
|
// #endif |
||||||
|
this.$emit("confirm", { |
||||||
|
value: this.searchVal |
||||||
|
}) |
||||||
|
}, |
||||||
|
blur() { |
||||||
|
// #ifndef APP-PLUS |
||||||
|
uni.hideKeyboard(); |
||||||
|
// #endif |
||||||
|
// #ifdef APP-PLUS |
||||||
|
plus.key.hideSoftKeybord() |
||||||
|
// #endif |
||||||
|
this.$emit("blur", { |
||||||
|
value: this.searchVal |
||||||
|
}) |
||||||
|
}, |
||||||
|
emitFocus(e) { |
||||||
|
this.$emit("focus", e.detail) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
$uni-searchbar-height: 36px; |
||||||
|
|
||||||
|
.uni-searchbar { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
/* #endif */ |
||||||
|
flex-direction: row; |
||||||
|
position: relative; |
||||||
|
padding: $uni-spacing-col-base; |
||||||
|
// background-color: $uni-bg-color; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-searchbar__box { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
box-sizing: border-box; |
||||||
|
/* #endif */ |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
flex: 1; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
height: $uni-searchbar-height; |
||||||
|
padding: 5px 8px 5px 0px; |
||||||
|
border-width: 0.5px; |
||||||
|
border-style: solid; |
||||||
|
border-color: $uni-border-color; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-searchbar__box-icon-search { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
/* #endif */ |
||||||
|
flex-direction: row; |
||||||
|
// width: 32px; |
||||||
|
padding: 0 8px; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
color: $uni-text-color-placeholder; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-searchbar__box-search-input { |
||||||
|
flex: 1; |
||||||
|
font-size: $uni-font-size-base; |
||||||
|
color: $uni-text-color; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-searchbar__box-icon-clear { |
||||||
|
align-items: center; |
||||||
|
line-height: 24px; |
||||||
|
padding-left: 8px; |
||||||
|
/* #ifdef H5 */ |
||||||
|
cursor: pointer; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
|
||||||
|
.uni-searchbar__text-placeholder { |
||||||
|
font-size: $uni-font-size-base; |
||||||
|
color: $uni-text-color-placeholder; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-searchbar__cancel { |
||||||
|
padding-left: 10px; |
||||||
|
line-height: $uni-searchbar-height; |
||||||
|
font-size: 14px; |
||||||
|
color: $uni-text-color; |
||||||
|
/* #ifdef H5 */ |
||||||
|
cursor: pointer; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
{ |
||||||
|
"id": "uni-search-bar", |
||||||
|
"displayName": "uni-search-bar 搜索栏", |
||||||
|
"version": "1.1.2", |
||||||
|
"description": "搜索栏组件，通常用于搜索商品、文章等", |
||||||
|
"keywords": [ |
||||||
|
"uni-ui", |
||||||
|
"uniui", |
||||||
|
"搜索框", |
||||||
|
"搜索栏" |
||||||
|
], |
||||||
|
"repository": "https://github.com/dcloudio/uni-ui", |
||||||
|
"engines": { |
||||||
|
"HBuilderX": "" |
||||||
|
}, |
||||||
|
"directories": { |
||||||
|
"example": "../../temps/example_temps" |
||||||
|
}, |
||||||
|
"dcloudext": { |
||||||
|
"category": [ |
||||||
|
"前端组件", |
||||||
|
"通用组件" |
||||||
|
], |
||||||
|
"sale": { |
||||||
|
"regular": { |
||||||
|
"price": "0.00" |
||||||
|
}, |
||||||
|
"sourcecode": { |
||||||
|
"price": "0.00" |
||||||
|
} |
||||||
|
}, |
||||||
|
"contact": { |
||||||
|
"qq": "" |
||||||
|
}, |
||||||
|
"declaration": { |
||||||
|
"ads": "无", |
||||||
|
"data": "无", |
||||||
|
"permissions": "无" |
||||||
|
}, |
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||||
|
}, |
||||||
|
"uni_modules": { |
||||||
|
"dependencies": [ |
||||||
|
"uni-icons" |
||||||
|
], |
||||||
|
"encrypt": [], |
||||||
|
"platforms": { |
||||||
|
"cloud": { |
||||||
|
"tcb": "y", |
||||||
|
"aliyun": "y" |
||||||
|
}, |
||||||
|
"client": { |
||||||
|
"App": { |
||||||
|
"app-vue": "y", |
||||||
|
"app-nvue": "y" |
||||||
|
}, |
||||||
|
"H5-mobile": { |
||||||
|
"Safari": "y", |
||||||
|
"Android Browser": "y", |
||||||
|
"微信浏览器(Android)": "y", |
||||||
|
"QQ浏览器(Android)": "y" |
||||||
|
}, |
||||||
|
"H5-pc": { |
||||||
|
"Chrome": "y", |
||||||
|
"IE": "y", |
||||||
|
"Edge": "y", |
||||||
|
"Firefox": "y", |
||||||
|
"Safari": "y" |
||||||
|
}, |
||||||
|
"小程序": { |
||||||
|
"微信": "y", |
||||||
|
"阿里": "y", |
||||||
|
"百度": "y", |
||||||
|
"字节跳动": "y", |
||||||
|
"QQ": "y" |
||||||
|
}, |
||||||
|
"快应用": { |
||||||
|
"华为": "u", |
||||||
|
"联盟": "u" |
||||||
|
}, |
||||||
|
"Vue": { |
||||||
|
"vue2": "y", |
||||||
|
"vue3": "u" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
|
||||||
|
|
||||||
|
## SearchBar 搜索栏 |
||||||
|
|
||||||
|
> **组件名：uni-search-bar** |
||||||
|
> 代码块： `uSearchBar` |
||||||
|
|
||||||
|
|
||||||
|
评分组件 |
||||||
|
|
||||||
|
### 安装方式 |
||||||
|
|
||||||
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。 |
||||||
|
|
||||||
|
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) |
||||||
|
|
||||||
|
### 基本用法 |
||||||
|
|
||||||
|
在 ``template`` 中使用组件 |
||||||
|
|
||||||
|
```html |
||||||
|
<!-- 基本用法 --> |
||||||
|
<uni-search-bar @confirm="search" @input="input" ></uni-search-bar> |
||||||
|
|
||||||
|
<!-- v-model 用法 --> |
||||||
|
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @change="change" @clear="clear"> |
||||||
|
|
||||||
|
<!-- 自定义Placeholder --> |
||||||
|
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar> |
||||||
|
|
||||||
|
<!-- 设置圆角 --> |
||||||
|
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar> |
||||||
|
``` |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
### SearchBar Props |
||||||
|
|
||||||
|
|属性名 |类型 |默认值 |说明 | |
||||||
|
|:-: |:-: |:-: |:-: | |
||||||
|
|value/v-model |StringNumber | |搜索栏绑定值 | |
||||||
|
|placeholder |String |搜索 |搜索栏Placeholder | |
||||||
|
|radius |Number |10 |搜索栏圆角，单位px | |
||||||
|
|clearButton |String |auto |是否显示清除按钮，可选值`always`-一直显示、`auto`-输入框不为空时显示、`none`-一直不显示 | |
||||||
|
|cancelButton |String |auto |是否显示取消按钮，可选值`always`-一直显示、`auto`-输入框不为空时显示、`none`-一直不显示 | |
||||||
|
|cancelText |String |取消 |取消按钮的文字 | |
||||||
|
|bgColor |String |#F8F8F8|输入框背景颜色 | |
||||||
|
|maxlength |Number |100 |输入最大长度 | |
||||||
|
|focus |Boolean |false | | |
||||||
|
|
||||||
|
|
||||||
|
### SearchBar Events |
||||||
|
|
||||||
|
|事件称名 |说明 |返回参数 | |
||||||
|
|:-: |:-: |:-: | |
||||||
|
|@confirm |uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value |e={value:Number} | |
||||||
|
|@input |uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value|e=value | |
||||||
|
|@cancel |点击取消按钮时触发事件，返回参数为uniSearchBar的value |e={value:Number} | |
||||||
|
|@clear |点击清除按钮时触发事件，返回参数为uniSearchBar的value |e={value:Number} | |
||||||
|
|@focus |input 获取焦点时触发事件，返回参数为uniSearchBar的value |e={value:Number} | |
||||||
|
|@blur |input 失去焦点时触发事件，返回参数为uniSearchBar的value |e={value:Number} | |
||||||
|
|
||||||
|
### 替换 icon 的 slot 插槽 |
||||||
|
|
||||||
|
|插槽称名 |说明 | |
||||||
|
|:-: |:-: | |
||||||
|
|searchIcon |替换组件的搜索图标| |
||||||
|
|clearIcon |替换组件的清除图标| |
||||||
|
|
||||||
|
```html |
||||||
|
<!-- 替换组件的搜索图标 --> |
||||||
|
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel"> |
||||||
|
<uni-icons slot="searchIcon" color="#999999" size="18" type="home" /> |
||||||
|
</uni-search-bar> |
||||||
|
|
||||||
|
<!-- 替换组件的清除图标 --> |
||||||
|
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel"> |
||||||
|
<view slot="clearIcon" style="color: #999999" >X</view> |
||||||
|
</uni-search-bar> |
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
|
||||||
|
## 组件示例 |
||||||
|
|
||||||
|
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar) |
||||||
@ -1,21 +1,16 @@ |
|||||||
|
import Vue from 'vue' |
||||||
import App from './App' |
import App from './App' |
||||||
|
import * as filters from './Utils/js/date.js' |
||||||
|
|
||||||
|
Object.keys(filters).forEach(key => { |
||||||
|
Vue.filter(key, filters[key]) |
||||||
|
}) |
||||||
|
|
||||||
// #ifndef VUE3
|
|
||||||
import Vue from 'vue' |
|
||||||
Vue.config.productionTip = false |
Vue.config.productionTip = false |
||||||
|
|
||||||
App.mpType = 'app' |
App.mpType = 'app' |
||||||
|
|
||||||
const app = new Vue({ |
const app = new Vue({ |
||||||
...App |
...App |
||||||
}) |
}) |
||||||
app.$mount() |
app.$mount() |
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef VUE3
|
|
||||||
import { createSSRApp } from 'vue' |
|
||||||
export function createApp() { |
|
||||||
const app = createSSRApp(App) |
|
||||||
return { |
|
||||||
app |
|
||||||
} |
|
||||||
} |
|
||||||
// #endif
|
|
||||||
@ -0,0 +1,94 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<!-- 搜索框 --> |
||||||
|
<unisearchbar v-model="searchValue" @input="focusInput" placeholder="搜索内容" radius="100"> |
||||||
|
</unisearchbar> |
||||||
|
<!-- 商户名字 --> |
||||||
|
<view class="mart20 width100"> |
||||||
|
<view class=" mcclist font15 fcor666" v-for="(item,index) in mccList" @click="changemcc(item)"> |
||||||
|
{{item.maccCode}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import unisearchbar from '../../../components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'; |
||||||
|
import { |
||||||
|
getLklMcc |
||||||
|
} from '../../../Utils/Api.js'; |
||||||
|
let app = getApp(); |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
unisearchbar |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
//搜索内容 |
||||||
|
searchValue: '', |
||||||
|
//列表数据 |
||||||
|
mccList: [], |
||||||
|
pageNum: 1, |
||||||
|
pagesize: 15, |
||||||
|
isLoadMore: false, //是否加载中 |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
this.getLklMcc(); |
||||||
|
}, |
||||||
|
onReachBottom() { //上拉触底函数 |
||||||
|
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求 |
||||||
|
this.isLoadMore = true |
||||||
|
this.pageNum += 1 |
||||||
|
this.getLklMcc() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//查询mcc商户 |
||||||
|
getLklMcc() { |
||||||
|
let params = { |
||||||
|
pageNum: this.pageNum, |
||||||
|
pageSize: this.pagesize, |
||||||
|
name: this.searchValue |
||||||
|
} |
||||||
|
getLklMcc(params).then(res => { |
||||||
|
if (res.return_code == '000000' && res.return_data.list) { |
||||||
|
this.mccList = this.mccList.concat(res.return_data.list); |
||||||
|
if (res.return_data.pages == this.pageNum) { |
||||||
|
this.isLoadMore = true; |
||||||
|
} else { |
||||||
|
this.isLoadMore = false |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.isLoadMore = true |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 搜索商户 |
||||||
|
focusInput() { |
||||||
|
this.pageNum = 1; |
||||||
|
this.pagesize = 15; |
||||||
|
this.mccList = []; |
||||||
|
this.getLklMcc(); |
||||||
|
}, |
||||||
|
//选择某个mcc 并返回 |
||||||
|
changemcc(item){ |
||||||
|
app.globalData.mccid = item.name; |
||||||
|
app.globalData.mccname = item.maccCode; |
||||||
|
uni.navigateBack({}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.mcclist { |
||||||
|
width: calc(100% - 50upx); |
||||||
|
height: 100upx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background-color: rgba($color: #ffffff, $alpha: 0.1); |
||||||
|
border-bottom: 1px solid #f6f6f6; |
||||||
|
padding: 12upx 25upx; |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 37 KiB |
@ -1,2 +1,2 @@ |
|||||||
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>炫支付</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) |
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>炫支付</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) |
||||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/cweb/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/cweb/static/js/chunk-vendors.0004de39.js></script><script src=/cweb/static/js/index.96f180c6.js></script></body></html> |
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/cweb/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/cweb/static/js/chunk-vendors.5a385107.js></script><script src=/cweb/static/js/index.47494f15.js></script></body></html> |
||||||
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 23 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Loading…
Reference in new issue