|
@@ -0,0 +1,278 @@
|
|
|
+<template>
|
|
|
+ <view class="pages">
|
|
|
+ <u-navbar
|
|
|
+ title="我的订单"
|
|
|
+ :autoBack="true"
|
|
|
+ :safeAreaInsetTop="true"
|
|
|
+ >
|
|
|
+ </u-navbar>
|
|
|
+ <view class="tabs-wrap">
|
|
|
+ <u-tabs
|
|
|
+ :list="tabsList"
|
|
|
+ lineColor="#00A447"
|
|
|
+ :current="tabsCurrent"
|
|
|
+ :activeStyle="{color:'#333','font-weight': '600','font-size':'30rpx'}"
|
|
|
+ :inactiveStyle="{color:'#999'}"
|
|
|
+ @click="tabsClick"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="page-wrap">
|
|
|
+ <mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
|
|
|
+ <view class="order">
|
|
|
+ <view v-for="(item,index) in orderListWithClass" class="order-item"
|
|
|
+ :class="item.class"
|
|
|
+ @click="goOrderDetails(item.id)" :key="item.id">
|
|
|
+ <view class="top u-flex u-row-between">
|
|
|
+ <text>订单号:887784332234423</text>
|
|
|
+ <text class="status">{{item.status|filterOrderState}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="center u-flex u-row-between">
|
|
|
+ <view class="left u-flex">
|
|
|
+ <u--image :showLoading="true" :src="item.mainImg" width="128rpx" height="128rpx"></u--image>
|
|
|
+ <view class="text">
|
|
|
+ <view class="name ellipsis-2">goodsName{{item.goodsName}}</view>
|
|
|
+ <view class="specification ellipsis-1">规格:{{item.specification}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|
|
+ <text class="price red">¥ <text class="price-num">{{item.price||'1600'}}</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom u-flex u-row-between">
|
|
|
+ <view class="left">更多</view>
|
|
|
+ <view class="right u-flex">
|
|
|
+ <view
|
|
|
+ class="btn"
|
|
|
+ :class="btn.class"
|
|
|
+ @click.stop="clickEven(btn.fun)"
|
|
|
+ v-for="(btn,index) in statusBtn[item.status]" :key="index">
|
|
|
+ {{btn.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </mescroll-body>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // 引入mescroll-mixins.js
|
|
|
+ import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
+ export default {
|
|
|
+ mixins: [MescrollMixin], // 使用mixin
|
|
|
+ components:{
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabsCurrent:1,
|
|
|
+ tabsList:[
|
|
|
+ {name:'全部',status:'',},
|
|
|
+ {name:'待付款',status:'0',},
|
|
|
+ {name:'待收货',status:'2'},
|
|
|
+ {name:'待评价',status:'3'},
|
|
|
+ {name:'退款/售后',status:'7'}
|
|
|
+ ],
|
|
|
+ status:'',
|
|
|
+ dataList:[{status:0},{status:1},{status:2},{status:3},{status:4}],
|
|
|
+ statusBtn:{
|
|
|
+ 0:[{name:'取消订单',fun:'cancel ',class:''},{name:'去支付',fun:'pay',class:'red'}],
|
|
|
+ 1:[{name:'申请退款',fun:'refund',class:'green'}],
|
|
|
+ 2:[{name:'查看物流',fun:'logistics',class:''},{name:'确认收货',fun:'confirmReceipt',class:'green'}],
|
|
|
+ 3:[{name:'查看物流',fun:'logistics',class:''},{name:'评价',fun:'evaluate',class:'green'}],
|
|
|
+ // 4:[{name:'查看物流',fun:'logistics',class:''},{name:'评价',fun:'evaluate',class:'green'}],
|
|
|
+ 5:[{name:'查看退款',fun:'viewRefund',class:'green'}],
|
|
|
+ // 6:[{name:'查看退款',fun:'viewRefund',class:'green'}],
|
|
|
+ // 7:[{name:'查看退款',fun:'viewRefund',class:'green'}]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ orderListWithClass() {
|
|
|
+ return this.dataList.map(order => {
|
|
|
+ return {
|
|
|
+ ...order,
|
|
|
+ class: {
|
|
|
+ 1: 'status-1',
|
|
|
+ 2: 'status-2',
|
|
|
+ 3: 'status-3',
|
|
|
+ 4: 'status-4',
|
|
|
+ 5: 'status-5',
|
|
|
+ 6: 'status-6',
|
|
|
+ 7: 'status-7',
|
|
|
+ 8: 'status-8'
|
|
|
+ }[order.status] || ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(page) {
|
|
|
+ console.log('page',page);
|
|
|
+ this.tabsCurrent = page.current || 0;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
|
|
|
+ downCallback(){
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },
|
|
|
+ /*上拉加载的回调*/
|
|
|
+ upCallback(page) {
|
|
|
+ return
|
|
|
+ // 此处可以继续请求其他接口
|
|
|
+ // if(page.num == 1){
|
|
|
+ // // 请求其他接口...
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 如果希望先请求其他接口,再触发upCallback,可参考以下写法
|
|
|
+ // if(!this.hasTypeId){
|
|
|
+ // this.shopNewsType();
|
|
|
+ // return // 此处return,先获取xx
|
|
|
+ // }
|
|
|
+
|
|
|
+ let pageNum = page.num; // 页码, 默认从1开始
|
|
|
+ let pageSize = page.size; // 页长, 默认每页10条
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ pageNum : page.num,
|
|
|
+ pageSize : page.size,
|
|
|
+ status : this.tabsList[this.tabsCurrent].status,
|
|
|
+ }
|
|
|
+ // console.log('this.params',params);
|
|
|
+ this.$u.api.orderList(params).then(data => {
|
|
|
+ console.log('data',JSON.parse(JSON.stringify(data)));
|
|
|
+ // 接口返回的当前页数据列表 (数组)
|
|
|
+ let curPageData = data.data.rows;
|
|
|
+ // console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
|
|
|
+ // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
+ let curPageLen = curPageData.length;
|
|
|
+ // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
+ // let totalPage = data.data.data.totalPage;
|
|
|
+ // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
+ let totalSize = data.data.total;
|
|
|
+ // 接口返回的是否有下一页 (true/false)
|
|
|
+ // let hasNext = data.xxx;
|
|
|
+ // console.log('totalPage',totalPage,'curPageLen',curPageLen);
|
|
|
+ //设置列表数据
|
|
|
+ if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
|
|
|
+ this.dataList = this.dataList.concat(curPageData); //追加新数据
|
|
|
+ // 请求成功,隐藏加载状态
|
|
|
+ //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
|
+ // this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
+ //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
|
|
+ this.mescroll.endBySize(curPageLen, totalSize);
|
|
|
+ }).catch(err => {
|
|
|
+ this.mescroll.endErr()
|
|
|
+ console.log(err)
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ /*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
|
|
|
+ reloadList() {
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },
|
|
|
+ tabsClick(item){
|
|
|
+ this.status = item.status;
|
|
|
+ this.reloadList()
|
|
|
+ // console.log('item',item);
|
|
|
+ },
|
|
|
+ goOrderDetails(id){
|
|
|
+ uni.$u.route('/shopping/orderdetails', {
|
|
|
+ id: id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pay(){
|
|
|
+ console.log('pay');
|
|
|
+ },
|
|
|
+ clickEven(fun){
|
|
|
+ // console.log('fun',fun);
|
|
|
+ let funObj = {
|
|
|
+ 'pay': this.pay
|
|
|
+ };
|
|
|
+ if (fun in funObj) {
|
|
|
+ funObj[fun]();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+page{
|
|
|
+ background-color: #F5F5F5;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.tabs-wrap{
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+.list-item{
|
|
|
+ overflow: hidden;
|
|
|
+ width: 48%;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ .image-wrap{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.order-item{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ .top{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ border-bottom: 0.5px solid #eee;
|
|
|
+ .status{font-size: 24rpx;}
|
|
|
+ }
|
|
|
+ .center{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ border-bottom: 0.5px solid #eee;
|
|
|
+ .text{
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .specification{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ text-align: right;
|
|
|
+ /deep/.u-icon{
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ font-size: 24rpx;
|
|
|
+ .left{color: #333;}
|
|
|
+ .right{
|
|
|
+ .btn{
|
|
|
+ padding: 12rpx 20rpx;
|
|
|
+ border: 1px solid #333;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ &.red{border-color: #FF3C3F;}
|
|
|
+ &.green{color: #00A447;border-color: #00A447;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.status-0{.status{color:#FF3C3F;}}
|
|
|
+ &.status-1{.status{color:#FF3C3F;}}
|
|
|
+ &.status-2{.status{color:#0099EB;}}
|
|
|
+ &.status-3{.status{color:#00A447;}}
|
|
|
+ &.status-4{.status{color:#FF3C3F;}}
|
|
|
+ &.status-5{.status{color:#FF3C3F;}}
|
|
|
+ &.status-6{.status{color:#FF3C3F;}}
|
|
|
+ &.status-7{.status{color:#FFB100;}}
|
|
|
+}
|
|
|
+</style>
|