1
This commit is contained in:
@fawn-nine
312
pages/bookShop/orderList.vue
Normal file
312
pages/bookShop/orderList.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user