|
|
|
@ -1,82 +1,80 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
|
|
|
|
<navbar |
|
|
|
title="订单中心" |
|
|
|
/> |
|
|
|
|
|
|
|
<uv-tabs :list="tabs" |
|
|
|
:activeStyle="{color : '#FD5100', fontWeight : 600}" |
|
|
|
lineColor="#FD5100" |
|
|
|
lineHeight="8rpx" |
|
|
|
lineWidth="50rpx" |
|
|
|
@click="clickTabs"></uv-tabs> |
|
|
|
<view class="header"> |
|
|
|
<view class="tab-container"> |
|
|
|
<view class="tab active">阅读</view> |
|
|
|
<view class="tab">作品</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<view v-if="orderList.length > 0" class="list"> |
|
|
|
<view class="item" |
|
|
|
v-for="(item, index) in orderList.records" |
|
|
|
@click="toOrderDetail(item.id)" |
|
|
|
:key="index"> |
|
|
|
|
|
|
|
<view class="top"> |
|
|
|
<view class="service"> |
|
|
|
<text>{{item.projectId_dictText}}</text> |
|
|
|
<text>{{item.type_dictText}}</text> |
|
|
|
</view> |
|
|
|
<view class="status"> |
|
|
|
<text> {{item.state_dictText}}</text> |
|
|
|
</view> |
|
|
|
<view class="novel-grid"> |
|
|
|
<!-- 第一行小说 --> |
|
|
|
<view class="novel-row"> |
|
|
|
<!-- 小说1 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('1')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> |
|
|
|
<view class="novel-title">我是半妖</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
|
|
<view class="left"> |
|
|
|
<image mode="aspectFill" :src="item.image"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="right"> |
|
|
|
<view class="text-hidden-1"> |
|
|
|
客户姓名：{{item.name}} |
|
|
|
</view> |
|
|
|
<view class="text-hidden-1"> |
|
|
|
产品规格：{{item.unit}} |
|
|
|
</view> |
|
|
|
<view class="text-hidden-1"> |
|
|
|
租赁地址：{{item.address}} |
|
|
|
</view> |
|
|
|
<!-- <view class="text-hidden-1"> |
|
|
|
总计时间：{{item.useTime}}分钟 |
|
|
|
</view> --> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 小说2 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('2')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> |
|
|
|
<view class="novel-title">兽王进化：从被小萝莉召唤开始</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="bottom"> |
|
|
|
<view class="price"> |
|
|
|
总价格：<text class="num">{{item.money}}元</text> |
|
|
|
</view> |
|
|
|
<view class="b1"> |
|
|
|
查看物流 |
|
|
|
</view> |
|
|
|
<!-- <view @click.stop="toPayOrder(item)" class="b2" v-if="item.state == 0"> |
|
|
|
立即付款 |
|
|
|
</view> |
|
|
|
<view class="b1" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 3"> |
|
|
|
再来一单 |
|
|
|
</view> |
|
|
|
<view class="b2" @click.stop="toEvaluate(item.id,item.projectId,item.technicianId)" v-if="item.state == 3"> |
|
|
|
立即评价 |
|
|
|
</view> |
|
|
|
<view class="b2" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 4"> |
|
|
|
再来一单 |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<!-- 小说3 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('3')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> |
|
|
|
<view class="novel-title">魔法少女纯爷们</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 第二行小说 --> |
|
|
|
<view class="novel-row"> |
|
|
|
<!-- 小说4 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('4')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain"></image> |
|
|
|
<view class="novel-title">我是一条小青龙</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 小说5 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('5')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain"></image> |
|
|
|
<view class="novel-title">女帝：别闹，朕怀孕了！</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 小说6 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('6')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> |
|
|
|
<view class="novel-title">中国式应酬——应酬是门技术活</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 第三行小说 --> |
|
|
|
<view class="novel-row"> |
|
|
|
<!-- 小说7 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('7')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> |
|
|
|
<view class="novel-title">苏世民：我的经验与教训</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 小说8 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('8')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> |
|
|
|
<view class="novel-title">认知觉醒：开启自我改变的原动力</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 小说9 --> |
|
|
|
<view class="novel-item" @click="toNovelDetail('9')"> |
|
|
|
<image class="novel-cover" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain" mode="aspectFill"></image> |
|
|
|
<view class="novel-title">纳瓦尔宝典</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<tabber select="order"/> |
|
|
|
<tabber select="book"/> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -92,170 +90,137 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tabs: [{ |
|
|
|
name: '全部' |
|
|
|
novels: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
title: '我是半妖', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
title: '兽王进化：从被小萝莉召唤开始', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '租赁押金' |
|
|
|
id: '3', |
|
|
|
title: '魔法少女纯爷们', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '水洗租赁' |
|
|
|
id: '4', |
|
|
|
title: '我是一条小青龙', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '破损换货' |
|
|
|
id: '5', |
|
|
|
title: '女帝：别闹，朕怀孕了！', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '退货退款' |
|
|
|
id: '6', |
|
|
|
title: '中国式应酬——应酬是门技术活', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '7', |
|
|
|
title: '苏世民：我的经验与教训', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '8', |
|
|
|
title: '认知觉醒：开启自我改变的原动力', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '9', |
|
|
|
title: '纳瓦尔宝典', |
|
|
|
cover: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain' |
|
|
|
} |
|
|
|
], |
|
|
|
queryParams: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10 |
|
|
|
}, |
|
|
|
// orderList: [ |
|
|
|
// { |
|
|
|
// money : 99.99, |
|
|
|
// address : '广东省广州市越秀区城南故事C3栋2802', |
|
|
|
// name : '李**', |
|
|
|
// phone : '150*****091', |
|
|
|
// unit : '120*40*75【桌子尺寸】', |
|
|
|
// image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', |
|
|
|
// state_dictText : '已完成', |
|
|
|
// } |
|
|
|
// ], //订单列表数据 |
|
|
|
orderList : { |
|
|
|
records : [], |
|
|
|
total : 0, |
|
|
|
}, |
|
|
|
state : -1, |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.orderPage() |
|
|
|
}, |
|
|
|
//滚动到屏幕底部 |
|
|
|
onReachBottom() { |
|
|
|
if(this.queryParams.pageSize < this.orderList.total){ |
|
|
|
this.queryParams.pageSize += 10 |
|
|
|
this.orderPage() |
|
|
|
} |
|
|
|
// 页面显示时的逻辑 |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
orderPage(){ |
|
|
|
let queryParams = { |
|
|
|
...this.queryParams, |
|
|
|
} |
|
|
|
if(this.state != -1){ |
|
|
|
queryParams.state = this.state |
|
|
|
} |
|
|
|
this.$api('orderPage', queryParams, res => { |
|
|
|
if(res.code == 200){ |
|
|
|
this.orderList = res.result |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
//点击tab栏 |
|
|
|
clickTabs(index) { |
|
|
|
if (index == 0) { |
|
|
|
this.state = -1; |
|
|
|
} else { |
|
|
|
this.state = index - 1; |
|
|
|
} |
|
|
|
this.queryParams.pageSize = 10 |
|
|
|
this.orderPage() |
|
|
|
}, |
|
|
|
//跳转订单详情页面 |
|
|
|
toOrderDetail(id) { |
|
|
|
// 跳转到小说详情页 |
|
|
|
toNovelDetail(id) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages_order/order/orderDetail?id=' + id |
|
|
|
url: '/pages_order/novel/novelDetail?id=' + id |
|
|
|
}) |
|
|
|
}, |
|
|
|
getOrderList(){ |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page{ |
|
|
|
.page { |
|
|
|
background-color: #ffffff; |
|
|
|
min-height: 100vh; |
|
|
|
} |
|
|
|
.list { |
|
|
|
.item { |
|
|
|
width: calc(100% - 40rpx); |
|
|
|
background-color: #fff; |
|
|
|
margin: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
border-radius: 16rpx; |
|
|
|
padding: 30rpx; |
|
|
|
|
|
|
|
.top { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
font-size: 30rpx; |
|
|
|
|
|
|
|
.service {} |
|
|
|
|
|
|
|
.status { |
|
|
|
font-size: 26rpx; |
|
|
|
font-weight: 600; |
|
|
|
.header { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
padding: 20rpx 30rpx; |
|
|
|
|
|
|
|
.tab-container { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 34rpx; |
|
|
|
|
|
|
|
.tab { |
|
|
|
margin-right: 30rpx; |
|
|
|
color: #999; |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: #000; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 36rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
display: flex; |
|
|
|
margin: 10rpx 0; |
|
|
|
|
|
|
|
.left { |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
width: calc(100% - 160rpx); |
|
|
|
color: #777; |
|
|
|
font-size: 24rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
background-color: #F8F8F8; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.icons { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.icon { |
|
|
|
margin-right: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 25rpx; |
|
|
|
.price { |
|
|
|
font-weight: 900; |
|
|
|
text { |
|
|
|
color: #ff780099; |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.b1 { |
|
|
|
border: 1px solid #777; |
|
|
|
color: #777; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.b2 { |
|
|
|
background: linear-gradient(178deg, #4FD3BC, #60C285); |
|
|
|
color: #fff; |
|
|
|
.novel-grid { |
|
|
|
padding: 10rpx 30rpx; |
|
|
|
|
|
|
|
.novel-row { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
|
|
|
|
.novel-item { |
|
|
|
width: 31%; |
|
|
|
|
|
|
|
.novel-cover { |
|
|
|
width: 100%; |
|
|
|
height: 240rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); |
|
|
|
} |
|
|
|
|
|
|
|
view { |
|
|
|
margin: 12rpx; |
|
|
|
border-radius: 28rpx; |
|
|
|
padding: 8rpx 28rpx; |
|
|
|
margin-bottom: 0; |
|
|
|
|
|
|
|
.novel-title { |
|
|
|
font-size: 24rpx; |
|
|
|
margin-top: 16rpx; |
|
|
|
line-height: 1.4; |
|
|
|
height: 64rpx; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
