|
|
@@ -1,57 +1,73 @@
|
|
|
<template>
|
|
|
<view class="all">
|
|
|
- <view class="top">
|
|
|
- <text>{{$t('homepledge.m0')}}</text>
|
|
|
+ <view class="navbar">
|
|
|
+ <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
|
|
|
</view>
|
|
|
- <image class="img" src="../../static/img/zhiya2.png" mode="scaleToFill" style=""></image>
|
|
|
- <view @click="nav('/pages/myPledge/myPledge')" class="my flex">
|
|
|
- <view class="flex">
|
|
|
- <image class="titleTip margin-r-10" src="../../static/img/zhiya3.png" mode=""></image>
|
|
|
- <view>
|
|
|
- {{$t('homepledge.m1')}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <image class="right" src="../../static/img/zhiya1.png" style="" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="buttom flex" v-for="(item,ind) in list" @click="nav('/pages/myPledge/zyXingqing?id='+item.id)">
|
|
|
- <view class="le" >
|
|
|
- <view class="le1 title ">
|
|
|
- {{item.name}}
|
|
|
- </view>
|
|
|
- <view class="le1 qt">
|
|
|
- {{item.single_time_min*1}}U{{$t('homepledge.m2')}} | {{item.day}}{{$t('homepledge.m3')}}
|
|
|
- </view>
|
|
|
- <view class="le1 ze">
|
|
|
- {{$t('homepledge.total')}}：{{item.stock*1}}U
|
|
|
- </view>
|
|
|
- <!-- <view class="le2 flex font-color-gray">
|
|
|
- <view class="line margin-r-10">
|
|
|
- <view class="line-action" :style="{'margin-left': -(100-item.bfb)+'%'}">
|
|
|
-
|
|
|
+ <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
|
|
|
+ <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
|
|
|
+ <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
|
|
|
+
|
|
|
+ <!-- 订单列表 -->
|
|
|
+ <view @click="goToOrderDetail(item)" v-for="(item, index) in tabItem.orderList" :key="index" class="order-item">
|
|
|
+ <view class="i-top b-b">
|
|
|
+ <text class="time">{{ item._add_time }}</text>
|
|
|
+ <text class="state" :style="{ color: item.stateTipColor }">{{ item._status._title }}</text>
|
|
|
+ <text v-if="item.status === 4" class="del-btn iconfont icondelete" @click="deleteOrder(index)"></text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <scroll-view v-if="item.cartInfo.length > 1" class="goods-box" scroll-x>
|
|
|
+ <view v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex" class="goods-item">
|
|
|
+ <image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- <view v-if="item.cartInfo.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
|
|
|
+ <image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
|
|
|
+ <view class="right">
|
|
|
+ <text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
|
|
|
+ <text class="attr-box">{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num }}</text>
|
|
|
+ <text class="price">{{ moneyNum(goodsItem.productInfo.price)}}</text>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
|
|
|
+ <image class="goods-img" :src="goodsItem.productInfo.image" mode="scaleToFill"></image>
|
|
|
+ <view class="right">
|
|
|
+ <view class="flex-start">
|
|
|
+ <text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
|
|
|
+ <text class="price">{{ goodsItem.productInfo.price|moneyNum }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="row flex">
|
|
|
+ <text class="row_title">{{ goodsItem.productInfo.attrInfo ? goodsItem.productInfo.attrInfo.suk : '' }}</text>
|
|
|
+ <text class="attr-box"> x {{ goodsItem.cart_num }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="price-box">
|
|
|
+ 共
|
|
|
+ <text class="num">{{ item.cartInfo.length }}</text>
|
|
|
+ 件商品 邮费
|
|
|
+ <text class="price">{{ moneyNum(item.pay_postage)}}</text>
|
|
|
+ 实付款
|
|
|
+ <text class="price">{{ moneyNum(item.pay_price)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="action-box b-t" v-if="item.status != 5">
|
|
|
+ <button v-if="item._status._title == '未支付'" class="action-btn" @click.stop="cancelOrder(item)">取消订单</button>
|
|
|
+ <button v-if="item._status._title == '未支付'" @click.stop="orderPay(item)" class="action-btn recom">立即支付</button>
|
|
|
+ <button v-if="item._status._title == '待评价'" class="action-btn">评价</button>
|
|
|
+ <button v-if="item._status._title == '待收货'" @click.stop="orderTake(item, index)" class="action-btn">确认收货</button>
|
|
|
+ <button v-if="item._status._title == '未发货'" class="action-btn" @click.stop="orderRefund(item)">申请退款</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view>{{item.bfb}}%</view>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- <view class="ri">
|
|
|
- <view class="r1 margin-b-20"> {{item.day_get}}% </view>
|
|
|
- <view class="r2 margin-b-30 font-color-gray"> {{$t('homepledge.a4')}} </view>
|
|
|
- <view class="add-buttom">
|
|
|
- {{$t('homepledge.a5')}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <uni-load-more :status="tabItem.loadingType"></uni-load-more>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- lock
|
|
|
- } from "@/api/mypledge.js"
|
|
|
- import {
|
|
|
- saveUrl,
|
|
|
- interceptor
|
|
|
- } from '@/utils/loginUtils.js';
|
|
|
import {
|
|
|
mapState
|
|
|
} from 'vuex';
|
|
|
@@ -61,12 +77,54 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- loadingType: 'more',
|
|
|
- loaded: false,
|
|
|
- list: []
|
|
|
- }
|
|
|
+ tabCurrentIndex: 0,
|
|
|
+ navList: [
|
|
|
+ {
|
|
|
+ state: 0,
|
|
|
+ text: '待付款',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10 //每次信息条数
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 1,
|
|
|
+ text: '待发货',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10 //每次信息条数
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 2,
|
|
|
+ text: '待收货',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10 //每次信息条数
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 3,
|
|
|
+ text: '待评价',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10 //每次信息条数
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 4,
|
|
|
+ text: '已完成',
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10 //每次信息条数
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onNavigationBarButtonTap(res){
|
|
|
+ console.log(res,['res']);
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.loadData()
|
|
|
@@ -75,11 +133,6 @@
|
|
|
this.loadData()
|
|
|
},
|
|
|
methods: {
|
|
|
- navigator() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/myPledge/myPledge'
|
|
|
- })
|
|
|
- },
|
|
|
nav(url) {
|
|
|
if (!this.hasLogin) {
|
|
|
// 保存地址
|
|
|
@@ -93,30 +146,54 @@
|
|
|
}
|
|
|
},
|
|
|
loadData(source) {
|
|
|
- let that = this
|
|
|
- if (that.loadingType == 'loading' || that.loadingType == 'noMore') {
|
|
|
- return
|
|
|
+ //这里是将订单挂载到tab列表下
|
|
|
+ let index = this.tabCurrentIndex;
|
|
|
+ let navItem = this.navList[index];
|
|
|
+ let state = navItem.state;
|
|
|
+ if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
+ //tab切换只有第一次需要加载数据
|
|
|
+ return;
|
|
|
}
|
|
|
- lock({
|
|
|
- page: that.page,
|
|
|
- limit: that.limit,
|
|
|
- id: that.id,
|
|
|
- }).then(res => {
|
|
|
- let list = res.data.list.map(
|
|
|
- (res) => {
|
|
|
- res.bfb = +(res.join * 100 / res.stock).toFixed(2);
|
|
|
- return res
|
|
|
- }
|
|
|
- )
|
|
|
- that.list = that.list.concat(list)
|
|
|
- that.page++
|
|
|
- if (list.length == that.limit) {
|
|
|
- that.loadingType = 'more'
|
|
|
- } else {
|
|
|
- that.loadingType = 'noMore'
|
|
|
- }
|
|
|
- that.loaded = true
|
|
|
+ if (navItem.loadingType === 'loading') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (navItem.loadingType === 'noMore') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 修改当前对象状态为加载中
|
|
|
+ navItem.loadingType = 'loading';
|
|
|
+
|
|
|
+ orderList({
|
|
|
+ type: state,
|
|
|
+ page: navItem.page,
|
|
|
+ limit: navItem.limit
|
|
|
})
|
|
|
+ .then(({ data }) => {
|
|
|
+ let arr = data.map(e => {
|
|
|
+ let b = this.orderStateExp(e.status);
|
|
|
+ e.stateTip = b.stateTip;
|
|
|
+ e.stateTipColor = b.stateTipColor;
|
|
|
+ return e;
|
|
|
+ });
|
|
|
+ navItem.orderList = navItem.orderList.concat(arr);
|
|
|
+ // console.log(navItem.orderList);
|
|
|
+ navItem.page++;
|
|
|
+ if (navItem.limit == data.length) {
|
|
|
+ //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
+ navItem.loadingType = 'more';
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
+ navItem.loadingType = 'noMore';
|
|
|
+ }
|
|
|
+ uni.hideLoading();
|
|
|
+ this.$set(navItem, 'loaded', true);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
},
|
|
|
}
|
|
|
};
|
|
|
@@ -126,110 +203,7 @@
|
|
|
.all {
|
|
|
width: 750rpx;
|
|
|
height: 100%;
|
|
|
- background-color: #000000;
|
|
|
+ background-color: #051137;
|
|
|
padding-top: var(--status-bar-height);
|
|
|
}
|
|
|
-
|
|
|
- .top {
|
|
|
- padding-top: 40rpx;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 690rpx;
|
|
|
- height: 250rpx;
|
|
|
- margin: 20rpx 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .my {
|
|
|
- background-color: #191a1f;
|
|
|
- margin: 0 30rpx;
|
|
|
- display: flex;
|
|
|
- color: #FFF;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- border-radius: 18rpx;
|
|
|
-
|
|
|
- .titleTip {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- width: 16rpx;
|
|
|
- height: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buttom {
|
|
|
- background-color: #191a1f;
|
|
|
- border-radius: 18rpx;
|
|
|
- margin: 30rpx;
|
|
|
- padding: 30rpx;
|
|
|
- line-height: 1;
|
|
|
-
|
|
|
- .le {
|
|
|
- font-size: 20rpx;
|
|
|
-
|
|
|
- .le1 {
|
|
|
- font-weight: 800;
|
|
|
- color: #feb041;
|
|
|
- margin-bottom: 15rpx;
|
|
|
-
|
|
|
- &.qt {
|
|
|
- padding-top: 15rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &.ze {
|
|
|
- padding-top: 26rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &.title {
|
|
|
- font-size: 33rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // .le2 {
|
|
|
- // .line {
|
|
|
- // width: 308rpx;
|
|
|
- // height: 16rpx;
|
|
|
- // background-color: rgba(235, 235, 235, 0.38);
|
|
|
- // border-radius: 99rpx;
|
|
|
- // overflow: hidden;
|
|
|
-
|
|
|
- // .line-action {
|
|
|
- // height: 100%;
|
|
|
- // width: 100%;
|
|
|
- // border-radius: 99rpx;
|
|
|
- // background-color: #FEB041;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- .r1 {
|
|
|
- font-size: 47rpx;
|
|
|
- font-weight: 800;
|
|
|
- color: #FF0102;
|
|
|
- }
|
|
|
-
|
|
|
- .r2 {
|
|
|
- font-size: 21rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- .add-buttom {
|
|
|
- background: #feb041;
|
|
|
- border-radius: 6rpx;
|
|
|
- font-size: 21rpx;
|
|
|
- font-weight: 800;
|
|
|
- color: #191a1f;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|
