436 lines
10 KiB
Vue
436 lines
10 KiB
Vue
<template>
|
||
<view class="content">
|
||
<z-nav-bar title="我的订单" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
|
||
|
||
<view class="order_block">
|
||
<view class="order_list" v-if="list.length>0">
|
||
<view class="order_item" v-for="(item, index) in list" :key="index" @click="goToDetail(item)">
|
||
<view class="order_orderSn">
|
||
{{item.orderSn}}
|
||
<u-tag @click="handleCopy(item.orderSn, '订单编号')" text="复制" plain style="float: right" size="mini" type="success"></u-tag>
|
||
</view>
|
||
<view class="item_top">
|
||
<text class="orderstatus" v-show="item.orderStatus == 0">未付款</text>
|
||
<text class="orderstatus" v-show="item.orderStatus == 1">待发货</text>
|
||
<text class="orderstatus" v-show="item.orderStatus == 2">已发货</text>
|
||
<text class="orderstatus" v-show="item.orderStatus == 3">交易成功</text>
|
||
<text class="orderstatus" v-show="item.orderStatus == 4">交易失败</text>
|
||
<text class="orderstatus" v-show="item.orderStatus == 5">已过期</text>
|
||
</view>
|
||
<view class="order_infor" v-if="item.orderType=='aiVip'||item.orderType=='upgradeAiVip'">
|
||
<view class="left">
|
||
<image src="../../static/icon/order_vip.png" mode="aspectFill"></image>
|
||
<text>{{item.aiBuyConfig.title}}<span>（{{item.aiBuyConfig.count}}次）</span><span v-if="item.orderType=='upgradeAiVip'">（VIP升级）</span></text>
|
||
</view>
|
||
<view class="right">
|
||
<text v-if="item.orderType=='upgradeAiVip'&&item.districtMoney>0">￥{{Number(item.aiBuyConfig.fee)-Number(item.districtMoney)}}</text>
|
||
<text v-else>￥{{item.aiBuyConfig.fee}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="order_infor" v-if="item.orderType=='point'">
|
||
<view class="left">
|
||
<image class="feng fengPoint" src="/static/icon/pay_3.png" mode="aspectFill"></image>
|
||
<text>充值 {{item.bookBuyConfigEntity.money}}天医币</text>
|
||
</view>
|
||
</view>
|
||
<view class="order_infor" v-if="item.orderType=='relearn'">
|
||
<view class="left">
|
||
<image class="feng fengPoint" src="/static/icon/fugou.png" mode="aspectFill"></image>
|
||
<view class="btns flexbox">
|
||
<view class="booknameleft" style=" padding-left: 20rpx;">
|
||
{{ item.remark }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order_infor" v-if="item.orderType=='order'">
|
||
<view v-for="(item2, index2) in item.productList"
|
||
:key="item.orderId" class="bookinfolist">
|
||
<view class="left">
|
||
<view class="feng" v-if="item2.product && item2.product.productImages">
|
||
<image style="width: 100%; height: 100%"
|
||
mode="aspectFit" :src="item2.product.productImages"></image>
|
||
</view>
|
||
|
||
<view v-else class="feng" style="
|
||
color: #c0c4cc;
|
||
font-size: 22rpx;
|
||
line-height: 140rpx;
|
||
text-align: center;
|
||
">暂无封面图</view>
|
||
<view class="btns flexbox" style=" width: calc(100% - 150rpx);">
|
||
<view class="booknameleft">
|
||
{{ item2.product && item2.product.productName ? item2.product.productName : "" }}</view>
|
||
|
||
<view style="
|
||
line-height: 58rpx;
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
">
|
||
<text style="font-size: 20rpx">￥</text>
|
||
<text v-if="item2.product.price>=0">{{item2.product.price}}</text>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btns flexbox">
|
||
<view class="left" style="color: #c0c4cc"></view>
|
||
<view class="right flexbox opbtns" style="color: #c0c4cc">
|
||
×{{ item2.quantity ? item2.quantity : "" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order_price">实付款
|
||
<view
|
||
style="
|
||
line-height: 46rpx;
|
||
color: #333;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
"
|
||
>
|
||
<text v-if="item.orderType == 'point'">
|
||
{{ item.bookBuyConfigEntity.realMoney }}
|
||
</text>
|
||
<text v-if="item.orderType != 'point'">
|
||
<text v-if="item.realMoney && item.realMoney > 0">
|
||
￥{{ item.realMoney }}
|
||
</text>
|
||
<text v-if="item.realMoney==0&&item.jfDeduction==0">
|
||
￥0
|
||
</text>
|
||
|
||
<text
|
||
style="margin: 0 4rpx"
|
||
v-if="
|
||
item.realMoney > 0 &&
|
||
item.jfDeduction > 0
|
||
"
|
||
>
|
||
+
|
||
</text>
|
||
</text>
|
||
|
||
<text v-if="item.jfDeduction > 0">{{ item.jfDeduction }} 积分</text>
|
||
</view>
|
||
</view>
|
||
<text class="order_time">下单时间：{{item.createTime}}</text>
|
||
<view class="order_statusbtn">
|
||
<text v-if="item.orderStatus == 0" @click.stop="goPay(item)">继续付款</text>
|
||
<text v-if="item.orderStatus == 3">申请售后</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="null_text" v-else>{{null_text}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from "@/config/requestConfig.js";
|
||
import { mapState, mapMutations } from "vuex";
|
||
import {setPay, setPayAssign, setWXPay} from "@/config/utils";
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
pagination: {
|
||
page: 1, //页码
|
||
limit: 20, //每页显示
|
||
total: 0, //总条数
|
||
},
|
||
null_text: '',
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.getData();
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
},
|
||
methods: {
|
||
//获取数据
|
||
getData() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
})
|
||
var params = {
|
||
userId: this.userInfo.id,
|
||
come: '4',
|
||
orderStatus: '',
|
||
...this.pagination
|
||
}
|
||
this.$http.request({
|
||
url: 'common/buyOrder/commonBuyOrderList',
|
||
method: "POST",
|
||
data: params,
|
||
header: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then(res=> {
|
||
uni.hideLoading();
|
||
if(res.code==0){
|
||
if (res.data.records&&res.data.records.length>0) {
|
||
this.list = res.data.records;
|
||
}else{
|
||
this.list = [];
|
||
this.null_text = '暂无数据';
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//复制
|
||
handleCopy(value, title) {
|
||
this.$commonJS.handleCopy(value, title);
|
||
},
|
||
//跳转
|
||
goToDetail(val){
|
||
uni.navigateTo({
|
||
url: "/pages/order/infor?orderId=" +
|
||
val.orderId +
|
||
"&orderType=" +
|
||
val.orderStatus +
|
||
"&orderSn=" +
|
||
val.orderSn,
|
||
});
|
||
},
|
||
//继续支付
|
||
goPay(payItem) {
|
||
if (payItem.paymentMethod == 2) {
|
||
console.log("阿里支付");
|
||
setPay({
|
||
typePay: "alipay",
|
||
subject: "order",
|
||
totalAmount: payItem.realMoney,
|
||
type: 2,
|
||
relevanceoid: payItem.orderSn,
|
||
customerId: this.userInfo.id,
|
||
},
|
||
(res) => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "支付失败",
|
||
icon: "none"
|
||
});
|
||
}
|
||
}
|
||
);
|
||
} else if (payItem.paymentMethod == 1) {
|
||
console.log("微信支付");
|
||
if (this.isAndorid == false) {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "很抱歉，苹果系统暂不支持微信支付",
|
||
showCancel: false,
|
||
});
|
||
return false;
|
||
} else {
|
||
let data1 = {
|
||
orderSn: payItem.orderSn,
|
||
buyOrderId: null,
|
||
totalAmount: payItem.realMoney,
|
||
};
|
||
setWXPay(data1, (res) => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
});
|
||
} else {
|
||
if (res.data.errMsg.indexOf("User canceled") != -1) {
|
||
uni.showToast({
|
||
title: "用户取消支付",
|
||
icon: "none"
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "支付失败",
|
||
icon: "none"
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
} else if (payItem.paymentMethod == 3) {
|
||
// 苹果充值
|
||
console.log("苹果二次支付");
|
||
if (this.isAndorid) {
|
||
uni.showModal({
|
||
title: "提示",
|
||
showCancel: false,
|
||
content: "很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单",
|
||
});
|
||
} else {
|
||
console.log("进行苹果支付");
|
||
}
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/static/mixin.scss';
|
||
.content{
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.order_block{
|
||
padding-bottom: 20rpx;
|
||
}
|
||
.order_list{
|
||
margin: 20rpx 30rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #fff;
|
||
|
||
|
||
.order_item{
|
||
display: block;
|
||
width: 100%;
|
||
padding: 20rpx 30rpx;
|
||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
.order_orderSn{
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
position: relative;
|
||
|
||
text{
|
||
|
||
}
|
||
}
|
||
|
||
.item_top{
|
||
position: absolute;
|
||
top: 70rpx;
|
||
right: 30rpx;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
color: red;
|
||
}
|
||
.order_infor{
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image{
|
||
width: 85rpx;
|
||
height: 85rpx;
|
||
}
|
||
|
||
text{
|
||
padding-left: 30rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
|
||
span{
|
||
color: red;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.order_time{
|
||
display: block;
|
||
margin-top: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.order_price{
|
||
margin-top: 30rpx;
|
||
line-height: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
font-size: 28rpx;
|
||
|
||
.left{
|
||
padding-left: 10rpx;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.order_statusbtn{
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
right: 30rpx;
|
||
padding: 0 15rpx;
|
||
line-height: 45rpx;
|
||
font-size: 24rpx;
|
||
color: red;
|
||
border: 1px solid red;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.null_text{
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
padding-top: 150rpx;
|
||
}
|
||
.feng {
|
||
background-color: #fafafa;
|
||
margin: 0rpx 22rpx 0 0;
|
||
height: 140rpx;
|
||
width: 140rpx;
|
||
float: left;
|
||
border-radius: 14rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.btns{
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.opbtns{
|
||
font-weight: normal;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.order_infor {
|
||
|
||
.bookinfolist {
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bookinfolist:nth-last-child(1) {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.operation_box {
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
left: 40rpx;
|
||
}
|
||
}
|
||
</style> |