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.

308 lines
6.3 KiB

9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
  1. <!-- 登录页面 -->
  2. <template>
  3. <view class="login bx">
  4. <div class="language">
  5. <image @click="showSelectLanguageProp" src="@/static/login/language.png" mode="aspectFit"></image>
  6. </div>
  7. <!-- 背景图片 -->
  8. <view class="logo-box">
  9. <image class="logo content" :src="image" mode="widthFix"></image>
  10. </view>
  11. <!-- 加载效果 -->
  12. <loading :loading="loading" @close="closeLoading"></loading>
  13. <view v-if="!loading" class="main">
  14. <!-- 登录标题 -->
  15. <view class="login-title">
  16. <view class="title">{{ $t('page.login.title') }}</view>
  17. <view class="shop-desc">{{ $t('page.login.please-enter') }}</view>
  18. </view>
  19. <!-- 输入框列表 -->
  20. <view class="input-list">
  21. <input v-model="form.account" type="text" :placeholder="$t('page.login.phone-placeholder')" />
  22. <input v-model="form.pass" type="password" :placeholder="$t('page.login.password-placeholder')" />
  23. </view>
  24. <!-- 按钮组 -->
  25. <view class="btns">
  26. <view @click="Login" class="now-login-btn content">{{ $t('page.login.title') }}</view>
  27. <view class="now-login-btn content">
  28. <text @click="toRegister">{{ $t('page.login.register-now') }}</text>
  29. </view>
  30. </view>
  31. <view @click="revealServiceList" class="forget-password content">Forget the password?</view>
  32. </view>
  33. <!-- 切换语言 -->
  34. <changeLanguage :show.sync="showSelectLanguage" @close="closeSelectLanguageProp"></changeLanguage>
  35. <!-- 客服列表 -->
  36. <serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
  37. <!-- 初始页面 -->
  38. <!-- <pageInit></pageInit> -->
  39. </view>
  40. </template>
  41. <script>
  42. import changeLanguage from '../../components/changeLanguage/changeLanguage.vue';
  43. import serviceList from '@/components/serviceList/serviceList.vue';
  44. import pageInit from '@/components/pageInit/pageInit.vue'
  45. import loading from '@/components/pageInit/loading.vue'
  46. export default {
  47. components: {
  48. changeLanguage,
  49. serviceList,
  50. pageInit,
  51. loading
  52. },
  53. data() {
  54. return {
  55. form: {
  56. account: '',
  57. pass: '',
  58. loginIp: ''
  59. },
  60. showSelectLanguage: false,
  61. showService: false,
  62. serverList: [],
  63. loading: false,
  64. image : '',///static/login/logo.png
  65. }
  66. },
  67. created() {
  68. this.getImage()
  69. },
  70. methods: {
  71. //登录
  72. Login() {
  73. this.$play()
  74. let _self = this;
  75. uni.showLoading({})
  76. let {
  77. account,
  78. pass
  79. } = this.form
  80. if (account.trim() == '') {
  81. return uni.showToast({
  82. title: this.$t('page.login.accountEmpty'),
  83. icon: 'none'
  84. });
  85. }
  86. if (pass.trim() == '') {
  87. return uni.showToast({
  88. title: this.$t('page.login.passEmpty'),
  89. icon: 'none'
  90. });
  91. }
  92. return uni.request({
  93. url: 'https://api.ipify.org?format=json',
  94. success: function(res) {
  95. _self.form.loginIp = res.data.ip;
  96. _self.sendLogin()
  97. },
  98. fail() {
  99. _self.form.loginIp = '0.0.0.0';
  100. _self.sendLogin()
  101. },
  102. });
  103. },
  104. sendLogin(){
  105. let _self = this;
  106. _self.request('login', {}, _self.form).then(res => {
  107. uni.hideLoading()
  108. if (res.code == 200) {
  109. localStorage.setItem("userInfo", JSON.stringify(res.result.userInfo))
  110. localStorage.setItem("token", res.result.token)
  111. uni.removeStorageSync('clickPopUp'); //删除此key会登录成功后首页会显示弹框
  112. uni.navigateTo({
  113. url: '/pages/home/home'
  114. })
  115. }
  116. })
  117. },
  118. getImage(){
  119. this.request('getImage').then(res => {
  120. if(res.code == 200){
  121. this.image = res.result.title
  122. }
  123. })
  124. },
  125. //跳转注册页面
  126. toRegister() {
  127. this.$play()
  128. uni.navigateTo({
  129. url: '/pages/register/register'
  130. })
  131. },
  132. //显示选择语言弹框
  133. showSelectLanguageProp() {
  134. this.$play()
  135. this.showSelectLanguage = true
  136. },
  137. //关闭语言选择弹框
  138. closeSelectLanguageProp() {
  139. this.showSelectLanguage = false
  140. },
  141. //显示客服列表
  142. revealServiceList() {
  143. this.$play()
  144. this.showService = true;
  145. },
  146. //关闭客服列表
  147. closeServiceList() {
  148. this.showService = false;
  149. },
  150. //关闭加载效果
  151. closeLoading() {
  152. this.loading = false;
  153. },
  154. //忘记密码
  155. forgetPass() {
  156. this.request('forgetPass').then(res => {
  157. if (res.code == 200) {
  158. this.serverList = res.result
  159. this.revealServiceList()
  160. }
  161. })
  162. }
  163. }
  164. }
  165. </script>
  166. <style lang="scss" scoped>
  167. .login {
  168. width: 750rpx;
  169. height: 100vh;
  170. margin: 0px auto;
  171. background: linear-gradient(to bottom, #fcedff 0%, #ffffff 100%);
  172. background-size: 100%;
  173. background-repeat: no-repeat;
  174. box-sizing: border-box;
  175. .content {
  176. width: 96%;
  177. margin: 0rpx auto;
  178. }
  179. .language {
  180. display: flex;
  181. justify-content: flex-end;
  182. align-items: center;
  183. height: 160rpx;
  184. image {
  185. width: 60rpx;
  186. height: 60rpx;
  187. }
  188. }
  189. .logo-box {
  190. display: flex;
  191. align-items: center;
  192. justify-content: center;
  193. margin-bottom: 40rpx;
  194. .logo {
  195. border-radius: 10rpx;
  196. }
  197. }
  198. .login-title {
  199. padding: 0rpx 10rpx;
  200. box-sizing: border-box;
  201. text-align: center;
  202. .title {
  203. font-size: 60rpx;
  204. color: $uni-bg-color-app;
  205. margin-bottom: 10rpx;
  206. font-weight: bold;
  207. }
  208. .shop-desc {
  209. font-size: 28rpx;
  210. color: #333;
  211. margin-bottom: 20rpx;
  212. font-weight: bold;
  213. }
  214. }
  215. .input-list {
  216. padding: 0rpx 10rpx;
  217. box-sizing: border-box;
  218. margin: 40rpx 0rpx;
  219. input {
  220. display: block;
  221. width: 90%;
  222. margin: 0rpx auto;
  223. color: $uni-bg-color-app;
  224. border: 1px solid #eeeeee;
  225. height: 80rpx;
  226. border-radius: 40rpx;
  227. background: #fff;
  228. margin-bottom: 20rpx;
  229. text-align: center;
  230. text-indent: 1em;
  231. padding: 0rpx 15rpx;
  232. &:focus {
  233. border-color: #6d00be !important;
  234. background: pink !important;
  235. }
  236. }
  237. }
  238. .btns {
  239. padding: 0rpx 10rpx;
  240. margin-top: 40rpx;
  241. color: $uni-bg-color;
  242. .now-login-btn {
  243. background: $uni-bg-color-app;
  244. border-radius: 60rpx;
  245. display: flex;
  246. align-items: center;
  247. justify-content: center;
  248. margin-bottom: 20rpx;
  249. font-weight: bold;
  250. height: 90rpx;
  251. font-size: 40rpx;
  252. }
  253. .now-register-btn {
  254. display: flex;
  255. justify-content: center;
  256. align-items: center;
  257. color: $uni-bg-color-app;
  258. }
  259. }
  260. .forget-password{
  261. color: red;
  262. font-weight: bold;
  263. box-sizing: border-box;
  264. padding-left: 20rpx;
  265. }
  266. }
  267. </style>