邃芒智像(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.
 
 
 
 

139 lines
3.3 KiB

  1. <template>
  2. <view class="page">
  3. <image class="bgImg" src="../../assets/img/homeImg.png" mode="aspectFit" />
  4. <!-- 视频,已废弃 -->
  5. <view v-show="false" class="videoBox">
  6. <!-- <video
  7. src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"
  8. autoplay
  9. muted
  10. loop
  11. :controls="false"
  12. /> -->
  13. <!-- <video
  14. src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4"
  15. autoplay
  16. loop
  17. :controls="false"
  18. /> -->
  19. </view>
  20. <view class="bottomBox">
  21. <view class="bottomBtn" @click="toCreate"> 开始制作我的数字分身 </view>
  22. <u-checkbox-group v-model="checkboxValue1" placement="row">
  23. <u-checkbox
  24. labelColor="white"
  25. activeColor="red"
  26. v-for="(item, index) in checkboxList1"
  27. :key="index"
  28. :label="item.name"
  29. :name="item.name"
  30. >
  31. </u-checkbox>
  32. </u-checkbox-group>
  33. </view>
  34. </view>
  35. </template>
  36. <script setup>
  37. //#region 导入
  38. import { ref, reactive } from "vue";
  39. import { voiceTotalApi } from "../../api/login.js";
  40. //#endregion
  41. //#region 勾选
  42. const checkboxValue1 = ref([]);
  43. const checkboxList1 = reactive([
  44. {
  45. name: "同意智像相机用户使用协议",
  46. disabled: false,
  47. },
  48. ]);
  49. function toCreate() {
  50. if (checkboxValue1.value[0]) {
  51. handleLogin();
  52. uni.redirectTo({
  53. url: "/pages/uploadPhoto/uploadPhoto",
  54. });
  55. } else {
  56. uni.showModal({
  57. title: "提示",
  58. content: "同意慧图相机用户使用协议?",
  59. success: function (res) {
  60. if (res.confirm) {
  61. handleLogin();
  62. uni.redirectTo({
  63. url: "/pages/uploadPhoto/uploadPhoto",
  64. });
  65. } else if (res.cancel) {
  66. }
  67. },
  68. });
  69. }
  70. }
  71. function handleLogin() {
  72. uni.login({
  73. provider: "weixin", // 使用微信登录授权
  74. success: (res) => {
  75. console.log(res);
  76. if (res.code) {
  77. // 获取到微信授权登录的code,将code发送给后端
  78. // this.loginWithCode(res.code);
  79. } else {
  80. console.log("登录失败:", res.errMsg);
  81. }
  82. },
  83. fail: (err) => {
  84. console.log("登录失败:", err.errMsg);
  85. },
  86. });
  87. }
  88. //#endregion ---------------------
  89. voiceTotalApi();
  90. </script>
  91. <style lang="scss">
  92. .page {
  93. position: relative;
  94. padding: 0;
  95. min-height: 100vh;
  96. }
  97. .bgImg {
  98. width: 750rpx;
  99. height: 100vh;
  100. }
  101. .videoBox {
  102. width: 750rpx;
  103. height: 1120rpx;
  104. // aspect-ratio: 9/12;
  105. video {
  106. width: 100%;
  107. height: 100%;
  108. // aspect-ratio: 9/12;
  109. }
  110. }
  111. .bottomBox {
  112. position: absolute;
  113. bottom: 0;
  114. width: 100%;
  115. height: 345rpx;
  116. display: flex;
  117. flex-direction: column;
  118. align-items: center;
  119. background-color: rgba(0, 0, 0, 0.8);
  120. color: #fff !important;
  121. .bottomBtn {
  122. margin-top: 55rpx;
  123. margin-bottom: 65rpx;
  124. width: 520rpx;
  125. height: 100rpx;
  126. border-radius: 50rpx;
  127. line-height: 100rpx;
  128. text-align: center;
  129. background-color: rgba(255, 79, 0, 1);
  130. font-size: 30rpx;
  131. font-weight: 900;
  132. }
  133. }
  134. </style>