11.5修改

This commit is contained in:
阿怪 2023-11-05 18:19:14 +08:00
parent 22c039a8eb
commit e0a0f1ac1e
16 changed files with 1131 additions and 58 deletions

View File

@ -27,6 +27,13 @@
if(operation_info) {
store.operation_info = operation_info
}
uni.getSystemInfo({
success:function(res){
// console.log(res.screenHeight)
store.systemInfo = res
// sHeight.value = res.screenHeight
}
})
})
</script>
<style lang="scss">

View File

@ -14,6 +14,7 @@ const API = {
hospital:data => net.PUT("/user/hospital",data),// 修改医院信息
getTodoist:data => net.GET("/user/todo",data),// 获取待办事项
getVisionList:data => net.GET("/vision",data),// 获取测试记录
todoFinished:data => net.PUT("/vision",data),// 修改待办列表状态
// 百科
getArticleList:data => net.GET("/article/list",data),// 百科列表
getArticleDetail:data => net.GET("/article/"+data.id),// 文章详情

View File

@ -1,6 +1,6 @@
// isdev 为 true 表示开发环境 false 表示发布环境
const isdev = true;
const baseUrl = isdev ? 'http://410fed99.r6.cpolar.top' : 'http://eb467b6.r19.cpolar.top';// 办公室接口 & 测试环境
const baseUrl = isdev ? 'http://4a1840b2.r12.cpolar.top' : 'http://eb467b6.r19.cpolar.top';// 办公室接口 & 测试环境
// const baseUrl = isdev ? 'http://192.168.1.133:8899' : 'https://api.gwkjxb.com';// 办公室接口 & 正式环境
// const baseUrl = 'https://api.gwkjxb.com';// 正式环境(由于本地测试后台没有启动,暂时通用正式服)

View File

@ -71,7 +71,7 @@
{
"path": "pages/index/done",
"style": {
"navigationBarTitleText": "完成事项",
"navigationBarTitleText": "事务处理",
"enablePullDownRefresh": true
}
},

View File

@ -8,10 +8,19 @@
import api from '@/api/index.js'
import util from "@/utils/index.js"
import {useStore} from '@/store/index.js'
// import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import ccNewsTabs from '@/uni_modules/cc-newsTabs/components/cc-newsTabs/cc-newsTabs.vue'
const store = useStore()
//
onLoad((e) => {
// console.log(e)
c_index.value = parseInt(e.state_index)
list_box.value[c_index.value].queryParams.isFinish = c_index.value?0:1
// console.log(store.systemInfo)
if(store.systemInfo) {
swiper_h.value = store.systemInfo.windowHeight
// console.log(swiper_h.value)
}
getList()
})
onPullDownRefresh(()=> { //
@ -19,44 +28,155 @@
getList()
})
onReachBottom(() => { //
queryParams.value.page++
list_box.value[c_index.value].queryParams.page++
getList()
})
//
const inputDialog = ref()
const state_index = ref(0)
const swiper_h = ref(0)
const list = ref([])
const list_box = ref([
{
show_index:0,
state:1,
list:[],
queryParams:{
page:1,
pageSize:10,
isFinish:1
}
},
{
show_index:1,
state:0,
list:[],
queryParams:{
page:1,
pageSize:10,
isFinish:1
}
}
])
const queryParams = ref({
page:1,
pageSize:10,
isFinish:1
})
const c_index = ref(-1)
const tabArr = ref([
{
name: '已完成',
id: '1',
},
{
name: '待完成',
id: '2',
}
])
//
function init(){
list.value = []
queryParams.value.page = 1
queryParams.value.pageSize = 10
// list.value = []
list_box.value[c_index.value].list = []
list_box.value[c_index.value].queryParams.page = 1
list_box.value[c_index.value].queryParams.pageSize = 10
}
function queryStateInitFunc() {
list_box.value[c_index.value].queryParams.isFinish = c_index.value?0:1
}
async function getList() {
const res = await api.getTodoist(queryParams.value)
uni.showLoading({
mask:true
})
const res = await api.getTodoist(list_box.value[c_index.value].queryParams)
uni.hideLoading();
if(res.code === 0) {
if(res.data && res.data.length > 0) {
list.value.push(...res.data)
// list.value.push(...res.data)
list_box.value[c_index.value].list.push(...res.data)
}
else{
queryParams.value.page--
list_box.value[c_index.value].queryParams.page--
}
}
else{
uni.showToast({
title:"获取失败",
title:res.msg,
icon:"error",
duration:2000
duration:2000,
mask:true,
success() {
if(res.code === 7) //
{
store.afterFailLogin(2000)
}
}
})
}
}
function tabChange(currentIndex) {
c_index.value = currentIndex
console.log('tabChange is done!!!!!!!')
// if(list_box.value[c_index.value].list.length === 0) {
// queryStateInitFunc()
// getList()
// }
}
function scroll_func(e) {
c_index.value = e.detail.current
console.log('scroll_func is done!!!!!!!')
if(list_box.value[c_index.value].list.length === 0) {
queryStateInitFunc()
getList()
}
}
const handle_info = ref(null)
const handle_info_index = ref(0)
function handle_func(item,i) {
handle_info.value = item
handle_info_index.value = i
inputDialog.value.open()
}
function finishFunc() {
// api.todoFinished
uni.showModal({
title:'温馨提示',
content:"确定要完成该事务吗?",
success:async function(res) {
// console.log(res)
if(res.confirm) {
// console.log(handle_info.value)
const res_ = await api.todoFinished({
id:handle_info.value.ID,
isFinish:1
})
uni.showToast({
title:res_.msg,
icon:"error",
duration:2000,
mask:true,
success() {
console.log(res_)
if(res_.code === 0) {
list_box.value[c_index.value].list.splice(handle_info_index.value,1)
list_box.value[0].list = []
inputDialog.value.close()
}
}
})
}
}
})
}
</script>
<template>
<view class="todoBox page-box">
<view class="td-item" v-for="(item,i) in list">
<cc-newsTabs :tabArr="tabArr" :o_index="c_index" @tabChange="tabChange"></cc-newsTabs>
<swiper :current="c_index" @change="scroll_func" :style="{'--size':swiper_h+'px'}" class="swiper" circular :indicator-dots="false" :autoplay="false" >
<swiper-item v-for="(item1,i1) in list_box">
<view class="todoBox">
<view v-for="(item,i) in item1.list" @tap="handle_func(item,i)" class="td-item swiper-item uni-bg-green">
<view class="td-content text-ellipsis-2">
{{item.content}}
</view>
@ -65,8 +185,35 @@
</view>
</view>
</view>
</swiper-item>
</swiper>
<uni-popup ref="inputDialog" >
<view class="pop-box">
<view class="pb-title">完善手术信息</view>
<view class="pb-content">
<view class="pb-item">
<view class="pb-item-left">事项说明</view>
<view class="pb-item-right">
{{handle_info?.content}}
</view>
</view>
<view class="pb-item">
<view class="pb-item-left">创建时间</view>
<view class="pb-item-right">
{{util.timestampToDate(handle_info?.CreatedAt)}}
</view>
</view>
<view v-if="!handle_info?.isFinish" class="pb-item pb-item-btn" @tap="finishFunc">完成</view>
</view>
</view>
</uni-popup>
</view>
</template>
<style scoped lang="scss">
.swiper{
height: var(--size);
}
.todoBox{
padding: 20rpx;
.td-item{
@ -81,4 +228,45 @@
}
}
}
.pb-item-btn{
padding: 20rpx 0;
text-align: center;
color: white;
background: #26758d;
justify-content: center;
width: 66%;
margin: 0 auto;
border-radius: 10rpx;
}
.pop-box{
.pb-title{
text-align: center;
margin-bottom: 40rpx;
}
background-color: white;
padding: 20rpx;
width: 80%;
margin: 0 auto;
border-radius: 20rpx;
}
.pb-item{
display: flex;
align-items: center;
margin-bottom: 40rpx;
// justify-content: space-between;
.pb-item-left{
width: 30%;
color: gray;
}
.pb-item-right{
position: relative;
margin-left: 10rpx;
width: 75%;
}
}
:deep(){
.uni-popup__wrapper{
width: 100%;
}
}
</style>

View File

@ -2,14 +2,14 @@
//
import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import { onLoad } from "@dcloudio/uni-app"
import { onLoad,onShow } from "@dcloudio/uni-app"
import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick,watch} from "vue"
import api from '@/api/index.js'
import {useStore} from '@/store/index.js'
// import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
const store = useStore()
onLoad((e) => {
onShow((e) => {
getLbtList()
if(store.userInfo && !store.operation_info) { //
// getHospitalList()
@ -67,7 +67,7 @@
}
const hValue = ref('') //
const hValueId = ref('') // id
function onClickH(e) {
function onClickH() {
h_queryParams.value.key = hValue.value
getHospitalList()
@ -78,9 +78,10 @@
})
}
function toChooseH(item) {
// console.log(item)
choosed_h.value = item
hValue.value = item.name
hospitals.value = null
// hospitals.value = null
}
// function blurFunc() {
// blur_h.value = 1
@ -104,7 +105,7 @@
}
let user_info = JSON.parse(uni.getStorageSync('userInfo'))
let h_query = {
isSurgery:isSurgery.value,
isSurgery:parseInt(isSurgery.value),
surgery_time:surgery_time.value,
userId:user_info.userId,
hospitalId:choosed_h.value?.ID
@ -122,17 +123,31 @@
}
else{
uni.showToast({
title:"操作失败",
title:res.msg,
icon:"error",
duration:2000
duration:2000,
success() {
if(res.code === 7) //
{
// //
// uni.removeStorageSync('userInfo');
// uni.removeStorageSync('access_token');
// uni.removeStorageSync('avatarUrl');
// uni.switchTab({
// url:'/pages/user/index'
// })
store.afterFailLogin()
}
}
})
}
}
function todoFunc(state) {
function todoFunc(state_index) {
let url = '/pages/index/todo'
if(state === 2) {
url = '/pages/index/done'
}
url = '/pages/index/done?state_index='+state_index
// if(state_index === 0) {
// url = '/pages/index/done?state_index='+state_index
// }
uni.navigateTo({
url
})
@ -170,7 +185,7 @@
</view>
</view>
<view class="main-cards">
<view @tap="todoFunc(2)" class="mc-part" style="margin-left: 0;">
<view @tap="todoFunc(0)" class="mc-part" style="margin-left: 0;">
<view class="mc-part-text">已完成事项</view>
<image src="../../static/done.png" mode="widthFix"></image>
</view>
@ -221,12 +236,13 @@
<view class="pb-item">
<view class="pb-item-left">医院名称</view>
<view class="pb-item-right">
<uniEasyinput @tap.stop="focusFunc" suffixIcon="search" v-model="hValue" focus placeholder="请输入内容" @iconClick="onClickH"></uniEasyinput>
<!-- <uniEasyinput @tap.stop="focusFunc" suffixIcon="search" v-model="hValue" focus placeholder="请输入内容" @iconClick="onClickH"></uniEasyinput>
<view class="h_res_show_aprt" v-if="hospitals">
<view v-for="(item,i) in hospitals" @tap.stop="toChooseH(item)" class="h_res_show_aprt_row text-ellipsis-1">
{{item.name}}
</view>
</view>
</view> -->
<uni-combox @input="onClickH" :candidates="hospitals" placeholder="请选择医院" @choosed="toChooseH" v-model="hValue"></uni-combox>
</view>
</view>
<view class="pb-item pb-item-btn" @tap="toSave">提交</view>
@ -294,6 +310,7 @@
// justify-content: space-between;
.pb-item-left{
width: 30%;
color: gray;
}
.pb-item-right{
position: relative;

View File

@ -5,45 +5,47 @@
import {useStore} from '@/store/index.js'
import api from "@/api/index.js"
const store = useStore()
import emptyCard from "@/components/emptyCard.vue"
//
onLoad((e) => {
let userinfo = JSON.parse(store.userInfo)
// console.log(userinfo)
queryParams.value.userId = userinfo.userId
getList()
})
onPullDownRefresh(()=> { //
init()
getList()
})
onReachBottom(() => { //
queryParams.value.page ++
getList()
})
//
// const user_info = ref(null)
const list = ref([
{
id:1,
cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
title:'金秋相逢 共叙合作',
reading_num:100,
content:`
新华社北京10月18日电 金秋时节北京再迎盛会第三届一带一路国际合作高峰论坛隆重举
春发其华秋收其
共建一带一路走过了第一个蓬勃十年正值风华正茂务当昂扬奋进奔向下一个金色十
`
},
{
id:2,
cover_img:'https://ms.bdimg.com/pacific/0/pic/1083217647_-478899572.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00',
title:'金秋相逢 共叙合作',
reading_num:100,
content:`
新华社北京10月18日电 金秋时节北京再迎盛会第三届一带一路国际合作高峰论坛隆重举
春发其华秋收其
共建一带一路走过了第一个蓬勃十年正值风华正茂务当昂扬奋进奔向下一个金色十
`
}
// {
// id:1,
// cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
// title:' ',
// reading_num:100,
// content:`
// 1018
//
//
// `
// },
// {
// id:2,
// cover_img:'https://ms.bdimg.com/pacific/0/pic/1083217647_-478899572.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00',
// title:' ',
// reading_num:100,
// content:`
// 1018
//
//
// `
// }
])
const queryParams = ref({
page:1,
@ -51,9 +53,21 @@
userId:0
})
//
function init() {
queryParams.page = 1
queryParams.pageSize = 10
list.value = []
}
async function getList() {
const res = await api.getStarList(queryParams.value)
if(res.code === 0) {
if( res.data.list.length>0) {
list.value.push(...res.data.list)
}
else{
queryParams.page-=1
}
}
}
function toDetail(item) {
let info = encodeURIComponent(JSON.stringify(item))
@ -66,7 +80,7 @@
<template>
<view class="starBox page-box page-bg-gray">
<view class="list-box">
<view class="lb-card" v-for="(item,i) in list" @tap="toDetail(item)">
<view class="lb-card" v-if="list.length > 0" v-for="(item,i) in list" @tap="toDetail(item)">
<view class="lb-left">
<image :src="item.cover_img" mode="aspectFill"></image>
</view>
@ -75,7 +89,9 @@
<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
</view>
</view>
<emptyCard v-else></emptyCard>
</view>
</view>
</template>
<style scoped lang="scss">

View File

@ -65,6 +65,15 @@ export const useStore = defineStore('main2', {
this.userInfo = uni.getStorageSync('userInfo')
// this.getUserInfo()
}
else{
this.access_token = null
this.isLogin = false
this.userInfo = null
// 清空缓存
// uni.removeStorageSync('userInfo');
// uni.removeStorageSync('access_token');
// uni.removeStorageSync('avatarUrl');
}
// else{
// if(!visitState) {
// // uni.navigateTo({
@ -147,6 +156,17 @@ export const useStore = defineStore('main2', {
// cart_list.value = res.data
// }
}
},
afterFailLogin(duration){
setTimeout(()=>{
uni.removeStorageSync('userInfo');
uni.removeStorageSync('access_token');
uni.removeStorageSync('avatarUrl');
uni.switchTab({
url:'/pages/user/index'
})
},duration)
}
}
})

View File

@ -0,0 +1,4 @@
## 2.02023-10-28
适配vue3 小程序
## 1.0.02023-07-16
组件初始化

View File

@ -0,0 +1,192 @@
<template>
<view class="content">
<!-- 顶部选项卡 -->
<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
<!-- <view v-for="(item,index) in tabArr" :key="item.id" class="nav-item"
:class="{current: index === tabCurrentIndex}" :id="'tab'+index" @click="changeTab(index)">{{item.name}}
</view> -->
<view v-for="(item,index) in tabArr" :key="item.id" class="nav-item"
:class="{current: index === o_index}" :id="'tab'+index" @click="changeTab(index)">{{item.name}}
</view>
</scroll-view>
</view>
</template>
<script>
let windowWidth = uni.getSystemInfoSync().windowWidth,
scrollTimer = false,
tabBar;
export default {
data() {
return {
tabCurrentIndex: 0, //
scrollLeft: 0, //
}
},
props: {
tabArr: {
type: Array,
default () {
return [];
}
},
o_index: {
type: Number,
default () {
return 0;
}
}
},
methods: {
//tab
async changeTab(e) {
if (scrollTimer) {
//
clearTimeout(scrollTimer);
scrollTimer = false;
}
let index = e;
//e=numbere=objectswiper
if (typeof e === 'object') {
index = e.detail.current
}
if (typeof tabBar !== 'object') {
tabBar = await this.getElSize("nav-bar")
}
//
let tabBarScrollLeft = tabBar.scrollLeft;
let width = 0;
let nowWidth = 0;
//
for (let i = 0; i <= index; i++) {
let result = await this.getElSize('tab' + i);
width += result.width;
if (i === index) {
nowWidth = result.width;
}
}
if (typeof e === 'number') {
//tabbar
this.tabCurrentIndex = index;
}
// console.log("windowWidth = " + windowWidth);
//300ms,swipertabbar
scrollTimer = setTimeout(() => {
if (width - nowWidth / 2 > windowWidth / 2) {
//
this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
} else {
this.scrollLeft = 0;
}
if (typeof e === 'object') {
this.tabCurrentIndex = index;
}
this.tabCurrentIndex = index;
}, 300)
// console.log('changeTab is done!!!')
this.$emit("tabChange", this.tabCurrentIndex);
},
//size
getElSize(id) {
return new Promise((res, rej) => {
// 使wx.createSelectorQuery() wx. this.createSelectorQuery()
// unithisuni.createSelectorQuery()
// #ifdef MP-WEIXIN
let el = this.createSelectorQuery().select('#' + id);
// #endif
// #ifdef H5 || APP-PLUS
let el = uni.createSelectorQuery().select('#' + id);
// #endif
el.fields({
size: true,
scrollOffset: true,
rect: true
}, (data) => {
res(data);
}).exec();
});
},
}
}
</script>
<style lang='scss'>
.content {
background-color: #f8f8f8;
height: 100%;
overflow: hidden;
}
/* 隐藏滚动条scrollbar */
.nav-bar ::-webkit-scrollbar {
display: none;
background-color: transparent;
}
/* 顶部tabbar */
.nav-bar {
position: relative;
z-index: 10;
height: 90upx;
white-space: nowrap;
box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
background-color: #fff;
.nav-item {
display: inline-block;
/* width: 150upx; */
width: 50%;
height: 90upx;
text-align: center;
line-height: 90upx;
font-size: 30upx;
color: #303133;
position: relative;
&:after {
content: '';
width: 0;
height: 0;
border-bottom: 4upx solid #26758d;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
transition: .3s;
}
}
.current {
color: #26758d;
&:after {
width: 50%;
}
}
}
</style>

View File

@ -0,0 +1,85 @@
{
"id": "cc-newsTabs",
"displayName": "自定义可自由滚动新闻栏tabs选项卡标签栏标题栏组件(适配vue3 小程序)",
"version": "2.0",
"description": "自定义可自由滚动新闻栏tabs选项卡标签栏标题栏组件(适配vue3 小程序)",
"keywords": [
"tabs",
"新闻栏",
"选项卡",
"标题栏",
"标签栏"
],
"repository": "",
"engines": {
"HBuilderX": "^3.8.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"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",
"钉钉": "y",
"快手": "y",
"飞书": "y",
"京东": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
}
}
}
}
}

View File

@ -0,0 +1,132 @@
# cc-newsTabs
#### 使用方法
```使用方法
<!-- tabArrtab数组 tabChange标签栏切换 -->
<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
//初始化数据
tabArr: [{
name: '关注',
id: '1',
},
{
name: '推荐',
id: '2'
},
{
name: '体育',
id: '3'
},
{
name: '热点',
id: '4'
},
{
name: '财经',
id: '5'
},
{
name: '娱乐',
id: '6'
},
{
name: '军事',
id: '7'
},
{
name: '历史',
id: '8'
},
{
name: '本地',
id: '9'
}],
// tab标签栏改变事件
tabChange(currentIndex) {
uni.showModal({
title: "当前选择序列",
content: "当前选择序列 = " + currentIndex
})
}
```
#### HTML代码实现部分
```html
<template>
<view class="content">
<!-- tabArrtab数组 tabChange标签栏切换 -->
<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
</view>
</template>
<script>
export default {
data() {
return {
tabArr: [{
name: '关注',
id: '1',
}, {
name: '推荐',
id: '2'
}, {
name: '体育',
id: '3'
}, {
name: '热点',
id: '4'
}, {
name: '财经',
id: '5'
}, {
name: '娱乐',
id: '6'
}, {
name: '军事',
id: '7'
}, {
name: '历史',
id: '8'
}, {
name: '本地',
id: '9'
}],
}
},
methods: {
tabChange(currentIndex) {
uni.showModal({
title: "当前选择序列",
content: "当前选择序列 = " + currentIndex
})
}
}
}
</script>
<style>
page,
.content {
background-color: #f8f8f8;
height: 100%;
overflow: hidden;
}
</style>
```

View File

@ -0,0 +1,15 @@
## 1.0.12021-11-23
- 优化 label、label-width 属性
## 1.0.02021-11-19
- 优化 组件UI并提供设计资源详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox)
## 0.1.02021-07-30
- 组件兼容 vue3如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.0.62021-05-12
- 新增 组件示例地址
## 0.0.52021-04-21
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 0.0.42021-02-05
- 优化 组件引用关系通过uni_modules引用组件
## 0.0.32021-02-04
- 调整为uni_modules目录规范

View File

@ -0,0 +1,295 @@
<template>
<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
<view v-if="label" class="uni-combox__label" :style="labelStyle">
<text>{{label}}</text>
</view>
<view class="uni-combox__input-box">
<input class="uni-combox__input" type="text" :placeholder="placeholder"
placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus"
@blur="onBlur" />
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
</uni-icons>
</view>
<view class="uni-combox__selector" v-if="showSelector && filterCandidates">
<view class="uni-popper__arrow"></view>
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
<text>{{emptyTips}}</text>
</view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
@click="onSelectorClick(index)">
<text>{{item.name}}</text>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
/**
* Combox 组合输入框
* @description 组合输入框一般用于既可以输入也可以选择的场景
* @tutorial https://ext.dcloud.net.cn/plugin?id=1261
* @property {String} label 左侧文字
* @property {String} labelWidth 左侧内容宽度
* @property {String} placeholder 输入框占位符
* @property {Array} candidates 候选项列表
* @property {String} emptyTips 筛选结果为空时显示的文字
* @property {String} value 组合框的值
*/
export default {
name: 'uniCombox',
emits: ['input', 'update:modelValue'],
props: {
border: {
type: Boolean,
default: true
},
label: {
type: String,
default: ''
},
labelWidth: {
type: String,
default: 'auto'
},
placeholder: {
type: String,
default: ''
},
candidates: {
type: Array,
default () {
return []
}
},
emptyTips: {
type: String,
default: '无匹配项'
},
// #ifndef VUE3
value: {
type: [String, Number],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [String, Number],
default: ''
},
// #endif
},
data() {
return {
showSelector: false,
inputVal: '',
// inputValId:0
}
},
computed: {
labelStyle() {
if (this.labelWidth === 'auto') {
return ""
}
return `width: ${this.labelWidth}`
},
filterCandidates() {
if(this.candidates) {
return this.candidates.filter((item) => {
return item.name.toString().indexOf(this.inputVal) > -1
})
}
else{
return null
}
},
filterCandidatesLength() {
if(this.candidates) {
return this.filterCandidates.length
}
else{
return null
}
}
},
watch: {
// #ifndef VUE3
value: {
handler(newVal) {
this.inputVal = newVal
},
immediate: true
},
// #endif
// #ifdef VUE3
modelValue: {
handler(newVal) {
// console.log(1212121,newVal)
this.inputVal = newVal
},
immediate: true
},
// #endif
},
methods: {
toggleSelector() {
this.showSelector = !this.showSelector
},
onFocus() {
this.showSelector = true
},
onBlur() {
setTimeout(() => {
this.showSelector = false
}, 153)
},
onSelectorClick(index) {
// console.log(this.filterCandidates,index)
// console.log(this.filterCandidates[index].name)
// console.log( this.filterCandidates.length)
// // console.log(this.filterCandidates)
// // this.inputValId = this.filterCandidates[index].ID
this.showSelector = false
// this.$emit('input', this.inputVal)
this.$emit('update:modelValue', this.inputVal)
this.$emit('choosed', this.filterCandidates[index])
this.inputVal = this.filterCandidates[index].name
},
onInput() {
setTimeout(() => {
this.$emit('input', this.inputVal)
this.$emit('update:modelValue', this.inputVal)
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-combox {
font-size: 14px;
border: 1px solid #DCDFE6;
border-radius: 4px;
padding: 6px 10px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
// height: 40px;
flex-direction: row;
align-items: center;
// border-bottom: solid 1px #DDDDDD;
}
.uni-combox__label {
font-size: 16px;
line-height: 22px;
padding-right: 10px;
color: #999999;
}
.uni-combox__input-box {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
}
.uni-combox__input {
flex: 1;
font-size: 14px;
height: 22px;
line-height: 22px;
}
.uni-combox__input-plac {
font-size: 14px;
color: #999;
}
.uni-combox__selector {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
position: absolute;
top: calc(100% + 12px);
left: 0;
width: 100%;
background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 2;
padding: 4px 0;
}
.uni-combox__selector-scroll {
/* #ifndef APP-NVUE */
max-height: 200px;
box-sizing: border-box;
/* #endif */
}
.uni-combox__selector-empty,
.uni-combox__selector-item {
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
line-height: 36px;
font-size: 14px;
text-align: center;
// border-bottom: solid 1px #DDDDDD;
padding: 0px 10px;
}
.uni-combox__selector-item:hover {
background-color: #f9f9f9;
}
.uni-combox__selector-empty:last-child,
.uni-combox__selector-item:last-child {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
// picker
.uni-popper__arrow,
.uni-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.uni-combox__no-border {
border: none;
}
</style>

View File

@ -0,0 +1,90 @@
{
"id": "uni-combox",
"displayName": "uni-combox 组合框",
"version": "1.0.1",
"description": "可以选择也可以输入的表单项 ",
"keywords": [
"uni-ui",
"uniui",
"combox",
"组合框",
"select"
],
"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-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"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": "y"
}
}
}
}
}

View File

@ -0,0 +1,11 @@
## Combox 组合框
> **组件名uni-combox**
> 代码块: `uCombox`
组合框组件。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
#### 如使用过程中有任何问题或者您对uni-ui有一些好的建议欢迎加入 uni-ui 交流群871950839