<template><page-meta :root-font-size="fontSize+'px'"></page-meta> <member-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container"> <view class="div common-header-wrap"> <view class="status-holder"></view> <view :style="'height:'+navHeight+'px'"></view> <view class="common-header-holder"></view> <view class="common-header-fixed"> <title-header /> <uni-nav-bar title="浏览历史" class="common-header" left-icon="back" @clickLeft="goBack()"> <view class="div common-btn btn" slot="right" @click="clearallBrowse()">清空浏览记录</view> </uni-nav-bar> </view> </view> <view class="scroll-view div" style="position:relative"> <view class="browse-wrapper div " > <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div" @scrolltolower="loadMore" scroll-y="true"> <view class='div main-content' v-if="goodsbrowse_list && goodsbrowse_list.length"> <view class='browse-item' v-for="(item, index) in goodsbrowse_list" v-bind:key="index"> <view class='title'>{{item.time}}</view> <view class='goods_list' > <view class='goods-item' v-for="(goods, i) in item.goods_list" v-bind:key="i"> <view class='img' :style="'width:'+windowWidth+'px;height:'+windowWidth+'px'"><image mode="aspectFit" class="image" :src="goods.goods_image_url" /></view> <view class='price'>¥{{goods.goods_promotion_price}}</view> </view> </view> </view> </view> <empty-record v-else></empty-record> </scroll-view> </view> </view> </view> </member-base> </template> <script> import {getFontSize} from '@/util/common' import TitleHeader from '../../TitleHeader' import { urlencode } from '@/util/common' import MemberBase from '../MemberBase' import { getBrowseList, clearallBrowse } from '../../../api/memberBrowse' import EmptyRecord from '../../EmptyRecord' import flexLine from '../../flexLine' export default { components:{ TitleHeader, MemberBase, flexLine, EmptyRecord }, mounted(){ // #ifdef MP-WEIXIN this.navHeight = uni.getMenuButtonBoundingClientRect().top // #endif }, computed:{ fontSize(){ return getFontSize() }, windowWidth: function () { const res = uni.getSystemInfoSync() var width=res.windowWidth var size=getFontSize() return (width-3*.6*size)/3 }, }, data(){ return { navHeight: 0, params: { 'page': 0, 'per_page': 5 }, loading: false, // 是否加载更多 isMore: true, // 是否有更多 goodsbrowse_list: false } }, created () { this.loadMore() }, methods: { // 清空浏览记录 clearallBrowse () { clearallBrowse(this.params).then(res => { this.goodsbrowse_list = false }).catch(function (error) { uni.showToast({icon:'none',title: error.message}) }) }, goBack () { uni.navigateBack({delta:1}) }, goGoods (goods_id) { uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { 'goods_id': goods_id } )}) }, loadMore () { this.loading = true this.params.page = ++this.params.page if (this.isMore) { this.loading = false this.getBrowseList(true) } }, getBrowseList () { uni.showLoading({ title: '加载中' }) getBrowseList(this.params).then(res => { uni.hideLoading() if (res) { if (res.result.hasmore) { this.isMore = true } else { this.isMore = false } let temp = res.result.goodsbrowse_list if (temp) { if (!this.goodsbrowse_list) { this.goodsbrowse_list = temp } else { this.goodsbrowse_list = this.goodsbrowse_list.concat(temp) } } } }) } } } </script> <style scoped lang="scss"> .scroll-view-wrapper{display: flex;flex-direction: column;} .scroll-view{flex:1} .common-header{ .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;} } .container { height: 100%; display: flex; position: relative; flex-direction: column; justify-content: flex-start; align-items: stretch; } .main-content{background: #fff;padding: 0 $pageSpace;box-sizing: border-box;} .browse-wrapper .browse-item{} .browse-wrapper .browse-item .title{color: #333;font-size: .8rem;font-weight: bold;padding-top: .5rem;} .browse-wrapper .browse-item .goods_list{padding-top: .5rem;display: flex;flex-wrap: wrap;} .browse-wrapper .browse-item .goods_list .goods-item{width: 32%;margin-right: 1%;margin-bottom: .5rem;} .browse-wrapper .browse-item .goods_list .goods-item .img{border-radius: .5rem;overflow: hidden;} .browse-wrapper .browse-item .goods_list .goods-item .price{font-size: .8rem;color: $primaryColor;padding: .5rem 0;text-align: center;} </style>