<template>
  <view class="content">
    <view class="commodity">
      <view class="commodity-box">
        <view v-for="ele in datas" :key="ele.id" class="commodity-list">
          <view class="item-img clearfix">
            <view class="bj-icon">即将上线</view>
            <image class="i-img" mode :src="ele.img"></image>
          </view>

          <view class="_p">{{ ele.name }}</view>
          <view class="bottm-box">
            <view v-if="ele.tag" class="new">{{ ele.tag }}</view>
            <view class="bottom-right">¥{{ ele.show_price }}</view>
          </view>
        </view>
      </view>
      <view
        v-show="isSubscription == 'test'"
        class="shar"
        mode="aspectFill"
        @tap="newSubScription"
      ></view>
    </view>
    <view v-if="total == datas.length" class="Tips">没有更多了</view>
    <request-loading class="vue-ref" data-ref="message"></request-loading>
  </view>
</template>

<script>
import api from "@/lib/api/api";
export default {
  name: "PageBeto",
  data() {
    return {
      background: ["color1", "color2", "color3"],
      indicatorDots: !1,
      autoplay: !0,
      interval: 5e3,
      duration: 500,
      scrollTop: 0,
      datas: [],
      openid: "",
      sessionKey: "",
      token: !0,
      username: "",
      newUserActivity: "",
      haveUserActivity: "",
      couponTotal: 0,
      userInfo: {},
      isSubscription: false,
    };
  },
  onLoad() {
    uni.getSetting({
      withSubscriptions: true,
      success(res) {
        if (
          res.subscriptionsSetting.itemSettings[
            "XaY2_hSO-9hSeC5IIEoCX5oBo2ydOzUTx1HhKSEu2F8"
          ] == "accept"
        ) {
          this.isSubscription = true;
        }
      },
    });
  },
  onPageScroll: function (e) {
    this.scrollTop = e.scrollTop;
  },
  onPullDownRefresh() {
    this.loadList();
  },
  onShow() {
    this.loadList();
    const n = uni.getMenuButtonBoundingClientRect();
    this.top1 = n.top + 5 + "px";
  },
  methods: {
    loadList() {
      api
        .beTo()
        .then((data) => {
          if (data.data) {
            this.datas = data.data;
            uni.stopPullDownRefresh();
          }
        })
        .catch(() => {
          uni.showToast({
            icon: "none",
            title: "出错啦，请稍后重试",
          });
        });
    },
    newSubScription() {
      uni.requestSubscribeMessage({
        tmplIds: ["XaY2_hSO-9hSeC5IIEoCX5oBo2ydOzUTx1HhKSEu2F8"],
        success: () => {
          this.isSubscription = true;
        },
        fail() {
          uni.showToast({
            icon: "none",
            title: "新品订阅授权失败",
          });
        },
      });
    },
  },
};
</script>
<style lang="scss">
.shar {
  width: 734rpx;
  height: 120rpx;
  background-image: url(https://oushen2022.oss-cn-beijing.aliyuncs.com/images/46dd340d01c241338bd692313409856d.png);
  position: fixed;
  bottom: 10rpx;
  left: 15rpx;
  z-index: 999;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
</style>

<style>
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  width: 750rpx;
  background: #f5f6f7;
}

.spot {
  align-items: center;
  animation: all 0.5s;
  display: flex;
  flex-wrap: wrap;
  height: 8rpx;
  justify-content: center;
  position: absolute;
  top: 504rpx;
  width: 750rpx;
  z-index: 9;
}

.spot-list {
  width: 40rpx;
}

.spot-list1,
.spot-list {
  background: #fff;
  border-radius: 6.5rpx;
  height: 8rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
}

.spot-list1 {
  opacity: 0.4;
  width: 18rpx;
}

image {
  height: inherit;
  width: inherit;
}

.logo {
  height: 44rpx;
  left: 24rpx;
  position: fixed;
  width: 190rpx;
  z-index: 99;
}

.top1 {
  height: 11vh;
  position: fixed;
  top: 0;
  width: 750rpx;
  z-index: 9;
}

.swiper-item,
.swiper-item > image,
.swiper {
  height: 560rpx;
  width: 750rpx;
}

.commodity {
  width: 750rpx;
}

.commodity-box {
  background: #ffffff;
  padding: 24rpx 24rpx 0 24rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.title-block {
  background: #fec56e;
  display: block;
  width: 100%;
  height: 18rpx;
  border-radius: 20rpx;
  position: absolute;
  z-index: -1;
  top: 25rpx;
}
.commodity-list {
  background: #f5f6f7;
  margin-bottom: 24rpx;
  overflow: hidden;
  width: 338rpx;
  padding-bottom: 17rpx;
  /* box-shadow: 2rpx 3rpx 6rpx 0rpx rgba(144,144,144,0.31); */
  border-radius: 20rpx;
}
.commodity-list > image {
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  float: left;
  height: 338rpx;
  width: 338rpx;
}

.commodity-list > ._p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #111;
  display: -webkit-box;
  float: left;
  font-family: PingFangSC-Medium, PingFang SC;
  font-size: 28rpx;
  height: 38rpx;
  line-height: 38rpx;
  margin-top: 14rpx;
  overflow: hidden;
  text-indent: 16rpx;
  width: 322rpx;
  margin-bottom: 14rpx;
}
.item-img {
  position: relative;
  height: 338rpx;
  width: 338rpx;
}
.bj-icon {
  position: absolute;
  z-index: 999;
  text-align: center;
  width: 110rpx;
  line-height: 40rpx;
  height: 40rpx;
  font-size: 22rpx;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #ffffff;
  background: #ffb25c;
  letter-spacing: 0.1px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.bj-img {
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  float: left;
  position: absolute;
  height: 338rpx;
  width: 338rpx;
}
.i-img {
  position: absolute;
  z-index: 99;
  height: 338rpx;
  width: 338rpx;
  background: #d8d8d8;
}
.bottom-right {
  font-size: 32rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #cd2b35;
  float: right;
  padding-right: 16rpx;
}
.new {
  font-size: 24rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  color: #cd2b35;
  display: inline-block;
  padding: 4rpx 10rpx;
  border: 2rpx solid #cd2b35;
  border-radius: 10rpx;
  margin-left: 16rpx;
}
.commodity-banner {
  height: 195rpx;
  width: 750rpx;
  padding-top: 25rpx;
}
.commodity-banner > image {
  height: 100%;
  width: 100%;
}
.login {
  background: #fff;
  border-radius: 16rpx;
  bottom: 40rpx;
  box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.2);
  height: 136rpx;
  left: 24rpx;
  position: fixed;
  width: 702rpx;
}

.login-img {
  float: left;
  height: 94rpx;
  margin-left: 24rpx;
  margin-right: 24rpx;
  margin-top: 21rpx;
  position: relative;
  text-align: center;
  width: 88rpx;
}

.login-img > .activity {
  color: red;
  font-size: 24rpx;
  font-weight: 700;
  left: 7rpx;
  position: absolute;
  top: 10rpx;
  width: 80rpx;
}

.login-img > .activity .unit {
  font-size: 14rpx;
  padding-left: 10rpx;
}

.long-text {
  float: left;
  height: 136rpx;
  width: 270rpx;
}

.long-text1 {
  color: #333;
  font-family: PingFangSC-Regular;
  font-size: 30rpx;
  height: 30rpx;
  margin-top: 27rpx;
  width: 270rpx;
}

.long-text2 {
  color: #999;
  font-family: PingFangSC-Regular;
  font-size: 26rpx;
  height: 30rpx;
  margin-top: 16rpx;
  width: 260rpx;
}

.login-right {
  background: #ffe100;
  border-radius: 32px;
  color: #333;
  display: inline-block;
  float: right;
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  height: 64rpx;
  line-height: 64rpx;
  margin-right: 36rpx;
  margin-top: 36rpx;
  text-align: center;
  width: 204rpx;
}

.login-right::after {
  border: none;
}

.Tips {
  color: #999;
  float: left;
  font-size: 24rpx;
  height: 24rpx;
  line-height: 24rpx;
  margin-bottom: 40rpx;
  margin-top: 40rpx;
  text-align: center;
  width: 750rpx;
}
</style>
