<template>
|
<view class="myOrder-wrapper wrapperLayer">
|
<titleBar :titleText='"我的订单"' :pageForm='"myOrder"'></titleBar>
|
<view class="page-fixed colCen">
|
<view class="topbarbox"></view>
|
<!-- <view class="notice-bar-container rowCen">
|
<view class="horn iconfont">
|

|
</view>
|
<view class="notice-txt">
|
<view class="txt-box" :style="{'--left':slideWidth+10}">
|
温馨提示：因双11订单量较大，如订单不显示请勿担心，无需退款，订单将会隔天dsffasfdsdf同步！
|
</view>
|
</view>
|
</view> -->
|
|
<view class="platform-bar-container">
|
<scroll-view class="plat-scrollview" scroll-x scroll-with-animation>
|
<block v-for="(items,index) in platformList">
|
<view class="plat-items" :class="platCurrent==items.type?'plat-active':''" @tap="platclk(items.type)">
|
<view class="items-content rowCenCen">
|
<view>{{items.label}}</view>
|
</view>
|
</view>
|
</block>
|
</scroll-view>
|
</view>
|
|
<view class="orderStates-container pd20 rowCen">
|
<view class="state-view rowCenBet">
|
<block v-for="(items,index) in orderStateList">
|
<view class="plat-items" v-if="index!=2 || platCurrent!=4" :class="stateCurrent==index?'plat-active':''" @tap="stateclk(index)">
|
<view class="items-content rowCenCen">
|
<view>{{items.label}}</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
<view class="order-list-container colCen">
|
<view class="order-list pd30 colCen">
|
<block v-for="(items,index) in orderList" :key="index">
|
<view class="order-card colCenBet">
|
<view class="top-bar-container rowCenBet">
|
<view class="leftTop-bar rowCen">
|
<view class="order-num">
|
订单号：{{items.trade_id}}
|
</view>
|
<view class="clipbtn rowCenCen" @tap="clipOrder(items.trade_id)">
|
<view>复制</view>
|
</view>
|
</view>
|
<view class="right-state">
|
{{items.tk_status_text}}
|
</view>
|
</view>
|
|
<view class="goodsCenter-container rowCen">
|
<image class="pic" :src="items.item_img" mode="aspectFill"></image>
|
<view class="info-area">
|
<view class="goods-name">
|
{{items.item_title}}
|
</view>
|
<view class="crt-time">
|
{{items.tb_paid_time}}
|
</view>
|
<view class="crt-time">
|
{{items.tk_earning_time==''?'':items.tk_earning_time}}
|
</view>
|
</view>
|
</view>
|
|
<view class="btm-price-info pd20 rowCenBet">
|
<view class="pay-price txt">
|
付款金额：{{items.alipay_total_price}}
|
</view>
|
<view class="profit txt">
|
预估收益：{{items.pub_share_pre_fee}}
|
</view>
|
</view>
|
</view>
|
</block>
|
<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapMutations
|
} from "vuex";
|
import titleBar from '../../components/backTitlebar.vue'
|
export default {
|
components: {
|
titleBar
|
},
|
data() {
|
return {
|
slideWidth:'',
|
platCurrent:1,
|
platformList:[
|
{
|
label:'淘宝',
|
type:1
|
},
|
{
|
label:'京东',
|
type:2
|
},
|
{
|
label:'拼多多',
|
type:3
|
},
|
{
|
label:'唯品会',
|
type:4
|
},
|
{
|
label:'抖音',
|
type:5
|
},
|
{
|
label:'其他',
|
type:6
|
}
|
],
|
|
stateCurrent:0,
|
orderStateList:[
|
{
|
label:'全部'
|
},
|
{
|
label:'已付款'
|
},
|
{
|
label:'已收货'
|
},
|
{
|
label:'已结算'
|
},
|
{
|
label:'已失效'
|
}
|
],
|
|
orderList:[],
|
loadstate: 'nomore',
|
page: 1,
|
canload: false
|
}
|
},
|
onLoad() {
|
this.getList()
|
},
|
mounted() {
|
// this.getSlideWidth()
|
},
|
onReachBottom() {
|
if(this.canload){
|
this.getList()
|
}
|
},
|
methods: {
|
getList(){
|
var that = this;
|
this.$u.api.orderList({
|
pageSize:10,
|
page:this.page,
|
orderStatus:this.stateCurrent,
|
orderType:this.platCurrent
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
uni.stopPullDownRefresh()
|
var res = e.data.list;
|
if(res.length<10){
|
that.loadstate = 'nomore'
|
that.canload = false
|
}else{
|
that.loadstate = 'loading'
|
that.canload = true
|
that.page++;
|
}
|
that.orderList = that.orderList.concat(res)
|
}).catch(function (err) {
|
})
|
|
},
|
|
|
platclk(type){
|
this.platCurrent = type
|
this.canload = false
|
this.page = 1
|
this.loadstate = 'loading'
|
this.orderList = []
|
this.getList()
|
},
|
stateclk(idx){
|
this.stateCurrent = idx
|
this.canload = false
|
this.page = 1
|
this.loadstate = 'loading'
|
this.orderList = []
|
this.getList()
|
},
|
getSlideWidth(){
|
uni.createSelectorQuery().in(this).select('.txt-box').boundingClientRect(data => {
|
console.log(data);
|
this.slideWidth = data.width
|
}).exec();
|
|
uni.createSelectorQuery().in(this).select('.notice-txt').boundingClientRect(data => {
|
console.log(data);
|
this.slideWidth = this.slideWidth-data.width
|
console.log(this.slideWidth);
|
}).exec();
|
},
|
|
clipOrder(num){
|
uni.setClipboardData({
|
data:num,
|
success: () => {
|
uni.setStorageSync('clipboard', num);
|
}
|
})
|
}
|
},
|
onPullDownRefresh() {
|
this.canload = false
|
this.page = 1
|
this.loadstate = 'loading'
|
this.orderList = []
|
this.getList()
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.myOrder-wrapper {
|
width: 100%;
|
|
.page-fixed {
|
width: 100%;
|
position: fixed;
|
top: 90rpx;
|
z-index: 5;
|
|
.notice-bar-container {
|
width: 100%;
|
height: 50rpx;
|
background: #FEF9F6;
|
|
.horn {
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #FE3738;
|
margin-left: 20rpx;
|
white-space: nowrap;
|
}
|
|
.notice-txt {
|
position: relative;
|
width: 100%;
|
height: 50rpx;
|
padding-left: 30rpx;
|
overflow: hidden;
|
|
.txt-box {
|
position: absolute;
|
height: 50rpx;
|
line-height: 50rpx;
|
white-space: nowrap;
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #FE3738;
|
animation:slideLeft calc(var(--left)/30*1s) linear infinite;
|
}
|
@keyframes slideLeft{
|
0% { left: 0rpx;}
|
100% { left: calc(0rpx - (var(--left))*1rpx)}
|
}
|
}
|
}
|
|
.platform-bar-container{
|
width: 100%;
|
height: 86rpx;
|
background: #FFFFFF;
|
.plat-scrollview{
|
width: 100%;
|
height: 100%;
|
white-space: nowrap;
|
.plat-items{
|
display: inline-block;
|
height: 86rpx;
|
margin-right: 40rpx;
|
.items-content{
|
height: 100%;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
border-bottom: 4rpx solid transparent;
|
}
|
}
|
.plat-items:nth-child(1){
|
margin-left: 40rpx;
|
}
|
.plat-active{
|
.items-content{
|
font-weight: bold;
|
color: #FE3738;
|
border-bottom: 4rpx solid #FE3738;
|
}
|
}
|
}
|
}
|
|
.orderStates-container{
|
width: 100%;
|
height: 96rpx;
|
background-color: #FFFFFF;
|
.state-view{
|
width: 100%;
|
height: 86rpx;
|
border-radius: 8rpx;
|
border-top: 2rpx solid #F4F4F4;
|
padding:0 38rpx;
|
.plat-items{
|
height:86rpx;
|
.items-content{
|
height: 100%;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
.plat-active{
|
.items-content{
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
}
|
|
.order-list-container{
|
width: 100%;
|
margin-top: 200rpx;
|
.order-list{
|
width: 100%;
|
.order-card{
|
width: 100%;
|
height: 306rpx;
|
background: #FFFFFF;
|
border-radius: 8rpx;
|
margin-bottom: 20rpx;
|
.top-bar-container{
|
width: 100%;
|
padding: 0 20rpx;
|
margin-top: 20rpx;
|
.leftTop-bar{
|
.typeIcon-content {
|
width: 60rpx;
|
height: 24rpx;
|
margin-right: 5rpx;
|
margin-top: 2rpx;
|
}
|
.order-num{
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #666666;
|
}
|
.clipbtn{
|
width: 69rpx;
|
height: 34rpx;
|
background: #F3F3F3;
|
border-radius: 17rpx;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #666666;
|
margin-left: 20rpx;
|
}
|
}
|
.right-state{
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #FE3738;
|
}
|
}
|
|
.goodsCenter-container{
|
width: 100%;
|
padding: 0 23rpx;
|
.pic{
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 8rpx;
|
}
|
.info-area{
|
width: 500rpx;
|
margin-left: 20rpx;
|
.goods-name{
|
font-size: 26rpx;
|
font-weight: 500;
|
color: #333333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin-bottom: 15rpx;
|
}
|
.crt-time{
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #666666;
|
line-height: 30rpx;
|
opacity: 0.66;
|
}
|
}
|
}
|
|
.btm-price-info{
|
width: 100%;
|
height: 86rpx;
|
border-top: 1rpx solid #F4F4F4;
|
.txt{
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
