完成我的
3
App.vue
@ -61,9 +61,8 @@
|
||||
.ml10 {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
.mt24 {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
</style>
|
117
components/commTabbar/commTabbar.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view class="commTabbar_container">
|
||||
<!-- <liu-pageTab-bar :tabList="data" activeColor="#446BFA" @change="toPathSwitch"></liu-pageTab-bar> -->
|
||||
<!-- <u-tabbar :value="value1" @change="handelChange" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
|
||||
<u-tabbar-item :text="m.text" v-for="m in data" :key="m.id">
|
||||
<image class="_list_li_icon" slot="active-icon" :src="m.selectedIconPath"></image>
|
||||
<image class="_list_li_icon" slot="inactive-icon" :src="m.iconPath"></image>
|
||||
</u-tabbar-item>
|
||||
</u-tabbar> -->
|
||||
<view class="tab_bar_list">
|
||||
<view class="_bar_list_li" v-for="m in data" :key="m.id" @tap="toPathSwitch(m)">
|
||||
<view class="_list_li_icon">
|
||||
<image v-if="tabBarActive != m.id" :src="m.iconPath" class="is_image"></image>
|
||||
<image v-else :src="m.selectedIconPath" class="is_image"></image>
|
||||
</view>
|
||||
<view :class="['_list_li_name',tabBarActive != m.id ? '' : 'active']">{{m.text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab_bar_station"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
tabBarActive: {
|
||||
type: [String, Number],
|
||||
default: '1'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: this.$store.state.dynamicTabbar,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handelChange(e) {
|
||||
console.log(e, "uni.getStorageSync(uni.getStorageSync(")
|
||||
const data = this.data;
|
||||
uni.switchTab({
|
||||
url: data[e].pagePath,
|
||||
})
|
||||
},
|
||||
toPathSwitch(row) {
|
||||
const tabBarActive = this.tabBarActive;
|
||||
// if (tabBarActive != )
|
||||
uni.switchTab({
|
||||
url: row.pagePath
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
._list_li_icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.commTabbar_container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.tab_bar_station {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
}
|
||||
|
||||
.tab_bar_list {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
z-index: 998;
|
||||
background: #FFFFFF;
|
||||
border-top: 2rpx solid #CECCCA;
|
||||
// box-sizing: border-box;
|
||||
|
||||
._bar_list_li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
._list_li_icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
._list_li_name {
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
color: #84878A;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
._list_li_name.active {
|
||||
color: #446BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
33
custom-tab-bar/index.js
Normal file
@ -0,0 +1,33 @@
|
||||
Component({
|
||||
data: {
|
||||
selected: 0,
|
||||
color: "#7A7E83",
|
||||
selectedColor: "#3cc51f",
|
||||
list: [{
|
||||
pagePath: "/index/index",
|
||||
iconPath: "/image/icon_component.png",
|
||||
selectedIconPath: "/image/icon_component_HL.png",
|
||||
text: "组件"
|
||||
}, {
|
||||
pagePath: "/index/index2",
|
||||
iconPath: "/image/icon_API.png",
|
||||
selectedIconPath: "/image/icon_API_HL.png",
|
||||
text: "66666"
|
||||
}]
|
||||
},
|
||||
attached() {
|
||||
console.log(JSON.parse(uni.getStorageSync('dynamicTabbar') || '[]') || [])
|
||||
},
|
||||
methods: {
|
||||
switchTab(e) {
|
||||
const data = e.currentTarget.dataset
|
||||
const url = data.path
|
||||
wx.switchTab({
|
||||
url
|
||||
})
|
||||
this.setData({
|
||||
selected: data.index
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
3
custom-tab-bar/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
8
custom-tab-bar/index.wxml
Normal file
@ -0,0 +1,8 @@
|
||||
<!--miniprogram/custom-tab-bar/index.wxml-->
|
||||
<view class="tab-bar">
|
||||
<view class="tab-bar-border"></view>
|
||||
<view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
|
||||
<image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
|
||||
<view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
|
||||
</view>
|
||||
</view>
|
38
custom-tab-bar/index.wxss
Normal file
@ -0,0 +1,38 @@
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
background: white;
|
||||
display: flex;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tab-bar-border {
|
||||
background-color: rgba(0, 0, 0, 0.33);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.tab-bar-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-bar-item image {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.tab-bar-item view {
|
||||
font-size: 10px;
|
||||
}
|
35
main.js
@ -1,8 +1,29 @@
|
||||
import App from './App'
|
||||
import uView from '@/uni_modules/uview-ui'
|
||||
import store from './store/index'
|
||||
Vue.use(uView);
|
||||
import myStorage from '@/utils/myStorage.js'
|
||||
Vue.prototype.$myStorage = myStorage;
|
||||
Vue.prototype.$store = store;
|
||||
|
||||
Vue.mixin({
|
||||
methods: {
|
||||
setTabBarIndex(index) {
|
||||
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
|
||||
this.$mp.page.getTabBar().setData({
|
||||
selected: index
|
||||
})
|
||||
}
|
||||
},
|
||||
setTabBarList(tabBarData) {
|
||||
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
|
||||
this.$mp.page.getTabBar().setData({
|
||||
list: tabBarData
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// #ifndef VUE3
|
||||
@ -11,17 +32,19 @@ import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
import {
|
||||
createSSRApp
|
||||
} from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
@ -52,7 +52,9 @@
|
||||
"mp-weixin" : {
|
||||
"appid" : "wxef2b3b4fe3dd8231",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
"urlCheck" : false,
|
||||
"minified" : true,
|
||||
"postcss" : true
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
|
61
pages.json
@ -47,7 +47,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
// 排行榜
|
||||
"path": "pages/novel/ranking/ranking",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
// "disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 短剧业绩
|
||||
"path": "pages/shortPlay/performance/performance",
|
||||
@ -90,8 +102,7 @@
|
||||
],
|
||||
"subPackages": [{
|
||||
"root": "pagesA", // 分包根路径
|
||||
"pages": [
|
||||
{
|
||||
"pages": [{
|
||||
// 个人业绩
|
||||
"path": "novel/personalMoney/personalMoney",
|
||||
"style": {
|
||||
@ -129,7 +140,7 @@
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},{
|
||||
}, {
|
||||
// 书籍列表
|
||||
"path": "novel/booksList/booksList",
|
||||
"style": {
|
||||
@ -154,7 +165,7 @@
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},{
|
||||
}, {
|
||||
// 短剧个人业绩
|
||||
"path": "shortPlay/personalMoney/personalMoney",
|
||||
"style": {
|
||||
@ -234,5 +245,45 @@
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"tabBar": {
|
||||
"custom": true, //隐藏官方选项卡
|
||||
"color": "#000000",
|
||||
"selectedColor": "#000000",
|
||||
"backgroundColor": "#000000",
|
||||
"list": [{
|
||||
"pagePath": "pages/novel/performance/performance",
|
||||
"text": "业绩",
|
||||
"iconPath": "/static/logon/performance.png",
|
||||
"selectedIconPath": "/static/logon/performance_active.png"
|
||||
}, {
|
||||
"pagePath": "pages/novel/ranking/ranking",
|
||||
"text": "榜单",
|
||||
"iconPath": "/static/logon/ranking.png",
|
||||
"selectedIconPath": "/static/logon/ranking_active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/novel/bookManagement/bookManagement",
|
||||
"text": "书籍管理",
|
||||
"iconPath": "/static/logon/manage.png",
|
||||
"selectedIconPath": "/static/logon/manage_active.png"
|
||||
},
|
||||
// {
|
||||
// "pagePath": "pages/shortPlay/performance/performance",
|
||||
// "text": "业绩",
|
||||
// "iconPath": "",
|
||||
// "selectedIconPath": ""
|
||||
// },
|
||||
{
|
||||
"pagePath": "pages/shortPlay/my/my",
|
||||
"text": "我的",
|
||||
"iconPath": "/static/logon/my.png",
|
||||
"selectedIconPath": "/static/logon/my_active.png"
|
||||
}
|
||||
// {
|
||||
// "pagePath": "pages/shortPlay/shortManagement/shortManagement"
|
||||
// }
|
||||
]
|
||||
},
|
||||
"usingComponents": {},
|
||||
"uniIdRouter": {}
|
||||
}
|
@ -13,6 +13,13 @@
|
||||
return {
|
||||
firing_logo
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -7,8 +7,8 @@
|
||||
<view class="logon_con_box">
|
||||
<view class="con_box_tips">
|
||||
<view>您好,</view>
|
||||
<view v-if="switchLogonFlag">欢迎登陆秦九小说后台</view>
|
||||
<view v-else>欢迎登陆秦九短剧后台</view>
|
||||
<view v-if="switchLogonFlag == 1">欢迎登陆秦九小说后台</view>
|
||||
<view v-else-if="switchLogonFlag == 2">欢迎登陆秦九短剧后台</view>
|
||||
</view>
|
||||
<view class="con_box_logon_info">
|
||||
<view>
|
||||
@ -35,15 +35,15 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt50 save_password">
|
||||
<u-radio-group v-model="radioSavePassword" @change="handelSavePassword">
|
||||
<u-radio-group v-model="radioSavePassword" @change="handelSavePassword" activeColor="#3E67FA">
|
||||
<u-radio shape="square" label="记住密码" name="savePassword"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
|
||||
<view class="switch_logon">
|
||||
<view class="switch_logon_box" @tap="handelSwitchLogon">
|
||||
<text v-if="switchLogonFlag">切换小说后台</text>
|
||||
<text v-else>切换短剧后台</text>
|
||||
<text v-if="switchLogonFlag == 2">切换小说后台</text>
|
||||
<text v-else-if="switchLogonFlag == 1">切换短剧后台</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -57,6 +57,15 @@
|
||||
import logon_password from '@/static/logon/logon_password.png';
|
||||
import logon_password_hide from '@/static/logon/logon_password_hide.png';
|
||||
import logon_password_open from '@/static/logon/logon_password_open.png';
|
||||
// import performanceIcon from '@/static/logon/performance.png';
|
||||
// import manageIcon from '@/static/logon/manage.png';
|
||||
// import rankingIcon from '@/static/logon/ranking.png';
|
||||
// import myIcon from '@/static/logon/my.png';
|
||||
import {
|
||||
novelManage,
|
||||
shortPlayPerson,
|
||||
shortPlayManage
|
||||
} from '@/utils/tabBar.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -70,12 +79,12 @@
|
||||
usersNmae: '',
|
||||
password: '',
|
||||
lononButtomFlag: false,
|
||||
radioSavePassword: '',
|
||||
switchLogonFlag: false
|
||||
radioSavePassword: null,
|
||||
switchLogonFlag: 1
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// console.log()
|
||||
// 缓存账号
|
||||
const logonInfo = this.$myStorage.isGetStorageSync('logonInfo') || '{}';
|
||||
const isLogonInfo = JSON.parse(logonInfo)
|
||||
if (isLogonInfo) {
|
||||
@ -90,6 +99,7 @@
|
||||
},
|
||||
handelLogon() {
|
||||
const lononButtomFlag = this.lononButtomFlag;
|
||||
const switchLogonFlag = this.switchLogonFlag;
|
||||
const usersNmae = this.usersNmae;
|
||||
const password = this.password;
|
||||
const radioSavePassword = this.radioSavePassword;
|
||||
@ -102,14 +112,37 @@
|
||||
}
|
||||
this.$myStorage.isSetStorageSync('logonInfo', JSON.stringify(logonInfo))
|
||||
}
|
||||
// 小说
|
||||
if (switchLogonFlag == 1) {
|
||||
this.toPsthNovelFn();
|
||||
} else if (switchLogonFlag == 2) {
|
||||
// 短剧
|
||||
this.toPsthShortPlayFn();
|
||||
}
|
||||
}
|
||||
},
|
||||
toPsthNovelFn() {
|
||||
// getApp().globalData.commTabbarList = commTabbarList;
|
||||
this.$store.dispatch('changeTabbar', novelManage)
|
||||
this.$myStorage.isSetStorageSync('dynamicTabbar', JSON.stringify(novelManage))
|
||||
this.setTabBarList(novelManage)
|
||||
uni.reLaunch({
|
||||
url: `/pages/novel/performance/performance`
|
||||
})
|
||||
},
|
||||
toPsthShortPlayFn() {
|
||||
// this.$store.dispatch('changeTabbar', shortPlayManage)
|
||||
this.$store.dispatch('changeTabbar', shortPlayPerson)
|
||||
uni.reLaunch({
|
||||
url: `/pages/shortPlay/performance/performance`
|
||||
})
|
||||
},
|
||||
handelSwitchLogon() {
|
||||
this.switchLogonFlag = !this.switchLogonFlag;
|
||||
this.switchLogonFlag = this.switchLogonFlag == 1 ? 2 : 1;
|
||||
},
|
||||
handelSavePassword(event) {
|
||||
this.savePassword = event;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
usersNmae(newVal) {
|
||||
|
@ -12,8 +12,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="bookManagement_container">
|
||||
<scroll-view scroll-y="true" class="bookManagement_scroll_Y" @scrolltolower="lower">
|
||||
|
||||
<scroll-view scroll-y="true" class="bookManagement_scroll_Y">
|
||||
<view class="_scroll_Y_box">
|
||||
<view class="_book_detail_box">
|
||||
<view class="_book_detail_header">
|
||||
@ -23,7 +22,7 @@
|
||||
</view>
|
||||
<view class="_header_left_title ml10">书籍详细</view>
|
||||
</view>
|
||||
<view class="_header_right">
|
||||
<view class="_header_right" @tap="toBookDetail">
|
||||
<view>查看跟多</view>
|
||||
<u-icon name="arrow-right" size="24rpx" color="#9E9E9E"></u-icon>
|
||||
</view>
|
||||
@ -66,7 +65,7 @@
|
||||
</view>
|
||||
<view class="_header_left_title ml10">书籍列表</view>
|
||||
</view>
|
||||
<view class="_header_right">
|
||||
<view class="_header_right" @tap="toBooksList">
|
||||
<view>查看跟多</view>
|
||||
<u-icon name="arrow-right" size="24rpx" color="#9E9E9E"></u-icon>
|
||||
</view>
|
||||
@ -101,18 +100,33 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<CommTabbar :tabBarActive="3" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
import CommTabbar from '@/components/commTabbar/commTabbar'
|
||||
export default {
|
||||
components: {
|
||||
CommTabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toBookDetail() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesA/novel/bookDetail/bookDetail`
|
||||
})
|
||||
},
|
||||
toBooksList() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesA/novel/booksList/booksList`
|
||||
})
|
||||
},
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗?',
|
||||
|
@ -83,6 +83,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<CommTabbar :tabBarActive="1" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -94,6 +95,7 @@
|
||||
import PerSequence from '@/static/novel/performance/per_sequence.png';
|
||||
import PerBubble from '@/static/novel/performance/per_bubble.png';
|
||||
// import PerBubbleModal from '@/static/novel/performance/per_bubble_modal.png';
|
||||
import CommTabbar from '@/components/commTabbar/commTabbar'
|
||||
const tabsList = [{
|
||||
name: '运营业绩',
|
||||
id: '1'
|
||||
@ -109,6 +111,9 @@
|
||||
];
|
||||
const liuBubbleMenu = ['今日数据', '整月数据', '今年数据']
|
||||
export default {
|
||||
components: {
|
||||
CommTabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
@ -123,9 +128,12 @@
|
||||
PerBubbleOpen: false,
|
||||
PerBubbleType: 2,
|
||||
tabsItemId: '1',
|
||||
guideFlag: false
|
||||
guideFlag: false,
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// uni.hideTabBar({})
|
||||
},
|
||||
onShow() {
|
||||
const guideFlag = this.$myStorage.isGetStorageSync('guideFlag');
|
||||
this.guideFlag = !guideFlag;
|
||||
|
494
pages/novel/ranking/ranking.vue
Normal file
@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<view class="_ranking_c">
|
||||
<view class="_ranking_c_header">
|
||||
<u-navbar bgColor="transparent" :placeholder="true">
|
||||
<view class="u_nav_slot" slot="left">
|
||||
<view class="u_n_slot_user_icon">
|
||||
<image src="/static/novel/performance/per_head_sculpture.png" class="is_image"></image>
|
||||
</view>
|
||||
<view class="u_n_slot_date">
|
||||
<uni-datetime-picker type="daterange" @change="datetimePickerChange" :clear-icon="false" />
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="_ranking_c_h_bg">
|
||||
<image src="/static/novel/ranking/header_bg.png" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_ranking_c_body">
|
||||
<view class="_ranking_c_b_container">
|
||||
<view class="_ranking_c_b_cbox">
|
||||
<view class="_ranking_c_b_c_mm">
|
||||
<view class="_b_c_mm_header">
|
||||
<u-tabs :list="tabsList" :scrollable="false" :activeStyle="{
|
||||
color:'#446BFA',
|
||||
fontSize:'36rpx',
|
||||
fontWeight:700,
|
||||
transform: 'scale(1.05)'
|
||||
}" :inactiveStyle="{
|
||||
color:'#393966',
|
||||
fontSize:'36rpx',
|
||||
transform: 'scale(1)'
|
||||
}" :itemStyle="{
|
||||
height:'100rpx'
|
||||
}" lineWidth="58rpx" lineColor="#446BFA"></u-tabs>
|
||||
</view>
|
||||
<view class="_c_mm_jj_container">
|
||||
<view class="_jj_co_box">
|
||||
<view class="_j_c_b_container">
|
||||
<view class="_c_b_c_image">
|
||||
<image src="/static/novel/ranking/ranking_user_bg.png" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_c_b_c_info">
|
||||
<view class="_c_info_left">
|
||||
<view class="_c_i_left_tips">
|
||||
<view>我的</view>
|
||||
<view>排行</view>
|
||||
</view>
|
||||
<view class="_c_i_left_user_image">
|
||||
<image src="/static/novel/performance/per_head_sculpture.png"
|
||||
class="is_image"></image>
|
||||
</view>
|
||||
<view class="_c_i_left_ranking">
|
||||
NO·5
|
||||
</view>
|
||||
<view class="_c_i_left_user_name">吴雨晴</view>
|
||||
</view>
|
||||
<view class="_c_info_right">
|
||||
<text>¥35645.14</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_c_mm_tabel">
|
||||
<view class="mm_tabel_header">
|
||||
<view class="mm_t_h_box">
|
||||
<view class="mm_t_h_li ranking">排名</view>
|
||||
<view class="mm_t_h_li users">员工</view>
|
||||
<view class="mm_t_h_li performance">业绩</view>
|
||||
<view style="width: 40rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mm_tabel_body">
|
||||
<scroll-view scroll-y="true" class="mm_scroll_Y">
|
||||
<view class="scroll_Y_container">
|
||||
<uni-collapse accordion>
|
||||
<uni-collapse-item :border="false" :show-arrow="true" v-for="m in 14"
|
||||
:key="m">
|
||||
<view slot="title" class="_y_c_solt_title">
|
||||
<view class="c_s_title_ranking">
|
||||
<view class="_s_t_r_image" v-if="m < 3">
|
||||
<image v-if="m === 0" class="is_image"
|
||||
src="/static/novel/personalMoney/ranking_one.png">
|
||||
</image>
|
||||
<image v-if="m === 1" class="is_image"
|
||||
src="/static/novel/personalMoney/ranking_two.png">
|
||||
</image>
|
||||
<image v-if="m === 2" class="is_image"
|
||||
src="/static/novel/personalMoney/ranking_three.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="_s_t_r_idx" v-else>
|
||||
{{m + 1}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="c_s_title_users">
|
||||
<view class="_s_t_u_image">
|
||||
<image class="is_image"
|
||||
src="/static/novel/performance/per_head_sculpture.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="_s_t_u_name">
|
||||
化成雨
|
||||
</view>
|
||||
</view>
|
||||
<view class="c_s_title_performance">
|
||||
<text>¥20140.05</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="y_collapse_item_content">
|
||||
<view class="_i_c_li">
|
||||
<u-icon name="arrow-up-fill" color="#F23D3D"
|
||||
size="24rpx"></u-icon>
|
||||
<text class="ml10">据上一名差</text>
|
||||
<text class="ml10">356468.546</text>
|
||||
</view>
|
||||
<view class="_i_c_li">
|
||||
<u-icon name="arrow-down-fill" color="#446BFA"
|
||||
size="24rpx"></u-icon>
|
||||
<text class="ml10">据上一名差</text>
|
||||
<text class="ml10">356468.546</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<CommTabbar :tabBarActive="2" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommTabbar from '@/components/commTabbar/commTabbar'
|
||||
export default {
|
||||
components: {
|
||||
CommTabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabsList: [{
|
||||
name: '运营榜单',
|
||||
id: '1'
|
||||
},
|
||||
{
|
||||
name: '作者榜单',
|
||||
id: '1'
|
||||
},
|
||||
{
|
||||
name: '投放榜单',
|
||||
id: '1'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
datetimePickerChange() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F3F4F6;
|
||||
}
|
||||
|
||||
._ranking_c {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
._ranking_c_header {
|
||||
|
||||
.u_nav_slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.u_n_slot_user_icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.u_n_slot_date {
|
||||
width: 360rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
.uni-date__x-input {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.range-separator {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-date-x {
|
||||
background-color: transparent;
|
||||
|
||||
.uniui-calendar {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._ranking_c_h_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 462rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._ranking_c_body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
._ranking_c_b_container {
|
||||
position: absolute;
|
||||
top: 194rpx;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
._ranking_c_b_cbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
._ranking_c_b_c_mm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, rgba(229, 239, 255, 0.45) 0%, #FFFFFF 10%);
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
border-top: 2rpx solid #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
._b_c_mm_header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
._c_mm_jj_container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
._jj_co_box {
|
||||
width: 100%;
|
||||
height: 124rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 24rpx;
|
||||
|
||||
._j_c_b_container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
._c_b_c_image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
._c_b_c_info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
._c_info_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._c_i_left_tips {
|
||||
font-size: 24rpx;
|
||||
color: #181819;
|
||||
}
|
||||
|
||||
._c_i_left_user_image {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
._c_i_left_ranking {
|
||||
font-size: 32rpx;
|
||||
color: #446BFA;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
._c_i_left_user_name {
|
||||
font-size: 32rpx;
|
||||
color: #181819;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
._c_info_right {
|
||||
font-size: 32rpx;
|
||||
color: #446BFA;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._c_mm_tabel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
.mm_tabel_header {
|
||||
padding: 0 24rpx;
|
||||
|
||||
.mm_t_h_box {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mm_t_h_li {
|
||||
font-size: 30rpx;
|
||||
color: #727375;
|
||||
|
||||
&.ranking {
|
||||
width: 140rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.users {
|
||||
width: 240rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.performance {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mm_tabel_body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.mm_scroll_Y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.scroll_Y_container {
|
||||
padding: 0 24rpx 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
|
||||
.uni-collapse-item {
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
|
||||
.uni-collapse-item__title {
|
||||
height: 100rpx;
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
box-sizing: border-box;
|
||||
|
||||
.uni-collapse-item__title-arrow {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_c_solt_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.c_s_title_ranking {
|
||||
width: 140rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
._s_t_r_image {
|
||||
width: 42rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
._s_t_r_idx {
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.c_s_title_users {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 240rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
._s_t_u_image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
._s_t_u_name {
|
||||
margin-left: 10rpx;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.c_s_title_performance {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
text-align: end;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #181819;
|
||||
}
|
||||
}
|
||||
|
||||
.y_collapse_item_content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 82rpx;
|
||||
background-color: #F5F8FA;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
|
||||
._i_c_li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #696A6B;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
@ -99,6 +99,7 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<CommTabbar :tabBarActive="7" />
|
||||
</view>
|
||||
<u-transition :show="welfareShow">
|
||||
<view class="welfare_transition">
|
||||
@ -122,7 +123,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommTabbar from '@/components/commTabbar/commTabbar'
|
||||
export default {
|
||||
components: {
|
||||
CommTabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
welfareShow: false
|
||||
|
@ -22,18 +22,6 @@
|
||||
<u-input placeholder="请输入员工姓名查找业绩" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 24px;color: #C0C4CC"></u-input>
|
||||
</view>
|
||||
<!-- <view class="con_body_tabs">
|
||||
<u-tabs :list="tabsList" :scrollable="false" lineWidth="66rpx" lineHeight="66rpx"
|
||||
:lineColor="`url(${PerBodyTabs}) 100% 100%`" :activeStyle="{
|
||||
color: '#FFFFFF',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.2)'
|
||||
}" :inactiveStyle="{
|
||||
color: '#FFFFFF',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle="padding:0; font-size:40rpx; height: 128rpx;" @change="handelTabsFn">
|
||||
</u-tabs>
|
||||
</view> -->
|
||||
<view class="con_body_tabel_box">
|
||||
<view class="tabel_item_row">
|
||||
<view class="tabel_box_header"></view>
|
||||
@ -83,6 +71,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<CommTabbar :tabBarActive="5" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -94,6 +83,7 @@
|
||||
import PerSequence from '@/static/novel/performance/per_sequence.png';
|
||||
import PerBubble from '@/static/novel/performance/per_bubble.png';
|
||||
// import PerBubbleModal from '@/static/novel/performance/per_bubble_modal.png';
|
||||
import CommTabbar from '@/components/commTabbar/commTabbar'
|
||||
const tabsList = [{
|
||||
name: '运营业绩',
|
||||
id: '1'
|
||||
@ -109,6 +99,9 @@
|
||||
];
|
||||
const liuBubbleMenu = ['今日数据', '整月数据', '今年数据']
|
||||
export default {
|
||||
components: {
|
||||
CommTabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
@ -126,6 +119,9 @@
|
||||
guideFlag: false
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// uni.hideTabBar({})
|
||||
},
|
||||
onShow() {
|
||||
const guideFlag = this.$myStorage.isGetStorageSync('guideFlag');
|
||||
this.guideFlag = !guideFlag;
|
||||
@ -139,9 +135,9 @@
|
||||
},
|
||||
toHandelPerformance() {
|
||||
const tabsItemId = this.tabsItemId;
|
||||
let path = `/pages/novel/personalMoney/personalMoney`;
|
||||
let path = `/pagesA/shortPlay/personalMoney/personalMoney`;
|
||||
if (tabsItemId == '1') {
|
||||
path = `/pages/novel/copywritingPersonal/copywritingPersonal`
|
||||
path = `/pagesA/shortPlay/personalMoney/personalMoney`
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
|
@ -13,7 +13,6 @@
|
||||
</view>
|
||||
<view class="bookManagement_container">
|
||||
<scroll-view scroll-y="true" class="bookManagement_scroll_Y" @scrolltolower="scrolltolower">
|
||||
|
||||
<view class="_scroll_Y_box">
|
||||
<view class="_book_detail_box">
|
||||
<view class="_book_detail_header">
|
||||
@ -23,7 +22,7 @@
|
||||
</view>
|
||||
<view class="_header_left_title ml10">影视分成</view>
|
||||
</view>
|
||||
<view class="_header_right">
|
||||
<view class="_header_right" @tap="toMoviesDivideInto">
|
||||
<view>查看跟多</view>
|
||||
<u-icon name="arrow-right" size="24rpx" color="#9E9E9E"></u-icon>
|
||||
</view>
|
||||
@ -55,7 +54,7 @@
|
||||
</view>
|
||||
<view class="_header_left_title ml10">短剧详细</view>
|
||||
</view>
|
||||
<view class="_header_right">
|
||||
<view class="_header_right" @tap="toShortPlayDetail">
|
||||
<view>查看跟多</view>
|
||||
<u-icon name="arrow-right" size="24rpx" color="#9E9E9E"></u-icon>
|
||||
</view>
|
||||
@ -86,12 +85,17 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<CommTabbar :tabBarActive="8" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
import CommTabbar from '@/components/commTabbar/commTabbar'
|
||||
export default {
|
||||
components: {
|
||||
CommTabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
@ -100,6 +104,16 @@
|
||||
methods: {
|
||||
scrolltolower() {
|
||||
|
||||
},
|
||||
toShortPlayDetail() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesA/shortPlay/shortPlayDetail/shortPlayDetail`
|
||||
})
|
||||
},
|
||||
toMoviesDivideInto() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesA/shortPlay/moviesDivideInto/moviesDivideInto`
|
||||
})
|
||||
},
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
|
BIN
static/logon/manage.png
Normal file
After Width: | Height: | Size: 338 B |
BIN
static/logon/manage_active.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
static/logon/my.png
Normal file
After Width: | Height: | Size: 637 B |
BIN
static/logon/my_active.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
static/logon/performance.png
Normal file
After Width: | Height: | Size: 981 B |
BIN
static/logon/performance_active.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
static/logon/ranking.png
Normal file
After Width: | Height: | Size: 498 B |
BIN
static/logon/ranking_active.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 46 KiB |
BIN
static/novel/personalMoney/ranking_one.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
BIN
static/novel/personalMoney/ranking_three.png
Normal file
After Width: | Height: | Size: 4.5 KiB |
BIN
static/novel/personalMoney/ranking_two.png
Normal file
After Width: | Height: | Size: 4.2 KiB |
BIN
static/novel/ranking/header_bg.png
Normal file
After Width: | Height: | Size: 281 KiB |
BIN
static/novel/ranking/ranking_user_bg.png
Normal file
After Width: | Height: | Size: 32 KiB |
24
store/index.js
Normal file
@ -0,0 +1,24 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
Vue.use(Vuex)
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
dynamicTabbar: JSON.parse(uni.getStorageSync('dynamicTabbar') || '[]') || [], // 动态tabbar
|
||||
},
|
||||
getters: {
|
||||
|
||||
},
|
||||
actions: {
|
||||
changeTabbar({commit}, payload) {
|
||||
commit('updateTabbar', payload)
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
updateTabbar(state, payload) {
|
||||
state.dynamicTabbar = payload
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default store;
|
12
uni_modules/liu-pageTab-bar/changelog.md
Normal file
@ -0,0 +1,12 @@
|
||||
## 1.0.5(2023-06-12)
|
||||
增加预览二维码
|
||||
## 1.0.4(2023-04-14)
|
||||
增加示例
|
||||
## 1.0.3(2023-04-14)
|
||||
增加示例
|
||||
## 1.0.2(2023-03-30)
|
||||
修改间隔比例,还原小程序自带样式
|
||||
## 1.0.1(2023-03-18)
|
||||
初始发布
|
||||
## 1.0.0(2023-03-18)
|
||||
初始发布
|
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view class="tabBar" :style="{height:isIos?'140rpx':'98rpx'}">
|
||||
<view class="tabBar_list" :style="{paddingBottom:isIos?'40rpx':''}">
|
||||
<view v-for="(item,index) in tabList" :key="item.id" :class="item.bigType ? 'tabBar_item2' : 'tabBar_item'"
|
||||
@click="selectTabbar(item,index)">
|
||||
<template v-if="item.icon && item.activeIcon">
|
||||
<image v-if="index == showIndex" :src="item.activeIcon"></image>
|
||||
<image v-else :src="item.icon"></image>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="emptyImg"></view>
|
||||
</template>
|
||||
<view class="tabBar_name" :style="{color: index == showIndex ? activeColor : color}">{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// tabbar数据源
|
||||
tabList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 初始选中tabbar索引
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 默认文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#999'
|
||||
},
|
||||
// 选中文字颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#3A76EE'
|
||||
},
|
||||
//是否需要设置navigationBarTitleText文字
|
||||
isNeedSetNavTitle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isIos: false,
|
||||
showIndex: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
index: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(inx) {
|
||||
this.showIndex = inx
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.isNeedSetNavTitle) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.tabList[this.showIndex]?.name
|
||||
})
|
||||
}
|
||||
// 判断市场常见的几种刘海屏机型
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
let modelmes = res.model
|
||||
if (modelmes.indexOf('iPhone') >= 0) this.isIos = true
|
||||
else this.isIos = false
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
selectTabbar(item, index) {
|
||||
if (this.showIndex != index) {
|
||||
this.showIndex = index
|
||||
this.$emit('change', item)
|
||||
}
|
||||
if (this.isNeedSetNavTitle) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.tabList[this.showIndex]?.name
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabBar {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
padding: 8rpx 0;
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.tabBar_list {
|
||||
width: 98%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tabBar_item {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.tabBar_item image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin-bottom: 2rpx;
|
||||
}
|
||||
|
||||
.tabBar_item2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: -62rpx;
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.tabBar_item2 image {
|
||||
width: 100rpx;
|
||||
height: 118rpx;
|
||||
}
|
||||
|
||||
.emptyImg {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin-bottom: 2rpx;
|
||||
background: dodgerblue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tabBar_name {
|
||||
text-align: center;
|
||||
line-height: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
</style>
|
6
uni_modules/liu-pageTab-bar/license.md
Normal file
@ -0,0 +1,6 @@
|
||||
### 1、本插件可免费下载使用;
|
||||
### 2、未经许可,严禁复制本插件派生同类插件上传插件市场;
|
||||
### 3、未经许可,严禁在插件市场恶意复制抄袭本插件进行违规获利;
|
||||
### 4、对本软件的任何使用都必须遵守这些条款,违反这些条款的个人或组织将面临法律追究。
|
||||
|
||||
|
85
uni_modules/liu-pageTab-bar/package.json
Normal file
@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "liu-pageTab-bar",
|
||||
"displayName": "自定义tabbar、凸起导航、底部选项卡",
|
||||
"version": "1.0.5",
|
||||
"description": "简单好用的小程序自定义tabBar,脱离小程序限制(tabbar 2 - 5个,个性图标展示等)",
|
||||
"keywords": [
|
||||
"tabbar",
|
||||
"自定义tabbar",
|
||||
"bar",
|
||||
"底部选项卡",
|
||||
"选项卡"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.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": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
68
uni_modules/liu-pageTab-bar/readme.md
Normal file
@ -0,0 +1,68 @@
|
||||
### liu-pageTab-bar适用于uni-app项目的页面tabBar自定义组件
|
||||
### 本组件目前兼容微信小程序、H5
|
||||
### 本组件支持小程序tabBar自定义,脱离小程序限制(tabbar 2 - 5个,个性图标展示等)
|
||||
# --- 扫码预览、关注我们 ---
|
||||
|
||||
## 扫码关注公众号,查看更多插件信息,预览插件效果!
|
||||
|
||||

|
||||
|
||||
### 使用示例
|
||||
```
|
||||
<template>
|
||||
<view class="page-main">
|
||||
<liu-pageTab-bar :tabList="tabList" :activeColor="'#3A76EE'" @change="change"></liu-pageTab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabList: [{
|
||||
id: 1,
|
||||
name: '首页',
|
||||
icon: '/static/tabBar/1.png',
|
||||
activeIcon: '/static/tabBar/11.png'
|
||||
}, {
|
||||
id: 2,
|
||||
name: '某莫某某',
|
||||
icon: '/static/tabBar/5.png',
|
||||
activeIcon: '/static/tabBar/55.png',
|
||||
bigType: true //是否凸起显示
|
||||
}, {
|
||||
id: 3,
|
||||
name: '我的',
|
||||
icon: '/static/tabBar/4.png',
|
||||
activeIcon: '/static/tabBar/44.png'
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//切换tabbar
|
||||
change(e) {
|
||||
console.log('当前点击的tabbar信息:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 属性说明
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | -------------------- | ---------------|
|
||||
| tabList | Array | [] | tabbar数据源
|
||||
| index | Number | 0 | 初始选中tabbar索引
|
||||
| color | String | #999 | 默认文字颜色
|
||||
| activeColor | String | #3A76EE | 选中文字颜色
|
||||
| isNeedSetNavTitle | Boolean | true | 是否需要设置navigationBarTitleText文字
|
||||
| @change | Function | | 点击tabbar回调事件
|
||||
|
||||
|
||||
|
36
uni_modules/uni-collapse/changelog.md
Normal file
@ -0,0 +1,36 @@
|
||||
## 1.4.3(2022-01-25)
|
||||
- 修复 初始化的时候 ,open 属性失效的bug
|
||||
## 1.4.2(2022-01-21)
|
||||
- 修复 微信小程序resize后组件收起的bug
|
||||
## 1.4.1(2021-11-22)
|
||||
- 修复 vue3中个别scss变量无法找到的问题
|
||||
## 1.4.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-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse)
|
||||
## 1.3.3(2021-08-17)
|
||||
- 优化 show-arrow 属性默认为true
|
||||
## 1.3.2(2021-08-17)
|
||||
- 新增 show-arrow 属性,控制是否显示右侧箭头
|
||||
## 1.3.1(2021-07-30)
|
||||
- 优化 vue3下小程序事件警告的问题
|
||||
## 1.3.0(2021-07-30)
|
||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.2.2(2021-07-21)
|
||||
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
|
||||
## 1.2.1(2021-07-21)
|
||||
- 优化 组件示例
|
||||
## 1.2.0(2021-07-21)
|
||||
- 新增 组件折叠动画
|
||||
- 新增 value\v-model 属性 ,动态修改面板折叠状态
|
||||
- 新增 title 插槽 ,可定义面板标题
|
||||
- 新增 border 属性 ,显示隐藏面板内容分隔线
|
||||
- 新增 title-border 属性 ,显示隐藏面板标题分隔线
|
||||
- 修复 resize 方法失效的Bug
|
||||
- 修复 change 事件返回参数不正确的Bug
|
||||
- 优化 H5、App 平台自动更具内容更新高度,无需调用 reszie() 方法
|
||||
## 1.1.7(2021-05-12)
|
||||
- 新增 组件示例地址
|
||||
## 1.1.6(2021-02-05)
|
||||
- 优化 组件引用关系,通过uni_modules引用组件
|
||||
## 1.1.5(2021-02-05)
|
||||
- 调整为uni_modules目录规范
|
@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<view class="uni-collapse-item">
|
||||
<!-- onClick(!isOpen) -->
|
||||
<view @click="onClick(!isOpen)" class="uni-collapse-item__title"
|
||||
:class="{'is-open':isOpen &&titleBorder === 'auto' ,'uni-collapse-item-border':titleBorder !== 'none'}">
|
||||
<view class="uni-collapse-item__title-wrap">
|
||||
<slot name="title">
|
||||
<view class="uni-collapse-item__title-box" :class="{'is-disabled':disabled}">
|
||||
<image v-if="thumb" :src="thumb" class="uni-collapse-item__title-img" />
|
||||
<text class="uni-collapse-item__title-text">{{ title }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-if="showArrow"
|
||||
:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
|
||||
class="uni-collapse-item__title-arrow">
|
||||
<uni-icons :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-collapse-item__wrap" :class="{'is--transition':showAnimation}"
|
||||
:style="{height: (isOpen?height:0) +'px'}">
|
||||
<view :id="elId" ref="collapse--hook" class="uni-collapse-item__wrap-content"
|
||||
:class="{open:isheight,'uni-collapse-item--border':border&&isOpen}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = weex.requireModule('dom')
|
||||
// #endif
|
||||
/**
|
||||
* CollapseItem 折叠面板子组件
|
||||
* @description 折叠面板子组件
|
||||
* @property {String} title 标题文字
|
||||
* @property {String} thumb 标题左侧缩略图
|
||||
* @property {String} name 唯一标志符
|
||||
* @property {Boolean} open = [true|false] 是否展开组件
|
||||
* @property {Boolean} titleBorder = [true|false] 是否显示标题分隔线
|
||||
* @property {Boolean} border = [true|false] 是否显示分隔线
|
||||
* @property {Boolean} disabled = [true|false] 是否展开面板
|
||||
* @property {Boolean} showAnimation = [true|false] 开启动画
|
||||
* @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
|
||||
*/
|
||||
export default {
|
||||
name: 'uniCollapseItem',
|
||||
props: {
|
||||
// 列表标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
// 是否显示动画,app 端默认不开启动画,卡顿严重
|
||||
showAnimation: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
// 是否显示动画
|
||||
showAnimation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #endif
|
||||
// 是否展开
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 缩略图
|
||||
thumb: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标题分隔线显示类型
|
||||
titleBorder: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
|
||||
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||
return {
|
||||
isOpen: false,
|
||||
isheight: null,
|
||||
height: 0,
|
||||
elId,
|
||||
nameSync: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
open(val) {
|
||||
this.isOpen = val
|
||||
this.onClick(val, 'init')
|
||||
}
|
||||
},
|
||||
updated(e) {
|
||||
this.$nextTick(() => {
|
||||
this.init(true)
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.collapse = this.getCollapse()
|
||||
this.oldHeight = 0
|
||||
this.onClick(this.open, 'init')
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
if (this.__isUnmounted) return
|
||||
this.uninstall()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.__isUnmounted = true
|
||||
this.uninstall()
|
||||
},
|
||||
// #endif
|
||||
mounted() {
|
||||
if (!this.collapse) return
|
||||
if (this.name !== '') {
|
||||
this.nameSync = this.name
|
||||
} else {
|
||||
this.nameSync = this.collapse.childrens.length + ''
|
||||
}
|
||||
if (this.collapse.names.indexOf(this.nameSync) === -1) {
|
||||
this.collapse.names.push(this.nameSync)
|
||||
} else {
|
||||
console.warn(`name 值 ${this.nameSync} 重复`);
|
||||
}
|
||||
if (this.collapse.childrens.indexOf(this) === -1) {
|
||||
this.collapse.childrens.push(this)
|
||||
}
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(type) {
|
||||
// #ifndef APP-NVUE
|
||||
this.getCollapseHeight(type)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.getNvueHwight(type)
|
||||
// #endif
|
||||
},
|
||||
uninstall() {
|
||||
if (this.collapse) {
|
||||
this.collapse.childrens.forEach((item, index) => {
|
||||
if (item === this) {
|
||||
this.collapse.childrens.splice(index, 1)
|
||||
}
|
||||
})
|
||||
this.collapse.names.forEach((item, index) => {
|
||||
if (item === this.nameSync) {
|
||||
this.collapse.names.splice(index, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onClick(isOpen, type) {
|
||||
if (this.disabled) return
|
||||
this.isOpen = isOpen
|
||||
if (this.isOpen && this.collapse) {
|
||||
this.collapse.setAccordion(this)
|
||||
}
|
||||
if (type !== 'init') {
|
||||
this.collapse.onChange(isOpen, this)
|
||||
}
|
||||
},
|
||||
getCollapseHeight(type, index = 0) {
|
||||
const views = uni.createSelectorQuery().in(this)
|
||||
views
|
||||
.select(`#${this.elId}`)
|
||||
.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
// TODO 百度中可能获取不到节点信息 ,需要循环获取
|
||||
if (index >= 10) return
|
||||
if (!data) {
|
||||
index++
|
||||
this.getCollapseHeight(false, index)
|
||||
return
|
||||
}
|
||||
// #ifdef APP-NVUE
|
||||
this.height = data.height + 1
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.height = data.height
|
||||
// #endif
|
||||
this.isheight = true
|
||||
if (type) return
|
||||
this.onClick(this.isOpen, 'init')
|
||||
})
|
||||
.exec()
|
||||
},
|
||||
getNvueHwight(type) {
|
||||
const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
|
||||
if (option && option.result && option.size) {
|
||||
// #ifdef APP-NVUE
|
||||
this.height = option.size.height + 1
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.height = option.size.height
|
||||
// #endif
|
||||
this.isheight = true
|
||||
if (type) return
|
||||
this.onClick(this.open, 'init')
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getCollapse(name = 'uniCollapse') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false;
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-collapse-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
|
||||
/* #endif */
|
||||
&__title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
transition: border-bottom-color .3s;
|
||||
|
||||
// transition-property: border-bottom-color;
|
||||
// transition-duration: 5s;
|
||||
&-wrap {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
|
||||
&-box {
|
||||
padding: 0 15px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background-color: #fff;
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
/* #endif */
|
||||
&.is-disabled {
|
||||
.uni-collapse-item__title-text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.uni-collapse-item-border {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
&-img {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
color: inherit;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
/* #endif */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
transform: rotate(0deg);
|
||||
|
||||
&-active {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&__wrap {
|
||||
/* #ifndef APP-NVUE */
|
||||
will-change: height;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 0;
|
||||
|
||||
&.is--transition {
|
||||
// transition: all 0.3s;
|
||||
transition-property: height, border-bottom-width;
|
||||
transition-duration: 0.3s;
|
||||
/* #ifndef APP-NVUE */
|
||||
will-change: height;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
// transition: height 0.3s;
|
||||
border-bottom-color: transparent;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 0;
|
||||
|
||||
&.uni-collapse-item--border {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: red;
|
||||
border-bottom-color: #ebeef5;
|
||||
}
|
||||
|
||||
&.open {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--animation {
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="uni-collapse">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* Collapse 折叠面板
|
||||
* @description 展示可以折叠 / 展开的内容区域
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=23
|
||||
* @property {String|Array} value 当前激活面板改变时触发(如果是手风琴模式,参数类型为string,否则为array)
|
||||
* @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
|
||||
* @event {Function} change 切换面板时触发,如果是手风琴模式,返回类型为string,否则为array
|
||||
*/
|
||||
export default {
|
||||
name: 'uniCollapse',
|
||||
emits:['change','activeItem','input','update:modelValue'],
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Array],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Array],
|
||||
default: ''
|
||||
},
|
||||
accordion: {
|
||||
// 是否开启手风琴效果
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
// TODO 兼容 vue2 和 vue3
|
||||
dataValue() {
|
||||
let value = (typeof this.value === 'string' && this.value === '') ||
|
||||
(Array.isArray(this.value) && this.value.length === 0)
|
||||
let modelValue = (typeof this.modelValue === 'string' && this.modelValue === '') ||
|
||||
(Array.isArray(this.modelValue) && this.modelValue.length === 0)
|
||||
if (value) {
|
||||
return this.modelValue
|
||||
}
|
||||
if (modelValue) {
|
||||
return this.value
|
||||
}
|
||||
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataValue(val) {
|
||||
this.setOpen(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.childrens = []
|
||||
this.names = []
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
this.setOpen(this.dataValue)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
setOpen(val) {
|
||||
let str = typeof val === 'string'
|
||||
let arr = Array.isArray(val)
|
||||
this.childrens.forEach((vm, index) => {
|
||||
if (str) {
|
||||
if (val === vm.nameSync) {
|
||||
if (!this.accordion) {
|
||||
console.warn('accordion 属性为 false ,v-model 类型应该为 array')
|
||||
return
|
||||
}
|
||||
vm.isOpen = true
|
||||
}
|
||||
}
|
||||
if (arr) {
|
||||
val.forEach(v => {
|
||||
if (v === vm.nameSync) {
|
||||
if (this.accordion) {
|
||||
console.warn('accordion 属性为 true ,v-model 类型应该为 string')
|
||||
return
|
||||
}
|
||||
vm.isOpen = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.emit(val)
|
||||
},
|
||||
setAccordion(self) {
|
||||
if (!this.accordion) return
|
||||
this.childrens.forEach((vm, index) => {
|
||||
if (self !== vm) {
|
||||
vm.isOpen = false
|
||||
}
|
||||
})
|
||||
},
|
||||
resize() {
|
||||
this.childrens.forEach((vm, index) => {
|
||||
// #ifndef APP-NVUE
|
||||
vm.getCollapseHeight()
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
vm.getNvueHwight()
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
onChange(isOpen, self) {
|
||||
let activeItem = []
|
||||
|
||||
if (this.accordion) {
|
||||
activeItem = isOpen ? self.nameSync : ''
|
||||
} else {
|
||||
this.childrens.forEach((vm, index) => {
|
||||
if (vm.isOpen) {
|
||||
activeItem.push(vm.nameSync)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$emit('change', activeItem)
|
||||
this.emit(activeItem)
|
||||
},
|
||||
emit(val){
|
||||
this.$emit('input', val)
|
||||
this.$emit('update:modelValue', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-collapse {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
89
uni_modules/uni-collapse/package.json
Normal file
@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uni-collapse",
|
||||
"displayName": "uni-collapse 折叠面板",
|
||||
"version": "1.4.3",
|
||||
"description": "Collapse 组件,可以折叠 / 展开的内容区域。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"折叠",
|
||||
"折叠面板",
|
||||
"手风琴"
|
||||
],
|
||||
"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": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
12
uni_modules/uni-collapse/readme.md
Normal file
@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
## Collapse 折叠面板
|
||||
> **组件名:uni-collapse**
|
||||
> 代码块: `uCollapse`
|
||||
> 关联组件:`uni-collapse-item`、`uni-icons`。
|
||||
|
||||
|
||||
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用,折叠不重要的内容,显示重要内容。点击可以展开折叠部分。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|