|
|
@@ -1,69 +1,37 @@
|
|
|
<template>
|
|
|
<view class="all">
|
|
|
- <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 class="fixedBox">
|
|
|
+ <view class="navList flex">
|
|
|
+ <view v-for="(item, index) in navItem" :key="index" class="navItem"
|
|
|
+ :class="{ activeItem: tabIndex === index,tip:index == 0 }" @click="tabClick(index,0,1)">{{ item }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="navList flex navList2">
|
|
|
+ <view v-for="(item, index) in navList" :key="index" class="navItem"
|
|
|
+ :class="{ activeItem: tabCurr === index}" @click="tabClick(index,item.status,2)">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <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 class="listItemBox">
|
|
|
+ <view class="listItem" v-for="item,index in list" :key="index">
|
|
|
+ <view class="itemInfo flex">
|
|
|
+ <view class="flex_item">
|
|
|
+ <image src="/static/image/img20.png" style="width: 55rpx;" mode="widthFix"></image>
|
|
|
+ <view class="name">李丹丹</view>
|
|
|
</view>
|
|
|
- <uni-load-more :status="tabItem.loadingType" color='#FFF'></uni-load-more>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
+ <view class="" style="font-size: 24rpx;font-weight: bold;color: #0C5AFA;">进行中</view>
|
|
|
+ </view>
|
|
|
+ <view class="itemTip flex">
|
|
|
+ <view class="tipBox">
|
|
|
+ <view class="tipText">数量：10USTD</view>
|
|
|
+ <view class="tipText">总价：￥500</view>
|
|
|
+ <view class="tipText">2023-04-25 14:20:30</view>
|
|
|
+ </view>
|
|
|
+ <view class="" style="text-align: right;">
|
|
|
+ <image src="/static/image/img21.png" style="width: 40rpx;margin-bottom: 25rpx;" mode="widthFix"></image>
|
|
|
+ <view class="tipBtn">查看凭证</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -80,125 +48,101 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- 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 //每次信息条数
|
|
|
- }
|
|
|
- ]
|
|
|
+ tabIndex: 0,
|
|
|
+ navItem: ['卖币订单','买币订单'],
|
|
|
+ tabCurr:0,
|
|
|
+ status:0,//状态
|
|
|
+ navList: [{
|
|
|
+ name:'全部',
|
|
|
+ status:0
|
|
|
+ },{
|
|
|
+ name:'挂单中',
|
|
|
+ status:1
|
|
|
+ },{
|
|
|
+ name:'已售罄',
|
|
|
+ status:2
|
|
|
+ },{
|
|
|
+ name:'已下架',
|
|
|
+ status:3
|
|
|
+ }],
|
|
|
+ page:1,
|
|
|
+ loadingType: "more",
|
|
|
+ list:[{},{},{},{},{},{},{},{},{},{}]
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- onNavigationBarButtonTap(res){
|
|
|
- console.log(res,['res']);
|
|
|
- },
|
|
|
onLoad() {
|
|
|
- this.loadData()
|
|
|
+ // this.loadData()
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
this.loadData()
|
|
|
},
|
|
|
methods: {
|
|
|
- nav(url) {
|
|
|
- if (!this.hasLogin) {
|
|
|
- // 保存地址
|
|
|
- saveUrl();
|
|
|
- // 登录拦截
|
|
|
- interceptor();
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- loadData(source) {
|
|
|
- //这里是将订单挂载到tab列表下
|
|
|
- let index = this.tabCurrentIndex;
|
|
|
- let navItem = this.navList[index];
|
|
|
- let state = navItem.state;
|
|
|
- if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
- //tab切换只有第一次需要加载数据
|
|
|
- return;
|
|
|
- }
|
|
|
- if (navItem.loadingType === 'loading') {
|
|
|
- //防止重复加载
|
|
|
- return;
|
|
|
- }
|
|
|
- if (navItem.loadingType === 'noMore') {
|
|
|
- //防止重复加载
|
|
|
+ loadData(){
|
|
|
+ let obj = this;
|
|
|
+ if (obj.loadingType == "nomore" ||
|
|
|
+ obj.loadingType == "loading"){
|
|
|
return;
|
|
|
}
|
|
|
- // 修改当前对象状态为加载中
|
|
|
- navItem.loadingType = 'loading';
|
|
|
- if(index==0){
|
|
|
- getsell({
|
|
|
- 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);
|
|
|
- });
|
|
|
+ obj.loadingType = "loading";
|
|
|
+ getList({
|
|
|
+ page:obj.page,
|
|
|
+ limit:10
|
|
|
+ },obj.status).then(res => {
|
|
|
+ if (res.length > 0) {
|
|
|
+ obj.list = obj.list.concat(res);
|
|
|
+ obj.page++;
|
|
|
+ if (obj.limit == res.length) {
|
|
|
+ obj.loadingType = "more";
|
|
|
+ } else {
|
|
|
+ obj.loadingType = "nomore";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tabClick(index,status,type) {
|
|
|
+ this.page = 1;
|
|
|
+ this.loadingType = "more";
|
|
|
+ this.list = []
|
|
|
+ if(type == 1){
|
|
|
+ this.tabIndex = index;
|
|
|
+ this.tabCurr = 0
|
|
|
+ if(this.tabIndex == 0){
|
|
|
+ this.navList = [{
|
|
|
+ name:'全部',
|
|
|
+ status:0
|
|
|
+ },{
|
|
|
+ name:'挂单中',
|
|
|
+ status:1
|
|
|
+ },{
|
|
|
+ name:'已售罄',
|
|
|
+ status:2
|
|
|
+ },{
|
|
|
+ name:'已下架',
|
|
|
+ status:3
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ if(this.tabIndex == 1){
|
|
|
+ this.navList = [{
|
|
|
+ name:'全部',
|
|
|
+ status:0
|
|
|
+ },{
|
|
|
+ name:'进行中',
|
|
|
+ status:1
|
|
|
+ },{
|
|
|
+ name:'已完成',
|
|
|
+ status:2
|
|
|
+ },{
|
|
|
+ name:'已取消',
|
|
|
+ status:3
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.loadData()
|
|
|
+ }else{
|
|
|
+ this.tabCurr = index
|
|
|
+ this.status = status
|
|
|
+
|
|
|
+ this.loadData()
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
}
|
|
|
};
|
|
|
@@ -211,4 +155,83 @@
|
|
|
background-color: #051137;
|
|
|
padding-top: var(--status-bar-height);
|
|
|
}
|
|
|
+ .fixedBox{
|
|
|
+ position: fixed;
|
|
|
+ top: 44px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+ .navList{
|
|
|
+ padding: 30rpx 50rpx 20rpx 50rpx;
|
|
|
+ background: #1F2A4A;
|
|
|
+ .navItem{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 50%;
|
|
|
+ &.activeItem{
|
|
|
+ color: #0C5AFA;
|
|
|
+ position: relative;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left:36%;
|
|
|
+ bottom: -20rpx;
|
|
|
+ width: 30%;
|
|
|
+ height: 8rpx;
|
|
|
+ // transform: translateX(-50%);
|
|
|
+ border-bottom: 4rpx solid #0C5AFA;
|
|
|
+ border-radius: 0rpx 20rpx 0rpx 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.tip{
|
|
|
+ border-right: 1rpx solid #333D5B;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navList2{
|
|
|
+ background: #051137;
|
|
|
+ padding: 30rpx 25rpx 20rpx 25rpx;
|
|
|
+ }
|
|
|
+ .listItemBox{
|
|
|
+ padding-top: 88px;
|
|
|
+ .listItem{
|
|
|
+ padding: 34rpx 34rpx;
|
|
|
+ background: #1F2A4A;
|
|
|
+ margin-bottom: 25rpx;
|
|
|
+ .name{
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding-left: 25rpx;
|
|
|
+ }
|
|
|
+ .itemTpl{
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #0C5AFA;
|
|
|
+ padding-top: 25rpx;
|
|
|
+ }
|
|
|
+ .itemTip{
|
|
|
+ .tipText{
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: 15rpx;
|
|
|
+ }
|
|
|
+ .tipBtn{
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: linear-gradient(90deg, #0C5AFA, #1356FF);
|
|
|
+ border-radius: 7rpx;
|
|
|
+ padding: 15rpx 35rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
