邃芒智像(Uniapp : WX、TT、H5)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

355 lines
8.9 KiB

  1. <template>
  2. <view class="page" @touchmove.stop.prevent="">
  3. <image class="modeImage" src="../../assets/img/img1.png" mode="aspectFit" />
  4. <!-- 轮播图 -->
  5. <!-- <u-swiper
  6. indicator
  7. indicatorMode="dot"
  8. circular
  9. :radius="30"
  10. :autoplay="false"
  11. :list="swiperList"
  12. keyName="image"
  13. @change="getSwiperIndex"
  14. @click="previewImage"
  15. ></u-swiper> -->
  16. <!-- 按钮部分 -->
  17. <view v-show="!audioUrl" class="orangeBtn" @click="openPopup">
  18. <image
  19. src="../../assets/icon/sound-2.png"
  20. mode="scaleToFill"
  21. />开始录音</view
  22. >
  23. <view v-show="audioUrl" class="orangeBtn transparentBtn" @click="playVoice"
  24. ><image src="../../assets/icon/sound-2.png" mode="scaleToFill" />试听
  25. <view class="rerecord" @click.stop="openPopup">重新录音</view>
  26. </view>
  27. <!-- <view v-show="audioUrl" class="orangeBtn" @click="openPopup">重新录音</view> -->
  28. <view class="orangeBtn" @click="">生成视频</view>
  29. <!-- 分享 -->
  30. <view class="shareBox">
  31. <view class="tips">
  32. <text>邀请好友可获得2枚金币</text>
  33. </view>
  34. <view class="shareBtn" @click="">分享</view>
  35. <view class="shareBtn" @click="">邀请好友 </view>
  36. <view class="shareBtn" @click="">购买金币</view>
  37. </view>
  38. <!-- 弹出层 -->
  39. <view class="popup" v-show="showPopup" @click.stop="showPopup = false">
  40. <!-- 声纹图片 -->
  41. <u-transition :show="showPopup">
  42. <view class="transition wavyIcon">
  43. <image src="../../assets/icon/soundBG.png" />
  44. </view>
  45. </u-transition>
  46. <!-- 底部框 -->
  47. <u-transition
  48. :show="showPopup"
  49. @touchstart.stop="startRecord"
  50. @touchend.stop="endRecord"
  51. >
  52. <view class="transition microphoneIcon">
  53. <image src="../../assets/icon/sound.png" mode="aspectFit" />
  54. </view>
  55. </u-transition>
  56. </view>
  57. </view>
  58. </template>
  59. <script setup>
  60. // import myloading from '../../components/myLoading.vue'
  61. //#region 导入
  62. import { onLoad } from "@dcloudio/uni-app";
  63. import { ref, reactive } from "vue";
  64. import { userInfoModules } from "@/store/modules/userInfo";
  65. import { getPhotoListApi } from "../../api/lookPhoto.js";
  66. const userInfoModulesPinia = userInfoModules();
  67. //#endregion
  68. //#region 轮播图
  69. const swiperList = ref([]); //轮播图
  70. async function getSwiperList() {
  71. const res = await getPhotoListApi(workId.value);
  72. console.log(res.data.photoList);
  73. swiperList.value = res.data.photoList;
  74. swiperList.value.forEach((item) => {
  75. if (item.imageSuper) {
  76. previewImageList.value.push(item.imageSuper);
  77. } else {
  78. previewImageList.value.push(item.image);
  79. }
  80. });
  81. }
  82. // 轮播图滚动
  83. const swiperIndex = ref(0);
  84. function getSwiperIndex(index) {
  85. swiperIndex.value = index.current;
  86. }
  87. // 轮播图预览
  88. const previewImageList = ref([]); //预览图片列表
  89. function previewImage(index) {
  90. uni.previewImage({
  91. current: index, //预览图片的下标
  92. urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
  93. loop: true,
  94. });
  95. }
  96. //#endregion ---------------------
  97. //#region 页面跳转
  98. function bueCoin() {
  99. uni.showToast({
  100. title: "暂未开放",
  101. icon: "none",
  102. mask: true,
  103. });
  104. // uni.navigateTo({
  105. // url: "/pages/home/buyCoin",
  106. // });
  107. }
  108. //#endregion ---------------------
  109. //#region 弹出层
  110. const showPopup = ref(true);
  111. function openPopup() {
  112. showPopup.value = true;
  113. }
  114. function close() {
  115. console.log("close");
  116. }
  117. function open() {
  118. console.log("open");
  119. }
  120. //#endregion ---------------------
  121. //#region 录音功能
  122. let Recorder = null; //h5定义录音对象
  123. let recorder = null; //h5定义录音实例
  124. let recorderManager = null; //小程序定义录音实例
  125. let innerAudioContext = null; //小程序定义mp3实例
  126. const audioUrl = ref(null);
  127. const audioRef = ref(null);
  128. if (userInfoModulesPinia.platForm == 1) {
  129. // 在 H5 平台导入 Recorder
  130. import("js-audio-recorder").then((module) => {
  131. const Recorder = module.default;
  132. // 也可以继续使用 recorder 变量
  133. const parameter = {
  134. sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
  135. sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
  136. numChannels: 1, // 声道,支持 1 或 2, 默认是1
  137. };
  138. recorder = new Recorder(parameter);
  139. });
  140. } else {
  141. recorderManager = uni.getRecorderManager();
  142. innerAudioContext = uni.createInnerAudioContext();
  143. innerAudioContext.autoplay = false;
  144. }
  145. //#endregion
  146. //#region 录音
  147. function startRecord() {
  148. if (userInfoModulesPinia.platForm != 1) {
  149. console.log("开始录音xcx");
  150. recorderManager.start({
  151. // format: "mp3", // 录音的格式
  152. duration: 60000, // 最大录音时长,单位毫秒
  153. });
  154. } else {
  155. console.log("开始录音h5");
  156. recorder.start();
  157. }
  158. }
  159. async function endRecord() {
  160. if (userInfoModulesPinia.platForm != 1) {
  161. recorderManager.onStop((res) => {
  162. console.log("录音结束xcx", res);
  163. audioUrl.value = res.tempFilePath;
  164. innerAudioContext.src = audioUrl.value;
  165. });
  166. recorderManager.stop();
  167. } else {
  168. console.log("录音结束h5");
  169. await recorder.stop();
  170. audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
  171. }
  172. showPopup.value = false;
  173. }
  174. async function playVoice() {
  175. if (userInfoModulesPinia.platForm != 1) {
  176. await innerAudioContext.play();
  177. console.log("试听了xcx");
  178. } else {
  179. const link = document.createElement("audio");
  180. link.src = audioUrl.value;
  181. link.play();
  182. console.log("试听了h5");
  183. }
  184. }
  185. //#endregion ---------------------
  186. //#region 初始化
  187. const workId = ref(null); //作品id
  188. onLoad(async (options) => {
  189. workId.value = options.id;
  190. // await getSwiperList();
  191. // await getSupperPhotoState(swiperList.value[0].id);
  192. });
  193. //#endregion ---------------------
  194. //#region
  195. //#endregion ---------------------
  196. </script>
  197. <style lang="scss">
  198. .page {
  199. position: relative;
  200. padding-bottom: 200rpx;
  201. }
  202. .modeImage {
  203. width: 540rpx;
  204. height: 720rpx;
  205. }
  206. .myBtnbox {
  207. margin-top: 30rpx;
  208. }
  209. .orangeBtn {
  210. position: relative;
  211. margin-top: 30rpx;
  212. image {
  213. vertical-align: text-top;
  214. width: 52rpx;
  215. height: 40rpx;
  216. margin-right: 20rpx;
  217. }
  218. .rerecord {
  219. position: absolute;
  220. top: -14rpx;
  221. right: -78rpx;
  222. height: 50rpx;
  223. width: 142rpx;
  224. text-align: center;
  225. line-height: 50rpx;
  226. border-radius: 25rpx;
  227. background-color: #000;
  228. font-size: 22rpx;
  229. font-weight: bold;
  230. }
  231. }
  232. .transparentBtn {
  233. background-color: transparent;
  234. border: 2rpx solid #fff;
  235. }
  236. .shareBox {
  237. position: absolute;
  238. bottom: 100rpx;
  239. padding: 0 60rpx;
  240. // margin-top: 150rpx;
  241. width: 100%;
  242. display: flex;
  243. justify-content: space-between;
  244. .tips {
  245. position: absolute;
  246. top: -70rpx;
  247. right: 60rpx;
  248. width: 313rpx;
  249. height: 50rpx;
  250. background-color: #000;
  251. border-radius: 25rpx 25rpx 25rpx 0;
  252. font-size: 22rpx;
  253. font-weight: 900;
  254. line-height: 50rpx;
  255. text-align: center;
  256. }
  257. .shareBtn {
  258. width: 200rpx;
  259. height: 72rpx;
  260. line-height: 72rpx;
  261. text-align: center;
  262. background-color: #3d3e3f;
  263. border-radius: 36rpx;
  264. font-size: 26rpx;
  265. font-weight: 400;
  266. color: #ffffff;
  267. }
  268. }
  269. .popup {
  270. position: absolute;
  271. width: 100vw;
  272. height: 100vh;
  273. background-color: rgba(0, 0, 0, 0.5);
  274. z-index: 2;
  275. .wavyIcon {
  276. position: absolute;
  277. top: 50%;
  278. left: 50%;
  279. transform: translate(-50%, -50%);
  280. width: 530rpx;
  281. height: 173rpx;
  282. // background-color: #fff;
  283. z-index: 3;
  284. overflow: hidden;
  285. image {
  286. width: 520rpx;
  287. height: 173rpx;
  288. }
  289. // image {
  290. // position: absolute;
  291. // left: -500rpx;
  292. // display: inline-block;
  293. // width: 1000rpx;
  294. // height: 160rpx;
  295. // z-index: 3;
  296. // // animation: moveImage 3s linear infinite;
  297. // }
  298. @keyframes moveImage {
  299. 0% {
  300. left: -100rpx;
  301. }
  302. 50% {
  303. left: -500rpx;
  304. }
  305. 100% {
  306. left: -100rpx;
  307. }
  308. }
  309. }
  310. .microphoneIcon {
  311. position: absolute;
  312. bottom: 0;
  313. height: 410rpx;
  314. width: 100%;
  315. border-radius: 36rpx 36rpx 0 0;
  316. background-color: #fff;
  317. z-index: 3;
  318. display: flex;
  319. flex-direction: column;
  320. align-items: center;
  321. justify-content: center;
  322. image {
  323. // max-width: 0%;
  324. // max-height: 0%;
  325. width: 108rpx;
  326. height: 83rpx;
  327. touch-action: none;
  328. z-index: -1;
  329. pointer-events: none;
  330. }
  331. }
  332. }
  333. </style>