123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322 |
- <template>
- <view class="sld_point_good">
- <view class="fixed_top_status_bar"></view>
- <view class="top_con" :style="{backgroundImage:'url('+top_bg1+')','height':type=='more'?'154rpx':'90rpx'}">
- <view class="top_title">
- <image class="return" :src="imgUrl+'point/return.png'" @click="back" mode=""></image>
- <view class="title">
- {{title}}
- </view>
- <image class="search" :src="imgUrl+'point/search.png'" @click="goSearch" mode=""></image>
- </view>
- <view class="top_cate">
- <view :class="{cate_item:true,active:current_index==index}" v-for="(item,index) in label_list" @click="changeLabel(index,item.labelId)"
- :key='index'>
- {{item.labelName}}
- </view>
- </view>
- </view>
- <!-- 积分商城搜索列表 -->
- <!-- #ifdef APP-PLUS -->
- <view class="recommend_list" :style="{'marginTop':type=='more'?'calc(170rpx + var(--status-bar-height))':'calc(110rpx + var(--status-bar-height))'}">
- <!-- #endif -->
- <!-- #ifndef APP-PLUS -->
- <view class="recommend_list" :style="{'marginTop':type=='more'?'170rpx':'110rpx'}">
- <!-- #endif -->
- <recommendGoods class='recommend_pre' v-for="(recommendItem,recommendIndex) in recommendedList" :goods_info="recommendItem"></recommendGoods>
- <loadingState v-if="loadingState == 'first_loading'||recommendedList.length > 0" :state='loadingState' />
- </view>
- <!-- 分类空页面 -->
- <view class="empty_sort_page" v-if="is_show_empty">
- <image :src="imgUrl+'index/empty.png'" mode="aspectFit" class="empty_img"></image>
- <view class="empty_text">{{$L('暂无数据')}}</view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState,
- } from 'vuex';
- import recommendGoods from '../components/recommend_item_v.vue'
- import loadingState from "../components/loading-state.vue";
- export default {
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- loadingState: 'first_loading',
- current: 1,
- pageSize: 10,
- hasMore: false,
- is_show_empty: false,
- top_bg1: getApp().globalData.imgUrl + 'point/top_bg1.png',
- top_bg2: getApp().globalData.imgUrl + 'point/top_bg2.png',
- title: '',
- recommendedList: [],
- cate_index: 0,
- labelId: '',
- label_list: [],
- current_index: 0,
- type:''
- };
- },
- components: {
- recommendGoods,
- loadingState
- },
- computed: {
- ...mapState(['hasLogin', 'userInfo', 'userCenterData'])
- },
- onLoad(options) {
- this.type=options.type
- if (options.labelId) {
- this.labelId = options.labelId
- this.label_id = options.labelId//用于搜索页
- }
- if (options.type == 'more') {
- this.title = '积分商城'
- this.getLabelList()
- } else {
- this.title = options.type
- this.getGoodList()
- }
- },
- onReachBottom() {
- if (this.hasMore) {
- this.getGoodList()
- }
- },
- methods: {
- goSearch(){
- uni.navigateTo({
- url:'/standard/point/search/search?labelId='+(this.type=='more'?this.label_id:this.labelId)
- })
- },
- back(){
- uni.navigateBack({
- delta:1
- })
- },
- changeLabel(index, labelId) {
- this.current_index = index
- this.labelId = labelId
- this.getGoodList()
- },
- getLabelList() {
- uni.showLoading()
- let param = {}
- param.data = {}
- param.data.labelId = this.labelId
- param.url = 'v3/integral/front/integral/mall/labelList'
- param.method = 'GET'
- this.$request(param).then(res => {
- if (res.state == 200) {
- this.label_list = res.data.list
- this.labelId=res.data.list[0].labelId
- this.getGoodList()
- uni.hideLoading()
- } else {
- uni.hideLoading()
- that.$api.msg(res.msg)
- }
- })
- },
- getGoodList() {
- uni.showLoading()
- let param = {}
- param.data = {}
- param.data.labelId = this.labelId
- param.url = 'v3/integral/front/integral/mall/goodsList'
- param.method = 'GET'
- this.$request(param).then(res => {
- if (res.state == 200) {
- this.recommendedList = res.data.list
- if (this.recommendedList.length == 0) {
- this.is_show_empty = true
- }else{
- this.is_show_empty = false
- }
- this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
- if (this.hasMore) {
- this.current++;
- this.loadingState = 'allow_loading_more';
- } else {
- this.loadingState = 'no_more_data';
- }
- uni.hideLoading()
- } else {
- uni.hideLoading()
- that.$api.msg(res.msg)
- }
- })
- }
- },
- }
- </script>
- <style lang="scss">
- .fixed_top_status_bar {
- position: fixed;
- /* #ifdef APP-PLUS */
- height: var(--status-bar-height);
- /* #endif */
- /* #ifndef APP-PLUS */
- height: 0;
- /* #endif */
- top: 0;
- left: 0;
- right: 0;
- z-index: 99;
- background: #fff;
- }
- page {
- background: #F5F5F5;
- width: 750rpx;
- margin: 0 auto;
- }
- .sld_point_good {
- .top_con {
- position: fixed;
- top: 0;
- // #ifdef APP-PLUS
- top: var(--status-bar-height);
- // #endif
- left: 0;
- right: 0;
- margin: 0 auto;
- width: 750rpx;
- // height: 154rpx;
- background-size: 100%;
- padding: 0 20rpx;
- box-sizing: border-box;
- // #ifdef H5 || APP-PLUS
- padding-top: 20rpx;
- // #endif
- overflow-y: hidden;
- .top_title {
- display: flex;
- align-items: center;
- .return {
- width: 17rpx;
- height: 29rpx;
- }
- .title {
- width: 663rpx;
- text-align: center;
- font-size: 36rpx;
- color: white;
- }
- .search {
- width: 30rpx;
- height: 30rpx;
- }
- }
- .top_cate {
- display: flex;
- align-items: start;
- margin-top: 30rpx;
- overflow-x: scroll;
- width: 100%;
- height: 66rpx;
- .cate_item {
- color: white;
- font-size: 32rpx;
- margin-right: 60rpx;
- min-width: fit-content;
- &.active {
- font-weight: bold;
- }
- &:last-child {
- margin-right: 0rpx;
- }
- }
- }
- }
- }
- .mp_search_box {
- display: flex;
- align-items: center;
- background-color: white;
- padding: 11rpx 0;
- .search_con {
- width: 631rpx;
- height: 65rpx;
- background: #F5F5F5;
- border-radius: 33rpx;
- padding: 18rpx 22rpx;
- display: flex;
- align-items: center;
- margin-left: 20rpx;
- .ser_input {
- padding-left: 20rpx;
- }
- .search_img {
- width: 30rpx;
- height: 30rpx;
- }
- .search_input {
- font-size: 28rpx;
- color: #999999;
- }
- }
- .search_btn {
- margin-left: 20rpx;
- font-size: 30rpx;
- color: #333333;
- }
- }
- .recommend_list {
- margin-top: 20rpx;
- display: flex;
- flex-wrap: wrap;
- padding: 0 20rpx;
- .recommend_pre {
- margin-right: 20rpx !important;
- &:nth-child(2n) {
- margin-right: 0 !important;
- }
- }
- }
- // 空页面
- .empty_sort_page {
- width: 100%;
- // height: 100vh;
- background: #F5F5F5;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-top: 228rpx;
- .empty_img {
- width: 210rpx;
- height: 210rpx;
- margin-bottom: 32rpx;
- }
- .empty_text {
- font-size: 26rpx;
- color: #999;
- }
- }
- </style>
|