Merge branch 'master' of https://gitlab.ezijing.com/ezijing/transport-weapp-h5

src/app.vue

@@ -10,7 +10,10 @@ export default {}
 
 <style lang="scss" scoped>
 #app {
+  min-width: 320px;
   max-width: 750px;
+  min-height: 100vh;
   margin: 0 auto;
+  background-color: #fff;
 }
 </style>

src/components/CountdownButton.vue

 <template>
-  <van-button
-    native-type="button"
-    :disabled="currentDisabled"
-    :loading="loading"
-  >
-    {{ curretnValue }}
-  </van-button>
+  <van-button native-type="button" :disabled="currentDisabled" :loading="loading">{{ curretnValue }}</van-button>
 </template>
 
 <script>
@@ -61,6 +55,6 @@ export default {
   line-height: 38px;
 }
 .van-button--default {
-  border-color: #999;
+  border-color: #ccc;
 }
 </style>

src/components/CourseItem.vue

@@ -77,7 +77,7 @@ export default {
   overflow: hidden;
 }
 .course-item__text {
-  max-height: 0.68rem;
+  max-height: 0.34rem;
   font-size: 0.26rem;
   color: #999;
   white-space: nowrap;

src/index.html

@@ -16,8 +16,3 @@
   <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/runtime.js"></script>
 </body>
 </html>
-<style>
-html,body {
-  background: #fff;
-}
-</style>

src/pages/course/learn/courseChapter.vue

 <template>
   <van-collapse v-model="activeNames">
     <van-collapse-item :title="item.name" :name="item.id" v-for="item in data" :key="item.id">
+      <template #right-icon>
+        <van-icon name="arrow" />
+        <van-icon name="arrow-down" />
+      </template>
       <ul>
         <li
           v-for="subItem in item.children"
@@ -62,5 +66,12 @@ export default {
 }
 li {
   padding: 10px 0;
+  font-size: 13px;
+  &:first-child {
+    padding-top: 0;
+  }
+  &:last-child {
+    padding-bottom: 20px;
+  }
 }
 </style>

src/pages/course/learn/index.vue

@@ -42,5 +42,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+.course-item:last-child {
+  border-bottom: 0;
+}
 </style>

src/pages/course/tag/courseTagMessage.vue

@@ -3,16 +3,14 @@
     <div class="course-tag-message-hd">
       <div class="course-tag-message__title">{{data.name}}</div>
     </div>
-    <div class="course-tag-message-bd">
-      <template v-if="data.tag && data.tag.length">
-        <ul class="message-tag-list" ref="content">
-          <template v-for="item in data.tag">
-            <li class="course-tag-item" :key="item.id" @click="onClick(item)">
-              <p>{{item.title}}</p>
-            </li>
-          </template>
-        </ul>
-      </template>
+    <div class="course-tag-message-bd" v-if="data.tag && data.tag.length">
+      <ul class="message-tag-list" ref="content">
+        <template v-for="item in data.tag">
+          <li class="course-tag-item" :key="item.id" @click="onClick(item)">
+            <p>{{item.title}}</p>
+          </li>
+        </template>
+      </ul>
     </div>
     <div class="more" @click="viewMore" v-if="hasMore">
       <template v-if="!showMore">
@@ -102,11 +100,11 @@ export default {
   border-radius: 6px;
 }
 .course-tag-message-hd {
-  padding: 10px 0;
   font-size: 15px;
   color: #222;
 }
 .has-more .course-tag-message-bd {
+  margin-top: 10px;
   height: 102px;
   overflow: hidden;
 }

src/pages/course/tag/index.vue

@@ -170,7 +170,6 @@ export default {
 <style lang="scss" scoped>
 .messages {
   background: #eee;
-  overflow: hidden;
 }
 .send {
   height: 50px;

src/pages/course/tag/item.vue

@@ -8,13 +8,15 @@
         <div class="tag-content" v-html="html"></div>
       </div>
       <div class="tools">
-        <ul>
-          <li @click="toExamPage">知识点考试</li>
-        </ul>
-        <ul>
-          <li @click="getCourseTag(detail.last)" v-if="detail.last">上一点</li>
-          <li @click="getCourseTag(detail.next)" v-if="detail.next">下一点</li>
-        </ul>
+        <div class="inner">
+          <ul>
+            <li @click="toExamPage">知识点考试</li>
+          </ul>
+          <ul>
+            <li @click="getCourseTag(detail.last)" v-if="detail.last">上一点</li>
+            <li @click="getCourseTag(detail.next)" v-if="detail.next">下一点</li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
@@ -42,9 +44,9 @@ export default {
     html() {
       if (this.detail.contents) {
         return this.detail.contents
-          .replace(/\n/g, '<br/>')
-          .replace(/---------- start ----------/gi, '')
+          .replace(/---------- start ----------\n/gi, '')
           .replace(/---------- end ----------/gi, '')
+          .replace(/\n/g, '<br/>')
       }
       return ''
     },
@@ -99,28 +101,28 @@ export default {
 .course-tag-hd {
   position: sticky;
   top: 0;
-  padding: 0.4rem;
+  padding: 20px;
   background-color: #fff;
   z-index: 10;
 }
 .course-tag-bd {
-  padding: 0.4rem;
+  padding: 20px;
 }
 .course-tag-main {
-  padding: 0.2rem;
+  padding: 10px;
   background-color: #fff;
-  border-radius: 0.12rem;
+  border-radius: 6px;
 }
 .tag-title {
-  font-size: 0.3rem;
+  font-size: 15px;
   font-weight: bold;
   color: #222;
-  line-height: 0.48rem;
+  line-height: 24px;
 }
 .tag-content {
-  padding: 20px 0;
+  padding: 10px 0;
   font-size: 13px;
-  line-height: 24px;
+  line-height: 22px;
   img {
     max-width: 100%;
   }
@@ -129,13 +131,24 @@ export default {
   }
 }
 .tools {
-  display: flex;
-  justify-content: space-between;
   margin-top: 5px;
+  height: 34px;
+  padding-bottom: env(safe-area-inset-bottom);
+  .inner {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    height: 34px;
+    padding: 20px 20px 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
   li {
     display: inline-block;
     height: 24px;
-    margin: 0 0 10px 10px;
+    margin-left: 10px;
     padding: 0 15px;
     font-size: 13px;
     color: #fff;

src/pages/course/tag/list.vue

@@ -109,32 +109,33 @@ export default {
 .course-tag-hd {
   position: sticky;
   top: 0;
-  padding: 0.4rem;
+  padding: 20px;
   background-color: #fff;
   z-index: 10;
 }
 .course-tag-bd {
-  padding: 0.4rem;
+  padding: 20px;
 }
 .course-tag-main {
-  padding: 0.2rem;
+  padding: 10px;
   background-color: #fff;
-  border-radius: 0.12rem;
+  border-radius: 6px;
 }
 .course-title {
-  font-size: 0.3rem;
+  font-size: 15px;
+  font-weight: bold;
   color: #222;
 }
 .tag-title {
-  font-size: 0.3rem;
+  font-size: 15px;
   font-weight: bold;
   color: #222;
-  line-height: 0.48rem;
+  line-height: 24px;
 }
 .tag-item {
   position: relative;
-  padding: 0.4rem 0.4rem 0.4rem 0;
-  font-size: 0.3rem;
+  padding: 20px 20px 20px 0;
+  font-size: 15px;
   color: #222;
   line-height: 1.4;
   border-bottom: 1px solid #eee;
@@ -146,6 +147,7 @@ export default {
     right: 0;
     top: 50%;
     transform: translateY(-50%);
+    color: #999;
   }
 }
 </style>

src/pages/course/tag/messageCard.vue

 <template>
   <div class="message-card" :class="classes">
     <div class="message-card-content">
+      <div class="message-arrow"></div>
       <slot :data="data.payload">
         <div class="message-card-text" v-if="data.type === 0">{{data.payload.text}}</div>
         <course-tag-message
@@ -66,6 +67,16 @@ export default {
   border-radius: 6px;
 }
 .is-my {
+  .message-arrow {
+    position: absolute;
+    right: -5px;
+    top: 16px;
+    width: 0;
+    height: 0;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-left: 5px solid #67a8ff;
+  }
   .message-card-content {
     text-align: right;
   }
@@ -75,4 +86,19 @@ export default {
     background-color: #67a8ff;
   }
 }
+.message-card-content {
+  position: relative;
+}
+.is-system {
+  .message-arrow {
+    position: absolute;
+    left: -5px;
+    top: 16px;
+    width: 0;
+    height: 0;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-right: 5px solid #fff;
+  }
+}
 </style>

src/pages/course/tag/tagMessage.vue

@@ -48,9 +48,9 @@ export default {
     html() {
       if (this.data.contents) {
         return this.data.contents
-          .replace(/\n/g, '<br/>')
-          .replace(/---------- start ----------/gi, '')
+          .replace(/---------- start ----------\n/gi, '')
           .replace(/---------- end ----------/gi, '')
+          .replace(/\n/g, '<br/>')
       }
       return ''
     },

src/pages/home/index.vue

@@ -2,7 +2,7 @@
   <div class="main-container">
     <search-bar readonly @click.native="toSearch"></search-bar>
     <div class="banner">
-      <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe class="banner-swipe" :autoplay="3000">
         <van-swipe-item>
           <img src="../../assets/images/banner.png" @click="onClickNav('pay')" />
         </van-swipe-item>
@@ -181,38 +181,40 @@ export default {
   overflow: hidden;
 }
 .course-content-tag {
+  margin-top: 0.1rem;
   li {
     display: inline-block;
-    padding: 0 5px;
-    font-size: 12px;
+    padding: 0 0.05rem;
+    font-size: 0.2rem;
     color: #2b7ce9;
-    line-height: 14px;
-    background-color: rgba(43, 124, 233, 0.4);
-    border-radius: 3px;
+    line-height: 0.28rem;
+    background-color: #e9f1fc;
+    border-radius: 0.06rem;
   }
 }
 .course-content-ft {
-  margin-top: 10px;
+  margin-top: 0.1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .course-content__price {
-  font-size: 13px;
+  font-size: 0.26rem;
+  font-weight: bold;
   color: #ff6767;
   line-height: 1;
   span {
-    font-size: 24px;
+    font-size: 0.48rem;
   }
 }
 .course-content__button {
-  width: 80px;
-  height: 24px;
-  font-size: 12px;
+  width: 1.6rem;
+  height: 0.48rem;
+  font-size: 0.24rem;
   color: #fff;
-  line-height: 24px;
+  line-height: 0.48rem;
   text-align: center;
   background: rgba(255, 103, 103, 1);
-  border-radius: 12px;
+  border-radius: 0.24rem;
 }
 </style>

src/pages/login/accountLogin.vue

@@ -24,10 +24,10 @@ export default {
   methods: {
     submit() {
       if (!this.ruleForm.account) {
-        this.$notify('请输入手机/邮箱/用户名')
+        this.$toast('请输入手机/邮箱/用户名')
         return false
       } else if (!this.ruleForm.password) {
-        this.$notify('请输入密码')
+        this.$toast('请输入密码')
         return false
       }
       return this.$refs.form.submit()

src/pages/login/bind.vue

-<template>
-  <div class="login">
-    <div class="login-box">
-      <div class="login-hd">
-        <h2 class="login-title">绑定</h2>
-      </div>
-      <div class="login-bd">
-        <div class="login-form">
-          <!-- 账号登录 -->
-          <account-login ref="form" @submit="onSubmit"></account-login>
-          <!-- 验证码登录 -->
-          <!-- <code-login ref="form" @submit="onSubmit"></code-login> -->
-          <div class="login-button" @click="handleSubmit">立即绑定</div>
-        </div>
-      </div>
-      <div class="login-ft">
-        <p class="login-tips">
-          登录遇到困难？请点击
-          <span class="forget-password" @click="passwordVisible = true">找回密码</span>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Cookies from 'js-cookie'
-
-import * as api from '@/api/account'
-import AccountLogin from './accountLogin.vue'
-import CodeLogin from './codeLogin.vue'
-
-export default {
-  components: { AccountLogin, CodeLogin },
-  data() {
-    const UA = navigator.userAgent.toLowerCase()
-    return {
-      ruleForm: {
-        type: 1,
-        account: '',
-        password: '',
-        RememberMe: true,
-        service: 'https://h5.ezijing.com'
-      },
-      passwordVisible: false,
-      isWechat: /micromessenger/.test(UA),
-      unionid: Cookies.get('wechat_login_no_phone_error')
-    }
-  },
-  computed: {
-    // 重定向地址
-    redirectURI() {
-      const { query } = this.$route
-      return query.redirect_uri ? decodeURIComponent(query.redirect_uri) : ''
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.form.submit()
-    },
-    // 提交
-    onSubmit(data) {
-      this.unionid ? this.bindWechat(data) : this.loginRequest(data)
-    },
-    // 登录
-    loginRequest(data) {
-      const params = Object.assign({}, this.ruleForm, data)
-      api
-        .login(params)
-        .then(response => {
-          this.loginSuccess(response)
-        })
-        .catch(error => {
-          error.response && this.$toast(error.response.data.message)
-        })
-    },
-    // 绑定微信并登录
-    bindWechat() {
-      const data = Object.assign({}, this.ruleForm, { unionid: this.unionid })
-      api
-        .bindWechat(data)
-        .then(response => {
-          this.loginSuccess(response)
-        })
-        .catch(error => {
-          error.response && this.$toast(error.response.data.message)
-        })
-    },
-    // 登录成功
-    loginSuccess(response) {
-      if (response.code === 0) {
-        Cookies.remove('wechat_login_error', { domain: '.ezijing.com' })
-        Cookies.remove('wechat_login_no_phone_error', {
-          domain: '.ezijing.com'
-        })
-        if (this.redirectURI) {
-          window.location.href = this.redirectURI
-        } else {
-          this.$router.replace('/')
-        }
-        // this.$router.replace('/')
-      } else {
-        this.$toast(response.msg)
-      }
-    },
-    wechatLogin() {
-      const appId = 'wx451c01d40d090d7a'
-      // 回调地址
-      const redirectURI = `${process.env.VUE_APP_WECHAT_REDIRECT_URL}?needCheck=false&identity=friend&redirectUrl=${window.location.origin}`
-      // 微信的地址
-      console.log(redirectURI)
-      const wechatUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(
-        redirectURI
-      )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
-      // 打开地址
-      window.location.href = wechatUrl
-    },
-    checkWechatLogin() {
-      return !!(
-        Cookies.get('wechat_login_error') ||
-        Cookies.get('wechat_login_no_phone_error')
-      )
-    }
-  },
-  created() {
-    // if (this.isWechat && !this.checkWechatLogin()) {
-    //   this.wechatLogin()
-    // }
-  }
-}
-</script>
-<style lang="scss">
-.login {
-  position: relative;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: url('../../assets/images/login_bg.png') no-repeat;
-  background-size: contain;
-}
-.login-box {
-  position: absolute;
-  top: 100px;
-  left: 50px;
-  right: 50px;
-  height: 400px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 20px;
-}
-.login-hd {
-  padding: 10px 0;
-}
-.login-title {
-  display: inline-block;
-  font-size: 24px;
-  color: #2b7ce9;
-  border-bottom: 5px solid #2b7ce9;
-}
-.login-bd {
-  margin-top: 20px;
-  flex: 1;
-}
-.login-button {
-  margin-top: 20px;
-  height: 40px;
-  font-size: 12px;
-  color: #fff;
-  line-height: 40px;
-  background: linear-gradient(
-    270deg,
-    rgba(43, 124, 233, 1) 0%,
-    rgba(103, 168, 255, 1) 100%
-  );
-  text-align: center;
-  border-radius: 3px;
-  cursor: pointer;
-}
-.login-ft {
-  padding: 40px 0;
-}
-.login-tips {
-  text-align: center;
-  font-size: 12px;
-  color: #999;
-  .forget-password {
-    color: #1989fa;
-  }
-}
-.login {
-  .van-field {
-    margin-bottom: 20px;
-    padding: 0;
-    flex-direction: column;
-  }
-  .van-field__label {
-    font-size: 12px;
-    color: #222;
-    margin-bottom: 5px;
-    padding-left: 10px;
-  }
-  .van-field__control {
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-  }
-}
-</style>

src/pages/login/codeLogin.vue

 <template>
   <div class="code-login">
     <van-form class="login-form" ref="form" v-on="$listeners">
-      <van-field v-model="ruleForm.account" name="account" label="手机号" placeholder="请输入手机号" />
+      <van-field
+        type="tel"
+        v-model="ruleForm.account"
+        name="account"
+        label="手机号"
+        placeholder="请输入手机号"
+      />
       <van-field
         v-model="ruleForm.password"
+        type="digit"
         :maxlength="4"
         name="password"
         label="验证码"
@@ -32,10 +39,10 @@ export default {
   methods: {
     submit() {
       if (!this.ruleForm.account) {
-        this.$notify('请输手机号')
+        this.$toast('请输入正确的手机号码')
         return false
       } else if (!this.ruleForm.password) {
-        this.$notify('请输入验证码')
+        this.$toast('验证码输入错误，请重新输入')
         return false
       }
       return this.$refs.form.submit()
@@ -43,7 +50,7 @@ export default {
     // 发送验证码
     onSendCode() {
       if (!this.ruleForm.account) {
-        this.$notify('请输手机号')
+        this.$toast('请输入正确的手机号码')
         return false
       }
       // 开始倒计时
@@ -56,17 +63,17 @@ export default {
         .sendResetPasswordCode({ account: this.ruleForm.account })
         .then(response => {
           if (response.code === 0) {
-            this.$notify({ type: 'success', message: '验证码发送成功' })
+            this.$toast({ type: 'success', message: '验证码发送成功' })
           } else {
             // 停止计时
             this.$refs.countdown.stop()
-            this.$notify(response.msg)
+            this.$toast(response.msg)
           }
         })
         .catch(error => {
           // 停止计时
           this.$refs.countdown.stop()
-          error.response && this.$notify(error.response.data.message)
+          error.response && this.$toast(error.response.data.message)
         })
     }
   }

src/pages/login/login.vue

@@ -292,4 +292,8 @@ export default {
     border-radius: 3px;
   }
 }
+.van-toast--text {
+  padding: 20px;
+  border-radius: 6px;
+}
 </style>

src/pages/my/index.vue

@@ -12,7 +12,7 @@
         <van-icon name="arrow" class="icon" />
       </li>
     </ul>
-    <div class="login-out" @click="logout" v-if="user.id">退出登录</div>
+    <!-- <div class="login-out" @click="logout" v-if="user.id">退出登录</div> -->
   </div>
 </template>
 

src/pages/search/courseList.vue

@@ -78,5 +78,8 @@ export default {
   font-size: 0.3rem;
   color: #222;
   border-bottom: 1px solid #f1f1f1;
+  &:last-child {
+    border-bottom: 0;
+  }
 }
 </style>

src/pages/search/index.vue

@@ -126,6 +126,7 @@ export default {
 }
 .search-tips__title {
   font-size: 0.3rem;
+  font-weight: 400;
   color: #222;
 }
 .search-tips__list {

src/pages/search/tagList.vue

@@ -76,5 +76,8 @@ export default {
   font-size: 0.3rem;
   color: #222;
   border-bottom: 1px solid #f1f1f1;
+  &:last-child {
+    border-bottom: 0;
+  }
 }
 </style>

src/style.scss

-html * {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  outline: none;
-  -webkit-text-size-adjust: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
 body,
 h1,
 h2,
@@ -93,20 +85,56 @@ body {
   font-size: 14px;
   line-height: 1.4;
   color: #222;
-  font-family: 'Source Han Sans CN', 'PingFang SC', -apple-system,
+  font-family: 'PingFang SC', 'Source Han Sans CN', -apple-system,
     'Microsoft YaHei', 'Helvetica', 'Arial', Verdana, 'Hiragino Sans GB',
     'Wenquanyi Micro Hei', sans-serif;
-  background-color: #eee;
+  background-color: #f7f7f7;
 }
 .main-container {
   margin: 0 0.4rem;
   padding-bottom: env(safe-area-inset-bottom);
 }
+.main-tabs .van-tab {
+  font-size: 15px;
+  color: #999;
+}
 .main-tabs .van-hairline--top-bottom::after {
   border-top: 0;
 }
+.main-tabs .van-tab--active {
+  font-weight: 600;
+  color: #000;
+}
 .main-list .empty {
   padding: 40px 0;
   text-align: center;
   color: #999;
 }
+.van-collapse .van-collapse-item__title {
+  padding: 20px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #222;
+}
+.van-collapse .van-icon {
+  margin-top: 4px;
+  color: #999;
+}
+.van-collapse .van-icon-arrow-down {
+  display: none;
+}
+.van-collapse .van-collapse-item__title--expanded .van-icon-arrow {
+  display: none;
+}
+.van-collapse .van-collapse-item__title--expanded .van-icon-arrow-down {
+  display: block;
+}
+
+.van-swipe .van-swipe__indicator--active {
+  width: 30px;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: 3px;
+}
+.van-swipe .van-swipe__indicators {
+  bottom: 5px;
+}