348 lines
9.2 KiB
Vue
348 lines
9.2 KiB
Vue
<template>
|
||
<!-- 我的订单 页面 -->
|
||
<view class="bg_F2F2F2 h-100">
|
||
<PublicTop page_title='我的订单'></PublicTop>
|
||
<!-- 占位 -->
|
||
<view class="place"></view>
|
||
<view class="menu d-flex j-around x-bg-white shadow">
|
||
<view class="" v-for="(item,index) of menu" :key='index' :class="{menu_active:menu_index == index}" @click="choose_menu(index)">{{item.name}}</view>
|
||
</view>
|
||
<view class="place1"></view>
|
||
<view v-if='orderList.length<=0' align="center" class="no_list">
|
||
<image src="../../static/no/u/carno.png" mode="" class="no_list"></image>
|
||
<view class="x_textCenter margin-shu20 x_text_hui">暂无订单</view>
|
||
</view>
|
||
<view class="padding-zy30 bg_F2F2F2">
|
||
<view class="order_list x_margin0auto" v-if='orderList.length>0'>
|
||
<view class="padding-30 order_items margin-shu20 x-bg-white" v-for="(item,index) of orderList" :key='index' @click="dump_details(item.order_id,index)">
|
||
<view class="d-flex j-sb a-center">
|
||
<view class="" style="width:78%;">订单编号</view>
|
||
<!-- // 1货到付款，值2线下支付，值3小程序支付，值4微信支付，值5支付宝支付 -->
|
||
<image src="../../static/shoppingCart/weixin.png" mode="" style="height:32upx; width:32upx;" v-if='item.pay_type==4'></image>
|
||
<image src="../../static/shoppingCart/zhifubao.png" mode="" style="height:32upx; width:32upx;" v-if='item.pay_type==5'></image>
|
||
<image src="../../static/shoppingCart/huo.png" mode="" style="height:32upx; width:32upx;" v-if='item.pay_type==1'></image>
|
||
<image src="../../static/shoppingCart/gong.png" mode="" style="height:32upx; width:32upx;" v-if='item.pay_type==2'></image>
|
||
<view>{{item.order_status_str}}</view>
|
||
</view>
|
||
<view class="d-flex j-sb">
|
||
<view>{{item.order_sn}}</view>
|
||
<view class="x_text_hui">{{item.create_time}}</view>
|
||
</view>
|
||
<view class="list x-bg-white padding-sx30">
|
||
<view class="list_items">
|
||
<view class="items_li d-flex a-center" v-for="(value,key) of item.goods_list" :key="key">
|
||
<view class="d-flex goods_items a-center w-100">
|
||
<view class="box_img">
|
||
<an-image :src="value.app_thumb?value.app_thumb:'https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/imageerror.jpg'" alt="https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/imageerror.jpg"></an-image>
|
||
<!-- <image :src="value.app_thumb?value.app_thumb:'../../static/noimg.png'" mode="" class="h-100 w-100"></image> -->
|
||
</view>
|
||
<view class="goods_txt flex-1 padding-zy30">
|
||
<view class="font-weight">{{value.name}}</view>
|
||
<view class="x_text_hui">{{value.manufacturer_name}}</view>
|
||
<view class="">{{value.spec_desc}} {{value.unit}}</view>
|
||
<view class="d-flex j-sb">
|
||
<view class="x-text-159">￥ {{value.unit_price}}</view>
|
||
<view class="">X {{value.goods_number}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-flex padding-zy30 j-end">
|
||
<text class="x_text_hui">共{{item.total_num}}件,</text>
|
||
<text class="x_text_hei2828 margin-zy20 font-weight">合计:</text>
|
||
<text class="x-text-159">￥ {{item.total_amount}}</text>
|
||
</view>
|
||
<view class="place2"></view>
|
||
<view class="func_btn d-flex j-end">
|
||
<view v-if="item.order_status == 1" style="background-color: #FF8800; border:none;" class="x-text-white look_logistics margin-zy20" @click.stop="dump_pay(item.order_id)">去支付</view>
|
||
<view v-if="item.order_status == 1" class="x_text_hui look_logistics margin-zy20" @click.stop="cancel_pay(item)">取消订单</view>
|
||
<view v-if="item.order_status == 4" class="x_text_hui look_logistics margin-zy20">订单已取消</view>
|
||
<view v-if="item.order_status >= 5" class="x_text_hui look_logistics margin-zy20" @click.stop="dump_express(item.order_id,item.express_sn,item.express_name)">查看物流</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="loading-text">{{loadingText}}</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//
|
||
import PublicTop from '../../components/HeaderTop/PublicTop.vue'
|
||
import order from '../../utils/models/order.js'
|
||
import X_goods from '../../utils/models/goods.js'
|
||
import anImage from '@/components/an-image/an-image'
|
||
export default {
|
||
data() {
|
||
return {
|
||
page:1,
|
||
isScroll:true,
|
||
orderList:[
|
||
|
||
],
|
||
loadingText:"",
|
||
status:'',
|
||
demoStatus:1,
|
||
menu_index: 0, // 菜单当前下标
|
||
// 1 待付款 2代发货 6待收货 3已完成
|
||
menu: [{
|
||
name: '全部'
|
||
}, {
|
||
name: '待付款'
|
||
}, {
|
||
name: '待发货'
|
||
}, {
|
||
name: '待收货'
|
||
}, {
|
||
name: '已完成'
|
||
}]
|
||
}
|
||
},
|
||
components: {
|
||
PublicTop,
|
||
anImage
|
||
},
|
||
onLoad(option) {
|
||
// 1 待付款 2代发货 6待收货 3已完成
|
||
if(option.is_index){
|
||
this.menu_index = option.is_index
|
||
if(this.menu_index==1){
|
||
this.status = 1;
|
||
}
|
||
if(this.menu_index==2){
|
||
this.status = 2;
|
||
}
|
||
if(this.menu_index==3){
|
||
this.status = 6;
|
||
}
|
||
if(this.menu_index==4){
|
||
this.status = 3;
|
||
}
|
||
}
|
||
},
|
||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||
onPullDownRefresh() {
|
||
setTimeout(()=>{
|
||
this.reload();
|
||
uni.stopPullDownRefresh();
|
||
}, 1000);
|
||
},
|
||
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
|
||
onReachBottom(){
|
||
if(!this.isScroll){
|
||
this.loadingText="到底了";
|
||
return false;
|
||
}else{
|
||
this.loadingText="正在加载...";
|
||
setTimeout(() => {
|
||
this.getList();
|
||
}, 500);
|
||
}
|
||
},
|
||
methods: {
|
||
async getList() {
|
||
let parames = {
|
||
page:this.page,
|
||
order_status:this.status
|
||
}
|
||
let data = await order.getList(parames)
|
||
|
||
if(data.data.current_page == data.data.last_page){
|
||
this.isScroll = false
|
||
this.loadingText="到底了";
|
||
}
|
||
for (let i = 0; i < data.data.data.length; i++) {
|
||
this.orderList.push(data.data.data[i])
|
||
}
|
||
this.page++
|
||
this.handleError(data, res => {
|
||
|
||
})
|
||
},
|
||
// 查看物流
|
||
dump_express(id,express_sn,express_name){
|
||
uni.navigateTo({
|
||
url:'../order/express?id='+id+'&express_sn='+express_sn+'&express_name='+express_name
|
||
})
|
||
},
|
||
cancel_pay(item){
|
||
let _this = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认是否取消此订单',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
_this.do_cancel_pay(item)
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 取消订单
|
||
async do_cancel_pay(item){
|
||
let res = await X_goods.x_cancelOrder(item.order_id)
|
||
this.orderList.splice(item,1)
|
||
this.handleError(res, res => {
|
||
|
||
})
|
||
},
|
||
// 去支付
|
||
dump_pay(id){
|
||
// 跳转选择支付页面
|
||
uni.navigateTo({
|
||
url:'../my/pay_type?order_id='+id
|
||
})
|
||
},
|
||
|
||
// 查看订单详情页
|
||
dump_details(id,index){
|
||
uni.navigateTo({
|
||
url:'../order/details?id='+id+'&index='+index
|
||
})
|
||
},
|
||
// 选择菜单
|
||
choose_menu(index) {
|
||
this.menu_index = index;
|
||
this.page = 1
|
||
this.isScroll = true
|
||
this.orderList = []
|
||
this.loadingText="正在加载...";
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
switch(index){
|
||
case 0: {
|
||
this.status = '';
|
||
break;
|
||
}
|
||
case 1: {
|
||
this.status = 1;
|
||
break;
|
||
}
|
||
case 2: {
|
||
this.status = 2;
|
||
break;
|
||
}
|
||
case 3: {
|
||
this.status = 6;
|
||
break;
|
||
}
|
||
case 4: {
|
||
this.status = 3;
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.getList();
|
||
}
|
||
},
|
||
onShow() {
|
||
this.page = 1
|
||
this.isScroll = true
|
||
this.orderList = []
|
||
this.getList()
|
||
},
|
||
created(){
|
||
// this.page = 1
|
||
// this.isScroll = true
|
||
// this.orderList = []
|
||
// this.getList()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.place{
|
||
background-color: #ffffff;
|
||
height: 148upx;
|
||
}
|
||
.place1{
|
||
background-color: #ffffff;
|
||
height: 90upx;
|
||
}
|
||
.place2{
|
||
background-color: #ffffff;
|
||
height: 40upx;
|
||
}
|
||
.loading-text{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 60upx;
|
||
color: #979797;
|
||
font-size: 24upx;
|
||
}
|
||
.menu {
|
||
z-index: 1;
|
||
font-size: 30upx;
|
||
line-height: 90upx;
|
||
width: 100%;
|
||
position:fixed;
|
||
.menu_active {
|
||
border-bottom: 4upx solid #6E67FF;
|
||
color: #6E67FF;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.no_list{
|
||
height:199upx;
|
||
width:395upx;
|
||
}
|
||
.no_list{
|
||
text-align:center;
|
||
margin:23upx auto;
|
||
}
|
||
.order_list {
|
||
height: calc(100% - 238upx);
|
||
|
||
overflow-y: auto;
|
||
.order_items {
|
||
border-radius: 20upx;
|
||
|
||
}
|
||
}
|
||
|
||
.list {
|
||
font-size: 26upx;
|
||
.list_items {
|
||
.box_img {
|
||
height: 153.3upx;
|
||
width: 198upx;
|
||
background-color: #F2F2F2;
|
||
padding: 10upx 20upx;
|
||
margin: 0 10upx;
|
||
}
|
||
|
||
.goods_items {
|
||
.goods_count {
|
||
bottom: -14upx;
|
||
right: 8upx;
|
||
}
|
||
}
|
||
.line {
|
||
height: 4upx;
|
||
background-color: #F2F2F2;
|
||
}
|
||
}
|
||
.look_logistics{
|
||
border-radius: 10upx;
|
||
// width:132upx;
|
||
height:52upx;
|
||
line-height: 52upx;
|
||
width:160upx;
|
||
|
||
// line-height: 45upx;
|
||
text-align: center;
|
||
border:1upx solid #C3C3C3;
|
||
|
||
}
|
||
}
|
||
</style>
|