邃芒智像(Uniapp : WX、TT、H5)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 

479 řádky
12 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 轮播图 -->
  4. <u-swiper
  5. indicator
  6. indicatorMode="dot"
  7. circular
  8. :radius="30"
  9. :autoplay="false"
  10. :list="swiperList"
  11. keyName="image"
  12. @change="getSwiperIndex"
  13. @click="previewImage"
  14. ></u-swiper>
  15. <view class="checkMore">左右滑动查看更多</view>
  16. <!-- <view class="uploadBtn grayBtn">
  17. <text>我要让照片说话</text>
  18. <view class="free">
  19. <text>耗金币2枚</text>
  20. </view>
  21. </view> -->
  22. <view @click="downloadImg" class="uploadBtn">
  23. <text>下载照片</text>
  24. </view>
  25. <view class="grayBtn" @click="photoSupper">
  26. <!-- <view v-if="supperPhotoState == 0 || supperPhotoState == 3" class="free">
  27. <text>耗金币1枚</text>
  28. </view> -->
  29. {{ supperTips() }}
  30. </view>
  31. <!-- 底部 -->
  32. <view class="bottomBox">
  33. <view class="tips">
  34. <text>邀请好友可获得2枚金币</text>
  35. </view>
  36. <button open-type="share" class="shareBtn">分享</button>
  37. <view class="shareBtn" @click="inviteFriend">邀请好友</view>
  38. <view class="shareBtn" @click="buyCoin">金币充值</view>
  39. </view>
  40. </view>
  41. </template>
  42. <script setup>
  43. // import myloading from '../../components/myLoading.vue'
  44. //#region 导入
  45. import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
  46. import { ref, reactive, watch } from "vue";
  47. import { userInfoModules } from "@/store/modules/userInfo";
  48. import {
  49. getPhotoListApi,
  50. photoSupperApi,
  51. getSupperPhotoStateApi,
  52. } from "../../api/lookPhoto.js";
  53. //#endregion
  54. const userInfoModulesPinia = userInfoModules();
  55. //#region 轮播图
  56. const workId = ref(null); //作品id
  57. onLoad(async (options) => {
  58. workId.value = options.id;
  59. await getSwiperList();
  60. await getSupperPhotoState(swiperList.value[0].id);
  61. });
  62. const swiperList = ref([]); //轮播图
  63. const previewImageList = ref([]); //预览图片列表
  64. async function getSwiperList() {
  65. const res = await getPhotoListApi(workId.value);
  66. console.log(res.data.photoList);
  67. swiperList.value = res.data.photoList;
  68. swiperList.value.forEach((item) => {
  69. if (item.imageSuper) {
  70. previewImageList.value.push(item.imageSuper);
  71. } else {
  72. previewImageList.value.push(item.image);
  73. }
  74. });
  75. }
  76. //#endregion ---------------------
  77. //#region 下载
  78. const swiperIndex = ref(0);
  79. function getSwiperIndex(index) {
  80. swiperIndex.value = index.current;
  81. }
  82. function downloadImg() {
  83. let filePath = wx.env.USER_DATA_PATH + "/" + "zhixiang.png";
  84. uni.downloadFile({
  85. filePath: filePath,
  86. url: swiperList.value[swiperIndex.value].imageSuper
  87. ? swiperList.value[swiperIndex.value].imageSuper
  88. : swiperList.value[swiperIndex.value].image, //仅为示例,并非真实的资源
  89. // url: "http://tmp/iFlp7n9vAaaEa3276321f9c19ed0031617eb27119af4.png", //仅为示例,并非真实的资源
  90. success: (res) => {
  91. let data = res;
  92. console.log(data);
  93. // console.log(res);
  94. if (res.statusCode == 200) {
  95. uni.saveImageToPhotosAlbum({
  96. filePath: filePath,
  97. // .replace(".bin", ".png")
  98. // filePath: data.tempFilePath,
  99. success: () => {
  100. //提示保存成功
  101. uni.showToast({
  102. title: "保存成功",
  103. iconL: "success",
  104. duration: 2000,
  105. });
  106. },
  107. fail: (res2) => {
  108. //失败关闭提示信息!!!
  109. uni.showToast({
  110. icon: "none",
  111. title: "下载失败",
  112. duration: 3000,
  113. });
  114. console.log("下载失败", res2);
  115. },
  116. complete: function () {
  117. //隐藏提示
  118. // uni.hideLoading();
  119. },
  120. });
  121. }
  122. },
  123. fail: (err) => {
  124. console.log(err, "err");
  125. uni.showToast({
  126. icon: "none",
  127. mask: true,
  128. title: "下载失败,请重新下载",
  129. });
  130. },
  131. });
  132. // if (userInfoModulesPinia.platForm != 1) {
  133. // uni.saveImageToPhotosAlbum({
  134. // filePath: "https://uiadmin.net/uview-plus/common/logo.png",
  135. // success: function () {
  136. // console.log("save success");
  137. // },
  138. // });
  139. // } else {
  140. // const link = document.createElement("a");
  141. // link.href = "https://uiadmin.net/uview-plus/common/logo.png";
  142. // link.download = "image.jpg";
  143. // link.click();
  144. // }
  145. }
  146. //#endregion ---------------------
  147. //#region
  148. function previewImage(index) {
  149. uni.previewImage({
  150. current: index, //预览图片的下标
  151. urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
  152. loop: true,
  153. });
  154. }
  155. //#endregion ---------------------
  156. //#region 分享
  157. onShareAppMessage((res) => {
  158. // 分享事件来源:button(页面内分享按钮)、menu(右上角分享按钮)
  159. if (res.from === "button") {
  160. // 来自页面内分享按钮
  161. return {
  162. //分享标题
  163. title: "智像",
  164. //页面 path
  165. path: `/pages/login/index`,
  166. // 分享图标
  167. // imageUr: shopDetailsData.value?.GoodsCoverImg,
  168. success: function () {
  169. // 转发成功
  170. console.log("res", res);
  171. },
  172. fail: function () {
  173. // 转发失败
  174. console.log("res", res);
  175. },
  176. };
  177. } else {
  178. return {
  179. title: "智像",
  180. path: "/pages/login/index",
  181. // imageUr: shopDetailsData.value?.GoodsCoverImg,
  182. };
  183. }
  184. });
  185. // onShareAppMessage((res) => {
  186. // return {
  187. // title: "页面分享的标题",
  188. // path: "pages/uploadPhoto/uploadPhoto",
  189. // // imageUrl: "",
  190. // };
  191. // });
  192. function share() {
  193. // --------------------------------------------------
  194. // uni.showToast({
  195. // title: "敬请期待!",
  196. // icon: "none",
  197. // });
  198. // return;
  199. // uni.onShareAppMessage({
  200. // provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo)
  201. // scene: "WXSenceTimeline", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
  202. // type: 5,
  203. // title: "分享到朋友圈",
  204. // summary: "分享描述",
  205. // href: "www.baidu.com", //分享跳转地址
  206. // imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片)
  207. // miniProgram: {
  208. // id: "wx75cf14e3a0d45821",
  209. // path: "pages/index/index",
  210. // type: 0,
  211. // webUrl: "",
  212. // },
  213. // success: function (res) {
  214. // },
  215. // fail: function (err) {
  216. // },
  217. // });
  218. }
  219. function inviteFriend() {
  220. uni.showToast({
  221. title: "敬请期待!",
  222. icon: "none",
  223. });
  224. return;
  225. uni.share({
  226. provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo)
  227. scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
  228. type: 5,
  229. title: "分享给好友",
  230. summary: "分享描述",
  231. href: "www.baidu.com", //分享跳转地址
  232. imageUrl: "../static/lovehot.png", //分享图片路径(必须是线上可访问图片)
  233. miniProgram: {
  234. id: "gwx75cf14e3a0d45821",
  235. path: "pages/index/index",
  236. type: 0,
  237. webUrl: "",
  238. },
  239. success: function (res) {
  240. // console.log("success:" + JSON.stringify(res));
  241. },
  242. fail: function (err) {
  243. // console.log("fail:" + JSON.stringify(err));
  244. },
  245. });
  246. }
  247. //#endregion ---------------------
  248. //#region 页面跳转
  249. function buyCoin() {
  250. if (userInfoModulesPinia.platForm == 3) {
  251. uni.showToast({
  252. title: "暂未开放",
  253. icon: "none",
  254. mask: true,
  255. });
  256. } else {
  257. uni.navigateTo({
  258. url: "/pages/index/buyCoin",
  259. });
  260. }
  261. }
  262. //#endregion ---------------------
  263. //#region 超分相关
  264. const supperPhotoState = ref(false);
  265. async function photoSupper() {
  266. if (supperPhotoState.value == 1 || supperPhotoState.value == 2) {
  267. return;
  268. }
  269. // uni.showModal({
  270. // title: "提示",
  271. // content: "确定高清处理?",
  272. // success: function (res) {
  273. // if (res.confirm) {
  274. // checkboxValue.value = ["同意智像相机用户使用协议"];
  275. // // handleLogin();
  276. // getphonenumber(e);
  277. // } else if (res.cancel) {
  278. // }
  279. // },
  280. // fail: (err) => {},
  281. // });
  282. try {
  283. uni.showLoading({
  284. title: "高清处理中...",
  285. mask: true,
  286. });
  287. const res = await photoSupperApi({
  288. id: swiperList.value[swiperIndex.value].id,
  289. });
  290. console.log(res);
  291. uni.hideLoading();
  292. uni.showToast({
  293. title: "高清处理请求成功,请稍后",
  294. title: "高清处理请求成功,请稍等",
  295. icon: "none",
  296. });
  297. getSupperPhotoState(swiperList.value[swiperIndex.value].id);
  298. } catch (error) {
  299. console.log(error, "超分失败");
  300. uni.hideLoading();
  301. uni.showToast({
  302. title: "高清处理失败,请重试",
  303. icon: "none",
  304. });
  305. }
  306. }
  307. async function getSupperPhotoState(id) {
  308. try {
  309. const res = await getSupperPhotoStateApi(id);
  310. supperPhotoState.value = res.data.status;
  311. console.log(supperPhotoState.value, "状态");
  312. } catch (error) {
  313. console.log(error, "超分失败");
  314. }
  315. }
  316. function supperTips(params) {
  317. if (supperPhotoState.value == 0 || supperPhotoState.value == 3) {
  318. return "一键高清";
  319. } else if (supperPhotoState.value == 1) {
  320. return "高清处理中,请稍后";
  321. } else if (supperPhotoState.value == 2) {
  322. return "已高清处理";
  323. }
  324. }
  325. watch(
  326. () => swiperIndex.value,
  327. (index) => {
  328. getSupperPhotoState(swiperList.value[index].id);
  329. }
  330. );
  331. //#endregion ---------------------
  332. //#region
  333. //#endregion ---------------------
  334. </script>
  335. <style lang="scss">
  336. .page {
  337. background-color: rgba(24, 25, 26, 1);
  338. }
  339. // 轮播图
  340. .u-swiper {
  341. margin-top: 40rpx;
  342. width: 540rpx;
  343. height: 720rpx !important;
  344. border-radius: 50rpx;
  345. swiper {
  346. width: 100%;
  347. height: 720rpx !important;
  348. image {
  349. width: 100%;
  350. height: 720rpx !important;
  351. }
  352. }
  353. // h5
  354. :deep(.u-swiper__wrapper) {
  355. width: 100%;
  356. height: 720rpx !important;
  357. image {
  358. width: 100%;
  359. height: 720rpx !important;
  360. }
  361. }
  362. }
  363. .checkMore {
  364. color: #ffffff;
  365. margin-top: 30rpx;
  366. }
  367. // 俩按钮
  368. .uploadBtn {
  369. position: relative;
  370. margin-top: 100rpx;
  371. width: 520rpx;
  372. height: 100rpx;
  373. line-height: 100rpx;
  374. text-align: center;
  375. background: #ff4f00;
  376. border-radius: 50rpx;
  377. font-size: 30rpx;
  378. color: #fff;
  379. font-weight: 900;
  380. .free {
  381. position: absolute;
  382. top: -18rpx;
  383. right: -70rpx;
  384. width: 142rpx;
  385. height: 50rpx;
  386. background-color: #000;
  387. border-radius: 25rpx 25rpx 25rpx 0;
  388. font-size: 22rpx;
  389. font-weight: 900;
  390. line-height: 50rpx;
  391. text-align: center;
  392. // image {
  393. // position: absolute;
  394. // top: 0;
  395. // left: 0;
  396. // width: 100%;
  397. // height: 100%;
  398. // z-index: 1;
  399. // }
  400. // text {
  401. // position: absolute;
  402. // top: 0rpx;
  403. // left: 0;
  404. // line-height: 49rpx;
  405. // width: 100%;
  406. // height: 100%;
  407. // font-size: 22rpx;
  408. // font-weight: 900;
  409. // z-index: 2;
  410. // }
  411. }
  412. }
  413. .grayBtn {
  414. .free {
  415. position: absolute;
  416. color: #fff;
  417. top: -18rpx;
  418. right: -70rpx;
  419. width: 142rpx;
  420. height: 50rpx;
  421. background-color: #ff4f00;
  422. border-radius: 25rpx 25rpx 25rpx 0;
  423. font-size: 22rpx;
  424. font-weight: 900;
  425. line-height: 50rpx;
  426. text-align: center;
  427. }
  428. }
  429. .bottomBox {
  430. flex: 1;
  431. position: relative;
  432. bottom: -30rpx;
  433. width: 100%;
  434. display: flex;
  435. justify-content: space-between;
  436. padding: 65rpx 10rpx 0;
  437. .tips {
  438. position: absolute;
  439. top: 0rpx;
  440. right: 60rpx;
  441. width: 313rpx;
  442. height: 50rpx;
  443. background-color: #000;
  444. border-radius: 25rpx 25rpx 25rpx 0;
  445. font-size: 22rpx;
  446. font-weight: 900;
  447. line-height: 50rpx;
  448. text-align: center;
  449. }
  450. .shareBtn {
  451. width: 200rpx;
  452. height: 70rpx;
  453. line-height: 70rpx;
  454. text-align: center;
  455. border-radius: 70rpx;
  456. background-color: rgba(255, 255, 255, 0.1);
  457. }
  458. }
  459. </style>