11.5修改
This commit is contained in:
parent
22c039a8eb
commit
e0a0f1ac1e
7
App.vue
7
App.vue
@ -27,6 +27,13 @@
|
|||||||
if(operation_info) {
|
if(operation_info) {
|
||||||
store.operation_info = operation_info
|
store.operation_info = operation_info
|
||||||
}
|
}
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success:function(res){
|
||||||
|
// console.log(res.screenHeight)
|
||||||
|
store.systemInfo = res
|
||||||
|
// sHeight.value = res.screenHeight
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@ -14,6 +14,7 @@ const API = {
|
|||||||
hospital:data => net.PUT("/user/hospital",data),// 修改医院信息
|
hospital:data => net.PUT("/user/hospital",data),// 修改医院信息
|
||||||
getTodoist:data => net.GET("/user/todo",data),// 获取待办事项
|
getTodoist:data => net.GET("/user/todo",data),// 获取待办事项
|
||||||
getVisionList:data => net.GET("/vision",data),// 获取测试记录
|
getVisionList:data => net.GET("/vision",data),// 获取测试记录
|
||||||
|
todoFinished:data => net.PUT("/vision",data),// 修改待办列表状态
|
||||||
// 百科
|
// 百科
|
||||||
getArticleList:data => net.GET("/article/list",data),// 百科列表
|
getArticleList:data => net.GET("/article/list",data),// 百科列表
|
||||||
getArticleDetail:data => net.GET("/article/"+data.id),// 文章详情
|
getArticleDetail:data => net.GET("/article/"+data.id),// 文章详情
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
// isdev 为 true 表示开发环境 false 表示发布环境
|
// isdev 为 true 表示开发环境 false 表示发布环境
|
||||||
const isdev = true;
|
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 = isdev ? 'http://192.168.1.133:8899' : 'https://api.gwkjxb.com';// 办公室接口 & 正式环境
|
||||||
// const baseUrl = 'https://api.gwkjxb.com';// 正式环境（由于本地测试后台没有启动，暂时通用正式服）
|
// const baseUrl = 'https://api.gwkjxb.com';// 正式环境（由于本地测试后台没有启动，暂时通用正式服）
|
||||||
|
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/index/done",
|
"path": "pages/index/done",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "完成事项",
|
"navigationBarTitleText": "事务处理",
|
||||||
"enablePullDownRefresh": true
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -8,10 +8,19 @@
|
|||||||
import api from '@/api/index.js'
|
import api from '@/api/index.js'
|
||||||
import util from "@/utils/index.js"
|
import util from "@/utils/index.js"
|
||||||
import {useStore} from '@/store/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()
|
const store = useStore()
|
||||||
// 生命周期
|
// 生命周期
|
||||||
onLoad((e) => {
|
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()
|
getList()
|
||||||
})
|
})
|
||||||
onPullDownRefresh(()=> { // 下拉刷新
|
onPullDownRefresh(()=> { // 下拉刷新
|
||||||
@ -19,54 +28,192 @@
|
|||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
onReachBottom(() => { // 上滑触底
|
onReachBottom(() => { // 上滑触底
|
||||||
queryParams.value.page++
|
list_box.value[c_index.value].queryParams.page++
|
||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
// 变量
|
// 变量
|
||||||
|
const inputDialog = ref()
|
||||||
|
const state_index = ref(0)
|
||||||
|
const swiper_h = ref(0)
|
||||||
const list = ref([])
|
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({
|
const queryParams = ref({
|
||||||
page:1,
|
page:1,
|
||||||
pageSize:10,
|
pageSize:10,
|
||||||
isFinish:1
|
isFinish:1
|
||||||
})
|
})
|
||||||
|
const c_index = ref(-1)
|
||||||
|
const tabArr = ref([
|
||||||
|
{
|
||||||
|
name: '已完成',
|
||||||
|
id: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待完成',
|
||||||
|
id: '2',
|
||||||
|
}
|
||||||
|
])
|
||||||
// 函数
|
// 函数
|
||||||
function init(){
|
function init(){
|
||||||
list.value = []
|
// list.value = []
|
||||||
queryParams.value.page = 1
|
list_box.value[c_index.value].list = []
|
||||||
queryParams.value.pageSize = 10
|
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() {
|
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.code === 0) {
|
||||||
if(res.data && res.data.length > 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{
|
else{
|
||||||
queryParams.value.page--
|
list_box.value[c_index.value].queryParams.page--
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title:"获取失败",
|
title:res.msg,
|
||||||
icon:"error",
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<view class="todoBox page-box">
|
<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>
|
||||||
<view class="td-content text-ellipsis-2">
|
<swiper :current="c_index" @change="scroll_func" :style="{'--size':swiper_h+'px'}" class="swiper" circular :indicator-dots="false" :autoplay="false" >
|
||||||
{{item.content}}
|
<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>
|
||||||
<view class="td-info small-text">
|
</uni-popup>
|
||||||
{{util.timestampToDate(item.CreatedAt)}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.swiper{
|
||||||
|
height: var(--size);
|
||||||
|
}
|
||||||
.todoBox{
|
.todoBox{
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
.td-item{
|
.td-item{
|
||||||
@ -80,5 +227,46 @@
|
|||||||
text-align: right;
|
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>
|
</style>
|
||||||
@ -2,14 +2,14 @@
|
|||||||
// 引入依赖
|
// 引入依赖
|
||||||
import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
|
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 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 mySwiper from "@/components/mySwiper.vue"
|
||||||
import {ref,onMounted,nextTick,watch} from "vue"
|
import {ref,onMounted,nextTick,watch} from "vue"
|
||||||
import api from '@/api/index.js'
|
import api from '@/api/index.js'
|
||||||
import {useStore} from '@/store/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'
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
onLoad((e) => {
|
onShow((e) => {
|
||||||
getLbtList()
|
getLbtList()
|
||||||
if(store.userInfo && !store.operation_info) { //登录过 且 未填写手术信息
|
if(store.userInfo && !store.operation_info) { //登录过 且 未填写手术信息
|
||||||
// getHospitalList()
|
// getHospitalList()
|
||||||
@ -67,7 +67,7 @@
|
|||||||
}
|
}
|
||||||
const hValue = ref('') // 医院
|
const hValue = ref('') // 医院
|
||||||
const hValueId = ref('') // 医院id
|
const hValueId = ref('') // 医院id
|
||||||
function onClickH(e) {
|
function onClickH() {
|
||||||
h_queryParams.value.key = hValue.value
|
h_queryParams.value.key = hValue.value
|
||||||
getHospitalList()
|
getHospitalList()
|
||||||
|
|
||||||
@ -78,9 +78,10 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
function toChooseH(item) {
|
function toChooseH(item) {
|
||||||
|
// console.log(item)
|
||||||
choosed_h.value = item
|
choosed_h.value = item
|
||||||
hValue.value = item.name
|
hValue.value = item.name
|
||||||
hospitals.value = null
|
// hospitals.value = null
|
||||||
}
|
}
|
||||||
// function blurFunc() {
|
// function blurFunc() {
|
||||||
// blur_h.value = 1
|
// blur_h.value = 1
|
||||||
@ -104,7 +105,7 @@
|
|||||||
}
|
}
|
||||||
let user_info = JSON.parse(uni.getStorageSync('userInfo'))
|
let user_info = JSON.parse(uni.getStorageSync('userInfo'))
|
||||||
let h_query = {
|
let h_query = {
|
||||||
isSurgery:isSurgery.value,
|
isSurgery:parseInt(isSurgery.value),
|
||||||
surgery_time:surgery_time.value,
|
surgery_time:surgery_time.value,
|
||||||
userId:user_info.userId,
|
userId:user_info.userId,
|
||||||
hospitalId:choosed_h.value?.ID
|
hospitalId:choosed_h.value?.ID
|
||||||
@ -122,17 +123,31 @@
|
|||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title:"操作失败",
|
title:res.msg,
|
||||||
icon:"error",
|
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'
|
let url = '/pages/index/todo'
|
||||||
if(state === 2) {
|
url = '/pages/index/done?state_index='+state_index
|
||||||
url = '/pages/index/done'
|
// if(state_index === 0) {
|
||||||
}
|
// url = '/pages/index/done?state_index='+state_index
|
||||||
|
// }
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url
|
url
|
||||||
})
|
})
|
||||||
@ -170,7 +185,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="main-cards">
|
<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>
|
<view class="mc-part-text">已完成事项</view>
|
||||||
<image src="../../static/done.png" mode="widthFix"></image>
|
<image src="../../static/done.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
@ -221,12 +236,13 @@
|
|||||||
<view class="pb-item">
|
<view class="pb-item">
|
||||||
<view class="pb-item-left">医院名称</view>
|
<view class="pb-item-left">医院名称</view>
|
||||||
<view class="pb-item-right">
|
<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 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">
|
<view v-for="(item,i) in hospitals" @tap.stop="toChooseH(item)" class="h_res_show_aprt_row text-ellipsis-1">
|
||||||
{{item.name}}
|
{{item.name}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
|
<uni-combox @input="onClickH" :candidates="hospitals" placeholder="请选择医院" @choosed="toChooseH" v-model="hValue"></uni-combox>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="pb-item pb-item-btn" @tap="toSave">提交</view>
|
<view class="pb-item pb-item-btn" @tap="toSave">提交</view>
|
||||||
@ -294,6 +310,7 @@
|
|||||||
// justify-content: space-between;
|
// justify-content: space-between;
|
||||||
.pb-item-left{
|
.pb-item-left{
|
||||||
width: 30%;
|
width: 30%;
|
||||||
|
color: gray;
|
||||||
}
|
}
|
||||||
.pb-item-right{
|
.pb-item-right{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -5,45 +5,47 @@
|
|||||||
import {useStore} from '@/store/index.js'
|
import {useStore} from '@/store/index.js'
|
||||||
import api from "@/api/index.js"
|
import api from "@/api/index.js"
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
|
import emptyCard from "@/components/emptyCard.vue"
|
||||||
// 生命周期
|
// 生命周期
|
||||||
onLoad((e) => {
|
onLoad((e) => {
|
||||||
let userinfo = JSON.parse(store.userInfo)
|
let userinfo = JSON.parse(store.userInfo)
|
||||||
// console.log(userinfo)
|
// console.log(userinfo)
|
||||||
queryParams.value.userId = userinfo.userId
|
queryParams.value.userId = userinfo.userId
|
||||||
|
|
||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
onPullDownRefresh(()=> { // 下拉刷新
|
onPullDownRefresh(()=> { // 下拉刷新
|
||||||
|
init()
|
||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
onReachBottom(() => { // 上滑触底
|
onReachBottom(() => { // 上滑触底
|
||||||
|
queryParams.value.page ++
|
||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
// 变量
|
// 变量
|
||||||
// const user_info = ref(null)
|
// const user_info = ref(null)
|
||||||
const list = ref([
|
const list = ref([
|
||||||
{
|
// {
|
||||||
id:1,
|
// id:1,
|
||||||
cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
|
// cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
|
||||||
title:'金秋相逢 共叙合作',
|
// title:'金秋相逢 共叙合作',
|
||||||
reading_num:100,
|
// reading_num:100,
|
||||||
content:`
|
// content:`
|
||||||
新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
// 新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
||||||
春发其华，秋收其实。
|
// 春发其华，秋收其实。
|
||||||
共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
// 共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
||||||
`
|
// `
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id:2,
|
// 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',
|
// 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:'金秋相逢 共叙合作',
|
// title:'金秋相逢 共叙合作',
|
||||||
reading_num:100,
|
// reading_num:100,
|
||||||
content:`
|
// content:`
|
||||||
新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
// 新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
||||||
春发其华，秋收其实。
|
// 春发其华，秋收其实。
|
||||||
共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
// 共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
||||||
`
|
// `
|
||||||
}
|
// }
|
||||||
])
|
])
|
||||||
const queryParams = ref({
|
const queryParams = ref({
|
||||||
page:1,
|
page:1,
|
||||||
@ -51,9 +53,21 @@
|
|||||||
userId:0
|
userId:0
|
||||||
})
|
})
|
||||||
// 方法
|
// 方法
|
||||||
|
function init() {
|
||||||
|
queryParams.page = 1
|
||||||
|
queryParams.pageSize = 10
|
||||||
|
list.value = []
|
||||||
|
}
|
||||||
async function getList() {
|
async function getList() {
|
||||||
const res = await api.getStarList(queryParams.value)
|
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) {
|
function toDetail(item) {
|
||||||
let info = encodeURIComponent(JSON.stringify(item))
|
let info = encodeURIComponent(JSON.stringify(item))
|
||||||
@ -66,7 +80,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="starBox page-box page-bg-gray">
|
<view class="starBox page-box page-bg-gray">
|
||||||
<view class="list-box">
|
<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">
|
<view class="lb-left">
|
||||||
<image :src="item.cover_img" mode="aspectFill"></image>
|
<image :src="item.cover_img" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
@ -75,7 +89,9 @@
|
|||||||
<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
|
<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<emptyCard v-else></emptyCard>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@ -65,6 +65,15 @@ export const useStore = defineStore('main2', {
|
|||||||
this.userInfo = uni.getStorageSync('userInfo')
|
this.userInfo = uni.getStorageSync('userInfo')
|
||||||
// this.getUserInfo()
|
// this.getUserInfo()
|
||||||
}
|
}
|
||||||
|
else{
|
||||||
|
this.access_token = null
|
||||||
|
this.isLogin = false
|
||||||
|
this.userInfo = null
|
||||||
|
// 清空缓存
|
||||||
|
// uni.removeStorageSync('userInfo');
|
||||||
|
// uni.removeStorageSync('access_token');
|
||||||
|
// uni.removeStorageSync('avatarUrl');
|
||||||
|
}
|
||||||
// else{
|
// else{
|
||||||
// if(!visitState) {
|
// if(!visitState) {
|
||||||
// // uni.navigateTo({
|
// // uni.navigateTo({
|
||||||
@ -147,6 +156,17 @@ export const useStore = defineStore('main2', {
|
|||||||
// cart_list.value = res.data
|
// 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)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
4
uni_modules/cc-newsTabs/changelog.md
Normal file
4
uni_modules/cc-newsTabs/changelog.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
## 2.0（2023-10-28）
|
||||||
|
适配vue3 小程序
|
||||||
|
## 1.0.0（2023-07-16）
|
||||||
|
组件初始化
|
||||||
192
uni_modules/cc-newsTabs/components/cc-newsTabs/cc-newsTabs.vue
Normal file
192
uni_modules/cc-newsTabs/components/cc-newsTabs/cc-newsTabs.vue
Normal 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=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>
|
||||||
85
uni_modules/cc-newsTabs/package.json
Normal file
85
uni_modules/cc-newsTabs/package.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
132
uni_modules/cc-newsTabs/readme.md
Normal file
132
uni_modules/cc-newsTabs/readme.md
Normal file
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
15
uni_modules/uni-combox/changelog.md
Normal file
15
uni_modules/uni-combox/changelog.md
Normal file
@ -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目录规范
|
||||||
295
uni_modules/uni-combox/components/uni-combox/uni-combox.vue
Normal file
295
uni_modules/uni-combox/components/uni-combox/uni-combox.vue
Normal 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>
|
||||||
90
uni_modules/uni-combox/package.json
Normal file
90
uni_modules/uni-combox/package.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
uni_modules/uni-combox/readme.md
Normal file
11
uni_modules/uni-combox/readme.md
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## Combox 组合框
|
||||||
|
> **组件名：uni-combox**
|
||||||
|
> 代码块： `uCombox`
|
||||||
|
|
||||||
|
|
||||||
|
组合框组件。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
Loading…
Reference in New Issue
Block a user