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

269 line
6.1 KiB

  1. <template>
  2. <view :class="pageClass">
  3. <!-- mode="aspectFit" -->
  4. <image class="bgImg" src="../../assets/img/homeImg.jpg" />
  5. <!-- 视频,已废弃 -->
  6. <view v-show="false" class="videoBox">
  7. <!-- <video
  8. src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"
  9. autoplay
  10. muted
  11. loop
  12. :controls="false"
  13. /> -->
  14. <!-- <video
  15. 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"
  16. autoplay
  17. loop
  18. :controls="false"
  19. /> -->
  20. </view>
  21. <view class="bottomBox">
  22. <button
  23. v-if="!checkboxValue[0]"
  24. class="bottomBtn"
  25. type="default"
  26. id="getPhoneNumber"
  27. @click="toCreate"
  28. >
  29. 开始制作我的数字写真
  30. </button>
  31. <button
  32. v-if="checkboxValue[0]"
  33. class="bottomBtn"
  34. open-type="getPhoneNumber"
  35. type="default"
  36. id="getPhoneNumber"
  37. @getphonenumber="toCreate"
  38. >
  39. 开始制作我的数字写真
  40. </button>
  41. <!-- <view class="bottomBtn" @click="toCreate"> 开始制作我的数字写真 </view> -->
  42. <u-checkbox-group
  43. v-model="checkboxValue"
  44. placement="row"
  45. @change="changedCheckbox"
  46. >
  47. <u-checkbox
  48. labelColor="white"
  49. activeColor="red"
  50. v-for="(item, index) in checkboxList"
  51. :name="item.name"
  52. :key="index"
  53. >
  54. </u-checkbox>
  55. <text class="checkPro"
  56. >同意<text class="goPro" @click="goPro"
  57. >《智像相机用户使用协议》</text
  58. >
  59. </text>
  60. </u-checkbox-group>
  61. </view>
  62. </view>
  63. </template>
  64. <script setup>
  65. //#region 导入
  66. import { ref, reactive, computed } from "vue";
  67. import { onLoad } from "@dcloudio/uni-app";
  68. import { voiceTotalApi, loginPhoneApi } from "../../api/login.js";
  69. import { userInfoModules } from "@/store/modules/userInfo";
  70. //#endregion
  71. const userInfoModulesPinia = userInfoModules();
  72. const pageClass = computed(() => {
  73. if (userInfoModulesPinia.platForm == 1) {
  74. return "page pageH5";
  75. } else {
  76. return "page";
  77. }
  78. });
  79. //#region 勾选
  80. const checkboxValue = ref([]);
  81. const checkboxList = ref([
  82. {
  83. name: "同意智像相机用户使用协议",
  84. },
  85. ]);
  86. function changedCheckbox(e) {
  87. console.log(e);
  88. }
  89. async function getphonenumber(e) {
  90. console.log(e);
  91. if (e.detail.errMsg.includes("ok")) {
  92. //用户授权了手机号
  93. const data = {
  94. appId: "wx75cf14e3a0d45821",
  95. openId: userInfoModulesPinia.openId,
  96. encryptedData: e.detail.encryptedData,
  97. iv: e.detail.iv,
  98. };
  99. try {
  100. const res2 = await loginPhoneApi(data);
  101. uni.showToast({
  102. icon: "none",
  103. title: "获取成功",
  104. });
  105. userInfoModulesPinia.token = res2.data.token;
  106. uni.switchTab({
  107. url: "/pages/uploadPhoto/uploadPhoto",
  108. });
  109. } catch (error) {
  110. uni.showToast({
  111. icon: "none",
  112. title: "获取失败",
  113. });
  114. }
  115. } else {
  116. uni.showToast({
  117. icon: "none",
  118. title: "获取手机号失败",
  119. });
  120. //code已过期 重新拿code再授权
  121. }
  122. }
  123. async function toCreate(e) {
  124. console.log();
  125. if (checkboxValue.value[0]) {
  126. // await handleLogin();
  127. await getphonenumber(e);
  128. } else {
  129. uni.showModal({
  130. title: "提示",
  131. content: "同意慧图相机用户使用协议?",
  132. success: function (res) {
  133. if (res.confirm) {
  134. checkboxValue.value = ["同意智像相机用户使用协议"];
  135. // handleLogin();
  136. getphonenumber(e);
  137. } else if (res.cancel) {
  138. }
  139. },
  140. fail: (err) => {},
  141. });
  142. }
  143. }
  144. const userInfo = ref(null);
  145. async function handleLogin() {
  146. // uni.getUserInfo({});
  147. // getPhoneNumber
  148. // getUserProfile
  149. uni.getUserProfile({
  150. desc: "用于完善用户信息",
  151. success: async (res1) => {
  152. console.log(res1);
  153. userInfo.value = res1.userInfo;
  154. userInfoModulesPinia.userInfo = res1.userInfo;
  155. console.log(userInfoModulesPinia.openId, "拿出openid");
  156. const data = {
  157. appId: "wx75cf14e3a0d45821",
  158. openId: userInfoModulesPinia.openId,
  159. encryptedData: res1.encryptedData,
  160. iv: res1.iv,
  161. };
  162. try {
  163. const res2 = await loginPhoneApi(data);
  164. uni.showToast({
  165. icon: "none",
  166. title: "获取成功",
  167. });
  168. } catch (error) {
  169. uni.showToast({
  170. icon: "none",
  171. title: "获取失败",
  172. });
  173. }
  174. },
  175. fail: (err) => {
  176. console.log(err);
  177. uni.showToast({
  178. icon: "none",
  179. title: "用户拒绝获取",
  180. });
  181. },
  182. });
  183. }
  184. const goPro = () => {
  185. uni.navigateTo({
  186. url: "/pages/protocol/user",
  187. });
  188. };
  189. //#endregion ---------------------
  190. //#region
  191. onLoad((options) => {
  192. uni.hideHomeButton();
  193. // workId.value = options.id;
  194. if (options.type == "tokenFfalse") {
  195. uni.showToast({
  196. title: "登录失效,请重新登录",
  197. icon: "none",
  198. });
  199. }
  200. });
  201. //#endregion ---------------------------------
  202. //#region
  203. //#endregion ---------------------------------
  204. // voiceTotalApi();
  205. </script>
  206. <style lang="scss">
  207. .page {
  208. position: relative;
  209. padding: 0;
  210. min-height: 100vh;
  211. }
  212. .bgImg {
  213. width: 750rpx;
  214. height: 100vh;
  215. }
  216. .videoBox {
  217. width: 750rpx;
  218. height: 1120rpx;
  219. // aspect-ratio: 9/12;
  220. video {
  221. width: 100%;
  222. height: 100%;
  223. // aspect-ratio: 9/12;
  224. }
  225. }
  226. .bottomBox {
  227. position: absolute;
  228. bottom: 0;
  229. width: 100%;
  230. height: 345rpx;
  231. display: flex;
  232. flex-direction: column;
  233. align-items: center;
  234. background-color: rgba(0, 0, 0, 0.8);
  235. color: #fff !important;
  236. .bottomBtn {
  237. margin-top: 55rpx;
  238. margin-bottom: 65rpx;
  239. width: 520rpx;
  240. height: 100rpx;
  241. border-radius: 50rpx;
  242. line-height: 100rpx;
  243. text-align: center;
  244. color: #fff;
  245. background-color: rgba(255, 79, 0, 1);
  246. font-size: 30rpx;
  247. font-weight: 900;
  248. }
  249. .checkPro {
  250. display: inline-block;
  251. height: 27rpx;
  252. line-height: 54rpx;
  253. .goPro {
  254. color: #ff4f00;
  255. }
  256. }
  257. }
  258. </style>