|
- <template>
- <view class="page">
- <!-- 轮播图 -->
- <u-swiper
- indicator
- indicatorMode="dot"
- circular
- :radius="30"
- :autoplay="false"
- :list="swiperList"
- keyName="image"
- @change="getSwiperIndex"
- @click="previewImage"
- ></u-swiper>
- <view class="checkMore">左右滑动查看更多</view>
- <!-- <view class="uploadBtn grayBtn">
- <text>我要让照片说话</text>
- <view class="free">
- <text>耗金币2枚</text>
- </view>
- </view> -->
- <view @click="downloadImg" class="uploadBtn">
- <text>下载照片</text>
- </view>
- <view class="grayBtn" @click="photoSupper">
- <!-- <view v-if="supperPhotoState == 0 || supperPhotoState == 3" class="free">
- <text>耗金币1枚</text>
- </view> -->
- {{ supperTips() }}
- </view>
- <!-- 底部 -->
- <view class="bottomBox">
- <view class="tips">
- <text>邀请好友可获得2枚金币</text>
- </view>
- <button open-type="share" class="shareBtn">分享</button>
- <view class="shareBtn" @click="inviteFriend">邀请好友</view>
- <view class="shareBtn" @click="buyCoin">金币充值</view>
- </view>
- </view>
- </template>
-
- <script setup>
- // import myloading from '../../components/myLoading.vue'
- //#region 导入
- import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
- import { ref, reactive, watch } from "vue";
- import { userInfoModules } from "@/store/modules/userInfo";
- import {
- getPhotoListApi,
- photoSupperApi,
- getSupperPhotoStateApi,
- } from "../../api/lookPhoto.js";
- //#endregion
- const userInfoModulesPinia = userInfoModules();
- //#region 轮播图
- const workId = ref(null); //作品id
- onLoad(async (options) => {
- workId.value = options.id;
- await getSwiperList();
- await getSupperPhotoState(swiperList.value[0].id);
- });
- const swiperList = ref([]); //轮播图
- const previewImageList = ref([]); //预览图片列表
-
- async function getSwiperList() {
- const res = await getPhotoListApi(workId.value);
- console.log(res.data.photoList);
- swiperList.value = res.data.photoList;
- swiperList.value.forEach((item) => {
- if (item.imageSuper) {
- previewImageList.value.push(item.imageSuper);
- } else {
- previewImageList.value.push(item.image);
- }
- });
- }
- //#endregion ---------------------
-
- //#region 下载
- const swiperIndex = ref(0);
- function getSwiperIndex(index) {
- swiperIndex.value = index.current;
- }
- function downloadImg() {
- let filePath = wx.env.USER_DATA_PATH + "/" + "zhixiang.png";
- uni.downloadFile({
- filePath: filePath,
- url: swiperList.value[swiperIndex.value].imageSuper
- ? swiperList.value[swiperIndex.value].imageSuper
- : swiperList.value[swiperIndex.value].image, //仅为示例,并非真实的资源
- // url: "http://tmp/iFlp7n9vAaaEa3276321f9c19ed0031617eb27119af4.png", //仅为示例,并非真实的资源
- success: (res) => {
- let data = res;
- console.log(data);
- // console.log(res);
- if (res.statusCode == 200) {
- uni.saveImageToPhotosAlbum({
- filePath: filePath,
- // .replace(".bin", ".png")
- // filePath: data.tempFilePath,
- success: () => {
- //提示保存成功
- uni.showToast({
- title: "保存成功",
- iconL: "success",
- duration: 2000,
- });
- },
- fail: (res2) => {
- //失败关闭提示信息!!!
- uni.showToast({
- icon: "none",
- title: "下载失败",
- duration: 3000,
- });
- console.log("下载失败", res2);
- },
- complete: function () {
- //隐藏提示
- // uni.hideLoading();
- },
- });
- }
- },
- fail: (err) => {
- console.log(err, "err");
- uni.showToast({
- icon: "none",
- mask: true,
- title: "下载失败,请重新下载",
- });
- },
- });
- // if (userInfoModulesPinia.platForm != 1) {
- // uni.saveImageToPhotosAlbum({
- // filePath: "https://uiadmin.net/uview-plus/common/logo.png",
- // success: function () {
- // console.log("save success");
- // },
- // });
- // } else {
- // const link = document.createElement("a");
- // link.href = "https://uiadmin.net/uview-plus/common/logo.png";
- // link.download = "image.jpg";
- // link.click();
- // }
- }
- //#endregion ---------------------
-
- //#region
- function previewImage(index) {
- uni.previewImage({
- current: index, //预览图片的下标
- urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
- loop: true,
- });
- }
- //#endregion ---------------------
-
- //#region 分享
- onShareAppMessage((res) => {
- // 分享事件来源:button(页面内分享按钮)、menu(右上角分享按钮)
- if (res.from === "button") {
- // 来自页面内分享按钮
- return {
- //分享标题
- title: "智像",
- //页面 path
- path: `/pages/login/index`,
- // 分享图标
- // imageUr: shopDetailsData.value?.GoodsCoverImg,
- success: function () {
- // 转发成功
- console.log("res", res);
- },
- fail: function () {
- // 转发失败
- console.log("res", res);
- },
- };
- } else {
- return {
- title: "智像",
- path: "/pages/login/index",
- // imageUr: shopDetailsData.value?.GoodsCoverImg,
- };
- }
- });
- // onShareAppMessage((res) => {
- // return {
- // title: "页面分享的标题",
- // path: "pages/uploadPhoto/uploadPhoto",
- // // imageUrl: "",
- // };
- // });
-
- function share() {
- // --------------------------------------------------
- // uni.showToast({
- // title: "敬请期待!",
- // icon: "none",
- // });
- // return;
- // uni.onShareAppMessage({
- // provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo)
- // scene: "WXSenceTimeline", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
- // type: 5,
- // title: "分享到朋友圈",
- // summary: "分享描述",
- // href: "www.baidu.com", //分享跳转地址
- // imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片)
- // miniProgram: {
- // id: "wx75cf14e3a0d45821",
- // path: "pages/index/index",
- // type: 0,
- // webUrl: "",
- // },
- // success: function (res) {
- // },
- // fail: function (err) {
- // },
- // });
- }
- function inviteFriend() {
- uni.showToast({
- title: "敬请期待!",
- icon: "none",
- });
- return;
- uni.share({
- provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo)
- scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
- type: 5,
- title: "分享给好友",
- summary: "分享描述",
- href: "www.baidu.com", //分享跳转地址
- imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片)
- miniProgram: {
- id: "gwx75cf14e3a0d45821",
- path: "pages/index/index",
- type: 0,
- webUrl: "",
- },
- success: function (res) {
- // console.log("success:" + JSON.stringify(res));
- },
- fail: function (err) {
- // console.log("fail:" + JSON.stringify(err));
- },
- });
- }
- //#endregion ---------------------
-
- //#region 页面跳转
- function buyCoin() {
- if (userInfoModulesPinia.platForm == 3) {
- uni.showToast({
- title: "暂未开放",
- icon: "none",
- mask: true,
- });
- } else {
- uni.navigateTo({
- url: "/pages/index/buyCoin",
- });
- }
- }
- //#endregion ---------------------
-
- //#region 超分相关
- const supperPhotoState = ref(false);
- async function photoSupper() {
- if (supperPhotoState.value == 1 || supperPhotoState.value == 2) {
- return;
- }
- // uni.showModal({
- // title: "提示",
- // content: "确定高清处理?",
- // success: function (res) {
- // if (res.confirm) {
- // checkboxValue.value = ["同意智像相机用户使用协议"];
- // // handleLogin();
- // getphonenumber(e);
- // } else if (res.cancel) {
- // }
- // },
- // fail: (err) => {},
- // });
- try {
- uni.showLoading({
- title: "高清处理中...",
- mask: true,
- });
- const res = await photoSupperApi({
- id: swiperList.value[swiperIndex.value].id,
- });
- console.log(res);
- uni.hideLoading();
- uni.showToast({
- title: "高清处理请求成功,请稍后",
- title: "高清处理请求成功,请稍等",
- icon: "none",
- });
-
- getSupperPhotoState(swiperList.value[swiperIndex.value].id);
- } catch (error) {
- console.log(error, "超分失败");
- uni.hideLoading();
- uni.showToast({
- title: "高清处理失败,请重试",
- icon: "none",
- });
- }
- }
-
- async function getSupperPhotoState(id) {
- try {
- const res = await getSupperPhotoStateApi(id);
- supperPhotoState.value = res.data.status;
- console.log(supperPhotoState.value, "状态");
- } catch (error) {
- console.log(error, "超分失败");
- }
- }
-
- function supperTips(params) {
- if (supperPhotoState.value == 0 || supperPhotoState.value == 3) {
- return "一键高清";
- } else if (supperPhotoState.value == 1) {
- return "高清处理中,请稍后";
- } else if (supperPhotoState.value == 2) {
- return "已高清处理";
- }
- }
-
- watch(
- () => swiperIndex.value,
- (index) => {
- getSupperPhotoState(swiperList.value[index].id);
- }
- );
- //#endregion ---------------------
-
- //#region
-
- //#endregion ---------------------
- </script>
-
- <style lang="scss">
- .page {
- background-color: rgba(24, 25, 26, 1);
- }
- // 轮播图
- .u-swiper {
- margin-top: 40rpx;
- width: 540rpx;
- height: 720rpx !important;
- border-radius: 50rpx;
- swiper {
- width: 100%;
- height: 720rpx !important;
- image {
- width: 100%;
- height: 720rpx !important;
- }
- }
-
- // h5
- :deep(.u-swiper__wrapper) {
- width: 100%;
- height: 720rpx !important;
- image {
- width: 100%;
- height: 720rpx !important;
- }
- }
- }
-
- .checkMore {
- color: #ffffff;
- margin-top: 30rpx;
- }
-
- // 俩按钮
- .uploadBtn {
- position: relative;
- margin-top: 100rpx;
- width: 520rpx;
- height: 100rpx;
- line-height: 100rpx;
- text-align: center;
- background: #ff4f00;
- border-radius: 50rpx;
- font-size: 30rpx;
- color: #fff;
- font-weight: 900;
- .free {
- position: absolute;
- top: -18rpx;
- right: -70rpx;
- width: 142rpx;
- height: 50rpx;
- background-color: #000;
- border-radius: 25rpx 25rpx 25rpx 0;
- font-size: 22rpx;
- font-weight: 900;
- line-height: 50rpx;
- text-align: center;
- // image {
- // position: absolute;
- // top: 0;
- // left: 0;
- // width: 100%;
- // height: 100%;
- // z-index: 1;
- // }
- // text {
- // position: absolute;
- // top: 0rpx;
- // left: 0;
- // line-height: 49rpx;
- // width: 100%;
- // height: 100%;
- // font-size: 22rpx;
- // font-weight: 900;
- // z-index: 2;
- // }
- }
- }
- .grayBtn {
- .free {
- position: absolute;
- color: #fff;
- top: -18rpx;
- right: -70rpx;
- width: 142rpx;
- height: 50rpx;
- background-color: #ff4f00;
- border-radius: 25rpx 25rpx 25rpx 0;
- font-size: 22rpx;
- font-weight: 900;
- line-height: 50rpx;
- text-align: center;
- }
- }
-
- .bottomBox {
- flex: 1;
- position: relative;
- bottom: -30rpx;
- width: 100%;
- display: flex;
- justify-content: space-between;
- padding: 65rpx 10rpx 0;
- .tips {
- position: absolute;
- top: 0rpx;
- right: 60rpx;
- width: 313rpx;
- height: 50rpx;
- background-color: #000;
- border-radius: 25rpx 25rpx 25rpx 0;
- font-size: 22rpx;
- font-weight: 900;
- line-height: 50rpx;
- text-align: center;
- }
- .shareBtn {
- width: 200rpx;
- height: 70rpx;
- line-height: 70rpx;
- text-align: center;
- border-radius: 70rpx;
- background-color: rgba(255, 255, 255, 0.1);
- }
- }
- </style>
|