update
This commit is contained in:
2
.env
2
.env
@@ -1,2 +1,2 @@
|
|||||||
VITE_API_URL=http://127.0.0.1:4523
|
VITE_API_URL=http://192.168.1.88:4523
|
||||||
VITE_AES_KEY=4e2c3d4e5f6a7b8c9d0e1f2g3h4i5j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1z2
|
VITE_AES_KEY=4e2c3d4e5f6a7b8c9d0e1f2g3h4i5j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1z2
|
||||||
|
|||||||
@@ -2,10 +2,11 @@ import request from "../../utils/request.js";
|
|||||||
import MethodsENUM from "../../enum/MethodsENUM.js";
|
import MethodsENUM from "../../enum/MethodsENUM.js";
|
||||||
|
|
||||||
const system = {
|
const system = {
|
||||||
getData: async () => {
|
getData: async (data) => {
|
||||||
return request({
|
return request({
|
||||||
method: MethodsENUM.POST,
|
method: MethodsENUM.POST,
|
||||||
url: "/m1/5995958-5684445-default/getList",
|
url: "/m1/5995958-5684445-default/getList",
|
||||||
|
data: data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
46
src/components/AddCustomerServiceModal.vue
Normal file
46
src/components/AddCustomerServiceModal.vue
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<script setup>
|
||||||
|
import {onMounted} from "vue";
|
||||||
|
import XModal from "./XModal.vue";
|
||||||
|
import XQrCode from "./XQrCode.vue";
|
||||||
|
|
||||||
|
const show = defineModel('show');
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<x-modal
|
||||||
|
v-model:show="show">
|
||||||
|
<view class="px-[30rpx] py-[40rpx] relative">
|
||||||
|
<image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]" src="/static/icons/close.png"></image>
|
||||||
|
|
||||||
|
<view class="title">微信扫码添加</view>
|
||||||
|
<view class="!mt-[24rpx] w-[320rpx] !mx-auto aspect-square">
|
||||||
|
<x-qr-code size="320rpx" :qrSize="180" content="公众号"></x-qr-code>
|
||||||
|
</view>
|
||||||
|
<view class="desc !mt-[24rpx]">请发送 [我的] 页面截图给客服</view>
|
||||||
|
<view class="desc">再描述您的问题</view>
|
||||||
|
</view>
|
||||||
|
</x-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title {
|
||||||
|
color: rgb(29, 33, 41);
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 48rpx;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
color: rgb(78, 89, 105);
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
92
src/components/TaskCard.vue
Normal file
92
src/components/TaskCard.vue
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
<script setup>
|
||||||
|
import dy from "../static/images/抖音.png";
|
||||||
|
import qrw from "../static/icons/qrw.png";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="rounded-[8rpx] bg-[#fff] !p-[24rpx]">
|
||||||
|
<view class="!flex gap-[26rpx]">
|
||||||
|
<image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill" :src="dy"></image>
|
||||||
|
<view class="!h-[88rpx] !flex flex-col justify-between">
|
||||||
|
<view class="title">美白祛斑洗面奶</view>
|
||||||
|
<view class="!flex gap-[8rpx]">
|
||||||
|
<view class="tag">抖音</view>
|
||||||
|
<view class="tag">三连发</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="!h-[88rpx] !ml-auto">
|
||||||
|
<view class="price">
|
||||||
|
<text class="unit">¥</text>
|
||||||
|
8.56
|
||||||
|
</view>
|
||||||
|
<view class="price-info">剩余3个名额</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
|
||||||
|
截止时间：08月23日 14:00
|
||||||
|
<view class="absolute top-1/2 -translate-y-1/2 right-0">
|
||||||
|
<image class="!w-[168rpx]" :src="qrw" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.qrw {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: rgb(78, 89, 105);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgb(29, 33, 41);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-info {
|
||||||
|
/* 12/Regular */
|
||||||
|
color: rgb(255, 87, 34);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: rgb(29, 33, 41);
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: rgb(22, 93, 255);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
background: rgb(232, 243, 255);
|
||||||
|
padding: 3rpx 8rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
92
src/components/TaskItem.vue
Normal file
92
src/components/TaskItem.vue
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
<script setup>
|
||||||
|
import dy from "../static/images/抖音.png";
|
||||||
|
import qrw from "../static/icons/qrw.png";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="rounded-[8rpx] bg-[#fff] !p-[24rpx]">
|
||||||
|
<view class="!flex gap-[26rpx]">
|
||||||
|
<image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill" :src="dy"></image>
|
||||||
|
<view class="!h-[88rpx] !flex flex-col justify-between">
|
||||||
|
<view class="title">美白祛斑洗面奶</view>
|
||||||
|
<view class="!flex gap-[8rpx]">
|
||||||
|
<view class="tag">抖音</view>
|
||||||
|
<view class="tag">三连发</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="!h-[88rpx] !ml-auto">
|
||||||
|
<view class="price">
|
||||||
|
<text class="unit">¥</text>
|
||||||
|
8.56
|
||||||
|
</view>
|
||||||
|
<view class="price-info">剩余3个名额</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
|
||||||
|
截止时间：08月23日 14:00
|
||||||
|
<view class="absolute top-1/2 -translate-y-1/2 right-0">
|
||||||
|
<image class="!w-[168rpx]" :src="qrw" mode="widthFix"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.qrw {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: rgb(78, 89, 105);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgb(29, 33, 41);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-info {
|
||||||
|
/* 12/Regular */
|
||||||
|
color: rgb(255, 87, 34);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: rgb(29, 33, 41);
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: rgb(22, 93, 255);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
background: rgb(232, 243, 255);
|
||||||
|
padding: 3rpx 8rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -12,7 +12,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<x-modal
|
<x-modal
|
||||||
:show="show">
|
v-model:show="show">
|
||||||
<view class="px-[30rpx] py-[40rpx] relative">
|
<view class="px-[30rpx] py-[40rpx] relative">
|
||||||
<image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]" src="/static/icons/close.png"></image>
|
<image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]" src="/static/icons/close.png"></image>
|
||||||
|
|
||||||
|
|||||||
20
src/components/XDropdownItem.vue
Normal file
20
src/components/XDropdownItem.vue
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="!py-[14rpx] !px-[24rpx] text">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.text {
|
||||||
|
color: rgb(29, 33, 41);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 140%;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
49
src/components/XDropdownList.vue
Normal file
49
src/components/XDropdownList.vue
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<script setup>
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
const show = ref(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="relative z-[99]">
|
||||||
|
<view @click="show=!show">
|
||||||
|
<slot></slot>
|
||||||
|
|
||||||
|
<tui-icon
|
||||||
|
:style="{
|
||||||
|
transform: !show ? 'rotate(0deg)' : 'rotate(180deg)'
|
||||||
|
}"
|
||||||
|
class="absolute top-1/2 -translate-y-1/2 right-[20rpx] duration-300"
|
||||||
|
name="arrowdown"
|
||||||
|
:size="20">
|
||||||
|
</tui-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<transition name="fade">
|
||||||
|
<view v-if="show" class="absolute top-[calc(100%+10rpx)] min-w-full bg-[#fff] rounded-[8rpx]">
|
||||||
|
<slot name="menu"></slot>
|
||||||
|
</view>
|
||||||
|
</transition>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
v-if="show"
|
||||||
|
id="mask"
|
||||||
|
@click="show=false"
|
||||||
|
class="!w-screen !h-screen !fixed left-0 top-0 z-[999]">
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 300ms;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -4,6 +4,7 @@ const show = defineModel('show');
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<tui-modal
|
<tui-modal
|
||||||
|
@cancel="show=false"
|
||||||
padding="0"
|
padding="0"
|
||||||
custom
|
custom
|
||||||
:show="show">
|
:show="show">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref} from 'vue';
|
import {ref} from 'vue';
|
||||||
import {isWXWeb} from "../utils/uils.js";
|
import {backPage, isWXWeb} from "../utils/uils.js";
|
||||||
|
|
||||||
const {showBack} = defineProps({
|
const {showBack} = defineProps({
|
||||||
showBack: {
|
showBack: {
|
||||||
@@ -14,15 +14,18 @@ const title = ref(document.title);
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<template v-if="!isWXWeb()">
|
<template v-if="!isWXWeb()">
|
||||||
<view class="!flex justify-center items-center h-[100rpx] bg-[#f9f9f9]">
|
<view class="!flex justify-center items-center w-full h-[100rpx] bg-[#f9f9f9] fixed left-0 top-0 z-[998]">
|
||||||
<image
|
<image
|
||||||
v-if="showBack"
|
v-if="showBack"
|
||||||
|
@click="backPage()"
|
||||||
class="!w-[9px] !h-[17px] cursor-pointer !absolute left-[50rpx]"
|
class="!w-[9px] !h-[17px] cursor-pointer !absolute left-[50rpx]"
|
||||||
src="/static/icons/back.png">
|
src="/static/icons/back.png">
|
||||||
</image>
|
</image>
|
||||||
|
|
||||||
<view class="title">{{ title }}</view>
|
<view class="title">{{ title }}</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="h-[100rpx] w-full"></view>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
51
src/components/XVideoModal.vue
Normal file
51
src/components/XVideoModal.vue
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<script setup>
|
||||||
|
import {ref} from 'vue'
|
||||||
|
import XModal from "./XModal.vue";
|
||||||
|
import fmt from '../static/images/fmt.png';
|
||||||
|
import play from '../static/icons/play.png';
|
||||||
|
|
||||||
|
const show = ref(false);
|
||||||
|
const playVideo = ref(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view @click="show=true">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<x-modal
|
||||||
|
class="x-video-modal"
|
||||||
|
v-model:show="show">
|
||||||
|
<view class="!p-[20rpx] relative">
|
||||||
|
<image
|
||||||
|
@click="show=false"
|
||||||
|
class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-100rpx]"
|
||||||
|
src="/static/icons/close.png">
|
||||||
|
</image>
|
||||||
|
|
||||||
|
<view class="!w-full relative rounded-[16rpx] overflow-hidden">
|
||||||
|
<image v-if="!playVideo" class="!w-full" mode="widthFix" :src="fmt"></image>
|
||||||
|
<view @click="playVideo=!playVideo" v-if="!playVideo"
|
||||||
|
class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,.4)] z-10 !flex justify-center items-center">
|
||||||
|
<image class="!w-[94rpx] !h-[94rpx]" :src="play"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<video
|
||||||
|
autoplay
|
||||||
|
@pause="playVideo=!playVideo"
|
||||||
|
class="!w-full"
|
||||||
|
v-else
|
||||||
|
src="https://shopyunlng.oss-cn-beijing.aliyuncs.com/upload/2025/03-18/15-31-150289-429952696.m4v">
|
||||||
|
</video>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</x-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.x-video-modal {
|
||||||
|
.tui-modal-box {
|
||||||
|
margin-bottom: 200rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
75
src/hooks/useTableQuery.js
Normal file
75
src/hooks/useTableQuery.js
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
import {ref, reactive, watch} from 'vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param parameter
|
||||||
|
* @param api
|
||||||
|
* @param callback
|
||||||
|
* @param immediate
|
||||||
|
* @param watchParameter
|
||||||
|
*/
|
||||||
|
function useTableQuery({
|
||||||
|
parameter,
|
||||||
|
api,
|
||||||
|
callback,
|
||||||
|
immediate = true,
|
||||||
|
watchParameter = false,
|
||||||
|
}) {
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const pagination = reactive({
|
||||||
|
current: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
...parameter,
|
||||||
|
current: pagination.current,
|
||||||
|
pageSize: pagination.pageSize
|
||||||
|
}
|
||||||
|
|
||||||
|
const {data} = await api(params);
|
||||||
|
|
||||||
|
pagination.pageSize = data.page;
|
||||||
|
pagination.total = data.total;
|
||||||
|
|
||||||
|
callback && callback({
|
||||||
|
...data,
|
||||||
|
rows: data.rows.map(v => ({...v, key: v.id})),
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const initFetchData = async () => {
|
||||||
|
pagination.current = 1;
|
||||||
|
pagination.total = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [pagination.current, pagination.pageSize],
|
||||||
|
() => fetchData(),
|
||||||
|
{deep: true, immediate: immediate}
|
||||||
|
)
|
||||||
|
|
||||||
|
if (watchParameter) watch(
|
||||||
|
() => parameter,
|
||||||
|
() => fetchData(),
|
||||||
|
{deep: true}
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
pagination,
|
||||||
|
fetchData,
|
||||||
|
initFetchData,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useTableQuery;
|
||||||
@@ -57,6 +57,9 @@
|
|||||||
"usingComponents": true
|
"usingComponents": true
|
||||||
},
|
},
|
||||||
"h5": {
|
"h5": {
|
||||||
|
"router": {
|
||||||
|
"mode": "history"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"mp-alipay": {
|
"mp-alipay": {
|
||||||
"usingComponents": true
|
"usingComponents": true
|
||||||
|
|||||||
@@ -50,6 +50,27 @@
|
|||||||
"navigationBarTitleText": "忘记密码",
|
"navigationBarTitleText": "忘记密码",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/beginnerTutorial/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "新手教程",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/InviteFriends/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "邀请好友",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/comingSoon/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "敬请期待",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@@ -1,9 +1,15 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import yqhyBg from '../../static/icons/yqhy-bg.png';
|
||||||
|
import XNav from "../../components/XNav.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!--邀请好友-->
|
<!--邀请好友-->
|
||||||
|
<XNav></XNav>
|
||||||
|
|
||||||
|
<view class="h-[calc(100vh-100rpx)] relative">
|
||||||
|
<image class="!w-full" mode="widthFix" :src="yqhyBg"></image>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -1,11 +1,176 @@
|
|||||||
<script setup>
|
<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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
</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>
|
</style>
|
||||||
|
|||||||
92
src/pages/comingSoon/index.vue
Normal file
92
src/pages/comingSoon/index.vue
Normal 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>
|
||||||
@@ -5,35 +5,82 @@ import nav2 from '../../static/icons/icon-收益榜单.png';
|
|||||||
import nav3 from '../../static/icons/icon-邀请好友.png';
|
import nav3 from '../../static/icons/icon-邀请好友.png';
|
||||||
import nav4 from '../../static/icons/icon-添加客服.png';
|
import nav4 from '../../static/icons/icon-添加客服.png';
|
||||||
import nav5 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 = [
|
const nav = [
|
||||||
{
|
{
|
||||||
title: '新手教学',
|
title: '新手教学',
|
||||||
icon: nav1,
|
icon: nav1,
|
||||||
|
path: '/pages/beginnerTutorial/index',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '收益榜单',
|
title: '收益榜单',
|
||||||
icon: nav2,
|
icon: nav2,
|
||||||
|
path: '/pages/comingSoon/index',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '邀请好友',
|
title: '邀请好友',
|
||||||
icon: nav3,
|
icon: nav3,
|
||||||
|
path: '/pages/InviteFriends/index',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '添加客服',
|
title: '添加客服',
|
||||||
icon: nav4,
|
icon: nav4,
|
||||||
|
path: null,
|
||||||
|
onClick: () => {
|
||||||
|
showAddCustomer.value = true;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '重要消息',
|
title: '重要消息',
|
||||||
icon: nav5,
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!--首页-->
|
<!--首页-->
|
||||||
<XNav :show-back="false"></XNav>
|
<XNav :show-back="false"></XNav>
|
||||||
|
|
||||||
|
<add-customer-service-modal v-model:show="showAddCustomer"></add-customer-service-modal>
|
||||||
|
|
||||||
|
<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]">
|
<view class="box-border !p-[20rpx]">
|
||||||
<swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
|
<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]">
|
<swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
|
||||||
@@ -42,19 +89,98 @@ const nav = [
|
|||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx]">
|
<view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx] relative z-10">
|
||||||
<view v-for="item in nav" :key="item.title" class="!flex flex-col items-center gap-[6rpx]">
|
<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">
|
<view class="!size-[96rpx] rounded-[20rpx] overflow-hidden">
|
||||||
<image class="!size-full" :src="item.icon"></image>
|
<image class="!size-full" :src="item.icon"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="nav-desc">{{item.title}}</view>
|
<view class="nav-desc">{{ item.title }}</view>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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 {
|
.nav-desc {
|
||||||
font-size: 20rpx;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -1,11 +1,142 @@
|
|||||||
<script setup>
|
<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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
</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>
|
</style>
|
||||||
|
|||||||
@@ -3,4 +3,5 @@ Page {
|
|||||||
}
|
}
|
||||||
page {
|
page {
|
||||||
background-color: #F2F3F5;
|
background-color: #F2F3F5;
|
||||||
|
font-family: PingFang SC;
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
src/static/icons/filer.png
Normal file
BIN
src/static/icons/filer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
BIN
src/static/icons/home-bg.png
Normal file
BIN
src/static/icons/home-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
BIN
src/static/icons/jqqd.jpg
Normal file
BIN
src/static/icons/jqqd.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
src/static/icons/play.png
Normal file
BIN
src/static/icons/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/static/icons/qrw.png
Normal file
BIN
src/static/icons/qrw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/static/icons/yqhy-bg.png
Normal file
BIN
src/static/icons/yqhy-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/static/images/fmt.png
Normal file
BIN
src/static/images/fmt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
src/static/images/video-mask.png
Normal file
BIN
src/static/images/video-mask.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/static/images/抖音.png
Normal file
BIN
src/static/images/抖音.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
@@ -2,10 +2,12 @@ import {showToast} from "./uils.js";
|
|||||||
|
|
||||||
const request = (options) => {
|
const request = (options) => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const {url, method} = options;
|
const {url, method, data, params} = options;
|
||||||
|
|
||||||
uni.request({
|
uni.request({
|
||||||
method: method,
|
method: method,
|
||||||
|
data: data,
|
||||||
|
params: params,
|
||||||
url: `${import.meta.env.VITE_API_URL}${url}`,
|
url: `${import.meta.env.VITE_API_URL}${url}`,
|
||||||
success: ({data}) => {
|
success: ({data}) => {
|
||||||
if (data.code !== 0) {
|
if (data.code !== 0) {
|
||||||
|
|||||||
@@ -19,3 +19,7 @@ export const toPage = (url) => {
|
|||||||
url: url,
|
url: url,
|
||||||
}).then();
|
}).then();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const backPage = () => {
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user