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.
439 lines
12 KiB
439 lines
12 KiB
<template> |
|
<view class="body-background"></view> |
|
<u-navbar |
|
:title="title" |
|
:auto-back="true" |
|
left-icon-size="40rpx" |
|
:safe-area-inset-top="true" |
|
:placeholder="true" |
|
bgColor="#ffffff" |
|
></u-navbar> |
|
<view class="screen-container"> |
|
<u-tabs |
|
:list="list" |
|
u-sticky |
|
lineWidth="64" |
|
lineHeight="8" |
|
:inactiveStyle="{color:'#AFB5BE'}" |
|
:activeStyle="{color:'#F47210'}" |
|
lineColor="#F47210" |
|
:custom-style="{margin:'auto'}" |
|
:scrollable="false" |
|
@change="tabsChange" |
|
></u-tabs> |
|
<u-tabs |
|
v-if="(tabCheck === 'room')" |
|
:list="listGy" |
|
u-sticky |
|
lineWidth="64" |
|
lineHeight="8" |
|
:inactiveStyle="{color:'#AFB5BE'}" |
|
:activeStyle="{color:'#020B18'}" |
|
lineColor="transparent" |
|
:custom-style="{margin:'auto'}" |
|
:scrollable="false" |
|
@change="tabsGyChange" |
|
></u-tabs > |
|
<u-tabs |
|
v-if="(tabCheck === 'shop')" |
|
:list="listSc" |
|
u-sticky |
|
lineWidth="64" |
|
lineHeight="8" |
|
:inactiveStyle="{color:'#AFB5BE'}" |
|
:activeStyle="{color:'#020B18'}" |
|
lineColor="transparent" |
|
:custom-style="{margin:'auto'}" |
|
:scrollable="false" |
|
@change="tabsScChange" |
|
></u-tabs> |
|
</view> |
|
<view class="lists-group row"> |
|
<view class="lists-container row" v-if="tabCheck === 'shop'"> |
|
<view class="item" v-for="(item,index) in listsSc"> |
|
<view class="item-header row"> |
|
<view class="title">{{ item.create_time }}</view> |
|
<view class="status" :class="getScStatus(item.status).color">{{getScStatus(item.status).name}}</view> |
|
</view> |
|
<view class="item-body row"> |
|
<view class="body-main row"> |
|
<view class="thumb"> |
|
<u-image :src="item.goods_cover" :lazy-load="true" radius="24" width="176" height="176" mode="aspectFill"></u-image> |
|
</view> |
|
<view class="info row col"> |
|
<view class="info-left"> |
|
<view class="info-title">{{item.goods_name}}</view> |
|
</view> |
|
<view class="info-right"> |
|
<view class="info-price">￥{{item.coin_number}}</view> |
|
<view class="info-number">x{{item.goods_number}}</view> |
|
</view> |
|
<view class="info-ext row"> |
|
<view class="label">暖新币</view> |
|
<view class="price">{{item.coin_number}}币</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
<view class="item-footer row"> |
|
<view class="phone"> |
|
<view class="phone-button" @click="callPhone(item.take_phone)"> |
|
<u-icon name="phone-fill" size="45" color="#ffffff"></u-icon> |
|
</view> |
|
</view> |
|
<view class="button-group row col"> |
|
<!-- <view class="button">--> |
|
<!-- <u-button text="查看详情" shape="circle" custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button>--> |
|
<!-- </view>--> |
|
<view class="button"> |
|
<u-button @click="logisticsShow = true" text="查看物流" shape="circle" custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="lists-container row" v-if="tabCheck === 'room'"> |
|
<view class="item" v-for="(item,index) in listsGy"> |
|
<view class="item-header row"> |
|
<view class="title">{{item.create_time}}</view> |
|
<view class="status" :class="getGyStatus(item.status).color">{{getGyStatus(item.status).name}}</view> |
|
</view> |
|
<view class="item-body room row"> |
|
<view class="body-main row"> |
|
<view class="thumb"> |
|
<u-image :src="item.cover" :lazy-load="true" radius="24" width="176" height="176" mode="aspectFill"></u-image> |
|
</view> |
|
<view class="info row col"> |
|
<view class="info-left"> |
|
<view class="info-title">{{item.name}}</view> |
|
<view class="info-desc">{{ item.street }} {{ item.area }}㎡ | 朝{{item.toward}}</view> |
|
</view> |
|
<view class="info-ext row"> |
|
<view class="label">租期{{item.month}}个月</view> |
|
<view class="price">{{item.price}}元/月</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
<view class="item-footer row"> |
|
<view class="phone"> |
|
|
|
</view> |
|
<view class="button-group row col"> |
|
<view class="button"> |
|
<u-button |
|
@click="navTo('/pages/Order/detail?id='+item.id+'&type=detail')" |
|
text="租房详情" |
|
shape="circle" |
|
custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button> |
|
</view> |
|
<view class="button"> |
|
<u-button text="兑换详情" shape="circle" custom-style="height:64rpx;border: 2rpx solid #AFB5BE;padding:0rpx 42rpx;"></u-button> |
|
<!-- <u-button text="我要兑换" shape="circle" custom-style="height:64rpx;border: 2rpx solid #FF9545;padding:0rpx 42rpx; color:#FF9545;"></u-button>--> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
<u-popup closeOnClickOverlay :show="logisticsShow" @close="closeLogistics" @open="open" mode="center" custom-style="width:80%;padding:30rpx;border-radius:20rpx;"> |
|
<uv-steps current="1" direction="column" dot> |
|
<uv-steps-item title="已下单" desc="10:30"> |
|
</uv-steps-item> |
|
<uv-steps-item title="已出库" desc="10:35" ></uv-steps-item> |
|
<uv-steps-item title="运输中" desc="11:40"></uv-steps-item> |
|
</uv-steps> |
|
</u-popup> |
|
|
|
<u-loadmore v-if="(tabCheck==='room')" :status="statusGy" fontSize="28" marginBottom="50" marginTop="30" @loadmore="getRoomOrderList()"/> |
|
<u-loadmore v-if="(tabCheck==='shop')" :status="statusSc" fontSize="28" marginBottom="50" marginTop="30" @loadmore="getGoodsOrderList()"/> |
|
</view> |
|
|
|
|
|
|
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import MzSubsection from '@/components/MzSubsection/Index.vue'; |
|
import api from '@/utils/functions.js'; |
|
import {goodsOrder, roomOrder, tabCount} from "@/api/user"; |
|
|
|
export default { |
|
components: { |
|
MzSubsection |
|
}, |
|
data() { |
|
return { |
|
list: [{ |
|
name: '公寓订单', |
|
id:'room' |
|
}, { |
|
name: '商城订单', |
|
id:'shop' |
|
}], |
|
listGy: [{ |
|
name: '全部', |
|
status:'' |
|
}, { |
|
name: '租赁中', |
|
status:2, |
|
}, { |
|
name: '已完成', |
|
status:4 |
|
}], |
|
listSc: [{ |
|
name: '全部', |
|
status:'' |
|
|
|
}, { |
|
name: '待发货', |
|
status:1, |
|
}, { |
|
name: '待收货', |
|
status:2, |
|
}, { |
|
name: '已完成', |
|
status:3 |
|
}], |
|
tabCheck:'room', |
|
tabGyCheck:'', |
|
tabScCheck:'', |
|
current: 1, |
|
title: '我的订单', |
|
loading: true, |
|
staticImage: { |
|
bg: imghost + '/static/image/BG.png', |
|
newIcon: imghost + '/static/image/new-icon.png', |
|
shopThumb: imghost + '/static/image/new-1.png', |
|
}, |
|
user: { |
|
avatar: imghost + '/static/image/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685, |
|
}, |
|
isTop: false, |
|
listsGy: [], |
|
listsSc: [], |
|
size: { |
|
height: 500, |
|
}, |
|
pagesGy:{ |
|
page:1, |
|
limit:10, |
|
}, |
|
statusGy:'loadmore', |
|
pagesSc:{ |
|
page:1, |
|
limit:10, |
|
}, |
|
statusSc:'loadmore', |
|
logisticsShow:false, |
|
} |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
onReady() { |
|
let that = this; |
|
let height = api.wxSystemInfo().system.windowHeight |
|
let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight |
|
|
|
let info = uni.createSelectorQuery().in(this).select('.foot-button'); |
|
info.boundingClientRect(function (data) { |
|
that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('32rpx'); |
|
}).exec(function (res) { |
|
|
|
}); |
|
}, |
|
computed: { |
|
api() { |
|
return api |
|
}, |
|
sectionStyle() { |
|
const style = {}; |
|
style.padding = '0 26rpx'; |
|
style.position = 'sticky'; |
|
style.zIndex = '9999'; |
|
style.top = api.navHeight().systemBarHeight + 'px' |
|
return style; |
|
}, |
|
}, |
|
methods: { |
|
closeLogistics(){ |
|
this.logisticsShow = false; |
|
}, |
|
getGyStatus(status){ |
|
switch(status){ |
|
case 1: |
|
return {name:'待审核',color:'orange'} |
|
case 2: |
|
return {name:'租赁中',color:'blue'} |
|
case 3: |
|
return {name:'审核失败',color:'red'} |
|
case 4: |
|
return {name:'已完成',color:'green'} |
|
} |
|
}, |
|
getScStatus(status){ |
|
switch(status){ |
|
case 1: |
|
return {name:'待发货',color:'orange'} |
|
case 2: |
|
return {name:'待收货',color:'blue'} |
|
case 3: |
|
return {name:'已完成',color:'green'} |
|
} |
|
}, |
|
chatDetail(item) { |
|
wx.navigateTo({ |
|
url: '/pages/ChatDetail/index?id=' + item.id |
|
}); |
|
}, |
|
checkSection(index) { |
|
this.current = edit; |
|
}, |
|
scrollToLower() { |
|
|
|
}, |
|
tabsChange(e){ |
|
this.tabCheck = e.id |
|
}, |
|
tabsGyChange(e){ |
|
this.tabGyCheck = e.status |
|
this.getRoomOrderList(true); |
|
}, |
|
tabsScChange(e){ |
|
this.tabScCheck = e.status |
|
this.getGoodsOrderList(true); |
|
}, |
|
callPhone(phone){ |
|
uni.makePhoneCall({ |
|
phoneNumber: phone.toString() |
|
}); |
|
}, |
|
getRoomOrderList(clear = false){ |
|
if(clear){ |
|
this.statusGy = 'loadmore' |
|
this.pagesGy = { |
|
page:1, |
|
limit:10 |
|
} |
|
this.listsGy = []; |
|
} |
|
if(this.statusGy === 'nomore'){ |
|
return false; |
|
} |
|
this.statusGy = 'loading'; |
|
let data = this.pagesGy; |
|
if(this.tabGyCheck){ |
|
data.status = this.tabGyCheck; |
|
} |
|
roomOrder(data).then(res => { |
|
if(res.data.length === 0){ |
|
this.statusGy = 'nomore'; |
|
}else{ |
|
this.statusGy = 'loadmore'; |
|
} |
|
this.listsGy = this.listsGy.concat(res.data); |
|
}); |
|
this.pagesGy.page++; |
|
}, |
|
getGoodsOrderList(clear = false){ |
|
if(clear){ |
|
this.statusSc = 'loadmore' |
|
this.pagesSc = { |
|
page:1, |
|
limit:10 |
|
} |
|
this.listsSc = []; |
|
} |
|
if(this.statusSc === 'nomore'){ |
|
return false; |
|
} |
|
this.statusSc = 'loading'; |
|
let data = this.pagesSc; |
|
if(this.tabScCheck){ |
|
data.status = this.tabScCheck; |
|
} |
|
goodsOrder(data).then(res => { |
|
if(res.data.length === 0){ |
|
this.statusSc = 'nomore'; |
|
}else{ |
|
this.statusSc = 'loadmore'; |
|
} |
|
this.listsSc = this.listsSc.concat(res.data); |
|
}); |
|
this.pagesSc.page++; |
|
}, |
|
getTabCount(){ |
|
tabCount({type:'house'}).then(res => { |
|
this.listGy.forEach(item => { |
|
res.data.forEach(row => { |
|
if(item.status === row.type){ |
|
item.badge = { |
|
bgColor:'#FF9545', |
|
color:'#3D3D3D', |
|
} |
|
item.badge.value = row.count; |
|
} |
|
}) |
|
}) |
|
}) |
|
tabCount({type:'goods'}).then(res => { |
|
this.listSc.forEach(item => { |
|
res.data.forEach(row => { |
|
if(item.status === row.type){ |
|
item.badge = { |
|
bgColor:'#FF9545', |
|
color:'#3D3D3D', |
|
} |
|
item.badge.value = row.count; |
|
} |
|
}) |
|
}) |
|
}) |
|
}, |
|
navTo(url){ |
|
wx.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
}, |
|
onReachBottom() { |
|
if(this.tabCheck === 'room'){ |
|
this.getRoomOrderList(); |
|
}else{ |
|
this.getGoodsOrderList(); |
|
} |
|
}, |
|
onPageScroll(res) { |
|
if (res.scrollTop <= 20) { |
|
uni.$emit('isTop', true); |
|
} else { |
|
uni.$emit('isTop', false); |
|
} |
|
}, |
|
mounted() { |
|
this.getRoomOrderList(); |
|
this.getGoodsOrderList(); |
|
this.getTabCount(); |
|
}, |
|
created() { |
|
// this.pagePadding = (api.navHeight().navPaddingTop + |
|
// api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
::v-deep .u-tabs__wrapper__nav__line{ |
|
left:24rpx; |
|
} |
|
@import './components/order.scss'; |
|
</style> |