hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页调整

Browse Source
This commit is contained in:
gcd 2025-03-31 22:05:57 +08:00
parent 09f985c8f6
commit 0784d01c6e
8 changed files with 78 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/me-icon/me-icon.css
View File

@ -1,3 +1,7 @@
.icon-reset-left-line:before {
content: "\e90c";
color: #fff;
}
.icon-upload-cloud-fill:before {
content: "\e90b";
}
@ -6,9 +10,11 @@
}
.icon-info:before {
content: "\e900";
color: #e18f00;
}
.icon-call:before {
content: "\e901";
color: #2772f0;
}
.icon-user:before {
content: "\e902";
@ -21,15 +27,19 @@
}
.icon-flashlight:before {
content: "\e905";
color: #fff;
}
.icon-time:before {
content: "\e906";
color: #2772f0;
}
.icon-arrow-right-circle:before {
content: "\e907";
color: #fff;
}
.icon-checkbox-circle:before {
content: "\e908";
color: #2772f0;
}
.icon-checkbox-blank-circle:before {
content: "\e909";

BIN
components/me-icon/me-icon.ttf
View File

Binary file not shown.

1
components/me-top/me-top.vue
View File

@ -46,7 +46,6 @@ const props = defineProps({
font-weight: 500;
font-size: 32rpx;
color: var(--titleColor);
margin-left: -60rpx;
}
}
}

123
pages/index/index.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="ctr">
<view class="fixed-top">
<me-top title="接单大厅"></me-top>
<me-top :title="data.isPullDownRefresh ? '刷新中…' : '接单大厅'"></me-top>
</view>
<me-empty-space :height="listMarginTop"></me-empty-space>
@ -37,68 +37,10 @@
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
</view>
</view>
<view class="order-item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r important-color">上门报价</view>
</view>
<view class="content flex-sb">
<view class="left">
<view class="address-name flex-l">
金城花园(天府二街)336号
</view>
<view class="address flex-l">
四川省成都市武侯区
</view>
<view class="time-ctr flex-l">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">周日 10月08日 12:30</text>
</view>
</view>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c">8.34公里</view>
</view>
</view>
<view class="discount flex-l">已支付订金：30元抵扣50元</view>
<view class="btn-ctr flex-sb">
<me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
</view>
</view>
<view class="order-item">
<view class="top flex-sb">
<view class="type flex-l">日常保洁</view>
<view class="price flex-r important-color">上门报价</view>
</view>
<view class="content flex-sb">
<view class="left">
<view class="address-name flex-l">
金城花园(天府二街)
</view>
<view class="address">
广东省茂名市茂南区金城路26号大院附近
</view>
<view class="time-ctr flex-l">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">周日 10月08日 12:30</text>
</view>
</view>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c">8.34公里</view>
</view>
</view>
<view class="discount flex-l">已支付订金：30元抵扣50元</view>
<view class="btn-ctr flex-sb">
<me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
</view>
</view>
<view class="refresh flex-c" @click="refreshStart()" hover-class="auto-mask-layer-radius100" hover-start-time="0" hover-stay-time="50">
<view class="icon flex-c" :style="{ transform: `rotate(${refresh.rotate_deg}deg)` }">
<me-icon type="icon-reset-left-line" color="#FFFFFF" size="60rpx"></me-icon>
</view>
</view>
<me-empty-space height="100"></me-empty-space>
@ -106,7 +48,7 @@
</template>
<script setup>
import {onLoad, onShow} from '@dcloudio/uni-app'
import {onLoad, onShow, onPullDownRefresh} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
@ -131,7 +73,7 @@ const data = reactive({
page: 1,
page_size: 10,
last_page: 0,
refresherTriggered: false,
rotateDeg: null,
list: []
})
const getList = () => {
@ -139,19 +81,42 @@ const getList = () => {
data.last_page = res.last_page
if (data.page === 1) {
data.list = res.data;
data.refresherTriggered = false;
} else {
data.list = data.list.concat(helpers.deepObj(res.data))
}
// data.isShowSkeleton = false
}).catch(() => {})
}).catch(() => {}).finally(() => {
refreshComplete()
})
}
const refresh = () => {
data.refresherTriggered = true
const refresh = reactive({
interval: null,
rotate_deg: 0
})
const refreshStart = () => {
if (refresh.interval !== null) {
return
}
refresh.interval = setInterval(() => {
refresh.rotate_deg -= 12;
}, 16);
data.page = 1
getList()
}
const refreshComplete = () => {
if (refresh.interval !== null) {
clearInterval(refresh.interval);
refresh.interval = null
uni.showToast({
title: '已刷新',
icon: "success"
})
}
}
</script>
<style lang="scss" scoped>
@ -162,7 +127,25 @@ const refresh = () => {
position: fixed;
top: 0;
background-color: var(--pageBgColor);
width: 100%;
width: 686rpx;
}
.refresh {
width: 108rpx;
height: 108rpx;
background: var(--themeColor);
border-radius: 50%;
position: fixed;
bottom: 64rpx;
right: 32rpx;
}
.rotate {
animation: spin 0.5s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
}
</style>

2
pages/user/user.vue
View File

@ -81,7 +81,7 @@ const logout = () => {
position: fixed;
top: 0;
background-color: var(--pageBgColor);
width: 100%;
width: 686rpx;
}
.header {
width: 100%;

2
pages/workbench/workbench.vue
View File

@ -157,7 +157,7 @@ const filter = (index) => {
position: fixed;
top: 0;
background-color: var(--pageBgColor);
width: 100%;
width: 686rpx;
.filter {
width: 686rpx;
height: 100rpx;

10
static/css/common.scss
View File

@ -173,6 +173,15 @@
border-radius: 16rpx;
}
.auto-mask-layer-radius100{
position: relative;
}
.auto-mask-layer-radius100::after {
@include auto-mask-layer();
background-color: var(--contentBgColor);
border-radius: 200rpx;
}
.auto-mask-layer-radius-b8{
position: relative;
}
@ -274,6 +283,7 @@ swiper .wx-swiper-dots .wx-swiper-dot{
}
.content {
width: 100%;
min-height: 160rpx;
.left {
width: 466rpx;
.address-name {

4
utils/helpers.js
View File

@ -70,7 +70,9 @@ class helpers {
}
static formatDate(dateString) {
const date = new Date(dateString);
// 兼容 iOS，替换 "-" 为 "/"
const compatibleDateString = dateString.replace(/-/g, '/');
const date = new Date(compatibleDateString);
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const weekDay = weekdays[date.getDay()];