395 lines
9.1 KiB
Vue
395 lines
9.1 KiB
Vue
<!-- 已购买 -->
|
|
<template>
|
|
<view class="page-container">
|
|
<view class="search-container-fixed" style="background-color: white;">
|
|
<view class="search-box">
|
|
<icon class="mr-10" type="search" size="20"></icon>
|
|
<input type="text" @confirm="doSearch" class="search-input" @input="inputKeywords"
|
|
:value="pageData.keywords" placeholder="请输入软著名称" />
|
|
<view @click="doSearch">搜索</view>
|
|
</view>
|
|
</view>
|
|
<view class="container-box">
|
|
<ContainerLoading :loadingVisible="loadingState" @refresh="doRefreshList" style="min-height: 80vh;">
|
|
<view style="display: flex;flex-direction: column;width: 100%;" v-if="goodsList.length>0">
|
|
<view class="list-container">
|
|
<block v-for="(item,index) in goodsList" :key="index">
|
|
<view class="list-item" @click="goDetail" :data-value="item"
|
|
v-if="item.goodsDTO && item.goodsDTO != null">
|
|
<view class="item-img-box">
|
|
<image :src="item.goodsDTO.preImg" mode="scaleToFill" class="item-img"></image>
|
|
<view v-if="item.waitCorrectionCount>0" class="count-tag">
|
|
{{item.waitCorrectionCount}}
|
|
</view>
|
|
</view>
|
|
<view class="item-container">
|
|
<view class="item-goods-name-box">
|
|
<view :class="['item-goods-status',goodsOrderColor(item.orderStatus)]">
|
|
{{goodsOrderStatus(item.orderStatus)}}
|
|
</view>
|
|
<view class="item-goods-name">{{item.goodsDTO.goodsName}}</view>
|
|
</view>
|
|
<view class="item-price-box">
|
|
<view class="item-price-title">订单价格</view>
|
|
<rich-text class="item-price-price"
|
|
:nodes="moneyTxt(12,16,item.payMoney)"></rich-text>
|
|
</view>
|
|
<view class="item-time-box">
|
|
<view class="item-time-item">
|
|
<view class="item-time-title">下单时间</view>
|
|
<view class="item-time-time">{{item.createTime}}</view>
|
|
</view>
|
|
<view class="item-time-item">
|
|
<view class="item-time-title">付款时间</view>
|
|
<view class="item-time-time">{{item.payTime==''? '未付款':item.payTime}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<uni-load-more :status="hasMore"></uni-load-more>
|
|
</view>
|
|
</ContainerLoading>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Shop from '@/common/js/net/shop.js'
|
|
import {
|
|
sImgPrefix
|
|
}
|
|
from '@/common/js/net/mainUrl.js'
|
|
import ContainerLoading from '../../../components/container-loading.vue';
|
|
import {
|
|
goodsOrderColor,
|
|
goodsOrderStatus,
|
|
moneyTxt
|
|
} from '@/common/js/conver.js'
|
|
export default {
|
|
components: {
|
|
ContainerLoading
|
|
},
|
|
setup() {},
|
|
data() {
|
|
return {
|
|
pageData: {
|
|
page: 1,
|
|
rows: 10,
|
|
keywords: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
orderStatus: ''
|
|
},
|
|
msgShow: false,
|
|
msgHint: '',
|
|
msgType: 'error',
|
|
loadingState: 'loading',
|
|
listRefreshTrig: false,
|
|
isLoadMore: false,
|
|
hasMore: 'more',
|
|
goodsList: [],
|
|
needRefresh: false
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: "已购买",
|
|
});
|
|
uni.setNavigationBarColor({
|
|
frontColor: "#000000",
|
|
backgroundColor: "#FFFFFF",
|
|
animation: {
|
|
duration: 500,
|
|
timingFunc: "easeIn",
|
|
},
|
|
});
|
|
this.doRefreshList()
|
|
},
|
|
onShow() {
|
|
if (this.needRefresh) {
|
|
this.needRefresh = false
|
|
this.doRefreshList()
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.doRefreshList()
|
|
},
|
|
onReachBottom() {
|
|
this.doLoadMore()
|
|
},
|
|
methods: {
|
|
goodsOrderColor,
|
|
goodsOrderStatus,
|
|
moneyTxt,
|
|
inputKeywords(e) {
|
|
this.pageData.keywords = e.detail.value
|
|
},
|
|
doSearch() {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0
|
|
})
|
|
setTimeout(() => {
|
|
this.doRefreshList()
|
|
}, 300)
|
|
},
|
|
doRefreshList() {
|
|
this.listRefreshTrig = true
|
|
this.loadingState = 'loading'
|
|
this.hasMore = 'more'
|
|
this.isLoadMore = false
|
|
this.pageData.page = 1
|
|
this.doGetMineOrders(true)
|
|
},
|
|
doLoadMore() {
|
|
//判断是否正在加载中 与是否存在更多数据
|
|
if (this.isLoadMore || this.hasMore == 'noMore') {
|
|
return
|
|
}
|
|
this.isLoadMore = true
|
|
this.pageData.page = ++this.pageData.page
|
|
this.doGetMineOrders(false)
|
|
},
|
|
//获取列表
|
|
doGetMineOrders(isRefresh) {
|
|
const _self = this
|
|
this.goodsList = isRefresh ? [] : this.goodsList
|
|
this.loadingState = isRefresh ? 'loading' : ''
|
|
Shop.doGetMineOrders(_self.pageData)
|
|
.then(res => {
|
|
console.log(res)
|
|
uni.stopPullDownRefresh()
|
|
var status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
|
|
const list = _self.addPrefixToPreviewImgs(res.rows)
|
|
_self.loadingState = isRefresh ? status : ''
|
|
_self.goodsList = _self.goodsList.concat(list)
|
|
_self.listRefreshTrig = false
|
|
_self.isLoadMore = false
|
|
_self.hasMore = _self.goodsList.length < res.total ? 'more' : 'noMore'
|
|
})
|
|
.catch(err => {
|
|
console.log('错误', err)
|
|
uni.stopPullDownRefresh()
|
|
this.loadingState = 'error'
|
|
this.listRefreshTrig = false
|
|
this.isLoadMore = false
|
|
this.hasMore = 'more'
|
|
})
|
|
},
|
|
//为数据中图片添加前缀
|
|
addPrefixToPreviewImgs(data) {
|
|
const prefix = sImgPrefix
|
|
return data.map(item => {
|
|
if (item.goodsDTO && item.goodsDTO != null && item.goodsDTO.goodsPhoto != '') {
|
|
item.goodsDTO.preImg = prefix + item.goodsDTO.goodsPhoto
|
|
}
|
|
return item;
|
|
});
|
|
},
|
|
//跳转详情
|
|
goDetail(e) {
|
|
const goods = e.currentTarget.dataset.value
|
|
uni.navigateTo({
|
|
url: '/pages/shop/orderDetail/orderDetail?orderId=' + goods.orderId + '&kind=buy',
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-container-fixed {
|
|
position: fixed;
|
|
/* #ifdef MP-BAIDU */
|
|
top: 0rpx;
|
|
/* #endif */
|
|
/* #ifndef MP-BAIDU */
|
|
top: 80rpx;
|
|
/* #endif */
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
z-index: 2;
|
|
padding: 30rpx 0rpx;
|
|
}
|
|
|
|
.search-box {
|
|
background-color: $bg-gray-color;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 0rpx 30rpx 0rpx 30rpx;
|
|
padding: 15rpx 20rpx;
|
|
border-radius: 60rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.list-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.container-box {
|
|
background-color: $white-color;
|
|
margin: 110rpx -30rpx 0rpx -30rpx;
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.list-item:nth-of-type(n+1) {
|
|
margin: 15rpx 0rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx solid $bg-gray-input-color;
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
|
|
.item-img-box {
|
|
background-color: $divider-color;
|
|
flex: 0.4;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10rpx;
|
|
border-radius: 8rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.count-tag {
|
|
background-color: $red-color;
|
|
position: absolute;
|
|
color: $white-color;
|
|
top: -10rpx;
|
|
right: -8rpx;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
width: 40rpx;
|
|
text-align: center;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.item-img {
|
|
width: 68%;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.item-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
padding: 0rpx 15rpx;
|
|
}
|
|
|
|
.item-goods-name-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-goods-status {
|
|
font-size: 22rpx;
|
|
text-align: center;
|
|
line-height: 32rpx;
|
|
height: 32rpx;
|
|
white-space: nowrap;
|
|
padding: 3rpx 10rpx;
|
|
border-radius: 5rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.item-goods-name {
|
|
font-size: 28rpx;
|
|
color: $text-color;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-price-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.item-price-title {
|
|
font-size: 28rpx;
|
|
color: $text-gray-hint-color;
|
|
}
|
|
|
|
.item-price-price {
|
|
margin-left: 20rpx;
|
|
color: $red-color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item-time-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.item-time-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.item-time-title {
|
|
font-size: 24rpx;
|
|
color: $text-gray-hint-color
|
|
}
|
|
|
|
.item-time-time {
|
|
font-size: 24rpx;
|
|
color: $text-gray-desc-color;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.col-gray {
|
|
background-color: $bg-gray-status-light-color;
|
|
color: $text-color;
|
|
}
|
|
|
|
.col-green {
|
|
background-color: $bg-green-status-light-color;
|
|
color: $text-color;
|
|
}
|
|
|
|
.col-primary {
|
|
background-color: $primary-color-light;
|
|
color: $text-color;
|
|
}
|
|
|
|
.col-red {
|
|
background-color: $bg-red-deep-color;
|
|
color: $white-color;
|
|
}
|
|
|
|
.container-loading {
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style> |