index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <div id="container">
  3. <!-- banner模块-->
  4. <banner></banner>
  5. <!-- 未登录 登录窗口模块-->
  6. <div class="login_card" v-if="!is_login">
  7. <!-- 登录窗口-->
  8. <login_container v-if="login_status == 'login'"
  9. @changeStatus="change_status"
  10. @changeTitle="change_title"
  11. ></login_container>
  12. <!-- 注册窗口-->
  13. <regist_container v-if="login_status == 'regist'"
  14. @changeStatus='change_status'
  15. @change_login_status="change_login_status"
  16. :title="regist_title"
  17. ></regist_container>
  18. </div>
  19. <!-- 登陆后 的个人首页-->
  20. <div class="personal_card" v-if="is_login">
  21. <personal_container></personal_container>
  22. <device_container></device_container>
  23. </div>
  24. <div class="service margin-top-xl" :class="{'service_login_page':is_login==false}">
  25. <view class="padding-tb">
  26. <text class="cuIcon-titles text-primary"></text>
  27. <text class="">功能服务</text>
  28. </view>
  29. <div class="content padding-lr">
  30. <van-row>
  31. <van-col span="12">
  32. <img src="https://img.shuimuai.com/web/index_btn_chongzhizhongxin.png" @click="to_page('user_center/recharge')"></img>
  33. </van-col>
  34. <van-col span="12">
  35. <img src="https://img.shuimuai.com/web/index_btn_gerenzhongxin.png" @click="to_page('user_center')"></img>
  36. </van-col>
  37. </van-row>
  38. <van-row>
  39. <van-col span="12">
  40. <img src="https://img.shuimuai.com/web/index_btn_chengjijilu.png" @click="to_page('game_record')"></img>
  41. </van-col>
  42. <van-col span="12">
  43. <img src="https://img.shuimuai.com/web/index_btn_dailishang.png" @click="to_page('agent/index')"></img>
  44. </van-col>
  45. </van-row>
  46. </div>
  47. </div>
  48. <van-toast id="van-toast"/>
  49. </div>
  50. </template>
  51. <script>
  52. import banner from '@/components/banner'
  53. import login_container from '@/components/index/login'
  54. import regist_container from '@/components/index/regist'
  55. import personal_container from "@/components/index/personal";
  56. import device_container from "@/components/device/device";
  57. import Toast from '../../../static/vant/toast/toast';
  58. import {userDetail} from "../../requests/user";
  59. import user_store from "../../store/index"
  60. var $this
  61. export default {
  62. name: "index_container",
  63. components: {
  64. banner, login_container, regist_container, personal_container, device_container
  65. },
  66. data() {
  67. return {
  68. // 三种状态 扫码scan 注册regist 登录login
  69. login_status: "login",
  70. // is_login: false,
  71. is_login: false,
  72. regist_title: ""
  73. }
  74. },
  75. methods: {
  76. get_init_data() {
  77. },
  78. //切换到扫码
  79. change_status($status) {
  80. this.login_status = $status
  81. },
  82. //跳转充值中心
  83. to_recharge() {
  84. mpvue.navigateTo({
  85. url: "/pages/user_center/recharge/main"
  86. })
  87. },
  88. //修改登录状态
  89. change_login_status() {
  90. this.is_login = user_store.getters.get_login_status()
  91. },
  92. // 修改界面的文字
  93. change_title($status) {
  94. if ($status == 0) {
  95. this.regist_title = "注册"
  96. } else if ($status == 1) {
  97. this.regist_title = "登录"
  98. }
  99. },
  100. //跳转页面
  101. to_page($page) {
  102. if ($page == 'agent/index'){
  103. Toast.fail("暂未开通")
  104. return false
  105. }
  106. if (!this.is_login) {
  107. Toast.fail("请先登录")
  108. return false
  109. }
  110. mpvue.navigateTo({
  111. url: "/pages/" + $page + "/main"
  112. })
  113. }
  114. },
  115. mounted() {
  116. },
  117. onShow() {
  118. userDetail().then((res) => {
  119. let $data = res.data
  120. //判断如果是第一次登录就 弹出领取体验卡
  121. $this.userinfo = $data.data
  122. user_store.setters.set_userinfo($this.userinfo)
  123. })
  124. },
  125. onLoad($option) {
  126. // 判断存储是否登录
  127. let $token = wx.getStorageSync('token')
  128. if ($token) {
  129. user_store.setters.set_token($token)
  130. user_store.setters.set_login(true)
  131. this.is_login = user_store.getters.get_login_status()
  132. }
  133. },
  134. created() {
  135. $this = this
  136. }
  137. }
  138. </script>
  139. <style scoped>
  140. /*@import "index.css";*/
  141. .login_card {
  142. height: 350px;
  143. background-color: #ffffff;
  144. position: relative;
  145. z-index: 3;
  146. top: -90px;
  147. margin: 0px 10px;
  148. background-image: url(https://img.shuimuai.com/shuimugongzhu.png);
  149. background-position: center;
  150. background-size: 100% 100%;
  151. background-color: rgba(255, 255, 255, 0);
  152. }
  153. /* 功能服务 */
  154. .service {
  155. position: absolute;
  156. width: 100%;
  157. top: 550px;
  158. }
  159. .service_login_page {
  160. top: 500px !important;
  161. }
  162. .service .content {
  163. width: 100%;
  164. }
  165. .service .content image {
  166. width: 186px;
  167. height: 89px;
  168. }
  169. .head .line {
  170. width: 4px;
  171. height: 14px;
  172. background-color: #5d4db8;
  173. margin-right: 7px;
  174. }
  175. .head view {
  176. display: flex;
  177. justify-self: start;
  178. align-items: center;
  179. }
  180. .personal_card {
  181. height: 300px;
  182. position: relative;
  183. }
  184. </style>