root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-03-27 15:38:21 +08:00
parent 3c85d9e0e7
commit 15b26ab2d9
31 changed files with 1003 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/InviteFriends/index.vue
View File

@@ -1,9 +1,15 @@
<script setup>
import yqhyBg from '../../static/icons/yqhy-bg.png';
import XNav from "../../components/XNav.vue";
</script>
<template>
<!--邀请好友-->
<XNav></XNav>
<view class="h-[calc(100vh-100rpx)] relative">
<image class="!w-full" mode="widthFix" :src="yqhyBg"></image>
</view>
</template>
<style scoped>

167
src/pages/beginnerTutorial/index.vue
View File

@@ -1,11 +1,176 @@
<script setup>
import {ref, reactive} from "vue";
import XNav from "../../components/XNav.vue";
import videoMask from '../../static/images/video-mask.png';
import XVideoModal from "../../components/XVideoModal.vue";
const tabs = [
{
name: '发布问题',
value: 0,
},
{
name: '抖音问题',
value: 1,
},
{
name: '结算问题',
value: 2,
},
{
name: '提现问题',
value: 3,
},
];
const tab = ref(0);
const current = ref(0);
const collapseCur = ref(0);
const dataList = reactive([
{
name: "杜甫",
intro: "杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。"
},
{
name: "李清照",
intro: "李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。"
},
{
name: "鲁迅",
intro: "鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。"
}
]);
</script>
<template>
<!--新手教程-->
<XNav></XNav>
<view class="box-border !p-[20rpx]">
<swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
<swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
<image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
</swiper-item>
</swiper>
</view>
<view class="!grid grid-cols-2 gap-[20rpx] !px-[20rpx]">
<view :class="['tab', tab===0 ? 'cur' : '']" @click="tab=0">
常见问题
</view>
<view :class="['tab', tab===1 ? 'cur' : '']" @click="tab=1">
基础教学
</view>
</view>
<view class="!mt-[20rpx] !px-[20rpx]">
<view class="!w-full bg-[#fff] rounded-[12rpx] pt-[30rpx] px-[20rpx]">
<template v-if="tab===0">
<view class="!grid grid-cols-4 gap-[20rpx]">
<view
v-for="item in tabs"
@click="current=item.value"
:class="['rounded-full bg-[#F2F3F5] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
{{ item.name }}
</view>
</view>
<view class="!mt-[28rpx]">
<template v-for="(item,index) in dataList" :key="index">
<tui-collapse :index="index" :current="collapseCur" :disabled="item.disabled"
@click="({index}) => collapseCur=index">
<template v-slot:title>
<tui-list-cell :hover="!item.disabled">{{ item.name }}</tui-list-cell>
</template>
<template v-slot:content>
<view class="tui-content">{{ item.intro }}</view>
</template>
</tui-collapse>
</template>
</view>
</template>
<template v-else>
<view class="!grid grid-cols-4 gap-[20rpx]">
<view
v-for="item in tabs"
@click="current=item.value"
:class="['rounded-full bg-[#F2F3F5] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
{{ item.name }}
</view>
</view>
<view class="!mt-[28rpx]">
<template v-for="(item,index) in dataList" :key="index">
<x-video-modal>
<view
:class="['!flex gap-[16rpx] py-[28rpx] box-border', index<dataList.length-1 ? 'border-b' : '']">
<image class="!w-[148rpx] !h-[120rpx] rounded-[12rpx]" mode="aspectFill"
:src="videoMask"></image>
<view class="!flex flex-col gap-[8rpx]">
<view class="title">掘金壁纸详细挂载教程，新手必看</view>
<view class="info">
掘金壁纸详细挂载教程，新手必看掘金壁纸详细挂载教程，新手必看
</view>
</view>
</view>
</x-video-modal>
</template>
</view>
</template>
</view>
</view>
</template>
<style scoped>
<style lang="scss" scoped>
.border-b {
border-bottom: 1px solid rgb(229, 230, 235);
}
.title {
color: rgb(29, 33, 41);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-align: left;
}
.info {
color: rgb(134, 144, 156);
font-size: 12px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0;
text-align: left;
}
.tab {
width: 100%;
padding: 20rpx;
background-color: #fff;
border-radius: 12rpx;
color: rgb(29, 33, 41);
font-size: 14px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: center;
transition: 500ms;
}
.current {
background-color: #E8F3FF;
color: #165DFF;
}
#tabs {
width: 100% !important;
padding: 0 !important;
}
.cur {
background-color: rgb(22, 93, 255);
color: #fff;
}
</style>

92
src/pages/comingSoon/index.vue Normal file
View File

@@ -0,0 +1,92 @@
<script setup>
import jqqd from "../../static/icons/jqqd.jpg";
import XNav from "../../components/XNav.vue";
</script>
<template>
<!--敬请期待-->
<XNav></XNav>
<view class="container">
<view class="content">
<view class="image-wrapper">
<image class="main-image" :src="jqqd" mode="aspectFit"/>
</view>
<view class="text-section">
<text class="title">敬请期待</text>
<text class="subtitle">精彩内容正在建设中...</text>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.container {
height: calc(100vh - 100rpx);
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
display: flex;
justify-content: center;
align-items: center;
padding: 40rpx;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
animation: fadeIn 1s ease-in;
}
.image-wrapper {
width: 400rpx;
height: 400rpx;
margin-bottom: 60rpx;
animation: float 3s ease-in-out infinite;
border-radius: 50%;
overflow: hidden;
}
.main-image {
width: 100%;
height: 100%;
}
.text-section {
text-align: center;
}
.title {
display: block;
font-size: 28px;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.subtitle {
display: block;
font-size: 16px;
color: #666;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20rpx);
}
}
</style>

152
src/pages/home/index.vue
View File

@@ -5,56 +5,182 @@ import nav2 from '../../static/icons/icon-收益榜单.png';
import nav3 from '../../static/icons/icon-邀请好友.png';
import nav4 from '../../static/icons/icon-添加客服.png';
import nav5 from '../../static/icons/icon-重要消息.png';
import XDropdownList from "../../components/XDropdownList.vue";
import XDropdownItem from "../../components/XDropdownItem.vue";
import TaskItem from "../../components/TaskItem.vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";
import {reactive, ref} from "vue";
import {toPage} from "../../utils/uils.js";
import AddCustomerServiceModal from "../../components/AddCustomerServiceModal.vue";
const showAddCustomer = ref(false);
const nav = [
{
title: '新手教学',
icon: nav1,
path: '/pages/beginnerTutorial/index',
},
{
title: '收益榜单',
icon: nav2,
path: '/pages/comingSoon/index',
},
{
title: '邀请好友',
icon: nav3,
path: '/pages/InviteFriends/index',
},
{
title: '添加客服',
icon: nav4,
path: null,
onClick: () => {
showAddCustomer.value = true;
}
},
{
title: '重要消息',
icon: nav5,
path: '/pages/messageCenter/index',
},
];
const po = reactive({
});
const vo = reactive({
page: '',
rows: [],
total: 0,
});
const {loading, pagination, initFetchData} = useTableQuery({
api: Api.system.getData,
parameter: po,
callback: (data) => {
vo.page = data.page;
vo.total = data.total;
vo.rows =[...vo.rows, ... data.rows];
}
});
</script>
<template>
<!--首页-->
<XNav :show-back="false"></XNav>
<view class="box-border !p-[20rpx]">
<swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
<swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
<image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
</swiper-item>
</swiper>
</view>
<add-customer-service-modal v-model:show="showAddCustomer"></add-customer-service-modal>
<view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx]">
<view v-for="item in nav" :key="item.title" class="!flex flex-col items-center gap-[6rpx]">
<view class="!size-[96rpx] rounded-[20rpx] overflow-hidden">
<image class="!size-full" :src="item.icon"></image>
<scroll-view
@refresherpulling="initFetchData()"
@scrolltolower="pagination.current++"
class="h-[calc(100vh-200rpx)]"
scroll-y>
<view class="relative overflow-hidden bg-b-r !pb-[34rpx]">
<image class="!w-full !absolute top-1/2 -translate-y-1/2" src="/static/icons/home-bg.png"
mode="widthFix"></image>
<view class="!w-full !h-full !absolute !top-0 !left-0 bg-w"></view>
<view class="box-border !p-[20rpx]">
<swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
<swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
<image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
</swiper-item>
</swiper>
</view>
<view class="nav-desc">{{item.title}}</view>
<view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx] relative z-10">
<view
v-for="item in nav"
:key="item.title"
@click="item.path ? toPage(item.path) : item.onClick()"
class="!flex flex-col items-center gap-[6rpx]">
<view class="!size-[96rpx] rounded-[20rpx] overflow-hidden">
<image class="!size-full" :src="item.icon"></image>
</view>
<view class="nav-desc">{{ item.title }}</view>
</view>
</view>
</view>
</view>
<view class="title">
任务列表
</view>
<view class="!grid !grid-cols-3 !px-[20rpx] gap-[20rpx]">
<x-dropdown-list>
<view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
全部任务
</view>
<template #menu>
<x-dropdown-item>全部任务</x-dropdown-item>
<x-dropdown-item>宣发任务</x-dropdown-item>
<x-dropdown-item>评论任务</x-dropdown-item>
<x-dropdown-item>点赞任务</x-dropdown-item>
<x-dropdown-item>助力任务</x-dropdown-item>
<x-dropdown-item>其他任务</x-dropdown-item>
</template>
</x-dropdown-list>
<x-dropdown-list>
<view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
全部平台
</view>
<template #menu>
<x-dropdown-item>全部平台</x-dropdown-item>
<x-dropdown-item>抖音</x-dropdown-item>
<x-dropdown-item>快手</x-dropdown-item>
<x-dropdown-item>小红书</x-dropdown-item>
<x-dropdown-item>今日头条</x-dropdown-item>
<x-dropdown-item>其他</x-dropdown-item>
</template>
</x-dropdown-list>
<x-dropdown-list>
<view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
默认排序
</view>
<template #menu>
<x-dropdown-item>默认排序</x-dropdown-item>
<x-dropdown-item>价格最高</x-dropdown-item>
<x-dropdown-item>极速打款</x-dropdown-item>
<x-dropdown-item>素材安全</x-dropdown-item>
<x-dropdown-item>简单上手</x-dropdown-item>
<x-dropdown-item>最新发布</x-dropdown-item>
</template>
</x-dropdown-list>
</view>
<view class="!flex flex-col gap-[20rpx] !mt-[20rpx] !px-[20rpx]">
<task-item v-for="i in vo.rows"></task-item>
<tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
</view>
</scroll-view>
</template>
<style lang="scss" scoped>
.bg-b-r {
border-bottom-right-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.bg-w {
overflow: hidden;
background: linear-gradient(180.00deg, rgb(0, 0, 0, 0), rgb(255, 255, 255) 90%);
}
.nav-desc {
font-size: 20rpx;
}
.title {
color: rgb(29, 33, 41);
font-size: 16px;
font-weight: 700;
line-height: 140%;
letter-spacing: 0;
text-align: left;
margin: 28rpx 0;
padding: 0 20rpx;
}
</style>

133
src/pages/myTask/index.vue
View File

@@ -1,11 +1,142 @@
<script setup>
import filer from '../../static/icons/filer.png';
import XNav from "../../components/XNav.vue";
import {ref} from "vue";
import TaskCard from "../../components/TaskCard.vue";
const tabs = [
{
name: '发布问题',
value: 0,
},
{
name: '抖音问题',
value: 1,
},
{
name: '结算问题',
value: 2,
},
{
name: '提现问题',
value: 3,
},
];
const current = ref(0);
</script>
<template>
<!--我的任务-->
<XNav :show-back="false"></XNav>
<view class="relative">
<view class="!w-full !h-[414rpx] bg-[var(--primary-color)] bor-b-r !absolute">
</view>
<view class="!grid grid-cols-4 bg-[#4080FF] py-[20rpx] text-[13px] text-[#fff] relative z-10">
<view class="!w-full text-center !flex justify-center items-center">全部任务</view>
<view class="!w-full text-center !flex justify-center items-center">全部平台</view>
<view class="!w-full text-center !flex justify-center items-center">全部状态</view>
<view class="!w-full text-center !flex justify-center items-center">
<view
class="!flex items-center justify-center gap-[10rpx] !py-[10rpx] !px-[30rpx] bg-[#0E42D2] rounded-[8rpx]">
<image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
筛选
</view>
</view>
</view>
<view class="!p-[20rpx] relative z-10">
<view class="rounded-[12rpx] !p-[20rpx] bg-[#fff]">
<view class="!flex items-center justify-between">
<view class="stic-title">| 数据概览</view>
<view class="stic-date">2024.08.07-2024.09.07</view>
</view>
<view class="!mt-[20rpx] !grid grid-cols-2 grid-rows-2 gap-[20rpx]">
<view
class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
<view class="block-title">接受任务数</view>
<view class="block-value">10</view>
</view>
<view
class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
<view class="block-title">预估收益(元)</view>
<view class="block-value">45.00</view>
</view>
<view
class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
<view class="block-title">完成任务数</view>
<view class="block-value">4</view>
</view>
<view
class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
<view class="block-title">到账收益(元)</view>
<view class="block-value">5.60</view>
</view>
</view>
</view>
</view>
<view class="!grid grid-cols-4 gap-[20rpx] !px-[20rpx]">
<view
v-for="item in tabs"
@click="current=item.value"
:class="['rounded-full bg-[#fff] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
{{ item.name }}
</view>
</view>
<view class="!flex flex-col gap-[20rpx] !px-[20rpx] !mt-[20rpx]">
<TaskCard v-for="i in 100"></TaskCard>
</view>
</view>
</template>
<style scoped>
<style lang="scss" scoped>
.current {
background-color: #165DFF;
color: #fff;
}
.block-value {
color: rgb(22, 93, 255);
font-size: 40rpx;
font-weight: 500;
line-height: 23px;
letter-spacing: 0;
text-align: left;
}
.block-title {
color: rgb(29, 33, 41);
font-size: 24rpx;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
.bor-b-r {
border-bottom-left-radius: 12rpx;
border-bottom-right-radius: 12rpx;
}
.stic-title {
color: rgb(29, 33, 41);
font-size: 14px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
.stic-date {
color: rgb(134, 144, 156);
font-size: 12px;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
</style>