11.5修改

2023-11-05 18:19:14 +08:00 · 2023-11-05 18:19:14 +08:00 · e0a0f1ac1e
commit e0a0f1ac1e
parent 22c039a8eb
16 changed files with 1131 additions and 58 deletions
--- a/App.vue
+++ b/App.vue
@ -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">
--- a/api/index.js
+++ b/api/index.js
@ -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),// 文章详情
--- a/config/index.js
+++ b/config/index.js
@ -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';// 正式环境（由于本地测试后台没有启动，暂时通用正式服）

--- a/pages.json
+++ b/pages.json
@ -71,7 +71,7 @@
 		{
 			"path": "pages/index/done",
 			"style": {
-				"navigationBarTitleText": "完成事项",
+				"navigationBarTitleText": "事务处理",
 				"enablePullDownRefresh": true
 			}
 		},
--- a/pages/index/done.vue
+++ b/pages/index/done.vue
@ -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,54 +28,192 @@
 		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">
-			<view class="td-content text-ellipsis-2">
-				{{item.content}}
+		<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>
+						<view class="td-info small-text">
+							{{util.timestampToDate(item.CreatedAt)}}
+						</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>
-			<view class="td-info small-text">
-				{{util.timestampToDate(item.CreatedAt)}}
-			</view>
-		</view>
+		</uni-popup>
 	</view>
 </template>
 <style scoped lang="scss">
+	.swiper{
+		height: var(--size);
+	}
 	.todoBox{
 		padding: 20rpx;
 		.td-item{
@ -80,5 +227,46 @@
 				text-align: right;
 			}
 		}
+	}
+	.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>
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@ -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;
--- a/pages/user/star.vue
+++ b/pages/user/star.vue
@ -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:`
+		// 	新华社北京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日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
+		// 	春发其华，秋收其实。
+		// 	共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
+		// 	`
+		// }
 	])
 	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">
--- a/store/index.js
+++ b/store/index.js
@ -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)
+			
 		}
 	}
 })
--- a/uni_modules/cc-newsTabs/changelog.md
+++ b/uni_modules/cc-newsTabs/changelog.md
@ -0,0 +1,4 @@
+## 2.0（2023-10-28）
+适配vue3 小程序
+## 1.0.0（2023-07-16）
+组件初始化
--- a/uni_modules/cc-newsTabs/components/cc-newsTabs/cc-newsTabs.vue
+++ b/uni_modules/cc-newsTabs/components/cc-newsTabs/cc-newsTabs.vue
@ -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=number为点击切换，e=object为swiper滑动切换
+				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,等待swiper动画结束再修改tabbar
+				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()
+					// 微信文档： 但是在uni的官方文档中并没有关于需要切换this的介绍，是用uni.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>
--- a/uni_modules/cc-newsTabs/package.json
+++ b/uni_modules/cc-newsTabs/package.json
@ -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"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/cc-newsTabs/readme.md
+++ b/uni_modules/cc-newsTabs/readme.md
@ -0,0 +1,132 @@
+# cc-newsTabs
+
+
+#### 使用方法 
+```使用方法
+<!-- tabArr：tab数组 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">
+
+		<!-- tabArr：tab数组 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>
+
+
+
+```
--- a/uni_modules/uni-combox/changelog.md
+++ b/uni_modules/uni-combox/changelog.md
@ -0,0 +1,15 @@
+## 1.0.1（2021-11-23）
+- 优化 label、label-width 属性
+## 1.0.0（2021-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.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.0.6（2021-05-12）
+- 新增 组件示例地址
+## 0.0.5（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 0.0.4（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 0.0.3（2021-02-04）
+- 调整为uni_modules目录规范
--- a/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
+++ b/uni_modules/uni-combox/components/uni-combox/uni-combox.vue
@ -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>
--- a/uni_modules/uni-combox/package.json
+++ b/uni_modules/uni-combox/package.json
@ -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"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/uni-combox/readme.md
+++ b/uni_modules/uni-combox/readme.md
@ -0,0 +1,11 @@
+
+
+## Combox 组合框
+> **组件名：uni-combox**
+> 代码块： `uCombox`
+
+
+组合框组件。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839