You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
593 lines
17 KiB
593 lines
17 KiB
<template>
|
|
<view>
|
|
<lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="在线商城订单" @changeHeight="e => nav_height = e"></lf-nav>
|
|
<view class="lf-row-between lf-bg-white" style="padding: 0 32rpx;">
|
|
<view class="online-tab" :class="online_tab==0?'online-active':''" @click="changeTab(0)">线上订单</view>
|
|
<view class="online-tab" :class="online_tab==1?'online-active':''" @click="changeTab(1)">线下订单</view>
|
|
</view>
|
|
<view v-if="online_tab == 0">
|
|
<view class="special_tab">
|
|
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
|
|
</view>
|
|
<view class="lf-p-30 lf-flex lf-w-100 lf-bg-white lf-m-b-30">
|
|
<!-- <u-icon name="search" class="search-icon"></u-icon>
|
|
<input class="rom-search" type="text" placeholder="请输入商品名称" /> -->
|
|
<u-search placeholder="请输入商品名称" bg-color="#F4F8F8" :show-action="false" style="width: 100%;"></u-search>
|
|
</view>
|
|
<swiper :style="{height: autoHeight, width: '750rpx'}" :current="current" @change="swiperChange">
|
|
<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
|
|
<scroll-view :style="{height: autoHeight}" class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
|
|
|
|
<view v-for="(item2,index2) of tabItem.list" :key="index2" class="online-card" @click="$url('/pages/order/newdetail/newdetail?order_id='+item2.order_no)">
|
|
<view class="lf-font-24 lf-color-777">
|
|
订单编号{{item2.order_no}}
|
|
</view>
|
|
<view class="lf-m-t-30">
|
|
<text class="lf-iconfont icon-Group- lf-font-28"></text>
|
|
<text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">{{item2.from}}</text>
|
|
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
|
|
</view>
|
|
<view v-for="(i,index3) of item2.items" :key="index3">
|
|
<view class="lf-m-t-30" style="display: flex;">
|
|
<image class="content-img" :src="i.item_meta.image" mode="aspectFill"></image>
|
|
<view class="lf-m-l-15">
|
|
<view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">{{i.item_name}}</view>
|
|
<view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between">
|
|
<view>{{i.item_meta.specs_text}}</view>
|
|
<view class="lf-font-32 lf-color-price">￥{{item2.items_total_yuan}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-row-between lf-m-t-30 lf-m-b-50">
|
|
<view class="lf-font-24 lf-color-777">{{item2.status_text}}</view>
|
|
<!-- <view class="lf-color-price lf-font-24">删除订单</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loading-more lf-m-b-10">
|
|
<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text>
|
|
<lf-nocontent v-else></lf-nocontent>
|
|
<!-- <view>
|
|
{{tabItem.list.length}}
|
|
</view> -->
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view v-else>
|
|
<!-- <view class="special_tab">
|
|
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
|
|
</view> -->
|
|
<scroll-view :style="{height: autoHeightTwo}" class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
|
|
|
|
<view class="item" v-for="(item, index) in list" :key="index">
|
|
<view class="lf-row-between">
|
|
<text class="lf-font-36 lf-color-black lf-font-bold lf-color-price">{{item.balance.balance}}</text>
|
|
<text class="lf-font-24 lf-color-555">{{item.balance.note}}</text>
|
|
</view>
|
|
<view class="lf-row-between lf-m-t-20">
|
|
<text class="lf-font-24 lf-color-555">¥{{item.balance.current}}</text>
|
|
<text class="lf-font-24 lf-color-777">{{item.created_at}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loading-more lf-m-b-10">
|
|
<text :class="{'loading-more-text': loadingClass}" v-if="list.length">{{loadingText}}</text>
|
|
<lf-nocontent v-else></lf-nocontent>
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
online_tab: 0,
|
|
tab_list: [
|
|
{
|
|
id: 1,
|
|
name: '全部',
|
|
type: '',
|
|
list: [],
|
|
isRefresher: false,
|
|
loadingClass: false,
|
|
loadingText: '正在加载中',
|
|
page: 1,
|
|
isPage: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '待付款',
|
|
type: 1,
|
|
list: [],
|
|
isRefresher: false,
|
|
loadingClass: true,
|
|
loadingText: '正在加载中',
|
|
page: 1,
|
|
isPage: true
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '待发货',
|
|
type: 2,
|
|
list: [],
|
|
isRefresher: false,
|
|
loadingClass: true,
|
|
loadingText: '正在加载中',
|
|
page: 1,
|
|
isPage: true
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '待收货',
|
|
type: 3,
|
|
list: [],
|
|
isRefresher: false,
|
|
loadingClass: true,
|
|
loadingText: '正在加载中',
|
|
page: 1,
|
|
isPage: true
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '已完成',
|
|
type: 4,
|
|
list: [],
|
|
isRefresher: false,
|
|
loadingClass: true,
|
|
loadingText: '正在加载中',
|
|
page: 1,
|
|
isPage: true
|
|
}
|
|
],
|
|
list: [],
|
|
current: 0,
|
|
windowHeight: 0,
|
|
loadingClass: false,
|
|
loadingText: '没有更多数据啦~',
|
|
scrollH: '',
|
|
nav_height: '',
|
|
isRefresher: false,
|
|
page: 1
|
|
}
|
|
},
|
|
computed: {
|
|
autoHeight(){
|
|
return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx - 120rpx - 120rpx)`;
|
|
},
|
|
autoHeightTwo(){
|
|
return `calc(${this.scrollH}px - ${this.nav_height}px - 90rpx)`;
|
|
}
|
|
},
|
|
onLoad(){
|
|
let info = uni.getSystemInfoSync();
|
|
this.scrollH = info.screenHeight;
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
changeTab(index) {
|
|
this.online_tab = index
|
|
if(this.online_tab == 0) {
|
|
this.getData();
|
|
}else {
|
|
this.getUploadList();
|
|
}
|
|
},
|
|
getUploadList(options={}) {
|
|
this.$http
|
|
.post({
|
|
api: 'api/offline/order',
|
|
data:{
|
|
page:this.page
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.status) {
|
|
let isPage = res.data.per_page == 15?true:false;
|
|
this.isPage = isPage;
|
|
if(!isPage) {
|
|
this.loadingClass = false;
|
|
this.loadingText = '没有更多数据啦~';
|
|
}
|
|
if(options.type == 'pageRefresh') {
|
|
uni.stopPullDownRefresh();
|
|
}else if(options.type == 'scrollRefresh') {
|
|
this.isRefresher = false;
|
|
}
|
|
if(this.page == 1) {
|
|
this.list = res.data.data.data;
|
|
}else {
|
|
this.list.push(...res.data.data.data);
|
|
}
|
|
console.log('数组列表',this.list)
|
|
} else {
|
|
wx.showModal({
|
|
content: res.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
tabChange(index){
|
|
this.current = index;
|
|
this.getData();
|
|
},
|
|
getData(options ={}) {
|
|
let tab_item = this.tab_list[this.current];
|
|
console.log('=====adada===',tab_item)
|
|
this.$http
|
|
.get({
|
|
api: 'api/order/list',
|
|
data:{
|
|
status: tab_item.type,
|
|
page: tab_item.page,
|
|
type: 0,
|
|
channel: ''
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.status) {
|
|
let isPage = tab_item.page < res.data.meta.pagination.total_pages?true:false;
|
|
tab_item.isPage = isPage;
|
|
if(!isPage) {
|
|
tab_item.loadingClass = false;
|
|
tab_item.loadingText = '没有更多数据啦~';
|
|
}
|
|
if(options.type == 'pageRefresh') {
|
|
uni.stopPullDownRefresh();
|
|
}else if(options.type == 'scrollRefresh') {
|
|
tab_item.isRefresher = false;
|
|
}
|
|
if(tab_item.page == 1) {
|
|
tab_item.list = res.data.data;
|
|
}else {
|
|
tab_item.list.push(...res.data.data);
|
|
}
|
|
console.log('数组列表',tab_item.list)
|
|
} else {
|
|
wx.showModal({
|
|
content: res.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
// 滑块下标值变化
|
|
swiperChange(event){
|
|
this.current = event.detail.current;
|
|
if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
|
|
this.getData();
|
|
},
|
|
// 页面触底，加载下一页
|
|
onScrolltolower(){
|
|
let tab_item = this.tab_list[this.current];
|
|
if(tab_item.isPage){
|
|
tab_item.page = tab_item.page + 1;
|
|
this.getData();
|
|
}
|
|
if(this.isPage) {
|
|
this.page = this.page + 1;
|
|
this.getUploadList()
|
|
}
|
|
},
|
|
// scroll-view 下拉刷新
|
|
onRefresherrefresh(){
|
|
this.$u.throttle(() => {
|
|
this.refreshFn({type: 'scrollRefresh'});
|
|
}, 200);
|
|
},
|
|
// 下拉刷新处理
|
|
refreshFn(options){
|
|
let tab_item = this.tab_list[this.current];
|
|
tab_item.page = 1;
|
|
tab_item.isPage = true;
|
|
tab_item.loadingClass = true;
|
|
tab_item.list = [];
|
|
tab_item.isRefresher = true;
|
|
tab_item.loadingText = '正在加载中';
|
|
this.getData(options);
|
|
this.page = 1;
|
|
this.isPage = true;
|
|
this.loadingClass = true;
|
|
this.list = [];
|
|
this.isRefresher = true;
|
|
this.loadingText = '正在加载中';
|
|
this.getUploadList(options);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F8F8F8;
|
|
}
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
.content-img {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
.online-card {
|
|
width: 686rpx;
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
padding: 30rpx;
|
|
}
|
|
.online-tab {
|
|
width: 375rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #555555;
|
|
font-size: 32rpx;
|
|
}
|
|
.online-active {
|
|
background: #15716E;
|
|
color: #FFFFFF;
|
|
border-radius: 45rpx 45rpx 0rpx 0rpx;
|
|
}
|
|
//tab相关
|
|
|
|
.search-icon {
|
|
position: relative;
|
|
bottom: 0;
|
|
left: 54rpx;
|
|
}
|
|
/deep/.input-placeholder{
|
|
color: #777;
|
|
font-size: 28rpx;
|
|
}
|
|
.rom-search {
|
|
width: 686rpx;
|
|
height: 60rpx;
|
|
background: #F4F8F8;
|
|
border-radius: 30rpx;
|
|
padding-left: 74rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.goods-rom {
|
|
border-radius: 20rpx;
|
|
width: 333rpx;
|
|
height: 497rpx;
|
|
background-color: white;
|
|
box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
&:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
&:nth-child(n + 3) {
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.introduct {
|
|
padding: 0 0 30rpx 32rpx;
|
|
}
|
|
.com{
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 28rpx;
|
|
}
|
|
.shop-head {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
position: relative;
|
|
}
|
|
.shop-flex {
|
|
display: flex;
|
|
padding: 30rpx;
|
|
}
|
|
.shop-title {
|
|
width: 686rpx;
|
|
height: 274rpx;
|
|
border-radius: 20rpx;
|
|
background-color: white;
|
|
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: -32rpx;
|
|
}
|
|
.shop-img {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
.shop-function {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
font-size: 40rpx;
|
|
}
|
|
.function-total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 65rpx 0 65rpx;
|
|
}
|
|
|
|
.item{
|
|
width: 686rpx;
|
|
height: max-content;
|
|
background: #F4F8F8;
|
|
border-radius: 10rpx;
|
|
// margin-bottom: 30rpx;
|
|
margin-top: 30rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
line-height: 1;
|
|
}
|
|
|
|
/deep/.u-scroll-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
|
|
background-color: #15716E!important;
|
|
width: 80rpx!important;
|
|
position: absolute;
|
|
height: 10rpx;
|
|
left: 0;
|
|
border-radius: 8rpx 8rpx 0px 0px!important;
|
|
bottom: -12rpx;
|
|
}
|
|
|
|
/deep/ .u-tab-item {
|
|
font-size: 28rpx!important;
|
|
}
|
|
|
|
|
|
//价格筛选伪类
|
|
// /deep/.special_tab .u-tab-item:nth-child(4n) ::after{
|
|
// font-size: 48rpx!important;
|
|
// content: '';
|
|
|
|
// color: red;
|
|
// }
|
|
|
|
// loading加载
|
|
.loading-more {
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
.loading-more-text::before {
|
|
content: '';
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
|
|
animation: weuiLoading 1s steps(12, end) infinite;
|
|
background-repeat: no-repeat;
|
|
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
|
|
background-size: 100%;
|
|
}
|
|
@keyframes weuiLoading {
|
|
0% {
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
100% {
|
|
transform: rotate3d(0, 0, 1, 360deg);
|
|
}
|
|
}
|
|
|
|
|
|
.list-warter {
|
|
border-radius: 20rpx;
|
|
margin: 10px 5px;
|
|
margin-top: 0px;
|
|
background-color: #ffffff;
|
|
// padding: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.u-close {
|
|
position: absolute;
|
|
top: 32rpx;
|
|
right: 32rpx;
|
|
}
|
|
|
|
.list-image {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.list-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: $u-main-color;
|
|
}
|
|
|
|
.list-label{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: rgba(0,0,0,0.5);
|
|
width: 140rpx;
|
|
height: 48rpx;
|
|
border-radius: 20rpx 0rpx 0rpx 0rpx;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.list-tag {
|
|
display: flex;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.list-tag-owner {
|
|
background-color: $u-type-error;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4rpx 14rpx;
|
|
border-radius: 50rpx;
|
|
font-size: 20rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.list-tag-text {
|
|
border: 1px solid $u-type-primary;
|
|
color: $u-type-primary;
|
|
margin-left: 10px;
|
|
border-radius: 50rpx;
|
|
line-height: 1;
|
|
padding: 4rpx 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 50rpx;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.list-price {
|
|
font-size: 30rpx;
|
|
color: $u-type-error;
|
|
margin-top: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
</style>
|