初始化
This commit is contained in:
yziiy
128
component/LevelProgress.vue
Normal file
128
component/LevelProgress.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="level-container">
|
||||
<!-- SVG 轨道 + 滤镜定义 -->
|
||||
<svg class="level-svg" viewBox="0 0 500 150">
|
||||
<!-- 高光滤镜定义 -->
|
||||
<defs>
|
||||
<filter id="glowFilter">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
|
||||
<feColorMatrix type="matrix" values="
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
0 0 0 0.5 0" />
|
||||
<feBlend in2="SourceGraphic" mode="normal" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- 绘制向上弯曲的轨道曲线 -->
|
||||
<path class="track" d="M 50 75
|
||||
Q 250 25 450 75" />
|
||||
<template v-for="(ele,index) in lvList" :key="index">
|
||||
<circle v-if="index === 0" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="50" cy="75" r="6" />
|
||||
<circle v-if="index === 1" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="250" cy="50" r="8" fill="#fff"
|
||||
style="filter: drop-shadow(0 0 8px rgba(255,255,255,1));" />
|
||||
<circle v-if="index === 2" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="450" cy="75" r="6" />
|
||||
</template>
|
||||
</svg>
|
||||
<template v-if="lvList && lvList.length">
|
||||
<div v-for="(ele,index) in lvList" class="level-text" :class="`text-${index+1}`">{{`Lv.${ele.level}`}}</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
lvList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
currentIndex:{
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.level-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
/* 深色背景模拟原图 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 绘制曲线轨道 */
|
||||
.track {
|
||||
stroke: rgba(255, 255, 255, 0.3);
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
filter: url(#glowFilter);
|
||||
/* 应用高光滤镜 */
|
||||
}
|
||||
|
||||
/* Lv.2 高光节点样式 */
|
||||
.highlight-dot {
|
||||
fill: #fff;
|
||||
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
|
||||
/* 发光效果 */
|
||||
}
|
||||
|
||||
/* 普通节点样式 */
|
||||
.normal-dot {
|
||||
fill: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 文字样式 */
|
||||
.level-text {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
/* 文字位置 */
|
||||
.text-1 {
|
||||
left: 60rpx;
|
||||
}
|
||||
|
||||
.text-2 {
|
||||
/* left: 250px; */
|
||||
}
|
||||
|
||||
.text-3 {
|
||||
right: 60rpx;
|
||||
}
|
||||
|
||||
/* SVG 高光滤镜定义 */
|
||||
svg {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#glowFilter {
|
||||
filterUnits: userSpaceOnUse;
|
||||
}
|
||||
|
||||
#glowFilter feGaussianBlur {
|
||||
stdDeviation: 3;
|
||||
/* 高光模糊范围 */
|
||||
result: blur;
|
||||
}
|
||||
|
||||
/* #glowFilter feMerge {
|
||||
<feMergeNode in="blur" /><feMergeNode in="SourceGraphic" />
|
||||
} */
|
||||
</style>
|
||||
40
component/headerHeight.vue
Normal file
40
component/headerHeight.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view class="status-bar" :style="{ height: `${statusBarHeight}px`, backgroundColor : bgColor }">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "headerHeight",
|
||||
props: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: () => "transparent",
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.statusBarHeight = this.getStatusBarHeight()
|
||||
},
|
||||
activated() {
|
||||
this.statusBarHeight = this.getStatusBarHeight()
|
||||
},
|
||||
methods: {
|
||||
getStatusBarHeight() {
|
||||
const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
|
||||
uni.setStorageSync('BarHeight', systemInfo.statusBarHeight)
|
||||
return systemInfo.statusBarHeight || 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.status-bar {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
63
component/nav.vue
Normal file
63
component/nav.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<view class="nav flex-line" :style="`background-color:${bgColor}`">
|
||||
<view class="icon-image">
|
||||
<slot v-if="isLeftSlot" name="leftView"></slot>
|
||||
<img v-else src="@/static/image/help/back.png" alt="" @click="back" />
|
||||
</view>
|
||||
<view class="color-3 title font-w500 font-36">
|
||||
{{navTitle}}
|
||||
</view>
|
||||
<view class="flex-line">
|
||||
<slot name="rightView"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "navBar",
|
||||
props: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: () => "transparent",
|
||||
},
|
||||
navTitle: {
|
||||
type: String,
|
||||
default: () => "标题",
|
||||
},
|
||||
emitBack:{
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
isLeftSlot:{
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
back(){
|
||||
if(this.emitBack) {
|
||||
this.$emit('backEvent')
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav {
|
||||
padding: 32rpx;
|
||||
width: calc(100% - 64rpx);
|
||||
justify-content: start;
|
||||
.icon-image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.title {
|
||||
width: calc(100% - 3rem);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
222
component/newTable.vue
Normal file
222
component/newTable.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 表格区域 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="table-scroll"
|
||||
@scrolltolower="loadMore"
|
||||
:style="{height: scrollHeight + 'px'}"
|
||||
>
|
||||
<!-- 表头 -->
|
||||
<view class="table-header">
|
||||
<view
|
||||
class="header-item time-col"
|
||||
@click="toggleSort"
|
||||
>
|
||||
<text>时间</text>
|
||||
<!-- <view class="sort-icon">
|
||||
<text v-if="sortOrder === 'asc'">↑</text>
|
||||
<text v-else-if="sortOrder === 'desc'">↓</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="header-item">累计流水</view>
|
||||
<view class="header-item">获得补贴</view>
|
||||
<view class="header-item">状态</view>
|
||||
</view>
|
||||
<!-- 表格内容 -->
|
||||
<view
|
||||
class="table-row"
|
||||
v-for="(item, index) in tableData"
|
||||
:key="index"
|
||||
>
|
||||
<view class="row-item time-col">{{ item.time }}</view>
|
||||
<view class="row-item">{{ item.total_transaction }}</view>
|
||||
<view class="row-item">{{ item.subsidy_amount }}</view>
|
||||
<view class="row-item">
|
||||
<text :class="'status-' + item.status">{{ item.status_str }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view class="load-more">
|
||||
<text v-if="loading">加载中...</text>
|
||||
<text v-else-if="noMore">没有更多数据了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sortOrder: 'desc', // 排序方式 desc降序/asc升序
|
||||
page: 1, // 当前页码
|
||||
pageSize: 10, // 每页条数
|
||||
loading: false, // 加载状态
|
||||
noMore: false, // 是否没有更多数据
|
||||
scrollHeight: 600 // 滚动区域高度，根据实际需要调整
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取设备高度，动态设置scroll-view高度
|
||||
this.calculateScrollHeight();
|
||||
// 初始化加载数据
|
||||
// this.loadData();
|
||||
},
|
||||
methods: {
|
||||
// 计算滚动区域高度
|
||||
calculateScrollHeight() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
this.scrollHeight = systemInfo.windowHeight - 50 - 67; // 减去表头高度
|
||||
},
|
||||
|
||||
// 切换排序
|
||||
toggleSort() {
|
||||
this.sortOrder = this.sortOrder === 'desc' ? 'asc' : 'desc';
|
||||
this.page = 1; // 重置页码
|
||||
this.tableData = []; // 清空数据
|
||||
this.noMore = false;
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
// 加载数据
|
||||
async loadData() {
|
||||
if (this.loading || this.noMore) return;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
// 模拟API请求 - 实际项目中替换为真实接口
|
||||
const mockData = this.getMockData(this.page, this.pageSize, this.sortOrder);
|
||||
|
||||
if (mockData.length === 0) {
|
||||
this.noMore = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.page === 1) {
|
||||
this.tableData = mockData;
|
||||
} else {
|
||||
this.tableData = [...this.tableData, ...mockData];
|
||||
}
|
||||
|
||||
this.page++;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 加载更多
|
||||
loadMore() {
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
// 模拟数据 - 实际项目中删除
|
||||
getMockData(page, pageSize, sortOrder) {
|
||||
if (page > 3) return []; // 模拟只有3页数据
|
||||
|
||||
const data = [];
|
||||
const now = new Date();
|
||||
const statusOptions = [0, 1, 2]; // 0-待审核 1-已通过 2-已拒绝
|
||||
|
||||
for (let i = 0; i < pageSize; i++) {
|
||||
const days = (page - 1) * pageSize + i;
|
||||
const date = new Date(now);
|
||||
date.setDate(now.getDate() - days);
|
||||
|
||||
data.push({
|
||||
time: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
|
||||
amount: (Math.random() * 10000).toFixed(2),
|
||||
subsidy: (Math.random() * 1000).toFixed(2),
|
||||
status: statusOptions[Math.floor(Math.random() * statusOptions.length)]
|
||||
});
|
||||
}
|
||||
|
||||
// 模拟排序
|
||||
if (sortOrder === 'asc') {
|
||||
return data.sort((a, b) => new Date(a.time) - new Date(b.time));
|
||||
} else {
|
||||
return data.sort((a, b) => new Date(b.time) - new Date(a.time));
|
||||
}
|
||||
},
|
||||
|
||||
// 状态文本
|
||||
getStatusText(status) {
|
||||
const statusMap = {
|
||||
0: '待审核',
|
||||
1: '已通过',
|
||||
2: '已拒绝'
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
/* padding: 20rpx; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.table-header, .table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.header-item, .row-item {
|
||||
flex: 1;
|
||||
padding: 20rpx 10rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
font-weight: bold;
|
||||
/* background-color: #f8f8f8; */
|
||||
}
|
||||
|
||||
.time-col {
|
||||
flex: 1.2;
|
||||
}
|
||||
|
||||
.sort-icon {
|
||||
display: inline-block;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.status-0 {
|
||||
color: #FF9900;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
color: #19be6b;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
color: #FA3534;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
padding: 20rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
178
component/swiper.vue
Normal file
178
component/swiper.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 轮播图区域 -->
|
||||
<swiper class="swiper" :current="currentIndex" @change="onSwiperChange" :previous-margin="previewMargin + 'px'"
|
||||
:next-margin="previewMargin + 'px'" :circular="true" :autoplay="false">
|
||||
<swiper-item v-for="(item, index) in list" :key="index" style="align-content: center;">
|
||||
<view class="swiper-item" :class="{ active: currentIndex === index }" @click="handleClick(index)">
|
||||
<image class="image" :src="item.image" />
|
||||
<!-- <text class="title">{{ item.title }}</text> -->
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 指示器 -->
|
||||
<!-- <view class="indicators">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="dot"
|
||||
:class="{ active: currentIndex === index }"
|
||||
@click="switchTo(index)"
|
||||
></view>
|
||||
</view> -->
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<!-- <view class="controls">
|
||||
<button class="btn" @click="switchTo(currentIndex - 1)">上一张</button>
|
||||
<button class="btn" @click="switchTo(2)">跳转到第3张</button>
|
||||
<button class="btn" @click="switchTo(currentIndex + 1)">下一张</button>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import xinR from '@/static/image/grade/cf-xinren.png';
|
||||
import fuH from '@/static/image/grade/cf-fuhao.png';
|
||||
import xingJ from '@/static/image/grade/cf-xingjue.png';
|
||||
import xingH from '@/static/image/grade/cf-xinghou.png';
|
||||
import xingW from '@/static/image/grade/cf-xingwang.png';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
previewMargin: 30, // 左右露出的边距（单位px）
|
||||
list: [{
|
||||
id: 1,
|
||||
title: '图片1',
|
||||
image: xinR
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '图片2',
|
||||
image: fuH
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '图片3',
|
||||
image: xingJ
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '图片4',
|
||||
image: xingH
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '图片5',
|
||||
image: xingW
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换轮播图
|
||||
switchTo(index) {
|
||||
if (index < 0) index = this.list.length - 1;
|
||||
if (index >= this.list.length) index = 0;
|
||||
this.currentIndex = index;
|
||||
},
|
||||
|
||||
// 轮播图切换事件
|
||||
onSwiperChange(e) {
|
||||
this.currentIndex = e.detail.current;
|
||||
},
|
||||
|
||||
// 点击轮播项
|
||||
handleClick(index) {
|
||||
console.log('点击了第', index + 1, '张');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
height: 266rpx;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.swiper-item.active {
|
||||
height: 266rpx;
|
||||
border-radius: 30rpx;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 30rpx !important;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex: 1;
|
||||
width: 92%;
|
||||
height: 90%;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.indicators {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ccc;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: #007AFF;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
background-color: #007AFF;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
187
component/tab.vue
Normal file
187
component/tab.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="navigation-container">
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-tabs">
|
||||
<div v-for="(tab, index) in tabs" :key="index" :class="['nav-tab', { active: activeTab === index }]"
|
||||
@click="switchTab(index)">
|
||||
{{ tab.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NavigationTabs",
|
||||
props: {
|
||||
// 外部传入的标签数据
|
||||
tabsData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 默认激活的标签索引
|
||||
defaultActive: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: this.defaultActive,
|
||||
// 默认标签数据
|
||||
defaultTabs: [{
|
||||
key: "created",
|
||||
label: "我创建的",
|
||||
title: "我创建的内容",
|
||||
content: "这里显示您创建的所有内容和项目。",
|
||||
},
|
||||
{
|
||||
key: "hosted",
|
||||
label: "我主持的",
|
||||
title: "我主持的内容",
|
||||
content: "这里显示您正在主持的活动和会议。",
|
||||
},
|
||||
{
|
||||
key: "managed",
|
||||
label: "我管理的",
|
||||
title: "我管理的内容",
|
||||
content: "这里显示您管理的团队和资源。",
|
||||
},
|
||||
{
|
||||
key: "focused",
|
||||
label: "我关注的",
|
||||
title: "我关注的内容",
|
||||
content: "这里显示您关注的话题和动态。",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 使用外部数据或默认数据
|
||||
tabs() {
|
||||
return this.tabsData.length > 0 ? this.tabsData : this.defaultTabs;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 监听外部传入的默认激活标签变化
|
||||
defaultActive: {
|
||||
handler(newVal) {
|
||||
this.activeTab = newVal;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 切换标签
|
||||
switchTab(index) {
|
||||
if (index !== this.activeTab) {
|
||||
this.activeTab = index;
|
||||
// 向父组件发射事件
|
||||
this.$emit("tab-change", {
|
||||
index: index,
|
||||
tab: this.tabs[index],
|
||||
});
|
||||
}
|
||||
},
|
||||
// 获取当前激活的标签数据
|
||||
getCurrentTab() {
|
||||
return this.tabs[this.activeTab];
|
||||
},
|
||||
// 程序化切换到指定标签
|
||||
setActiveTab(index) {
|
||||
if (index >= 0 && index < this.tabs.length) {
|
||||
this.switchTab(index);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载后发射初始状态
|
||||
this.$emit("tab-change", {
|
||||
index: this.activeTab,
|
||||
tab: this.tabs[this.activeTab],
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navigation-container {
|
||||
width: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
/* transition: all 0.3s ease; */
|
||||
border-radius: 6px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
margin: auto 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
/* background-color: rgba(255, 255, 255, 0.3); */
|
||||
color: #1a4332;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.nav-tab.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 14rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
height: 16rpx;
|
||||
background-image: url('@/static/image/propMall/tabline.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 1px;
|
||||
z-index: -10;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-tabs {
|
||||
/* padding: 2px; */
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: 8px 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
/* @keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
76
component/table.vue
Normal file
76
component/table.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<view class="table">
|
||||
<!-- 表头 -->
|
||||
<view class="tr header">
|
||||
<view class="th" :style="{'width': col.width}" v-for="col in columns" :key="col.key">{{ col.title }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据行 -->
|
||||
<view class="tr" v-for="(item, index) in tableData" :key="index">
|
||||
<view class="td color-6" style="display: inline-flex;align-items: center;
|
||||
justify-content: flex-start;" v-for="col in columns" :style="{'width': col.width}" :key="col.key">
|
||||
<span class="truncate"> {{ item[col.key] }} </span>
|
||||
<img style="width: 20rpx;height: 20rpx;margin-left: 10rpx;" v-if="col.key === 'earnings'" :src="icon" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ZS from '@/static/image/income/zuanshi.png';
|
||||
export default {
|
||||
props: {
|
||||
// 外部传入的标签数据
|
||||
tableData: {},
|
||||
tableLabel:[]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icon:ZS,
|
||||
columns: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if(this.tableLabel && this.tableLabel.length) {
|
||||
this.columns = [...this.tableLabel]
|
||||
} else {
|
||||
this.columns = [
|
||||
{ title: '昵称', key: 'nickname', width: '50%' },
|
||||
{ title: '时间', key: 'createtime', width: '50%' },
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.header {
|
||||
/* background-color: #f5f7fa; */
|
||||
font-weight: bold;
|
||||
color: #6A2E00;
|
||||
}
|
||||
|
||||
.th, .td {
|
||||
padding: 12px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 动态设置列宽 */
|
||||
/* .th:nth-child(1), .td:nth-child(1) { width: 50%; }
|
||||
.th:nth-child(2), .td:nth-child(2) { width: 50%; }
|
||||
.th:nth-child(3), .td:nth-child(3) { width: 20%; }
|
||||
.th:nth-child(4), .td:nth-child(4) {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
} */
|
||||
</style>
|
||||
104
component/uploadImage.vue
Normal file
104
component/uploadImage.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<uni-file-picker ref="filePicker" return-type="array" :limit="1" v-model="fileList" fileMediatype="image" mode="grid" :auto-upload="false" @select="select"
|
||||
@progress="progress" @success="success" @fail="fail"></uni-file-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
fileList(val){
|
||||
this.$emit('changeImageList',this.fileList)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择文件回调
|
||||
select(e) {
|
||||
this.tempFiles = e.tempFiles // 临时存储选择的文件
|
||||
if (!this.tempFiles || this.tempFiles.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请先选择文件',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
// 遍历所有选择的文件
|
||||
this.tempFiles.forEach(file => {
|
||||
this.uploadFile(file)
|
||||
})
|
||||
// const platform = uni.getSystemInfoSync().platform;
|
||||
// if (platform === 'ios') {
|
||||
// this.tempFiles = e.tempFiles // 临时存储选择的文件
|
||||
// if (!this.tempFiles || this.tempFiles.length === 0) {
|
||||
// uni.showToast({
|
||||
// title: '请先选择文件',
|
||||
// icon: 'none'
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
// // 遍历所有选择的文件
|
||||
// this.tempFiles.forEach(file => {
|
||||
// this.uploadFile(file)
|
||||
// })
|
||||
// } else if (platform === 'android') {
|
||||
// // alert(e)
|
||||
// // console.log('安卓android安卓android安卓android安卓android安卓android安卓android安卓android安卓android安卓android安卓android安卓android安卓android')
|
||||
// uni.chooseImage({
|
||||
// success: (chooseImageRes) => {
|
||||
// const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
// // alert(tempFilePaths[0])
|
||||
// // debugger
|
||||
// this.uploadFile(tempFilePaths[0])
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
},
|
||||
uploadFile(file) {
|
||||
uni.uploadFile({
|
||||
url: 'https://chat.qxmier.com/adminapi/UploadFile/file_upload',
|
||||
filePath: file.path,
|
||||
name: 'files',
|
||||
success: (uploadRes) => {
|
||||
const {code,data} = JSON.parse(uploadRes.data)
|
||||
if(code) {
|
||||
this.fileList.push({
|
||||
tempFile: data,
|
||||
tempFilePath: data.url,
|
||||
res: JSON.parse(uploadRes.data)
|
||||
})
|
||||
// console.log(this.fileList)
|
||||
this.$emit('changeImageList',this.fileList)
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 上传成功回调
|
||||
success(e) {
|
||||
console.log('上传成功', e)
|
||||
},
|
||||
|
||||
// 上传失败回调
|
||||
fail(e) {
|
||||
console.log('上传失败', e)
|
||||
},
|
||||
|
||||
// 上传进度回调
|
||||
progress(e) {
|
||||
console.log('上传进度', e)
|
||||
},
|
||||
clearImage(){
|
||||
this.fileList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user