You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
484 lines
15 KiB
484 lines
15 KiB
<template> |
|
<view class="my-order" ref="container"> |
|
<view class="header"> |
|
<cu-custom :isBack="true" :isCenter="true"> |
|
<block slot="backText"> |
|
<view class="backImg"> |
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
</view> |
|
</block> |
|
<block slot="content"> |
|
<view class="tab-title">我的订单</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
|
|
<view class="nav-box" :style="'top:calc('+CustomBar+'px+2px)'"> |
|
<view class="nav acea-row row-around"> |
|
<view class="item" @click="changeType(-1)"> |
|
<view :class="'title ' + (type == -1? 'active' : '')">全部</view> |
|
</view> |
|
<view class="item" @click="changeType(0)"> |
|
<view :class="'title ' + (type == 0? 'active' : '')">待付款</view> |
|
</view> |
|
<view class="item" @click="changeType(1)"> |
|
<view :class="'title ' + (type === 1 ? 'active' : '')">待发货</view> |
|
</view> |
|
<view class="item" @click="changeType(2)"> |
|
<view :class="'title acea-row row-middle ' + (type === 2 ? 'active' : '')">待收货</view> |
|
</view> |
|
<view class="item" @click="changeType(3)"> |
|
<view :class="'title acea-row row-middle ' + (type === 3 ? 'active' : '')">待评价</view> |
|
</view> |
|
<!-- <view class="item" @click="changeType(4)"> |
|
<view :class="'title acea-row row-middle ' + (type === 4 ? 'active' : '')">已完成</view> |
|
</view> --> |
|
</view> |
|
</view> |
|
|
|
<view class="list-box" :style="'min-height:calc(100vh - '+CustomBar+'px);'"> |
|
<view class="list" v-if="orderList.length > 0"> |
|
<view class="item" v-for="(order, orderListIndex) in orderList" :key="orderListIndex"> |
|
<view class="title acea-row row-between-wrapper"> |
|
<view class="orderId">订单编码：{{order.orderId}}</view> |
|
<!-- <view class="acea-row row-middle"> |
|
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.combinationId > 0">拼团</span> |
|
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.seckillId > 0">秒杀</span> |
|
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.bargainId > 0">砍价</span> |
|
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.storeId > 0">门店</span> |
|
{{ order.createTime }} |
|
</view> --> |
|
<view class="" v-if="order.status == 8">已取消</view> |
|
<view class="font-color-red" v-else>{{ getStatus(order) || order._status._title }}</view> |
|
</view> |
|
<view @click="goOrderDetails(order)" style="padding-bottom: 6rpx;"> |
|
<view class="item-info acea-row" v-for="(cart, cartInfoIndex) in order.cartInfo" :key="cartInfoIndex"> |
|
<view class="pictrue"> |
|
<image :src="cart.productInfo.image" @click.stop="$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: cart.productInfo.id } })" v-if="cart.combinationId === 0 && cart.bargainId === 0 && cart.seckillId === 0" /> |
|
<image |
|
:src="cart.productInfo.image" |
|
@click.stop=" |
|
$yrouter.push({ |
|
path: '/pages/activity/GroupDetails/index', |
|
query: { id: cart.combinationId }, |
|
}) |
|
" |
|
v-else-if="cart.combinationId > 0" |
|
/> |
|
<image |
|
:src="cart.productInfo.image" |
|
@click.stop=" |
|
$yrouter.push({ |
|
path: '/pages/activity/DargainDetails/index', |
|
query: { id: cart.bargainId }, |
|
}) |
|
" |
|
v-else-if="cart.bargainId > 0" |
|
/> |
|
<image |
|
:src="cart.productInfo.image" |
|
@click.stop=" |
|
$yrouter.push({ |
|
path: '/pages/activity/SeckillDetails/index', |
|
query: { id: cart.seckillId }, |
|
}) |
|
" |
|
v-else-if="cart.seckillId > 0" |
|
/> |
|
</view> |
|
<view class="text"> |
|
<view class="name line1">{{ cart.productInfo.storeName }}</view> |
|
<view class="acea-row"> |
|
<view class="attrSku">{{cart.productInfo.attrInfo.sku}}</view> |
|
</view> |
|
<view class="money acea-row row-between"> |
|
<view v-if="order.payType != 'integral'"> ￥{{ cart.productInfo.attrInfo ? cart.productInfo.attrInfo.price : cart.productInfo.price }} </view> |
|
<view v-if="order.payType == 'integral'"> {{ order.payIntegral }}积分 </view> |
|
<view class="num">x{{ cart.cartNum }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="acea-row row-between-wrapper"> |
|
<view class="totalPrice"> |
|
{{order._status._type == 0 ? '应' : '已'}}付金额： |
|
<text class="money" v-if="order.payType != 'integral'">￥{{ order.payPrice }}</text> |
|
<text class="money" v-if="order.payType == 'integral'">{{ order.payIntegral }}积分</text> |
|
</view> |
|
<view class="bottom acea-row row-right row-middle"> |
|
<template v-if="order._status._type == 0 && order.status != 8"> |
|
<view class="bnt" @click="cancelOrder(order)">取消订单</view> |
|
<view class="bnt bg-color-red" @click="goOrderDetails(order)">立即付款</view> |
|
</template> |
|
<template v-if="order._status._type == 1 || order._status._type == 9 || order.status == 8"> |
|
<view class="bnt" @click="goOrderDetails(order)">查看详情</view> |
|
</template> |
|
<template v-if="order._status._type == 2"> |
|
<view class="bnt" @click="goLogistics(order)">查看物流</view> |
|
<view class="bnt bg-color-red" @click="takeOrder(order)">确认收货</view> |
|
</template> |
|
<template v-if="order._status._type == 3"> |
|
<!-- //////////////////////// |
|
<view |
|
class="bnt default" |
|
@click=" |
|
$yrouter.push({ path: '/pages/order/Logistics/index',query:{id:order.orderId}}) |
|
" |
|
v-if="order.deliveryType == 'express'" |
|
> |
|
查看物流 |
|
</view> |
|
/////////////////////// --> |
|
<view class="bnt" @click="goOrderDetails(order)">评价商品</view> |
|
</template> |
|
<!-- /////////// |
|
<template v-if="order._status._type === 4"> |
|
<view class="bnt" @click="goOrderDetails(order)">查看订单</view> |
|
</template> |
|
///////// --> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
<Loading :loaded="loaded" :loading="loading"></Loading> |
|
</view> |
|
|
|
<!-- <view class="noCart" v-if="orderList.length === 0 && page > 1"> |
|
<view class="pictrue"> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/noOrder.png`" /> |
|
</view> |
|
</view> --> |
|
<view class="noCart" v-if="orderList.length === 0 && page > 1"> |
|
<view class="pictrue"> |
|
<image src="@/static/images/no-more.png" /> |
|
</view> |
|
<view class="text-big"> |
|
什么都没有，大概被外星人带走了 |
|
</view> |
|
<view class="text-small"> |
|
快去下单吧 |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- <view class="header bg-color-red"> |
|
<view class="picTxt acea-row row-between-wrapper"> |
|
<view class="text"> |
|
<view class="name">订单信息</view> |
|
<view>累计订单：{{ orderData.orderCount || 0 }} 总消费：￥{{ orderData.sumPrice || 0 }}</view> |
|
</view> |
|
</view> |
|
</view> --> |
|
<!-- <view class="nav acea-row row-around"> |
|
<view class="item" :class="{ on: type === 0 }" @click="changeType(0)"> |
|
<view>待付款</view> |
|
<view class="num">{{ orderData.unpaidCount || 0 }}</view> |
|
</view> |
|
<view class="item" :class="{ on: type === 1 }" @click="changeType(1)"> |
|
<view>待发货</view> |
|
<view class="num">{{ orderData.unshippedCount || 0 }}</view> |
|
</view> |
|
<view class="item" :class="{ on: type === 2 }" @click="changeType(2)"> |
|
<view>待收货</view> |
|
<view class="num">{{ orderData.receivedCount || 0 }}</view> |
|
</view> |
|
<view class="item" :class="{ on: type === 3 }" @click="changeType(3)"> |
|
<view>待评价</view> |
|
<view class="num">{{ orderData.evaluatedCount || 0 }}</view> |
|
</view> |
|
<view class="item" :class="{ on: type === 4 }" @click="changeType(4)"> |
|
<view>已完成</view> |
|
<view class="num">{{ orderData.completeCount || 0 }}</view> |
|
</view> |
|
</view> --> |
|
<!-- <Loading :loaded="loaded" :loading="loading"></Loading> --> |
|
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment> |
|
</view> |
|
</template> |
|
<script> |
|
import { getOrderData, getOrderList } from '@/api/order' |
|
import { cancelOrderHandle, payOrderHandle, takeOrderHandle } from '@/libs/order' |
|
import Loading from '@/components/Loading' |
|
import Payment from '@/components/Payment' |
|
import DataFormat from '@/components/DataFormat' |
|
import { mapGetters } from 'vuex' |
|
import { isWeixin, dataFormat } from '@/utils' |
|
|
|
const STATUS = ['待付款', '待发货', '待收货', '待评价', '已完成', '', '', '', '', '待付款'] |
|
|
|
const NAME = 'MyOrder' |
|
|
|
export default { |
|
name: NAME, |
|
data() { |
|
return { |
|
CustomBar: this.CustomBar, |
|
offlinePayStatus: 2, |
|
orderData: {}, |
|
type: '', |
|
page: 1, |
|
limit: 10, |
|
loaded: false, |
|
loading: false, |
|
orderList: [], |
|
pay: false, |
|
payType: ['yue', 'weixin'], |
|
from: this.$deviceType, |
|
} |
|
}, |
|
components: { |
|
Loading, |
|
Payment, |
|
DataFormat, |
|
}, |
|
computed: mapGetters(['userInfo']), |
|
onLoad() { |
|
this.type = parseInt(this.$yroute.query.type) || 0; |
|
}, |
|
onShow: function() { |
|
this.changeType(this.type) |
|
this.getOrderData() |
|
this.getOrderList() |
|
}, |
|
onHide: function() { |
|
this.orderList = [] |
|
this.page = 1 |
|
this.limit = 20 |
|
this.loaded = false |
|
this.loading = false |
|
}, |
|
methods: { |
|
goLogistics(order) { |
|
this.$yrouter.push({ |
|
path: '/pages/order/Logistics/index', |
|
query: { id: order.orderId }, |
|
}) |
|
}, |
|
goOrderDetails(order) { |
|
this.$yrouter.push({ |
|
path: '/pages/order/OrderDetails/index', |
|
query: { id: order.orderId }, |
|
}) |
|
}, |
|
dataFormat, |
|
setOfflinePayStatus: function(status) { |
|
var that = this |
|
that.offlinePayStatus = status |
|
if (status === 1) { |
|
if (that.payType.indexOf('offline') < 0) { |
|
that.payType.push('offline') |
|
} |
|
} |
|
}, |
|
getOrderData() { |
|
getOrderData().then(res => { |
|
this.orderData = res.data |
|
}) |
|
}, |
|
takeOrder(order) { |
|
takeOrderHandle(order.orderId).finally(() => { |
|
this.reload() |
|
this.getOrderData() |
|
}) |
|
}, |
|
reload() { |
|
this.changeType(this.type) |
|
}, |
|
changeType(type) { |
|
this.type = type |
|
this.orderList = [] |
|
this.page = 1 |
|
this.loaded = false |
|
this.loading = false |
|
this.getOrderList() |
|
}, |
|
getOrderList() { |
|
if (this.loading || this.loaded) return |
|
this.loading = true |
|
const { page, limit, type } = this |
|
getOrderList({ |
|
page, |
|
limit, |
|
type, |
|
}).then(res => { |
|
this.orderList = this.orderList.concat(res.data) |
|
this.page++ |
|
this.loaded = res.data.length < this.limit |
|
this.loading = false |
|
}) |
|
}, |
|
getStatus(order) { |
|
return STATUS[order._status._type] |
|
}, |
|
cancelOrder(order) { |
|
cancelOrderHandle(order.orderId) |
|
.then(() => { |
|
this.getOrderData() |
|
this.orderList.splice(this.orderList.indexOf(order), 1) |
|
}) |
|
.catch(() => { |
|
this.reload() |
|
}) |
|
}, |
|
paymentTap: function(order) { |
|
var that = this |
|
if (!(order.combinationId > 0 || order.bargainId > 0 || order.seckillId > 0)) { |
|
that.setOfflinePayStatus(order.offlinePayStatus) |
|
} |
|
this.pay = true |
|
this.toPay = type => { |
|
payOrderHandle(order.orderId, type, that.from) |
|
.then(() => { |
|
const type = parseInt(this.$yroute.query.type) || 0 |
|
that.changeType(type) |
|
that.getOrderData() |
|
}) |
|
.catch(() => { |
|
const type = parseInt(that.$yroute.query.type) || 0 |
|
that.changeType(type) |
|
that.getOrderData() |
|
}) |
|
} |
|
}, |
|
toPay() {}, |
|
}, |
|
mounted() {}, |
|
onReachBottom() { |
|
!this.loading && this.getOrderList() |
|
}, |
|
} |
|
</script> |
|
|
|
<style scoped lang="less"> |
|
.header { |
|
.tab-title { |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #2DB5AE; |
|
line-height: 42rpx; |
|
} |
|
.backImg { |
|
width: 88rpx; |
|
height: 62rpx; |
|
padding-left: 26rpx; |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
.nav-box { |
|
padding-top: 4rpx; |
|
background: #F1F1F1; |
|
position: fixed; |
|
left: 0; |
|
z-index: 5; |
|
} |
|
.nav { |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
.item { |
|
.title { |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
} |
|
.active { |
|
color: #2DB5AE; |
|
font-weight: 600; |
|
} |
|
.title::after { |
|
display: block; |
|
content: ''; |
|
width: 100%; |
|
height: 4rpx; |
|
background: #2DB5AE; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
opacity: 0; |
|
transform:scaleX(0); |
|
transition: all .2s cubic-bezier(.18,.89,.17,.88),opacity .15s ease; |
|
} |
|
.active::after { |
|
opacity: 1; |
|
transform: scaleX(1); |
|
} |
|
} |
|
} |
|
|
|
.list-box { |
|
padding-top: 112rpx; |
|
background: #FFFFFF; |
|
} |
|
.my-order .list { |
|
.item { |
|
.title { |
|
.orderId { |
|
font-size: 20rpx; |
|
line-height: 26rpx; |
|
} |
|
} |
|
.item-info .text{ |
|
.attrSku { |
|
padding: 0rpx 16rpx; |
|
height: 46rpx; |
|
background: #E3E3E3; |
|
border-radius: 8rpx; |
|
font-size: 20rpx; |
|
color: #999999; |
|
line-height: 46rpx; |
|
} |
|
.money .num { |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
line-height: 32rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.noCart { |
|
// margin-top: 0.17 * 100rpx; |
|
// padding-top: 0.1 * 100rpx; |
|
} |
|
|
|
.noCart .pictrue { |
|
// width: 4 * 100rpx; |
|
// height: 3 * 100rpx; |
|
width: 428rpx; |
|
height: 526rpx; |
|
overflow: hidden; |
|
margin: 0.7 * 100rpx auto 0.5 * 100rpx auto; |
|
} |
|
.text-big{ |
|
padding: 0 30rpx; |
|
text-align: center; |
|
font-family: PingFangSC-Medium, PingFang SC; |
|
font-style: 36rpx; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 50rpx; |
|
} |
|
.text-small{ |
|
padding: 0 80rpx; |
|
font-family: PingFangSC-Medium, PingFang SC; |
|
text-align: center; |
|
font-style: 28rpx; |
|
font-weight: 400; |
|
color: #3A3A3C; |
|
line-height: 40rpx; |
|
} |
|
|
|
.noCart .pictrue image { |
|
// width: 4 * 100rpx; |
|
// height: 3 * 100rpx; |
|
width: 428rpx; |
|
height: 526rpx; |
|
} |
|
</style>
|
|
|