402 lines
10 KiB
Plaintext
402 lines
10 KiB
Plaintext
<template>
|
|
<view class="myOrderList">
|
|
<view style="background:#f8f8f8;height:{{windowHeight}}px;">
|
|
<cuCustom isCustom="{{true}}">
|
|
<view slot="backText">返回</view>
|
|
<view slot="content">我的订单</view>
|
|
</cuCustom>
|
|
|
|
<view style="height: {{currentTab != 0 ? 160 : 100}}rpx"></view>
|
|
|
|
<scroll-view scroll-top="{{vipTopHandle}}" scroll-with-animation="true" scroll-anchoring="{{true}}" refresher-enabled="{{true}}" refresher-triggered="{{triggeredsService}}" bindrefresherpulling="vipPulling" bindrefresherrefresh="onPullDownRefresh" scroll-y="true" style="-webkit-overflow-scrolling: touch;height: 100%;" lower-threshold="50" bindscrolltolower="onReachBottom" bindscroll="serviceToupper">
|
|
<view class="m_vip">
|
|
<view class="tradeInfo ff" v-for="(item,index) in vipList" :key="index">
|
|
<view class="font_26 color-666" style="padding-bottom: 20rpx">订单号：{{item.trade_no}}</view>
|
|
<view class="f-fc" style="height: 168rpx;position: relative">
|
|
<image :src="item.pic" mode="aspectFill" class="posterImage flo_l"></image>
|
|
<view class="f-fdc f-fbc" style="flex: 1;align-items: flex-start;height: 100%;">
|
|
<view>
|
|
<view class="font_28 flo_l color-333 ellipsis_2 bold" style="width: 326rpx;word-break: break-all;line-height: 38rpx">{{ item.goods }}</view>
|
|
<view class="font_24 color-666 ellipsis_1" style="width: 326rpx;padding-top: 4rpx">规格：{{item.rank_name}}</view>
|
|
</view>
|
|
<view class="fong_28 color-theme bold">¥{{item.price}}</view>
|
|
</view>
|
|
<view class="viewOrderBtn f-fcc font_26" @tap="goto('/pages/users/orderDetails?trade_no={{item.trade_no}}')">查看订单</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="hideMessage" class="text-center">
|
|
<view class="font_28 m_empty">
|
|
<image src="https://images.ufutx.com/202107/02/b52c6594433d522ad6eab829cc64e107.png" mode="aspectFit"></image>
|
|
<view class="font_32 color999 text-center f-fcc" style="margin-top: -52rpx;position: relative;z-index: 9;">暂无会员订单，去<text class="" style="color: #FF5380;line-height: 46rpx;" @tap="toRet">购买会员</text></view>
|
|
</view>
|
|
</view>
|
|
<view v-if="noMoreShow" style="padding-bottom: 20rpx;padding-top: 20rpx;" class="text-center">没有更多数据了</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="m_returnTop {{vipTatus?'show':'hide'}}" v-if="currentTab == 0">
|
|
<image class="u_returnTop_img" bindtap="vipToReturnTop" src="https://images.ufutx.com/202106/23/f0d10551dc5d3399cc7f15805cf04f4f.png" mode="scaleToFill" lazy-load="false"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import https from '../../mixins/https'
|
|
import base from '../../mixins/base'
|
|
|
|
import { service } from '../../config.js'
|
|
|
|
wepy.page({
|
|
mixins: [base, https],
|
|
|
|
data: {
|
|
user: {},
|
|
type: 'rank',
|
|
nickName: '加载中...',
|
|
vipList: [],
|
|
hide: true,
|
|
noMore: false,
|
|
vipPage: 1,
|
|
loading: false,
|
|
hideMessage: false,
|
|
noMoreShow: false,
|
|
collectionMessage: false,
|
|
init: false,
|
|
windowHeight: '',
|
|
currentTab: 0,
|
|
_st: '',
|
|
triggeredsService: false,
|
|
vipTatus: false,
|
|
triggered: false,
|
|
floorstatus: false,
|
|
vipTopHandle: -1,
|
|
system: '',
|
|
bgVip: 'background: #333333;\ncolor: white'
|
|
},
|
|
|
|
onShow () {
|
|
|
|
},
|
|
|
|
onLoad () {
|
|
this.$showLoading('加载中')
|
|
this.vipData()
|
|
},
|
|
|
|
onPullDownRefresh () {
|
|
this.collectionMessage = false
|
|
this.noMoreShow = false
|
|
this.vipList = []
|
|
this.vipPage = 1
|
|
this.vipData()
|
|
},
|
|
|
|
onReachBottom () {
|
|
if (this.collectionMessage) return
|
|
this.vipPage += 1
|
|
this.vipData()
|
|
},
|
|
|
|
methods: {
|
|
serviceToupper(e) {
|
|
clearTimeout(this._st)
|
|
this._st = setTimeout(() => {
|
|
console.log(e)
|
|
if (e.$wx.detail.scrollTop > 380) {
|
|
this.vipTatus = true
|
|
} else {
|
|
this.vipTatus = false
|
|
}
|
|
}, 200)
|
|
},
|
|
|
|
scrolltoupper(e) {
|
|
clearTimeout(this._st)
|
|
this._st = setTimeout(() => {
|
|
console.log(e)
|
|
if (e.$wx.detail.scrollTop > 380) {
|
|
this.floorstatus = true
|
|
} else {
|
|
this.floorstatus = false
|
|
}
|
|
}, 200)
|
|
},
|
|
vipPulling() {
|
|
this.triggeredsService = true
|
|
},
|
|
|
|
// 会员列表
|
|
vipData () {
|
|
let _this = this,
|
|
data = {
|
|
page: _this.vipPage,
|
|
type: 'rank'
|
|
}
|
|
_this.loading = true
|
|
this.$get({url: `${service.host}/order/rank/list`, data}).then(({code, data}) => {
|
|
_this.triggeredsService = false
|
|
if (!data.data || (data.data.length == 0 && _this.vipPage == 1)) {
|
|
_this.hideMessage = true
|
|
return
|
|
} else {
|
|
_this.hideMessage = false
|
|
}
|
|
if (data.data.length == 0 && _this.vipPage != 1) {
|
|
_this.noMoreShow = true
|
|
_this.collectionMessage = true
|
|
return
|
|
}
|
|
if (_this.vipList.length != 0 && _this.vipPage == 1) return
|
|
_this.vipList = [..._this.vipList, ...data.data]
|
|
wx.hideLoading()
|
|
}).finally(() => {
|
|
_this.loaded = false
|
|
})
|
|
},
|
|
|
|
onPulling() {
|
|
this.triggered = true
|
|
},
|
|
|
|
copyFn(data) {
|
|
let vm = this
|
|
wx.setClipboardData({
|
|
data: data,
|
|
success(res) {
|
|
vm.$showToast('已复制订单号')
|
|
}
|
|
})
|
|
},
|
|
|
|
goto (url) {
|
|
wx.navigateTo({url: url})
|
|
},
|
|
|
|
vipToReturnTop(e) {
|
|
this.vipTopHandle = Math.random()
|
|
this.vipTatus = false
|
|
},
|
|
toRet () {
|
|
console.log('2222222222222')
|
|
if (this.system == 'iOS') {
|
|
this.$redirectTo(`/pages/users/upgradeVIP2`)
|
|
} else {
|
|
this.$redirectTo(`/pages/users/upgradeVIP`)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="less">
|
|
|
|
page{
|
|
background: #f8f8f8;
|
|
}
|
|
.mainTab{
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 999;
|
|
.itemText {
|
|
width: 33%;
|
|
margin: 26rpx 0;
|
|
position: relative;
|
|
.ui-order-dot{
|
|
height: 32rpx;
|
|
line-height: 34rpx;
|
|
padding: 0 12rpx;
|
|
color: #ffffff;
|
|
background: #F86868;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
font-size: 18rpx;
|
|
position: absolute;
|
|
right: 36rpx;
|
|
top: -14rpx;
|
|
z-index: 99;
|
|
}
|
|
}
|
|
.active{
|
|
font-size: 28rpx;
|
|
&:before{
|
|
content: " ";
|
|
position: absolute;
|
|
bottom: -12rpx;
|
|
transform: translateX(-50%);
|
|
left: 50%;
|
|
height: 8rpx;
|
|
width: 48rpx;
|
|
border-radius: 8rpx;
|
|
background: #FF81A2;
|
|
}
|
|
}
|
|
}
|
|
.m_empty {
|
|
padding-top: 180rpx;
|
|
image {
|
|
width: 440rpx;
|
|
height: 360rpx;
|
|
}
|
|
}
|
|
.myOrderList {
|
|
.m_vip {
|
|
padding: 20rpx 30rpx 30rpx;
|
|
.tradeInfo {
|
|
width: 100%;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 1rpx 1rpx 18rpx #ededed;
|
|
overflow: auto;
|
|
.spellGroupIcon{
|
|
width: 64rpx;
|
|
height: 32rpx;
|
|
margin-bottom: -4rpx;
|
|
}
|
|
.posterImage {
|
|
width: 296rpx;
|
|
height: 168rpx;
|
|
border-radius: 16rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.viewOrderBtn{
|
|
position: absolute;
|
|
right: -4rpx;
|
|
bottom: -6rpx;
|
|
width: 144rpx;
|
|
height: 52rpx;
|
|
border-radius: 26rpx;
|
|
color: #619eff;
|
|
border: 2rpx solid #BCD6FF;
|
|
}
|
|
.viewPayBtn{
|
|
position: absolute;
|
|
right: -4rpx;
|
|
bottom: -6rpx;
|
|
width: 144rpx;
|
|
height: 52rpx;
|
|
color: #ffffff;
|
|
border-radius: 26rpx;
|
|
background: linear-gradient(270deg, #FF85A5 0%, #FF5380 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.m_returnTop {
|
|
position: fixed;
|
|
right: 36rpx;
|
|
bottom: 140rpx;
|
|
-webkit-transition: opacity 1s;
|
|
transition: opacity 1s;
|
|
z-index: 9999;
|
|
.u_returnTop_img {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 12rpx 6rpx rgba(0, 0, 0, .06);
|
|
}
|
|
}
|
|
.m_returnTop.show {
|
|
opacity: 1;
|
|
}
|
|
.m_returnTop.hide {
|
|
opacity: 0;
|
|
}
|
|
.ui-tabs{
|
|
position: relative;
|
|
margin: 10rpx 60rpx 30rpx;
|
|
width: 630rpx;
|
|
height: 60rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
}
|
|
.ui-tabs-one{
|
|
width: 316rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
}
|
|
.ui-pay-select{
|
|
//position: absolute;
|
|
//top:0;
|
|
//left: 0;
|
|
width: 316rpx;
|
|
height: 60rpx;
|
|
color:#ffffff;
|
|
background: #FF5380;
|
|
border-radius: 32rpx;
|
|
}
|
|
.ui-pay-select-l{
|
|
margin-right: 118rpx;
|
|
}
|
|
.ui-pay-select-r{
|
|
margin-left: 118rpx;
|
|
}
|
|
.ui-np-btn{
|
|
margin-top: 24rpx;
|
|
}
|
|
.ui-np-btn-m{
|
|
width: 144rpx;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
border-radius: 26rpx;
|
|
text-align: center;
|
|
}
|
|
.ui-np-left{
|
|
|
|
color: #666666;
|
|
border: 2rpx solid #D8D8D8;
|
|
}
|
|
.ui-np-right{
|
|
margin-left: 24rpx;
|
|
color: #F33B6C;
|
|
border: 2rpx solid #FFA9C0;
|
|
}
|
|
.ui-quit-box{
|
|
position: relative;
|
|
width: 600rpx;
|
|
height: 334rpx;
|
|
background: #ffffff;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 100%;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
.ui-quit-title{
|
|
margin-top: 92rpx;
|
|
text-align: center;
|
|
}
|
|
.ui-quit-btn-list{
|
|
margin: 80rpx 76rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.ui-quit-btn{
|
|
width: 192rpx;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
border-radius: 34rpx;
|
|
}
|
|
.ui-quit-btn-close{
|
|
border: 1px solid #D8D8D8;
|
|
}
|
|
.ui-quit-btn-submit{
|
|
background: linear-gradient(to right,#FF5380 0%,#FF85A5 100%);
|
|
}
|
|
}
|
|
</style>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: '我的订单',
|
|
navigationStyle: 'custom',
|
|
enablePullDownRefresh: false,
|
|
backgroundColorTop: '#f2f2f2',
|
|
backgroundColorBottom: '#f2f2f2',
|
|
usingComponents: {
|
|
cuCustom: '~@/components/cu-custom'
|
|
}
|
|
}
|
|
</config>
|