mengxu/merchant-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5ee9c6c1de
merchant-app/pages/index.vue

698 lines
115 KiB
Vue
Raw Normal View History

init
2024-09-12 14:10:05 +08:00
<template>
<!-- pages/index/index.wxml -->
<view :style="{marginTop: titleTop + 'px', height: 'calc(100% - ' + titleTop+'px)' }" class="sy-container">
<view class="topView" @click="my()">
<!-- <view class="headImg" >{{realName.charAt(0)}}</view>-->
<view class="headImg"></view>
</view>
<view class="title">任务</view>
<view class="search-container" >
<view class="search">
<uni-icons class="icon" type="search" size="30" @click="search"></uni-icons>
<input class="search-input" id="search-input" v-model="searchVal" type="text" placeholder="请输入任务名称" maxlength="30" @confirm="search" @input="search"/>
</view>
</view>
<view class="filter">
<view class="select" @click="openSelect">
{{nowSelect}}
<view class="more-icon"></view>
</view>
<view class="dateSelect">
<uni-datetime-picker type="date" v-model="queryParams.taskDate" @maskClick="maskClick" @change="timeChange($event)">
{{queryParams.taskDate == null ? "全部日期" : queryParams.taskDate}}
<view v-if="queryParams.taskDate == null" class="more-icon"></view>
</uni-datetime-picker>
<uni-icons v-if="queryParams.taskDate != null" class="icon more-icon2" type="closeempty" size="10" @click="resetTime"></uni-icons>
<!-- <view type="date" v-model="single" @click="maskClick" @change="timeChange($event)">全部日期</view>-->
</view>
<!-- <uni-icons class="icon" type="arrow-down" size="10"></uni-icons>-->
<!-- <view class="dateSelect" @maskClick="maskClick">-->
<!-- 全部日期-->
<!-- <uni-icons class="icon" type="arrow-down" size="10"></uni-icons>-->
<!-- </view>-->
</view>
<uni-popup style="z-index: 10000" ref="popup" type="bottom" border-radius="10px 10px 0 0">
<view class="selectContext">
<view class="select-item" @click="filter(0)">全部任务</view>
<view class="select-item" @click="filter(1)">进行中的任务</view>
<view class="select-item" @click="filter(2)">已结束的任务</view>
</view>
</uni-popup>
<scroll-view class="list"
:scroll-top="scrollTop"
scroll-y="true"
:refresher-enabled="isOpenRefresh"
:refresher-triggered="triggered"
@refresherrefresh="refresh"
@scrolltoupper="upper"
@scroll="scroll"
@scrolltolower="loadMore"
@refresherpulling="onPulling"
>
<view class="item" @click="goDetails(task)" v-for="(task, index) in taskList" :key="index">
<view class="line1">
<view class="name-status">
<view class="task-name">
{{task.taskName}}
</view>
<view class="status-base" :class="toDate(task.taskDate) == '已结束' ? 'task-status-end' : 'task-status'"/>
</view>
<view class="price">
<view class="num">¥{{task.dayPrice}}元</view>
<view class="unit">/天</view>
</view>
</view>
<view class="line3">
<view class="num-container" style="background-color: #f1f0f0;">
<view class="num-label">
用工日期
</view>
<view class="num">
{{task.taskDate}}
</view>
</view>
<view class="num-container" style="background-color: #e4e4fd;">
<view class="num-label">
用工人数
</view>
<view class="num">
{{task.useNum}}
</view>
</view>
<view class="num-container" style="background-color: #fce6ea;">
<view class="num-label">
报名人数
</view>
<view class="num">
{{task.baomingNum}}
</view>
</view>
<view class="num-container" style="background-color: #def9fc;">
<view class="num-label">
点名人数
</view>
<view class="num">
fix
2024-10-09 10:09:20 +08:00
{{task.signNum + task.noSignNum}}
init
2024-09-12 14:10:05 +08:00
</view>
</view>
</view>
<view class="line4">
<view class="date-label">
<view class="icon"></view>
发布时间: {{task.createTime}}
</view>
<view class="button"></view>
</view>
</view>
<view v-if="showLoading" class="load-more">加载中...</view>
<view v-if="showNoMore" class="no-more">没有更多数据了</view>
</scroll-view>
</view>
</template>
<script>
import { getTaskList } from "@/api/task";
// import { getCodeImg } from '@/api/login'
export default {
data() {
return {
titleTop: 0,
statusBarHeight: 0,
queryParams: {
pageNum: 1,
fix bug
2024-09-13 10:06:26 +08:00
pageSize: 10,
init
2024-09-12 14:10:05 +08:00
dateStatus: 0,
taskName: null,
taskDate: null,
},
taskList: [],
nowSelect: "全部任务",
searchVal: null,
realName: "",
// 是否显示加载更多的loading
showLoading: false,
// 是否显示无更多数据提示
showNoMore: true,
triggered: false,
isOpenRefresh: true,
containerScrollTop: 0,
};
},
onLoad: function() {
// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// console.log(menuButtonInfo.width) //宽度，单位：px
// console.log(menuButtonInfo.height) //高度，单位：px
// console.log(menuButtonInfo.top) //上边界坐标，单位：px
// console.log(menuButtonInfo.right) //右边界坐标，单位：px
// console.log(menuButtonInfo.bottom) //下边界坐标，单位：px
// console.log(menuButtonInfo.left) //左边界坐标，单位：px
let that = this;
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const { top, height } = menuButtonInfo;
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
// 计算标题需要偏移的位置
const titleTop = top + (height - statusBarHeight) / 2;
this.titleTop = titleTop;//设置标题顶部距离
this.statusBarHeight = statusBarHeight;//设置状态栏高度
this.realName = this.$store.state.user.nickName
// uni.setNavigationBarTitle({
// title: 12333
// })
this.getList();
},
methods:{
fix bug
2024-09-13 10:06:26 +08:00
reload(){
this.refresh();
},
init
2024-09-12 14:10:05 +08:00
openSelect(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('bottom')
},
closeSelect(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.close()
},
filter(type){
this.closeSelect()
this.queryParams.dateStatus = type;
if (type == 0){
this.nowSelect = "查看全部";
}else if (type == 1){
this.nowSelect = "进行中的任务";
}else if (type == 2){
this.nowSelect = "已结束的任务";
}
this.queryParams.pageNum = 1;
this.getList();
},
timeChange(e) {
this.single = e;
console.log("-change事件:", e);
this.queryParams.taskDate = e;
this.queryParams.pageNum = 1;
this.getList();
},
toDate(str){
var strArray = str.split(" ");
var strDate = strArray[0].split("-");
// var strTime = strArray[1].split(":");
fix
2024-10-09 10:09:20 +08:00
var taskFinishTime = new Date(strDate[0], (strDate[1]-parseInt(1)), (strDate[2]));//任务结束的晚上0点
taskFinishTime.setDate(taskFinishTime.getDate() + 1);
// console.log("date", taskFinishTime, this.getTomorrowZeroTime())
return new Date() > taskFinishTime ? "已结束" : "进行中"
init
2024-09-12 14:10:05 +08:00
},
fix
2024-10-09 10:09:20 +08:00
getTomorrowZeroTime() {
const now = new Date(); // 获取当前时间
const tomorrow = new Date(now); // 复制当前时间对象
tomorrow.setDate(now.getDate() + 1); // 日期加1，得到明天
tomorrow.setHours(0, 0, 0, 0); // 将小时、分钟、秒和毫秒都设置为0
return tomorrow;
},
init
2024-09-12 14:10:05 +08:00
getList() {
if (this.showNoMore && this.queryParams.pageNum > 1){
return
}
var that = this;
getTaskList(this.queryParams).then(response => {
if (that.queryParams.pageNum > 1){
that.taskList = that.taskList.concat(response.rows);
}else{
that.taskList = response.rows;
}
that.queryParams.pageNum++;
if (response.rows.length < this.queryParams.pageSize){
that.showNoMore = true;
}else{
that.showNoMore = false;
}
that.showLoading = false;
that.triggered = false;
that.total = response.total;
console.log(response)
});
},
search(){
// this.queryParams.taskName = e.detail.value;
// this.queryParams.taskName = $(".search-input").val();
this.queryParams.taskName = this.searchVal;
this.queryParams.pageNum = 1;
this.getList();
},
goDetails(task){
uni.navigateTo({
url: "taskDetails?id=" + task.id
})
},
my(){
uni.navigateTo({
url: "my"
})
},
resetTime(){
this.queryParams.taskDate = null;
this.queryParams.pageNum = 1;
this.getList();
},
onPageScroll(e){
console.log(e.scrollTop)
this.containerScrollTop = e.scrollTop
if (this.containerScrollTop > 0){
this.isOpenRefresh = false
}else{
this.isOpenRefresh = true
}
},
onReachBottom(e){
console.log("onReachBottom", e)
if (this.showLoading || this.showNoMore) {
return;
}
// 显示加载更多的loading
this.showLoading = true;
// 请求数据
this.getList();
},
// 刷新函数
refresh() {
// 请求数据
this.triggered = true;
this.queryParams.pageNum = 1;
this.getList();
},
upper(){
// console.log("upper")
},
scroll(e){
// console.log("scroll", e.detail)
},
onPulling(e) {
// console.log("onpulling", e.detail);
if (e.detail.dy < 8) return // 防止上滑页面也触发下拉
this.triggered = true;
},
// 加载更多函数
loadMore() {
// console.log("loadMore")
// 判断是否正在加载更多或已经没有更多数据
if (this.showLoading || this.showNoMore) {
return;
}
// 显示加载更多的loading
this.showLoading = true;
// 请求数据
this.getList();
},
}
}
</script>
<style lang='scss'>
page{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
html, body {
background-color: #ffffff;
height: 100%;
}
.load-more, .no-more {
display: grid;
place-content: center;
padding: 10rpx;
color: #999;
height: 100rpx;
}
/*.uni-datetime-picker-reset-btn{*/
/* background-color: #ffffff !important;*/
/* color: #1f2d3d !important;*/
/* border: #1f2d3d 1rpx solid;*/
/*}*/
/*.uni-datetime-picker--btn{*/
/* width: 40%;*/
/* margin-left: auto;*/
/* margin-right: auto;*/
/*}*/
/*.uni-date-changed{*/
/* display: flex;*/
/* justify-items: center;*/
/*}*/
.sy-container{
position: relative;
/*height: calc(100% - 47px);*/
.title {
position: absolute;
top: 0;
font-size: 25rpx;
color: #000000;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90rpx;
z-index: 0;
}
.topView{
display: flex;
width: 120rpx;
padding: 0 10rpx 0 20rpx;
z-index: 1;
position: relative;
.headImg{
width: 70rpx;
height: 70rpx;
background-image: url("/static/images/wode.png");
background-size: 100% 100%;
}
}
.search-container{
margin-top: 20rpx;
border-top: 1rpx solid #dbdbdb;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 30rpx 0rpx 30rpx;
height: 100rpx;
.search{
width: 100%;
height: 80rpx;
border-radius: 450px;
border: 1px solid #6c6c6c;
display: flex;
align-items: center;
/*justify-content: center;*/
.icon{
width: 15%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.search-input{
width: 82%;
}
}
}
.filter{
display: flex;
align-items: center;
justify-content: center;
margin-top: 10rpx;
width: 80%;
height: 80rpx;
margin-right: auto;
margin-left: auto;
.select{
width: 50%;
height: 30rpx;
display: flex;
align-items: center;
justify-content: center;
color: #939393;
font-size: 30rpx;
font-weight: 600;
}
.more-icon{
width: 12rpx;
height: 12rpx;
background-image: url("/static/images/index/more-icon.png");
background-size: 100% 100%;
margin-left: 5rpx;
margin-top: 3rpx;
}
.more-icon2{
margin-left: 0rpx;
}
.dateSelect{
width: 50%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
.uni-date{
.uni-date-editor{
display: flex;
align-items: center;
justify-content: center;
color: #939393;
font-size: 30rpx;
font-weight: 600;
}
}
}
}
.selectContext{
background-color: #ffffff;
width: 100%;
/*height: 500rpx;*/
margin-bottom: 0px;
border-radius: 10rpx 10rpx 0 0;
.select-item{
height: 100rpx;
width: 100%;
display: grid;
place-items: center;
font-size: 35rpx;
border-bottom: 1rpx solid #dbdbdb;
}
.select-item:last-child {
border-bottom: none;
}
}
.vue-ref{
padding-bottom: 0px !important;
}
.uni-date-x{
background-color: transparent !important;
color: #000000 !important;
width: 80%;
justify-content: right;
}
.uni-date__x-input{
display: flex !important;
align-items: center !important;
justify-content: center !important;
/*justify-content: flex-end !important;*/
/*margin-left: auto; !* 推动元素到右边 *!*/
}
.uni-date__icon-clear{
width: 20%;
}
.uni-date-x--border{
border: 0 solid #dbdbdb !important;
}
.icon-calendar{
display: none; /* 隐藏图标 */
}
/*.uni-date__x-input{*/
/* display: flex;*/
/* align-items: center;*/
/* justify-content: center;*/
/*}*/
.list{
padding: 0rpx 15rpx 0rpx 15rpx;
/*background-color: #e3e3e3;*/
height: calc(100% - 270rpx);
background-image:url('data:image/png;base64,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
background-size: 100% 100%;
.item{
background-color: #FFFFFF;
width: 95%;
border-radius: 20rpx;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
padding: 10rpx 25rpx 35rpx 25rpx;
margin: 20rpx auto 20rpx auto;
.line1{
height: 100rpx;
display: flex;
align-items: center;
/*justify-content: center;*/
/*border-bottom: 1rpx solid #dbdbdb;*/
.name-status{
display: flex;
fix
2024-10-09 10:09:20 +08:00
align-items: center;
init
2024-09-12 14:10:05 +08:00
.task-name{
font-size: 33rpx;
font-weight: 590;
max-width: 350rpx; /* 设置div的宽度 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出div的内容 */
text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
}
.status-base{
margin-left: 5rpx;
fix
2024-10-09 10:09:20 +08:00
width: 80rpx;
height: 30rpx;
init
2024-09-12 14:10:05 +08:00
background-size: 100% 100%;
}
.task-status{
background-image: url("/static/images/index/task-status-1.png");
}
.task-status-end{
background-image: url("/static/images/index/task-status-2.png");
}
}
.day-price{
margin-left: auto;
font-size: 28rpx;
}
.price{
margin-left: auto;
color: #FF0000;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
display: flex;
align-items: flex-end;
height: 38rpx;
.num{
font-weight: 650;
font-size: 38rpx;
line-height: 38rpx;
}
.unit{
font-weight: 450;
font-size: 20rpx;
}
}
}
.line3{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 15rpx 20rpx 0 20rpx;
.num-container{
width: 24%;
display: grid;
place-items: center;
margin-right: 1.33%;
border-radius: 10rpx;
padding: 15rpx;
.num-label{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 23rpx;
color: #979696;
}
.num{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20rpx;
color: #131313;
overflow: hidden; /* 隐藏超出div的内容 */
text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
margin-top: 10rpx;
}
}
.num-container:last-child {
margin-right: 0;
}
}
.line4{
display: flex;
align-items: center;
/*justify-content: center;*/
margin-top: 40rpx;
height: 65rpx;
.date-label{
display: flex;
align-items: center;
border-top: #f1f1f1 solid 1rpx;
height: 100%;
width: 70%;
.icon{
width: 20rpx;
height: 20rpx;
background-image: url("/static/images/index/clock.png");
background-size: 100% 100%;
margin-right: 5rpx;
}
font-size: 20rpx;
color: #bfbfbf;
}
.button{
background-image: url("/static/images/index/dm-btn.png");
background-size: 100% 100%;
margin-left: 8rpx;
width: 160rpx;
height: 65rpx;
margin-left: auto; /* 推动元素到右边 */
}
}
}
}
}
</style>
Reference in New Issue Copy Permalink