fangliaoxiaochengxv/pages/productCenter/productCenter.vue

<template>
  <view >
    <view  :style="{width:'100%', height: '316rpx', marginTop: `${statusBarHeight}px`, position: 'relative',}">
      <view @click="toHome" class="to-home-img" :style="{top:`${navbarHeight}px` ,width: `${topData.height}px`,height: `${topData.height}px`,    borderRadius: `${topData.height}px`}">
            <u-icon size="20px" name="arrow-left" bold="true" color="#666666"></u-icon>
      </view>
      <van-image :src="bgImg" height="316rpx" width="750rpx"></van-image>
      <view class="goods-list" :style="{position: 'absolute', bottom: `0rpx`}">
        <view class="goods-list-item" v-for="(item, index) in goodsList" :key="index"          @click="toggleSelect(index,item)">
          <view style="height: 98rpx; display: flex; justify-content: center; align-items: center;" >
            <image :style="[getStyles(index)]" :src="item.logo">
            </image>
          </view>
          <view style="" :style="[getStylesText(index)]" >{{ item.name }}</view>
        </view>
      </view>
    </view>
	<view class="common-page">
		<FilterBar :currentCateId="cateid" @change="handleFilter" />
		<view class="list-box">
			<CommercePart :data="data"></CommercePart>
		</view>
  </view>
  </view>
</template>

<script>
	import tabbarCom from "@/components/tabbar/tabbar.vue"
	import CommercePart from "@/components/CommercePart.vue";
	import FilterBar from "./filterBar.vue";
	import {
		getGoodList,getGoodCate
	} from "@/common/api/good.js";
	export default {
		components: {
			tabbarCom,
			CommercePart,
			FilterBar
		},
		data() {
			return {
				page: 1,
				pageSize: 10,
				total: 0,
				search: "",
				sort: "",
				cateid: "",
				subCateId: '',
        topData: {
          top: 0,
          height: 0
        },
				sortType: "",
				data: [],
        selectedIndexes: [],
        goodsList: [],
        statusBarHeight:"",
        bgImg:""
			};
		},
    onLoad() {
      this.getGoodCate();
    },



		onShow() {
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; // 状态栏高度
      const topData = uni.getMenuButtonBoundingClientRect()
      this.topData.top = topData.top
      this.topData.height = topData.height
      this.$nextTick(() => {
        this._getGoodList(true);
      })
		},
		onReachBottom() {
			this._getGoodList();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			let userInfo = uni.getStorageSync('userInfo')
			userInfo = userInfo && JSON.parse(userInfo) || {}
			let params = {}
			if (userInfo.id) {
				params = {
					id: userInfo.id
				}
			}
			let configs = uni.getStorageSync('configs') || {}
			return {
				title: configs.shop_share_title,
				imageUrl: configs.shop_share_img,
				path: `/pages/productCenter/productCenter${this.$stringPageOptions(params)}`
			}
		},

		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			let userInfo = uni.getStorageSync('userInfo')
			userInfo = userInfo && JSON.parse(userInfo) || {}
			let params = {}
			if (userInfo.id) {
				params = {
					id: userInfo.id
				}
			}
			let configs = uni.getStorageSync('configs') || {}
			return {
				title: configs.shop_share_title,
				imageUrl: configs.shop_share_img,
				path: `/pages/productCenter/productCenter${this.$stringPageOptions(params)}`
			}
		},
		computed: {
      // 转换字符数值为真正的数值
      navbarHeight() {
        return    this.topData.top -this.statusBarHeight+1
      },
			getGoodListParam() {
				return {
					cateid: this.cateid,
					subCateId: this.subCateId,
					sort: this.sort,
					sortType: this.sortType,
					name: this.search,
				}
			}
		},
		watch: {
			getGoodListParam() {
				this._getGoodList(true);
			},
		},
		methods: {
      toHome() {
        uni.switchTab({
          url: '/pages/home/index'
        })
      },
			_getGoodList(initFlag) {
				if (!initFlag) {
					if (this.page * this.pageSize < this.total) {
						this.page++
					} else {
						return
					}
				} else {
					this.page = 1
					this.total = 0
					this.data = []
				}
				let params = {
          cateid: this.cateid && this.subCateId ? this.subCateId : this.cateid,
          sort: this.sort,
          sortType: this.sortType,
          mark: "线上商品",
          page: this.page,
          pageSize: this.pageSize,
          name: this.search,
        }
				getGoodList(params).then(({
					data = {}
				}) => {
					this.data = this.data.concat(data.list)
					this.total = data.page.total
				});
			},
      toggleSelect(index,item) {
        const indexInSelected = this.selectedIndexes.indexOf(index);
        if (indexInSelected !== -1) {
          this.selectedIndexes.splice(indexInSelected, 1); // 取消选中
          this.cateid="0";
        } else {
          this.selectedIndexes=[]
          this.selectedIndexes.push(index); // 选中
          this.cateid=item.id;
        }
      },
      getStyles(index) {
        if (this.selectedIndexes.includes(index)) {
          return {width: '96rpx', height: '96rpx',borderRadius: '96rpx' ,border: '1rpx solid #C79C53'}
        }
        return {width: '88rpx', height: '88rpx',borderRadius: '88rpx'}
      },
      getStylesText(index) {
        if (this.selectedIndexes.includes(index)) {
          return {color: '#333333',marginTop: "14rpx",fontWeight: 'bold'}
        }
        return {color: '#666666',marginTop: "14rpx"}
      },
      getGoodCate() {
        let configs = uni.getStorageSync('configs') || {}
        this.bgImg = configs.shop_bgimg
        configs.btn_color = configs.btn_color || '#C79C53'
        getGoodCate({goods_kind:"线上商品"}).then(({
                              data = []
                            }) => {
          // 只取前五个
          this.goodsList = data.slice(0, 5);
        });
      },
			handleFilter({
				sort,
				sortType,
				cateid,
				subCateId
			}) {
				this.sort = sort;
				this.sortType = sortType;
				this.cateid = cateid || "";
				this.subCateId = subCateId || ''
			},
		},
	};
</script>

<style lang="scss" scoped>
	.common-page {
		padding: 0rpx 20rpx  25rpx 20rpx ;
		height: 100vh;
		background-color: #F8F9FA;
	}
  .to-home-img {
    position: absolute;
    left: 20rpx;
    background-color: #f8f6f6;
    z-index: 1;
    // 上下左右居中
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700 !important;
    // 边框
    border: 1rpx solid #d0ced0;
  }
  .goods-list {
    display: flex;
    width: 94%;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: transparent;
    padding: 0 20rpx 0 20rpx;

    &-item {
      height: 138rpx;
      width: 20%;
      flex-shrink: 0;
      text-align: center;
      margin-bottom: 40rpx;
      color: #1d161f;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      transition: width 0.3s, height 0.3s, border 0.3s; // 添加过渡效果
    }
  }

</style>