uniapp-app/pages_app/pptDetail/pptDetail.vue

<template>
  <view class="ppt-detail-page">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      left-icon="left"
      title="课件详情"
      @clickLeft="goBack"
      fixed
      color="#8B2316"
      height="180rpx"
      :border="false"
      backgroundColor="#eeeeee"
    >
      <template v-slot:right>
        <view class="nav-actions">
          <uni-icons type="paperplane" size="22" color="#8B2316"></uni-icons>
          <view class="collect-img" @click="toggleCollection">
            <image
              class="collect-img-icon"
              :src="isCollection==1 ? collectImg : discollectImg"
              mode="aspectFill"
            />
          </view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 下载提示条 -->
    <view
      class="download-bar"
      @click="goView"
      v-if="order && order.order_status == 'paid'"
    >
      <view class="download-inner">
        <text class="download-text">查看课件</text>
      </view>
    </view>
    <view class="download-bar" @click="goPay" v-else>
      <view class="download-inner">
        <u-icon name="download" color="#fff" size="28"></u-icon>
        <text class="download-text">本课件下载</text>
        <text class="download-price">{{ price }}</text>
        <text class="download-unit">元</text>
      </view>
    </view>
    <!-- <web-view :src="src"></web-view> -->
    <!-- 图片浏览 -->
    <!-- <view class="viewer">
			<swiper
				class="ppt-swiper"
				:indicator-dots="false"
				:circular="true"
				:autoplay="false"
				@change="onSwiperChange"
			>
				<swiper-item v-for="(img, idx) in images" :key="idx">
					<view class="slide">
						<image :src="img" mode="widthFix" class="slide-image" />
					</view>
				</swiper-item>
			</swiper>
			<view class="page-indicator">{{ currentIndex + 1 }}/{{ images.length }}</view>
		</view> -->
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import api from "@/api/api";
import navTo from "@/utils/navTo.js";
import collectImg from '@/static/icon_book_collect_sel.png';
import discollectImg from '@/static/icon_book_collect_nor.png';
const uuid = ref("");
const hcp_token = ref("");
const order = ref(null);
const isCollection = ref(0);
onLoad((options) => {
  console.log(options);
  uuid.value = options.uuid;

  checkUser(options);
});
onShow(() => {
  ganDanFileDetials();
});
const goView = () => {
  navTo({
    url: "/pages_app/pptView/pptView?uuid=" + uuid.value,
  });
};

const collection = () => {
  api
    .collection({
      other_uuid: uuid.value,
      type: 6,
    })
    .then((res) => {
      if (res.code == 200) {
        uni.showToast({
          title: "收藏成功",
          icon: "none",
        });
      }
    });
};
const toggleCollection = () => {
  if (isCollection.value == 1) {
    discollection();
  } else {
    collection();
  }
};
const discollection = () => {
  api
    .discollection({
      other_uuid: uuid.value,
      type: 6,
    })
    .then((res) => {
      console.log(res);
      if (res.code == 200) {
        uni.showToast({
          title: "取消收藏成功",
          icon: "none",
        });
      }
    });
};
const checkUser = async (options) => {
  const res = await api.checkUser();
  if (res.code == 200) {
    hcp_token.value = res.data.hcp_token;

    // #ifdef APP-PLUS
    let wv = plus.webview.create("", "custom-webview", {
      top: "140rpx",
    });
    wv.loadURL(decodeURIComponent(options.src));
    let newstr = `document.cookie="hcp_token=${hcp_token.value};domain=.igandan.com;path=/;"`;
    /* 获取屏幕信息 */
    let pages = getCurrentPages();
    let page = pages[pages.length - 1];

    var currentWebview = page.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
    currentWebview.append(wv);
    setTimeout(function () {
      wv = currentWebview.children()[0];
      wv.setStyle({ top: 200, height: 1000 });
    }, 1000); //如果是页面初始化调用时，需要延时一下
    wv.onloaded = (e) => {
      console.log(newstr);
      wv.evalJS(newstr);
      wv.evalJS(
        `document.cookie="hcp_from=expert_app;domain=.igandan.com;path=/"`
      );
      wv.show();
    };
    // #endif
  }
};
const goPay = () => {
  navTo({
    url: "/pages_app/pay/pay?uuid=" + uuid.value + "&type=ganDanFile",
  });
};
const ganDanFileDetials = async () => {
  const res = await api.ganDanFileDetials({
    file_uuid: uuid.value,
  });
  if (res.code == 200) {
	isCollection.value = res.data.iscollection;
    order.value = res.data.order;
    let money = (res.data.price - res.data.welfareNum) / 100;
    price.value = money > 1 ? money.toFixed(1) : money.toFixed(2);
  }
};

const images = ref([
  "/static/big_background_my.png",
  "/static/big_background_my.png",
  "/static/big_background_my.png",
]);
const currentIndex = ref(1); // 对应截图显示 2/23 的第二页效果
const price = ref("1.0");

const onSwiperChange = (e) => {
  currentIndex.value = e.detail.current;
};

const goBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: (err) => {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.ppt-detail-page {
  background-color: #ffffff;
  min-height: 100vh;
}
.collect-img-icon{
	width: 40rpx;
	height: 40rpx;
}
.nav-actions {
  display: flex;
  align-items: center;
}

.download-bar {
  position: fixed;
  top: calc(var(--status-bar-height) + 44px);
  z-index: 89;
  width: 100%;
  background-color: #6f6f6f; // 接近截图灰条
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.download-inner {
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.download-text {
  margin-left: 12rpx;
  font-size: 28rpx;
}
.download-price {
  margin-left: 8rpx;
  color: #ff3b30; // 红色价格

  font-size: 30rpx;
}
.download-unit {
  margin-left: 4rpx;
  font-size: 26rpx;
}

.viewer {
  padding: 24rpx 0;
}

.ppt-swiper {
  width: 100%;
  min-height: 400rpx;
  background-color: #fff;
}
.slide {
  width: 100%;
  display: flex;
  justify-content: center;
}
.slide-image {
  width: 100%;
}

.page-indicator {
  margin-top: 20rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}
</style>