SFH5/pagesb/unittypeDetail/index.vue

<template>
  <view
    class="container"
    :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]"
  >
    <navBar />
    <view class="content">
      <view class="top">
        <view class="left"> </view>
        <view class="right">
          <view class="unit">
            {{ unitTypeData[state.active]?.name }}
          </view>
          <view class="size">
            {{ $t("detail.size") }}: {{
              unitTypeData[state.active]?.volumeRange
            }}
          </view>
        </view>
      </view>
      <view class="info">
        <view class="left arrow"> 
          <view class="arrowIcon"  @click="prev">
            <uv-icon name="arrow-left" color="#FFFFFF" size="20"></uv-icon>
        </view> 
      </view>
        <view class="swiper-container">
          <swiper
            class="warehouse-detail"
            circular
            style="height: 500rpx;"
            :indicator-dots="false"
            :autoplay="false"
            @change="changeMove"
            :current="state.active"
          >
            <swiper-item v-for="(item, index) in unitTypeData" :key="index">
              <view class="warehouse-detail-items">
                <image
                  class="warehouse-detail-right"
                  @click="showImage(baseImageUrl + item.imgUrl)"
                  :src="baseImageUrl + item.imgUrl"
                ></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <view class="right arrow"> 
          <view class="arrowIcon" @click="next">
            <uv-icon name="arrow-right" color="#FFFFFF" size="20"></uv-icon>
        </view>  
      </view>
      </view>
      <view class="detail">
        <view class="li">
          <view class="libox">
            <view class="iconBox">
              <uv-icon  name="calendar" color="#000" size="18"></uv-icon>
            </view>
            <view>
              {{ $t("unitTypeDetail.oneMonth") }}：
            </view>
          </view>
        </view>
        <view class="li">
          <view class="libox">
             <view class="iconBox">
              <uv-icon  name="empty-history" color="#000" size="18"></uv-icon>
            </view>
            <view>
               {{ $t("unitTypeDetail.reference") }}：{{ unitTypeData[state.active]?.description }}
            </view>
          </view>
        </view>
        <view class="li">
          <view class="libox">
            <view class="iconBox">
              <uv-icon  name="empty-coupon" color="#000" size="18"></uv-icon>
            </view>
            <view class="discountli">
              {{ $t("unitTypeDetail.discount") }}： <view class="discountBox">
                <view class="discount">{{
                    $t("detail.discountOff", {
                      month: 24,
                      percent: 100 - 0.6 * 100,
                      discount: (0.6 * 100) / 10,
                    })
                  }}</view>
                <view class="discount">{{
                    $t("detail.discountOff", {
                      month: 12,
                      percent: 100 - 0.7 * 100,
                      discount: (0.7 * 100) / 10,
                    })
                  }}</view>
                <view class="discount">{{
                    $t("detail.discountOff", {
                      month: 6,
                      percent: 100 - 0.8 * 100,
                      discount: (0.8 * 100) / 10,
                    })
                  }}</view>
                <view class="discount">{{
                    $t("detail.discountOff", {
                      month: 3,
                      percent: 100 - 0.9 * 100,
                      discount: (0.9 * 100) / 10,
                    })
                  }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import navBar from "@/components/navBar.vue";
import { ref } from "vue";
import { useMainStore } from "@/store/index.js";
const { themeInfo, storeState } = useMainStore();
import { useLoginApi } from "/Apis/home.js";
import { onLoad } from "@dcloudio/uni-app";
import { baseImageUrl } from "@/config/index.js";
const getApi = useLoginApi();
const unitTypeData = ref([]);
const state = ref({
  active: 0,
  id: "",
});

 // 切换到上一张
 const prev = () => {
      if (state.value.active > 0) {
        state.value.active -= 1;
      } else {
        state.value.active = unitTypeData.value.length - 1; // 如果是第一张，跳到最后一张
      }
    }
    // 切换到下一张
    const next = () =>{
      if (state.value.active < unitTypeData.value.length - 1) {
        state.value.active += 1;
      } else {
        state.value.active = 0; // 如果是最后一张，跳到第一张
      }
    }

const showImage = (url) => {
  uni.previewImage({
    urls: [url],
  });
};
function changeMove(event) {
  state.value.active = event.detail.current;
}
// 获取仓型分类
function getUnitTypeData() {
  uni.showLoading();
  getApi.GetUnitTypeAll().then((res) => {
    if (res.code === 200) {
      unitTypeData.value = res.data;
      state.value.active = unitTypeData.value.findIndex(
        (item) => item.id === state.value.id
      );
    }
    uni.hideLoading();
  });
}
onLoad((prams) => {
  state.value.id = prams.id;
  getUnitTypeData();
});
</script>
<style lang="scss" scoped>
@import "@/static/style/theme.scss";

.container {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(
    to bottom,
    var(--right-linear),
    var(--left-linear2)
  );
  background-attachment: fixed;
  .content {
    width: 100%;
    min-height: 100vh;
    padding: 0 40rpx;
    background-color: #fff;
    .swiper-container{
      height: 500rpx;
      .warehouse-detail-items {
        display: flex;
        justify-content: center;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      .right{
        .unit{
          font-size: 28rpx;
          font-weight: bold;
        }
        .size{
          font-size: 20rpx;
          color: #999;
          opacity: 0.8; 
          margin-top: 10rpx;
        }
      }
    }
    .info{
      display: flex;
      .arrow{
        width: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center; 
        .arrowIcon{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 60rpx;
          height: 60rpx;
          background-color: #999;
          text-align: center;
          opacity: 0.4;
          border-radius: 999px;
        }
      }
      .swiper-container{
        flex: 1;
      }
    }
    .detail{
      font-size: 26rpx;
      .libox{
        display: flex;
        margin-top: 10rpx;
        font-weight: bold;
        .iconBox{
          margin-right: 10rpx;
        }
        .discountli{
          display: flex;
          .discountBox {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          .discount{
            padding: 8rpx 20rpx;
            border-radius: 16rpx;
            text-align: center;
            border: 1px solid #999;
            min-width: 180rpx;
            font-size: 20rpx;
            margin-right: 20px;
            margin-bottom: 10rpx;

          }
        }
        }
        
      }

    }
  }
}
</style>