完成我的

This commit is contained in:
lipnggao 2023-10-12 08:45:00 +08:00
parent 30615b8833
commit d03a4cc4e7
222 changed files with 7492 additions and 2076 deletions

View File

@ -61,9 +61,8 @@
.ml10 {
margin-left: 10rpx;
}
.mt24 {
margin-top: 24rpx;
}
</style>

View 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
View 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
})
}
}
})

View File

@ -0,0 +1,3 @@
{
"component": true
}

View 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
View 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
View File

@ -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

View File

@ -52,7 +52,9 @@
"mp-weixin" : {
"appid" : "wxef2b3b4fe3dd8231",
"setting" : {
"urlCheck" : false
"urlCheck" : false,
"minified" : true,
"postcss" : true
},
"usingComponents" : true
},

View File

@ -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": {}
}

View File

@ -13,6 +13,13 @@
return {
firing_logo
}
},
onShow() {
setTimeout(() => {
uni.navigateTo({
url: `/pages/logon/logon`
})
}, 500)
}
}
</script>

View File

@ -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) {

View File

@ -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: '确定要退出账号吗?',

View File

@ -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;

View 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>

View File

@ -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

View File

@ -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

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/logon/my.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 637 B

BIN
static/logon/my_active.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 981 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/logon/ranking.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 498 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 281 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

24
store/index.js Normal file
View 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;

View File

@ -0,0 +1,12 @@
## 1.0.52023-06-12
增加预览二维码
## 1.0.42023-04-14
增加示例
## 1.0.32023-04-14
增加示例
## 1.0.22023-03-30
修改间隔比例,还原小程序自带样式
## 1.0.12023-03-18
初始发布
## 1.0.02023-03-18
初始发布

View File

@ -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>

View File

@ -0,0 +1,6 @@
### 1、本插件可免费下载使用
### 2、未经许可严禁复制本插件派生同类插件上传插件市场
### 3、未经许可严禁在插件市场恶意复制抄袭本插件进行违规获利;
### 4、对本软件的任何使用都必须遵守这些条款违反这些条款的个人或组织将面临法律追究。

View 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"
}
}
}
}
}

View File

@ -0,0 +1,68 @@
### liu-pageTab-bar适用于uni-app项目的页面tabBar自定义组件
### 本组件目前兼容微信小程序、H5
### 本组件支持小程序tabBar自定义脱离小程序限制tabbar 2 - 5个,个性图标展示等)
# --- 扫码预览、关注我们 ---
## 扫码关注公众号,查看更多插件信息,预览插件效果!
![](https://uni.ckapi.pro/uniapp/publicize.png)
### 使用示例
```
<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回调事件

View File

@ -0,0 +1,36 @@
## 1.4.32022-01-25
- 修复 初始化的时候 open 属性失效的bug
## 1.4.22022-01-21
- 修复 微信小程序resize后组件收起的bug
## 1.4.12021-11-22
- 修复 vue3中个别scss变量无法找到的问题
## 1.4.02021-11-19
- 优化 组件UI并提供设计资源详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-collapse](https://uniapp.dcloud.io/component/uniui/uni-collapse)
## 1.3.32021-08-17
- 优化 show-arrow 属性默认为true
## 1.3.22021-08-17
- 新增 show-arrow 属性,控制是否显示右侧箭头
## 1.3.12021-07-30
- 优化 vue3下小程序事件警告的问题
## 1.3.02021-07-30
- 组件兼容 vue3如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.2.22021-07-21
- 修复 由1.2.0版本引起的 change 事件返回 undefined 的Bug
## 1.2.12021-07-21
- 优化 组件示例
## 1.2.02021-07-21
- 新增 组件折叠动画
- 新增 value\v-model 属性 ,动态修改面板折叠状态
- 新增 title 插槽 ,可定义面板标题
- 新增 border 属性 ,显示隐藏面板内容分隔线
- 新增 title-border 属性 ,显示隐藏面板标题分隔线
- 修复 resize 方法失效的Bug
- 修复 change 事件返回参数不正确的Bug
- 优化 H5、App 平台自动更具内容更新高度,无需调用 reszie() 方法
## 1.1.72021-05-12
- 新增 组件示例地址
## 1.1.62021-02-05
- 优化 组件引用关系通过uni_modules引用组件
## 1.1.52021-02-05
- 调整为uni_modules目录规范

View File

@ -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 IDbug
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>

View File

@ -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>

View 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"
}
}
}
}
}

View 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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More