356 lines
8.4 KiB
Vue
356 lines
8.4 KiB
Vue
<template>
|
||
<view class="pagesContent">
|
||
<view class="navBack">
|
||
<uni-icons class="backIcon" type="left" size="24" color="#333333" @click="navBack"></uni-icons>
|
||
我的订单
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="typeTab">
|
||
<view :class="['typeItem',{'typeCheck':typeCheck==-1}]" @click="changeType(-1)">全部</view>
|
||
<view :class="['typeItem',{'typeCheck':typeCheck==0}]" @click="changeType(0)">待付款</view>
|
||
<view :class="['typeItem',{'typeCheck':typeCheck==1}]" @click="changeType(1)">待发货</view>
|
||
<view :class="['typeItem',{'typeCheck':typeCheck==2}]" @click="changeType(2)">待收货</view>
|
||
<view :class="['typeItem',{'typeCheck':typeCheck==3}]" @click="changeType(3)">已完成</view>
|
||
<!-- <view :class="['typeItem',{'typeCheck':typeCheck==4}]" @click="changeType(4)">已取消</view>
|
||
<view :class="['typeItem',{'typeCheck':typeCheck==5}]" @click="changeType(5)">已退款</view> -->
|
||
</view>
|
||
|
||
<view class="myList">
|
||
<view class="lineItem" v-for="(item,index) in listData" :key="item.id">
|
||
<view class="lineInfo box">
|
||
<view class="lineName">
|
||
<view class="ft12 ftw500 cl-999">下单时间:{{item.addtime}}</view>
|
||
<view class="ft12 ftw500 " style="color: #EF1857;" v-if="item.status == 0">待付款</view>
|
||
<view class="ft12 ftw500 cl-333" v-else-if="item.status == 1">待发货</view>
|
||
<view class="ft12 ftw500 cl-333" v-else-if="item.status == 2">待收货</view>
|
||
<view class="ft12 ftw500 cl-999" v-else-if="item.status == 3">已完成</view>
|
||
<view class="ft12 ftw500 cl-999" v-else-if="item.status == 4">已取消</view>
|
||
<view class="ft12 ftw500 cl-999" v-else-if="item.status == 5">已退款</view>
|
||
</view>
|
||
<view class="lineDescribe flex">
|
||
<image style="width: 176rpx;height: 176rpx;border-radius: 14rpx;" :src="item.cimage"
|
||
mode="">
|
||
</image>
|
||
<view class="ml10 flex"
|
||
style="width: 456rpx; flex-direction: column;justify-content: space-around">
|
||
<view class="text-over2 ftw500 cl-333" style="font-size: 30rpx;">{{item.goods_name}}
|
||
</view>
|
||
<view class="flex alcenter" style="justify-content: space-between">
|
||
<view class="" style="color: #EF1857;">
|
||
<text class="ftw500 cl-333" style="font-size: 24rpx;">实付款:</text>
|
||
<text class="ft20 ftw500">{{item.total_price}}</text>
|
||
<text class="ft14 ftw500" style="margin-left: 12rpx;">积分</text>
|
||
</view>
|
||
<view class="clE075" @click="goOrder(item,index)" v-if="item.status == 0">去付款</view>
|
||
<view class="clfff" @click="clickexchange" v-else-if="item.status == 1">联系客服</view>
|
||
<view class="clfff" @click="goOrder(item,index)" v-else-if="item.status == 2">查看订单
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-load-more :status="status" :content-text="contentText" />
|
||
</view>
|
||
<uni-popup type="center" ref="pointsyes">
|
||
<view class="pointsyesbox">
|
||
<view class="ft16" style="margin-top: 30rpx;">
|
||
<text>客服电话：</text>
|
||
<text>{{serviceInfo.service_mobile}}</text>
|
||
<image style="width: 28rpx;height: 28rpx;padding-left: 14rpx;"
|
||
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/copy.png" mode="" @click="copy(serviceInfo.service_mobile)">
|
||
</image>
|
||
</view>
|
||
<view class="button" style="margin-top: 92rpx;padding: 20rpx 0;" @click="navorder">确定</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
remark: "",
|
||
typeCheck: -1,
|
||
listData: [],
|
||
pages: {
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
allPage: 1,
|
||
},
|
||
status: 'more',
|
||
contentText: {
|
||
contentdown: "上拉显示更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
serviceInfo: {}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.status = 'more';
|
||
this.changeType(-1)
|
||
this.getserviceInfo()
|
||
},
|
||
onReachBottom() {
|
||
if (this.pages.currentPage <= this.pages.allPage) {
|
||
this.getorder()
|
||
this.status = 'more';
|
||
}
|
||
},
|
||
methods: {
|
||
navBack() {
|
||
uni.navigateBack(1);
|
||
},
|
||
//切换
|
||
changeType(item) {
|
||
this.pages.currentPage = 1
|
||
this.pages.allPage = 1
|
||
this.typeCheck = item
|
||
this.getorder()
|
||
},
|
||
getorder() {
|
||
this.status = 'loading';
|
||
this.$httpRequest({
|
||
url: '/api/delivery/order/list',
|
||
methods: "POST",
|
||
data: {
|
||
page: this.pages.currentPage,
|
||
limit: this.pages.pageSize,
|
||
status: this.typeCheck
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.status = ''
|
||
if (this.pages.currentPage == 1) {
|
||
this.listData = res.data.list;
|
||
this.pages.allPage = Math.ceil(res.data.total / this.pages.pageSize);
|
||
} else if (res.data.list.length > 0) {
|
||
this.listData.push(...res.data.list)
|
||
console.log(this.listData);
|
||
} else {
|
||
this.status = 'noMore';
|
||
this.pages.isNextPage = 1;
|
||
}
|
||
this.pages.currentPage++;
|
||
}
|
||
}).catch(err => {
|
||
this.status = '';
|
||
})
|
||
},
|
||
|
||
getserviceInfo() { //app信息拿取电话
|
||
this.$httpRequest({
|
||
url: "/api/user/serviceInfo",
|
||
method: "GET"
|
||
}).then(res => {
|
||
|
||
this.serviceInfo = res.data;
|
||
console.log(this.serviceInfo);
|
||
})
|
||
},
|
||
|
||
goOrder(item, index) {
|
||
console.log(item, index);
|
||
uni.navigateTo({ //订单
|
||
url: '/pagesA/integral/completeorder?id=' + this.listData[index].order_id
|
||
})
|
||
},
|
||
|
||
clickexchange() {
|
||
this.$refs.pointsyes.open()
|
||
},
|
||
copy(value) {
|
||
uni.setClipboardData({
|
||
data: value, //要被复制的内容
|
||
});
|
||
},
|
||
navorder() {
|
||
this.$refs.pointsyes.close()
|
||
},
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.pagesContent {
|
||
background: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/order_bg.png);
|
||
padding-top: 58rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: 750rpx 356rpx;
|
||
background-color: #Ffffff;
|
||
min-height: 100vh;
|
||
|
||
}
|
||
|
||
.navBack {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.backIcon {
|
||
position: absolute;
|
||
left: 16rpx;
|
||
top: 0rpx;
|
||
}
|
||
|
||
.content {
|
||
padding: 0 26rpx;
|
||
/* background-color: #Ffffff; */
|
||
}
|
||
|
||
.typeTab {
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
|
||
}
|
||
|
||
.typeItem {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.typeCheck {
|
||
color: #333333;
|
||
position: relative;
|
||
}
|
||
|
||
.typeCheck:before {
|
||
content: ' ';
|
||
position: absolute;
|
||
width: 48rpx;
|
||
height: 4rpx;
|
||
background-color: #333333;
|
||
bottom: -8rpx;
|
||
left: calc(50% - 30rpx);
|
||
}
|
||
|
||
|
||
.lineImg {
|
||
width: 192rpx;
|
||
height: 240rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.lineName {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 2rpx solid #F7F8F9;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.lineDescribe {
|
||
padding: 20rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
|
||
}
|
||
|
||
.lineNum {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #EF1857;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.lineItem {
|
||
display: flex;
|
||
padding-bottom: 24rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.noListData {
|
||
position: absolute;
|
||
top: 40vh;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 0;
|
||
}
|
||
|
||
.noImg {
|
||
width: 314rpx;
|
||
height: 228rpx;
|
||
}
|
||
|
||
.noText {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.24);
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.lineInfo {
|
||
height: 300rpx;
|
||
}
|
||
|
||
.clE075 {
|
||
width: 148rpx;
|
||
height: 60rpx;
|
||
background: linear-gradient(123deg, #00E075 0%, #09D89E 100%);
|
||
border-radius: 30rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.clfff {
|
||
width: 148rpx;
|
||
height: 60rpx;
|
||
border: 2rpx solid #D8D8D8;
|
||
border-radius: 30rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.pointsyesbox {
|
||
width: 500rpx;
|
||
height: 300rpx;
|
||
background-color: #fff;
|
||
border-radius: 24rpx;
|
||
text-align: center;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.button {
|
||
height: 80rpx;
|
||
width: 312rpx;
|
||
background: linear-gradient(123deg, #00E075 0%, #09D89E 100%);
|
||
border-radius: 40rpx;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
}
|
||
</style> |