313 lines
6.8 KiB
Vue
313 lines
6.8 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<z-nav-bar title="我的订单"></z-nav-bar>
|
||
|
||
<view class="orderTabs">
|
||
<view v-for="(item,index) in orderTabs" @click="orderTabCLi(item.value)"
|
||
:class="orderListTab==item.value?'ordStyle':''">{{item.name}}</view>
|
||
</view>
|
||
|
||
<view class="orderList">
|
||
<view class="orderItem" v-for="(ifex,inten) in orderList">
|
||
<view class="orderState" v-if="ifex.orderStatus==0">待支付</view>
|
||
<view class="orderState" v-if="ifex.orderStatus==1">待发货</view>
|
||
<view class="orderState" v-if="ifex.orderStatus==2">待收货</view>
|
||
<view class="orderState" v-if="ifex.orderStatus==3">已完成</view>
|
||
<view class="orderContent" :key="index" v-if="ifex.orderType=='order'"
|
||
v-for="(item,index) in ifex.products" @click="goOrdiCont(ifex)">
|
||
<image :src="item.image" mode=""></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle">
|
||
<text>{{item.productName}}</text>
|
||
</view>
|
||
<view class="orderPrice">
|
||
￥<text style="font-weight: bold;">{{item.productPrice}}</text><br>
|
||
<text style="color: #bbbbbb;font-size: 20rpx;margin-right: 10rpx;">X</text>
|
||
<text style="color: #bbbbbb;">{{item.quantity}}</text>
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<view class="orderContent" v-if="ifex.orderType=='point'" @click="goOrdiCont(ifex)">
|
||
<image src="../../static/icon/oder_chong.png" mode="" style="height: 150rpx;"></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle">
|
||
<text>花生币充值</text>
|
||
</view>
|
||
<view class="orderPrice">
|
||
￥<text style="font-weight: bold;">{{ifex.realMoney}}</text>
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<view class="orderContent" v-if="ifex.orderType=='vip'" @click="goOrdiCont(ifex)">
|
||
<image src="../../static/icon/oder_vip.png" mode="" style="height: 150rpx;"></image>
|
||
<view class="itemJian">
|
||
<view class="orderTitle">
|
||
<text>会员充值</text>
|
||
</view>
|
||
<view class="orderPrice">
|
||
￥<text style="font-weight: bold;">{{ifex.realMoney}}</text>
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<br clear="both">
|
||
</view>
|
||
<view class="orderReal">
|
||
<span style="color: #666; float: left; font-size: 12px;">下单时间：{{ifex.createTime}}</span>
|
||
<span style="color: #666;margin-right: 10rpx;">实付款 : </span>
|
||
<span>￥</span>{{ifex.realMoney}}
|
||
</view>
|
||
<view class="orderOper" v-if="ifex.orderStatus==0">
|
||
<view class="opFix" @click="canceOrder(ifex)">取消订单</view>
|
||
<view class="opCan" @click="goPay(ifex)">去支付</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from '@/config/requestConfig.js';
|
||
import {
|
||
setPay,
|
||
setPayAssign
|
||
} from '@/config/utils';
|
||
import {
|
||
mapState
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderTabs: [{
|
||
name: '全部',
|
||
value: 9
|
||
}, {
|
||
name: '待支付',
|
||
value: 0
|
||
}, {
|
||
name: '待发货',
|
||
value: 1
|
||
}, {
|
||
name: '待收货',
|
||
value: 2
|
||
}, {
|
||
name: '已完成',
|
||
value: 3
|
||
}],
|
||
orderListTab: 9,
|
||
orderList: [],
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getOrderList()
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo']),
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.getOrderList()
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
methods: {
|
||
// 切换订单状态
|
||
orderTabCLi(e) {
|
||
this.orderListTab = e
|
||
this.getOrderList()
|
||
},
|
||
|
||
// 获取订单列表
|
||
getOrderList() {
|
||
this.$http
|
||
.post(`book/buyorder/appUserGetlist?userId=${this.userInfo.id}&orderStatus=${this.orderListTab}`)
|
||
.then(res => {
|
||
this.orderList = res.page.list
|
||
})
|
||
},
|
||
|
||
// 订单详情
|
||
goOrdiCont(e) {
|
||
uni.navigateTo({
|
||
url: './orderLCont?orderId=' + e.orderId + '&orderType=' + e.orderStatus
|
||
});
|
||
},
|
||
|
||
// 取消订单
|
||
canceOrder(e) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要取消订单吗？',
|
||
confirmText: "取消订单",
|
||
cancelText: "考虑一下",
|
||
confirmColor: '#c96713',
|
||
cancelColor: '#555',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
this.$http
|
||
.post(`book/buyorder/appDelete?orderId=${e.orderId}`)
|
||
.then(res => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '取消订单成功'
|
||
})
|
||
this.getOrderList()
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 支付
|
||
goPay(payItem) {
|
||
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",
|
||
image: '../../static/icon/ic_close.png'
|
||
});
|
||
}
|
||
this.getOrderList()
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
|
||
.orderTabs {
|
||
margin: 70rpx 0 0 0;
|
||
width: 100%;
|
||
padding: 0 3% 3% 3%;
|
||
position: fixed;
|
||
top: 80rpx;
|
||
background-color: #f7faf9;
|
||
z-index: 100;
|
||
|
||
view {
|
||
display: inline-block;
|
||
padding: 0 0 20rpx 0;
|
||
margin: 40rpx 0 15rpx 0;
|
||
width: 20%;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.ordStyle {
|
||
border-bottom: 5rpx solid #54a966;
|
||
color: #54a966;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.orderList {
|
||
padding: 20rpx;
|
||
margin-top: 130rpx;
|
||
|
||
.orderItem {
|
||
padding: 30rpx 10rpx 30rpx 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.orderState {
|
||
|
||
text-align: right;
|
||
font-size: 30rpx;
|
||
margin: 0 20rpx 30rpx 0;
|
||
font-weight: bold;
|
||
color: #d70808;
|
||
}
|
||
|
||
.orderContent {
|
||
margin-bottom: 20rpx;
|
||
|
||
image {
|
||
width: 150rpx;
|
||
height: 180rpx;
|
||
margin-right: 20rpx;
|
||
float: left;
|
||
}
|
||
|
||
.itemJian {
|
||
float: left;
|
||
width: 470rpx;
|
||
|
||
.orderTitle {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
margin: 0 0 20rpx 0;
|
||
float: left;
|
||
width: 410rpx;
|
||
}
|
||
|
||
.orderPrice {
|
||
font-size: 28rpx;
|
||
float: right;
|
||
width: 60rpx;
|
||
text-align: right;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.orderReal {
|
||
border-top: 1px solid #eee;
|
||
text-align: right;
|
||
font-size: 30rpx;
|
||
margin: 30rpx 20rpx 0 0;
|
||
padding: 30rpx 0 0 0;
|
||
}
|
||
|
||
.orderOper {
|
||
text-align: right;
|
||
margin: 30rpx 20rpx 0 0;
|
||
|
||
view {
|
||
margin-left: 20rpx;
|
||
padding: 10rpx 0;
|
||
display: inline-block;
|
||
width: 150rpx;
|
||
font-size: 25rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.opFix {
|
||
color: #555;
|
||
border: 1px solid #ddd;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.opCan {
|
||
color: #c96713;
|
||
border: 1px solid #eba00b;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|