修改
This commit is contained in:
parent
5c8be467e2
commit
30615b8833
17
App.vue
17
App.vue
@ -49,4 +49,21 @@
|
||||
.ml8 {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.mr20 {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.ml16 {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.ml10 {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.mt24 {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
184
pages.json
184
pages.json
@ -22,6 +22,7 @@
|
||||
},
|
||||
// 小说
|
||||
{
|
||||
// 业绩
|
||||
"path": "pages/novel/performance/performance",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
@ -34,7 +35,22 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/novel/personalMoney/personalMoney",
|
||||
// 书籍管理
|
||||
"path": "pages/novel/bookManagement/bookManagement",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
// "disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
// 短剧业绩
|
||||
"path": "pages/shortPlay/performance/performance",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
@ -44,8 +60,174 @@
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 短剧管理
|
||||
"path": "pages/shortPlay/shortManagement/shortManagement",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
// "disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 我的
|
||||
"path": "pages/shortPlay/my/my",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
// "disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
"root": "pagesA", // 分包根路径
|
||||
"pages": [
|
||||
{
|
||||
// 个人业绩
|
||||
"path": "novel/personalMoney/personalMoney",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 文案运营个人业绩
|
||||
"path": "novel/copywritingPersonal/copywritingPersonal",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 文案运营个人业绩提成时间列表
|
||||
"path": "novel/commissionDetail/commissionDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
// "navigationStyle": "custom",
|
||||
// "navigationBarTextStyle": "white",
|
||||
// "disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},{
|
||||
// 书籍列表
|
||||
"path": "novel/booksList/booksList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
// "disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 书籍详细
|
||||
"path": "novel/bookDetail/bookDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},{
|
||||
// 短剧个人业绩
|
||||
"path": "shortPlay/personalMoney/personalMoney",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 短剧文案运营个人业绩
|
||||
"path": "shortPlay/copywritingPersonal/copywritingPersonal",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
"disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 短剧详细
|
||||
"path": "shortPlay/shortPlayDetail/shortPlayDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
// "disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 影视分成
|
||||
"path": "shortPlay/moviesDivideInto/moviesDivideInto",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white",
|
||||
// "disableScroll": true,
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 奖金福利
|
||||
"path": "shortPlay/welfareBonus/welfareBonus",
|
||||
"style": {
|
||||
"navigationBarTitleText": "奖金福利",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 旅游福利
|
||||
"path": "shortPlay/welfareTourism/welfareTourism",
|
||||
"style": {
|
||||
"navigationBarTitleText": "旅游福利",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
|
||||
373
pages/novel/bookManagement/bookManagement.vue
Normal file
373
pages/novel/bookManagement/bookManagement.vue
Normal file
@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<view class="bookManagement_content">
|
||||
<view class="bookManagement_con_nav_bar">
|
||||
<u-navbar title="书籍管理" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left" @tap="exitAccountFn">
|
||||
<image :src="PerHeadSculpture" class="is_image"></image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="bookManagement_con_header">
|
||||
<view class="con_header_image">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bookManagement_container">
|
||||
<scroll-view scroll-y="true" class="bookManagement_scroll_Y" @scrolltolower="lower">
|
||||
|
||||
<view class="_scroll_Y_box">
|
||||
<view class="_book_detail_box">
|
||||
<view class="_book_detail_header">
|
||||
<view class="_header_left">
|
||||
<view class="_header_left_image">
|
||||
<image src="/static/novel/bookManagement/book_detail_title.png" class="is_image" />
|
||||
</view>
|
||||
<view class="_header_left_title ml10">书籍详细</view>
|
||||
</view>
|
||||
<view class="_header_right">
|
||||
<view>查看跟多</view>
|
||||
<u-icon name="arrow-right" size="24rpx" color="#9E9E9E"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_book_detail_container mt24">
|
||||
<view class="_book_detail_table_header">
|
||||
<u-row justify="space-between" gutter="10">
|
||||
<u-col span="3">
|
||||
<view class="_header_item">书编号</view>
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<view class="_header_item">书名</view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="_header_item _header_item_last">总消耗</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
<view class="_book_detail_table_body">
|
||||
<u-row justify="space-between" gutter="10" v-for="m in 3" :key="m">
|
||||
<u-col span="3">
|
||||
<view class="_header_item">640</view>
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<view class="_header_item">洗净总裁今天也在掉马甲</view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="_header_item _header_item_last">64245.12</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_book_list_box mt24">
|
||||
<view class="_book_list_header">
|
||||
<view class="_header_left">
|
||||
<view class="_header_left_image">
|
||||
<image src="/static/novel/bookManagement/book_list_title.png" class="is_image" />
|
||||
</view>
|
||||
<view class="_header_left_title ml10">书籍列表</view>
|
||||
</view>
|
||||
<view class="_header_right">
|
||||
<view>查看跟多</view>
|
||||
<u-icon name="arrow-right" size="24rpx" color="#9E9E9E"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_book_list_container">
|
||||
<view class="_list_con_item_box">
|
||||
<view class="_item_box_li mt50" v-for="m in 6" :key="m">
|
||||
<view class="_li_title">娘娘她一心只想高升</view>
|
||||
<view class="_li_other_info mt16">
|
||||
<text>编辑：邓莎</text>
|
||||
<text class="ml16">作者：李思瑶</text>
|
||||
</view>
|
||||
<view class="_li_money_info mt16">
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_commission">0</view>
|
||||
<view class="_item_name mt16">作者提成</view>
|
||||
</view>
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_edit">0</view>
|
||||
<view class="_item_name mt16">编辑提成</view>
|
||||
</view>
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_number">665</view>
|
||||
<view class="_item_name mt16">书编号</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F3F4F6;
|
||||
}
|
||||
|
||||
.bookManagement_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bookManagement_con_nav_bar {
|
||||
.u-navbar {
|
||||
.u-navbar__content {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.u_nav_slot {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_con_header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background: linear-gradient(180deg, #3391FF 0%, rgba(67, 125, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_container {
|
||||
// padding: 24rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
|
||||
.bookManagement_scroll_Y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
._scroll_Y_box {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._book_detail_box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._book_detail_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
._header_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._header_left_image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
._header_left_title {
|
||||
font-size: 32rpx;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
._header_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
}
|
||||
|
||||
._book_detail_container {
|
||||
._book_detail_table_header {
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
|
||||
.u-row {
|
||||
height: 82rpx;
|
||||
|
||||
._header_item {
|
||||
font-size: 24rpx;
|
||||
color: #626266;
|
||||
}
|
||||
|
||||
._header_item_last {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._book_detail_table_body {
|
||||
.u-row {
|
||||
height: 82rpx;
|
||||
|
||||
._header_item {
|
||||
font-size: 26rpx;
|
||||
color: #444444;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
._header_item_last {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._book_list_box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._book_list_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
._header_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._header_left_image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
._header_left_title {
|
||||
font-size: 32rpx;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
._header_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
}
|
||||
|
||||
._book_list_container {
|
||||
width: 100%;
|
||||
|
||||
._list_con_item_box {
|
||||
width: 100%;
|
||||
|
||||
._item_box_li {
|
||||
width: 100%;
|
||||
|
||||
._li_title {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._li_other_info {
|
||||
display: flex;
|
||||
font-size: 20rpx;
|
||||
color: #727375;
|
||||
}
|
||||
|
||||
._li_money_info {
|
||||
display: flex;
|
||||
|
||||
._li_money_info_item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
._item_name {
|
||||
color: #84878A;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_commission {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #F23D3D;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_edit {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #446BFA;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_number {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #181819;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<view class="performance_content">
|
||||
<view class="performance_con_nav_bar">
|
||||
<u-navbar title="秦九后台" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left">
|
||||
<view class="u_nav_slot" slot="left" @tap="exitAccountFn">
|
||||
<image :src="PerHeadSculpture" class="is_image"></image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
@ -11,6 +11,11 @@
|
||||
<image :src="PerNavBarBg" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="performance_con_guide" v-if="guideFlag">
|
||||
<view class="_guide_image" @tap="handelGuideFn">
|
||||
<image src="/static/novel/performance/guide.png" class="is_image" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="performance_con_body">
|
||||
<view class="con_body_search">
|
||||
@ -26,13 +31,13 @@
|
||||
}" :inactiveStyle="{
|
||||
color: '#FFFFFF',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle="padding:0; font-size:40rpx; height: 128rpx;">
|
||||
}" 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>
|
||||
<view class="tabel_item_con ">
|
||||
<view class="tabel_item_con">
|
||||
<view class="tabel_item_con_tr item_con_tr_he_date">
|
||||
<view class="_con_tr_name" @tap="handelPerBubble">
|
||||
<view>整月数据</view>
|
||||
@ -62,9 +67,10 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabel_box_body tabel_item_row">
|
||||
<scroll-view scroll-y="true" class="tabel_scroll_y" @scrolltolower="tabelScrolltolower">
|
||||
<scroll-view scroll-y="true" class="tabel_scroll_y" @scrolltolower="tabelScrolltolower"
|
||||
:enable-flex="true">
|
||||
<view class="tabel_scroll_y_box ">
|
||||
<view class="tabel_item_con " v-for="m in 20" :key="m">
|
||||
<view class="tabel_item_con" v-for="m in 20" :key="m" @tap="toHandelPerformance">
|
||||
<view class="tabel_item_con_tr item_con_tr_he_date item_con_tr_date">01.01-01.31</view>
|
||||
<view class="tabel_item_con_tr item_con_tr_name">徐颖</view>
|
||||
<view class="tabel_item_con_tr item_con_tr_num">2528.97</view>
|
||||
@ -115,15 +121,53 @@
|
||||
tabsList: tabsList,
|
||||
liuBubbleMenu: liuBubbleMenu,
|
||||
PerBubbleOpen: false,
|
||||
PerBubbleType: 2
|
||||
PerBubbleType: 2,
|
||||
tabsItemId: '1',
|
||||
guideFlag: false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
const guideFlag = this.$myStorage.isGetStorageSync('guideFlag');
|
||||
this.guideFlag = !guideFlag;
|
||||
},
|
||||
methods: {
|
||||
tabelScrolltolower() {
|
||||
|
||||
},
|
||||
handelPerBubble() {
|
||||
this.PerBubbleOpen = !this.PerBubbleOpen;
|
||||
},
|
||||
toHandelPerformance() {
|
||||
const tabsItemId = this.tabsItemId;
|
||||
let path = `/pagesA/novel/personalMoney/personalMoney`;
|
||||
if (tabsItemId == '1') {
|
||||
path = `/pagesA/novel/copywritingPersonal/copywritingPersonal`
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
})
|
||||
},
|
||||
handelTabsFn(row) {
|
||||
this.tabsItemId = row.id;
|
||||
},
|
||||
handelGuideFn() {
|
||||
this.guideFlag = false;
|
||||
this.$myStorage.isSetStorageSync('guideFlag', true);
|
||||
},
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -168,6 +212,23 @@
|
||||
height: 452rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.performance_con_guide {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 5;
|
||||
|
||||
._guide_image {
|
||||
width: 288rpx;
|
||||
height: 362rpx;
|
||||
margin-top: calc(var(--status-bar-height) + 54px);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -340,6 +401,10 @@
|
||||
|
||||
.tabel_scroll_y_box {
|
||||
padding: 0 32rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
|
||||
.item_con_tr_date {
|
||||
color: #64656A;
|
||||
|
||||
461
pages/shortPlay/my/my.vue
Normal file
461
pages/shortPlay/my/my.vue
Normal file
@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<view class="my_container">
|
||||
<view class="my_content">
|
||||
<view class="my_content_header">
|
||||
<u-navbar title="个人中心" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left"></view>
|
||||
</u-navbar>
|
||||
<view class="my_header_bg">
|
||||
<view class="con_header_image">
|
||||
<image src="/static/shortPlay/my/header_bg.png" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="my_content_body">
|
||||
<scroll-view scroll-y="true" class="scroll_y" :enable-flex="true">
|
||||
<view class="scroll_y_box">
|
||||
<view class="_y_s_item_user">
|
||||
<view class="_s_i_user_left">
|
||||
<image src="/static/novel/performance/per_head_sculpture.png" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_s_i_user_right">
|
||||
<view class="_i_user_right_name">刘尚慧</view>
|
||||
<view class="_i_user_right_department">产品运营/某某项目组</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_s_item_data">
|
||||
<view class="_s_d_header_box">
|
||||
<view class="_s_d_h_image">
|
||||
<image class="is_image" src="/static/shortPlay/my/data_img.png"></image>
|
||||
</view>
|
||||
<view class="_s_d_h_title">我的数据</view>
|
||||
</view>
|
||||
<view class="_s_d_data_info_box">
|
||||
<view class="_s_d_b_info_li active">
|
||||
<view class="_b_info_li_name">提成</view>
|
||||
<view class="_b_info_li_sum">
|
||||
<text style="font-size: 32rpx;">￥</text>
|
||||
<text style="font-size: 46rpx;">1222</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_s_d_b_info_li">
|
||||
<view class="_b_info_li_name">现金消费</view>
|
||||
<view class="_b_info_li_sum">
|
||||
<text style="font-size: 32rpx;">￥</text>
|
||||
<text style="font-size: 46rpx;">1222</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_s_item_welfare">
|
||||
<view class="_s_i_w_bg">
|
||||
<image src="/static/shortPlay/my/welfare_bg.png" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_s_i_w_container_box">
|
||||
<view class="_s_i_w_container">
|
||||
<view class="s_i_w_header_box">
|
||||
<view class="_s_i_w_h_image">
|
||||
<image class="is_image" src="/static/shortPlay/my/welfare_tltle.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="_s_i_w_h_title">我的福利</view>
|
||||
</view>
|
||||
<view class="_s_i_w_cell">
|
||||
<u-cell-group :border="false">
|
||||
<u-cell :isLink="true" :border="false">
|
||||
<view slot="title" class="_s_i_w_cell_solt_title">
|
||||
<text>奖金福利</text>
|
||||
<view>
|
||||
<u-badge bgColor="#F23D3D " max="99" :value="1"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="value" class="_s_i_w_cell_solt_value">
|
||||
<text style="color:#446BFA;">已解锁</text>
|
||||
<!-- <text style="color: #9E9E9E;">未解锁</text> -->
|
||||
</view>
|
||||
</u-cell>
|
||||
<u-cell :isLink="true" :border="false">
|
||||
<view slot="title" class="_s_i_w_cell_solt_title">
|
||||
<text>旅游福利</text>
|
||||
<view>
|
||||
<u-badge bgColor="#F23D3D " max="99" :value="1"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="value" class="_s_i_w_cell_solt_value">
|
||||
<!-- <text style="color:#446BFA;">已解锁</text>-->
|
||||
<text style="color: #9E9E9E;">未解锁</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_y_s_item_exit" @tap="exitAccountFn">
|
||||
<text>切换后台</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<u-transition :show="welfareShow">
|
||||
<view class="welfare_transition">
|
||||
<view class="welfare_transition_box">
|
||||
<image src="/static/shortPlay/my/welfare_model.png" class="is_image"></image>
|
||||
<view class="welfare_transition_con">
|
||||
<view class="welfare_tips">
|
||||
<text>恭喜获得奖金</text>
|
||||
<text class="sum"> 800 </text>
|
||||
<text>元</text>
|
||||
</view>
|
||||
<view class="welfare_accept">开心收下</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="welfare_clean_icon">
|
||||
<u-icon name="close-circle" color="#FFFFFF" size="70rpx"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
welfareShow: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F3F4F6;
|
||||
}
|
||||
|
||||
.my_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.my_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.my_content_header {
|
||||
.u-navbar {
|
||||
.u-navbar__content {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my_header_bg {
|
||||
.con_header_image {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
// background: linear-gradient(180deg, RGBA(68, 108, 250, 1) 0%, RGBA(68, 108, 250, 1) 20%, RGBA(68, 108, 250, 1) 40%,rgba(68, 108, 250, 1) 60%, rgba(243, 244, 246, 1) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my_content_body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
.scroll_y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
.scroll_y_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._y_s_item_user {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
|
||||
._s_i_user_left {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
._s_i_user_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
margin-left: 20rpx;
|
||||
|
||||
._i_user_right_name {
|
||||
font-size: 44rpx;
|
||||
line-height: 1;
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._i_user_right_department {
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_s_item_data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 232rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx 24rpx 36rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
|
||||
|
||||
._s_d_header_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._s_d_h_image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
._s_d_h_title {
|
||||
line-height: 1;
|
||||
font-size: 34rpx;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._s_d_data_info_box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
|
||||
._s_d_b_info_li.active {
|
||||
border-right: 2rpx solid #EBEEF5;
|
||||
}
|
||||
|
||||
._s_d_b_info_li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
._b_info_li_name {
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
color: #84878A;
|
||||
}
|
||||
|
||||
._b_info_li_sum {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
line-height: 1;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_s_item_welfare {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 24rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
// overflow: hidden;
|
||||
margin-top: 50rpx;
|
||||
|
||||
._s_i_w_bg {
|
||||
position: absolute;
|
||||
top: -28rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 138rpx;
|
||||
}
|
||||
|
||||
._s_i_w_container_box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
._s_i_w_container {
|
||||
|
||||
.s_i_w_header_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._s_i_w_h_image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
._s_i_w_h_title {
|
||||
line-height: 1;
|
||||
font-size: 34rpx;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._s_i_w_cell {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.u-cell__body {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.uicon-arrow-right {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
}
|
||||
|
||||
._s_i_w_cell_solt_title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
|
||||
.u-badge {
|
||||
margin: -6px 0 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._s_i_w_cell_solt_value {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_s_item_exit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 106rpx;
|
||||
line-height: 106rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.welfare_transition {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.welfare_transition_box {
|
||||
width: 506rpx;
|
||||
height: 568rpx;
|
||||
position: relative;
|
||||
|
||||
.welfare_transition_con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 298rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.welfare_tips {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
.sum {
|
||||
margin: 0 4rpx;
|
||||
color: #F23D3D;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.welfare_accept {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 324rpx;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(to right, #FF3F3F, #FF8139);
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
border-radius: 44rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welfare_clean_icon {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
421
pages/shortPlay/performance/performance.vue
Normal file
421
pages/shortPlay/performance/performance.vue
Normal file
@ -0,0 +1,421 @@
|
||||
<template>
|
||||
<view class="performance_content">
|
||||
<view class="performance_con_nav_bar">
|
||||
<u-navbar title="秦九后台" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left" @tap="exitAccountFn">
|
||||
<image :src="PerHeadSculpture" class="is_image"></image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="performance_con_header">
|
||||
<view class="con_header_image">
|
||||
<image :src="PerNavBarBg" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="performance_con_guide" v-if="guideFlag">
|
||||
<view class="_guide_image" @tap="handelGuideFn">
|
||||
<image src="/static/novel/performance/guide.png" class="is_image" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="performance_con_body">
|
||||
<view class="con_body_search">
|
||||
<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>
|
||||
<view class="tabel_item_con">
|
||||
<view class="tabel_item_con_tr item_con_tr_he_date">
|
||||
<view class="_con_tr_name" @tap="handelPerBubble">
|
||||
<view>整月数据</view>
|
||||
<view class="item_con_tr_iamge">
|
||||
<image :src="PerBubble" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_con_tr_bubble" v-if="PerBubbleOpen">
|
||||
<view class="tr_bubble_list">
|
||||
<view :class="['tr_bubble_list_item',PerBubbleType == '1' ?'active' : '']">今日数据
|
||||
</view>
|
||||
<view :class="['tr_bubble_list_item',PerBubbleType == '2' ?'active' : '']">整月数据
|
||||
</view>
|
||||
<view :class="['tr_bubble_list_item',PerBubbleType == '3' ?'active' : '']">今年数据
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabel_item_con_tr item_con_tr_name">姓名</view>
|
||||
<view class="tabel_item_con_tr item_con_tr_num">
|
||||
<view>提成</view>
|
||||
<view class="item_con_tr_iamge">
|
||||
<image :src="PerSequence" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabel_item_con_tr item_con_tr_btn"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabel_box_body tabel_item_row">
|
||||
<scroll-view scroll-y="true" class="tabel_scroll_y" @scrolltolower="tabelScrolltolower"
|
||||
:enable-flex="true">
|
||||
<view class="tabel_scroll_y_box ">
|
||||
<view class="tabel_item_con" v-for="m in 20" :key="m" @tap="toHandelPerformance">
|
||||
<view class="tabel_item_con_tr item_con_tr_he_date item_con_tr_date">01.01-01.31</view>
|
||||
<view class="tabel_item_con_tr item_con_tr_name">徐颖</view>
|
||||
<view class="tabel_item_con_tr item_con_tr_num">2528.97</view>
|
||||
<view class="tabel_item_con_tr item_con_tr_btn">
|
||||
<u-icon name="arrow-right" color="#939599"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
import PerNavBarBg from '@/static/novel/performance/per_nav_bar_bg.png';
|
||||
import PerBodyTabs from '@/static/novel/performance/per_body_tabs.png';
|
||||
import PerOrder from '@/static/novel/performance/per_order.png';
|
||||
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';
|
||||
const tabsList = [{
|
||||
name: '运营业绩',
|
||||
id: '1'
|
||||
},
|
||||
{
|
||||
name: '作者业绩',
|
||||
id: '2'
|
||||
},
|
||||
{
|
||||
name: '投放业绩',
|
||||
id: '3'
|
||||
},
|
||||
];
|
||||
const liuBubbleMenu = ['今日数据', '整月数据', '今年数据']
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
PerNavBarBg,
|
||||
PerBodyTabs,
|
||||
PerOrder,
|
||||
PerSequence,
|
||||
PerBubble,
|
||||
// PerBubbleModal,
|
||||
tabsList: tabsList,
|
||||
liuBubbleMenu: liuBubbleMenu,
|
||||
PerBubbleOpen: false,
|
||||
PerBubbleType: 2,
|
||||
tabsItemId: '1',
|
||||
guideFlag: false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
const guideFlag = this.$myStorage.isGetStorageSync('guideFlag');
|
||||
this.guideFlag = !guideFlag;
|
||||
},
|
||||
methods: {
|
||||
tabelScrolltolower() {
|
||||
|
||||
},
|
||||
handelPerBubble() {
|
||||
this.PerBubbleOpen = !this.PerBubbleOpen;
|
||||
},
|
||||
toHandelPerformance() {
|
||||
const tabsItemId = this.tabsItemId;
|
||||
let path = `/pages/novel/personalMoney/personalMoney`;
|
||||
if (tabsItemId == '1') {
|
||||
path = `/pages/novel/copywritingPersonal/copywritingPersonal`
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
})
|
||||
},
|
||||
handelTabsFn(row) {
|
||||
this.tabsItemId = row.id;
|
||||
},
|
||||
handelGuideFn() {
|
||||
this.guideFlag = false;
|
||||
this.$myStorage.isSetStorageSync('guideFlag', true);
|
||||
},
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.performance_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.performance_con_nav_bar {
|
||||
.u-navbar {
|
||||
.u-navbar__content {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.u_nav_slot {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.performance_con_header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.con_header_image {
|
||||
width: 100%;
|
||||
height: 452rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.performance_con_guide {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 5;
|
||||
|
||||
._guide_image {
|
||||
width: 288rpx;
|
||||
height: 362rpx;
|
||||
margin-top: calc(var(--status-bar-height) + 54px);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.performance_con_body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
|
||||
.con_body_search {
|
||||
position: relative;
|
||||
padding: 16rpx 24rpx 0;
|
||||
|
||||
.u-input {
|
||||
padding: 0 24rpx !important;
|
||||
background: rgba(248, 249, 255, 0.9);
|
||||
|
||||
.u-input__content__field-wrapper__field {
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #C0C4CC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.con_body_tabs {
|
||||
position: relative;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.u-tabs__wrapper__nav__line {
|
||||
bottom: -36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.con_body_tabel_box {
|
||||
// background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 116rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
|
||||
.tabel_item_row {
|
||||
flex-shrink: 0;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.tabel_box_header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
background: linear-gradient(to bottom, #CED9FF, #FFFFFF);
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
}
|
||||
|
||||
.tabel_item_con {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 102rpx;
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item_con_tr_he_date {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.item_con_tr_name {
|
||||
width: 160rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item_con_tr_num {
|
||||
width: 200rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item_con_tr_btn {
|
||||
width: 60rpx;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tabel_item_con_tr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// flex: 1;
|
||||
color: #1A1A1A;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
|
||||
._con_tr_name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item_con_tr_iamge {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.item_con_tr_bubble {
|
||||
position: absolute;
|
||||
bottom: -20rpx;
|
||||
left: 0;
|
||||
width: 164rpx;
|
||||
height: 226rpx;
|
||||
background: #fff;
|
||||
transform: translateY(100%);
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
|
||||
|
||||
.tr_bubble_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.tr_bubble_list_item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tr_bubble_list_item.active {
|
||||
color: #446BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item_con_tr_bubble::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: 50%;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #fff;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabel_box_body {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
|
||||
.tabel_scroll_y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.tabel_scroll_y_box {
|
||||
padding: 0 32rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
|
||||
.item_con_tr_date {
|
||||
color: #64656A;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
369
pages/shortPlay/shortManagement/shortManagement.vue
Normal file
369
pages/shortPlay/shortManagement/shortManagement.vue
Normal file
@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<view class="bookManagement_content">
|
||||
<view class="bookManagement_con_nav_bar">
|
||||
<u-navbar title="短剧管理" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left" @tap="exitAccountFn">
|
||||
<image :src="PerHeadSculpture" class="is_image"></image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="bookManagement_con_header">
|
||||
<view class="con_header_image">
|
||||
</view>
|
||||
</view>
|
||||
</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">
|
||||
<view class="_header_left">
|
||||
<view class="_header_left_image">
|
||||
<image src="/static/novel/bookManagement/book_list_title.png" class="is_image" />
|
||||
</view>
|
||||
<view class="_header_left_title ml10">影视分成</view>
|
||||
</view>
|
||||
<view class="_header_right">
|
||||
<view>查看跟多</view>
|
||||
<u-icon name="arrow-right" size="24rpx" color="#9E9E9E"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_book_detail_container mt24">
|
||||
<view class="_container_li_item" v-for="(m,idx) in 3" :key="m">
|
||||
<view class="_container_li_one">
|
||||
<view class="_li_one_user_name">彭真</view>
|
||||
<view class="_li_one_user_sum">+12.67</view>
|
||||
</view>
|
||||
<view class="_container_li_two">
|
||||
<view class="_li_two_left">
|
||||
<text>员工ID：</text>
|
||||
<text class="ml10">职位：</text>
|
||||
</view>
|
||||
<view class="_li_two_right">
|
||||
提成
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_book_list_box mt24">
|
||||
<view class="_book_list_header">
|
||||
<view class="_header_left">
|
||||
<view class="_header_left_image">
|
||||
<image src="/static/novel/bookManagement/book_detail_title.png" class="is_image" />
|
||||
</view>
|
||||
<view class="_header_left_title ml10">短剧详细</view>
|
||||
</view>
|
||||
<view class="_header_right">
|
||||
<view>查看跟多</view>
|
||||
<u-icon name="arrow-right" size="24rpx" color="#9E9E9E"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_book_list_container">
|
||||
<view class="_list_con_item_box">
|
||||
<view class="_item_box_li mt50" v-for="m in 6" :key="m">
|
||||
<view class="_li_title">娘娘她一心只想高升</view>
|
||||
<view class="_li_money_info mt24">
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_commission">0</view>
|
||||
<view class="_item_name mt16">提成0.8%</view>
|
||||
</view>
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_edit">0</view>
|
||||
<view class="_item_name mt16">现金消耗</view>
|
||||
</view>
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_number">665</view>
|
||||
<view class="_item_name mt16">短剧ID</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrolltolower() {
|
||||
|
||||
},
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F3F4F6;
|
||||
}
|
||||
|
||||
.bookManagement_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bookManagement_con_nav_bar {
|
||||
.u-navbar {
|
||||
.u-navbar__content {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.u_nav_slot {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_con_header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background: linear-gradient(180deg, #3391FF 0%, rgba(67, 125, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_container {
|
||||
// padding: 24rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
|
||||
.bookManagement_scroll_Y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
._scroll_Y_box {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._book_detail_box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 24rpx 24rpx 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._book_detail_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
._header_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._header_left_image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
._header_left_title {
|
||||
font-size: 32rpx;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
._header_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
}
|
||||
|
||||
._book_detail_container {
|
||||
|
||||
._container_li_item {
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
|
||||
._container_li_one {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
._li_one_user_name {
|
||||
font-size: 28rpx;
|
||||
color: #181819;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._li_one_user_sum {
|
||||
font-size: 26rpx;
|
||||
color: #F23D3D;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
._container_li_two {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
|
||||
._li_two_left {
|
||||
font-size: 20rpx;
|
||||
color: #727375;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._li_two_right {
|
||||
font-size: 20rpx;
|
||||
color: #727375;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._container_li_item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._book_list_box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._book_list_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
._header_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._header_left_image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
._header_left_title {
|
||||
font-size: 32rpx;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
._header_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
}
|
||||
|
||||
._book_list_container {
|
||||
width: 100%;
|
||||
|
||||
._list_con_item_box {
|
||||
width: 100%;
|
||||
|
||||
._item_box_li {
|
||||
width: 100%;
|
||||
|
||||
._li_title {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._li_money_info {
|
||||
display: flex;
|
||||
|
||||
._li_money_info_item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
._item_name {
|
||||
color: #84878A;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_commission {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #F23D3D;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_edit {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #446BFA;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_number {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #181819;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
334
pagesA/novel/bookDetail/bookDetail.vue
Normal file
334
pagesA/novel/bookDetail/bookDetail.vue
Normal file
@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<view class="bookDetail_content">
|
||||
<view class="bookManagement_con_nav_bar">
|
||||
<u-navbar title="书籍详细" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left" @tap="exitAccountFn">
|
||||
<image :src="PerHeadSculpture" class="is_image"></image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="bookManagement_con_header">
|
||||
<view class="con_header_image">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bookManagement_container">
|
||||
<!-- -->
|
||||
<view class="_scroll_Y_box">
|
||||
<view class="_book_search">
|
||||
<view class="_book_search_date">
|
||||
<uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick" :border="false"
|
||||
:clear-icon="false" />
|
||||
</view>
|
||||
<view class="_book_search_select ml10">
|
||||
<uni-data-select v-model="searchSelect" placeholder="请选择cp方" :localdata="range"
|
||||
@change="change"></uni-data-select>
|
||||
</view>
|
||||
<view class="_book_search_btn ml10">
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_book_detail_box mt16">
|
||||
<view class="_book_detail_container">
|
||||
<view class="_book_detail_table_header">
|
||||
<u-row justify="space-between" gutter="10">
|
||||
<u-col span="3">
|
||||
<view class="_header_item">书编号</view>
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<view class="_header_item">书名</view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="_header_item _header_item_last">总消耗</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
<view class="_book_detail_table_body">
|
||||
<scroll-view scroll-y="true" class="bookManagement_scroll_Y" :show-scrollbar="false">
|
||||
<u-row justify="space-between" gutter="10" v-for="m in 15" :key="m">
|
||||
<u-col span="3">
|
||||
<view class="_header_item">640</view>
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<view class="_header_item">洗净总裁今天也在掉马甲</view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="_header_item _header_item_last _header_item_consume">64245.12
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_book_page_pagination mt16">
|
||||
<page-pagination :total="60" :numAround="true"></page-pagination>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
dateRange: '',
|
||||
range: [{
|
||||
value: 0,
|
||||
text: "篮球"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "足球"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "游泳"
|
||||
},
|
||||
],
|
||||
searchSelect: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F3F4F6;
|
||||
}
|
||||
|
||||
.bookDetail_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bookManagement_con_nav_bar {
|
||||
.u-navbar {
|
||||
.u-navbar__content {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.u_nav_slot {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_con_header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background: linear-gradient(180deg, #3391FF 0%, rgba(67, 125, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_container {
|
||||
// padding: 24rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
||||
._scroll_Y_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._book_search {
|
||||
display: flex;
|
||||
|
||||
._book_search_date {
|
||||
width: 360rpx;
|
||||
|
||||
.text-center {
|
||||
font-size: 22rpx;
|
||||
color: #181819;
|
||||
}
|
||||
}
|
||||
|
||||
._book_search_select {
|
||||
width: 200rpx;
|
||||
|
||||
.uni-stat__select {
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.uni-select {
|
||||
border: none;
|
||||
|
||||
.uni-select__input-placeholder {
|
||||
font-size: 22rpx;
|
||||
color: #181819;
|
||||
}
|
||||
|
||||
.uniui-bottom,
|
||||
.uniui-top {
|
||||
color: #181819 !important;
|
||||
}
|
||||
|
||||
.uni-select__input-text {
|
||||
font-size: 22rpx;
|
||||
color: #181819;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._book_search_btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
color: #181819;
|
||||
font-size: 22rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._book_detail_box {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 0 24rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
position: relative;
|
||||
|
||||
._book_detail_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
|
||||
._book_detail_table_header {
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
|
||||
.u-row {
|
||||
height: 82rpx;
|
||||
|
||||
._header_item {
|
||||
font-size: 28rpx;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._header_item_last {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._book_detail_table_body {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.bookManagement_scroll_Y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.u-row {
|
||||
height: 82rpx;
|
||||
|
||||
._header_item {
|
||||
font-size: 26rpx;
|
||||
color: #444444;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
._header_item_last {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
._header_item_consume {
|
||||
color: #446BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._book_page_pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
/* 解决小程序和app滚动条的问题 */
|
||||
/* #ifdef MP-WEIXIN || APP-PLUS */
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* 解决H5 的问题 */
|
||||
/* #ifdef H5 */
|
||||
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
226
pagesA/novel/booksList/booksList.vue
Normal file
226
pagesA/novel/booksList/booksList.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<view class="bookManagement_content">
|
||||
<view class="bookManagement_con_nav_bar">
|
||||
<u-navbar title="书籍列表" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left" @tap="exitAccountFn">
|
||||
<image :src="PerHeadSculpture" class="is_image"></image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="bookManagement_con_header">
|
||||
<view class="con_header_image">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bookManagement_container">
|
||||
<scroll-view scroll-y="true" class="bookManagement_scroll_Y" @scrolltolower="scrolltolower">
|
||||
<view class="_scroll_Y_box">
|
||||
<view class="_book_search">
|
||||
<u-search placeholder="搜索书籍" v-model="keyword" :showAction="false" bgColor="#FFFFFF"></u-search>
|
||||
</view>
|
||||
<view class="_book_list_box mt24">
|
||||
<view class="_book_list_container">
|
||||
<view class="_list_con_item_box">
|
||||
<view :class="['_item_box_li', m > 0 ? 'mt50':'']" v-for="m in 10" :key="m">
|
||||
<view class="_li_title">娘娘她一心只想高升</view>
|
||||
<view class="_li_other_info mt16">
|
||||
<text>编辑：邓莎</text>
|
||||
<text class="ml16">作者：李思瑶</text>
|
||||
</view>
|
||||
<view class="_li_money_info mt16">
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_commission">0</view>
|
||||
<view class="_item_name mt16">作者提成</view>
|
||||
</view>
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_edit">0</view>
|
||||
<view class="_item_name mt16">编辑提成</view>
|
||||
</view>
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_number">665</view>
|
||||
<view class="_item_name mt16">书编号</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
keyword: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrolltolower() {
|
||||
|
||||
},
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F3F4F6;
|
||||
}
|
||||
|
||||
.bookManagement_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bookManagement_con_nav_bar {
|
||||
.u-navbar {
|
||||
.u-navbar__content {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.u_nav_slot {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_con_header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background: linear-gradient(180deg, #3391FF 0%, rgba(67, 125, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_container {
|
||||
// padding: 24rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
|
||||
.bookManagement_scroll_Y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
._scroll_Y_box {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._book_search {
|
||||
.u-search__content {
|
||||
border-radius: 12rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
._book_list_box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._book_list_container {
|
||||
width: 100%;
|
||||
|
||||
._list_con_item_box {
|
||||
width: 100%;
|
||||
|
||||
._item_box_li {
|
||||
width: 100%;
|
||||
|
||||
._li_title {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._li_other_info {
|
||||
display: flex;
|
||||
font-size: 20rpx;
|
||||
color: #727375;
|
||||
}
|
||||
|
||||
._li_money_info {
|
||||
display: flex;
|
||||
|
||||
._li_money_info_item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
._item_name {
|
||||
color: #84878A;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_commission {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #F23D3D;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_edit {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #446BFA;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_number {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #181819;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
pagesA/novel/commissionDetail/commissionDetail.vue
Normal file
123
pagesA/novel/commissionDetail/commissionDetail.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<view class="commissionDetail_content">
|
||||
<view class="_commission_list_box" v-for="m in 3" :key="m">
|
||||
<view class="_list_box_header">
|
||||
<view class="_box_header_title">2023-06-03</view>
|
||||
</view>
|
||||
<view class="_list_box_container">
|
||||
<view class="_y_container_list_item" v-for="j in 4" :key="j">
|
||||
<view class="_y_list_item_header">
|
||||
<view class="_item_header_title mr20">四年是无声的痛</view>
|
||||
<u-tag text="书编号:0212" size="mini" bgColor="#F0F1F2" color="#727375"
|
||||
borderColor="#F0F1F2"></u-tag>
|
||||
</view>
|
||||
<view class="_y_list_item_con mt16">
|
||||
<view class="_item_con_li">
|
||||
<view class="_con_li_name">提成</view>
|
||||
<view class="_con_li_comm_sun mt16">+102.67</view>
|
||||
</view>
|
||||
<view class="_item_con_li">
|
||||
<view class="_con_li_name">现金消费</view>
|
||||
<view class="_con_li_consum_sun mt16">10212.67</view>
|
||||
</view>
|
||||
<view class="_item_con_li">
|
||||
<view class="_con_li_name">海南阅庭</view>
|
||||
<view class="_con_li_clip_name mt16">剪辑：唐宝艳</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: #F3F4F6;
|
||||
}
|
||||
|
||||
.commissionDetail_content {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
._commission_list_box {
|
||||
padding: 0 24rpx;
|
||||
|
||||
._list_box_header {
|
||||
._box_header_title {
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
padding: 24rpx 0 14rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
._list_box_container {
|
||||
background-color: #fff;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
._y_container_list_item {
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
|
||||
._y_list_item_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._item_header_title {
|
||||
color: #181819;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
._y_list_item_con {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
._item_con_li {
|
||||
._con_li_name {
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
._con_li_comm_sun {
|
||||
color: #F23D3D;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
._con_li_consum_sun {
|
||||
color: #446BFA;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
._con_li_clip_name {
|
||||
color: #727375;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list_item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
635
pagesA/novel/copywritingPersonal/copywritingPersonal.vue
Normal file
635
pagesA/novel/copywritingPersonal/copywritingPersonal.vue
Normal file
@ -0,0 +1,635 @@
|
||||
<template>
|
||||
<view class="copywritingPersonal_content">
|
||||
<view class="_con_header_box">
|
||||
<u-navbar title="和裴瑶业绩" @rightClick="rightClick" :autoBack="true" :placeholder="true" bgColor="transparent"
|
||||
leftIconColor="#FFF">
|
||||
</u-navbar>
|
||||
<view class="_con_header_bg">
|
||||
<image :src="PerMoNavBg" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_con_body_box">
|
||||
<view class="_total_money_box">
|
||||
<view class="_total_money_col pr14">
|
||||
<view class="_total_money_commission _money_col_com">
|
||||
<view class="_col_com_bg">
|
||||
<image :src="MoneyCommission" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_col_com_con">
|
||||
<view class="com_con_money">
|
||||
<view class="symbol">￥</view>
|
||||
<view class="money">1119.5</view>
|
||||
</view>
|
||||
<view class="com_con_tips">
|
||||
<view class="name">提成</view>
|
||||
<view class="percentage ml8">2‰</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_total_money_col pl14">
|
||||
<view class="_total_money_consumption _money_col_com">
|
||||
<view class="_col_com_bg">
|
||||
<image :src="MoneyConsumption" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_col_com_con">
|
||||
<view class="com_con_money">
|
||||
<view class="symbol">￥</view>
|
||||
<view class="money">0</view>
|
||||
</view>
|
||||
<view class="com_con_tips">
|
||||
<view class="name">现金消费</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_per_detail_box">
|
||||
<view class="detail_box_header"></view>
|
||||
<view class="_detail_box_com">
|
||||
<view class="_detail_com_nav">
|
||||
<uni-section type="line" title="业绩详情" titleFontSize="32rpx" titleColor="#181819">
|
||||
<template slot="right">
|
||||
<view class="_com_nav_section">
|
||||
<u-icon name="calendar" color="#2F5BFA"></u-icon>
|
||||
<text class="_section_txt">日期区间选择</text>
|
||||
</view>
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
<view class="_detail_com_info">
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="_detail_com_info_scroll_y"
|
||||
@scrolltolower="lower">
|
||||
<view class="info_scroll_y_box">
|
||||
<view class="info_scroll_y_container">
|
||||
<view class="_y_container_tabs">
|
||||
<u-tabs :list="tabsList" :scrollable="false" :activeStyle="{
|
||||
color: '#446BFA',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" :inactiveStyle="{
|
||||
color: '#181819',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" itemStyle="padding: 0;height:88rpx" lineWidth="72rpx" lineHeight="4rpx">
|
||||
</u-tabs>
|
||||
</view>
|
||||
<view class="_y_container_echarts_tips">
|
||||
<view class="_echarts_tips_box">
|
||||
<text class="name">2023-01-01提成</text>
|
||||
<text class="num">+21.5</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_echarts_list">
|
||||
<view class="_echarts_list_box">
|
||||
<qiun-data-charts type="area" ref="refChartsOpts" :canvas2d="true"
|
||||
:opts="chartsOpts" :chartData="chartData" @getIndex="touchLegend"
|
||||
:inScrollView="true" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_list">
|
||||
<u-cell-group>
|
||||
<u-cell>
|
||||
<view slot="title" class="u_slot_title">
|
||||
<text class="u_cell_text mr20">提成明细</text>
|
||||
<text class="u_cell_tips">(2023-01-03)</text>
|
||||
</view>
|
||||
<view slot="value" class="u_slot_value" @tap="handelSort">
|
||||
<text>智能排序</text>
|
||||
<view class="u_slot_value_image">
|
||||
<image :src="sortComm" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<view class="_y_container_list_item" @tap="toCommissionDetailFn">
|
||||
<view class="_y_list_item_header">
|
||||
<view class="_item_header_title mr20">四年是无声的痛</view>
|
||||
<u-tag text="书编号:0212" size="mini" bgColor="#F0F1F2" color="#727375"
|
||||
borderColor="#F0F1F2"></u-tag>
|
||||
</view>
|
||||
<view class="_y_list_item_con mt16">
|
||||
<view class="_item_con_li">
|
||||
<view class="_con_li_name">提成</view>
|
||||
<view class="_con_li_comm_sun mt16">+102.67</view>
|
||||
</view>
|
||||
<view class="_item_con_li">
|
||||
<view class="_con_li_name">现金消费</view>
|
||||
<view class="_con_li_consum_sun mt16">10212.67</view>
|
||||
</view>
|
||||
<view class="_item_con_li">
|
||||
<view class="_con_li_name">海南阅庭</view>
|
||||
<view class="_con_li_clip_name mt16">剪辑：唐宝艳</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_list_no_tips">
|
||||
<text>没有更多了~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerMoNavBg from '@/static/novel/personalMoney/per_mo_nav_bg.png';
|
||||
import MoneyCommission from '@/static/novel/personalMoney/money_commission.png';
|
||||
import MoneyConsumption from '@/static/novel/personalMoney/money_consumption.png';
|
||||
import PerOrder from '@/static/novel/performance/per_order.png';
|
||||
import PerSequence from '@/static/novel/performance/per_sequence.png';
|
||||
const tabsList = [{
|
||||
name: '日提成',
|
||||
id: '1'
|
||||
},
|
||||
{
|
||||
name: '月提成',
|
||||
id: '2'
|
||||
},
|
||||
{
|
||||
name: '年提成',
|
||||
id: '3'
|
||||
},
|
||||
{
|
||||
name: '累计提成',
|
||||
id: '4'
|
||||
},
|
||||
];
|
||||
const chartsOpts = {
|
||||
color: ["#F23D3D"],
|
||||
padding: [15, 15, 0, 0],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
boundaryGap: 'justify',
|
||||
fontColor: 'rgba(24, 24, 25, 0.42)',
|
||||
axisLineColor: '#D6D6D8',
|
||||
marginTop: 10,
|
||||
format: 'commissionFormatterX',
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
data: [{
|
||||
axisLine: false,
|
||||
format: 'commissionFormatter',
|
||||
fontColor: 'rgba(24, 24, 25, 0.42)',
|
||||
titleFontColor: '#181819'
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
activeType: "none",
|
||||
width: 2,
|
||||
type: "straight",
|
||||
gradient: true
|
||||
},
|
||||
tooltip: {
|
||||
showBox: false,
|
||||
gridColor: '#F23D3D',
|
||||
gridType: 'dash',
|
||||
dashLength: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerMoNavBg,
|
||||
MoneyCommission,
|
||||
MoneyConsumption,
|
||||
tabsList,
|
||||
chartsOpts,
|
||||
chartData: {},
|
||||
uCharts: {},
|
||||
sortComm: PerOrder
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.getServerData();
|
||||
},
|
||||
methods: {
|
||||
touchLegend(event) {
|
||||
console.log(event, "===========")
|
||||
// console.log(new uCharts(this.chartsOpts))
|
||||
},
|
||||
handelSort() {
|
||||
|
||||
},
|
||||
toCommissionDetailFn() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/novel/commissionDetail/commissionDetail`
|
||||
})
|
||||
},
|
||||
getServerData() {
|
||||
//模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||||
let res = {
|
||||
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
|
||||
series: [{
|
||||
name: "成交量A",
|
||||
data: [35, 8, 25, 37, 4, 20]
|
||||
}, ]
|
||||
};
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F3F4F6;
|
||||
}
|
||||
|
||||
.copywritingPersonal_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
._con_header_box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.u-navbar {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
._con_header_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 474rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._con_body_box {
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
._total_money_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
padding: 26rpx;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
._total_money_col {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
._total_money_commission {
|
||||
._col_com_con {
|
||||
color: #D13333;
|
||||
}
|
||||
}
|
||||
|
||||
._total_money_consumption {
|
||||
._col_com_con {
|
||||
color: #1B43D1;
|
||||
}
|
||||
}
|
||||
|
||||
._money_col_com {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._col_com_bg {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: -10rpx;
|
||||
right: -10rpx;
|
||||
bottom: -10rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
._col_com_con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 26rpx 20rpx;
|
||||
z-index: 2;
|
||||
|
||||
.com_con_money {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
|
||||
.symbol {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 46rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.com_con_tips {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
|
||||
.name {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._per_detail_box {
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.detail_box_header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(to bottom, rgba(206, 217, 255, 0.81) 0%, rgba(243, 244, 246, 1) 60%, rgba(243, 244, 246, 1) 100%);
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
border-top: 2rpx solid #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
._detail_box_com {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
// padding-bottom: 60rpx;
|
||||
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
|
||||
._detail_com_nav {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
padding: 36rpx 0 16rpx;
|
||||
|
||||
.uni-section {
|
||||
background-color: transparent;
|
||||
padding: 0 26rpx;
|
||||
|
||||
.uni-section-header {
|
||||
padding: 0;
|
||||
|
||||
.uni-section__content-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-section-header__decoration {
|
||||
width: 4rpx;
|
||||
height: 28rpx;
|
||||
background-color: #446BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._com_nav_section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 210rpx;
|
||||
height: 50rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 26rpx;
|
||||
|
||||
._section_txt {
|
||||
font-size: 22rpx;
|
||||
color: #2F5BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._detail_com_info {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
// background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._detail_com_info_scroll_y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.info_scroll_y_box {
|
||||
padding: 0 26rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
.info_scroll_y_container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._y_container_tabs {
|
||||
padding: 22rpx 22rpx 22rpx 0;
|
||||
}
|
||||
|
||||
._y_container_echarts_tips {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_tips_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
background-color: #F2F3F5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.name {
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #F23D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_echarts_list {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_list_box {
|
||||
position: relative;
|
||||
height: 340rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list {
|
||||
padding: 0 24rpx 0 24rpx;
|
||||
|
||||
.u-cell-group__wrapper {
|
||||
|
||||
>.u-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.u_slot_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.u_cell_text {
|
||||
color: #181819;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.u_cell_tips {
|
||||
color: #9E9E9E;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-cell__body {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.u-cell__value {
|
||||
color: #F23D3D;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.u_slot_value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9E9E9E;
|
||||
font-size: 22rpx;
|
||||
|
||||
.u_slot_value_image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list_item {
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
|
||||
._y_list_item_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
._item_header_title {
|
||||
color: #181819;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
._y_list_item_con {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
._item_con_li {
|
||||
._con_li_name {
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
._con_li_comm_sun {
|
||||
color: #F23D3D;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
._con_li_consum_sun {
|
||||
color: #446BFA;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
._con_li_clip_name {
|
||||
color: #727375;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list_no_tips {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 76rpx;
|
||||
color: #84878A;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -60,37 +60,59 @@
|
||||
<view class="_detail_com_info">
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="_detail_com_info_scroll_y"
|
||||
@scrolltolower="lower">
|
||||
<view class="info_scroll_y_container">
|
||||
<view class="_y_container_tabs">
|
||||
<u-tabs :list="tabsList" :scrollable="false" :activeStyle="{
|
||||
color: '#446BFA',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" :inactiveStyle="{
|
||||
color: '#181819',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" itemStyle="padding: 0;height:88rpx" lineWidth="72rpx" lineHeight="4rpx">
|
||||
</u-tabs>
|
||||
</view>
|
||||
<view class="_y_container_echarts_tips">
|
||||
<view class="_echarts_tips_box">
|
||||
<text class="name">2023-01-01提成</text>
|
||||
<text class="num">+21.5</text>
|
||||
<view class="info_scroll_y_box">
|
||||
<view class="info_scroll_y_container">
|
||||
<view class="_y_container_tabs">
|
||||
<u-tabs :list="tabsList" :scrollable="false" :activeStyle="{
|
||||
color: '#446BFA',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" :inactiveStyle="{
|
||||
color: '#181819',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" itemStyle="padding: 0;height:88rpx" lineWidth="72rpx" lineHeight="4rpx">
|
||||
</u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_echarts_list">
|
||||
<view class="_echarts_list_box">
|
||||
<qiun-data-charts type="area" ref="refChartsOpts" :canvas2d="true"
|
||||
:opts="chartsOpts" :chartData="chartData" @getIndex="touchLegend"
|
||||
:inScrollView="true" />
|
||||
<view class="_y_container_echarts_tips">
|
||||
<view class="_echarts_tips_box">
|
||||
<text class="name">2023-01-01提成</text>
|
||||
<text class="num">+21.5</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_echarts_list">
|
||||
<view class="_echarts_list_box">
|
||||
<qiun-data-charts type="area" ref="refChartsOpts" :canvas2d="true"
|
||||
:opts="chartsOpts" :chartData="chartData" @getIndex="touchLegend"
|
||||
:inScrollView="true" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_list">
|
||||
<u-cell-group>
|
||||
<u-cell>
|
||||
<view slot="title" class="u_slot_title">
|
||||
<text class="u_cell_text mr20">提成明细</text>
|
||||
<text class="u_cell_tips">(2023-01-03)</text>
|
||||
</view>
|
||||
<view slot="value" class="u_slot_value" @tap="handelSort">
|
||||
<text>智能排序</text>
|
||||
<view class="u_slot_value_image">
|
||||
<image :src="sortComm" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-cell>
|
||||
<u-cell value="+12.66" label="2023-01-03" v-for="m in 6" :key="m">
|
||||
<view slot="title" class="u_slot_title">
|
||||
<text class="u_cell_text mr20">是米月光藏在我心上</text>
|
||||
<u-tag text="书编号:0212" size="mini" bgColor="#F0F1F2" color="#727375"
|
||||
borderColor="#F0F1F2"></u-tag>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<view class="_y_container_list_no_tips">
|
||||
<text>没有更多了~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_list">
|
||||
<u-cell-group>
|
||||
<u-cell title="个人设置"></u-cell>
|
||||
<u-cell title="会员等级" value="新版本"></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -105,6 +127,8 @@
|
||||
import PerMoNavBg from '@/static/novel/personalMoney/per_mo_nav_bg.png';
|
||||
import MoneyCommission from '@/static/novel/personalMoney/money_commission.png';
|
||||
import MoneyConsumption from '@/static/novel/personalMoney/money_consumption.png';
|
||||
import PerOrder from '@/static/novel/performance/per_order.png';
|
||||
import PerSequence from '@/static/novel/performance/per_sequence.png';
|
||||
const tabsList = [{
|
||||
name: '日提成',
|
||||
id: '1'
|
||||
@ -141,11 +165,9 @@
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
// disabled: true,
|
||||
data: [{
|
||||
axisLine: false,
|
||||
format: 'commissionFormatter',
|
||||
// min: 1000
|
||||
fontColor: 'rgba(24, 24, 25, 0.42)',
|
||||
titleFontColor: '#181819'
|
||||
}]
|
||||
@ -174,7 +196,8 @@
|
||||
tabsList,
|
||||
chartsOpts,
|
||||
chartData: {},
|
||||
uCharts: {}
|
||||
uCharts: {},
|
||||
sortComm: PerOrder
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
@ -184,6 +207,9 @@
|
||||
touchLegend(event) {
|
||||
console.log(event, "===========")
|
||||
// console.log(new uCharts(this.chartsOpts))
|
||||
},
|
||||
handelSort() {
|
||||
|
||||
},
|
||||
getServerData() {
|
||||
//模拟从服务器获取数据时的延时
|
||||
@ -199,6 +225,7 @@
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -358,7 +385,6 @@
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
padding-bottom: 60rpx;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
|
||||
._detail_com_nav {
|
||||
@ -415,55 +441,119 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 26rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info_scroll_y_container {
|
||||
width: 100%;
|
||||
.info_scroll_y_box {
|
||||
padding: 0 26rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._y_container_tabs {
|
||||
padding: 22rpx 22rpx 22rpx 0;
|
||||
}
|
||||
.info_scroll_y_container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._y_container_echarts_tips {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
._y_container_tabs {
|
||||
padding: 22rpx 22rpx 22rpx 0;
|
||||
}
|
||||
|
||||
._echarts_tips_box {
|
||||
._y_container_echarts_tips {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_tips_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
background-color: #F2F3F5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.name {
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #F23D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_echarts_list {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_list_box {
|
||||
position: relative;
|
||||
height: 340rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list {
|
||||
padding: 0 24rpx 0 24rpx;
|
||||
|
||||
.u-cell-group__wrapper {
|
||||
|
||||
>.u-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.u_slot_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.u_cell_text {
|
||||
color: #181819;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.u_cell_tips {
|
||||
color: #9E9E9E;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-cell__body {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.u-cell__value {
|
||||
color: #F23D3D;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.u_slot_value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9E9E9E;
|
||||
font-size: 22rpx;
|
||||
|
||||
.u_slot_value_image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list_no_tips {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
background-color: #F2F3F5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.name {
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #F23D3D;
|
||||
}
|
||||
height: 80rpx;
|
||||
line-height: 76rpx;
|
||||
color: #84878A;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_echarts_list {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_list_box {
|
||||
position: relative;
|
||||
height: 340rpx;
|
||||
}
|
||||
}
|
||||
._y_container_list {
|
||||
padding: 0 24rpx 0 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
600
pagesA/shortPlay/copywritingPersonal/copywritingPersonal.vue
Normal file
600
pagesA/shortPlay/copywritingPersonal/copywritingPersonal.vue
Normal file
@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<view class="personalMoney_content">
|
||||
<view class="_con_header_box">
|
||||
<u-navbar title="和裴瑶业绩" @rightClick="rightClick" :autoBack="true" :placeholder="true" bgColor="transparent"
|
||||
leftIconColor="#FFF">
|
||||
</u-navbar>
|
||||
<view class="_con_header_bg">
|
||||
<image :src="PerMoNavBg" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_con_body_box">
|
||||
<view class="_total_money_box">
|
||||
<view class="_total_money_col pr14">
|
||||
<view class="_total_money_commission _money_col_com">
|
||||
<view class="_col_com_bg">
|
||||
<image :src="MoneyCommission" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_col_com_con">
|
||||
<view class="com_con_money">
|
||||
<view class="symbol">￥</view>
|
||||
<view class="money">1119.5</view>
|
||||
</view>
|
||||
<view class="com_con_tips">
|
||||
<view class="name">提成</view>
|
||||
<view class="percentage ml8">2‰</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_total_money_col pl14">
|
||||
<view class="_total_money_consumption _money_col_com">
|
||||
<view class="_col_com_bg">
|
||||
<image :src="MoneyConsumption" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_col_com_con">
|
||||
<view class="com_con_money">
|
||||
<view class="symbol">￥</view>
|
||||
<view class="money">0</view>
|
||||
</view>
|
||||
<view class="com_con_tips">
|
||||
<view class="name">现金消费</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_per_detail_box">
|
||||
<view class="detail_box_header"></view>
|
||||
<view class="_detail_box_com">
|
||||
<view class="_detail_com_nav">
|
||||
<uni-section type="line" title="业绩详情" titleFontSize="32rpx" titleColor="#181819">
|
||||
<template slot="right">
|
||||
<view class="_com_nav_section">
|
||||
<u-icon name="calendar" color="#2F5BFA"></u-icon>
|
||||
<text class="_section_txt">日期区间选择</text>
|
||||
</view>
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
<view class="_detail_com_info">
|
||||
<scroll-view scroll-y="true" class="_detail_com_info_scroll_y" @scrolltolower="scrolltolower">
|
||||
<view class="info_scroll_y_box">
|
||||
<view class="info_scroll_y_container">
|
||||
<view class="_y_container_tabs">
|
||||
<u-tabs :list="tabsList" :scrollable="false" :activeStyle="{
|
||||
color: '#446BFA',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" :inactiveStyle="{
|
||||
color: '#181819',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" itemStyle="padding: 0;height:88rpx" lineWidth="72rpx" lineHeight="4rpx">
|
||||
</u-tabs>
|
||||
</view>
|
||||
<view class="_y_container_echarts_tips">
|
||||
<view class="_echarts_tips_box">
|
||||
<text class="name">2023-01-01提成</text>
|
||||
<text class="num">+21.5</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_echarts_list">
|
||||
<view class="_echarts_list_box">
|
||||
<qiun-data-charts type="area" ref="refChartsOpts" :canvas2d="true"
|
||||
:opts="chartsOpts" :chartData="chartData" @getIndex="touchLegend"
|
||||
:inScrollView="true" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_list">
|
||||
<u-cell-group>
|
||||
<u-cell>
|
||||
<view slot="title" class="u_slot_title">
|
||||
<text class="u_cell_text mr20">提成明细</text>
|
||||
<text class="u_cell_tips">(2023-01-03)</text>
|
||||
</view>
|
||||
<view slot="value" class="u_slot_value" @tap="handelSort">
|
||||
<text>智能排序</text>
|
||||
<view class="u_slot_value_image">
|
||||
<image :src="sortComm" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-cell>
|
||||
<u-cell label="2023-01-03" v-for="m in 6" :key="m">
|
||||
<view slot="title" class="u_slot_title">
|
||||
<text class="u_cell_text mr20">是米月光藏在我心上</text>
|
||||
<u-tag text="书编号:0212" size="mini" bgColor="#F0F1F2" color="#727375"
|
||||
borderColor="#F0F1F2"></u-tag>
|
||||
</view>
|
||||
<view slot="value" class="u_slot_item_value">
|
||||
<view class="_item_value_sum">12.67</view>
|
||||
<view class="_item_value_name">消耗金额</view>
|
||||
</view>
|
||||
<view slot="label" class="u_slot_item_label">
|
||||
<text>短剧ID:66 </text>
|
||||
<text class="ml10">比例: 1000</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<view class="_y_container_list_no_tips">
|
||||
<text>没有更多了~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerMoNavBg from '@/static/novel/personalMoney/per_mo_nav_bg.png';
|
||||
import MoneyCommission from '@/static/novel/personalMoney/money_commission.png';
|
||||
import MoneyConsumption from '@/static/novel/personalMoney/money_consumption.png';
|
||||
import PerOrder from '@/static/novel/performance/per_order.png';
|
||||
import PerSequence from '@/static/novel/performance/per_sequence.png';
|
||||
const tabsList = [{
|
||||
name: '日提成',
|
||||
id: '1'
|
||||
},
|
||||
{
|
||||
name: '月提成',
|
||||
id: '2'
|
||||
},
|
||||
{
|
||||
name: '年提成',
|
||||
id: '3'
|
||||
},
|
||||
{
|
||||
name: '累计提成',
|
||||
id: '4'
|
||||
},
|
||||
];
|
||||
const chartsOpts = {
|
||||
color: ["#F23D3D"],
|
||||
padding: [15, 15, 0, 0],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
boundaryGap: 'justify',
|
||||
fontColor: 'rgba(24, 24, 25, 0.42)',
|
||||
axisLineColor: '#D6D6D8',
|
||||
marginTop: 10,
|
||||
format: 'commissionFormatterX',
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
data: [{
|
||||
axisLine: false,
|
||||
format: 'commissionFormatter',
|
||||
fontColor: 'rgba(24, 24, 25, 0.42)',
|
||||
titleFontColor: '#181819'
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
activeType: "none",
|
||||
width: 2,
|
||||
type: "straight",
|
||||
gradient: true
|
||||
},
|
||||
tooltip: {
|
||||
showBox: false,
|
||||
gridColor: '#F23D3D',
|
||||
gridType: 'dash',
|
||||
dashLength: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerMoNavBg,
|
||||
MoneyCommission,
|
||||
MoneyConsumption,
|
||||
tabsList,
|
||||
chartsOpts,
|
||||
chartData: {},
|
||||
uCharts: {},
|
||||
sortComm: PerOrder
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.getServerData();
|
||||
},
|
||||
methods: {
|
||||
touchLegend(event) {
|
||||
console.log(event, "===========")
|
||||
// console.log(new uCharts(this.chartsOpts))
|
||||
},
|
||||
handelSort() {
|
||||
|
||||
},
|
||||
getServerData() {
|
||||
//模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||||
let res = {
|
||||
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
|
||||
series: [{
|
||||
name: "成交量A",
|
||||
data: [35, 8, 25, 37, 4, 20]
|
||||
}, ]
|
||||
};
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
},
|
||||
scrolltolower() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F3F4F6;
|
||||
}
|
||||
|
||||
.personalMoney_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
._con_header_box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.u-navbar {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
._con_header_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 474rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._con_body_box {
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
._total_money_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
padding: 26rpx;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
._total_money_col {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
._total_money_commission {
|
||||
._col_com_con {
|
||||
color: #D13333;
|
||||
}
|
||||
}
|
||||
|
||||
._total_money_consumption {
|
||||
._col_com_con {
|
||||
color: #1B43D1;
|
||||
}
|
||||
}
|
||||
|
||||
._money_col_com {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._col_com_bg {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: -10rpx;
|
||||
right: -10rpx;
|
||||
bottom: -10rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
._col_com_con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 26rpx 20rpx;
|
||||
z-index: 2;
|
||||
|
||||
.com_con_money {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
|
||||
.symbol {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 46rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.com_con_tips {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
|
||||
.name {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._per_detail_box {
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.detail_box_header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(to bottom, rgba(206, 217, 255, 0.81) 0%, rgba(243, 244, 246, 1) 60%, rgba(243, 244, 246, 1) 100%);
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
border-top: 2rpx solid #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
._detail_box_com {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
|
||||
._detail_com_nav {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
padding: 36rpx 0 16rpx;
|
||||
|
||||
.uni-section {
|
||||
background-color: transparent;
|
||||
padding: 0 26rpx;
|
||||
|
||||
.uni-section-header {
|
||||
padding: 0;
|
||||
|
||||
.uni-section__content-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-section-header__decoration {
|
||||
width: 4rpx;
|
||||
height: 28rpx;
|
||||
background-color: #446BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._com_nav_section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 210rpx;
|
||||
height: 50rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 26rpx;
|
||||
|
||||
._section_txt {
|
||||
font-size: 22rpx;
|
||||
color: #2F5BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._detail_com_info {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
// background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._detail_com_info_scroll_y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.info_scroll_y_box {
|
||||
padding: 0 26rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
.info_scroll_y_container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._y_container_tabs {
|
||||
padding: 22rpx 22rpx 22rpx 0;
|
||||
}
|
||||
|
||||
._y_container_echarts_tips {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_tips_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
background-color: #F2F3F5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.name {
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #F23D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_echarts_list {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_list_box {
|
||||
position: relative;
|
||||
height: 340rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list {
|
||||
padding: 0 24rpx 0 24rpx;
|
||||
|
||||
.u-cell-group__wrapper {
|
||||
|
||||
>.u-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.u_slot_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.u_cell_text {
|
||||
color: #181819;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.u_cell_tips {
|
||||
color: #9E9E9E;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-cell__body {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.u-cell__value {
|
||||
color: #F23D3D;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.u_slot_value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9E9E9E;
|
||||
font-size: 22rpx;
|
||||
|
||||
.u_slot_value_image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u_slot_item_value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
._item_value_sum {
|
||||
font-size: 26rpx;
|
||||
color: #F23D3D;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_value_name {
|
||||
font-size: 20rpx;
|
||||
color: #9E9E9E;
|
||||
line-height: 1;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u_slot_item_label {
|
||||
font-size: 20rpx;
|
||||
color: #727375;
|
||||
line-height: 1;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list_no_tips {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 76rpx;
|
||||
color: #84878A;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
295
pagesA/shortPlay/moviesDivideInto/moviesDivideInto.vue
Normal file
295
pagesA/shortPlay/moviesDivideInto/moviesDivideInto.vue
Normal file
@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<view class="bookManagement_content">
|
||||
<view class="bookManagement_con_nav_bar">
|
||||
<u-navbar title="影视分成" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left" @tap="exitAccountFn">
|
||||
<image :src="PerHeadSculpture" class="is_image"></image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="bookManagement_con_header">
|
||||
<view class="con_header_image">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bookManagement_container">
|
||||
<scroll-view scroll-y="true" class="bookManagement_scroll_Y" @scrolltolower="scrolltolower">
|
||||
<view class="_scroll_Y_box">
|
||||
<view class="_book_search">
|
||||
<view class="_book_search_date">
|
||||
<uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick"
|
||||
:border="false" :clear-icon="false" />
|
||||
</view>
|
||||
<view class="_book_search_select ml10">
|
||||
<uni-data-select v-model="searchSelect" placeholder="请选择员工" :localdata="range"
|
||||
@change="change"></uni-data-select>
|
||||
</view>
|
||||
<view class="_book_search_btn ml10">
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_book_list_box mt24">
|
||||
<view class="_book_detail_container ">
|
||||
<view class="_container_li_item" v-for="(m,idx) in 15" :key="m">
|
||||
<view class="_container_li_one">
|
||||
<view class="_li_one_user_name">彭真</view>
|
||||
<view class="_li_one_user_sum">+12.67</view>
|
||||
</view>
|
||||
<view class="_container_li_two">
|
||||
<view class="_li_two_left">
|
||||
<text>员工ID：</text>
|
||||
<text class="ml10">职位：</text>
|
||||
</view>
|
||||
<view class="_li_two_right">
|
||||
提成
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_container_li_footer">
|
||||
<view class="_li_footer_t">
|
||||
<view class="_li_footer_t_sum" style="color:#F23D3D">1175.33</view>
|
||||
<view class="_li_footer_t_name">合计提成0.8%</view>
|
||||
</view>
|
||||
<view class="_li_footer_t">
|
||||
<view class="_li_footer_t_sum" style="color:#446BFA">1175.33</view>
|
||||
<view class="_li_footer_t_name">合计现金消耗</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
keyword: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrolltolower() {
|
||||
|
||||
},
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F3F4F6;
|
||||
}
|
||||
|
||||
.bookManagement_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bookManagement_con_nav_bar {
|
||||
.u-navbar {
|
||||
.u-navbar__content {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.u_nav_slot {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_con_header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background: linear-gradient(180deg, #3391FF 0%, rgba(67, 125, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_container {
|
||||
// padding: 24rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
|
||||
.bookManagement_scroll_Y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
._scroll_Y_box {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._book_search {
|
||||
display: flex;
|
||||
|
||||
._book_search_date {
|
||||
width: 360rpx;
|
||||
|
||||
.text-center {
|
||||
font-size: 22rpx;
|
||||
color: #181819;
|
||||
}
|
||||
}
|
||||
|
||||
._book_search_select {
|
||||
width: 200rpx;
|
||||
|
||||
.uni-stat__select {
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.uni-select {
|
||||
border: none;
|
||||
|
||||
.uni-select__input-placeholder {
|
||||
font-size: 22rpx;
|
||||
color: #181819;
|
||||
}
|
||||
|
||||
.uniui-bottom,
|
||||
.uniui-top {
|
||||
color: #181819 !important;
|
||||
}
|
||||
|
||||
.uni-select__input-text {
|
||||
font-size: 22rpx;
|
||||
color: #181819;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._book_search_btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
color: #181819;
|
||||
font-size: 22rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._book_list_box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._book_detail_container {
|
||||
|
||||
._container_li_item {
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 2rpx solid #EBEEF5;
|
||||
|
||||
._container_li_one {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
._li_one_user_name {
|
||||
font-size: 28rpx;
|
||||
color: #181819;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._li_one_user_sum {
|
||||
font-size: 26rpx;
|
||||
color: #F23D3D;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
._container_li_two {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
|
||||
._li_two_left {
|
||||
font-size: 20rpx;
|
||||
color: #727375;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._li_two_right {
|
||||
font-size: 20rpx;
|
||||
color: #727375;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._container_li_footer {
|
||||
display: flex;
|
||||
padding: 28rpx 0;
|
||||
|
||||
._li_footer_t {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
._li_footer_t_sum {
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
._li_footer_t_name {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #84878A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
589
pagesA/shortPlay/personalMoney/personalMoney.vue
Normal file
589
pagesA/shortPlay/personalMoney/personalMoney.vue
Normal file
@ -0,0 +1,589 @@
|
||||
<template>
|
||||
<view class="personalMoney_content">
|
||||
<view class="_con_header_box">
|
||||
<u-navbar title="和裴瑶业绩" @rightClick="rightClick" :autoBack="true" :placeholder="true" bgColor="transparent"
|
||||
leftIconColor="#FFF">
|
||||
</u-navbar>
|
||||
<view class="_con_header_bg">
|
||||
<image :src="PerMoNavBg" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_con_body_box">
|
||||
<view class="_total_money_box">
|
||||
<view class="_total_money_col pr14">
|
||||
<view class="_total_money_commission _money_col_com">
|
||||
<view class="_col_com_bg">
|
||||
<image :src="MoneyCommission" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_col_com_con">
|
||||
<view class="com_con_money">
|
||||
<view class="symbol">￥</view>
|
||||
<view class="money">1119.5</view>
|
||||
</view>
|
||||
<view class="com_con_tips">
|
||||
<view class="name">提成</view>
|
||||
<view class="percentage ml8">2‰</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_total_money_col pl14">
|
||||
<view class="_total_money_consumption _money_col_com">
|
||||
<view class="_col_com_bg">
|
||||
<image :src="MoneyConsumption" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_col_com_con">
|
||||
<view class="com_con_money">
|
||||
<view class="symbol">￥</view>
|
||||
<view class="money">0</view>
|
||||
</view>
|
||||
<view class="com_con_tips">
|
||||
<view class="name">现金消费</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_per_detail_box">
|
||||
<view class="detail_box_header"></view>
|
||||
<view class="_detail_box_com">
|
||||
<view class="_detail_com_nav">
|
||||
<uni-section type="line" title="业绩详情" titleFontSize="32rpx" titleColor="#181819">
|
||||
<template slot="right">
|
||||
<view class="_com_nav_section">
|
||||
<u-icon name="calendar" color="#2F5BFA"></u-icon>
|
||||
<text class="_section_txt">日期区间选择</text>
|
||||
</view>
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
<view class="_detail_com_info">
|
||||
<scroll-view scroll-y="true" class="_detail_com_info_scroll_y" @scrolltolower="scrolltolower">
|
||||
<view class="info_scroll_y_box">
|
||||
<view class="info_scroll_y_container">
|
||||
<view class="_y_container_tabs">
|
||||
<u-tabs :list="tabsList" :scrollable="false" :activeStyle="{
|
||||
color: '#446BFA',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" :inactiveStyle="{
|
||||
color: '#181819',
|
||||
fontWeigth:500,
|
||||
fontSize:'28rpx'
|
||||
}" itemStyle="padding: 0;height:88rpx" lineWidth="72rpx" lineHeight="4rpx">
|
||||
</u-tabs>
|
||||
</view>
|
||||
<view class="_y_container_echarts_tips">
|
||||
<view class="_echarts_tips_box">
|
||||
<text class="name">2023-01-01提成</text>
|
||||
<text class="num">+21.5</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_echarts_list">
|
||||
<view class="_echarts_list_box">
|
||||
<qiun-data-charts type="area" ref="refChartsOpts" :canvas2d="true"
|
||||
:opts="chartsOpts" :chartData="chartData" @getIndex="touchLegend"
|
||||
:inScrollView="true" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="_y_container_list">
|
||||
<u-cell-group>
|
||||
<u-cell>
|
||||
<view slot="title" class="u_slot_title">
|
||||
<text class="u_cell_text mr20">提成明细</text>
|
||||
<text class="u_cell_tips">(2023-01-03)</text>
|
||||
</view>
|
||||
<view slot="value" class="u_slot_value" @tap="handelSort">
|
||||
<text>智能排序</text>
|
||||
<view class="u_slot_value_image">
|
||||
<image :src="sortComm" class="is_image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-cell>
|
||||
<u-cell label="2023-01-03" v-for="m in 6" :key="m">
|
||||
<view slot="title" class="u_slot_title">
|
||||
<text class="u_cell_text mr20">是米月光藏在我心上</text>
|
||||
<u-tag text="书编号:0212" size="mini" bgColor="#F0F1F2" color="#727375"
|
||||
borderColor="#F0F1F2"></u-tag>
|
||||
</view>
|
||||
<view slot="value" class="u_slot_item_value">
|
||||
<view class="_item_value_sum">12.67</view>
|
||||
<view class="_item_value_name">消耗金额</view>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<view class="_y_container_list_no_tips">
|
||||
<text>没有更多了~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerMoNavBg from '@/static/novel/personalMoney/per_mo_nav_bg.png';
|
||||
import MoneyCommission from '@/static/novel/personalMoney/money_commission.png';
|
||||
import MoneyConsumption from '@/static/novel/personalMoney/money_consumption.png';
|
||||
import PerOrder from '@/static/novel/performance/per_order.png';
|
||||
import PerSequence from '@/static/novel/performance/per_sequence.png';
|
||||
const tabsList = [{
|
||||
name: '日提成',
|
||||
id: '1'
|
||||
},
|
||||
{
|
||||
name: '月提成',
|
||||
id: '2'
|
||||
},
|
||||
{
|
||||
name: '年提成',
|
||||
id: '3'
|
||||
},
|
||||
{
|
||||
name: '累计提成',
|
||||
id: '4'
|
||||
},
|
||||
];
|
||||
const chartsOpts = {
|
||||
color: ["#F23D3D"],
|
||||
padding: [15, 15, 0, 0],
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
boundaryGap: 'justify',
|
||||
fontColor: 'rgba(24, 24, 25, 0.42)',
|
||||
axisLineColor: '#D6D6D8',
|
||||
marginTop: 10,
|
||||
format: 'commissionFormatterX',
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
data: [{
|
||||
axisLine: false,
|
||||
format: 'commissionFormatter',
|
||||
fontColor: 'rgba(24, 24, 25, 0.42)',
|
||||
titleFontColor: '#181819'
|
||||
}]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
activeType: "none",
|
||||
width: 2,
|
||||
type: "straight",
|
||||
gradient: true
|
||||
},
|
||||
tooltip: {
|
||||
showBox: false,
|
||||
gridColor: '#F23D3D',
|
||||
gridType: 'dash',
|
||||
dashLength: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerMoNavBg,
|
||||
MoneyCommission,
|
||||
MoneyConsumption,
|
||||
tabsList,
|
||||
chartsOpts,
|
||||
chartData: {},
|
||||
uCharts: {},
|
||||
sortComm: PerOrder
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.getServerData();
|
||||
},
|
||||
methods: {
|
||||
touchLegend(event) {
|
||||
console.log(event, "===========")
|
||||
// console.log(new uCharts(this.chartsOpts))
|
||||
},
|
||||
handelSort() {
|
||||
|
||||
},
|
||||
getServerData() {
|
||||
//模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||||
let res = {
|
||||
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
|
||||
series: [{
|
||||
name: "成交量A",
|
||||
data: [35, 8, 25, 37, 4, 20]
|
||||
}, ]
|
||||
};
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
},
|
||||
scrolltolower() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F3F4F6;
|
||||
}
|
||||
|
||||
.personalMoney_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
._con_header_box {
|
||||
flex-shrink: 0;
|
||||
|
||||
.u-navbar {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
._con_header_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 474rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._con_body_box {
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
._total_money_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
padding: 26rpx;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
._total_money_col {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
._total_money_commission {
|
||||
._col_com_con {
|
||||
color: #D13333;
|
||||
}
|
||||
}
|
||||
|
||||
._total_money_consumption {
|
||||
._col_com_con {
|
||||
color: #1B43D1;
|
||||
}
|
||||
}
|
||||
|
||||
._money_col_com {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._col_com_bg {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: -10rpx;
|
||||
right: -10rpx;
|
||||
bottom: -10rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
._col_com_con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 26rpx 20rpx;
|
||||
z-index: 2;
|
||||
|
||||
.com_con_money {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
|
||||
.symbol {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 46rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.com_con_tips {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
|
||||
.name {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._per_detail_box {
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.detail_box_header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(to bottom, rgba(206, 217, 255, 0.81) 0%, rgba(243, 244, 246, 1) 60%, rgba(243, 244, 246, 1) 100%);
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
border-top: 2rpx solid #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
._detail_box_com {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
|
||||
._detail_com_nav {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
padding: 36rpx 0 16rpx;
|
||||
|
||||
.uni-section {
|
||||
background-color: transparent;
|
||||
padding: 0 26rpx;
|
||||
|
||||
.uni-section-header {
|
||||
padding: 0;
|
||||
|
||||
.uni-section__content-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-section-header__decoration {
|
||||
width: 4rpx;
|
||||
height: 28rpx;
|
||||
background-color: #446BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._com_nav_section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 210rpx;
|
||||
height: 50rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 26rpx;
|
||||
|
||||
._section_txt {
|
||||
font-size: 22rpx;
|
||||
color: #2F5BFA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._detail_com_info {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
// background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._detail_com_info_scroll_y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.info_scroll_y_box {
|
||||
padding: 0 26rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
.info_scroll_y_container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
._y_container_tabs {
|
||||
padding: 22rpx 22rpx 22rpx 0;
|
||||
}
|
||||
|
||||
._y_container_echarts_tips {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_tips_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
background-color: #F2F3F5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.name {
|
||||
color: #9E9E9E;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #F23D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_echarts_list {
|
||||
padding: 0 24rpx 24rpx 24rpx;
|
||||
|
||||
._echarts_list_box {
|
||||
position: relative;
|
||||
height: 340rpx;
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list {
|
||||
padding: 0 24rpx 0 24rpx;
|
||||
|
||||
.u-cell-group__wrapper {
|
||||
|
||||
>.u-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.u_slot_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.u_cell_text {
|
||||
color: #181819;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.u_cell_tips {
|
||||
color: #9E9E9E;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-cell__body {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.u-cell__value {
|
||||
color: #F23D3D;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.u_slot_value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9E9E9E;
|
||||
font-size: 22rpx;
|
||||
|
||||
.u_slot_value_image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u_slot_item_value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
._item_value_sum {
|
||||
font-size: 26rpx;
|
||||
color: #F23D3D;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_value_name {
|
||||
font-size: 20rpx;
|
||||
color:#9E9E9E;
|
||||
line-height: 1;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._y_container_list_no_tips {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 76rpx;
|
||||
color: #84878A;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
264
pagesA/shortPlay/shortPlayDetail/shortPlayDetail.vue
Normal file
264
pagesA/shortPlay/shortPlayDetail/shortPlayDetail.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<view class="bookManagement_content">
|
||||
<view class="bookManagement_con_nav_bar">
|
||||
<u-navbar title="短剧详细" :placeholder="true" bgColor="transparent">
|
||||
<view class="u_nav_slot" slot="left" @tap="exitAccountFn">
|
||||
<image :src="PerHeadSculpture" class="is_image"></image>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="bookManagement_con_header">
|
||||
<view class="con_header_image"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bookManagement_container">
|
||||
<scroll-view scroll-y="true" class="bookManagement_scroll_Y" @scrolltolower="scrolltolower">
|
||||
<view class="_scroll_Y_box">
|
||||
<view class="_book_search">
|
||||
<u-row gutter="6">
|
||||
<u-col span="6">
|
||||
<u-search placeholder="短剧名称" v-model="keyword" :showAction="false" bgColor="#FFFFFF"
|
||||
@search="searchKeyword"></u-search>
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<view class="_book_search_date">
|
||||
<uni-datetime-picker v-model="dateRange" type="daterange" @change="datetimeChange"
|
||||
:border="false" :clear-icon="false" />
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
</view>
|
||||
<view class="_book_list_box mt24">
|
||||
<view class="_book_list_container">
|
||||
<view class="_list_con_item_box">
|
||||
<view :class="['_item_box_li', m > 0 ? 'mt50':'']" v-for="m in 10" :key="m">
|
||||
<view class="_li_title">娘娘她一心只想高升</view>
|
||||
<!-- <view class="_li_other_info mt16">
|
||||
<text>编辑：邓莎</text>
|
||||
<text class="ml16">作者：李思瑶</text>
|
||||
</view> -->
|
||||
<view class="_li_money_info mt24">
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_commission">0</view>
|
||||
<view class="_item_name mt16">作者提成</view>
|
||||
</view>
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_edit">0</view>
|
||||
<view class="_item_name mt16">编辑提成</view>
|
||||
</view>
|
||||
<view class="_li_money_info_item">
|
||||
<view class="_item_number">665</view>
|
||||
<view class="_item_name mt16">书编号</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PerHeadSculpture from '@/static/novel/performance/per_head_sculpture.png';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
PerHeadSculpture,
|
||||
keyword: '',
|
||||
dateRange: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrolltolower() {
|
||||
|
||||
},
|
||||
datetimeChange(date) {
|
||||
const startTime = date[0].replace(/-/g, '/');
|
||||
const endTime = date[1].replace(/-/g, '/');
|
||||
this.dateRange = [startTime, endTime];
|
||||
},
|
||||
searchKeyword(v) {
|
||||
console.log(v, "==============")
|
||||
},
|
||||
exitAccountFn() {
|
||||
uni.showModal({
|
||||
title: '确定要退出账号吗？',
|
||||
cancelColor: '#84878A',
|
||||
confirmColor: '#446BFA',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
uni.reLaunch({
|
||||
url: `/pages/logon/logon`
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F3F4F6;
|
||||
}
|
||||
|
||||
.bookManagement_content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bookManagement_con_nav_bar {
|
||||
.u-navbar {
|
||||
.u-navbar__content {
|
||||
.u-navbar__content__title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.u_nav_slot {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_con_header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background: linear-gradient(180deg, #3391FF 0%, rgba(67, 125, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.bookManagement_container {
|
||||
// padding: 24rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
|
||||
.bookManagement_scroll_Y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
._scroll_Y_box {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._book_search {
|
||||
.u-search__content {
|
||||
border-radius: 12rpx !important;
|
||||
|
||||
.u-search__content__input {
|
||||
height: 66rpx !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
._book_search_date {
|
||||
width: 100%;
|
||||
|
||||
.text-center {
|
||||
font-size: 22rpx;
|
||||
color: #181819;
|
||||
}
|
||||
|
||||
.uni-date-x {
|
||||
border-radius: 12rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._book_list_box {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._book_list_container {
|
||||
width: 100%;
|
||||
|
||||
._list_con_item_box {
|
||||
width: 100%;
|
||||
|
||||
._item_box_li {
|
||||
width: 100%;
|
||||
|
||||
._li_title {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
color: #181819;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._li_other_info {
|
||||
display: flex;
|
||||
font-size: 20rpx;
|
||||
color: #727375;
|
||||
}
|
||||
|
||||
._li_money_info {
|
||||
display: flex;
|
||||
|
||||
._li_money_info_item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
._item_name {
|
||||
color: #84878A;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_commission {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #F23D3D;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_edit {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #446BFA;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
._item_number {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #181819;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
119
pagesA/shortPlay/welfareBonus/welfareBonus.vue
Normal file
119
pagesA/shortPlay/welfareBonus/welfareBonus.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="welfareBonus_content">
|
||||
<view class="welfareBonus_list">
|
||||
<view class="_w_b_l_item">
|
||||
<view class="_w_b_l_i_box">
|
||||
<view class="_l_i_b_image">
|
||||
<image src="/static/shortPlay/welfare/welfare_bg_item.png" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_l_i_b_info">
|
||||
<view class="_l_i_b_i_left">
|
||||
<view class="i_left_b">
|
||||
<text class="symbol">￥</text>
|
||||
<text class="sum">8000</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="_l_i_b_i_right">
|
||||
<view>恭喜获得奖金8000元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F3F4F6;
|
||||
|
||||
.welfareBonus_content {
|
||||
width: 100%;
|
||||
|
||||
.welfareBonus_list {
|
||||
width: 100%;
|
||||
padding: 28rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._w_b_l_item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 30rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._w_b_l_i_box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 152rpx;
|
||||
|
||||
._l_i_b_image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
._l_i_b_info {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
|
||||
._l_i_b_i_left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 198rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
.i_left_b {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #F23D3D;
|
||||
|
||||
.symbol {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sum {
|
||||
font-size: 44rpx;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._l_i_b_i_right {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
color: #935E28;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
pagesA/shortPlay/welfareTourism/welfareTourism.vue
Normal file
120
pagesA/shortPlay/welfareTourism/welfareTourism.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view class="welfareTourism_content">
|
||||
<view class="welfareBonus_list">
|
||||
<view class="_w_b_l_item">
|
||||
<view class="_w_b_l_i_box">
|
||||
<view class="_l_i_b_image">
|
||||
<image src="/static/shortPlay/welfare/welfare_bg_item.png" class="is_image"></image>
|
||||
</view>
|
||||
<view class="_l_i_b_info">
|
||||
<view class="_l_i_b_i_left">
|
||||
<view class="i_left_b">5天</view>
|
||||
</view>
|
||||
<view class="_l_i_b_i_right">
|
||||
<view class="_i_right_tips">恭喜获得三亚免费游</view>
|
||||
<view class="_i_right_date">2023/06/01-2023/06/05</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #F3F4F6;
|
||||
|
||||
.welfareTourism_content {
|
||||
width: 100%;
|
||||
|
||||
.welfareBonus_list {
|
||||
width: 100%;
|
||||
padding: 28rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容 iOS 设备 */
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容 iPhone X 及以上设备 */
|
||||
box-sizing: border-box;
|
||||
|
||||
._w_b_l_item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 30rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
|
||||
._w_b_l_i_box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 152rpx;
|
||||
|
||||
._l_i_b_image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
._l_i_b_info {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
|
||||
._l_i_b_i_left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 198rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
.i_left_b {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #F23D3D;
|
||||
font-size: 44rpx;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
._l_i_b_i_right {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
._i_right_tips {
|
||||
font-size: 32rpx;
|
||||
color: #935E28;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._i_right_date {
|
||||
font-size: 24rpx;
|
||||
color: #AB7E50;
|
||||
line-height: 1;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/logo.png
BIN
static/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
BIN
static/novel/bookManagement/book_detail_title.png
Normal file
BIN
static/novel/bookManagement/book_detail_title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/novel/bookManagement/book_list_title.png
Normal file
BIN
static/novel/bookManagement/book_list_title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
static/novel/performance/guide.png
Normal file
BIN
static/novel/performance/guide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
static/shortPlay/my/data_img.png
Normal file
BIN
static/shortPlay/my/data_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
BIN
static/shortPlay/my/header_bg.png
Normal file
BIN
static/shortPlay/my/header_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
static/shortPlay/my/welfare_bg.png
Normal file
BIN
static/shortPlay/my/welfare_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
static/shortPlay/my/welfare_model.png
Normal file
BIN
static/shortPlay/my/welfare_model.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
static/shortPlay/my/welfare_tltle.png
Normal file
BIN
static/shortPlay/my/welfare_tltle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/shortPlay/welfare/welfare_bg_item.png
Normal file
BIN
static/shortPlay/welfare/welfare_bg_item.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
36
uni_modules/page-pagination/changelog.md
Normal file
36
uni_modules/page-pagination/changelog.md
Normal file
@ -0,0 +1,36 @@
|
||||
## 1.2.0（2023-06-21）
|
||||
1. 更改样式使用scss，未安装的请自行安装；
|
||||
2. 样式单位rpx更改为px;
|
||||
3. 新增 不显示页码边框 属性；
|
||||
4. 新增属性layout，自定义分页排版；
|
||||
5. 新增每页条数预设值属性(pageSizes)，可选择每页条数，同时新增每页条数切换时触发的事件；
|
||||
6. 移除showAround、showPageInfo和showGoPage属性，功能合并到layout中；
|
||||
## 1.1.2（2022-11-09）
|
||||
解决nvue页面样式错乱问题
|
||||
## 1.1.0（2021-09-07）
|
||||
1. 解决 currentPage设置初始值时，页码不准确；
|
||||
2. 解决打开非第一页后再重新查询 ，当前页和跳转页都变成0；
|
||||
## 1.0.9（2021-08-26）
|
||||
1. 解决支付宝小程序在真机中，上页下页图标不显问题；
|
||||
2. 优化支付宝小程序中自定义分页显示；
|
||||
3. 优化图标，只取需要的图标，减小icon图标文件；
|
||||
## 1.0.8（2021-07-29）
|
||||
解决总页数为1时，仍可以点击下页或尾页的问题
|
||||
## 1.0.6（2021-06-25）
|
||||
1. 解决在 nvue 页面下显示不正常问题；
|
||||
2. 去掉 css 部分使用的scss，方便在没有安装scss编译插件下也能够运行项目；
|
||||
## 1.0.5（2021-05-25）
|
||||
解决页数从0开始的问题；
|
||||
## 1.0.4（2021-05-10）
|
||||
1. 新增 设置显示页码的个数；
|
||||
2. 新增 是否显示分页信息(总条数、每页条数等)；
|
||||
3. 新增 页码input输入框，方便跳转页面；
|
||||
## 1.0.3（2021-05-09）
|
||||
修改部分样式
|
||||
## 1.0.2（2021-05-09）
|
||||
1. 新增 可设置页码按钮大小 ，设置属性 size；
|
||||
2. 新增 可自定义页码颜色，设置属性 color;
|
||||
## 1.0.1（2021-04-27）
|
||||
修改事件的返回值，去掉上页下页等事件，合并为一个 change 事件，详细信息见下面事件说明。
|
||||
## 1.0.0（2021-04-22）
|
||||
第一次提交
|
||||
@ -0,0 +1,35 @@
|
||||
@font-face {
|
||||
font-family: "icon";
|
||||
/* Project id 2498003 */
|
||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN0AAsAAAAACIwAAAMlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDQAqEAIMbATYCJAMYCw4ABCAFhGcHThtVB8iemjxpZAwBC7GBVYDAaYggGvvf7Nl3a6pJDIsmiUz6kChFLAUankgFqpfw/ldn6oBYhwiGL8UJyzos2a9b0gloBx62o6mAuHXr2HdEw7tPMwtANtEZzawY/uHexS1L9FEfgJpz4ccsD6hAxpoWybix7OiA/BbZnUFe1DUCvXY1cb/WNTCBgi8EbkXxPFnVQRofFwoVkK8oUVriQ7fQoFOLeIcq6bn7Q7wNXz7+m/iS1Mza6fbjThnt//bZK1k70DzKH93pinD3hIqMzY3J4lm75imP2LPJQ2+dy9MVSHd1S9KkuT178Lut00EwtpVxNF6vrSFN8o9XVKKxYvvBdeyt/PJxERK//BAyv2oQgl+tCIVfbQUqaBN26cELvEeJm5pkISSpB337SFh4eFTkvHNb23Ht6btBkZLSG16KM0e+quXCtUJonkqu63uuDEur+O3OXT1//YwWOTF55vzVi9HkrB5Dz7kEqaXptBY1OXH6/IVrl64IogS9soJzhVKY5+TTtL8dNnp/NAy9MzGUVglVadpWelW613haFVSmIagJKf07GTsH1o9bziZ/vE5P+pTzESd/yg4KUuXoUden3H4/dP/lLTPGH9IiZVptkS49zLorf3d7Tsej8mlIQj53f4y59BdB8IN/OrEc0vCvuwv4OfDhFLJ0PA3zdkuAKb+VC4hadCut1JV3dxBo1niAxO8r+pOGUZ+n4o2BXYTuHFWApMscZN3mMYWwDlWffWi6nUKvDZ2z+4yx8xClB8uOIwjDrkEy6Btkw+5gCuENVJP+QDPsP/R6GEHL9VmO1M5A4CBjcRMrks1KHD4P6x0DumoWWJVzCpiqYDsuLSop+rvBCmyMEeoaLeOcYMJsFtzFdwOz2YbtzGYEiRcZOLfXFReTupsUSTYLascAAQdkmGgTppDYWBEfneff3hhArTITMCBmSsWolEzqx0oVKQFgujlWUNmNrKJaQ5XhOAIjGPJZYF2iCpg1jw1mr+9kBCRcEcMAl12dYhuNQDlFy/Msr7gGelnHtUiRo0SNFl3KExsDTzMQ7sUUavDJiaTUm6tLEQIAAAA=') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_2498003_mr6aek1y1y8.woff?t=1629946644041') format('woff'),
|
||||
url('//at.alicdn.com/t/font_2498003_mr6aek1y1y8.ttf?t=1629946644041') format('truetype');
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: "icon" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-more:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.icon-left:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-right:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-left1:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.icon-right1:before {
|
||||
content: "\e642";
|
||||
}
|
||||
@ -0,0 +1,733 @@
|
||||
<template>
|
||||
<view class="contact page-pagination" :class="size=='large'?'size-large':size=='small'?'size-small':''">
|
||||
<view class="page-con" :class="!showBorder&&'no-border'">
|
||||
<view class="page-scroll">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<scroll-view scroll-x="true">
|
||||
<!-- #endif -->
|
||||
<view class="page-scroll-child">
|
||||
<view v-for="(item, index) in setLayout" :key="index">
|
||||
<template v-if="item == 'total'">
|
||||
<!-- 总条数 -->
|
||||
<text class="page-total pc-page">共 {{total}} 条</text>
|
||||
</template>
|
||||
<template v-if="item == 'first'">
|
||||
<!-- 首页 -->
|
||||
<view class="pag-btn start" v-if="!numAround" :style="{color}"
|
||||
:class="[nowPage==1&&'btn-ban',btnText&&'btn-text']" @click="clickStart">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text>首页</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text v-if="btnText">首页</text>
|
||||
<text v-else class="icon icon-left1"></text>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item == 'prev'">
|
||||
<!-- 上页 -->
|
||||
<view class="pag-btn prev" :style="{color}" :class="[nowPage==1&&'btn-ban',btnText&&'btn-text']"
|
||||
@click="clickPrev">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text>上页</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text v-if="btnText">上页</text>
|
||||
<text v-else class="icon icon-left"></text>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item == 'page'">
|
||||
<!-- 简单模式 -->
|
||||
<view v-if="mode=='simple'" class="page-num simple">
|
||||
<text :style="{color}" style="margin-right: 5px;">{{nowPage}}</text>/ {{pageNum}}
|
||||
</view>
|
||||
<!-- 复杂模式 -->
|
||||
<view class="page-num" v-else>
|
||||
<template v-if="pageNum <= showPageSize">
|
||||
<view v-for="page in pageNumArr" :key="page" class="pag-btn" :class="page==nowPage&&'active'"
|
||||
:style="{color, backgroundColor:(page==nowPage?color:''), borderColor:(page==nowPage?color:'')}"
|
||||
@click="clickPage(page)">{{page}}</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 第一页页码 -->
|
||||
<view class="pag-btn" :class="nowPage==1&&'active'"
|
||||
:style="{color, backgroundColor:(nowPage==1?color:''), borderColor:(nowPage==1?color:'')}"
|
||||
v-if="numAround" @click="clickPage(1)">1</view>
|
||||
<!-- 左侧省略号 -->
|
||||
<view class="pag-btn ellipsis-btn"
|
||||
v-if="(forceEllipses && getFirstPage != 1) || (numAround && getFirstPage != 2)">
|
||||
<text class="icon icon-more"></text>
|
||||
</view>
|
||||
<template v-for="(p, i) in showPageSize">
|
||||
<template v-if="i<showPageSize-2">
|
||||
<!-- 中间页码 -->
|
||||
<view :key="i" class="pag-btn" :class="(getFirstPage+i)==nowPage&&'active'"
|
||||
:style="{color, backgroundColor:((getFirstPage+i)==nowPage?color:''),borderColor:((getFirstPage+i)==nowPage?color:'')}"
|
||||
@click="clickPage(getFirstPage+i)">
|
||||
{{getFirstPage+i}}
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 若显示省略号，则页码只显示 showPageSize-2 页 -->
|
||||
<view :key="i" v-if="!forceEllipses && !numAround" class="pag-btn"
|
||||
:class="(getFirstPage+i)==nowPage&&'active'"
|
||||
:style="{color, backgroundColor:((getFirstPage+i)==nowPage?color:''), borderColor:((getFirstPage+i)==nowPage?color:'')}"
|
||||
@click="clickPage(getFirstPage+i)">
|
||||
{{getFirstPage+i}}
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 右侧省略号 -->
|
||||
<view class="pag-btn ellipsis-btn"
|
||||
v-if="(forceEllipses && getFirstPage<pageNum-(showPageSize-3)) || (numAround && getFirstPage < pageNum-(showPageSize-2))">
|
||||
<text class="icon icon-more"></text>
|
||||
</view>
|
||||
<!-- 最后一页页码 -->
|
||||
<view class="pag-btn last-page" :class="nowPage==pageNum&&'active'"
|
||||
:style="{color,backgroundColor:(nowPage==pageNum?color:''),borderColor:(nowPage==pageNum?color:'')}"
|
||||
v-if="numAround && getFirstPage < pageNum-(showPageSize-3)" @click="clickPage(pageNum)">{{pageNum}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item == 'next'">
|
||||
<!-- 下页 -->
|
||||
<view class="pag-btn next" :style="{color}" :class="[pageNum<=nowPage&&'btn-ban',btnText&&'btn-text']"
|
||||
@click="clickNext">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text>下页</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text v-if="btnText">下页</text>
|
||||
<text v-else class="icon icon-right"></text>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item == 'last'">
|
||||
<!-- 尾页 -->
|
||||
<view class="pag-btn end" v-if="!numAround" :style="{color}"
|
||||
:class="[pageNum<=nowPage&&'btn-ban',btnText&&'btn-text']" @click="clickEnd">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text>尾页</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text v-if="btnText">尾页</text>
|
||||
<text v-else class="icon icon-right1"></text>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item == 'limit'">
|
||||
<!-- 选择每页条数 -->
|
||||
<view class="page-limit pc-page">
|
||||
<picker v-model="pageSizeIndex" :range="newPageSizes" @change="changePageSize">
|
||||
<text class="page-input">{{newPageSizes[pageSizeIndex]}}</text>
|
||||
<text class="icon icon-left"></text>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item == 'jumper'">
|
||||
<!-- 前往页数 -->
|
||||
<view class="page-go pc-page">前往第
|
||||
<template v-if="trigger=='blur'">
|
||||
<input class="page-input" v-model="inputPage" @blur="goPage" @input="onInput" />页
|
||||
</template>
|
||||
<template v-else>
|
||||
<input class="page-input" v-model="inputPage" @input="onInput" />页
|
||||
<text class="page-input-btn" @click="goPage">跳转</text>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="custom-info pc-page">
|
||||
<slot />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="mobile-page">
|
||||
<view class="custom-info">
|
||||
<slot />
|
||||
</view>
|
||||
<view v-for="(item, index) in mLayout" :key="index">
|
||||
<template v-if="item == 'total'">
|
||||
<!-- 总条数 -->
|
||||
<view class="page-total">共 {{total}} 条</view>
|
||||
</template>
|
||||
<template v-if="item == 'limit'">
|
||||
<!-- 选择每页条数 -->
|
||||
<view class="page-limit">
|
||||
<picker v-model="pageSizeIndex" :range="newPageSizes" @change="changePageSize">
|
||||
<text class="page-input">{{newPageSizes[pageSizeIndex]}}</text>
|
||||
<text class="icon icon-left"></text>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item == 'jumper'">
|
||||
<!-- 前往页数 -->
|
||||
<view class="page-go">前往第
|
||||
<template v-if="trigger=='blur'">
|
||||
<input class="page-input" v-model="inputPage" @blur="goPage" @input="onInput" />页
|
||||
</template>
|
||||
<template v-else>
|
||||
<input class="page-input" v-model="inputPage" @input="onInput" />页
|
||||
<text class="page-input-btn" @click="goPage">跳转</text>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* @property {Number} total 数据总条数，默认0
|
||||
* @property {Number} pageSize 每页显示条数，默认10
|
||||
* @property {Number} currentPage 当前页，默认1
|
||||
* @property {String} mode = [multi|simple] 显示模式，默认multi
|
||||
* @value multi 标准模式(默认)
|
||||
* @value simple 简单模式，只显示当前页/总页数
|
||||
* @property {Boolean} btnText = [true|false] 上页、下页、首页和尾页按钮是否显示汉字，默认false使用箭头表示
|
||||
* @property {Boolean} numAround = [true|false] 是否用页码中的第一页和最后一页表示首尾页，将不在显示首尾页，默认false
|
||||
* @property {Boolean} forceEllipses = [true|false] 是否显示省略号，默认false
|
||||
* @property {Number} showPageSize 中间页码显示的个数，默认5
|
||||
* @property {String} size = [large|normal|small] 按钮大小，默认normal
|
||||
* @value large 大号按钮
|
||||
* @value normal 普通按钮(默认)
|
||||
* @value small 小型按钮
|
||||
* @property {String} color 自定义页码颜色，默认#1989FA
|
||||
* @property {Boolean} showBorder = [true|false] 是否显示页码边框，默认true
|
||||
* @property {String} layout 自定义分页排版，及是否显示 总条数(total)、首页(first)、上页(prev)、页码(page)、下页(next)、尾页(last)、每页条数选项(limit)和页码跳转(jumper)，默认顺序和排版为：first,prev,page,next,last
|
||||
* @property {String} trigger = [blur|click] 页码跳转触发方式，默认blur
|
||||
* @value blur 失去焦点时触发(默认)
|
||||
* @value click 点击跳转按钮触发
|
||||
* @property {Array} pageSizes 每页条数选项预设值，默认[10, 20, 50]
|
||||
* @event {Function} change 当页码改变时触发事件，返回参数e={currentPage,type}，详情参数见文档
|
||||
* @event {Function} sizeChange 每页条数(pageSize)改变时会触发，返回参数e={pageSize}
|
||||
*/
|
||||
export default {
|
||||
name: 'PagePagination',
|
||||
props: {
|
||||
total: { // 总条数
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
pageSize: { // 每页条数
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
currentPage: { // 当前页
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
showPageSize: { // 显示的页码个数
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
mode: { //显示模式
|
||||
type: String,
|
||||
default: "multi"
|
||||
},
|
||||
forceEllipses: { // 是否显示省略号
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
btnText: { // 是否显示汉字
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
numAround: { // 是否用页码表示首尾页
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: { // 按钮大小
|
||||
type: String,
|
||||
default: "normal"
|
||||
},
|
||||
color: { // 页码颜色
|
||||
type: String,
|
||||
default: "#1989FA"
|
||||
},
|
||||
trigger: { // 跳转页码触发方式
|
||||
type: String,
|
||||
default: "blur"
|
||||
},
|
||||
layout: { // 自定义布局
|
||||
type: String,
|
||||
default: "first,prev,page,next,last"
|
||||
},
|
||||
showBorder: { // 是否显示页码边框
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
pageSizes: { // 每页条数选项预设值
|
||||
type: Array,
|
||||
default () {
|
||||
return [10, 20, 50]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nowPage: this.currentPage, //当前页
|
||||
inputPage: this.currentPage, //input输入框绑定值
|
||||
mLayout: [],
|
||||
nowPageSize: this.pageSize, // 当前每页条数
|
||||
pageSizeIndex: this.pageSizes.indexOf(this.pageSize),
|
||||
newPageSizes: this.pageSizes.map(item => item + "条/页"),
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentPage(val) {
|
||||
this.nowPage = val > this.pageNum ? this.pageNum : val;
|
||||
this.inputPage = val > this.pageNum ? this.pageNum : val;
|
||||
if (val == 1) {
|
||||
this.nowPage = 1;
|
||||
this.inputPage = 1;
|
||||
}
|
||||
},
|
||||
pageSize(val) {
|
||||
this.nowPageSize = val;
|
||||
this.pageSizeIndex = this.pageSizes.indexOf(val);
|
||||
this.pageSizeEvent();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 总页数
|
||||
pageNum() {
|
||||
return Math.ceil(this.total / this.nowPageSize)
|
||||
},
|
||||
pageNumArr() { // 解决uni-app某些版本中，存在v-for中循环数字时从0开始
|
||||
var pageNumArr = [];
|
||||
for (let i = 0; i < this.pageNum; i++) {
|
||||
pageNumArr.push(i + 1);
|
||||
}
|
||||
return pageNumArr;
|
||||
},
|
||||
// 计算显示的第一个页码
|
||||
getFirstPage() {
|
||||
let firstPage = 0;
|
||||
let a = Math.floor((this.showPageSize - 1) / 2);
|
||||
let b = Math.floor(this.showPageSize / 2) - 1;
|
||||
if (this.nowPage <= a) {
|
||||
if (!this.numAround) firstPage = 1;
|
||||
else firstPage = 2;
|
||||
} else if (this.nowPage >= this.pageNum - b) {
|
||||
if (this.forceEllipses || this.numAround) firstPage = this.pageNum - this.showPageSize + 3;
|
||||
else firstPage = this.pageNum - this.showPageSize + 1;
|
||||
} else {
|
||||
if (this.forceEllipses || this.numAround) firstPage = this.nowPage - a + 1;
|
||||
else firstPage = this.nowPage - a;
|
||||
}
|
||||
return firstPage;
|
||||
},
|
||||
// 设置布局
|
||||
setLayout() {
|
||||
let layoutArr = this.layout.replace(/\s/g, "").split(",");
|
||||
let arr = ["total", "limit", "jumper"];
|
||||
this.mLayout = layoutArr.filter(item => arr.includes(item));
|
||||
return layoutArr;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//选择页码
|
||||
clickPage(page) {
|
||||
if (this.nowPage != page) {
|
||||
this.nowPage = page;
|
||||
this.change(page, 'page');
|
||||
}
|
||||
},
|
||||
//点击上页
|
||||
clickPrev() {
|
||||
if (this.nowPage > 1) {
|
||||
let nowPage = this.nowPage - 1;
|
||||
this.nowPage = nowPage;
|
||||
this.change(nowPage, 'prev');
|
||||
}
|
||||
},
|
||||
//点击下页
|
||||
clickNext() {
|
||||
if (this.nowPage < this.pageNum) {
|
||||
let nowPage = this.nowPage + 1;
|
||||
this.nowPage = nowPage;
|
||||
this.change(nowPage, 'next');
|
||||
}
|
||||
},
|
||||
//点击首页
|
||||
clickStart() {
|
||||
if (this.nowPage != 1) {
|
||||
let nowPage = 1;
|
||||
this.nowPage = nowPage;
|
||||
this.change(nowPage, 'homePage');
|
||||
}
|
||||
},
|
||||
//点击尾页
|
||||
clickEnd() {
|
||||
if (this.nowPage != this.pageNum) {
|
||||
let nowPage = this.pageNum;
|
||||
this.nowPage = nowPage;
|
||||
this.change(nowPage, 'endPage');
|
||||
}
|
||||
},
|
||||
//页码改变时触发
|
||||
change(nowPage, type) {
|
||||
this.inputPage = nowPage;
|
||||
this.$emit('change', nowPage, type);
|
||||
},
|
||||
onInput(e) {
|
||||
let val = parseInt(e.target.value.replace(/[^\d]/g, ''));
|
||||
setTimeout(_ => {
|
||||
this.inputPage = val ? (val > this.pageNum ? this.pageNum : val) : '';
|
||||
}, 10)
|
||||
},
|
||||
goPage() {
|
||||
this.nowPage = parseInt(this.inputPage ? this.inputPage : '1');
|
||||
this.inputPage = parseInt(this.inputPage ? this.inputPage : '1');
|
||||
this.change(parseInt(this.inputPage), 'goPage');
|
||||
},
|
||||
changePageSize(e) { // 更改每页条数
|
||||
this.pageSizeIndex = e.detail.value;
|
||||
this.nowPageSize = this.pageSizes[e.detail.value];
|
||||
this.pageSizeEvent();
|
||||
},
|
||||
pageSizeEvent() {
|
||||
if (this.nowPage > this.pageNum) {
|
||||
this.nowPage = this.pageNum;
|
||||
this.inputPage = this.pageNum;
|
||||
}
|
||||
this.$emit('sizeChange', this.nowPageSize);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'icon/iconfont.css';
|
||||
|
||||
$font-size: 14px;
|
||||
$font-color: #606266;
|
||||
|
||||
@mixin page-input {
|
||||
font-size: $font-size;
|
||||
color: $font-color;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border: 1px solid #DCDFE6;
|
||||
background-color: #FFF;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.page-pagination {
|
||||
width: 100%;
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
/* #endif */
|
||||
|
||||
.page-con {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
/* #endif */
|
||||
|
||||
.page-scroll {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
/* #endif */
|
||||
|
||||
.page-scroll-child {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
padding: 0 0 0 10px;
|
||||
|
||||
/* #endif */
|
||||
|
||||
.pag-btn {
|
||||
background-color: #FFF;
|
||||
color: #1989FA;
|
||||
font-size: 12px;
|
||||
border: 1px solid #EBEEF5;
|
||||
padding: 0 11px;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
margin-left: -1px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-num {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pag-btn.active {
|
||||
background-color: #1989FA;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.pag-btn.btn-ban {
|
||||
color: #C0C4CC !important;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.ellipsis-btn {
|
||||
padding: 0 1px;
|
||||
color: #999999;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: auto;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.pag-btn.start,
|
||||
.pag-btn.prev,
|
||||
.pag-btn.next,
|
||||
.pag-btn.end,
|
||||
.pag-btn .icon-more {
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.icon-left,
|
||||
.icon-right {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon-left1,
|
||||
.icon-right1 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
// 简单模式
|
||||
.page-num.simple {
|
||||
padding: 0 40px;
|
||||
line-height: 34px;
|
||||
color: #303133;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 无边框模式
|
||||
.no-border .page-scroll .page-scroll-child {
|
||||
.pag-btn {
|
||||
/* #ifndef APP-NVUE */
|
||||
border: none;
|
||||
background: none;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border: rgba(255, 255, 255, 0);
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.pag-btn.active {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pag-btn.start,
|
||||
.pag-btn.prev,
|
||||
.pag-btn.next,
|
||||
.pag-btn.end {
|
||||
background-color: #F0F0F0 !important;
|
||||
border-radius: 4px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.page-num {
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端
|
||||
.mobile-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
line-height: 28px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 附加功能样式 */
|
||||
// 总条数
|
||||
.page-total {
|
||||
display: flex;
|
||||
color: $font-color;
|
||||
font-size: $font-size;
|
||||
margin: 0 5px;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
// 每页条数
|
||||
.page-limit {
|
||||
margin: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
|
||||
.page-input {
|
||||
@include page-input;
|
||||
/* #ifndef APP-NVUE */
|
||||
outline: none;
|
||||
/* #endif */
|
||||
padding: 0 18px 0 6px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 1px;
|
||||
color: #C0C4CC;
|
||||
font-size: 12px;
|
||||
font-weight: 100;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转页码
|
||||
.page-go {
|
||||
color: $font-color;
|
||||
font-size: $font-size;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0 5px;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
|
||||
.page-input {
|
||||
@include page-input;
|
||||
width: 46px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.page-input-btn {
|
||||
@include page-input;
|
||||
padding: 0 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义页码信息
|
||||
.custom-info {
|
||||
margin: 0 10px;
|
||||
color: $font-color;
|
||||
font-size: $font-size;
|
||||
}
|
||||
}
|
||||
|
||||
// 大号模式
|
||||
.page-pagination.size-large .page-con .page-scroll-child {
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
|
||||
.pag-btn {
|
||||
padding: 0 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.pag-btn.start,
|
||||
.pag-btn.prev,
|
||||
.pag-btn.next,
|
||||
.pag-btn.end,
|
||||
.ellipsis-btn {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.pag-btn.btn-text {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.icon-left,
|
||||
.icon-right {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.icon-left1,
|
||||
.icon-right1 {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
// 小号按钮
|
||||
.page-pagination.size-small .page-con .page-scroll-child {
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
|
||||
.pag-btn {
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.pag-btn.start,
|
||||
.pag-btn.prev,
|
||||
.pag-btn.next,
|
||||
.pag-btn.end {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.ellipsis-btn {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.icon-left,
|
||||
.icon-right {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.icon-left1,
|
||||
.icon-right1 {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.page-pagination .pc-page {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-pagination .mobile-page {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 450px) {
|
||||
.page-pagination .pc-page {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-pagination .mobile-page {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
76
uni_modules/page-pagination/package.json
Normal file
76
uni_modules/page-pagination/package.json
Normal file
@ -0,0 +1,76 @@
|
||||
{
|
||||
"id": "page-pagination",
|
||||
"displayName": "简单实用的分页器",
|
||||
"version": "1.2.0",
|
||||
"description": "简单实用的分页器",
|
||||
"keywords": [
|
||||
"分页器"
|
||||
],
|
||||
"repository": "https://gitee.com/lunc9932/pagination",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
121
uni_modules/page-pagination/readme.md
Normal file
121
uni_modules/page-pagination/readme.md
Normal file
@ -0,0 +1,121 @@
|
||||
## 分页器
|
||||
### 简单介绍
|
||||
- 组件需要依赖 sass 插件 ，请自行安装；
|
||||
- 可自定义显示分页信息，如总条数，每页条数等；
|
||||
- 欢迎大家下载使用，项目源码示例：[https://gitee.com/lunc9932/pagination](https://gitee.com/lunc9932/pagination)
|
||||
- 若有插件导入失败，重启编辑器；
|
||||
|
||||
### API
|
||||
#### 属性说明
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|---------------|---------|---------|-----------------------|
|
||||
| total | Number | 0 | 数据总条数 |
|
||||
| pageSize | Number | 10 | 每页显示条数 |
|
||||
| currentPage | Number | 1 | 当前页数 |
|
||||
| mode | String | multi | 显示模式，可选值：multi / simple<br>multi：标准模式；simple：简单模式，只显示当前页/总页数 |
|
||||
| btnText | Boolean | false | 上页、下页、首页和尾页是否使用汉字，默认使用箭头表示 |
|
||||
| numAround | Boolean | false | 是否保留页码中的第一页和最后一个，为true时不再显示首页和尾页，且中间默认使用省略号 |
|
||||
| forceEllipses | Boolean | false | 总页码数 超过`showPageSize`时，两端页码是否显示省略号 |
|
||||
| showPageSize | Number | 5 | 显示的页码个数，当使用`numAround`和`forceEllipses`属性时，中间显示的页码个数将 减2 |
|
||||
| size | String | normal | 按钮大小，可选值：large / normal / small<br>large：大号按钮；normal：普通按钮(默认)；small：小型按钮 |
|
||||
| color | String | #1989FA | 自定义按钮文字颜色 |
|
||||
| showBorder | Boolean | true | 是否显示按钮页码边框 |
|
||||
| layout | String | first,prev,page,next,last | 自定义分页排版，是否显示 总条数(total)、首页(first)、上页(prev)、页码(page)、下页(next)、尾页(last)、每页条数选项(limit)和页码跳转(jumper)，中间用英文逗号分隔 |
|
||||
| trigger | String | blur | 页码input输入框跳转页码触发方式，当`layout`值中包含 jumper 此项才生效，可选值：blur / click<br>blur：失去焦点时触发(不显示跳转按钮)；click：点击跳转按钮触发 |
|
||||
| pageSizes | Array | [10, 20, 50] | 每页条数选项预设值，可选择每页条数，当`layout`值中包含 limit 此项才生效 |
|
||||
|
||||
注意：
|
||||
1. 当`showPageSize`属性数值过大时，可能会出现横向滚动条；
|
||||
2. 当`showPageSize`属性数值小于3，且`forceEllipses`或`numAround`为 true 时，中间页码将无法显示；
|
||||
3. 只有当 总页码数 超过`showPageSize`，且属性`forceEllipses`或`numAround`为 true 时，省略号才能显示出来；
|
||||
4. `layout`分页排版，同样可自定义分页信息显示顺序；
|
||||
5. 自定义分页信息只需在`<page-pagination>`标签内自定义即可，并不需要写属性；
|
||||
6. **原`showAround`(是否显示首尾页)、`showPageInfo`(是否显示分页信息)和`showGoPage`(是否显示input输入框)属性已失效，功能已合并到`layout`属性中；**
|
||||
7. 由于移动端屏幕宽度限制，total、limit和jumper 将显示在页码的下面；PC端(>=450px，可自行在组件样式中修改)显示一行且按照`layout`属性中的顺序显示；
|
||||
|
||||
#### 事件说明
|
||||
| 事件名 | 说明 | 返回值 |
|
||||
|--------------|---------------------|-----------------------------------|
|
||||
| @change | 页码改变时触发 | 返回值e={currentPage(Number),type(String)}，currentPage：当前页；type：点击的类型，详细见下面说明 |
|
||||
| @sizeChange | 切换每页条数选项预设值 改变`pageSize`时触发| 返回值e={pageSize(Number)}，pageSize：每页条数 |
|
||||
|
||||
##### type返回类型
|
||||
| 类型 | 说明 |
|
||||
| -------- | ---- |
|
||||
| page | 表示点击的是页码 |
|
||||
| prev | 点击的是上页 |
|
||||
| next | 点击的是下页 |
|
||||
| homePage | 点击的是首页 |
|
||||
| endPage | 点击的是尾页 |
|
||||
| goPage | 页码input输入框触发 |
|
||||
|
||||
注意：
|
||||
1. 重复点击同一个页码，不会触发 change 事件，避免不必要的刷新；
|
||||
|
||||
### 基本用法
|
||||
在`template`中使用组件
|
||||
|
||||
```
|
||||
<view class="title">默认</view>
|
||||
<page-pagination :total="page.total" :pageSize="page.pageSize" :currentPage="page.currentPage"
|
||||
@change="change"></page-pagination>
|
||||
|
||||
<view class="title">简单模式（mode="simple"）</view>
|
||||
<page-pagination :total="page.total" mode="simple"></page-pagination>
|
||||
|
||||
<view class="title">无边框（showBorder="false"）</view>
|
||||
<page-pagination :total="page.total" :currentPage="page.currentPage" :showBorder="false"></page-pagination>
|
||||
|
||||
<view class="title">使用汉字表示(btnText)及显示省略号(forceEllipses)</view>
|
||||
<page-pagination :total="page.total" :btnText="true" :forceEllipses="true"></page-pagination>
|
||||
|
||||
<view class="title">保留页码中的第一页和最后一页(numAround)</view>
|
||||
<page-pagination :total="page.total" :numAround="true" :showBorder="false"></page-pagination>
|
||||
|
||||
<view class="title">附加功能(总条数、每页条数 及 页码跳转)(layout)</view>
|
||||
<page-pagination :total="page.total" layout="total,first,prev,page,next,last,limit,jumper"></page-pagination>
|
||||
|
||||
<view class="title">附加功能自定义显示分页项及排列顺序 和<br>自定义每页显示个数选择器的选项设置(pageSizes)</view>
|
||||
<page-pagination class="test-pagination" :numAround="true" :total="page.total" layout="page,prev,next,limit,total"
|
||||
:pageSizes="[10,50,60,100]" @sizeChange="sizeChange">
|
||||
</page-pagination>
|
||||
|
||||
<view class="title">自定义显示分页信息</view>
|
||||
<page-pagination :total="page.total" :pageSize="page.pageSize" :showBorder="false" :numAround="true">
|
||||
<view>total：{{page.total}}，pageSize：{{page.pageSize}}</view>
|
||||
</page-pagination>
|
||||
|
||||
<view class="title">大号按钮(size="large")</view>
|
||||
<page-pagination :total="page.total" :showBorder="false" :showPageSize="4" size="large"></page-pagination>
|
||||
|
||||
<view class="title">小型按钮(size="small")</view>
|
||||
<page-pagination :total="page.total" :showBorder="false" :showPageSize="6" size="small"></page-pagination>
|
||||
|
||||
<view class="title">自定义颜色(color="#F56C6C")</view>
|
||||
<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#F56C6C"></page-pagination>
|
||||
<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#67C23A"></page-pagination>
|
||||
<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#FF00E3"></page-pagination>
|
||||
```
|
||||
在`script`中使用
|
||||
|
||||
```
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: {
|
||||
total: 10000,
|
||||
pageSize: 50,
|
||||
currentPage: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(currentPage, type) {
|
||||
console.log("点击了" + type + "，当前页：" + currentPage);
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
console.log("每页", pageSize, "条");
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
35
uni_modules/uni-data-select/changelog.md
Normal file
35
uni_modules/uni-data-select/changelog.md
Normal file
@ -0,0 +1,35 @@
|
||||
## 1.0.6（2023-04-12）
|
||||
- 修复 微信小程序点击时会改变背景颜色的 bug
|
||||
## 1.0.5（2023-02-03）
|
||||
- 修复 禁用时会显示清空按钮
|
||||
## 1.0.4（2023-02-02）
|
||||
- 优化 查询条件短期内多次变更只查询最后一次变更后的结果
|
||||
- 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue
|
||||
## 1.0.3（2023-01-16）
|
||||
- 修复 不关联服务空间报错的问题
|
||||
## 1.0.2（2023-01-14）
|
||||
- 新增 属性 `format` 可用于格式化显示选项内容
|
||||
## 1.0.1（2022-12-06）
|
||||
- 修复 当where变化时，数据不会自动更新的问题
|
||||
## 0.1.9（2022-09-05）
|
||||
- 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框
|
||||
## 0.1.8（2022-08-29）
|
||||
- 修复 点击的位置不准确
|
||||
## 0.1.7（2022-08-12）
|
||||
- 新增 支持 disabled 属性
|
||||
## 0.1.6（2022-07-06）
|
||||
- 修复 pc端宽度异常的bug
|
||||
## 0.1.5
|
||||
- 修复 pc端宽度异常的bug
|
||||
## 0.1.4（2022-07-05）
|
||||
- 优化 显示样式
|
||||
## 0.1.3（2022-06-02）
|
||||
- 修复 localdata 赋值不生效的 bug
|
||||
- 新增 支持 uni.scss 修改颜色
|
||||
- 新增 支持选项禁用（数据选项设置 disabled: true 即禁用）
|
||||
## 0.1.2（2022-05-08）
|
||||
- 修复 当 value 为 0 时选择不生效的 bug
|
||||
## 0.1.1（2022-05-07）
|
||||
- 新增 记住上次的选项（仅 collection 存在时有效）
|
||||
## 0.1.0（2022-04-22）
|
||||
- 初始化
|
||||
@ -0,0 +1,517 @@
|
||||
<template>
|
||||
<view class="uni-stat__select">
|
||||
<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
|
||||
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
||||
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
||||
<view class="uni-select__input-box" @click="toggleSelector">
|
||||
<view v-if="current" class="uni-select__input-text">{{current}}</view>
|
||||
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
||||
<view v-if="current && clear && !disabled" @click.stop="clearVal" >
|
||||
<uni-icons type="clear" color="#c0c4cc" size="24"/>
|
||||
</view>
|
||||
<view v-else>
|
||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
||||
<view class="uni-select__selector" v-if="showSelector">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
||||
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||
@click="change(item)">
|
||||
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* DataChecklist 数据选择器
|
||||
* @description 通过数据渲染的下拉框组件
|
||||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
||||
* @property {String} value 默认值
|
||||
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||
* @property {Boolean} clear 是否可以清空已选项
|
||||
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||
* @property {String} label 左侧标题
|
||||
* @property {String} placeholder 输入框的提示文字
|
||||
* @property {Boolean} disabled 是否禁用
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uni-data-select",
|
||||
mixins: [uniCloud.mixinDatacom || {}],
|
||||
props: {
|
||||
localdata: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
emptyTips: {
|
||||
type: String,
|
||||
default: '无选项'
|
||||
},
|
||||
clear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
defItem: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
|
||||
format: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSelector: false,
|
||||
current: '',
|
||||
mixinDatacomResData: [],
|
||||
apps: [],
|
||||
channels: [],
|
||||
cacheKey: "uni-data-select-lastSelectedValue",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.debounceGet = this.debounce(() => {
|
||||
this.query();
|
||||
}, 300);
|
||||
if (this.collection && !this.localdata.length) {
|
||||
this.debounceGet();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typePlaceholder() {
|
||||
const text = {
|
||||
'opendb-stat-app-versions': '版本',
|
||||
'opendb-app-channels': '渠道',
|
||||
'opendb-app-list': '应用'
|
||||
}
|
||||
const common = this.placeholder
|
||||
const placeholder = text[this.collection]
|
||||
return placeholder ?
|
||||
common + placeholder :
|
||||
common
|
||||
},
|
||||
valueCom(){
|
||||
// #ifdef VUE3
|
||||
return this.modelValue;
|
||||
// #endif
|
||||
// #ifndef VUE3
|
||||
return this.value;
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localdata: {
|
||||
immediate: true,
|
||||
handler(val, old) {
|
||||
if (Array.isArray(val) && old !== val) {
|
||||
this.mixinDatacomResData = val
|
||||
}
|
||||
}
|
||||
},
|
||||
valueCom(val, old) {
|
||||
this.initDefVal()
|
||||
},
|
||||
mixinDatacomResData: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val.length) {
|
||||
this.initDefVal()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
debounce(fn, time = 100){
|
||||
let timer = null
|
||||
return function(...args) {
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => {
|
||||
fn.apply(this, args)
|
||||
}, time)
|
||||
}
|
||||
},
|
||||
// 执行数据库查询
|
||||
query(){
|
||||
this.mixinDatacomEasyGet();
|
||||
},
|
||||
// 监听查询条件变更事件
|
||||
onMixinDatacomPropsChange(){
|
||||
if (this.collection) {
|
||||
this.debounceGet();
|
||||
}
|
||||
},
|
||||
initDefVal() {
|
||||
let defValue = ''
|
||||
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
||||
defValue = this.valueCom
|
||||
} else {
|
||||
let strogeValue
|
||||
if (this.collection) {
|
||||
strogeValue = this.getCache()
|
||||
}
|
||||
if (strogeValue || strogeValue === 0) {
|
||||
defValue = strogeValue
|
||||
} else {
|
||||
let defItem = ''
|
||||
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
||||
defItem = this.mixinDatacomResData[this.defItem - 1].value
|
||||
}
|
||||
defValue = defItem
|
||||
}
|
||||
if (defValue || defValue === 0) {
|
||||
this.emit(defValue)
|
||||
}
|
||||
}
|
||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||
this.current = def ? this.formatItemName(def) : ''
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {[String, Number]} value
|
||||
* 判断用户给的 value 是否同时为禁用状态
|
||||
*/
|
||||
isDisabled(value) {
|
||||
let isDisabled = false;
|
||||
|
||||
this.mixinDatacomResData.forEach(item => {
|
||||
if (item.value === value) {
|
||||
isDisabled = item.disable
|
||||
}
|
||||
})
|
||||
|
||||
return isDisabled;
|
||||
},
|
||||
|
||||
clearVal() {
|
||||
this.emit('')
|
||||
if (this.collection) {
|
||||
this.removeCache()
|
||||
}
|
||||
},
|
||||
change(item) {
|
||||
if (!item.disable) {
|
||||
this.showSelector = false
|
||||
this.current = this.formatItemName(item)
|
||||
this.emit(item.value)
|
||||
}
|
||||
},
|
||||
emit(val) {
|
||||
this.$emit('input', val)
|
||||
this.$emit('update:modelValue', val)
|
||||
this.$emit('change', val)
|
||||
if (this.collection) {
|
||||
this.setCache(val);
|
||||
}
|
||||
},
|
||||
toggleSelector() {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
this.showSelector = !this.showSelector
|
||||
},
|
||||
formatItemName(item) {
|
||||
let {
|
||||
text,
|
||||
value,
|
||||
channel_code
|
||||
} = item
|
||||
channel_code = channel_code ? `(${channel_code})` : ''
|
||||
|
||||
if (this.format) {
|
||||
// 格式化输出
|
||||
let str = "";
|
||||
str = this.format;
|
||||
for (let key in item) {
|
||||
str = str.replace(new RegExp(`{${key}}`,"g"),item[key]);
|
||||
}
|
||||
return str;
|
||||
} else {
|
||||
return this.collection.indexOf('app-list') > 0 ?
|
||||
`${text}(${value})` :
|
||||
(
|
||||
text ?
|
||||
text :
|
||||
`未命名${channel_code}`
|
||||
)
|
||||
}
|
||||
},
|
||||
// 获取当前加载的数据
|
||||
getLoadData(){
|
||||
return this.mixinDatacomResData;
|
||||
},
|
||||
// 获取当前缓存key
|
||||
getCurrentCacheKey(){
|
||||
return this.collection;
|
||||
},
|
||||
// 获取缓存
|
||||
getCache(name=this.getCurrentCacheKey()){
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
return cacheData[name];
|
||||
},
|
||||
// 设置缓存
|
||||
setCache(value, name=this.getCurrentCacheKey()){
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
cacheData[name] = value;
|
||||
uni.setStorageSync(this.cacheKey, cacheData);
|
||||
},
|
||||
// 删除缓存
|
||||
removeCache(name=this.getCurrentCacheKey()){
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
delete cacheData[name];
|
||||
uni.setStorageSync(this.cacheKey, cacheData);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-base-color: #6a6a6a !default;
|
||||
$uni-main-color: #333 !default;
|
||||
$uni-secondary-color: #909399 !default;
|
||||
$uni-border-3: #e5e5e5;
|
||||
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
@media screen and (max-width: 500px) {
|
||||
.hide-on-phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.uni-stat__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 15px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-stat-box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-stat__actived {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
// outline: 1px solid #2979ff;
|
||||
}
|
||||
|
||||
.uni-label-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: $uni-base-color;
|
||||
margin: auto 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.uni-select {
|
||||
font-size: 14px;
|
||||
border: 1px solid $uni-border-3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
user-select: none;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px $uni-border-3;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 35px;
|
||||
|
||||
&--disabled {
|
||||
background-color: #f5f7fa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-select__label {
|
||||
font-size: 16px;
|
||||
// line-height: 22px;
|
||||
height: 35px;
|
||||
padding-right: 10px;
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.uni-select__input-box {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-select__input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.uni-select__input-plac {
|
||||
font-size: 14px;
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.uni-select__selector {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #EBEEF5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 3;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.uni-select__selector-scroll {
|
||||
/* #ifndef APP-NVUE */
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
@media (min-width: 768px) {
|
||||
.uni-select__selector-scroll {
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.uni-select__selector-empty,
|
||||
.uni-select__selector-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
/* border-bottom: solid 1px $uni-border-3; */
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.uni-select__selector-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.uni-select__selector-empty:last-child,
|
||||
.uni-select__selector-item:last-child {
|
||||
/* #ifndef APP-NVUE */
|
||||
border-bottom: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-select__selector__disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* picker 弹出层通用的指示小三角 */
|
||||
.uni-popper__arrow,
|
||||
.uni-popper__arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.uni-popper__arrow {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
top: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.uni-popper__arrow::after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.uni-select__input-text {
|
||||
// width: 280px;
|
||||
width: 100%;
|
||||
color: $uni-main-color;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-select__input-placeholder {
|
||||
color: $uni-base-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uni-select--mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
85
uni_modules/uni-data-select/package.json
Normal file
85
uni_modules/uni-data-select/package.json
Normal file
@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "uni-data-select",
|
||||
"displayName": "uni-data-select 下拉框选择器",
|
||||
"version": "1.0.6",
|
||||
"description": "通过数据驱动的下拉框选择器",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"select",
|
||||
"uni-data-select",
|
||||
"下拉框",
|
||||
"下拉选"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.1"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-load-more"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
uni_modules/uni-data-select/readme.md
Normal file
8
uni_modules/uni-data-select/readme.md
Normal file
@ -0,0 +1,8 @@
|
||||
## DataSelect 下拉框选择器
|
||||
> **组件名：uni-data-select**
|
||||
> 代码块： `uDataSelect`
|
||||
|
||||
当选项过多时，使用下拉菜单展示并选择内容
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
140
uni_modules/uni-datetime-picker/changelog.md
Normal file
140
uni_modules/uni-datetime-picker/changelog.md
Normal file
@ -0,0 +1,140 @@
|
||||
## 2.2.24（2023-06-02）
|
||||
- 修复 部分情况修改时间，开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146)
|
||||
- 优化 当前月可以选择上月、下月的日期
|
||||
## 2.2.23（2023-05-02）
|
||||
- 修复 部分情况修改时间，开始时间未更新 [详情](https://github.com/dcloudio/uni-ui/issues/737)
|
||||
- 修复 部分平台及设备第一次点击无法显示弹框
|
||||
- 修复 ios 日期格式未补零显示及使用异常 [详情](https://ask.dcloud.net.cn/question/162979)
|
||||
## 2.2.22（2023-03-30）
|
||||
- 修复 日历 picker 修改年月后，自动选中当月1日 [详情](https://ask.dcloud.net.cn/question/165937)
|
||||
- 修复 小程序端 低版本 ios NaN [详情](https://ask.dcloud.net.cn/question/162979)
|
||||
## 2.2.21（2023-02-20）
|
||||
- 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362)
|
||||
## 2.2.20（2023-02-17）
|
||||
- 优化 值为空依然选中当天问题
|
||||
- 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间
|
||||
- 优化 非范围选择未选择日期时间，点击确认按钮选中当前日期时间
|
||||
- 优化 字节小程序日期时间范围选择，底部日期换行问题
|
||||
## 2.2.19（2023-02-09）
|
||||
- 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686)
|
||||
## 2.2.18（2023-02-08）
|
||||
- 修复 移动端范围选择change事件触发异常的Bug [详情](https://github.com/dcloudio/uni-ui/issues/684)
|
||||
- 优化 PC端输入日期格式错误时返回当前日期时间
|
||||
- 优化 PC端输入日期时间超出 start、end 限制的Bug
|
||||
- 优化 移动端日期时间范围用法时间展示不完整问题
|
||||
## 2.2.17（2023-02-04）
|
||||
- 修复 小程序端绑定 Date 类型报错的Bug [详情](https://github.com/dcloudio/uni-ui/issues/679)
|
||||
- 修复 vue3 time-picker 无法显示绑定时分秒的Bug
|
||||
## 2.2.16（2023-02-02）
|
||||
- 修复 字节小程序报错的Bug
|
||||
## 2.2.15（2023-02-02）
|
||||
- 修复 某些情况切换月份错误的Bug
|
||||
## 2.2.14（2023-01-30）
|
||||
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/162033)
|
||||
## 2.2.13（2023-01-10）
|
||||
- 修复 多次加载组件造成内存占用的Bug
|
||||
## 2.2.12（2022-12-01）
|
||||
- 修复 vue3 下 i18n 国际化初始值不正确的Bug
|
||||
## 2.2.11（2022-09-19）
|
||||
- 修复 支付宝小程序样式错乱的Bug [详情](https://github.com/dcloudio/uni-app/issues/3861)
|
||||
## 2.2.10（2022-09-19）
|
||||
- 修复 反向选择日期范围，日期显示异常的Bug [详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false)
|
||||
## 2.2.9（2022-09-16）
|
||||
- 可以使用 uni-scss 控制主题色
|
||||
## 2.2.8（2022-09-08）
|
||||
- 修复 close事件无效的Bug
|
||||
## 2.2.7（2022-09-05）
|
||||
- 修复 移动端 maskClick 无效的Bug [详情](https://ask.dcloud.net.cn/question/140824)
|
||||
## 2.2.6（2022-06-30）
|
||||
- 优化 组件样式，调整了组件图标大小、高度、颜色等，与uni-ui风格保持一致
|
||||
## 2.2.5（2022-06-24）
|
||||
- 修复 日历顶部年月及底部确认未国际化的Bug
|
||||
## 2.2.4（2022-03-31）
|
||||
- 修复 Vue3 下动态赋值,单选类型未响应的Bug
|
||||
## 2.2.3（2022-03-28）
|
||||
- 修复 Vue3 下动态赋值未响应的Bug
|
||||
## 2.2.2（2021-12-10）
|
||||
- 修复 clear-icon 属性在小程序平台不生效的Bug
|
||||
## 2.2.1（2021-12-10）
|
||||
- 修复 日期范围选在小程序平台，必须多点击一次才能取消选中状态的Bug
|
||||
## 2.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源 [详情](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移 [https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||
## 2.1.5（2021-11-09）
|
||||
- 新增 提供组件设计资源，组件样式调整
|
||||
## 2.1.4（2021-09-10）
|
||||
- 修复 hide-second 在移动端的Bug
|
||||
- 修复 单选赋默认值时，赋值日期未高亮的Bug
|
||||
- 修复 赋默认值时，移动端未正确显示时间的Bug
|
||||
## 2.1.3（2021-09-09）
|
||||
- 新增 hide-second 属性，支持只使用时分，隐藏秒
|
||||
## 2.1.2（2021-09-03）
|
||||
- 优化 取消选中时（范围选）直接开始下一次选择, 避免多点一次
|
||||
- 优化 移动端支持清除按钮，同时支持通过 ref 调用组件的 clear 方法
|
||||
- 优化 调整字号大小，美化日历界面
|
||||
- 修复 因国际化导致的 placeholder 失效的Bug
|
||||
## 2.1.1（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
- 优化 范围选择器在 pc 端过宽的问题
|
||||
## 2.1.0（2021-08-09）
|
||||
- 新增 适配 vue3
|
||||
## 2.0.19（2021-08-09）
|
||||
- 新增 支持作为 uni-forms 子组件相关功能
|
||||
- 修复 在 uni-forms 中使用时，选择时间报 NAN 错误的Bug
|
||||
## 2.0.18（2021-08-05）
|
||||
- 修复 type 属性动态赋值无效的Bug
|
||||
- 修复 ‘确认’按钮被 tabbar 遮盖 bug
|
||||
- 修复 组件未赋值时范围选左、右日历相同的Bug
|
||||
## 2.0.17（2021-08-04）
|
||||
- 修复 范围选未正确显示当前值的Bug
|
||||
- 修复 h5 平台（移动端）报错 'cale' of undefined 的Bug
|
||||
## 2.0.16（2021-07-21）
|
||||
- 新增 return-type 属性支持返回 date 日期对象
|
||||
## 2.0.15（2021-07-14）
|
||||
- 修复 单选日期类型，初始赋值后不在当前日历的Bug
|
||||
- 新增 clearIcon 属性，显示框的清空按钮可配置显示隐藏（仅 pc 有效）
|
||||
- 优化 移动端移除显示框的清空按钮，无实际用途
|
||||
## 2.0.14（2021-07-14）
|
||||
- 修复 组件赋值为空，界面未更新的Bug
|
||||
- 修复 start 和 end 不能动态赋值的Bug
|
||||
- 修复 范围选类型，用户选择后再次选择右侧日历（结束日期）显示不正确的Bug
|
||||
## 2.0.13（2021-07-08）
|
||||
- 修复 范围选择不能动态赋值的Bug
|
||||
## 2.0.12（2021-07-08）
|
||||
- 修复 范围选择的初始时间在一个月内时，造成无法选择的bug
|
||||
## 2.0.11（2021-07-08）
|
||||
- 优化 弹出层在超出视窗边缘定位不准确的问题
|
||||
## 2.0.10（2021-07-08）
|
||||
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合，导致日期字体看不清的Bug
|
||||
- 优化 弹出层在超出视窗边缘被遮盖的问题
|
||||
## 2.0.9（2021-07-07）
|
||||
- 新增 maskClick 事件
|
||||
- 修复 特殊情况日历 rpx 布局错误的Bug，rpx -> px
|
||||
- 修复 范围选择时清空返回值不合理的bug，['', ''] -> []
|
||||
## 2.0.8（2021-07-07）
|
||||
- 新增 日期时间显示框支持插槽
|
||||
## 2.0.7（2021-07-01）
|
||||
- 优化 添加 uni-icons 依赖
|
||||
## 2.0.6（2021-05-22）
|
||||
- 修复 图标在小程序上不显示的Bug
|
||||
- 优化 重命名引用组件，避免潜在组件命名冲突
|
||||
## 2.0.5（2021-05-20）
|
||||
- 优化 代码目录扁平化
|
||||
## 2.0.4（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 2.0.3（2021-05-10）
|
||||
- 修复 ios 下不识别 '-' 日期格式的Bug
|
||||
- 优化 pc 下弹出层添加边框和阴影
|
||||
## 2.0.2（2021-05-08）
|
||||
- 修复 在 admin 中获取弹出层定位错误的bug
|
||||
## 2.0.1（2021-05-08）
|
||||
- 修复 type 属性向下兼容，默认值从 date 变更为 datetime
|
||||
## 2.0.0（2021-04-30）
|
||||
- 支持日历形式的日期+时间的范围选择
|
||||
> 注意：此版本不向后兼容，不再支持单独时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）
|
||||
## 1.0.6（2021-03-18）
|
||||
- 新增 hide-second 属性，时间支持仅选择时、分
|
||||
- 修复 选择跟显示的日期不一样的Bug
|
||||
- 修复 chang事件触发2次的Bug
|
||||
- 修复 分、秒 end 范围错误的Bug
|
||||
- 优化 更好的 nvue 适配
|
||||
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view class="uni-calendar-item__weeks-box" :class="{
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
|
||||
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
|
||||
<view class="uni-calendar-item__weeks-box-item" :class="{
|
||||
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
|
||||
'uni-calendar-item--checked-range-text': checkHover,
|
||||
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
}">
|
||||
<text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
|
||||
</view>
|
||||
<view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
weeks: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
checkHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
choiceDate(weeks) {
|
||||
this.$emit('change', weeks)
|
||||
},
|
||||
handleMousemove(weeks) {
|
||||
this.$emit('handleMouse', weeks)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-calendar-item__weeks-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 1px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-text {
|
||||
font-size: 14px;
|
||||
// font-family: Lato-Bold, Lato;
|
||||
font-weight: bold;
|
||||
color: darken($color: $uni-primary, $amount: 40%);
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-item {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
.uni-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: #dd524d;
|
||||
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
|
||||
color: #D1D1D1;
|
||||
}
|
||||
|
||||
.uni-calendar-item--today {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 17%;
|
||||
background-color: #dd524d;
|
||||
width:6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.uni-calendar-item--extra {
|
||||
color: #dd524d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
|
||||
background-color: $uni-primary;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--checked .uni-calendar-item--checked-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple {
|
||||
background-color: #F6F7FC;
|
||||
// color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
|
||||
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
|
||||
background-color: $uni-primary;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid #F6F7FC;
|
||||
}
|
||||
|
||||
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
|
||||
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--before-checked-x {
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-left-radius: 50px;
|
||||
box-sizing: border-box;
|
||||
background-color: #F6F7FC;
|
||||
}
|
||||
|
||||
.uni-calendar-item--after-checked-x {
|
||||
border-top-right-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
background-color: #F6F7FC;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,929 @@
|
||||
<template>
|
||||
<view class="uni-calendar" @mouseleave="leaveCale">
|
||||
|
||||
<view v-if="!insert && show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
|
||||
@click="maskClick"></view>
|
||||
|
||||
<view v-if="insert || show" class="uni-calendar__content"
|
||||
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}">
|
||||
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}">
|
||||
|
||||
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('pre')">
|
||||
<view class="uni-calendar__header-btn uni-calendar--left"></view>
|
||||
</view>
|
||||
|
||||
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||||
<text
|
||||
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text>
|
||||
</picker>
|
||||
|
||||
<view class="uni-calendar__header-btn-box" @click.stop="changeMonth('next')">
|
||||
<view class="uni-calendar__header-btn uni-calendar--right"></view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert" class="dialog-close" @click="close">
|
||||
<view class="dialog-close-plus" data-id="close"></view>
|
||||
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-calendar__box">
|
||||
|
||||
<view v-if="showMonth" class="uni-calendar__box-bg">
|
||||
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||
</view>
|
||||
|
||||
<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{MONText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
|
||||
:selected="selected" :checkHover="range" @change="choiceDate"
|
||||
@handleMouse="handleMouse">
|
||||
</calendar-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert && !range && hasTime" class="uni-date-changed uni-calendar--fixed-top"
|
||||
style="padding: 0 80px;">
|
||||
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view>
|
||||
<time-picker type="time" :start="timepickerStartTime" :end="timepickerEndTime" v-model="time"
|
||||
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert && range && hasTime" class="uni-date-changed uni-calendar--fixed-top">
|
||||
<view class="uni-date-changed--time-start">
|
||||
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}}
|
||||
</view>
|
||||
<time-picker type="time" :start="timepickerStartTime" v-model="timeRange.startTime" :border="false"
|
||||
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
<view style="line-height: 50px;">
|
||||
<uni-icons type="arrowthinright" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="uni-date-changed--time-end">
|
||||
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view>
|
||||
<time-picker type="time" :end="timepickerEndTime" v-model="timeRange.endTime" :border="false"
|
||||
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style">
|
||||
</time-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok">
|
||||
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, getDate, getTime } from './util.js';
|
||||
import calendarItem from './calendar-item.vue'
|
||||
import timePicker from './time-picker.vue'
|
||||
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const { t } = initVueI18n(i18nMessages)
|
||||
|
||||
/**
|
||||
* Calendar 日历
|
||||
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
|
||||
* @property {String} date 自定义当前时间，默认为今天
|
||||
* @property {String} startDate 日期选择范围-开始日期
|
||||
* @property {String} endDate 日期选择范围-结束日期
|
||||
* @property {Boolean} range 范围选择
|
||||
* @property {Boolean} insert = [true|false] 插入模式,默认为false
|
||||
* @value true 弹窗模式
|
||||
* @value false 插入模式
|
||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
|
||||
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
|
||||
* @property {Boolean} showMonth 是否选择月份为背景
|
||||
* @property {[String} defaultValue 选择器打开时默认显示的时间
|
||||
* @event {Function} change 日期改变，`insert :ture` 时生效
|
||||
* @event {Function} confirm 确认选择`insert :false` 时生效
|
||||
* @event {Function} monthSwitch 切换月份时触发
|
||||
* @example <uni-calendar :insert="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
|
||||
*/
|
||||
export default {
|
||||
components: {
|
||||
calendarItem,
|
||||
timePicker
|
||||
},
|
||||
props: {
|
||||
date: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
defTime: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
selectableTimes: {
|
||||
type: [Object],
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
startDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
endDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
startPlaceholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
endPlaceholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hasTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
insert: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
clearDate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
checkHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hideSecond: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
pleStatus: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
before: '',
|
||||
after: '',
|
||||
data: [],
|
||||
fulldate: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultValue: {
|
||||
type: [String, Object, Array],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
weeks: [],
|
||||
calendar: {},
|
||||
nowDate: {},
|
||||
aniMaskShow: false,
|
||||
firstEnter: true,
|
||||
time: '',
|
||||
timeRange: {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
tempSingleDate: '',
|
||||
tempRange: {
|
||||
before: '',
|
||||
after: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
date: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (!this.range) {
|
||||
this.tempSingleDate = newVal
|
||||
setTimeout(() => {
|
||||
this.init(newVal)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
defTime: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (!this.range) {
|
||||
this.time = newVal
|
||||
} else {
|
||||
this.timeRange.startTime = newVal.start
|
||||
this.timeRange.endTime = newVal.end
|
||||
}
|
||||
}
|
||||
},
|
||||
startDate(val) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
this.cale.setStartDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
endDate(val) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
this.cale.setEndDate(val)
|
||||
this.cale.setDate(this.nowDate.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
selected(newVal) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||
this.weeks = this.cale.weeks
|
||||
},
|
||||
pleStatus: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
const {
|
||||
before,
|
||||
after,
|
||||
fulldate,
|
||||
which
|
||||
} = newVal
|
||||
this.tempRange.before = before
|
||||
this.tempRange.after = after
|
||||
setTimeout(() => {
|
||||
if (fulldate) {
|
||||
this.cale.setHoverMultiple(fulldate)
|
||||
if (before && after) {
|
||||
this.cale.lastHover = true
|
||||
if (this.rangeWithinMonth(after, before)) return
|
||||
this.setDate(before)
|
||||
} else {
|
||||
this.cale.setMultiple(fulldate)
|
||||
this.setDate(this.nowDate.fullDate)
|
||||
this.calendar.fullDate = ''
|
||||
this.cale.lastHover = false
|
||||
}
|
||||
} else {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
|
||||
this.cale.setDefaultMultiple(before, after)
|
||||
if (which === 'left' && before) {
|
||||
this.setDate(before)
|
||||
this.weeks = this.cale.weeks
|
||||
} else if(after) {
|
||||
this.setDate(after)
|
||||
this.weeks = this.cale.weeks
|
||||
}
|
||||
this.cale.lastHover = true
|
||||
}
|
||||
}, 16)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
timepickerStartTime() {
|
||||
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate
|
||||
return activeDate === this.startDate ? this.selectableTimes.start : ''
|
||||
},
|
||||
timepickerEndTime() {
|
||||
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate
|
||||
return activeDate === this.endDate ? this.selectableTimes.end : ''
|
||||
},
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
selectDateText() {
|
||||
return t("uni-datetime-picker.selectDate")
|
||||
},
|
||||
startDateText() {
|
||||
return this.startPlaceholder || t("uni-datetime-picker.startDate")
|
||||
},
|
||||
endDateText() {
|
||||
return this.endPlaceholder || t("uni-datetime-picker.endDate")
|
||||
},
|
||||
okText() {
|
||||
return t("uni-datetime-picker.ok")
|
||||
},
|
||||
yearText() {
|
||||
return t("uni-datetime-picker.year")
|
||||
},
|
||||
monthText() {
|
||||
return t("uni-datetime-picker.month")
|
||||
},
|
||||
MONText() {
|
||||
return t("uni-calender.MON")
|
||||
},
|
||||
TUEText() {
|
||||
return t("uni-calender.TUE")
|
||||
},
|
||||
WEDText() {
|
||||
return t("uni-calender.WED")
|
||||
},
|
||||
THUText() {
|
||||
return t("uni-calender.THU")
|
||||
},
|
||||
FRIText() {
|
||||
return t("uni-calender.FRI")
|
||||
},
|
||||
SATText() {
|
||||
return t("uni-calender.SAT")
|
||||
},
|
||||
SUNText() {
|
||||
return t("uni-calender.SUN")
|
||||
},
|
||||
confirmText() {
|
||||
return t("uni-calender.confirm")
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 获取日历方法实例
|
||||
this.cale = new Calendar({
|
||||
selected: this.selected,
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
range: this.range,
|
||||
})
|
||||
// 选中某一天
|
||||
this.init(this.date)
|
||||
},
|
||||
methods: {
|
||||
leaveCale() {
|
||||
this.firstEnter = true
|
||||
},
|
||||
handleMouse(weeks) {
|
||||
if (weeks.disable) return
|
||||
if (this.cale.lastHover) return
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.cale.multipleStatus
|
||||
if (!before) return
|
||||
this.calendar = weeks
|
||||
// 设置范围选
|
||||
this.cale.setHoverMultiple(this.calendar.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
// hover时，进入一个日历，更新另一个
|
||||
if (this.firstEnter) {
|
||||
this.$emit('firstEnterCale', this.cale.multipleStatus)
|
||||
this.firstEnter = false
|
||||
}
|
||||
},
|
||||
rangeWithinMonth(A, B) {
|
||||
const [yearA, monthA] = A.split('-')
|
||||
const [yearB, monthB] = B.split('-')
|
||||
return yearA === yearB && monthA === monthB
|
||||
},
|
||||
// 蒙版点击事件
|
||||
maskClick() {
|
||||
this.close()
|
||||
this.$emit('maskClose')
|
||||
},
|
||||
|
||||
clearCalender() {
|
||||
if (this.range) {
|
||||
this.timeRange.startTime = ''
|
||||
this.timeRange.endTime = ''
|
||||
this.tempRange.before = ''
|
||||
this.tempRange.after = ''
|
||||
this.cale.multipleStatus.before = ''
|
||||
this.cale.multipleStatus.after = ''
|
||||
this.cale.multipleStatus.data = []
|
||||
this.cale.lastHover = false
|
||||
} else {
|
||||
this.time = ''
|
||||
this.tempSingleDate = ''
|
||||
}
|
||||
this.calendar.fullDate = ''
|
||||
this.setDate(new Date())
|
||||
},
|
||||
|
||||
bindDateChange(e) {
|
||||
const value = e.detail.value + '-1'
|
||||
this.setDate(value)
|
||||
},
|
||||
/**
|
||||
* 初始化日期显示
|
||||
* @param {Object} date
|
||||
*/
|
||||
init(date) {
|
||||
// 字节小程序 watch 早于 created
|
||||
if(!this.cale){
|
||||
return
|
||||
}
|
||||
this.cale.setDate(date || new Date())
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
this.calendar = {...this.nowDate}
|
||||
if(!date){
|
||||
// 优化date为空默认不选中今天
|
||||
this.calendar.fullDate = ''
|
||||
if(this.defaultValue && !this.range){
|
||||
// 暂时只支持移动端非范围选择
|
||||
const defaultDate = new Date(this.defaultValue)
|
||||
const fullDate = getDate(defaultDate)
|
||||
const year = defaultDate.getFullYear()
|
||||
const month = defaultDate.getMonth()+1
|
||||
const date = defaultDate.getDate()
|
||||
const day = defaultDate.getDay()
|
||||
this.calendar = {
|
||||
fullDate,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
day
|
||||
},
|
||||
this.tempSingleDate = fullDate
|
||||
this.time = getTime(defaultDate, this.hideSecond)
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 打开日历弹窗
|
||||
*/
|
||||
open() {
|
||||
// 弹窗模式并且清理数据
|
||||
if (this.clearDate && !this.insert) {
|
||||
this.cale.cleanMultipleStatus()
|
||||
this.init(this.date)
|
||||
}
|
||||
this.show = true
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.aniMaskShow = true
|
||||
}, 50)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 关闭日历弹窗
|
||||
*/
|
||||
close() {
|
||||
this.aniMaskShow = false
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.show = false
|
||||
this.$emit('close')
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
confirm() {
|
||||
this.setEmit('confirm')
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 变化触发
|
||||
*/
|
||||
change() {
|
||||
if (!this.insert) return
|
||||
this.setEmit('change')
|
||||
},
|
||||
/**
|
||||
* 选择月份触发
|
||||
*/
|
||||
monthSwitch() {
|
||||
let {
|
||||
year,
|
||||
month
|
||||
} = this.nowDate
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month: Number(month)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 派发事件
|
||||
* @param {Object} name
|
||||
*/
|
||||
setEmit(name) {
|
||||
if(!this.range){
|
||||
if(!this.calendar.fullDate){
|
||||
this.calendar = this.cale.getInfo(new Date())
|
||||
this.tempSingleDate = this.calendar.fullDate
|
||||
}
|
||||
if(this.hasTime && !this.time) {
|
||||
this.time = getTime(new Date(), this.hideSecond)
|
||||
}
|
||||
}
|
||||
let {
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fullDate,
|
||||
extraInfo
|
||||
} = this.calendar
|
||||
this.$emit(name, {
|
||||
range: this.cale.multipleStatus,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
time: this.time,
|
||||
timeRange: this.timeRange,
|
||||
fulldate: fullDate,
|
||||
extraInfo: extraInfo || {}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 选择天触发
|
||||
* @param {Object} weeks
|
||||
*/
|
||||
choiceDate(weeks) {
|
||||
if (weeks.disable) return
|
||||
this.calendar = weeks
|
||||
this.calendar.userChecked = true
|
||||
// 设置多选
|
||||
this.cale.setMultiple(this.calendar.fullDate, true)
|
||||
this.weeks = this.cale.weeks
|
||||
this.tempSingleDate = this.calendar.fullDate
|
||||
const beforeDate = new Date(this.cale.multipleStatus.before).getTime()
|
||||
const afterDate = new Date(this.cale.multipleStatus.after).getTime()
|
||||
// 如果先选择结束日期，后选择开始日期，需要交换
|
||||
if (beforeDate > afterDate && afterDate) {
|
||||
this.tempRange.before = this.cale.multipleStatus.after
|
||||
this.tempRange.after = this.cale.multipleStatus.before
|
||||
} else {
|
||||
this.tempRange.before = this.cale.multipleStatus.before
|
||||
this.tempRange.after = this.cale.multipleStatus.after
|
||||
}
|
||||
this.change()
|
||||
},
|
||||
changeMonth(type) {
|
||||
let newDate
|
||||
if(type === 'pre') {
|
||||
newDate = this.cale.getPreMonthObj(this.nowDate.fullDate).fullDate
|
||||
} else if(type === 'next') {
|
||||
newDate = this.cale.getNextMonthObj(this.nowDate.fullDate).fullDate
|
||||
}
|
||||
|
||||
this.setDate(newDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
this.cale.setDate(date)
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-calendar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-calendar__mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar--mask-show {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.uni-calendar--fixed {
|
||||
position: fixed;
|
||||
bottom: calc(var(--window-bottom));
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460px);
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar--ani-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar__content-mobile {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.uni-calendar__header {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__header-mobile {
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.uni-calendar--fixed-top {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-top-color: rgba(0, 0, 0, 0.4);
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar--fixed-width {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__backtoday {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25rpx;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
color: #fff;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.uni-calendar__header-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.uni-calendar__button-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: 14px;
|
||||
color: $uni-primary;
|
||||
/* #ifndef APP-NVUE */
|
||||
letter-spacing: 3px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar__header-btn-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__header-btn {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-left-color: #808080;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-top-color: #555555;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar--left {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.uni-calendar--right {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
|
||||
.uni-calendar__weeks {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-day {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
border-bottom-color: #F5F5F5;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-day-text {
|
||||
font-size: 12px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.uni-calendar__box {
|
||||
position: relative;
|
||||
// padding: 0 10px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.uni-calendar__box-bg {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.uni-calendar__box-bg-text {
|
||||
font-size: 200px;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
opacity: 0.1;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-date-changed {
|
||||
padding: 0 10px;
|
||||
// line-height: 50px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
border-top-color: #DCDCDC;
|
||||
;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-date-btn--ok {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-start {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-end {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-date-changed--time-date {
|
||||
color: #999;
|
||||
line-height: 50px;
|
||||
/* #ifdef MP-TOUTIAO */
|
||||
font-size: 16px;
|
||||
/* #endif */
|
||||
margin-right: 5px;
|
||||
// opacity: 0.6;
|
||||
}
|
||||
|
||||
.time-picker-style {
|
||||
// width: 62px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dialog-close-plus {
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: #737987;
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.dialog-close-rotate {
|
||||
position: absolute;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.uni-datetime-picker--btn {
|
||||
border-radius: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: $uni-primary;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-datetime-picker--btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "select date",
|
||||
"uni-datetime-picker.selectTime": "select time",
|
||||
"uni-datetime-picker.selectDateTime": "select date and time",
|
||||
"uni-datetime-picker.startDate": "start date",
|
||||
"uni-datetime-picker.endDate": "end date",
|
||||
"uni-datetime-picker.startTime": "start time",
|
||||
"uni-datetime-picker.endTime": "end time",
|
||||
"uni-datetime-picker.ok": "ok",
|
||||
"uni-datetime-picker.clear": "clear",
|
||||
"uni-datetime-picker.cancel": "cancel",
|
||||
"uni-datetime-picker.year": "-",
|
||||
"uni-datetime-picker.month": "",
|
||||
"uni-calender.MON": "MON",
|
||||
"uni-calender.TUE": "TUE",
|
||||
"uni-calender.WED": "WED",
|
||||
"uni-calender.THU": "THU",
|
||||
"uni-calender.FRI": "FRI",
|
||||
"uni-calender.SAT": "SAT",
|
||||
"uni-calender.SUN": "SUN",
|
||||
"uni-calender.confirm": "confirm"
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "选择日期",
|
||||
"uni-datetime-picker.selectTime": "选择时间",
|
||||
"uni-datetime-picker.selectDateTime": "选择日期时间",
|
||||
"uni-datetime-picker.startDate": "开始日期",
|
||||
"uni-datetime-picker.endDate": "结束日期",
|
||||
"uni-datetime-picker.startTime": "开始时间",
|
||||
"uni-datetime-picker.endTime": "结束时间",
|
||||
"uni-datetime-picker.ok": "确定",
|
||||
"uni-datetime-picker.clear": "清除",
|
||||
"uni-datetime-picker.cancel": "取消",
|
||||
"uni-datetime-picker.year": "年",
|
||||
"uni-datetime-picker.month": "月",
|
||||
"uni-calender.SUN": "日",
|
||||
"uni-calender.MON": "一",
|
||||
"uni-calender.TUE": "二",
|
||||
"uni-calender.WED": "三",
|
||||
"uni-calender.THU": "四",
|
||||
"uni-calender.FRI": "五",
|
||||
"uni-calender.SAT": "六",
|
||||
"uni-calender.confirm": "确认"
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
{
|
||||
"uni-datetime-picker.selectDate": "選擇日期",
|
||||
"uni-datetime-picker.selectTime": "選擇時間",
|
||||
"uni-datetime-picker.selectDateTime": "選擇日期時間",
|
||||
"uni-datetime-picker.startDate": "開始日期",
|
||||
"uni-datetime-picker.endDate": "結束日期",
|
||||
"uni-datetime-picker.startTime": "開始时间",
|
||||
"uni-datetime-picker.endTime": "結束时间",
|
||||
"uni-datetime-picker.ok": "確定",
|
||||
"uni-datetime-picker.clear": "清除",
|
||||
"uni-datetime-picker.cancel": "取消",
|
||||
"uni-datetime-picker.year": "年",
|
||||
"uni-datetime-picker.month": "月",
|
||||
"uni-calender.SUN": "日",
|
||||
"uni-calender.MON": "一",
|
||||
"uni-calender.TUE": "二",
|
||||
"uni-calender.WED": "三",
|
||||
"uni-calender.THU": "四",
|
||||
"uni-calender.FRI": "五",
|
||||
"uni-calender.SAT": "六",
|
||||
"uni-calender.confirm": "確認"
|
||||
}
|
||||
@ -0,0 +1,934 @@
|
||||
<template>
|
||||
<view class="uni-datetime-picker">
|
||||
<view @click="initTimePicker">
|
||||
<slot>
|
||||
<view class="uni-datetime-picker-timebox-pointer"
|
||||
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
|
||||
<text class="uni-datetime-picker-text">{{time}}</text>
|
||||
<view v-if="!time" class="uni-datetime-picker-time">
|
||||
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
|
||||
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
|
||||
:style="fixNvueBug">
|
||||
<view class="uni-title">
|
||||
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
|
||||
</view>
|
||||
<view v-if="dateShow" class="uni-datetime-picker__container-box">
|
||||
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
|
||||
@change="bindDateChange">
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<!-- 兼容 nvue 不支持伪类 -->
|
||||
<text class="uni-datetime-picker-sign sign-left">-</text>
|
||||
<text class="uni-datetime-picker-sign sign-right">-</text>
|
||||
</view>
|
||||
<view v-if="timeShow" class="uni-datetime-picker__container-box">
|
||||
<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
|
||||
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!hideSecond">
|
||||
<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
|
||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<!-- 兼容 nvue 不支持伪类 -->
|
||||
<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
|
||||
<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
|
||||
</view>
|
||||
<view class="uni-datetime-picker-btn">
|
||||
<view @click="clearTime">
|
||||
<text class="uni-datetime-picker-btn-text">{{clearText}}</text>
|
||||
</view>
|
||||
<view class="uni-datetime-picker-btn-group">
|
||||
<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
|
||||
<text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
|
||||
</view>
|
||||
<view @click="setTime">
|
||||
<text class="uni-datetime-picker-btn-text">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { initVueI18n } from '@dcloudio/uni-i18n'
|
||||
import i18nMessages from './i18n/index.js'
|
||||
const { t } = initVueI18n(i18nMessages)
|
||||
import { fixIosDateFormat } from './util'
|
||||
|
||||
/**
|
||||
* DatetimePicker 时间选择器
|
||||
* @description 可以同时选择日期和时间的选择器
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||
* @property {String} type = [datetime | date | time] 显示模式
|
||||
* @property {Boolean} multiple = [true|false] 是否多选
|
||||
* @property {String|Number} value 默认值
|
||||
* @property {String|Number} start 起始日期或时间
|
||||
* @property {String|Number} end 起始日期或时间
|
||||
* @property {String} return-type = [timestamp | string]
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniDatetimePicker',
|
||||
data() {
|
||||
return {
|
||||
indicatorStyle: `height: 50px;`,
|
||||
visible: false,
|
||||
fixNvueBug: {},
|
||||
dateShow: true,
|
||||
timeShow: true,
|
||||
title: '日期和时间',
|
||||
// 输入框当前时间
|
||||
time: '',
|
||||
// 当前的年月日时分秒
|
||||
year: 1920,
|
||||
month: 0,
|
||||
day: 0,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
// 起始时间
|
||||
startYear: 1920,
|
||||
startMonth: 1,
|
||||
startDay: 1,
|
||||
startHour: 0,
|
||||
startMinute: 0,
|
||||
startSecond: 0,
|
||||
// 结束时间
|
||||
endYear: 2120,
|
||||
endMonth: 12,
|
||||
endDay: 31,
|
||||
endHour: 23,
|
||||
endMinute: 59,
|
||||
endSecond: 59,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'datetime'
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
start: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
end: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
returnType: {
|
||||
type: String,
|
||||
default: 'string'
|
||||
},
|
||||
disabled: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
hideSecond: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// #ifndef VUE3
|
||||
value: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.parseValue(fixIosDateFormat(newVal))
|
||||
this.initTime(false)
|
||||
} else {
|
||||
this.time = ''
|
||||
this.parseValue(Date.now())
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.parseValue(fixIosDateFormat(newVal))
|
||||
this.initTime(false)
|
||||
} else {
|
||||
this.time = ''
|
||||
this.parseValue(Date.now())
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #endif
|
||||
type: {
|
||||
handler(newValue) {
|
||||
if (newValue === 'date') {
|
||||
this.dateShow = true
|
||||
this.timeShow = false
|
||||
this.title = '日期'
|
||||
} else if (newValue === 'time') {
|
||||
this.dateShow = false
|
||||
this.timeShow = true
|
||||
this.title = '时间'
|
||||
} else {
|
||||
this.dateShow = true
|
||||
this.timeShow = true
|
||||
this.title = '日期和时间'
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
start: {
|
||||
handler(newVal) {
|
||||
this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
end: {
|
||||
handler(newVal) {
|
||||
this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
|
||||
// 月、日、时、分、秒可选范围变化后，检查当前值是否在范围内，不在则当前值重置为可选范围第一项
|
||||
months(newVal) {
|
||||
this.checkValue('month', this.month, newVal)
|
||||
},
|
||||
days(newVal) {
|
||||
this.checkValue('day', this.day, newVal)
|
||||
},
|
||||
hours(newVal) {
|
||||
this.checkValue('hour', this.hour, newVal)
|
||||
},
|
||||
minutes(newVal) {
|
||||
this.checkValue('minute', this.minute, newVal)
|
||||
},
|
||||
seconds(newVal) {
|
||||
this.checkValue('second', this.second, newVal)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当前年、月、日、时、分、秒选择范围
|
||||
years() {
|
||||
return this.getCurrentRange('year')
|
||||
},
|
||||
|
||||
months() {
|
||||
return this.getCurrentRange('month')
|
||||
},
|
||||
|
||||
days() {
|
||||
return this.getCurrentRange('day')
|
||||
},
|
||||
|
||||
hours() {
|
||||
return this.getCurrentRange('hour')
|
||||
},
|
||||
|
||||
minutes() {
|
||||
return this.getCurrentRange('minute')
|
||||
},
|
||||
|
||||
seconds() {
|
||||
return this.getCurrentRange('second')
|
||||
},
|
||||
|
||||
// picker 当前值数组
|
||||
ymd() {
|
||||
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
|
||||
},
|
||||
hms() {
|
||||
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
|
||||
},
|
||||
|
||||
// 当前 date 是 start
|
||||
currentDateIsStart() {
|
||||
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
|
||||
},
|
||||
|
||||
// 当前 date 是 end
|
||||
currentDateIsEnd() {
|
||||
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
|
||||
},
|
||||
|
||||
// 当前年、月、日、时、分、秒的最小值和最大值
|
||||
minYear() {
|
||||
return this.startYear
|
||||
},
|
||||
maxYear() {
|
||||
return this.endYear
|
||||
},
|
||||
minMonth() {
|
||||
if (this.year === this.startYear) {
|
||||
return this.startMonth
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
maxMonth() {
|
||||
if (this.year === this.endYear) {
|
||||
return this.endMonth
|
||||
} else {
|
||||
return 12
|
||||
}
|
||||
},
|
||||
minDay() {
|
||||
if (this.year === this.startYear && this.month === this.startMonth) {
|
||||
return this.startDay
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
maxDay() {
|
||||
if (this.year === this.endYear && this.month === this.endMonth) {
|
||||
return this.endDay
|
||||
} else {
|
||||
return this.daysInMonth(this.year, this.month)
|
||||
}
|
||||
},
|
||||
minHour() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart) {
|
||||
return this.startHour
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
return this.startHour
|
||||
}
|
||||
},
|
||||
maxHour() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd) {
|
||||
return this.endHour
|
||||
} else {
|
||||
return 23
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
return this.endHour
|
||||
}
|
||||
},
|
||||
minMinute() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart && this.hour === this.startHour) {
|
||||
return this.startMinute
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.startHour) {
|
||||
return this.startMinute
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
maxMinute() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd && this.hour === this.endHour) {
|
||||
return this.endMinute
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.endHour) {
|
||||
return this.endMinute
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
},
|
||||
minSecond() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
|
||||
return this.startSecond
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.startHour && this.minute === this.startMinute) {
|
||||
return this.startSecond
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
maxSecond() {
|
||||
if (this.type === 'datetime') {
|
||||
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
|
||||
return this.endSecond
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
if (this.hour === this.endHour && this.minute === this.endMinute) {
|
||||
return this.endSecond
|
||||
} else {
|
||||
return 59
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* for i18n
|
||||
*/
|
||||
selectTimeText() {
|
||||
return t("uni-datetime-picker.selectTime")
|
||||
},
|
||||
okText() {
|
||||
return t("uni-datetime-picker.ok")
|
||||
},
|
||||
clearText() {
|
||||
return t("uni-datetime-picker.clear")
|
||||
},
|
||||
cancelText() {
|
||||
return t("uni-datetime-picker.cancel")
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// #ifdef APP-NVUE
|
||||
const res = uni.getSystemInfoSync();
|
||||
this.fixNvueBug = {
|
||||
top: res.windowHeight / 2,
|
||||
left: res.windowWidth / 2
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* @param {Object} item
|
||||
* 小于 10 在前面加个 0
|
||||
*/
|
||||
|
||||
lessThanTen(item) {
|
||||
return item < 10 ? '0' + item : item
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析时分秒字符串，例如：00:00:00
|
||||
* @param {String} timeString
|
||||
*/
|
||||
parseTimeType(timeString) {
|
||||
if (timeString) {
|
||||
let timeArr = timeString.split(':')
|
||||
this.hour = Number(timeArr[0])
|
||||
this.minute = Number(timeArr[1])
|
||||
this.second = Number(timeArr[2])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析选择器初始值，类型可以是字符串、时间戳，例如：2000-10-02、'08:30:00'、 1610695109000
|
||||
* @param {String | Number} datetime
|
||||
*/
|
||||
initPickerValue(datetime) {
|
||||
let defaultValue = null
|
||||
if (datetime) {
|
||||
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
|
||||
} else {
|
||||
defaultValue = Date.now()
|
||||
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
|
||||
}
|
||||
this.parseValue(defaultValue)
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始值规则：
|
||||
* - 用户设置初始值 value
|
||||
* - 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
|
||||
* - 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
|
||||
* - 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
|
||||
* - 无起始终止时间，则初始值为 value
|
||||
* - 无初始值 value，则初始值为当前本地时间 Date.now()
|
||||
* @param {Object} value
|
||||
* @param {Object} dateBase
|
||||
*/
|
||||
compareValueWithStartAndEnd(value, start, end) {
|
||||
let winner = null
|
||||
value = this.superTimeStamp(value)
|
||||
start = this.superTimeStamp(start)
|
||||
end = this.superTimeStamp(end)
|
||||
|
||||
if (start && end) {
|
||||
if (value < start) {
|
||||
winner = new Date(start)
|
||||
} else if (value > end) {
|
||||
winner = new Date(end)
|
||||
} else {
|
||||
winner = new Date(value)
|
||||
}
|
||||
} else if (start && !end) {
|
||||
winner = start <= value ? new Date(value) : new Date(start)
|
||||
} else if (!start && end) {
|
||||
winner = value <= end ? new Date(value) : new Date(end)
|
||||
} else {
|
||||
winner = new Date(value)
|
||||
}
|
||||
|
||||
return winner
|
||||
},
|
||||
|
||||
/**
|
||||
* 转换为可比较的时间戳，接受日期、时分秒、时间戳
|
||||
* @param {Object} value
|
||||
*/
|
||||
superTimeStamp(value) {
|
||||
let dateBase = ''
|
||||
if (this.type === 'time' && value && typeof value === 'string') {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth() + 1
|
||||
const day = now.getDate()
|
||||
dateBase = year + '/' + month + '/' + day + ' '
|
||||
}
|
||||
if (Number(value)) {
|
||||
value = parseInt(value)
|
||||
dateBase = 0
|
||||
}
|
||||
return this.createTimeStamp(dateBase + value)
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析默认值 value，字符串、时间戳
|
||||
* @param {Object} defaultTime
|
||||
*/
|
||||
parseValue(value) {
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
if (this.type === 'time' && typeof value === "string") {
|
||||
this.parseTimeType(value)
|
||||
} else {
|
||||
let defaultDate = null
|
||||
defaultDate = new Date(value)
|
||||
if (this.type !== 'time') {
|
||||
this.year = defaultDate.getFullYear()
|
||||
this.month = defaultDate.getMonth() + 1
|
||||
this.day = defaultDate.getDate()
|
||||
}
|
||||
if (this.type !== 'date') {
|
||||
this.hour = defaultDate.getHours()
|
||||
this.minute = defaultDate.getMinutes()
|
||||
this.second = defaultDate.getSeconds()
|
||||
}
|
||||
}
|
||||
if (this.hideSecond) {
|
||||
this.second = 0
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析可选择时间范围 start、end，年月日字符串、时间戳
|
||||
* @param {Object} defaultTime
|
||||
*/
|
||||
parseDatetimeRange(point, pointType) {
|
||||
// 时间为空，则重置为初始值
|
||||
if (!point) {
|
||||
if (pointType === 'start') {
|
||||
this.startYear = 1920
|
||||
this.startMonth = 1
|
||||
this.startDay = 1
|
||||
this.startHour = 0
|
||||
this.startMinute = 0
|
||||
this.startSecond = 0
|
||||
}
|
||||
if (pointType === 'end') {
|
||||
this.endYear = 2120
|
||||
this.endMonth = 12
|
||||
this.endDay = 31
|
||||
this.endHour = 23
|
||||
this.endMinute = 59
|
||||
this.endSecond = 59
|
||||
}
|
||||
return
|
||||
}
|
||||
if (this.type === 'time') {
|
||||
const pointArr = point.split(':')
|
||||
this[pointType + 'Hour'] = Number(pointArr[0])
|
||||
this[pointType + 'Minute'] = Number(pointArr[1])
|
||||
this[pointType + 'Second'] = Number(pointArr[2])
|
||||
} else {
|
||||
if (!point) {
|
||||
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
|
||||
return
|
||||
}
|
||||
if (Number(point)) {
|
||||
point = parseInt(point)
|
||||
}
|
||||
// datetime 的 end 没有时分秒, 则不限制
|
||||
const hasTime = /[0-9]:[0-9]/
|
||||
if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
|
||||
point)) {
|
||||
point = point + ' 23:59:59'
|
||||
}
|
||||
const pointDate = new Date(point)
|
||||
this[pointType + 'Year'] = pointDate.getFullYear()
|
||||
this[pointType + 'Month'] = pointDate.getMonth() + 1
|
||||
this[pointType + 'Day'] = pointDate.getDate()
|
||||
if (this.type === 'datetime') {
|
||||
this[pointType + 'Hour'] = pointDate.getHours()
|
||||
this[pointType + 'Minute'] = pointDate.getMinutes()
|
||||
this[pointType + 'Second'] = pointDate.getSeconds()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 获取 年、月、日、时、分、秒 当前可选范围
|
||||
getCurrentRange(value) {
|
||||
const range = []
|
||||
for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
|
||||
range.push(i)
|
||||
}
|
||||
return range
|
||||
},
|
||||
|
||||
// 字符串首字母大写
|
||||
capitalize(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
},
|
||||
|
||||
// 检查当前值是否在范围内，不在则当前值重置为可选范围第一项
|
||||
checkValue(name, value, values) {
|
||||
if (values.indexOf(value) === -1) {
|
||||
this[name] = values[0]
|
||||
}
|
||||
},
|
||||
|
||||
// 每个月的实际天数
|
||||
daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
|
||||
return new Date(year, month, 0).getDate();
|
||||
},
|
||||
|
||||
//兼容 iOS、safari 日期格式
|
||||
fixIosDateFormat(value) {
|
||||
if (typeof value === 'string') {
|
||||
value = value.replace(/-/g, '/')
|
||||
}
|
||||
return value
|
||||
},
|
||||
|
||||
/**
|
||||
* 生成时间戳
|
||||
* @param {Object} time
|
||||
*/
|
||||
createTimeStamp(time) {
|
||||
if (!time) return
|
||||
if (typeof time === "number") {
|
||||
return time
|
||||
} else {
|
||||
time = time.replace(/-/g, '/')
|
||||
if (this.type === 'date') {
|
||||
time = time + ' ' + '00:00:00'
|
||||
}
|
||||
return Date.parse(time)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生成日期或时间的字符串
|
||||
*/
|
||||
createDomSting() {
|
||||
const yymmdd = this.year +
|
||||
'-' +
|
||||
this.lessThanTen(this.month) +
|
||||
'-' +
|
||||
this.lessThanTen(this.day)
|
||||
|
||||
let hhmmss = this.lessThanTen(this.hour) +
|
||||
':' +
|
||||
this.lessThanTen(this.minute)
|
||||
|
||||
if (!this.hideSecond) {
|
||||
hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
|
||||
}
|
||||
|
||||
if (this.type === 'date') {
|
||||
return yymmdd
|
||||
} else if (this.type === 'time') {
|
||||
return hhmmss
|
||||
} else {
|
||||
return yymmdd + ' ' + hhmmss
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化返回值，并抛出 change 事件
|
||||
*/
|
||||
initTime(emit = true) {
|
||||
this.time = this.createDomSting()
|
||||
if (!emit) return
|
||||
if (this.returnType === 'timestamp' && this.type !== 'time') {
|
||||
this.$emit('change', this.createTimeStamp(this.time))
|
||||
this.$emit('input', this.createTimeStamp(this.time))
|
||||
this.$emit('update:modelValue', this.createTimeStamp(this.time))
|
||||
} else {
|
||||
this.$emit('change', this.time)
|
||||
this.$emit('input', this.time)
|
||||
this.$emit('update:modelValue', this.time)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户选择日期或时间更新 data
|
||||
* @param {Object} e
|
||||
*/
|
||||
bindDateChange(e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
},
|
||||
bindTimeChange(e) {
|
||||
const val = e.detail.value
|
||||
this.hour = this.hours[val[0]]
|
||||
this.minute = this.minutes[val[1]]
|
||||
this.second = this.seconds[val[2]]
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化弹出层
|
||||
*/
|
||||
initTimePicker() {
|
||||
if (this.disabled) return
|
||||
const value = fixIosDateFormat(this.time)
|
||||
this.initPickerValue(value)
|
||||
this.visible = !this.visible
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发或关闭弹框
|
||||
*/
|
||||
tiggerTimePicker(e) {
|
||||
this.visible = !this.visible
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击“清空”按钮，清空当前值
|
||||
*/
|
||||
clearTime() {
|
||||
this.time = ''
|
||||
this.$emit('change', this.time)
|
||||
this.$emit('input', this.time)
|
||||
this.$emit('update:modelValue', this.time)
|
||||
this.tiggerTimePicker()
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击“确定”按钮
|
||||
*/
|
||||
setTime() {
|
||||
this.initTime()
|
||||
this.tiggerTimePicker()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #007aff !default;
|
||||
|
||||
.uni-datetime-picker {
|
||||
/* #ifndef APP-NVUE */
|
||||
/* width: 100%; */
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-view {
|
||||
height: 130px;
|
||||
width: 270px;
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn {
|
||||
margin-top: 60px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn-text {
|
||||
font-size: 14px;
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-btn-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-cancel {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-mask {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition-duration: 0.3s;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-popup {
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
width: 270px;
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 500px;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 330px;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition-duration: 0.3s;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.fix-nvue-height {
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 330px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-time {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-column {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker-timebox {
|
||||
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 5px;
|
||||
padding: 7px 10px;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-timebox-pointer {
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
.uni-datetime-picker-disabled {
|
||||
opacity: 0.4;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-datetime-picker-text {
|
||||
font-size: 14px;
|
||||
line-height: 50px
|
||||
}
|
||||
|
||||
.uni-datetime-picker-sign {
|
||||
position: absolute;
|
||||
top: 53px;
|
||||
/* 减掉 10px 的元素高度，兼容nvue */
|
||||
color: #999;
|
||||
/* #ifdef APP-NVUE */
|
||||
font-size: 16px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.sign-left {
|
||||
left: 86px;
|
||||
}
|
||||
|
||||
.sign-right {
|
||||
right: 86px;
|
||||
}
|
||||
|
||||
.sign-center {
|
||||
left: 135px;
|
||||
}
|
||||
|
||||
.uni-datetime-picker__container-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.time-hide-second {
|
||||
width: 180px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,453 @@
|
||||
class Calendar {
|
||||
constructor({
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range,
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDateObj(new Date()) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 起始时间
|
||||
this.startDate = startDate
|
||||
// 终止时间
|
||||
this.endDate = endDate
|
||||
// 是否范围选择
|
||||
this.range = range
|
||||
// 多选状态
|
||||
this.cleanMultipleStatus()
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
this.lastHover = false
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
const selectDate = this.getDateObj(date)
|
||||
this.getWeeks(selectDate.fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理多选状态
|
||||
*/
|
||||
cleanMultipleStatus() {
|
||||
this.multipleStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
setStartDate(startDate) {
|
||||
this.startDate = startDate
|
||||
}
|
||||
|
||||
setEndDate(endDate) {
|
||||
this.endDate = endDate
|
||||
}
|
||||
|
||||
getPreMonthObj(date){
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth - 1)
|
||||
const newMonth = date.getMonth()
|
||||
if(oldMonth !== 0 && newMonth - oldMonth === 0){
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
getNextMonthObj(date){
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
const oldMonth = date.getMonth()
|
||||
date.setMonth(oldMonth + 1)
|
||||
const newMonth = date.getMonth()
|
||||
if(newMonth - oldMonth > 1){
|
||||
date.setMonth(newMonth - 1)
|
||||
}
|
||||
return this.getDateObj(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定格式Date对象
|
||||
*/
|
||||
getDateObj(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
|
||||
return {
|
||||
fullDate: getDate(date),
|
||||
year: date.getFullYear(),
|
||||
month: addZero(date.getMonth() + 1),
|
||||
date: addZero(date.getDate()),
|
||||
day: date.getDay()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取上一个月日期集合
|
||||
*/
|
||||
getPreMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
for (let i = amount - 1; i >= 0; i--) {
|
||||
const month = dateObj.month > 1 ? dateObj.month -1 : 12
|
||||
const year = month === 12 ? dateObj.year - 1 : dateObj.year
|
||||
const date = new Date(year,month,-i).getDate()
|
||||
const fullDate = `${year}-${addZero(month)}-${addZero(date)}`
|
||||
let multiples = this.multipleStatus.data
|
||||
let multiplesStatus = -1
|
||||
if (this.range && multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, fullDate)
|
||||
})
|
||||
}
|
||||
const checked = multiplesStatus !== -1
|
||||
// 获取打点信息
|
||||
const extraInfo = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(fullDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
result.push({
|
||||
fullDate,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
multiple: this.range ? checked : false,
|
||||
beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)),
|
||||
isToday: fullDate === this.date.fullDate,
|
||||
userChecked: false,
|
||||
extraInfo
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取本月日期集合
|
||||
*/
|
||||
getCurrentMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}`
|
||||
const isToday = fullDate === currentDate
|
||||
// 获取打点信息
|
||||
const extraInfo = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(currentDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
disableBefore = dateCompare(this.startDate, currentDate)
|
||||
}
|
||||
|
||||
if (this.endDate) {
|
||||
disableAfter = dateCompare(currentDate, this.endDate)
|
||||
}
|
||||
|
||||
let multiples = this.multipleStatus.data
|
||||
let multiplesStatus = -1
|
||||
if (this.range && multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, currentDate)
|
||||
})
|
||||
}
|
||||
const checked = multiplesStatus !== -1
|
||||
|
||||
result.push({
|
||||
fullDate: currentDate,
|
||||
year: dateObj.year,
|
||||
month: dateObj.month,
|
||||
date: i,
|
||||
multiple: this.range ? checked : false,
|
||||
beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(currentDate,this.endDate)),
|
||||
isToday,
|
||||
userChecked: false,
|
||||
extraInfo
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
/**
|
||||
* 获取下一个月日期集合
|
||||
*/
|
||||
_getNextMonthDays(amount, dateObj) {
|
||||
const result = []
|
||||
const month = dateObj.month + 1
|
||||
for (let i = 1; i <= amount; i++) {
|
||||
const month = dateObj.month === 12 ? 1 : dateObj.month*1 + 1
|
||||
const year = month === 1 ? dateObj.year + 1 : dateObj.year
|
||||
const fullDate = `${year}-${addZero(month)}-${addZero(i)}`
|
||||
let multiples = this.multipleStatus.data
|
||||
let multiplesStatus = -1
|
||||
if (this.range && multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, fullDate)
|
||||
})
|
||||
}
|
||||
const checked = multiplesStatus !== -1
|
||||
// 获取打点信息
|
||||
const extraInfo = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(fullDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
result.push({
|
||||
fullDate,
|
||||
year,
|
||||
date: i,
|
||||
month,
|
||||
multiple: this.range ? checked : false,
|
||||
beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after),
|
||||
disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)),
|
||||
isToday: fullDate === this.date.fullDate,
|
||||
userChecked: false,
|
||||
extraInfo
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
|
||||
return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
before = new Date(fixIosDateFormat(before))
|
||||
after = new Date(fixIosDateFormat(after))
|
||||
return before.valueOf() === after.valueOf()
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较真实起始日期
|
||||
*/
|
||||
|
||||
isLogicBefore(currentDate, before, after) {
|
||||
let logicBefore = before
|
||||
if (before && after) {
|
||||
logicBefore = dateCompare(before, after) ? before : after
|
||||
}
|
||||
return this.dateEqual(logicBefore, currentDate)
|
||||
}
|
||||
|
||||
isLogicAfter(currentDate, before, after) {
|
||||
let logicAfter = after
|
||||
if (before && after) {
|
||||
logicAfter = dateCompare(before, after) ? after : before
|
||||
}
|
||||
return this.dateEqual(logicAfter, currentDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDateObj(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
if (!this.range) return
|
||||
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.multipleStatus
|
||||
if (before && after) {
|
||||
if (!this.lastHover) {
|
||||
this.lastHover = true
|
||||
return
|
||||
}
|
||||
this.multipleStatus.before = fullDate
|
||||
this.multipleStatus.after = ''
|
||||
this.multipleStatus.data = []
|
||||
this.multipleStatus.fulldate = ''
|
||||
this.lastHover = false
|
||||
} else {
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
this.lastHover = false
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus
|
||||
.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus
|
||||
.before);
|
||||
}
|
||||
this.lastHover = true
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标 hover 更新多选状态
|
||||
*/
|
||||
setHoverMultiple(fullDate) {
|
||||
if (!this.range || this.lastHover) return
|
||||
|
||||
const { before } = this.multipleStatus
|
||||
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||
}
|
||||
}
|
||||
this.getWeeks(fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新默认值多选状态
|
||||
*/
|
||||
setDefaultMultiple(before, after) {
|
||||
this.multipleStatus.before = before
|
||||
this.multipleStatus.after = after
|
||||
if (before && after) {
|
||||
if (dateCompare(before, after)) {
|
||||
this.multipleStatus.data = this.geDateAll(before, after);
|
||||
this.getWeeks(after)
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(after, before);
|
||||
this.getWeeks(before)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
getWeeks(dateData) {
|
||||
const {
|
||||
year,
|
||||
month,
|
||||
} = this.getDateObj(dateData)
|
||||
|
||||
const preMonthDayAmount = new Date(year, month - 1, 1).getDay()
|
||||
const preMonthDays = this.getPreMonthDays(preMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const currentMonthDayAmount = new Date(year, month, 0).getDate()
|
||||
const currentMonthDays = this.getCurrentMonthDays(currentMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const nextMonthDayAmount = 42 - preMonthDayAmount - currentMonthDayAmount
|
||||
const nextMonthDays = this._getNextMonthDays(nextMonthDayAmount, this.getDateObj(dateData))
|
||||
|
||||
const calendarDays = [...preMonthDays, ...currentMonthDays, ...nextMonthDays]
|
||||
|
||||
const weeks = new Array(6)
|
||||
for (let i = 0; i < calendarDays.length; i++) {
|
||||
const index = Math.floor(i / 7)
|
||||
if(!weeks[index]){
|
||||
weeks[index] = new Array(7)
|
||||
}
|
||||
weeks[index][i % 7] = calendarDays[i]
|
||||
}
|
||||
|
||||
this.calendar = calendarDays
|
||||
this.weeks = weeks
|
||||
}
|
||||
}
|
||||
|
||||
function getDateTime(date, hideSecond){
|
||||
return `${getDate(date)} ${getTime(date, hideSecond)}`
|
||||
}
|
||||
|
||||
function getDate(date) {
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth()+1
|
||||
const day = date.getDate()
|
||||
return `${year}-${addZero(month)}-${addZero(day)}`
|
||||
}
|
||||
|
||||
function getTime(date, hideSecond){
|
||||
date = fixIosDateFormat(date)
|
||||
date = new Date(date)
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
return hideSecond ? `${addZero(hour)}:${addZero(minute)}` : `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`
|
||||
}
|
||||
|
||||
function addZero(num) {
|
||||
if(num < 10){
|
||||
num = `0${num}`
|
||||
}
|
||||
return num
|
||||
}
|
||||
|
||||
function getDefaultSecond(hideSecond) {
|
||||
return hideSecond ? '00:00' : '00:00:00'
|
||||
}
|
||||
|
||||
function dateCompare(startDate, endDate) {
|
||||
startDate = new Date(fixIosDateFormat(startDate))
|
||||
endDate = new Date(fixIosDateFormat(endDate))
|
||||
return startDate <= endDate
|
||||
}
|
||||
|
||||
function checkDate(date){
|
||||
const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
|
||||
return date.match(dateReg)
|
||||
}
|
||||
|
||||
const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9]:[0-5]?[0-9])?$/
|
||||
function fixIosDateFormat(value) {
|
||||
if (typeof value === 'string' && dateTimeReg.test(value)) {
|
||||
value = value.replace(/-/g, '/')
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
export {Calendar, getDateTime, getDate, getTime, addZero, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat}
|
||||
87
uni_modules/uni-datetime-picker/package.json
Normal file
87
uni_modules/uni-datetime-picker/package.json
Normal file
@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-datetime-picker",
|
||||
"displayName": "uni-datetime-picker 日期选择器",
|
||||
"version": "2.2.24",
|
||||
"description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择",
|
||||
"keywords": [
|
||||
"uni-datetime-picker",
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"日期时间选择器",
|
||||
"日期时间"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
21
uni_modules/uni-datetime-picker/readme.md
Normal file
21
uni_modules/uni-datetime-picker/readme.md
Normal file
@ -0,0 +1,21 @@
|
||||
|
||||
|
||||
> `重要通知：组件升级更新 2.0.0 后，支持日期+时间范围选择，组件 ui 将使用日历选择日期，ui 变化较大，同时支持 PC 和 移动端。此版本不向后兼容，不再支持单独的时间选择（type=time）及相关的 hide-second 属性（时间选可使用内置组件 picker）。若仍需使用旧版本，可在插件市场下载*非uni_modules版本*，旧版本将不再维护`
|
||||
|
||||
## DatetimePicker 时间选择器
|
||||
|
||||
> **组件名：uni-datetime-picker**
|
||||
> 代码块： `uDatetimePicker`
|
||||
|
||||
|
||||
该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
|
||||
|
||||
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
|
||||
|
||||
**_点击 picker 默认值规则：_**
|
||||
|
||||
- 若设置初始值 value, 会显示在 picker 显示框中
|
||||
- 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
22
uni_modules/uni-icons/changelog.md
Normal file
22
uni_modules/uni-icons/changelog.md
Normal file
@ -0,0 +1,22 @@
|
||||
## 1.3.5（2022-01-24）
|
||||
- 优化 size 属性可以传入不带单位的字符串数值
|
||||
## 1.3.4（2022-01-24）
|
||||
- 优化 size 支持其他单位
|
||||
## 1.3.3（2022-01-17）
|
||||
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
|
||||
## 1.3.2（2021-12-01）
|
||||
- 优化 示例可复制图标名称
|
||||
## 1.3.1（2021-11-23）
|
||||
- 优化 兼容旧组件 type 值
|
||||
## 1.3.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-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
## 1.1.7（2021-11-08）
|
||||
## 1.2.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.5（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.4（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
1169
uni_modules/uni-icons/components/uni-icons/icons.js
Normal file
1169
uni_modules/uni-icons/components/uni-icons/icons.js
Normal file
File diff suppressed because it is too large
Load Diff
96
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
96
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './icons.js';
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g
|
||||
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
|
||||
}
|
||||
// #ifdef APP-NVUE
|
||||
var domModule = weex.requireModule('dom');
|
||||
import iconUrl from './uniicons.ttf'
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('"+iconUrl+"')"
|
||||
});
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icons 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} type 图标图案，参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
emits:['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: icons.glyphs
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
unicode(){
|
||||
let code = this.icons.find(v=>v.font_class === this.type)
|
||||
if(code){
|
||||
return unescape(`%u${code.unicode}`)
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize(){
|
||||
return getVal(this.size)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
@import './uniicons.css';
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url('./uniicons.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.uni-icons {
|
||||
font-family: uniicons;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
663
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
663
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
@ -0,0 +1,663 @@
|
||||
.uniui-color:before {
|
||||
content: "\e6cf";
|
||||
}
|
||||
|
||||
.uniui-wallet:before {
|
||||
content: "\e6b1";
|
||||
}
|
||||
|
||||
.uniui-settings-filled:before {
|
||||
content: "\e6ce";
|
||||
}
|
||||
|
||||
.uniui-auth-filled:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.uniui-shop-filled:before {
|
||||
content: "\e6cd";
|
||||
}
|
||||
|
||||
.uniui-staff-filled:before {
|
||||
content: "\e6cb";
|
||||
}
|
||||
|
||||
.uniui-vip-filled:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
.uniui-plus-filled:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.uniui-folder-add-filled:before {
|
||||
content: "\e6c8";
|
||||
}
|
||||
|
||||
.uniui-color-filled:before {
|
||||
content: "\e6c9";
|
||||
}
|
||||
|
||||
.uniui-tune-filled:before {
|
||||
content: "\e6ca";
|
||||
}
|
||||
|
||||
.uniui-calendar-filled:before {
|
||||
content: "\e6c0";
|
||||
}
|
||||
|
||||
.uniui-notification-filled:before {
|
||||
content: "\e6c1";
|
||||
}
|
||||
|
||||
.uniui-wallet-filled:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
|
||||
.uniui-medal-filled:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-fire-filled:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.uniui-refreshempty:before {
|
||||
content: "\e6bf";
|
||||
}
|
||||
|
||||
.uniui-location-filled:before {
|
||||
content: "\e6af";
|
||||
}
|
||||
|
||||
.uniui-person-filled:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
|
||||
.uniui-personadd-filled:before {
|
||||
content: "\e698";
|
||||
}
|
||||
|
||||
.uniui-back:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
|
||||
.uniui-forward:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
|
||||
.uniui-arrow-right:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrow-left:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrow-up:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrow-down:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.uniui-bottom:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-arrowdown:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-top:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-arrowup:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-left:before {
|
||||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.uniui-arrowleft:before {
|
||||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.uniui-eye:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.uniui-eye-filled:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.uniui-eye-slash:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
|
||||
.uniui-eye-slash-filled:before {
|
||||
content: "\e6b4";
|
||||
}
|
||||
|
||||
.uniui-info-filled:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.uniui-reload:before {
|
||||
content: "\e6b2";
|
||||
}
|
||||
|
||||
.uniui-micoff-filled:before {
|
||||
content: "\e6b0";
|
||||
}
|
||||
|
||||
.uniui-map-pin-ellipse:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.uniui-map-pin:before {
|
||||
content: "\e6ad";
|
||||
}
|
||||
|
||||
.uniui-location:before {
|
||||
content: "\e6ae";
|
||||
}
|
||||
|
||||
.uniui-starhalf:before {
|
||||
content: "\e683";
|
||||
}
|
||||
|
||||
.uniui-star:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.uniui-star-filled:before {
|
||||
content: "\e68f";
|
||||
}
|
||||
|
||||
.uniui-calendar:before {
|
||||
content: "\e6a0";
|
||||
}
|
||||
|
||||
.uniui-fire:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
|
||||
.uniui-medal:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
|
||||
.uniui-font:before {
|
||||
content: "\e6a3";
|
||||
}
|
||||
|
||||
.uniui-gift:before {
|
||||
content: "\e6a4";
|
||||
}
|
||||
|
||||
.uniui-link:before {
|
||||
content: "\e6a5";
|
||||
}
|
||||
|
||||
.uniui-notification:before {
|
||||
content: "\e6a6";
|
||||
}
|
||||
|
||||
.uniui-staff:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
|
||||
.uniui-vip:before {
|
||||
content: "\e6a8";
|
||||
}
|
||||
|
||||
.uniui-folder-add:before {
|
||||
content: "\e6a9";
|
||||
}
|
||||
|
||||
.uniui-tune:before {
|
||||
content: "\e6aa";
|
||||
}
|
||||
|
||||
.uniui-auth:before {
|
||||
content: "\e6ab";
|
||||
}
|
||||
|
||||
.uniui-person:before {
|
||||
content: "\e699";
|
||||
}
|
||||
|
||||
.uniui-email-filled:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
|
||||
.uniui-phone-filled:before {
|
||||
content: "\e69b";
|
||||
}
|
||||
|
||||
.uniui-phone:before {
|
||||
content: "\e69c";
|
||||
}
|
||||
|
||||
.uniui-email:before {
|
||||
content: "\e69e";
|
||||
}
|
||||
|
||||
.uniui-personadd:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
|
||||
.uniui-chatboxes-filled:before {
|
||||
content: "\e692";
|
||||
}
|
||||
|
||||
.uniui-contact:before {
|
||||
content: "\e693";
|
||||
}
|
||||
|
||||
.uniui-chatbubble-filled:before {
|
||||
content: "\e694";
|
||||
}
|
||||
|
||||
.uniui-contact-filled:before {
|
||||
content: "\e695";
|
||||
}
|
||||
|
||||
.uniui-chatboxes:before {
|
||||
content: "\e696";
|
||||
}
|
||||
|
||||
.uniui-chatbubble:before {
|
||||
content: "\e697";
|
||||
}
|
||||
|
||||
.uniui-upload-filled:before {
|
||||
content: "\e68e";
|
||||
}
|
||||
|
||||
.uniui-upload:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.uniui-weixin:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.uniui-compose:before {
|
||||
content: "\e67f";
|
||||
}
|
||||
|
||||
.uniui-qq:before {
|
||||
content: "\e680";
|
||||
}
|
||||
|
||||
.uniui-download-filled:before {
|
||||
content: "\e681";
|
||||
}
|
||||
|
||||
.uniui-pyq:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.uniui-sound:before {
|
||||
content: "\e684";
|
||||
}
|
||||
|
||||
.uniui-trash-filled:before {
|
||||
content: "\e685";
|
||||
}
|
||||
|
||||
.uniui-sound-filled:before {
|
||||
content: "\e686";
|
||||
}
|
||||
|
||||
.uniui-trash:before {
|
||||
content: "\e687";
|
||||
}
|
||||
|
||||
.uniui-videocam-filled:before {
|
||||
content: "\e689";
|
||||
}
|
||||
|
||||
.uniui-spinner-cycle:before {
|
||||
content: "\e68a";
|
||||
}
|
||||
|
||||
.uniui-weibo:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.uniui-videocam:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
|
||||
.uniui-download:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
|
||||
.uniui-help:before {
|
||||
content: "\e679";
|
||||
}
|
||||
|
||||
.uniui-navigate-filled:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
|
||||
.uniui-plusempty:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.uniui-smallcircle:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.uniui-minus-filled:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
|
||||
.uniui-micoff:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
|
||||
.uniui-closeempty:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.uniui-clear:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
|
||||
.uniui-navigate:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.uniui-minus:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.uniui-image:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.uniui-mic:before {
|
||||
content: "\e671";
|
||||
}
|
||||
|
||||
.uniui-paperplane:before {
|
||||
content: "\e672";
|
||||
}
|
||||
|
||||
.uniui-close:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.uniui-help-filled:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.uniui-paperplane-filled:before {
|
||||
content: "\e675";
|
||||
}
|
||||
|
||||
.uniui-plus:before {
|
||||
content: "\e676";
|
||||
}
|
||||
|
||||
.uniui-mic-filled:before {
|
||||
content: "\e677";
|
||||
}
|
||||
|
||||
.uniui-image-filled:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.uniui-locked-filled:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.uniui-info:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.uniui-locked:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.uniui-camera-filled:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.uniui-chat-filled:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.uniui-camera:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.uniui-circle:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.uniui-checkmarkempty:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.uniui-chat:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.uniui-circle-filled:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.uniui-flag:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.uniui-flag-filled:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.uniui-gear-filled:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.uniui-home:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.uniui-home-filled:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.uniui-gear:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.uniui-smallcircle-filled:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.uniui-map-filled:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.uniui-map:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.uniui-refresh-filled:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.uniui-refresh:before {
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.uniui-cloud-download-filled:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.uniui-cloud-download:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload-filled:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.uniui-redo:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.uniui-images-filled:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.uniui-undo-filled:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.uniui-more:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.uniui-more-filled:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.uniui-undo:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.uniui-images:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.uniui-paperclip:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.uniui-settings:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.uniui-search:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.uniui-redo-filled:before {
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
.uniui-list:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.uniui-mail-open-filled:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.uniui-hand-down-filled:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.uniui-hand-down:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.uniui-hand-up-filled:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.uniui-hand-up:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.uniui-heart-filled:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.uniui-mail-open:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.uniui-heart:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.uniui-loop:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.uniui-pulldown:before {
|
||||
content: "\e632";
|
||||
}
|
||||
|
||||
.uniui-scan:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.uniui-bars:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.uniui-checkbox:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.uniui-checkbox-filled:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.uniui-shop:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.uniui-headphones:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.uniui-cart:before {
|
||||
content: "\e631";
|
||||
}
|
||||
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
Binary file not shown.
86
uni_modules/uni-icons/package.json
Normal file
86
uni_modules/uni-icons/package.json
Normal file
@ -0,0 +1,86 @@
|
||||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "1.3.5",
|
||||
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"icon",
|
||||
"图标"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.2.14"
|
||||
},
|
||||
"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"],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
uni_modules/uni-icons/readme.md
Normal file
8
uni_modules/uni-icons/readme.md
Normal file
@ -0,0 +1,8 @@
|
||||
## Icons 图标
|
||||
> **组件名：uni-icons**
|
||||
> 代码块： `uIcons`
|
||||
|
||||
用于展示 icons 图标 。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
19
uni_modules/uni-load-more/changelog.md
Normal file
19
uni_modules/uni-load-more/changelog.md
Normal file
@ -0,0 +1,19 @@
|
||||
## 1.3.3（2022-01-20）
|
||||
- 新增 showText属性 ，是否显示文本
|
||||
## 1.3.2（2022-01-19）
|
||||
- 修复 nvue 平台下不显示文本的bug
|
||||
## 1.3.1（2022-01-19）
|
||||
- 修复 微信小程序平台样式选择器报警告的问题
|
||||
## 1.3.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-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||
## 1.2.1（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.2.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.8（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.7（2021-03-30）
|
||||
- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
|
||||
## 1.1.6（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"uni-load-more.contentdown": "Pull up to show more",
|
||||
"uni-load-more.contentrefresh": "loading...",
|
||||
"uni-load-more.contentnomore": "No more data"
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"uni-load-more.contentdown": "上拉显示更多",
|
||||
"uni-load-more.contentrefresh": "正在加载...",
|
||||
"uni-load-more.contentnomore": "没有更多数据了"
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"uni-load-more.contentdown": "上拉顯示更多",
|
||||
"uni-load-more.contentrefresh": "正在加載...",
|
||||
"uni-load-more.contentnomore": "沒有更多數據了"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
86
uni_modules/uni-load-more/package.json
Normal file
86
uni_modules/uni-load-more/package.json
Normal file
@ -0,0 +1,86 @@
|
||||
{
|
||||
"id": "uni-load-more",
|
||||
"displayName": "uni-load-more 加载更多",
|
||||
"version": "1.3.3",
|
||||
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"加载更多",
|
||||
"load-more"
|
||||
],
|
||||
"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"],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
uni_modules/uni-load-more/readme.md
Normal file
14
uni_modules/uni-load-more/readme.md
Normal file
@ -0,0 +1,14 @@
|
||||
|
||||
|
||||
### LoadMore 加载更多
|
||||
> **组件名：uni-load-more**
|
||||
> 代码块： `uLoadMore`
|
||||
|
||||
|
||||
用于列表中，做滚动加载使用，展示 loading 的各种状态。
|
||||
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||
#### 如使用过程中有任何问题，或者您对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
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/novel/bookDetail/bookDetail.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/novel/bookDetail/bookDetail.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/novel/bookManagement/bookManagement.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/novel/bookManagement/bookManagement.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/novel/booksList/booksList.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/novel/booksList/booksList.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/novel/commissionDetail/commissionDetail.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/novel/commissionDetail/commissionDetail.js.map
vendored
Normal file
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
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":";;;;;;;;;;;;;AAAA;AAGA;AACA;AAHA;AACAA,EAAE,CAACC,iCAAiC,GAAGC,mBAAmB;AAG1DC,UAAU,CAACC,yBAAI,CAAC,C","file":"pages/shortPlay/moviesDivideInto/moviesDivideInto.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages/shortPlay/moviesDivideInto/moviesDivideInto.vue'\ncreatePage(Page)"],"sourceRoot":""}
|
||||
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/shortPlay/my/my.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/shortPlay/my/my.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/shortPlay/performance/performance.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/shortPlay/performance/performance.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/shortPlay/personalMoney/personalMoney.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/shortPlay/personalMoney/personalMoney.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["uni-app:///main.js"],"names":["wx","__webpack_require_UNI_MP_PLUGIN__","__webpack_require__","createPage","Page"],"mappings":";;;;;;;;;;;;;AAAA;AAGA;AACA;AAHA;AACAA,EAAE,CAACC,iCAAiC,GAAGC,mBAAmB;AAG1DC,UAAU,CAACC,wBAAI,CAAC,C","file":"pages/shortPlay/shortPlayDetail/shortPlayDetail.js","sourcesContent":["import 'uni-pages';\n// @ts-ignore\nwx.__webpack_require_UNI_MP_PLUGIN__ = __webpack_require__;\nimport Vue from 'vue'\nimport Page from './pages/shortPlay/shortPlayDetail/shortPlayDetail.vue'\ncreatePage(Page)"],"sourceRoot":""}
|
||||
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/novel/bookDetail/bookDetail.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/novel/bookDetail/bookDetail.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/novel/booksList/booksList.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/novel/booksList/booksList.js.map
vendored
Normal file
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
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/novel/personalMoney/personalMoney.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/novel/personalMoney/personalMoney.js.map
vendored
Normal file
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
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/shortPlay/personalMoney/personalMoney.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/shortPlay/personalMoney/personalMoney.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/shortPlay/welfareBonus/welfareBonus.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesA/shortPlay/welfareBonus/welfareBonus.js.map
vendored
Normal file
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
Loading…
x
Reference in New Issue
Block a user