乐分享页面

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://ehall2.ezijing.com/api',
+  url: 'https://share2.ezijing.com/api',
   isEnableToIphoneDebugger: false,
   // apiBaseURL: '//demo-login.ezijing.com/',
   webpack: {

build/dev.ezijing.com.key

+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEAgddAmdjWL+4JUXvmiR/lr9cbdoctEGLwdLpnIrRlL/oVKubZ
+TrASed5pA2kHKUbbV9i64iNIzn668ziytivudRiuGL4wBTPdtlpkSty9ij0ZHZXe
+23oWQ73fV3FNROp3ekLmIYHqo2ep5hhfq1A4Sey7IM1Z0A9OF6MV7Tgqm+8a6Fy4
+eNbgx99f0n7nquGjYZ3RcnU0j6xzfQhOqOYmhk4flQqSx6Mb6sSmWM7V4/h/554L
+QyJNV3ngNfT3ZFmAmhIZt7n+o3svzIqwghiZSj0K9jyE7zbSZjVUBEQztFUcfYgP
+ZQfZFFsdgIkFSvR3cXIpIiN8oPf8xK6naApOXwIDAQABAoIBAHKlKKJvZvgdO1ca
+ir1rT7jKu7IVu4GritvWtzhahrotHEGsYhZru3SmIJ1lQHB+4zAW6zS/qQrDtbkK
+yCm4cq4sI5UvYWFGoa7g84tyi12jgyiva37ptv0Li0g/f9WpHePzbBYMC61K3CaS
+QO8YPwtvHu/gwjvHN9IBK1wxatYRriAfR6CF2+pfZXhlq3nprc0z9YypExLg2Swa
+ML1uQGLObDHAFKheVFYOgWOncMbG5eXNV9mdfzoUuc+mkENDtynQUTzI2ZM4OZFr
+uMjto7y4RLFu463Rg0ijg2MXL4FbygzclaePNL7YBS6wed0Z8cE26FvbG5vM//Qc
+qYK+WBECgYEA0FdJ7tPzgBvn4VsvBBdA8gmmFmmD/TJxehrxAwn/x0QkcZa6ngxJ
+ScgcicJ2OSM049zId35KA4OV7aGUC6QKdG6JbL00Wqg9xWbsHiiB9XzV1iDghTug
+35cDWhRN8SnMgBhQ85l5ps8NJuLS/fqLBK0/yeE54mkWKqvD4JS39KcCgYEAn4rl
+Uc4PQ/xkgCKCTOCIYmzvDUuZcS0pA0MU/uJ/aQIwaJFanIehczs6Wg/Gb0YhKx0h
+cMDuvZYY2XjbCic8eDNE7ED0hUHBAa8VAQZwS22ds/qNoooCO5UcHPRevenb/dIk
+oKQTrI+4e5izQtuV3YLJMeH5Ba9bUP45iaZDt4kCgYEAnBGnmrc/46oD7HdoIwJg
+bm/38TYd3+CXzUa9YO9uohFT05t8NMUzaYf0iOYZtfe/uSo9KfZ672L1P0wZIRdD
+lbDwVXru6zK5A1V0b6scn49iiMOcLXJbsuLnaeVn9c7AGP0eNz2zOdhFG+oy8Htt
+BJXcARktSYQ7TL/bPjNqEmUCgYB54o8XVCltcyEEk1igitkm+LoYmiz7vdibWWBs
+6XUVMErzWDi1ZRj/A7ysmWisEhO88GBf18WMqWMKob4Vn6we2GxLYcRtGbLuKmgN
+hHG97lyQ51XVW0IhauUzaa4HwOYEn8rDvxYYuyPhqOMqrL9tn0E+DrlEkpdc5Rvo
+AVGyoQKBgGYvAeoKrdkfLUUnvRBIju9/bg5H6t1MY8lYi4WEnL+aPn056LV43LU9
++gF7+S7f8Er6WiJCCb7laYeDyC5adqnF/fI//4iNsarid86blirXfJMSfTG+GkZM
+OEBHd/sX0IbRUt6MCxiG3Znmdpny3/MG4CegPMtdohQktQEAS2yJ
+-----END RSA PRIVATE KEY-----

build/dev.ezijing.com.pem

+-----BEGIN CERTIFICATE-----
+MIIFiDCCBHCgAwIBAgIQAepAKb4wAxmrtof7BwPQSDANBgkqhkiG9w0BAQsFADBu
+MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3
+d3cuZGlnaWNlcnQuY29tMS0wKwYDVQQDEyRFbmNyeXB0aW9uIEV2ZXJ5d2hlcmUg
+RFYgVExTIENBIC0gRzEwHhcNMTkxMTA4MDAwMDAwWhcNMjAxMTA3MTIwMDAwWjAa
+MRgwFgYDVQQDEw9kZXYuZXppamluZy5jb20wggEiMA0GCSqGSIb3DQEBAQUAA4IB
+DwAwggEKAoIBAQCB10CZ2NYv7glRe+aJH+Wv1xt2hy0QYvB0umcitGUv+hUq5tlO
+sBJ53mkDaQcpRttX2LriI0jOfrrzOLK2K+51GK4YvjAFM922WmRK3L2KPRkdld7b
+ehZDvd9XcU1E6nd6QuYhgeqjZ6nmGF+rUDhJ7LsgzVnQD04XoxXtOCqb7xroXLh4
+1uDH31/Sfueq4aNhndFydTSPrHN9CE6o5iaGTh+VCpLHoxvqxKZYztXj+H/nngtD
+Ik1XeeA19PdkWYCaEhm3uf6jey/MirCCGJlKPQr2PITvNtJmNVQERDO0VRx9iA9l
+B9kUWx2AiQVK9HdxcikiI3yg9/zErqdoCk5fAgMBAAGjggJ0MIICcDAfBgNVHSME
+GDAWgBRVdE+yck/1YLpQ0dfmUVyaAYca1zAdBgNVHQ4EFgQU28ndXe6qIDlhPWX5
++gzJoRhaQQowGgYDVR0RBBMwEYIPZGV2LmV6aWppbmcuY29tMA4GA1UdDwEB/wQE
+AwIFoDAdBgNVHSUEFjAUBggrBgEFBQcDAQYIKwYBBQUHAwIwTAYDVR0gBEUwQzA3
+BglghkgBhv1sAQIwKjAoBggrBgEFBQcCARYcaHR0cHM6Ly93d3cuZGlnaWNlcnQu
+Y29tL0NQUzAIBgZngQwBAgEwgYAGCCsGAQUFBwEBBHQwcjAkBggrBgEFBQcwAYYY
+aHR0cDovL29jc3AuZGlnaWNlcnQuY29tMEoGCCsGAQUFBzAChj5odHRwOi8vY2Fj
+ZXJ0cy5kaWdpY2VydC5jb20vRW5jcnlwdGlvbkV2ZXJ5d2hlcmVEVlRMU0NBLUcx
+LmNydDAJBgNVHRMEAjAAMIIBBQYKKwYBBAHWeQIEAgSB9gSB8wDxAHYApLkJkLQY
+WBSHuxOizGdwCjw1mAT5G9+443fNDsgN3BAAAAFuSnTaJgAABAMARzBFAiEAtYCW
+PLYE6pylBOsB1MmETgxGpYrG64Osn/XXyJlh+/UCIEnttMCBvNif4hpJfAQibP/Q
+bJ9w0VYC59hi8Tmcf/mfAHcAXqdz+d9WwOe1Nkh90EngMnqRmgyEoRIShBh1loFx
+RVgAAAFuSnTZSQAABAMASDBGAiEAsMgDWdSJ5d2jiXoNyxJ5FY7+3PET59vgvxi9
+Eev9MwECIQC3sfR8sRWxJg82xH7lIA9sN87p7fLmr+KyhnuAK+2bcjANBgkqhkiG
+9w0BAQsFAAOCAQEAOXMhz5dapVgYoLe23i+rEbBeO648c3cAO11qubqE0b5ie2bY
+4DuatptwiLA47xfSVbFF0Y44cPL1b0zHe+Ki9TpcFP+TQ/+cPD2bPrqovI2uh8Qi
+1RU7baLoYO9t7NxaPXh9RtRLUufJHas7HcWtLw/nPvVi+SuhgiiPytWdVM64dIPz
++nP9YY6wZhp4S/vNw5T7LARaw28xrEPzgCzWoXBUDyLB1slU3A2Uu+vl4lilcVeF
+B/hl/75PWIdlxeRsD2V4TGCg796eL1BTVYEh7+mjvvaft+1/jwofKtGxg34YZHfl
+6M22MuuP1pLviPZEE4ZlPXvltUV/Qq47LvZkTg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIEqjCCA5KgAwIBAgIQAnmsRYvBskWr+YBTzSybsTANBgkqhkiG9w0BAQsFADBh
+MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3
+d3cuZGlnaWNlcnQuY29tMSAwHgYDVQQDExdEaWdpQ2VydCBHbG9iYWwgUm9vdCBD
+QTAeFw0xNzExMjcxMjQ2MTBaFw0yNzExMjcxMjQ2MTBaMG4xCzAJBgNVBAYTAlVT
+MRUwEwYDVQQKEwxEaWdpQ2VydCBJbmMxGTAXBgNVBAsTEHd3dy5kaWdpY2VydC5j
+b20xLTArBgNVBAMTJEVuY3J5cHRpb24gRXZlcnl3aGVyZSBEViBUTFMgQ0EgLSBH
+MTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBALPeP6wkab41dyQh6mKc
+oHqt3jRIxW5MDvf9QyiOR7VfFwK656es0UFiIb74N9pRntzF1UgYzDGu3ppZVMdo
+lbxhm6dWS9OK/lFehKNT0OYI9aqk6F+U7cA6jxSC+iDBPXwdF4rs3KRyp3aQn6pj
+pp1yr7IB6Y4zv72Ee/PlZ/6rK6InC6WpK0nPVOYR7n9iDuPe1E4IxUMBH/T33+3h
+yuH3dvfgiWUOUkjdpMbyxX+XNle5uEIiyBsi4IvbcTCh8ruifCIi5mDXkZrnMT8n
+wfYCV6v6kDdXkbgGRLKsR4pucbJtbKqIkUGxuZI2t7pfewKRc5nWecvDBZf3+p1M
+pA8CAwEAAaOCAU8wggFLMB0GA1UdDgQWBBRVdE+yck/1YLpQ0dfmUVyaAYca1zAf
+BgNVHSMEGDAWgBQD3lA1VtFMu2bwo+IbG8OXsj3RVTAOBgNVHQ8BAf8EBAMCAYYw
+HQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMBIGA1UdEwEB/wQIMAYBAf8C
+AQAwNAYIKwYBBQUHAQEEKDAmMCQGCCsGAQUFBzABhhhodHRwOi8vb2NzcC5kaWdp
+Y2VydC5jb20wQgYDVR0fBDswOTA3oDWgM4YxaHR0cDovL2NybDMuZGlnaWNlcnQu
+Y29tL0RpZ2lDZXJ0R2xvYmFsUm9vdENBLmNybDBMBgNVHSAERTBDMDcGCWCGSAGG
+/WwBAjAqMCgGCCsGAQUFBwIBFhxodHRwczovL3d3dy5kaWdpY2VydC5jb20vQ1BT
+MAgGBmeBDAECATANBgkqhkiG9w0BAQsFAAOCAQEAK3Gp6/aGq7aBZsxf/oQ+TD/B
+SwW3AU4ETK+GQf2kFzYZkby5SFrHdPomunx2HBzViUchGoofGgg7gHW0W3MlQAXW
+M0r5LUvStcr82QDWYNPaUy4taCQmyaJ+VB+6wxHstSigOlSNF2a6vg4rgexixeiV
+4YSB03Yqp2t3TeZHM9ESfkus74nQyW7pRGezj+TC44xCagCQQOzzNmzEAP2SnCrJ
+sNE2DpRVMnL8J6xBRdjmOsC3N6cQuKuRXbzByVBjCqAA8t1L0I+9wXJerLPyErjy
+rMKWaBFLmfK/AHNF4ZihwPGOc7w6UHczBZXH5RFzJNnww+WnKuTPI0HfnVH8lg==
+-----END CERTIFICATE-----

package-lock.json

@@ -461,6 +461,16 @@
         }
       }
     },
+    "@vant/icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.3.0.tgz",
+      "integrity": "sha512-uQ0H19C+SDZbvaUR3CfrpJe/oiMeXPtJJvdRNjswpxICh1LRdKvQf9FxG2PhhWjAJWKyP55CVXn22qFswOUIRg=="
+    },
+    "@vue/babel-helper-vue-jsx-merge-props": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
+      "integrity": "sha512-6tyf5Cqm4m6v7buITuwS+jHzPlIPxbFzEhXR5JGZpbrvOcp1hiQKckd305/3C7C36wFekNTQSxAtgeM0j0yoUw=="
+    },
     "@vue/component-compiler-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npm.taobao.org/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.2.0.tgz?cache=0&sync_timestamp=1595427694165&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.2.0.tgz",
@@ -10442,6 +10452,17 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.10.6",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-2.10.6.tgz",
+      "integrity": "sha512-i/5rvBxwgkPTRExaENYMWa1HA+3QWiSuKOJUJaS0c8aKm/gfzrQ/n3HKfO77/XBe7L6LKdZRmyqpSZPYhLL/sQ==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "1.3.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
@@ -10531,6 +10552,11 @@
       "resolved": "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.21.0.tgz",
       "integrity": "sha1-UmRQUl/buch3aFtbpsuVc7c9OUA="
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz",

package.json

@@ -72,6 +72,7 @@
     "lodash": "^4.17.15",
     "promise.prototype.finally": "^3.1.2",
     "regenerator": "^0.14.4",
+    "vant": "^2.10.6",
     "vue": "^2.6.11",
     "vue-i18n": "^8.16.0",
     "vue-loader": "^15.9.1",

src/action/ListAction.js

+import BaseACTION from './base_action'
+import { List } from '@api'
+
+export default class ListAction extends BaseACTION {
+  /* get传输方式 */
+  getLiveList (obj) {
+    return List.getLiveList(obj).then(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    }).catch(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    })
+  }
+
+  /* get传输方式 */
+  getLiveDetail (id) {
+    return List.getLiveDetail(id).then(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    }).catch(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    })
+  }
+
+  /* get传输方式 */
+  getDetailUser (id) {
+    return List.getDetailUser(id).then(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    }).catch(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    })
+  }
+
+  /* 获取直播回放的列表 */
+  getPlaybackList (obj) {
+    return List.getPlaybackList(obj).then(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    }).catch(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    })
+  }
+}

src/action/LoginAction.js

+import BaseACTION from './base_action'
+import { Login } from '@api'
+
+export default class LoginAction extends BaseACTION {
+  /* get传输方式 */
+  getSendCode (obj) {
+    return Login.getSendCode(obj).then(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    }).catch(res => {
+      return res || { test: this.getVueInstance().$t('action.interface') }
+    })
+  }
+
+  register (obj) {
+    return Login.register(obj).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  login (obj) {
+    return Login.login(obj).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  getUserInfo () {
+    return Login.getUserInfo().then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  loginOut () {
+    return Login.loginOut().then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* post传输方式 */
+  postTest (obj = {}) {
+    return Login.postTest(obj).then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+
+  /* 当前登录用户，检测是否该系统有权限 */
+  getInfo () {
+    return Login.getInfo().then(res => {
+      return res || { test: 'OK' }
+    }).catch(res => {
+      return res || { test: 'OK' }
+    })
+  }
+}

src/action/index.js

 import TestAction from './TestAction'
+import LoginAction from './LoginAction'
+import ListAction from './ListAction'
 
 const Test = new TestAction()
+const Login = new LoginAction()
+const List = new ListAction()
 
 const cAction = {
-  Test
+  Test,
+  Login,
+  List
 }
 
 export default cAction

src/api/base_api.js

@@ -70,6 +70,9 @@ export default class API {
     const { status, data } = res
     let err = null
     if (status === 200) {
+      if (data.code === 5002 && window.location.href.indexOf('login') === -1) {
+        window.location.href = '/login'
+      }
       return data
     } else {
       err = new Error(JSON.stringify(res.data))

src/api/index.js

 import TestAPI from './test_api'
+import LoginAPI from './login_api'
+import ListAPI from './list_api'
 
 const Test = new TestAPI(webConf)
+const Login = new LoginAPI(webConf)
+const List = new ListAPI(webConf)
 
 export {
-  Test
+  Test,
+  Login,
+  List
 }

src/api/list_api.js

+import BaseAPI from './base_api'
+
+export default class ListAPI extends BaseAPI {
+  /**
+   * 列表
+   */
+  getLiveList = (obj) => this.get('/share/v1/live-activity/list', obj, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+  /**
+   * 详情
+   */
+  getLiveDetail = (id) => this.get(`/share/v1/live-activity/detail/${id}`, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+  /**
+   * 获取加入H5乐分享直播的用户
+   */
+  getDetailUser = (id) => this.get(`/share/v1/live-activity/join/${id}/users`, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+  /**
+   * 获取直播回放的列表
+   */
+  getPlaybackList = (obj) => this.get('/share/v1/live-activity/record-list', obj)
+}

src/api/login_api.js

+import BaseAPI from './base_api'
+
+export default class LoginAPI extends BaseAPI {
+  /**
+   * 获取验证码
+   * @param {[string]} id resource_id
+   */
+  getSendCode = (obj) => this.post('/share/v1/live-activity/send-sms-code', obj, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+  /**
+   * 注册
+   * @param {[string]} id resource_id
+   */
+  register = (obj) => this.post('/share/v1/live-activity/register', obj, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+  /**
+   * 登录
+   * @param {[string]} id resource_id
+   */
+  login = (obj) => this.post('/share/v1/live-activity/login', obj, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+  /**
+   * 获取用户信息
+   * @param {[object]} obj
+   */
+  getUserInfo = () => this.get('/share/v1/live-activity/user', { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+  /**
+  * 退出登录
+  */
+ loginOut = () => this.get('/share/v1/live-activity/logout', {}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+}

src/assets/rem/rem.js

+; (function (win, doc) {
+  var resize = 'orientationchange' in window ? 'orientationchange' : 'resize'
+  /* 使用rem 动态计算跟font-size值  */
+  function resizeRoot() {
+    var wWidth = (win.screen.width > 0)
+      ? ((win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth)
+      : win.innerWidth
+    var wFsize = (wWidth > 750 ? 750 : wWidth) / 750 * 100
+    doc.documentElement.style.fontSize = wFsize + 'px'
+  }
+  win.addEventListener(resize, resizeRoot, false)
+  doc.addEventListener('DOMContentLoaded', resizeRoot, false)
+})(window, document)

src/components/tabbar.vue

+<template>
+  <div>
+    <div class="tabbar-b">
+      <div :class="type == 1 ? 'btn active' : 'btn'" @click="goHome">
+        <div class="home-icon"></div>
+        <div class="txt">首页</div>
+      </div>
+      <div :class="type == 2 ? 'btn active' : 'btn'" @click="goMy">
+        <div class="my-icon"></div>
+        <div class="txt">我</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: String
+  },
+  mounted() {},
+  methods: {
+    goHome() {
+      this.$router.push({
+        path: '/index'
+      })
+    },
+    goMy() {
+      this.$router.push({
+        path: '/my'
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tabbar-b{
+  width: 100%;
+  height: 1.08rem;
+  background: #fff;
+  box-shadow: 0 -1px 15px rgba(0,0,0,0.05);
+  display: flex;
+  align-items: center;
+  .btn{
+    text-align: center;
+    flex: 1;
+    .home-icon{
+      width: 0.4rem;
+      height: 0.4rem;
+      margin: 0 auto;
+      background: url(../assets/images/my/tab-i4.png);
+      background-size: 100% 100%;
+    }
+    .my-icon{
+      width: 0.32rem;
+      height: 0.4rem;
+      margin: 0 auto;
+      background: url(../assets/images/my/tab-i2.png);
+      background-size: 100% 100%;
+    }
+    .txt{
+      color: #ccc;
+      font-size: .2rem;
+      line-height: 100%;
+      margin-top: .12rem;
+    }
+    &.active{
+      .home-icon{
+        background: url(../assets/images/my/tab-i3.png);
+        background-size: 100% 100%;
+      }
+      .my-icon{
+        background: url(../assets/images/my/tab-i1.png);
+        background-size: 100% 100%;
+      }
+      .txt{
+        color: #AF1B40;
+      }
+    }
+  }
+}
+</style>

src/components/topTitle.vue

+<template>
+  <div>
+    <div class="title-box" @click="$router.go(-1)">
+      <van-icon name="arrow-left"  class="left-btn"/>
+      <div class="text">返回</div>
+      <div class="title">{{ title }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Icon } from 'vant'
+export default {
+  name: 'topTitle',
+  props: {
+    title: String
+  },
+  components: {
+    [Icon.name]: Icon
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  color: #222222;
+  font-size: .3rem;
+}
+.left-btn{
+  padding-left: .38rem;
+}
+.title-box{
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 1rem;
+  background: #fff;
+  color: #0075FF;
+  .text{
+    font-size: .24rem;
+    margin-left: .1rem;
+  }
+}
+</style>

src/index.html

@@ -4,32 +4,21 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta content="origin" name="referrer">
-  <!-- 如果只是想html禁用缓存，使用以下三行 -->
-  <!-- 经过验证，发现有时不一定有用，不如 wmp项目中login/is-login跳转，会自动产生 from the disk -->
-  <!-- 总结：彻底解决 index.html 不加缓存 请使用 `nginx上配置 no-cache` -->
-  <!-- 直接访问 图片、JS、CSS等资源不会出现（from the disk），只有在html中，访问资源才会出现`强缓存`。 -->
-  <!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> -->
-  <!-- <meta http-equiv="Pragma" content="no-cache" /> -->
-  <!-- <meta http-equiv="Expires" content="0" /> -->
-  <title>标题</title>
-  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+  <title>乐分享直播活动H5</title>
+  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
+  <!-- <script src="https://cdn.jsdelivr.net/npm/vconsole@3.3.4/dist/vconsole.min.js"></script> -->
 </head>
 <body>
   <div id="app"></div>
-  <!-- es5 兼容 新方法 -->
-  <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/es5-shim.min.js"></script>
-  <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/es5-sham.min.js"></script>
-  <!-- 三方插件引入 -->
-  <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/ckeditor/ckeditor.js"></script>
-  <!-- common -->
-  <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/base64.js"></script>
-  <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/md5.js"></script>
-  <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/jQuery-2.1.4.min.js"></script>
+  <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/runtime.js"></script>
-  <!--[if lt IE 9]>
-    <script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/console-polyfill.js"></script>
-    <script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/html5shiv.min.js"></script>
-    <script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/respond.min.js"></script>
-  <![endif]-->
 </body>
+<script>
+  // init vConsole
+  // var vConsole = new VConsole();
+  // console.log('Hello world');
+</script>
 </html>

src/main.js

@@ -6,12 +6,18 @@ import createI18n from './assets/languages' // 国际化定义
 
 import App from './app.vue' // 初始化 vue页面
 import './style.scss' // 公共样式
+import './assets/rem/rem.js'
 import MetaInfo from 'vue-meta-info'
 import Element from 'element-ui'
 import modules from './modules'
 
 import createBefore from './components/beforeEnter'
 
+// vant
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+Vue.use(Vant)
 /* 兼容处理 start */
 /* 处理低版本浏览器支持axios finally问题 */
 require('promise.prototype.finally').shim()

src/pages/list/details.vue

+<template>
+  <div>
+    <div class="top-f">
+      <top-title :title="detailData.name"></top-title>
+    </div>
+    <ul class="img-scroll">
+      <li><img :src="detailData.poster_url" alt=""></li>
+    </ul>
+    <div class="content">
+      <div class="live-state">
+        <div class="time">
+          <p>活动开始时间</p>
+          <p>{{ getDate(detailData.start_at) }}</p>
+        </div>
+        <div class="state">
+          <p>活动直播间状态</p>
+          <p :class="detailData.live_status == 1 ? 'active1' : detailData.live_status == 2 ? 'active2' : 'active3'" @click="joinActivity(detailData.live_status, detailData)">
+            <span>{{ detailData.live_status == 1 ? '直播未开始' : detailData.live_status == 2 ? '直播进行中' : '直播已结束' }}</span>
+            <span v-if="detailData.live_status == 2" class="icon"></span>
+          </p>
+          <!-- <p
+            :class="detailData.live_status == 1 ? 'active1' : detailData.live_status == 2 ? 'active2' : ''"
+          >{{ detailData.live_status == 1 ? '直播未开始' : detailData.live_status == 2 ? '直播进行中' : '直播已结束' }}</p> -->
+        </div>
+      </div>
+      <div class="duce">
+        <div class="title">活动介绍</div>
+        <div class="txt" v-html="detailData.introduce"></div>
+      </div>
+      <div class="duce">
+        <div class="title">活动内容</div>
+        <div class="txt" v-html="detailData.content"></div>
+      </div>
+      <div class="list" v-if="detailData.live_status == 3" @click="goPlayback">
+        <div class="title">活动回放记录</div>
+        <van-icon name="arrow" class="icon"/>
+      </div>
+      <div class="join-user">
+        <div class="title">参与活动的用户</div>
+        <ul>
+          <template v-for="(item, index) in userList">
+            <li :key="index" v-if="item.user_info">
+              <img :src="item.user_info.avatar" alt="">
+              <div class="info">
+                <div class="name">{{ item.user_info.nickname }}</div>
+                <div class="time">{{ getDate(item.join_activity_time) }}</div>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import action from '@action'
+import topTitle from '../../components/topTitle.vue'
+export default {
+  components: {
+    topTitle
+  },
+  data() {
+    return {
+      detailData: {},
+      userList: [],
+      liveData: {}
+    }
+  },
+  mounted() {
+    this.getDetail()
+    this.getDetailUser()
+  },
+  methods: {
+    joinActivity() {
+      let url = this.liveData.code.viewUrl
+      action.Login.getUserInfo().then((res) => {
+        if (res.code === 0) {
+          const user = res.data
+          url += `&autoLogin=true&viewername=${user.username}&viewertoken=${this.liveData.play_pass}`
+          window.location.href = url
+        }
+      })
+    },
+    getDetail() {
+      action.List.getLiveDetail(this.$route.query.id).then((res) => {
+        if (res.code === 0) {
+          this.detailData = res.data.activity_info
+          this.liveData = res.data.cc_room_info
+        }
+      })
+    },
+    getDate(timestamp) {
+      const time = new Date(parseInt(timestamp))
+      const year = time.getFullYear()
+      const month = (time.getMonth() + 1).toString().padStart(2, '0')
+      const date = (time.getDate()).toString().padStart(2, '0')
+      const hours = (time.getHours()).toString().padStart(2, '0')
+      const minute = (time.getMinutes()).toString().padStart(2, '0')
+      const second = (time.getSeconds()).toString().padStart(2, '0')
+      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
+    },
+    getDetailUser() {
+      action.List.getDetailUser(this.$route.query.id).then((res) => {
+        if (res.code === 0) {
+          this.userList = res.data.list
+        }
+      })
+    },
+    goPlayback() {
+      this.$router.push({
+        name: 'liveBack',
+        params: {
+          room_id: this.detailData.live_room_id
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top-f{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.img-scroll{
+  padding-top: 1rem;
+  padding-left: .4rem;
+  display: flex;
+  overflow: scroll;
+  li{
+    height: 3.35rem;
+    margin-right: .2rem;
+    img{
+      display: block;
+      height: 100%;
+    }
+  }
+}
+.content{
+  padding: 0 .4rem;
+  .live-state{
+    border-bottom: 0.01rem solid #ccc;
+    padding-top: .4rem;
+    .time{
+      display: flex;
+      p{
+        font-size: .24rem;
+        color: #222;
+        line-height: 100%;
+        &:nth-child(2){
+          margin-left: auto;
+          color: #666666;
+        }
+      }
+    }
+    .state{
+      margin: .4rem 0;
+      display: flex;
+      p{
+        font-size: .24rem;
+        color: #222;
+        line-height: 100%;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        &:nth-child(2){
+          margin-left: auto;
+        }
+        &.active1{
+          color: #0075FF;
+        }
+        &.active2{
+          color: #fff;
+          display: flex;
+          align-items: center;
+          width: 1.73rem;
+          padding: 0 .2rem;
+          height: 0.5rem;
+          background: #5AD252;
+          border-radius: 0.08rem;
+        }
+        &.active3{
+          color: #C7385C;
+        }
+        .icon{
+          display: block;
+          width: .33rem;
+          height: 0.23rem;
+          background: url(../../assets/images/list/list-i1.png);
+          background-size: 100% 100%;
+          margin-left: auto;
+        }
+      }
+    }
+  }
+  .duce{
+    border-bottom: 0.01rem solid #ccc;
+    padding-top: .4rem;
+    .title{
+      font-size: .3rem;
+      color: #222;
+      font-weight: bold;
+      line-height: 100%;
+    }
+    .txt{
+      font-size: .24rem;
+      line-height: .24rem;
+      color: #222;
+      margin: .4rem 0;
+    }
+  }
+  .list{
+    display: flex;
+    height: 1.1rem;
+    display: flex;
+    align-items: center;
+    border-bottom: 0.01rem solid #ccc;
+    .title{
+      color: #222;
+      font-size: .3rem;
+    }
+    .icon{
+      margin-left: auto;
+    }
+  }
+  .join-user{
+    .title{
+      line-height: 1.1rem;
+      font-size: .3rem;
+      color: #222;
+    }
+    ul{
+      li{
+        margin-bottom: .4rem;
+        display: flex;
+        img{
+          width: .9rem;
+          height: .9rem;
+          border-radius: 50%;
+        }
+        .info{
+          margin-left: .4rem;
+          padding-top: .11rem;
+          .name{
+            line-height: 100%;
+            font-size: .24rem;
+            color: #222;
+          }
+          .time{
+            font-size: .24rem;
+            color: #222;
+            line-height: 100%;
+            margin-top: .2rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/list/index.vue

+<template>
+  <div class="list-bg">
+    <div class="content">
+      <div class="title">活动</div>
+      <div class="list-scroll">
+        <ul>
+          <template v-for="(item, index) in listData">
+            <li :key="index" @click="goDetail(item.id)">
+              <img :src="item.poster_url" alt="">
+              <div class="info">
+                <div class="card-tit">{{ item.name }}</div>
+                <div class="state">
+                  <div :class="item.live_status == 1 ? 'active1 live' : item.live_status == 2 ? 'zlive' : 'active2 live'">
+                    <span>{{ item.live_status == 1 ? '直播未开始' : item.live_status == 2 ? '直播进行中' : '直播已结束' }}</span>
+                    <div class="icon"></div>
+                  </div>
+                  <div class="time">{{getDate(item.published_time)}}</div>
+                </div>
+              </div>
+            </li>
+          </template>
+          <!-- <li>
+            <img src="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/kelley/fef53983e698fff6f877726b634d5d34.jpg" alt="">
+            <div class="info">
+              <div class="card-tit">乐分享直播活动</div>
+              <div class="state">
+                <div class="live active1">直播未开始</div>
+                <div class="time">2020-09-21 21:21:21</div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <img src="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/kelley/fef53983e698fff6f877726b634d5d34.jpg" alt="">
+            <div class="info">
+              <div class="card-tit">乐分享直播活动</div>
+              <div class="state">
+                <div class="zlive">
+                  <span>直播未开始</span>
+                  <div class="icon"></div>
+                </div>
+                <div class="time">2020-09-21 21:21:21</div>
+              </div>
+            </div>
+          </li> -->
+        </ul>
+      </div>
+    </div>
+    <div class="tabbar-box">
+      <tabbar type='1'></tabbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import action from '@action'
+import tabbar from '../../components/tabbar.vue'
+export default {
+  components: {
+    tabbar
+  },
+  data() {
+    return {
+      listData: []
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      action.List.getLiveList().then((res) => {
+        if (res.code === 0) {
+          this.listData = res.data.list
+        }
+      })
+    },
+    getDate(timestamp) {
+      const time = new Date(parseInt(timestamp))
+      const year = time.getFullYear()
+      const month = (time.getMonth() + 1).toString().padStart(2, '0')
+      const date = (time.getDate()).toString().padStart(2, '0')
+      const hours = (time.getHours()).toString().padStart(2, '0')
+      const minute = (time.getMinutes()).toString().padStart(2, '0')
+      const second = (time.getSeconds()).toString().padStart(2, '0')
+      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
+    },
+    goDetail(id) {
+      this.$router.push({
+        path: 'details',
+        query: {
+          id: id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-bg{
+  background: #F1F1F1;
+}
+.title{
+  color: #222;
+  font-size: .3rem;
+  line-height: 1.1rem;
+}
+.tabbar-box{
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+.content{
+  padding: 0 .4rem;
+}
+.list-scroll{
+  padding-bottom: 2rem;
+  ul{
+    li{
+      background: #fff;
+      width: 100%;
+      border-radius: 0.16rem;
+      overflow: hidden;
+      margin-bottom: .4rem;
+      img{
+        width: 100%;
+        display: block;
+      }
+      .info{
+        padding: 0.4rem;
+        .card-tit{
+          line-height: 100%;
+          color: #222;
+          font-size: .3rem;
+        }
+        .state{
+          display: flex;
+          margin-top: .2rem;
+          .live{
+            font-size: .24rem;
+            &.active1{
+              color: #0075FF;
+            }
+            &.active2{
+              color: #C7385C;
+            }
+          }
+          .zlive{
+            display: flex;
+            align-items: center;
+            width: 1.73rem;
+            padding: 0 .2rem;
+            height: 0.5rem;
+            background: #5AD252;
+            border-radius: 0.08rem;
+            span{
+              color: #fff;
+              font-size: .24rem;
+            }
+            .icon{
+              width: .33rem;
+              height: 0.23rem;
+              background: url(../../assets/images/list/list-i1.png);
+              background-size: 100% 100%;
+              margin-left: auto;
+            }
+          }
+          .time{
+            color: #666;
+            font-size: .24rem;
+            margin-left: auto;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/list/livePlayback.vue

+<template>
+  <div>
+    <div class="top-f">
+      <top-title title="直播回放"></top-title>
+    </div>
+    <ul class="back-list">
+      <template v-for="(item, index) in listData">
+        <li :key="index">
+          <div class="t">
+            <div class="name">录制时间</div>
+            <div class="time">{{ item.file.created_at }}</div>
+          </div>
+          <div class="b">
+            <div class="name">点击按钮观看回放</div>
+            <div class="play" @click="videoPlay(item.replay_url)"></div>
+          </div>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+<script>
+import action from '@action'
+import topTitle from '../../components/topTitle.vue'
+export default {
+  components: {
+    topTitle
+  },
+  data() {
+    return {
+      listData: []
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      action.List.getPlaybackList({ room_id: this.$route.params.room_id }).then((res) => {
+        if (res.code === 0) {
+          this.listData = res.data.list
+        }
+      })
+    },
+    videoPlay(url) {
+      window.location.href = url
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top-f{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.back-list{
+  padding: 1.1rem .4rem 0;
+  li{
+    border-bottom: 0.01rem solid #ccc;
+    padding: .4rem 0;
+    .t{
+      display: flex;
+      .name{
+        color: #222;
+        font-size: .24rem;
+        font-weight: 500;
+        line-height: 100%;
+      }
+      .time{
+        font-size: .24rem;
+        color: #666;
+        margin-left: auto;
+        line-height: 100%;
+      }
+    }
+    .b{
+      display: flex;
+      margin-top: .4rem;
+      align-items: center;
+      .name{
+        font-size: .24rem;
+        color: #222;
+        line-height: 100%;
+      }
+      .play{
+        margin-left: auto;
+        width: .46rem;
+        height: .4rem;
+        background: url(../../assets/images/list/play.png);
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>

src/pages/login/index.vue

+<template>
+  <div>
+    <img src="../../assets/images/login/login-bj.png" alt class="backdrop" />
+    <div class="content">
+      <div class="tap-btn">
+        <div :class="tapIndex ? '' : 'active'" @click="tapChange(0)">登录</div>
+        <div :class="tapIndex ? 'active' : ''" @click="tapChange(1)">注册</div>
+      </div>
+      <template v-if="!tapIndex">
+        <div class="login" v-if="!loginType">
+          <div class="input">
+            <input type="text" placeholder="请输入手机号" v-model="form.accountLogin1.account"/>
+          </div>
+          <div class="input">
+            <input type="text" placeholder="请输入密码" v-model="form.accountLogin1.password"/>
+          </div>
+        </div>
+        <div class="login" v-else>
+          <div class="input">
+            <input type="text" placeholder="请输入手机号" v-model="form.accountLogin2.mobile"/>
+          </div>
+          <div class="input">
+            <input type="text" placeholder="请输入验证码" v-model="form.accountLogin2.sms_code"/>
+            <div :class="time.second == 60 ? 'yzm-btn' : 'active yzm-btn'">{{ time.second == 60 ? '获取验证码' : `已发送验证码（${time.second}）` }}</div>
+          </div>
+        </div>
+        <div class="box-btn" @click="login">登录</div>
+        <div class="tap-login" @click="loginType ? loginType = 0 : loginType = 1">{{ loginType ? '账号密码登录' : '验证码登录' }}</div>
+      </template>
+      <template v-else>
+        <div class="login">
+          <div class="input">
+            <input type="text" placeholder="请输入真实姓名" v-model="form.register.username"/>
+          </div>
+          <div class="input">
+            <input type="text" placeholder="请输入手机号" v-model="form.register.mobile"/>
+          </div>
+          <div class="input">
+            <input type="text" placeholder="请输入验证码" v-model="form.register.sms_code"/>
+            <div @click="getRegisterCode" :class="time.second == 60 ? 'yzm-btn' : 'active yzm-btn'">{{ time.second == 60 ? '获取验证码' : `已发送验证码（${time.second}）` }}</div>
+          </div>
+        </div>
+        <div @click="register" class="box-btn">注册</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import action from '@action'
+import { Toast } from 'vant'
+export default {
+  data() {
+    return {
+      form: {
+        accountLogin1: {
+          action: 1,
+          account: '',
+          password: ''
+        },
+        accountLogin2: {
+          action: 2,
+          mobile: '',
+          sms_code: ''
+        },
+        register: {
+          username: '',
+          mobile: '',
+          sms_code: ''
+        }
+      },
+      tapIndex: 0,
+      loginType: 0,
+      time: {
+        second: 60,
+        clearTime: null
+      }
+    }
+  },
+  created() {
+    this.isLogin()
+  },
+  mounted() {
+    // this.getRegisterCode()
+  },
+  methods: {
+    login() {
+      const isNull1 = Object.values(this.form.accountLogin1).findIndex(item => { return item === '' })
+      const isNull2 = Object.values(this.form.accountLogin2).findIndex(item => { return item === '' })
+      console.log(this.form.accountLogin1)
+      if (this.loginType) {
+        if (isNull2 !== -1) {
+          Toast('手机号或验证码不能为空')
+          return false
+        }
+      } else {
+        if (isNull1 !== -1) {
+          Toast('手机号或密码不能为空')
+          return false
+        }
+      }
+      action.Login.login(this.loginType ? this.form.accountLogin2 : this.form.accountLogin1).then((res) => {
+        if (res.code === 0) {
+          this.$router.push({
+            path: '/index'
+          })
+        }
+        Toast(res.msg)
+      })
+    },
+    isLogin() {
+      action.Login.login({ action: 3 }).then((res) => {
+        if (res.code === 5004) {
+          this.$router.push({
+            path: '/index'
+          })
+          // 跳转
+        }
+        // Toast(res.msg)
+      })
+    },
+    register() {
+      const isNull = Object.values(this.form.register).findIndex(item => { return item === '' })
+      if (isNull !== -1) {
+        Toast('填写正确信息')
+        return false
+      }
+      action.Login.register(this.form.register).then((res) => {
+        Toast(res.msg)
+      })
+    },
+    tapChange(i) {
+      this.tapIndex = i
+      this.clearTickCode()
+    },
+    getRegisterCode() {
+      if (!(/^1[3-9]\d{9}$/.test(this.form.register.mobile))) {
+        Toast('手机号不正确')
+        return false
+      }
+      if (this.time.second === 60) {
+        action.Login.getSendCode({ mobile: this.form.register.mobile }).then((res) => {
+          res.code === 0 && (this.tickCode())
+          Toast(res.msg)
+        })
+      }
+    },
+    tickCode() {
+      clearInterval(this.time.clearTime)
+      this.time.clearTime = setInterval(() => {
+        this.time.second--
+        if (this.time.second === 0) {
+          clearInterval(this.time.clearTime)
+          this.time.second = 60
+        }
+      }, 1000)
+    },
+    clearTickCode() {
+      clearInterval(this.time.clearTime)
+      this.time.second = 60
+      this.form.register.username = ''
+      this.form.register.mobile = ''
+      this.form.register.sms_code = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.backdrop {
+  width: 100%;
+  height: 3rem;
+  display: block;
+}
+.content {
+  width: 6.3rem;
+  margin: 0 auto;
+  .tap-btn {
+    padding-top: 0.4rem;
+    display: flex;
+    width: 6.3rem;
+    div {
+      text-align: center;
+      flex: 1;
+      line-height: 1.16rem;
+      font-size: 0.36rem;
+      color: #ccc;
+      border-bottom: 0.02rem solid #f0c5d0;
+      &.active {
+        font-weight: bold;
+        color: #af1b40;
+        border-bottom: 0.02rem solid #af1b40;
+      }
+    }
+  }
+  .input {
+    padding-top: 0.6rem;
+    height: 0.77rem;
+    width: 6.3rem;
+    border-bottom: 0.01rem solid #cccccc;
+    display: flex;
+    align-items: center;
+    input {
+      color: #999;
+      font-size: 0.26rem;
+      border: none;
+      outline: none;
+      &::-webkit-input-placeholder {
+        color: #999;
+      }
+    }
+    .yzm-btn {
+      margin-left: auto;
+      color: #0075ff;
+      font-size: 0.26rem;
+      &.active{
+        color: #ccc;
+      }
+    }
+  }
+  .box-btn {
+    text-align: center;
+    line-height: 0.86rem;
+    width: 6.3rem;
+    height: 0.86rem;
+    background: linear-gradient(90deg, #af1b40 0%, #ea6183 100%);
+    box-shadow: 0rem 0.06rem 0.1rem 0rem rgba(175, 27, 64, 0.2);
+    border-radius: 0.5rem;
+    font-size: 0.36rem;
+    color: #fff;
+    margin-top: 0.8rem;
+  }
+  .tap-login {
+    text-align: center;
+    height: 0.37rem;
+    font-size: 0.26rem;
+    font-weight: 400;
+    color: #cccccc;
+    line-height: 0.6rem;
+  }
+}
+</style>

src/pages/my/index.vue

+<template>
+  <div>
+    <top-title></top-title>
+    <div class="info-box">
+      <img :src="info.avatar" alt="">
+      <div class="info">
+        <div class="name">{{ info.nickname }}</div>
+        <div class="mobile">{{ info.mobile }}</div>
+        <div class="em">{{ info.email }}</div>
+      </div>
+    </div>
+    <div class="out-login" @click="loginOut">退出登录</div>
+    <div class="tabbar-box">
+      <tabbar type='2'></tabbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import topTitle from '../../components/topTitle.vue'
+import tabbar from '../../components/tabbar.vue'
+import action from '@action'
+export default {
+  components: {
+    topTitle,
+    tabbar
+  },
+  data() {
+    return {
+      info: {}
+    }
+  },
+  mounted() {
+    this.getUserInfo()
+  },
+  methods: {
+    getUserInfo() {
+      action.Login.getUserInfo().then((res) => {
+        if (res.code === 0) {
+          this.info = res.data
+          console.log(res)
+        }
+      })
+    },
+    loginOut() {
+      action.Login.loginOut().then((res) => {
+        if (res.code === 0) {
+          this.$router.push({
+            path: '/login'
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-box{
+  display: flex;
+  margin-left: .4rem;
+  img{
+    width: 1.68rem;
+    height: 1.68rem;
+    border-radius: 50%;
+    display: block;
+  }
+  .info{
+    margin-left: .4rem;
+    div{
+      line-height: 100%;
+    }
+    .name{
+      font-size: .34rem;
+      color: #222;
+    }
+    .mobile{
+      font-size: .28rem;
+      color: #999;
+      margin-top: .35rem;
+    }
+    .em{
+      font-size: .28rem;
+      color: #999;
+      margin-top: .35rem;
+    }
+  }
+}
+.out-login{
+  position: absolute;
+  bottom: 1.4rem;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  font-size: .36rem;
+  color: #fff;
+  text-align: center;
+  line-height: .86rem;
+  width: 6.7rem;
+  height: 0.86rem;
+  background: linear-gradient(90deg, #AF1B40 0%, #EA6183 100%);
+  box-shadow: 0rem 0.06rem 0.1rem 0rem rgba(175, 27, 64, 0.2);
+  border-radius: 0.06rem;
+}
+.tabbar-box{
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+</style>

src/router/routes.js

 
 export default [
-  { path: '/', redirect: '/test' },
+  { path: '/', redirect: '/login' },
   /* 测试页面 */
   { path: '/test', name: 'test', component: () => import('../pages/test.vue') },
   /* 如果所有页面都没找到 - 指向 */
-  { path: '*', component: () => import('@/components/errorPages/404.vue') }
+  { path: '*', component: () => import('@/components/errorPages/404.vue') },
+  /* 登录页面 */
+  { path: '/login', component: () => import('../pages/login/index.vue') },
+  /* 我的页面 */
+  { path: '/my', component: () => import('../pages/my/index.vue') },
+  /* 首页列表页 */
+  { path: '/index', component: () => import('../pages/list/index.vue') },
+  /* 首页列表页详情 */
+  { path: '/details', component: () => import('../pages/list/details.vue') },
+  /* 直播回放 */
+  {
+    path: '/liveBack/:room_id',
+    name: 'liveBack',
+    component: () => import('../pages/list/livePlayback.vue')
+  }
 ]

src/style.scss

@@ -4,7 +4,7 @@ html, body {
   margin: 0;
   height: 100%;
   width: 100%;
-  background: #eee;
+  background: #fff;
 }
 /* 统一字体样式 */
 * {