|
|
@@ -24,58 +24,70 @@
|
|
|
v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
|
|
|
<!-- #endif -->
|
|
|
<!-- 订单列表 -->
|
|
|
- <view @click="navTo('/pages/order/orderDetail?id=' + item.order_id)"
|
|
|
- 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 @click="navTo( '/pages/order/orderDetail?id=' + item.order_id )"
|
|
|
+ v-for="(item, index) in tabItem.orderList" :key="index" class="order-item position-relative">
|
|
|
+ <view class="i-top b-b flex">
|
|
|
+ <view class="order-code flex">
|
|
|
+ <view class="no">
|
|
|
+ 订单编号:
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ {{ item.order_id }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="font-size-sm" :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>
|
|
|
+ <scroll-view v-if="item.cartInfo.length > 0" 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>
|
|
|
+ <image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ <view class="good-name clamp">
|
|
|
+ {{goodsItem.productInfo.attrInfo.suk}}*{{goodsItem.cart_num}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</scroll-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 flextop">
|
|
|
- <text class="title clamp2">{{ goodsItem.productInfo.store_name }}</text>
|
|
|
- <text class="price">{{ moneyNum(goodsItem.productInfo.price) }}</text>
|
|
|
+ <view class="info-info">
|
|
|
+ <view class="js">
|
|
|
+ 共{{item.cartInfo.length}}件
|
|
|
+ </view>
|
|
|
+ <view class="hj">
|
|
|
+ 合计:￥{{item.pay_price}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部操作栏 -->
|
|
|
+ <view class="btm-btn-wrap flex">
|
|
|
+ <view class="btm-left">
|
|
|
+ 下单时间：{{item._add_time.split(' ')[0].replace(/-/g,'/')}}
|
|
|
+ </view>
|
|
|
+ <view class="btm-right flex">
|
|
|
+ <view class="btm-btn" @click.stop="cancelOrder(item)"
|
|
|
+ v-if="item._status._title == '未支付'">
|
|
|
+ 取消订单
|
|
|
+ </view>
|
|
|
+ <view class="btm-btn ksps"
|
|
|
+ @click.stop="navTo( '/pages/user/money/pay?type=1&ordid=' + item.order_id + '&money=' + item.pay_price)"
|
|
|
+ v-if="item._status._title == '未支付'">
|
|
|
+ 前往支付
|
|
|
</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 class="btm-btn ksps" @click.stop="orderTake(item, index)"
|
|
|
+ v-if="item._status._title == '待收货'">
|
|
|
+ 确认收货
|
|
|
+ </view>
|
|
|
+ <view class="btm-btn ksps"
|
|
|
+ @click.stop="navTo('/pages/order/orderRefund?id=' + item.order_id)"
|
|
|
+ v-if="item._status._title == '未发货'||item._status._title == '未核销'">
|
|
|
+ 申请退款
|
|
|
+ </view>
|
|
|
+ <view class="btm-btn ksps"
|
|
|
+ @click.stop="navTo('/pages/order/WriteOff?id=' + item.order_id)"
|
|
|
+ v-if="item._status._title == '待核销'">
|
|
|
+ 核销码
|
|
|
</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="tabItem.state != 4">
|
|
|
- <button v-if="item._status._title == '未支付'" class="action-btn"
|
|
|
- @click.stop="cancelOrder(item)">取消订单</button>
|
|
|
- <button v-if="item._status._title == '未支付'"
|
|
|
- @click.stop="navTo( '/pages/user/money/pay?type=1&ordid=' + item.order_id + '&money=' + item.pay_price)"
|
|
|
- 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 == '未发货'||item._status._title == '未领车'"
|
|
|
- class="action-btn btn-red"
|
|
|
- @click.stop="navTo('/pages/order/orderRefund?id=' + item.order_id)">申请退款</button>
|
|
|
- </view>
|
|
|
</view>
|
|
|
-
|
|
|
<uni-load-more v-if="tabItem.orderList.length>0" :status="tabItem.loadingType"></uni-load-more>
|
|
|
</scroll-view>
|
|
|
</swiper-item>
|
|
|
@@ -171,9 +183,11 @@
|
|
|
let index = this.tabCurrentIndex;
|
|
|
let navItem = this.navList[index];
|
|
|
let state = navItem.state;
|
|
|
- if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
+ if (source === 'tabChange') {
|
|
|
+ navItem.page = 1;
|
|
|
+ navItem.orderList = [];
|
|
|
+ navItem.loadingType = 'more';
|
|
|
//tab切换只有第一次需要加载数据
|
|
|
- return;
|
|
|
}
|
|
|
if (navItem.loadingType === 'loading') {
|
|
|
//防止重复加载
|
|
|
@@ -276,13 +290,15 @@
|
|
|
//订单状态文字和颜色
|
|
|
orderStateExp(state) {
|
|
|
let stateTip = '',
|
|
|
- stateTipColor = '#fa436a';
|
|
|
+ stateTipColor = '#3C82E6';
|
|
|
switch (+state) {
|
|
|
case 0:
|
|
|
stateTip = '待付款';
|
|
|
+ stateTipColor = '#3C82E6'
|
|
|
break;
|
|
|
case 1:
|
|
|
stateTip = '待发货';
|
|
|
+ stateTipColor = '#3C82E6'
|
|
|
break;
|
|
|
case 2:
|
|
|
stateTip = '待收货';
|
|
|
@@ -292,7 +308,7 @@
|
|
|
break;
|
|
|
case 4:
|
|
|
stateTip = '已完成';
|
|
|
- stateTipColor = '#5dbc7c';
|
|
|
+ stateTipColor = '#999999';
|
|
|
break;
|
|
|
case 9:
|
|
|
stateTip = '订单已关闭';
|
|
|
@@ -313,7 +329,7 @@
|
|
|
<style lang="scss">
|
|
|
.content {
|
|
|
height: 100%;
|
|
|
- background: linear-gradient(180deg, rgba(#3C82E6,0.3), rgba(#5395F5,0));
|
|
|
+ background: linear-gradient(180deg, rgba(#3C82E6, 0.3), rgba(#5395F5, 0));
|
|
|
background-size: 100% 645rpx;
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
@@ -343,12 +359,13 @@
|
|
|
display: flex;
|
|
|
height: 40px;
|
|
|
padding: 6px;
|
|
|
- background:$bg-gradual;
|
|
|
+ background: $bg-gradual;
|
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
margin: 0 30rpx;
|
|
|
border-radius: 99rpx;
|
|
|
+
|
|
|
.nav-item {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
@@ -373,36 +390,33 @@
|
|
|
}
|
|
|
|
|
|
.order-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
padding-left: 30rpx;
|
|
|
- background: #fff;
|
|
|
- margin: 0 $page-row-spacing;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
margin-bottom: 30rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding-bottom: 10rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background: #fff;
|
|
|
+ color: #A8ADBF;
|
|
|
|
|
|
.i-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
height: 80rpx;
|
|
|
- padding-right: 30rpx;
|
|
|
- font-size: $font-base;
|
|
|
- color: $font-color-dark;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .time {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .state {
|
|
|
- color: $base-color;
|
|
|
+ .order-code{
|
|
|
+ font-size: $font-sm;
|
|
|
+ .no{
|
|
|
+ padding: 10rpx 10rpx;
|
|
|
+ background-color: #FFEAE5;
|
|
|
+ color: #FD5B23;
|
|
|
+ line-height: 1;
|
|
|
+ border-top-right-radius: 10rpx;
|
|
|
+ border-bottom-left-radius: 10rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.del-btn {
|
|
|
padding: 10rpx 0 10rpx 36rpx;
|
|
|
font-size: $font-lg;
|
|
|
- color: $font-color-light;
|
|
|
position: relative;
|
|
|
|
|
|
&:after {
|
|
|
@@ -418,159 +432,83 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .info-info {
|
|
|
+ width: 215rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 80rpx;
|
|
|
+ right: 35rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ .hj {
|
|
|
+ padding-top: 40rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
/* 多条商品 */
|
|
|
.goods-box {
|
|
|
- height: 160rpx;
|
|
|
+ height: 200rpx;
|
|
|
padding: 20rpx 0;
|
|
|
white-space: nowrap;
|
|
|
+ padding-right: 250rpx;
|
|
|
|
|
|
.goods-item {
|
|
|
width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
+ height: 180rpx;
|
|
|
display: inline-block;
|
|
|
margin-right: 24rpx;
|
|
|
}
|
|
|
|
|
|
.goods-img {
|
|
|
display: block;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 单条商品 */
|
|
|
- .goods-box-single {
|
|
|
- display: flex;
|
|
|
- padding: 20rpx 0;
|
|
|
-
|
|
|
- .goods-img {
|
|
|
- display: block;
|
|
|
- width: 170rpx;
|
|
|
- height: 170rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 0 30rpx 0 24rpx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .flextop {
|
|
|
- align-items: flex-start;
|
|
|
- line-height: 1.3;
|
|
|
- }
|
|
|
-
|
|
|
- .row {
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .row_title {
|
|
|
- padding: 5rpx 10rpx;
|
|
|
- background-color: #dddddd;
|
|
|
- border-radius: 10rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- width: 80%;
|
|
|
- min-height: 2rem;
|
|
|
- }
|
|
|
-
|
|
|
- .attr-box {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- display: inline;
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-light;
|
|
|
-
|
|
|
- &:before {
|
|
|
- content: '￥';
|
|
|
- font-size: $font-sm;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .price-box {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: baseline;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-light;
|
|
|
-
|
|
|
- .num {
|
|
|
- margin: 0 8rpx;
|
|
|
- color: $font-color-dark;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
}
|
|
|
|
|
|
- .price {
|
|
|
- font-size: $font-lg;
|
|
|
+ .good-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 120rpx;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ margin-right: 0;
|
|
|
color: $font-color-dark;
|
|
|
-
|
|
|
- &:before {
|
|
|
- content: '￥';
|
|
|
- font-size: $font-sm;
|
|
|
- margin: 0 2rpx 0 8rpx;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .action-box {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- padding-right: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- width: 160rpx;
|
|
|
- height: 60rpx;
|
|
|
- margin: 0;
|
|
|
- margin-left: 24rpx;
|
|
|
- padding: 0;
|
|
|
- text-align: center;
|
|
|
- line-height: 60rpx;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- background: #fff;
|
|
|
- border-radius: 100px;
|
|
|
-
|
|
|
- &.btn-red {
|
|
|
- color: $color-red;
|
|
|
- border: 1px solid $color-red;
|
|
|
- }
|
|
|
+ .btm-btn-wrap {
|
|
|
+ height: 90rpx;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #A3A8BB;
|
|
|
+ line-height: 1;
|
|
|
|
|
|
- &:after {
|
|
|
- border-radius: 100px;
|
|
|
+ .btm-right {
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
- &.recom {
|
|
|
- color: $base-color;
|
|
|
-
|
|
|
- &:after {
|
|
|
- border-color: $base-color;
|
|
|
- }
|
|
|
+ .btm-btn {
|
|
|
+ width: 144rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ border: 2px solid #ededed;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
|
|
|
- &.evaluate {
|
|
|
- color: $color-yellow;
|
|
|
-
|
|
|
- &:after {
|
|
|
- border-color: $color-yellow;
|
|
|
- }
|
|
|
+ .ksps {
|
|
|
+ border-color: #4589ec;
|
|
|
+ color: #4589ec;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -706,7 +644,8 @@
|
|
|
opacity: 0.2;
|
|
|
}
|
|
|
}
|
|
|
- /deep/ .empty-content{
|
|
|
+
|
|
|
+ /deep/ .empty-content {
|
|
|
background: transparent;
|
|
|
}
|
|
|
</style>
|
