推广小程序前端代码
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.

128 lines
2.5 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <div class="login">
  3. <!-- logo -->
  4. <div class="logo">
  5. <image src="@/static/image/logo-img.jpg" mode=""></image>
  6. </div>
  7. <!-- 标题 -->
  8. <view class="login-title">vtrip</view>
  9. <!-- 登录按钮 -->
  10. <view @click="login" class="login-btn">
  11. <uni-icons type="weixin" size="30" color="#fff"></uni-icons>
  12. <text class="wx">微信登录</text>
  13. </view>
  14. <!-- 隐私政策 -->
  15. <view class="privacy">
  16. <uv-radio-group>
  17. <uv-checkbox-group v-model="consent">
  18. <uv-checkbox :size="30" shape="circle" active-color="#05C160" :name="privacy"></uv-checkbox>
  19. </uv-checkbox-group>
  20. 已同意<text class="privacy-title" @click="jump(1)">隐私政策</text>
  21. <text class="privacy-title" @click="jump(2)">用户协议</text>
  22. </uv-radio-group>
  23. </view>
  24. <!-- 隐私政策弹框 -->
  25. <PrivacyAgreementPoup></PrivacyAgreementPoup>
  26. </div>
  27. </template>
  28. <script>
  29. import PrivacyAgreementPoup from '@/components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue'
  30. export default {
  31. name : "wxLogin",
  32. components : { PrivacyAgreementPoup },
  33. data() {
  34. return {
  35. consent : []
  36. }
  37. },
  38. methods: {
  39. login() {
  40. if(this.consent.length <= 0){
  41. return uni.showToast({
  42. icon: "none",
  43. title: "请勾选隐私协议"
  44. })
  45. }
  46. this.$store.commit('login')
  47. },
  48. jump(type) {//1 隐私协议 2服务条款
  49. if(type == 1) {
  50. uni.navigateTo({
  51. url:'/pages_login/yinsixieyi'
  52. })
  53. }else {
  54. uni.navigateTo({
  55. url:'/pages_login/fuwutiaokuan'
  56. })
  57. }
  58. }
  59. }
  60. }
  61. </script>
  62. <style lang="scss" scoped>
  63. .login {
  64. display: flex;
  65. flex-direction: column;
  66. justify-content: center;
  67. align-items: center;
  68. min-height: 100vh;
  69. background: white;
  70. // logo
  71. .logo {
  72. display: flex;
  73. align-items: center;
  74. justify-content: center;
  75. image {
  76. width: 200rpx;
  77. height: 200rpx;
  78. border-radius: 20rpx;
  79. }
  80. }
  81. // 标题
  82. .login-title {
  83. font-size: 40rpx;
  84. font-weight: bold;
  85. margin: 20rpx 0rpx;
  86. }
  87. //登录按钮
  88. .login-btn {
  89. display: flex;
  90. justify-content: center;
  91. align-items: center;
  92. width: 70%;
  93. background: #05C160;
  94. height: 90rpx;
  95. border-radius: 45rpx;
  96. color: white;
  97. margin-top: 200rpx;
  98. .wx {
  99. margin-left: 10rpx;
  100. }
  101. }
  102. //隐私政策
  103. .privacy {
  104. display: flex;
  105. align-items: center;
  106. margin-top: 20rpx;
  107. &::v-deep .uv-checkbox-group {
  108. align-items: center !important;
  109. justify-content: center !important;
  110. flex-wrap : nowrap !important;
  111. }
  112. .privacy-title {
  113. color: #05C160;
  114. }
  115. }
  116. }
  117. </style>