邃芒智像(Uniapp : WX、TT、H5)
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

358 wiersze
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. if (userInfoModulesPinia.platForm == 3) {
  100. uni.showToast({
  101. title: "暂未开放",
  102. icon: "none",
  103. mask: true,
  104. });
  105. } else {
  106. uni.navigateTo({
  107. url: "/pages/index/buyCoin",
  108. });
  109. }
  110. }
  111. //#endregion ---------------------
  112. //#region 弹出层
  113. const showPopup = ref(true);
  114. function openPopup() {
  115. showPopup.value = true;
  116. }
  117. function close() {
  118. console.log("close");
  119. }
  120. function open() {
  121. console.log("open");
  122. }
  123. //#endregion ---------------------
  124. //#region 录音功能
  125. let Recorder = null; //h5定义录音对象
  126. let recorder = null; //h5定义录音实例
  127. let recorderManager = null; //小程序定义录音实例
  128. let innerAudioContext = null; //小程序定义mp3实例
  129. const audioUrl = ref(null);
  130. const audioRef = ref(null);
  131. if (userInfoModulesPinia.platForm == 1) {
  132. // 在 H5 平台导入 Recorder
  133. import("js-audio-recorder").then((module) => {
  134. const Recorder = module.default;
  135. // 也可以继续使用 recorder 变量
  136. const parameter = {
  137. sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
  138. sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
  139. numChannels: 1, // 声道,支持 1 或 2, 默认是1
  140. };
  141. recorder = new Recorder(parameter);
  142. });
  143. } else {
  144. recorderManager = uni.getRecorderManager();
  145. innerAudioContext = uni.createInnerAudioContext();
  146. innerAudioContext.autoplay = false;
  147. }
  148. //#endregion
  149. //#region 录音
  150. function startRecord() {
  151. if (userInfoModulesPinia.platForm != 1) {
  152. console.log("开始录音xcx");
  153. recorderManager.start({
  154. // format: "mp3", // 录音的格式
  155. duration: 60000, // 最大录音时长,单位毫秒
  156. });
  157. } else {
  158. console.log("开始录音h5");
  159. recorder.start();
  160. }
  161. }
  162. async function endRecord() {
  163. if (userInfoModulesPinia.platForm != 1) {
  164. recorderManager.onStop((res) => {
  165. console.log("录音结束xcx", res);
  166. audioUrl.value = res.tempFilePath;
  167. innerAudioContext.src = audioUrl.value;
  168. });
  169. recorderManager.stop();
  170. } else {
  171. console.log("录音结束h5");
  172. await recorder.stop();
  173. audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
  174. }
  175. showPopup.value = false;
  176. }
  177. async function playVoice() {
  178. if (userInfoModulesPinia.platForm != 1) {
  179. await innerAudioContext.play();
  180. console.log("试听了xcx");
  181. } else {
  182. const link = document.createElement("audio");
  183. link.src = audioUrl.value;
  184. link.play();
  185. console.log("试听了h5");
  186. }
  187. }
  188. //#endregion ---------------------
  189. //#region 初始化
  190. const workId = ref(null); //作品id
  191. onLoad(async (options) => {
  192. workId.value = options.id;
  193. // await getSwiperList();
  194. // await getSupperPhotoState(swiperList.value[0].id);
  195. });
  196. //#endregion ---------------------
  197. //#region
  198. //#endregion ---------------------
  199. </script>
  200. <style lang="scss">
  201. .page {
  202. position: relative;
  203. padding-bottom: 200rpx;
  204. }
  205. .modeImage {
  206. width: 540rpx;
  207. height: 720rpx;
  208. }
  209. .myBtnbox {
  210. margin-top: 30rpx;
  211. }
  212. .orangeBtn {
  213. position: relative;
  214. margin-top: 30rpx;
  215. image {
  216. vertical-align: text-top;
  217. width: 52rpx;
  218. height: 40rpx;
  219. margin-right: 20rpx;
  220. }
  221. .rerecord {
  222. position: absolute;
  223. top: -14rpx;
  224. right: -78rpx;
  225. height: 50rpx;
  226. width: 142rpx;
  227. text-align: center;
  228. line-height: 50rpx;
  229. border-radius: 25rpx;
  230. background-color: #000;
  231. font-size: 22rpx;
  232. font-weight: bold;
  233. }
  234. }
  235. .transparentBtn {
  236. background-color: transparent;
  237. border: 2rpx solid #fff;
  238. }
  239. .shareBox {
  240. position: absolute;
  241. bottom: 100rpx;
  242. padding: 0 60rpx;
  243. // margin-top: 150rpx;
  244. width: 100%;
  245. display: flex;
  246. justify-content: space-between;
  247. .tips {
  248. position: absolute;
  249. top: -70rpx;
  250. right: 60rpx;
  251. width: 313rpx;
  252. height: 50rpx;
  253. background-color: #000;
  254. border-radius: 25rpx 25rpx 25rpx 0;
  255. font-size: 22rpx;
  256. font-weight: 900;
  257. line-height: 50rpx;
  258. text-align: center;
  259. }
  260. .shareBtn {
  261. width: 200rpx;
  262. height: 72rpx;
  263. line-height: 72rpx;
  264. text-align: center;
  265. background-color: #3d3e3f;
  266. border-radius: 36rpx;
  267. font-size: 26rpx;
  268. font-weight: 400;
  269. color: #ffffff;
  270. }
  271. }
  272. .popup {
  273. position: absolute;
  274. width: 100vw;
  275. height: 100vh;
  276. background-color: rgba(0, 0, 0, 0.5);
  277. z-index: 2;
  278. .wavyIcon {
  279. position: absolute;
  280. top: 50%;
  281. left: 50%;
  282. transform: translate(-50%, -50%);
  283. width: 530rpx;
  284. height: 173rpx;
  285. // background-color: #fff;
  286. z-index: 3;
  287. overflow: hidden;
  288. image {
  289. width: 520rpx;
  290. height: 173rpx;
  291. }
  292. // image {
  293. // position: absolute;
  294. // left: -500rpx;
  295. // display: inline-block;
  296. // width: 1000rpx;
  297. // height: 160rpx;
  298. // z-index: 3;
  299. // // animation: moveImage 3s linear infinite;
  300. // }
  301. @keyframes moveImage {
  302. 0% {
  303. left: -100rpx;
  304. }
  305. 50% {
  306. left: -500rpx;
  307. }
  308. 100% {
  309. left: -100rpx;
  310. }
  311. }
  312. }
  313. .microphoneIcon {
  314. position: absolute;
  315. bottom: 0;
  316. height: 410rpx;
  317. width: 100%;
  318. border-radius: 36rpx 36rpx 0 0;
  319. background-color: #fff;
  320. z-index: 3;
  321. display: flex;
  322. flex-direction: column;
  323. align-items: center;
  324. justify-content: center;
  325. image {
  326. // max-width: 0%;
  327. // max-height: 0%;
  328. width: 108rpx;
  329. height: 83rpx;
  330. touch-action: none;
  331. z-index: -1;
  332. pointer-events: none;
  333. }
  334. }
  335. }
  336. </style>