|
@@ -0,0 +1,414 @@
|
|
|
+<template>
|
|
|
+ <view class="pagesCons">
|
|
|
+ <view class="tab-body">
|
|
|
+ <view class="uTabs">
|
|
|
+ <u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false"
|
|
|
+ swiperWidth="750"></u-tabs-swiper>
|
|
|
+ </view>
|
|
|
+ <swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
|
|
|
+ <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
|
|
|
+ <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
|
|
|
+ <view class="check-order-list" v-if="index==current" v-for="(item,sindex) in list" :key="item.id+'-'+sindex"
|
|
|
+ @click="viewRow(item)">
|
|
|
+ <view class="order-log">
|
|
|
+ <view>
|
|
|
+ 快递公司:<text class="address-title">{{item.logName}}</text>
|
|
|
+ <u-button class="btn-cont" @click="copyLogNum" style="float: right;" type="primary" shape="circle" size="mini">确认收货</u-button>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text>运单编号:</text>
|
|
|
+ <text>{{item.logNum}}</text>
|
|
|
+ <u-button @click="copyLogNum" style="margin-left: 20upx;" shape="square" size="mini">复制</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-gap height="10" bg-color="#f8f8f8"></u-gap>
|
|
|
+ <view class="bundle-list" v-for="row in item.itemList" :key="row.id">
|
|
|
+ <view class="img-cont">
|
|
|
+ <image :src="row.icon?row.icon:'../../static/tabbar/user.png'"></image>
|
|
|
+ </view>
|
|
|
+ <view >
|
|
|
+ <view class="ellipsis-two">{{row.name}}</view>
|
|
|
+ <view class="bundle-num">
|
|
|
+ <view ><b class="price-num">{{row.price}}</b> <text class="price-text">乐豆</text></view>
|
|
|
+ <view >X {{row.number}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-empty style="padding-top: 10vh;height: auto;" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'"
|
|
|
+ mode="list"></u-empty>
|
|
|
+ <view v-if="index==current" style="padding: 20upx;">
|
|
|
+ <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <!-- 查看物流弹窗 -->
|
|
|
+ <view>
|
|
|
+ <u-modal v-model="isShow" :show-title="false" confirm-text="好的">
|
|
|
+ <view class="slot-content">
|
|
|
+ <view>
|
|
|
+ 快递公司:{{logData.logName}}
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ 运单编号:{{logData.logNum}}
|
|
|
+ <u-button @click="copyLogNum" style="margin-left: 20upx;" shape="square" size="mini">复制</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getLookUpDatas,
|
|
|
+ listLookUp
|
|
|
+ } from '@/api/data'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShow: false, // 是否显示物流弹框
|
|
|
+ status: 'loadmore',
|
|
|
+ noDataText: '暂无数据',
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
+ dispName: '包裹1',
|
|
|
+ typeId: 1,
|
|
|
+ queryLabel: 'DZF' // tab参数
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dispName: '包裹2',
|
|
|
+ typeId: 3,
|
|
|
+ queryLabel: 'DFH' // tab参数
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dispName: '待发货',
|
|
|
+ typeId: 3,
|
|
|
+ queryLabel: 'YFH' // tab参数
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ current: 0,
|
|
|
+ swiperCurrent: 0,
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ list: [],
|
|
|
+ logData: { // 物流信息
|
|
|
+ logName: '韵达快递',
|
|
|
+ logNum: 12356544544
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ action: 'swiperChange', // 操作类型,上划分页,或左右滑动
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 监听待办处理后刷新
|
|
|
+ uni.$on('refreshBl-handle', this.handleRefresh)
|
|
|
+ this.pageInit()
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ uni.$off('refreshBL', this.refresh)
|
|
|
+ uni.$off('refreshBl-handle', this.handleRefresh)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ pageInit() {
|
|
|
+ this.sortIndex = 1
|
|
|
+ this.pageNo = 1
|
|
|
+ this.getRow()
|
|
|
+ },
|
|
|
+ handleRefresh() {
|
|
|
+ this.getRow()
|
|
|
+ },
|
|
|
+ // tabs通知swiper切换
|
|
|
+ tabsChange(index) {
|
|
|
+ this.swiperCurrent = index;
|
|
|
+ },
|
|
|
+ swiperChange(event) {
|
|
|
+ this.action = 'swiperChange'
|
|
|
+ this.status = 'loading'
|
|
|
+ },
|
|
|
+ // swiper-item左右移动,通知tabs的滑块跟随移动
|
|
|
+ transition(e) {
|
|
|
+ let dx = e.detail.dx;
|
|
|
+ this.$refs.uTabs.setDx(dx);
|
|
|
+ },
|
|
|
+ // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
|
|
|
+ // swiper滑动结束,分别设置tabs和swiper的状态
|
|
|
+ animationfinish(e) {
|
|
|
+ let current = e.detail.current;
|
|
|
+ let isCurtab = this.current == current
|
|
|
+ if (this.status != "nomore") {
|
|
|
+ let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
|
|
|
+ if (loadData) {
|
|
|
+ this.$refs.uTabs.setFinishCurrent(current);
|
|
|
+ this.swiperCurrent = current;
|
|
|
+ this.current = current;
|
|
|
+ this.resetPage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // scroll-view到底部加载更多
|
|
|
+ onreachBottom() {
|
|
|
+ this.action = 'onreachBottom'
|
|
|
+ if (this.list.length < this.total) {
|
|
|
+ this.pageNo += 1
|
|
|
+ this.getRow()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '已经到底了',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ this.status = "nomore"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询列表
|
|
|
+ getRow(pageNo) {
|
|
|
+ this.status = "loadmore"
|
|
|
+ this.list = [{
|
|
|
+ createDate: "2020-10-28 11:15:59",
|
|
|
+ orderFlag: "待支付",
|
|
|
+ payedAmount: 0,
|
|
|
+ id: 11,
|
|
|
+ amount: 450,
|
|
|
+ totalNum: 3,
|
|
|
+ logName: '韵达快递',
|
|
|
+ logNum: '12454545485',
|
|
|
+ itemList: [
|
|
|
+ {
|
|
|
+ name: "八九箭冠",
|
|
|
+ id: 76435,
|
|
|
+ number: 1,
|
|
|
+ price: 150,
|
|
|
+ icon: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "数据库的合法身份觉得很附近发生纠纷解决",
|
|
|
+ id: 76436,
|
|
|
+ number: 2,
|
|
|
+ price: 150,
|
|
|
+ icon: ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ return
|
|
|
+ if (pageNo) {
|
|
|
+ this.pageNo = pageNo
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ queryLabel: this.tabList[this.current].queryLabel, // tab分类
|
|
|
+ }
|
|
|
+ this.status = "loading"
|
|
|
+ getBackLogList(params).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ if (this.pageNo > 1) {
|
|
|
+ this.list = this.list.concat(res.data.list || [])
|
|
|
+ } else {
|
|
|
+ this.list = res.data.list || []
|
|
|
+ }
|
|
|
+ this.total = res.data.count || 0
|
|
|
+ } else {
|
|
|
+ this.list = []
|
|
|
+ this.total = 0
|
|
|
+ this.noDataText = res.message
|
|
|
+ }
|
|
|
+ this.status = "loadmore"
|
|
|
+ })
|
|
|
+ },
|
|
|
+ resetPage() {
|
|
|
+ this.status = 'loading';
|
|
|
+ // 上划分页
|
|
|
+ if (this.action == 'onreachBottom') {
|
|
|
+ this.getRow();
|
|
|
+ }
|
|
|
+ // 左右切换tab
|
|
|
+ if (this.action == 'swiperChange') {
|
|
|
+ this.list = [];
|
|
|
+ this.getRow(1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取查询参数 刷新列表
|
|
|
+ refresh(params) {
|
|
|
+ // console.log(params,'1111111111')
|
|
|
+ this.searchParams = params
|
|
|
+ this.getRow(1)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 复制运单编号
|
|
|
+ copyLogNum () {
|
|
|
+ // H5 不支持
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: this.logData.logNum,
|
|
|
+ success: function(res) {
|
|
|
+ uni.getClipboardData({
|
|
|
+ success: function(res) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '已复制到剪贴板'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 详细页
|
|
|
+ viewRow(item) {
|
|
|
+ // if (!this.$hasPermissions('M_backlog_detail_mobile')) {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // 已完成的
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/order/orderDetail?id=" + item.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: #F8F8F8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagesCons {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: #F8F8F8;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .text-right {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-body {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .uTabs {
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ box-shadow: 1px 1px 3px #eeeeee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-list {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 列表样式
|
|
|
+ .check-order-list {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 10upx 20upx;
|
|
|
+ margin: 25upx;
|
|
|
+ border-radius: 6upx;
|
|
|
+ box-shadow: 1px 1px 3px #EEEEEE;
|
|
|
+ font-size: 28upx;
|
|
|
+ .check-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20upx 10upx;
|
|
|
+
|
|
|
+ .icon-xian {
|
|
|
+ text-align: right;
|
|
|
+ width: 40upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-bottom: 1px dashed #F8F8F8;
|
|
|
+
|
|
|
+ .createDate {
|
|
|
+ color: #666;
|
|
|
+ font-size: 26upx;
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-top: 1px dashed #F8F8F8;
|
|
|
+ }
|
|
|
+
|
|
|
+ >view {
|
|
|
+ &:first-child {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 订单中商品列表
|
|
|
+ .bundle-list {
|
|
|
+ display: flex;
|
|
|
+ padding: 20upx 10upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ border-bottom: 1px solid #F8F8F8;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .img-cont {
|
|
|
+ width: 160upx;
|
|
|
+ height: 160upx;
|
|
|
+ >image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >view {
|
|
|
+ &:last-child {
|
|
|
+ padding: 10upx 0;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 20upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bundle-num {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-cont {
|
|
|
+ width: 180upx;
|
|
|
+ height: 60upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ }
|
|
|
+ .price-text{
|
|
|
+ font-size: 20upx;
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ .price-num{
|
|
|
+ font-size: 32upx;
|
|
|
+ }
|
|
|
+ .total-text{
|
|
|
+ margin-right: 50upx;
|
|
|
+ }
|
|
|
+ .money-total{
|
|
|
+ margin-right: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 物流弹窗
|
|
|
+ .order-log {
|
|
|
+ padding: 20upx ;
|
|
|
+ font-size: 28upx;
|
|
|
+ >view{
|
|
|
+ line-height: 60upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|