提交
This commit is contained in:
liuyuan
324
pages/order/index.vue
Normal file
324
pages/order/index.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<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_price">实付款
|
||||
<view class="left">
|
||||
<text v-if="item.realMoney && item.realMoney > 0">
|
||||
￥{{ item.realMoney }}
|
||||
</text>
|
||||
<text v-if="item.realMoney==0&&item.jfDeduction==0">
|
||||
￥0
|
||||
</text>
|
||||
|
||||
<text v-if="item.realMoney > 0 && item.jfDeduction > 0">
|
||||
+
|
||||
</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() {
|
||||
this.getData();
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
getData() {
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
var params = {
|
||||
userId: this.userInfo.id,
|
||||
come: '4',
|
||||
orderStatus: 3,
|
||||
...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: 75rpx;
|
||||
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: #999;
|
||||
border: 1px solid #999;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.null_text{
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
padding-top: 150rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user