zhishifufei_uniapp/pages/special/record.vue

<template>
  
  <BaseContainer class="study-record" :fixedNav="false">
    <NavBarTitle title="学习记录"  :height="300"/>
    <view class="search-bg flex flex-center-x">
  
      <view class="form flex-auto flex flex-center-x">
        <image mode="widthFix" :src="getImgPath('/wap/first/zsff/images/search.png')" />
        <input
          v-model="search"
          @confirm="goSearch"
          confirm-type="search"
          placeholder="输入课程名称"
        />
      </view>
    </view>
    <view>
      <view v-if="updateSpecials.length" class="goods">
        <navigator
          v-for="item of updateSpecials"
          :key="item.id"
          :url="item.path"
          class="item"
          hover-class="none"
        >
          <view class="image">
            <image mode="aspectFill" :src="item.image" />
            <view class="label">{{ item.special_type }}</view>
          </view>
          <view class="text">
            <view class="name">{{ item.title }}</view>
            <view class="label">
              <template v-for="(itm, idx) in item.label">
                <text v-if="idx < 2" :key="idx" class="cell">{{ itm }}</text>
              </template>
            </view>
            <view class="price">
              <template v-if="item.is_pink">
                <view class="money">
                  ¥<text>{{ item.pink_money }}</text>
                </view>
                <view v-if="!item.is_light && item.type != 4" class="total">
                  共{{ item.count }}节
                </view>
              </template>
              <template v-else>
                <view v-if="item.money === '0.00'" class="free">免费</view>
                <view v-else class="money">
                  ¥<text>{{ item.money }}</text>
                </view>
                <view v-if="!item.is_light && item.type != 4" class="total">
                  共{{ item.count }}节
                </view>
              </template>
            </view>
          </view>
        </navigator>
      </view>
      <view v-if="loadend && specials.length" class="loaded">已全部加载</view>
      <view v-if="!specials.length && !loading">
        <image
          class="nothing"
          mode="widthFix"
          :src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
        />
      </view>
    </view>
  </BaseContainer>
</template>

<script>
import specialType from "@/constants/special-type";
import { getSpecialList } from "@/api/special";
import { getLogoConfig } from "@/api/special";
export default {
  data() {
    return {
      homeLogo: "",
      specials: [],
      search: "",
      loadTitle: "",
      loading: false,
      loadend: false,
      limit: 10,
      page: 1,
    };
  },
  computed: {
    updateSpecials() {
      return this.specials.map((value) => {
        if (value.is_light) {
          value.path = `/pages/special/single_details?id=${value.id}`;
        } else {
          value.path = `/pages/special/details?id=${value.id}`;
        }
        value.special_type = specialType[value.type];
        return value;
      });
    },
  },
  onLoad() {
    this.getSpecialList();
    this.getLogoConfig();
  },
  onReachBottom() {
    this.getSpecialList();
  },
  methods: {
    getLogoConfig() {
            try {
              getLogoConfig().then(res=>{
                this.homeLogo = res.data.homeLogo;
              })

            } catch (err) {
                console.log(err);
            }
        },
    goSearch() {
      this.loadend = false;
      this.page = 1;
      this.$set(this, "specials", []);
      this.getSpecialList();
    },
    async getSpecialList() {
      if (this.loadend) return;
      if (this.loading) return;
      this.loading = true;
      this.loadTitle = "";
      uni.showLoading({ mask: true });
      try {
        const { data: list } = await getSpecialList({
          subject_id: 0,
          search: this.search,
          page: this.page,
          limit: this.limit,
          type: 1,
        });

        this.loading = false;
        this.page++;
        let specials = this.$util.SplitArray(list, this.specials);
        this.loadend = list.length < this.limit;
        this.loadTitle = this.loadend ? "我是有底线的" : "上拉加载更多";
        this.$set(this, "specials", specials);
      } catch (err) {
        this.loading = false;
        this.loadTitle = "加载更多";
      }
      uni.hideLoading();
    },
  },
};
</script>

<style>
page{
  background: #F7F8F9;
}
</style>
<style scoped lang="scss">
.loading {
  font-size: 40rpx;
  text-align: center;
  color: #999999;
}

.loaded {
  font-size: 28rpx;
  line-height: 72rpx;
  text-align: center;
  color: #999999;
}

.nothing {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 400rpx;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.study-record .search-bg {
  background-color: #2c65f7;
  background-image: linear-gradient(
    90deg,
    rgba(44, 101, 247, 1) 0,
    rgba(64, 157, 255, 1) 100%
  );
  .form{
  position: absolute;
    left: 0;
    right: 0;
    width: 686rpx;
    margin: 0 auto;
		margin-top: calc(240rpx + var(--safe-top));
		// #ifdef  MP-WEIXIN
    margin-top: calc(280rpx + var(--safe-top));
		// #endif
    border-radius: 24rpx;
    z-index: 999;

  }
}

.logo-box {
  height: 126rpx;
}

.study-record .search-bg .image {
  width: 200rpx;
  height: 200rpx;
}

.study-record .search-bg .form {
  height: 64rpx;
  padding-right: 27rpx;
  padding-left: 27rpx;
  border-radius: 32rpx;
  margin-left: 26rpx;
  background-color: #ffffff;
}

.form image {
  width: 29rpx;
}

.form input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 26rpx;
  line-height: 35rpx;
}

.form input::placeholder {
  color: #aaa;
}

.study-record .goods {
  padding-top: 40rpx;
  padding-bottom: 40rpx;
    width: 686rpx;
    margin: 0 auto;
    margin-top: calc(170rpx + var(--safe-top));
    border-radius: 24rpx;
    z-index: 999;
		position: relative;
}

.study-record .goods .item {
  display: flex;
  padding-right: 20rpx;
  padding-left: 20rpx;
}

.study-record .goods .item ~ .item {
  margin-top: 26rpx;
}

.study-record .goods .image {
  position: relative;
  width: 250rpx;
  height: 140rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.study-record .goods image {
  display: block;
  width: 100%;
  height: 100%;
}

.study-record .goods .image .label {
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  z-index: 2;
  height: 34rpx;
  padding-right: 11rpx;
  padding-left: 11rpx;
  border-radius: 3rpx;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 22rpx;
  line-height: 34rpx;
  color: #ffffff;
}

.study-record .goods .text {
  position: relative;

  flex: 1;
  min-width: 0;
  margin-left: 22rpx;
}

.study-record .goods .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333;
}

.study-record .goods .text .label {
  display: flex;

  align-items: center;
  margin-top: 10rpx;
}

.study-record .goods .text .label text {
  display: inline-block;
  height: 40rpx;
  padding-right: 12rpx;
  padding-left: 12rpx;
  border-radius: 6rpx;
  vertical-align: middle;
  background-color: rgba(44, 142, 255, 0.06);
  font-size: 22rpx;
  line-height: 40rpx;
  color: #2c8eff;
}

.study-record .goods .text .label text text {
  margin-left: 14rpx;
}

.study-record .goods .price {
  position: absolute;
  bottom: 0;
  left: 0;

  display: flex;

  align-items: center;
  width: 100%;
}

.study-record .goods .price .money {
font-size: 36rpx;
font-weight: 600;
color: #23272E;
line-height: 48rpx;
}

.study-record .goods .price .money text {
  font-size: 32rpx;
}

.study-record .goods .price .free {
  flex: 1;
  font-size: 24rpx;
  color: #ff6b00;
}

.study-record .goods .price .group-price-icon {
  position: relative;
  width: 76rpx;
  height: 24rpx;
  border-radius: 3rpx;
  margin-left: 14rpx;
  background-color: #ff4a4a;
  font-size: 16rpx;
  line-height: 24rpx;
  text-align: center;
  color: #ffffff;
}

.study-record .goods .price .group-price-icon::before {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  z-index: 2;
  border-width: 5rpx;
  border-style: solid;
  border-color: transparent #ff4a4a transparent transparent;

  transform: translateY(-50%);
}

.study-record .goods .price .total {
  flex: 1;
  font-size: 22rpx;
  text-align: right;
  color: #999999;
}

.study-record main .foot {
  margin-top: 20rpx;
  font-size: 28rpx;
  text-align: center;
}

.study-record main .foot .tip {
  color: #999999;
}
.goods{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 686rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
}
</style>