Init project
This commit is contained in:
lifizer
@@ -0,0 +1,506 @@
|
||||
<template>
|
||||
<view class="my-order" ref="container">
|
||||
|
||||
<u-tabs lineColor="#FF564A" activeStyle="#FF564A" inactiveStyle="#C2C5CC" :current="type" :list="tabList"
|
||||
@click="tabChange"></u-tabs>
|
||||
|
||||
<view class="list" style="padding: 80rpx 0 30rpx;">
|
||||
<view class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
|
||||
<view class="shop-info flex jc-between ai-center" v-if="order.merName">
|
||||
<view class="flex ai-center">
|
||||
<image :src="webUrl+'/20221008152431059973.png'" style="width: 40rpx;height: 40rpx"/>
|
||||
<text class="name">{{ order.merName }}</text>
|
||||
</view>
|
||||
<view class="flex ai-center">
|
||||
<image :src="webUrl+'/20221008152418897577.png'" style="width: 24rpx;height: 24rpx"/>
|
||||
<text class="address">{{ order.merCityName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="title acea-row row-between-wrapper" style="padding: 0 0 0 30rpx !important;">
|
||||
<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.orderId }}
|
||||
</view>
|
||||
<view class="font-color-white statusTag" v-if="order.isTickets===1 && order._status._type === 1">
|
||||
待核销
|
||||
</view>
|
||||
<view class="font-color-white statusTag" v-else>{{ getStatus(order) }}</view>
|
||||
</view>
|
||||
<view @click="goOrderDetails(order)">
|
||||
<view class="item-info acea-row 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="acea-row row-column" style="width: 100%">
|
||||
<view class="name line2">{{ cart.productInfo.storeName }}</view>
|
||||
<view class="attr line1" style="color: #999999;" v-if="cart.productInfo.attrInfo">
|
||||
属性：{{ cart.productInfo.attrInfo.sku }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="money">
|
||||
<view>￥{{ force2Decimal(cart.truePrice) }}</view>
|
||||
<view>x{{ cart.cartNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="totalPrice acea-row row-between row-middle">
|
||||
<view class="" v-if="order.createTime"><span class="orderTime">{{ order.createTime }}</span></view>
|
||||
<view class="">共{{ order.totalNum || 0 }}件商品，总金额
|
||||
<text class="money font-color-lightred">￥{{ force2Decimal(order.payPrice) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom flex jc-between ai-center">
|
||||
<view class="group-btn"
|
||||
v-if="(Number(order._status._type) === 2 || Number(order._status._type) === 3) &&
|
||||
order.isTickets === 0">
|
||||
<text class="btn-more" @click="tapShowMore(order,orderListIndex)">更多</text>
|
||||
<view class="group-float" v-show="order.showMore">
|
||||
<view class="btn btn-service flex jc-center ai-center" @click="goRoom(order)"
|
||||
v-if="order.merName">联系客服
|
||||
</view>
|
||||
<view class="btn flex jc-center ai-center" @click="goRefund(order)">申请退款</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="bnt service" @click="goRoom(order)" v-if="order.merName">联系客服</view>
|
||||
<view v-else></view>
|
||||
</template>
|
||||
|
||||
<view class="flex">
|
||||
<template v-if="order._status._type == 0">
|
||||
<view class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</view>
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即付款</view>
|
||||
</template>
|
||||
<template v-if="(order._status._type == 1 || order._status._type == 9) && order.isTickets==0">
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看详情</view>
|
||||
</template>
|
||||
<template v-if="order._status._type == 1 && order.isTickets == 1">
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即核销</view>
|
||||
</template>
|
||||
<template v-if="order._status._type == 2 && order.isTickets == 0">
|
||||
<view class="bnt default" v-if="order.isExtendedDelivery==0"
|
||||
@click="toDelay(order.orderId)">延长收货
|
||||
</view>
|
||||
<view class="bnt default" @click="goLogistics(order)">查看物流</view>
|
||||
<view class="bnt bg-color-lightred" @click="takeOrder(order)">确认收货</view>
|
||||
</template>
|
||||
<template v-if="order._status._type == 3">
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">去评价</view>
|
||||
</template>
|
||||
<template v-if="order._status._type === 4">
|
||||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看订单</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-modal :show="showExtend" title="确认延长收货时间？" content='每笔订单只能延长一次哦' showCancelButton
|
||||
@cancel="showExtend=false" @confirm="doneDelay"></u-modal>
|
||||
|
||||
<view class="noCart" v-if="orderList.length === 0 && page > 1">
|
||||
<view class="pictrue">
|
||||
<image :src="webUrl+'/20210203155245713983.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, orderDelay} from "@/api/order";
|
||||
import {cancelOrderHandle, payOrderHandle, takeOrderHandle} from "@/libs/order";
|
||||
import Loading from "@/components/Loading";
|
||||
import Payment from "@/components/Payment";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "MyOrder",
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
tabList: [
|
||||
{name: '全部'},
|
||||
{name: '待付款'},
|
||||
{name: '待发货'},
|
||||
{name: '待收货/待核销'},
|
||||
{name: '待评价'},
|
||||
{name: '已完成'}],
|
||||
offlinePayStatus: 2,
|
||||
orderData: {},
|
||||
type: 0,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
loaded: false,
|
||||
loading: false,
|
||||
orderList: [],
|
||||
pay: false,
|
||||
payType: ["yue", "weixin"],
|
||||
from: this.$deviceType,
|
||||
|
||||
showExtend: false,
|
||||
delayId: null,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Loading,
|
||||
Payment
|
||||
},
|
||||
computed: mapGetters(["userInfo"]),
|
||||
onShow: function () {
|
||||
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: {
|
||||
force2Decimal(v) {
|
||||
return this.$force2Decimal(v);
|
||||
},
|
||||
goRoom(order) {
|
||||
uni.navigateTo({
|
||||
url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName}`
|
||||
})
|
||||
},
|
||||
goRefund(order) {
|
||||
uni.navigateTo({
|
||||
url: `/pkg_orders/views/refund?id=${order.orderId}`
|
||||
})
|
||||
},
|
||||
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
|
||||
}
|
||||
});
|
||||
},
|
||||
setOfflinePayStatus: function (status) {
|
||||
let 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) {
|
||||
let that = this;
|
||||
uni.showModal({
|
||||
title: '是否确认收货?',
|
||||
content: '',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
takeOrderHandle(order.orderId).finally(() => {
|
||||
that.reload();
|
||||
that.getOrderData();
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
reload() {
|
||||
this.changeType(this.type);
|
||||
},
|
||||
tabChange(item) {
|
||||
this.type = item.index;
|
||||
this.changeType();
|
||||
},
|
||||
changeType() {
|
||||
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);
|
||||
if (this.orderList.length > 0) {
|
||||
this.orderList.forEach(item => {
|
||||
item.showMore = false;
|
||||
})
|
||||
}
|
||||
this.page++;
|
||||
this.loaded = res.data.length < this.limit;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
tapShowMore(order, index) {
|
||||
order.showMore = !order.showMore;
|
||||
this.$set(this.orderList, index, order);
|
||||
},
|
||||
getStatus(order) {
|
||||
const type = Number(order._status._type);
|
||||
let status = "";
|
||||
switch (type) {
|
||||
case 0:
|
||||
status = "待付款";
|
||||
break;
|
||||
case 1:
|
||||
status = "待发货";
|
||||
break;
|
||||
case 2:
|
||||
status = "待收货";
|
||||
break;
|
||||
case 3:
|
||||
status = "待评价";
|
||||
break;
|
||||
case 4:
|
||||
status = "已完成";
|
||||
break;
|
||||
case -1:
|
||||
status = "退款中";
|
||||
break;
|
||||
case -2:
|
||||
status = "已退款";
|
||||
break;
|
||||
case -3:
|
||||
status = "已驳回";
|
||||
break;
|
||||
}
|
||||
return status;
|
||||
},
|
||||
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() {
|
||||
},
|
||||
|
||||
toDelay(id) {
|
||||
this.delayId = id;
|
||||
this.showExtend = true;
|
||||
},
|
||||
doneDelay() {
|
||||
orderDelay(this.delayId).then(() => {
|
||||
this.showExtend = false;
|
||||
this.reload()
|
||||
});
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
!this.loading && this.getOrderList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .u-tabs {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
background-color: #fff;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.list {
|
||||
.item {
|
||||
margin: 30rpx 0;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.shop-info {
|
||||
padding: 20rpx 16rpx;
|
||||
border-bottom: 2rpx solid #DADADA;
|
||||
|
||||
.name {
|
||||
margin-left: 6rpx;
|
||||
color: #333;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-left: 4rpx;
|
||||
color: #FD574B;
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
margin: 0 30rpx;
|
||||
padding: 22rpx 0 0;
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.totalPrice {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: 2rpx solid #DADADA;
|
||||
|
||||
.bnt {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.service {
|
||||
border: 2rpx solid #0DC5C5;
|
||||
color: #0DC5C5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.statusTag {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
padding: 0 20rpx;
|
||||
background: #0DC5C5;
|
||||
height: 38rpx;
|
||||
line-height: 38rpx;
|
||||
border-radius: 20rpx 0px 0px 20rpx;
|
||||
}
|
||||
|
||||
.group-btn {
|
||||
position: relative;
|
||||
|
||||
.btn-more {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.group-float {
|
||||
position: absolute;
|
||||
width: 196rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
|
||||
padding: 0 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-service {
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user