吆喝
This commit is contained in:
蔡同学
@@ -0,0 +1,356 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user