yicangzongtai_app_240321/pages/pointsMall/index.vue

<template>
  <view class="pointsMall">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="background">
      <view class="me-integral" v-if="userCode">
        <view class="item"> 我的积分： </view>
        <view class="num"> {{userCode.integral_able}}积分 </view>
      </view>
    </view>
    <swiper class="commodity"   @change="imgActiveFun"   :indicator-dots="false"
      :autoplay="false"  v-if="goodsList && goodsList.length > 0">
      <swiper-item
        v-for="item in goodsList"
        :key="item.id"
        @click="
          goProductDetails('/pages/product/goods/IntegralGood?id=' + item.id)
        "
      >
        <view class="commodity-item">
          <image :src="item.cover" mode=""></image>
          <view class="number u-text2">
            {{ item.title }}
          </view>
          <view  class="completed"> {{ item.min_exchange_point }}<text style="font-size: 30rpx;">积分</text> </view>
        </view>
      </swiper-item>
    </swiper>
    <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>

    <view class="option" v-if="goodsList && goodsList.length > 0">
      <view
        class="option-item"
        :class="{ active: activeBannerIndex == index }"
        v-for="(item, index) in goodsList"
        :key="index"
      >
      </view>
    </view>
    <view class="selected">
      <view class="title">
        <view class="item"> 精选商品 </view>
        <view class="line"> </view>
        <view class="hotseparation"> 热销优品快来拼购 </view>
      </view>
      <view class="middle" v-if="goodsList && goodsList.length > 0">
        <view class="item" v-for="(item, index) in goodsList" :key="index" @click="
          goProductDetails('/pages/product/goods/IntegralGood?id=' + item.id)
        ">
          <image :src="item.cover" mode=""></image>
          <view class="titletop ">
            {{ item.title }}
          </view>
          <view class="numintegral"> {{ item.min_exchange_point }}积分 </view>
        </view>
      </view>
      <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      config: {
        back: true, //false是tolbar页面 是则不写
        title: "积分商城",
        color: "#1a1a1a",
        switchnextstep: true, //切换底部样式
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, '#fff'],
        
      },
      params: {
        page: 1,
        limit: 10,
      },
      status: "more",
      goodsList: [],
      activeBannerIndex: 0,
	  user:null,
	  userCode:null,
    };
  },
  onLoad(options) {
	 if(uni.getStorageSync('personal')) {
		 this.user=uni.getStorageSync('personal')
	 }
    this.getList();
	this.getMyMsg()
  },
  onReachBottom(e) {
    this.status = "loading";
    this.params.page++;
    this.getList();
  },
  onPullDownRefresh() {
    this.params.page = 1;
    this.goodsList = [];
    this.getList();
	uni.stopPullDownRefresh()
  },
  methods: {
	   imgActiveFun(e) {
      this.activeBannerIndex = e.detail.current;
    },
    goProductDetails(url) {
      uni.navigateTo({
        url: url,
      });
    },
	getMyMsg(){
		this.$http.get("/account/app-account-info").then(res=>{
			if(res&&res.code==200){
				this.userCode=res.data
				console.log(this.userCode)
			}
		})
	},
    getList() {
      this.$http.get(`/goods/pointgoods/pages`, this.params).then((res) => {
        if (res && res.code == 200) {
          this.goodsList = this.goodsList.concat(res.page.list);

          if (res.page.totalPage <= res.page.currPage) {
            this.status = "noMore";
          } else {
            this.status = "more";
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.commodity {
  margin-top: -195rpx;
  width: 720rpx;
  margin-left: 30rpx;
  height: 428rpx;
  overflow: hidden;
  /deep/ swiper-item {
	  width: 286rpx !important;
	  padding-right: 18rpx;
  }
  /deep/ .uni-swiper-slide-frame {
    width: 42% !important;
  }
  .commodity-item {
    // margin-right: 30rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    // padding: 18rpx;
	padding-top: 20rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
	padding-bottom: 30rpx;
    image {
      width: 232rpx;
      height: 232rpx;
      border-radius: 16rpx;
    }
    .completed {
      font-size: 33rpx;
      margin-top: 14rpx;
		font-weight: Bold;
		
		color: #FF0000;
 
    }
    .number {
		height: 64rpx;
		line-height: 32rpx;
      margin-top: 20rpx;
      font-size: 22rpx;
      color: #333333;
      font-weight: 500;

	  
      .zero {
        margin-left: 20rpx;
        font-size: 22rpx;
        color: #ff0000;
        font-weight: 500;
      }
      .one {
        color: #ff0000;
        font-size: 34rpx;
        font-weight: 700;
      }
      .two {
        color: #ff0000;
        font-size: 18rpx;
        font-weight: 700;
      }
    }
  }
}

.selected {
  background-color: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  overflow: hidden;
  .middle {
    padding: 30rpx 0 0 30rpx;
    display: flex;
    flex-wrap: wrap;
    .item {
		width: 216rpx;
      text-align: center;
      background-color: #ffffff;
      box-shadow: 0rpx 0rpx 5rpx #e6e6e6;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      margin-right: 20rpx;
      image {
        width: 216rpx;
        height: 216rpx;
        border-radius: 18rpx;
      }
      .titletop {
        font-size: 24rpx;
        line-height: 34rpx;
        font-weight: 400;
        color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 0 10rpx;
      }
      .numintegral {
        font-size: 28rpx;
        font-weight: 500;
        color: #ff0000;
        margin-bottom: 12rpx;
		margin-top: 8rpx;
      }
    }
  }
  .title {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    margin-left: 30rpx;
    .item {
      font-weight: 700;
      font-size: 36rpx;
      color: #1a1a1a;
    }
    .line {
      width: 1rpx;
      height: 34rpx;
      background-color: #707070;
      margin: 0 15rpx;
    }
    .hotseparation {
      font-size: 24rpx;
      flex: 1;
      font-weight: 400;
      color: #666666;
    }
  }
}
.pointsMall {
  background-color: #f6f6f6;
}

.option {
  margin: 30rpx 0;
  display: flex;
  justify-content: center;
  .option-item {
    background-color: #d9d9d9;
    margin: 0 8rpx;
    width: 14rpx;
    height: 14rpx;
    border-radius: 7rpx;
  }
  .active {
    background-color: #ff4e15;
    width: 35rpx;
    height: 14rpx;
    border-radius: 7rpx;
  }
}

.background {
  width: 100%;
  height: 300rpx;
  background-color: #FA6138;
  overflow: hidden;
  .num {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 500;
  }
  .me-integral {
    display: flex;
    justify-content: center;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 500;
    margin-top: 30rpx;
  }
}
</style>