2 changed files with 303 additions and 3 deletions
@ -0,0 +1,289 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view class="title"> |
||||
|
<view class="title-sreach"> |
||||
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
||||
|
<uni-icons type="left" size="28"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
||||
|
兼职中心 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uni-notice-bar show-icon scrollable text="送单奖励活动开启：截止到当日24时，送单量前五名有额外奖励，奖励金额从高到低为20元/10元/8.8元/6.6元/5元，抓紧送单的奖励吧！" /> |
||||
|
<uni-datetime-picker style="margin-bottom:10px;" v-model="range" @change="searchList" type="daterange" /> |
||||
|
|
||||
|
<view class="paiming"> |
||||
|
<view style="width: 200rpx;height: 100rpx;position: absolute;bottom: 30%;left: 6%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;"> |
||||
|
<view> |
||||
|
{{fireList[2].productName == undefined?'':fireList[2].productName}} |
||||
|
</view> |
||||
|
<view style="line-height: 60rpx;"> |
||||
|
{{fireList[2].totalSold == undefined?'':fireList[2].totalSold}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width: 200rpx;height: 100rpx;position: absolute;top: 50%;left: 37%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;"> |
||||
|
<view> |
||||
|
{{fireList[0].productName == undefined?'':fireList[0].productName}} |
||||
|
</view> |
||||
|
<view style="line-height: 60rpx;"> |
||||
|
{{fireList[0].totalSold == undefined?'':fireList[0].totalSold}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width: 200rpx;height: 100rpx;position: absolute;bottom: 27%;right: 6%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;"> |
||||
|
<view> |
||||
|
{{fireList[1].productName == undefined?'':fireList[1].productName}} |
||||
|
</view> |
||||
|
<view style="line-height: 60rpx;"> |
||||
|
{{fireList[1].totalSold == undefined?'':fireList[1].totalSold}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content-list"> |
||||
|
<view v-for="(item,index) in fireList" :key="index" class="content-item"> |
||||
|
<view v-if="index == 0" style="justify-content: center;align-items: center;display: flex;"> |
||||
|
<uni-icons type="medal-filled" size='22' color="#fcdb56"></uni-icons> |
||||
|
</view> |
||||
|
<view v-if="index == 1" style="justify-content: center;align-items: center;display: flex;"> |
||||
|
<uni-icons type="medal-filled" size='22' color="#dedee0"></uni-icons> |
||||
|
</view> |
||||
|
<view v-if="index == 2" style="justify-content: center;align-items: center;display: flex;"> |
||||
|
<uni-icons type="medal-filled" size='22' color="#f6bf6f"></uni-icons> |
||||
|
</view> |
||||
|
<view v-if="index != 0 && index != 1 && index != 2" style="width: 44rpx;justify-content: center;align-items: center;display: flex;">{{index + 1}}</view> |
||||
|
<view class="box-left" @tap.stop="largeImg(item)"> |
||||
|
<img :src="item.productPicture" alt="" v-if="item.productPicture"> |
||||
|
<view class="noPic" v-else>暂无图片</view> |
||||
|
</view> |
||||
|
<view class="box-right"> |
||||
|
<view class="box-right-num">{{item.productName == null?'暂无':item.productName}}</view> |
||||
|
<view class="box-right-name">{{item.totalSold}}单</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-loadmore :status="status" /> |
||||
|
</view> |
||||
|
<!-- 弹出多图轮播 --> |
||||
|
<uni-popup ref="imgPopup" background-color="#fff"> |
||||
|
<view class="showImg-box"> |
||||
|
<swiper indicator-dots class="swiper-box" @change="lunbochange" circular autoplay :current="swiperDotIndex"> |
||||
|
<swiper-item v-for="(item, index) in bigImg" :key="index"> |
||||
|
<view class="swiper-item"> |
||||
|
<image mode='aspectFit' show-menu-by-longpress :src="item.productPicture" alt="" style="width: 100%;height: 100%;border-radius: 10px;" /></image> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
menuButtonInfo: {}, |
||||
|
range:[], |
||||
|
status: 'loadmore', |
||||
|
fireList:[], |
||||
|
pageNum:1, |
||||
|
pages:1, |
||||
|
indexList: [], |
||||
|
bigImg:[], |
||||
|
swiperDotIndex:0, |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
onShow(){ |
||||
|
this.getMonth() |
||||
|
this.getFireList() |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if (this.pageNum >= this.pages) return; |
||||
|
this.status = 'loading'; |
||||
|
this.pageNum ++; |
||||
|
this.getFireList(); |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
lunbochange(e) { |
||||
|
this.current = e.detail.current |
||||
|
}, |
||||
|
getFireList(){ |
||||
|
this.tui.request("/app/product/getShareList", "POST", { |
||||
|
categoryId: "", |
||||
|
searchStr: "", |
||||
|
pageNum: this.pageNum, |
||||
|
pageSize: '10', |
||||
|
sortField:"totalSold", |
||||
|
startDate:this.range[0], |
||||
|
endDate:this.range[1] |
||||
|
}, false, false).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.status = 'nomore'; |
||||
|
if (this.pages == 1) { |
||||
|
this.fireList = res.result.records |
||||
|
} else { |
||||
|
this.fireList = [...this.fireList, ...res.result.records] |
||||
|
} |
||||
|
this.pages = res.result.pages |
||||
|
} else { |
||||
|
this.tui.toast(res.message) |
||||
|
} |
||||
|
}).catch((res) => {}) |
||||
|
}, |
||||
|
searchList(res) { |
||||
|
this.pageNum = 1; |
||||
|
this.fireList = []; |
||||
|
this.getFireList() |
||||
|
}, |
||||
|
//获取当月1日到当前时间 |
||||
|
getMonth() { |
||||
|
let date = new Date() |
||||
|
let year = date.getFullYear().toString() //'年' |
||||
|
let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString() //'月' |
||||
|
let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString() //'日' |
||||
|
let end = year + '-' + month + '-' + da //当天 |
||||
|
let beg = year + '-' + month + '-01' //当月第一天 |
||||
|
this.range = [beg,end] |
||||
|
}, |
||||
|
largeImg(img) { |
||||
|
if((img.productPicture == null &&img.productPictures == null) || (img.productPicture == '' &&img.productPictures == '') || (img.productPicture == null &&img.productPictures == '') || (img.productPicture == '' &&img.productPictures == null)){ |
||||
|
this.tui.toast("暂无可展示的图片",300) |
||||
|
return |
||||
|
} |
||||
|
this.bigImg = [] |
||||
|
if(img.productPicture != null){ |
||||
|
let data = { |
||||
|
productPicture:img.productPicture |
||||
|
} |
||||
|
this.bigImg.push(data) |
||||
|
} |
||||
|
if(img.productPictures != null){ |
||||
|
for(let i=0;i<img.productPictures.length;i++){ |
||||
|
this.bigImg.push(img.productPictures[i]) |
||||
|
} |
||||
|
} |
||||
|
this.$refs.imgPopup.open() |
||||
|
}, |
||||
|
back() { |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.paiming{ |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/a07b86e1b1c74c88ac42dcc8a592980c.jpg') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 680rpx; |
||||
|
background-size: 100%; |
||||
|
position: relative; |
||||
|
z-index: 97; |
||||
|
} |
||||
|
.content-list{ |
||||
|
width: 90%; |
||||
|
overflow: scroll; |
||||
|
border-radius: 20rpx; |
||||
|
background: #fff; |
||||
|
margin: -50rpx auto 0; |
||||
|
position: relative; |
||||
|
z-index: 98; |
||||
|
} |
||||
|
.content-item{ |
||||
|
height: 180rpx; |
||||
|
width: 100%; |
||||
|
padding: 0 20rpx; |
||||
|
font-size: 32rpx; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
display: flex; |
||||
|
} |
||||
|
.box-left { |
||||
|
width: 130rpx; |
||||
|
height: 131rpx; |
||||
|
background-size: 100%; |
||||
|
margin: 25rpx 30rpx 25rpx 10rpx; |
||||
|
} |
||||
|
|
||||
|
.box-left img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 131rpx; |
||||
|
} |
||||
|
|
||||
|
.box-right { |
||||
|
margin-top: 17rpx; |
||||
|
padding-top:30rpx; |
||||
|
} |
||||
|
|
||||
|
.box-right-price { |
||||
|
display: flex; |
||||
|
font-size: 25rpx; |
||||
|
} |
||||
|
.noPic{ |
||||
|
border-radius: 10px; |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
// margin: 30rpx 0 0 30rpx; |
||||
|
text-align: center; |
||||
|
line-height: 140rpx; |
||||
|
color: #777; |
||||
|
background: #eee; |
||||
|
} |
||||
|
.box-right-num { |
||||
|
padding: 5rpx 0; |
||||
|
color: #000; |
||||
|
font-weight: bold; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
.box-right-name { |
||||
|
font-size: 26rpx; |
||||
|
height: 50rpx; |
||||
|
line-height: 50rpx; |
||||
|
} |
||||
|
.showImg-box{ |
||||
|
width: 700rpx; |
||||
|
height: 1000rpx; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.swiper-box { |
||||
|
height: 1000rpx; |
||||
|
} |
||||
|
.swiper-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 1000rpx; |
||||
|
color: #fff; |
||||
|
background-color: #cee1fd; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
.title { |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 20%; |
||||
|
} |
||||
|
|
||||
|
.title-sreach { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
height: 200rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.title-name { |
||||
|
padding-top: 110rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 700; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue