426 lines
9.7 KiB
Vue
426 lines
9.7 KiB
Vue
<!--
|
|
* @Author: lvy lvy
|
|
* @Date: 2023-05-11 00:31:45
|
|
* @LastEditors: lvy lvy
|
|
* @LastEditTime: 2023-06-02 19:05:46
|
|
* @FilePath: /redmall-uniapp/pages/user/Fruit/index.vue
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
-->
|
|
<style scoped>
|
|
.item {
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
color: #333;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
}
|
|
|
|
.box {
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.item .dot-left,
|
|
.item .dot-right {
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: #f5f5f5;
|
|
position: absolute;
|
|
z-index: 999;
|
|
}
|
|
|
|
.item .dot-left {
|
|
bottom: -6px;
|
|
left: -6px;
|
|
}
|
|
|
|
.item .fruit_status {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 120rpx;
|
|
color: #dd0d1f;
|
|
}
|
|
|
|
.item .dot-right {
|
|
bottom: -6px;
|
|
right: -6px;
|
|
}
|
|
|
|
.item .page-group {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: -2px;
|
|
width: 100%;
|
|
max-width: 120px;
|
|
}
|
|
|
|
.item .page-group .fold-page {
|
|
display: block;
|
|
width: 2px;
|
|
height: 5px;
|
|
background: #db0113;
|
|
transform: skewY(-40deg);
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item .page-group .page {
|
|
position: absolute;
|
|
z-index: 1;
|
|
display: block;
|
|
width: 106rpx;
|
|
top: -10px;
|
|
height: 48rpx;
|
|
|
|
padding: 0px;
|
|
height: 20px;
|
|
background: linear-gradient(135deg, #E76B5A 0%, #D64439 100%);
|
|
border-radius: 16rpx 0rpx 30rpx 0rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item .content {
|
|
width: 100%;
|
|
height: 140px;
|
|
background: linear-gradient(135deg, #F7978A 0%, #F05549 100%);
|
|
|
|
border-bottom: 1px dotted #f5f5f5;
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #fff;
|
|
}
|
|
|
|
.item .footer {
|
|
color: #333;
|
|
font-size: 12px;
|
|
padding: 5px 15px 10px 15px;
|
|
}
|
|
|
|
.footer-label {
|
|
line-height: 24px;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 48upx;
|
|
font-weight: 600;
|
|
padding-top: 85upx;
|
|
padding-left: 45upx;
|
|
}
|
|
|
|
.content-button {
|
|
font-size: 26upx;
|
|
font-weight: 600;
|
|
margin-top: 105upx;
|
|
margin-right: 45upx;
|
|
width: 140rpx;
|
|
height: 56rpx;
|
|
text-align: center;
|
|
line-height: 56rpx;
|
|
color: #F05549;
|
|
font-size: 28upx;
|
|
background: linear-gradient(90deg, #FFD5D1 0%, #FFFFFF 100%);
|
|
border-radius: 40upx;
|
|
}
|
|
|
|
.content-button button {
|
|
width: 140rpx;
|
|
height: 56rpx;
|
|
font-size: 28upx;
|
|
background: linear-gradient(90deg, #FFD5D1 0%, #FFFFFF 100%);
|
|
border-radius: 276rpx 276rpx 276rpx 276rpx;
|
|
}
|
|
|
|
.item .ribbon {
|
|
width: 80px;
|
|
height: 20px;
|
|
background: #dd0d1f;
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 10px;
|
|
transform: rotateZ(45deg);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.item .ribbon-success {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 10px;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
.item .ribbon-success image {
|
|
width: 120upx;
|
|
height: 120upx;
|
|
}
|
|
|
|
.ribbon-warning {
|
|
width: 80px;
|
|
height: 20px;
|
|
background: #de8e16;
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 10px;
|
|
transform: rotateZ(45deg);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.page {
|
|
padding: 25upx;
|
|
}
|
|
|
|
.bg {
|
|
background-size: 100% 100%
|
|
}
|
|
|
|
.gary {
|
|
filter: grayscale(1);
|
|
}
|
|
.item {
|
|
padding: 20rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
.status-picker {
|
|
padding: 20rpx 40rpx;
|
|
}
|
|
</style>
|
|
<template>
|
|
<view style="background: #f5f5f6;width: 100%;">
|
|
|
|
<!-- <u-action-sheet :show="showCount" :actions="actions" title="请选择性别" description="如果选择保密会报错" @close="showCount = false"
|
|
@select="countSelect">
|
|
</u-action-sheet> -->
|
|
<u-modal duration="100" @cancel="show = false" width="640rpx" confirmColor="#576B95" cancelColor="#000000"
|
|
:closeOnClickOverlay="true" :showCancelButton="true" confirmText='确定' :show="show">
|
|
|
|
</u-modal>
|
|
<v-tabs :tabs="tabsList" lineHeight="6rpx" activeColor="#FA5151" lineColor="#FA5151" :bold="true" :scroll="false"
|
|
fontSize="30rpx" v-model="current" @change="tabsChange"></v-tabs>
|
|
<view class="status-picker bg-w flex flex-space-between" @click="showPicker= true">
|
|
<view class="flex">
|
|
<view class="flex">
|
|
领取状态：
|
|
<span class="color-b6" v-if="statusIndex == null">请选择领取状态</span>
|
|
<span class="color-bule" style="color: #2979ff;" v-if="statusIndex >= 0">{{ columns[0][statusIndex]}}</span>
|
|
</view>
|
|
<u-icon
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</view>
|
|
<view >
|
|
合计：<span v-if="dataList.length" style="color: #2979ff;">
|
|
{{dataList[0]['amountSum'] || 0}}
|
|
</span>
|
|
<span v-else>0</span>
|
|
</view>
|
|
</view>
|
|
<u-picker @confirm="handlerConfirm" @close="showPicker = false" @cancel="showPicker = false" :show="showPicker" :columns="columns"></u-picker>
|
|
<scroll-view scroll-y="true" :style="{height: contentHeight + 'px'}" @scrolltolower="loadMore">
|
|
<view class="page" v-if="dataList.length">
|
|
<view class="item bg-w" :class="item.status != 0 ? 'gary' : ''" v-for="(item, index ) in dataList" :key="index">
|
|
<view class="flex flex-align-center flex-space-between">
|
|
日期
|
|
<span>{{ item.permissibleDate }}</span>
|
|
</view>
|
|
<view class="flex flex-align-center flex-space-between">
|
|
领取状态
|
|
<view>
|
|
<text v-if="item.status == 0">未领取</text>
|
|
<text v-if="item.status == 1">已领取</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-align-center flex-space-between">
|
|
金额
|
|
<view>
|
|
{{ item.amount }}
|
|
</view>
|
|
</view>
|
|
<view v-if="tabsIndex == 0" class="flex flex-align-center flex-space-between">
|
|
购买日期
|
|
<view>
|
|
{{ item.orderTime }}
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex flex-align-center flex-space-between">
|
|
购买人
|
|
<view>
|
|
{{ item.contributeName }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex flex-center" :style="{height: contentHeight + 'px'}">
|
|
暂无记录
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getFruitUnclaimedOrder
|
|
} from '@/api/system/user.js'
|
|
import url from '@/common/http/url';
|
|
export default {
|
|
data () {
|
|
return {
|
|
current: 0,
|
|
onPageReset: true,
|
|
showAdress: false,
|
|
model: {
|
|
addressId: null,
|
|
count: 0,
|
|
payPassword: '',
|
|
},
|
|
rules: {
|
|
addressId: {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择收货地址',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
count: {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择领取数量',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
payPassword: {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写输入密码',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
},
|
|
fruitLenght: 0,
|
|
fruitId: null,
|
|
isaddressStatus: false,
|
|
addressList: [],
|
|
show: false,
|
|
dataList: [],
|
|
tabsIndex: 0,
|
|
query: {
|
|
type: 1
|
|
},
|
|
tabsList: ['个人奖励', '推荐奖励'],
|
|
item: {},
|
|
columns: [
|
|
['全部','未领取', '已领取']
|
|
],
|
|
statusIndex: 0,
|
|
showPicker: false,
|
|
page: {
|
|
num: 1,
|
|
size: 10
|
|
},
|
|
isLoad: false,
|
|
contentHeight: 0,
|
|
dpi: uni.getStorageSync('dpi'),
|
|
sysTem: uni.getStorageSync('system')
|
|
}
|
|
},
|
|
mounted () {
|
|
this.onPageReset = false
|
|
console.log('8888888', this.sysTem)
|
|
this.contentHeight = this.sysTem.windowHeight - this.sysTem.statusBarHeight -256/this.dpi
|
|
console.log('ttttt', this.contentHeight)
|
|
this.downCallback()
|
|
},
|
|
methods: {
|
|
handlerConfirm (e) {
|
|
console.log(e)
|
|
this.statusIndex = e.indexs[0]
|
|
this.showPicker = false
|
|
this.dataList = [];
|
|
this.page.num = 1;
|
|
this.isLoad = false;
|
|
this.upCallback(this.page)
|
|
},
|
|
handlerExpress (item) {
|
|
this.$navigateTo(`/pages/order/express/express?com=${item.companyCode}&num=${item.orderNumber}&name=${item.companyName}&phone=${item.deliveryPhone}`)
|
|
},
|
|
addressSelect (e) {
|
|
console.log(e, '123')
|
|
this.showAdress = false
|
|
|
|
},
|
|
async openModel (e) {
|
|
uni.navigateTo({
|
|
url: `/pages/user/Fruit/form?id=${e.id}`
|
|
});
|
|
},
|
|
handlerTabsClick (e) {
|
|
this.tabsIndex = e.index
|
|
this.statusIndex = 0;
|
|
this.isLoad = false;
|
|
},
|
|
downCallback () {
|
|
console.log('222')
|
|
this.isLoad = false;
|
|
this.page = {
|
|
num: 1,
|
|
size: 10
|
|
}
|
|
this.upCallback(this.page)
|
|
},
|
|
tabsChange (e) {
|
|
console.log('e', e)
|
|
this.tabsIndex = e;
|
|
this.statusIndex = 0;
|
|
this.isLoad = false
|
|
this.page = {
|
|
num: 1,
|
|
size: 10
|
|
}
|
|
this.upCallback(this.page)
|
|
},
|
|
loadMore () {
|
|
console.log('222', this.isLoad)
|
|
if (this.isLoad) return;
|
|
this.page.num++;
|
|
this.upCallback();
|
|
},
|
|
upCallback (page) {
|
|
console.log(page, 'page')
|
|
let params = {}
|
|
params.pageNum = this.page.num // 页码, 默认从1开始
|
|
params.pageSize = this.page.size // 页长, 默认每页10条
|
|
params.drawType = this.tabsIndex + 1 // 类型
|
|
params.status = this.statusIndex == 0 ? '': this.statusIndex - 1
|
|
this.$http("GET", url.fruit.getFruitAwardList, params).then(res => {
|
|
let curPageData = res.data.records;
|
|
if (res.data.records.length < 10) this.isLoad = true;
|
|
curPageData.forEach((item) => {
|
|
if (item.permissibleDate) item.permissibleDate = item.permissibleDate.split(' ')[0].replace(/-/g, '/')
|
|
if (item.orderTime) item.orderTime = item.orderTime.split(' ')[0].replace(/-/g, '/')
|
|
})
|
|
console.log(curPageData, 'this.dataList')
|
|
let curPageLen = curPageData.length;
|
|
let totalPage = res.total
|
|
let totalSize = res.total;
|
|
if (this.page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
|
|
|
|
this.dataList = this.dataList.concat(curPageData); //追加新数据
|
|
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|