You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

885 lines
23 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view v-if="!isLoading" class="container">
<view class="header">
<!-- 订单状态 -->
<view class="order-status">
<view class="status-icon">
<!-- 进行中的订单 -->
<block>
<!-- 待支付 -->
<block>
<image v-if="order.status == OrderStatusEnum.CREATED.value" class="image" src="/static/order/status/wait_pay.png" mode="aspectFit"></image>
</block>
<!-- 已支付 -->
<block>
<image v-if="order.status == OrderStatusEnum.PAID.value" class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
</block>
<!-- 待发货 -->
<block>
<image v-if="order.status == OrderStatusEnum.DELIVERY.value" class="image" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image>
</block>
<!-- 已发货 -->
<block>
<image v-if="order.status == OrderStatusEnum.DELIVERED.value" class="image" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image>
</block>
<!-- 已收货-->
<block>
<image v-if="order.status == OrderStatusEnum.RECEIVED.value" class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
</block>
<!-- 已取消-->
<block>
<image v-if="order.status == OrderStatusEnum.CANCEL.value || order.status == OrderStatusEnum.REFUND.value" class="image" src="/static/order/status/close.png" mode="aspectFit"></image>
</block>
</block>
</view>
<view class="status-text">
<text v-if="order.status == OrderStatusEnum.CREATED.value">{{OrderStatusEnum.CREATED.name}}</text>
<text v-else-if="order.status == OrderStatusEnum.PAID.value">{{OrderStatusEnum.PAID.name}}</text>
<text v-else-if="order.status == OrderStatusEnum.DELIVERY.value">{{OrderStatusEnum.DELIVERY.name}}</text>
<text v-else-if="order.status == OrderStatusEnum.DELIVERED.value">{{OrderStatusEnum.DELIVERED.name}}</text>
<text v-else-if="order.status == OrderStatusEnum.RECEIVED.value">{{OrderStatusEnum.RECEIVED.name}}</text>
<text v-else-if="order.status == OrderStatusEnum.CANCEL.value">{{OrderStatusEnum.CANCEL.name}}</text>
<text v-else-if="order.status == OrderStatusEnum.REFUND.value">{{OrderStatusEnum.REFUND.name}}</text>
</view>
<view class="verify-code" v-if="order.orderMode == 'oneself' && order.verifyCode && order.payStatus == 'B'">
<view>提取码:</view>
<view class="code">{{ order.verifyCode }}</view>
</view>
</view>
</view>
<!--订单类型-->
<view class="order-type">
<text class="type">{{ order.typeName }}</text>
</view>
<!-- 快递配送:配送地址 -->
<view v-if="order.address" class="delivery-address i-card">
<view class="link-man">
<text class="name">{{ order.address.name }}</text>
<text class="phone">{{ order.address.mobile }}</text>
</view>
<view class="address">
<text class="region">{{ order.address.provinceName }}{{ order.address.cityName }}{{ order.address.regionName }}</text>
<text class="detail">{{ order.address.detail }}</text>
</view>
</view>
<!-- 门店自提:自提地址 -->
<view v-if="order.orderMode == 'oneself'" class="delivery-address i-card">
<view class="link-man">
<text class="type">[门店自提]</text>
</view>
<view class="link-man">
<text class="name">{{ order.storeInfo.name }}</text>
<text class="phone">{{ order.storeInfo.phone }}</text>
</view>
<view class="address">
<text class="region">{{ order.storeInfo.address }}</text>
</view>
</view>
<!-- 商品列表 -->
<view class="goods-list i-card" v-if="order.goods.length > 0">
<view class="goods-item" v-for="(goods, idx) in order.goods" :key="idx">
<view class="goods-main" v-if="goods.num > 0" @click="handleTargetGoods(goods.goodsId, goods.type)">
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" :src="goods.image" mode="widthFix"></image>
</view>
<!-- 商品信息 -->
<view class="goods-content">
<view class="goods-title twolist-hidden"><text>{{goods.name}}</text></view>
<view class="goods-props clearfix">
<view class="goods-props-item" v-for="(props, idx) in goods.specList" :key="idx">
<text>{{ props.specValue }}</text>
</view>
</view>
</view>
<!-- 交易信息 -->
<view class="goods-trade">
<view class="goods-price">
<text class="unit">¥</text>
<text class="value">{{ goods.price }}</text>
</view>
<view class="goods-num">
<text>×{{goods.num}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="order-info i-card">
<view class="info-item">
<view class="item-lable">订单编号</view>
<view class="item-content">
<text>{{order.orderSn}}</text>
<view class="act-copy" @click="handleCopy(order.orderSn)">
<text>复制</text>
</view>
</view>
</view>
<view class="info-item">
<view class="item-lable">下单时间</view>
<view class="item-content">
<text>{{order.createTime}}</text>
</view>
</view>
<view class="info-item">
<view class="item-lable">支付时间</view>
<view class="item-content">
<text>{{order.payTime ? order.payTime : '--'}}</text>
</view>
</view>
<view class="info-item">
<view class="item-lable">备注信息</view>
<view class="item-content">
<text>{{order.remark ? order.remark : '--'}}</text>
</view>
</view>
</view>
<!-- 结算信息 -->
<view class="trade-info i-card">
<view class="info-item">
<view class="item-lable">订单金额</view>
<view class="item-content">
<text>¥{{(order.amount.toFixed(2))}}</text>
</view>
</view>
<view v-if="order.discount > 0" class="info-item">
<view class="item-lable">优惠金额</view>
<view class="item-content">
<text>-¥{{ order.discount.toFixed(2) }}</text>
</view>
</view>
<view v-if="order.deliveryFee > 0" class="info-item">
<view class="item-lable">配送费用</view>
<view class="item-content">
<text>+¥{{ order.deliveryFee.toFixed(2) }}</text>
</view>
</view>
<view v-if="order.pointAmount > 0" class="info-item">
<view class="item-lable">积分抵扣</view>
<view class="item-content">
<text>-¥{{ order.pointAmount.toFixed(2) }}</text>
</view>
</view>
<view class="info-item">
<view class="item-lable">支付方式</view>
<view class="item-content">
<text>{{ PayTypeEnum.getNameByValue(order.payType) }}</text>
</view>
</view>
<view class="divider"></view>
<view class="trade-total">
<text class="lable">实付款</text>
<view class="goods-price">
<text class="unit">¥</text>
<text class="value">{{order.payAmount ? order.payAmount.toFixed(2) : '0.00'}}</text>
</view>
</view>
</view>
<!-- 底部操作按钮 -->
<view class="footer-fixed" v-if="order.status == OrderStatusEnum.CREATED.value">
<view class="btn-wrapper">
<block>
<view class="btn-item" @click="onCancel(order.id)">取消订单</view>
</block>
<block>
<view class="btn-item active" @click="onPay(order.id)">去支付</view>
</block>
</view>
</view>
<!-- 已支付的订单 -->
<view class="footer-fixed" v-if="(order.status == OrderStatusEnum.PAID.value)">
<view class="btn-wrapper">
<block v-if="!order.refundInfo">
<view class="btn-item active" @click="handleApplyRefund(order.id)">申请售后</view>
</block>
<block v-if="order.refundInfo">
<view class="btn-item common" @click="handleRefundDetail(order.refundInfo.id)">售后详情</view>
</block>
</view>
</view>
<view class="footer-fixed" v-if="order.status == OrderStatusEnum.DELIVERED.value">
<view class="btn-wrapper">
<block>
<view class="btn-item active" @click="onReceipt(order.id)">确认收货</view>
</block>
</view>
</view>
<!-- 支付方式弹窗 -->
<u-popup v-model="showPayPopup" mode="bottom" :closeable="true">
<view class="pay-popup">
<view class="title">请选择支付方式</view>
<view class="pop-content">
<!-- 微信支付 -->
<view class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.WECHAT.value)">
<view class="item-left dis-flex flex-y-center">
<view class="item-left_icon wechat">
<text class="iconfont icon-weixinzhifu"></text>
</view>
<view class="item-left_text">
<text>{{ PayTypeEnum.WECHAT.name }}</text>
</view>
</view>
</view>
<!-- 余额支付 -->
<view v-if="order.type != 'recharge' && order.type != 'prestore'" class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.BALANCE.value)">
<view class="item-left dis-flex flex-y-center">
<view class="item-left_icon balance">
<text class="iconfont icon-qiandai"></text>
</view>
<view class="item-left_text">
<text>{{ PayTypeEnum.BALANCE.name }}</text>
</view>
</view>
</view>
</view>
</view>
</u-popup>
<!-- 快捷导航 -->
<shortcut/>
</view>
</template>
<script>
import {
DeliveryStatusEnum,
DeliveryTypeEnum,
OrderStatusEnum,
PayStatusEnum,
PayTypeEnum,
ReceiptStatusEnum
} from '@/common/enum/order'
import * as OrderApi from '@/api/order'
import { wxPayment } from '@/utils/app'
import Shortcut from '@/components/shortcut'
export default {
components: {
Shortcut
},
data() {
return {
// 枚举类
DeliveryStatusEnum,
DeliveryTypeEnum,
OrderStatusEnum,
PayStatusEnum,
PayTypeEnum,
ReceiptStatusEnum,
// 当前订单ID
orderId: null,
// 加载中
isLoading: true,
// 当前订单详情
order: {},
// 当前设置
setting: {},
// 支付方式弹窗
showPayPopup: false,
// 刷新页面
reflash: false
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad({ orderId }) {
// 当前订单ID
this.orderId = orderId;
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取当前订单信息
this.getOrderDetail();
},
methods: {
// 获取当前订单信息
getOrderDetail() {
const app = this
app.isLoading = true
OrderApi.detail(app.orderId)
.then(result => {
app.order = result.data
app.setting = result.data
app.isLoading = false
})
},
// 复制指定内容
handleCopy(value) {
const app = this
uni.setClipboardData({
data: value,
success() {
app.$toast('复制成功')
}
})
},
// 跳转到商品详情页面
handleTargetGoods(goodsId, type) {
this.$navTo('pages/goods/detail', { goodsId })
},
// 跳转到申请售后页面
handleApplyRefund(orderId) {
this.$navTo('pages/refund/apply', { orderId })
},
// 售后详情
handleRefundDetail(refundId) {
this.$navTo('pages/refund/detail', { refundId })
},
// 取消订单
onCancel() {
const app = this
uni.showModal({
title: '友情提示',
content: '确认要取消该订单吗?',
success(o) {
if (o.confirm) {
OrderApi.cancel(app.orderId)
.then(result => {
// 显示成功信息
app.$success(result.message);
// 刷新当前订单数据
app.getOrderDetail();
})
}
}
});
},
// 点击去支付
onPay() {
// 显示支付方式弹窗
this.showPayPopup = true;
},
// 确认收货
onReceipt(orderId) {
const app = this
uni.showModal({
title: '友情提示',
content: '确认收到商品了吗?',
success(o) {
if (o.confirm) {
OrderApi.receipt(orderId)
.then(result => {
// 显示成功信息
app.$success(result.message)
// 刷新当前订单数据
app.getOrderDetail()
})
}
}
});
},
// 选择支付方式
onSelectPayType(payType) {
const app = this
// 隐藏支付方式弹窗
this.showPayPopup = false
// 发起支付请求
OrderApi.pay(app.orderId, payType)
.then(result => app.onSubmitCallback(result))
.catch(err => err)
},
// 订单提交成功后回调
onSubmitCallback(result) {
const app = this;
if (!result.data) {
if (result.message) {
app.$error(result.message);
} else {
app.$error('支付失败');
}
return false;
}
// 发起微信支付
if (result.data.payType == PayTypeEnum.WECHAT.value) {
wxPayment(result.data.payment)
.then(() => {
app.$success('支付成功');
setTimeout(() => {
app.getOrderDetail();
}, 1500)
})
.catch(err => {
app.$error('订单未支付');
})
.finally(() => {
app.disabled = false;
})
}
// 余额支付
if (result.data.payType == PayTypeEnum.BALANCE.value) {
if (result.data.orderInfo.payStatus == 'B') {
app.$success('支付成功');
app.disabled = false;
setTimeout(() => {
// 刷新当前订单数据
app.getOrderDetail();
}, 1500)
} else {
app.$error('支付失败');
}
}
}
}
}
</script>
<style>
page {
background: #f4f4f4;
}
</style>
<style lang="scss" scoped>
.container {
padding-bottom: 140rpx;
}
// 页面顶部
.header {
display: flex;
justify-content: space-between;
background-color: $fuint-theme;
height: 280rpx;
padding: 56rpx 30rpx 0 30rpx;
.order-status {
display: flex;
align-items: center;
height: 128rpx;
.status-icon {
width: 128rpx;
height: 128rpx;
.image {
display: block;
width: 100%;
height: 100%;
}
}
.status-text {
padding-left: 20rpx;
color: #fff;
font-size: 38rpx;
font-weight: bold;
}
.verify-code {
color: #ffffff;
margin-left: 60rpx;
font-size: 30rpx;
.code {
font-size: 50rpx;
color: #ffd700;
font-weight: bold;
}
}
}
.next-action {
display: flex;
align-items: center;
height: 128rpx;
.action-btn {
min-width: 150rpx;
height: 60rpx;
padding: 0 30rpx;
line-height: 60rpx;
text-align: center;
border-radius: 30rpx;
border-color: #ffffff;
color: #ffffff;
background: linear-gradient(to right, #f9211c, #ff6335);
cursor: pointer;
user-select: none;
}
}
}
// 通栏卡片
.i-card {
background: #fff;
padding: 24rpx 24rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
margin: 0 auto 20rpx auto;
border-radius: 20rpx;
}
// 订单类型
.order-type {
font-weight: bold;
margin: 25rpx;
}
// 收货地址
.delivery-address {
margin-top: 20rpx;
.link-man {
line-height: 46rpx;
color: #333;
.type {
margin-right: 10rpx;
font-weight: bold;
}
.name {
margin-right: 10rpx;
color: #999;
}
.phone {
margin-right: 10rpx;
color: #999;
}
}
.address {
margin-top: 12rpx;
color: #999;
font-size: 24rpx;
.detail {
margin-left: 6rpx;
}
}
}
// 物流公司
.express {
display: flex;
align-items: center;
.main {
flex: 1;
}
.info-item {
display: flex;
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
.item-lable {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999;
margin-right: 30rpx;
}
.item-content {
flex: 1;
display: flex;
align-items: center;
font-size: 26rpx;
color: #333;
.act-copy {
margin-left: 20rpx;
padding: 2rpx 20rpx;
font-size: 22rpx;
color: #666;
border: 1rpx solid #c1c1c1;
border-radius: 16rpx;
}
}
}
// 右侧箭头
.right-arrow {
margin-left: 16rpx;
// color: #777;
font-size: 26rpx;
}
}
// 商品列表
.goods-list {
// 商品项
.goods-item {
margin-bottom: 40rpx;
&:last-child {
margin-bottom: 0;
}
// 商品信息
.goods-main {
display: flex;
}
// 商品图片
.goods-image {
width: 180rpx;
height: 180rpx;
.image {
display: block;
width: 100%;
height: 100%;
border-radius: 8rpx;
}
}
// 商品内容
.goods-content {
flex: 1;
padding-left: 16rpx;
padding-top: 16rpx;
.goods-title {
font-size: 26rpx;
max-height: 76rpx;
}
.goods-props {
margin-top: 14rpx;
height: 40rpx;
color: #ababab;
font-size: 24rpx;
overflow: hidden;
.goods-props-item {
display: inline-block;
margin-right: 14rpx;
padding: 4rpx 16rpx;
border-radius: 12rpx;
background-color: #F5F5F5;
width: auto;
}
}
}
// 交易信息
.goods-trade {
padding-top: 16rpx;
width: 150rpx;
text-align: right;
color: $uni-text-color-grey;
font-size: 26rpx;
.goods-price {
vertical-align: bottom;
margin-bottom: 16rpx;
.unit {
margin-right: -2rpx;
font-size: 24rpx;
}
}
}
// 商品售后
.goods-refund {
display: flex;
justify-content: flex-end;
.stata-text {
font-size: 24rpx;
color: #999;
}
.action-btn {
border-radius: 28rpx;
padding: 8rpx 26rpx;
font-size: 24rpx;
color: #383838;
border: 1rpx solid #a8a8a8;
}
}
}
}
// 订单信息
.order-info {
.info-item {
display: flex;
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
.item-lable {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999;
margin-right: 30rpx;
}
.item-content {
flex: 1;
display: flex;
align-items: center;
font-size: 26rpx;
color: #333;
.act-copy {
margin-left: 20rpx;
padding: 2rpx 20rpx;
font-size: 22rpx;
color: #666;
border: 1rpx solid #c1c1c1;
border-radius: 16rpx;
}
}
}
}
// 交易信息
.trade-info {
margin-bottom: 80rpx;
.info-item {
display: flex;
margin-bottom: 24rpx;
.item-lable {
font-size: 24rpx;
color: #999;
margin-right: 24rpx;
}
.item-content {
flex: 1;
font-size: 26rpx;
color: #333;
text-align: right;
}
}
.divider {
height: 1rpx;
background: #f1f1f1;
margin-bottom: 24rpx;
}
.trade-total {
display: flex;
justify-content: flex-end;
.goods-price {
margin-left: 12rpx;
vertical-align: bottom;
color: $uni-text-color-active;
.unit {
margin-right: -2rpx;
font-size: 24rpx;
}
}
}
}
/* 底部操作栏 */
.footer-fixed {
position: fixed;
bottom: var(--window-bottom);
left: 0;
right: 0;
height: 180rpx;
padding-bottom: 30rpx;
z-index: 11;
box-shadow: 0 -4rpx 40rpx 0 rgba(97, 97, 97, 0.1);
background: #fff;
.btn-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 30rpx;
}
.btn-item {
min-width: 164rpx;
border-radius: 8rpx;
padding: 20rpx 24rpx;
font-size: 28rpx;
color: #383838;
text-align: center;
border: 1rpx solid #a8a8a8;
margin-left: 10rpx;
&.common {
color: #fff;
border: none;
background: linear-gradient(to right, $fuint-theme, $fuint-theme);
}
&.active {
color: #fff;
border: none;
background: linear-gradient(to right, #f9211c, #ff6335);
}
}
}
// 弹出层-支付方式
.pay-popup {
padding: 25rpx 25rpx 70rpx 25rpx;
.title {
font-size: 30rpx;
margin-bottom: 50rpx;
font-weight: bold;
text-align: center;
}
.pop-content {
min-height: 120rpx;
padding: 0 20rpx;
.pay-item {
padding: 30rpx;
font-size: 30rpx;
background: #fff;
border: 1rpx solid $fuint-theme;
border-radius: 8rpx;
color: #888;
margin-bottom: 12rpx;
text-align: center;
.item-left_icon {
margin-right: 20rpx;
font-size: 48rpx;
&.wechat {
color: #00c800;
}
&.balance {
color: $fuint-theme;
}
}
}
}
}
</style>