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.

391 lines
12 KiB

3 years ago
<template>
<view class="my-order" ref="container">
<!-- <view class="header">
<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>
<view class="list">
<view class="item" v-for="(order, orderListIndex) in orderList" :key="orderListIndex">
<view class="title acea-row row-between-wrapper">
<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> -->
订单号 {{ orderList[0].orderId }}
</view>
<view class="state">{{ getStatus(order) }}</view>
</view>
<view @click="goOrderDetails(order)">
<view class="item-info acea-row-nowrap row-between row-top" 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 acea-row row-between">
<view class="name">
<view class="line1">{{ cart.productInfo.storeName }}</view>
<view class="money acea-row row-column">
<view class="cart-num">数量x{{ cart.cartNum }}</view>
<view class="money-txt" v-if="order.payType != 'integral'"> {{ cart.productInfo.attrInfo ? cart.productInfo.attrInfo.price : cart.productInfo.price }} </view>
<view class="money-txt" v-if="order.payType == 'integral'"> {{ order.payIntegral }}积分 </view>
</view>
</view>
</view>
</view>
</view>
<view class="totalPrice">
{{ order.cartInfo.length || 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">
<view class="bnt cancelBnt" @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">
<view class="bnt bg-color-red" @click="goOrderDetails(order)">查看详情</view>
</template>
<template v-if="order._status._type == 2">
<view class="bnt default" @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'"-->
<!--&gt;-->
<!--查看物流-->
<!--</view>-->
<view class="bnt bg-color-red" @click="goOrderDetails(order)">去评价</view>
</template>
<template v-if="order._status._type === 4">
<view class="bnt bg-color-red" @click="goOrderDetails(order)">查看订单</view>
</template>
</view>
</view>
</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>
<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 {
offlinePayStatus: 2,
orderData: {},
type: 0,
page: 1,
limit: 20,
loaded: false,
loading: false,
orderList: [],
pay: false,
payType: ['yue', 'weixin'],
from: this.$deviceType,
}
},
components: {
Loading,
Payment,
DataFormat,
},
computed: mapGetters(['userInfo']),
onShow: function() {
console.log(this)
this.type = parseInt(this.$yroute.query.type) || 0
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{
width: 100%;
background: #F99C10;
}
.my-order{
width: 100%;
.nav{
width: 100%;
height: auto;
margin: 0;
.item{
padding: 28rpx 0;
color: #222;
font-size: 32rpx;
}
.on{
border-color: #F99C10 !important;
}
}
.list{
width: 710rpx;
margin: 20rpx auto 0;
.item{
border-radius: 10rpx;
.title{
font-size: 24rpx;
color: #222;
.state{
font-size: 32rpx;
color: #E5270F;
}
}
.item-info {
.pictrue {
width: 170rpx;
height: 170rpx;
image{
width: 170rpx;
height: 170rpx;
}
margin-right: 30rpx;
}
}
.item-info{
.text{
.money{
text-align: left;
.cart-num{
font-size: 24rpx;
color: #999;
margin-bottom: 40rpx;
}
.money-txt{
color: #E5270F;
font-size: 44rpx;
}
}
}
.name{
width: 100%;
font-size: 28rpx;
color: #222;
}
}
.totalPrice {
font-size: 26rpx;
color: #282828;
text-align: right;
margin: 27rpx 0 0 30rpx;
padding: 30rpx 30rpx 0rpx 0;
border: none;
border-top: 1rpx solid #eee;
.money{
color: #E5270F;
}
}
}
}
}
.noCart {
margin-top: 0.17 * 100rpx;
padding-top: 0.1 * 100rpx;
}
.noCart .pictrue {
width: 4 * 100rpx;
height: 3 * 100rpx;
overflow: hidden;
margin: 0.7 * 100rpx auto 0.5 * 100rpx auto;
}
.noCart .pictrue image {
width: 4 * 100rpx;
height: 3 * 100rpx;
}
</style>