420 lines
10 KiB
Vue
420 lines
10 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);
|
|
}
|
|
</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>
|
|
<scroll-view :style="{height: contentHeight + 'px'}" @scrolltolower="loadMore">
|
|
<view class="page" v-if="dataList.length">
|
|
<view class="item" :class="item.status != 0 ? 'gary' : ''" v-for="(item, index ) in dataList" :key="index">
|
|
<view class="box">
|
|
<view class="content">
|
|
<view class="flex justify-between bg">
|
|
<view class="content-title">
|
|
海南水果月卡
|
|
<view class="text-xs ">发放时间: {{ item.createTime }}</view>
|
|
</view>
|
|
<view class="content-button" @click="openModel(item)" v-if="item.status == 0">
|
|
立即使用
|
|
</view>
|
|
|
|
<div class="ribbon-success" v-if="item.status != 0">
|
|
<image src="@/static/images/yishiyong.png"></image>
|
|
</div>
|
|
|
|
</view>
|
|
|
|
<view class="page-group flex">
|
|
<i class="fold-page"></i>
|
|
<span class="page">月卡</span>
|
|
|
|
</view>
|
|
<i class="dot-left"></i>
|
|
<i class="dot-right"></i>
|
|
<view class="fruit_status font26" v-if="tabsIndex == 1">
|
|
<text v-if="item.shippingStatus == 0">待发货</text>
|
|
<text v-if="item.shippingStatus == 1">已发货</text>
|
|
<text v-if="item.shippingStatus == 2">已完成</text>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<!-- <view class="footer-label">使用说明</view>÷ -->
|
|
<view class="flex justify-between ">
|
|
<view>使用说明 </view>
|
|
<view>全平台适用</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- <view class="ribb on">已失效</view> -->
|
|
<block v-if="tabsIndex == 1 && item.shippingStatus == 1">
|
|
<view class="flex flex-align-center flex-space-end">
|
|
<view>
|
|
<u-button @click="handlerExpress(item)">查看物流</u-button>
|
|
</view>
|
|
<view style="margin-left: 10rpx;">
|
|
<u-button @click="handlerConfirm(item)">确认收货</u-button>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</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 MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
import url from '@/common/http/url';
|
|
export default {
|
|
mixins: [MescrollMixin], // 使用mixin
|
|
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: {},
|
|
isLoad: false,
|
|
contentHeight: 0,
|
|
dpi: uni.getStorageSync('dpi'),
|
|
sysTem: uni.getStorageSync('system')
|
|
}
|
|
},
|
|
async mounted () {
|
|
this.contentHeight = this.sysTem.windowHeight - this.sysTem.statusBarHeight -170/this.dpi
|
|
this.onPageReset = false
|
|
this.$nextTick(async () => {
|
|
this.onPageReset = true
|
|
await Promise.all([
|
|
this.$http("GET", 'address/list', { pageSize: 1, type: 1 }),
|
|
this.$http("GET", 'fruit/orderDraw/enableCount')
|
|
]).then(res => {
|
|
console.log(res)
|
|
this.addressList = res[0].data.records.map(i => {
|
|
return {
|
|
name: i.addressDetails,
|
|
id: i.id
|
|
}
|
|
})
|
|
// this.addressList.push({
|
|
// name: '测试用户',
|
|
// id: '1'
|
|
// })
|
|
this.fruitLenght = res[1].data.enableCount
|
|
})
|
|
this.upCallback({ num: 1, size: 10 })
|
|
})
|
|
|
|
|
|
},
|
|
methods: {
|
|
handlerConfirm (item) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否确认收货？',
|
|
cancelText: '取消',
|
|
confirmText: '确定',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.$http("GET", url.fruit.confirmReceive + `/${item.id}`).then(({ code }) => {
|
|
if (code == 200) {
|
|
this.$msg('已确认收货');
|
|
this.tabsChange(1)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
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.upCallback({ num: 1, size: 10 })
|
|
},
|
|
downCallback () {
|
|
this.upCallback({ num: 1, size: 10 })
|
|
},
|
|
tabsChange (e) {
|
|
console.log('e', e)
|
|
this.tabsIndex = e;
|
|
this.dataList = []
|
|
this.upCallback({ num: 1, size: 10 })
|
|
},
|
|
upCallback (page) {
|
|
console.log(page, 'page')
|
|
let params = {}
|
|
params.pageNum = page.num // 页码, 默认从1开始
|
|
params.pageSize = page.size // 页长, 默认每页10条
|
|
params.status = this.tabsIndex // 类型
|
|
this.$http("GET", 'fruit/orderDraw/unclaimedOrder', params).then(res => {
|
|
let curPageData = res.data.records;
|
|
console.log(curPageData, 'this.dataList')
|
|
let curPageLen = curPageData.length;
|
|
let totalPage = res.total
|
|
let totalSize = res.total;
|
|
if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
|
|
|
|
this.dataList = this.dataList.concat(curPageData); //追加新数据
|
|
|
|
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|