updates

src/api/base.ts

@@ -34,3 +34,27 @@ export function getBuyShop() {
     headers: { tenant: 'paa' }
   })
 }
+/**
+ * 发送验证码
+ */
+export function sendCode(data: any) {
+  return httpRequest.post('/api/usercenter/user/send-code', data, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}
+
+/**
+ * 检验验证码
+ */
+export function checkCode(params: any) {
+  return httpRequest.get('/api/usercenter/user/check-code', { params })
+}
+
+/**
+ * 提交留咨信息
+ */
+export function postNes(data: any) {
+  return httpRequest.post('/api/enrollment/v1.0/applications', data, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}

src/components/layout/Header.vue

@@ -4,7 +4,7 @@ import { useUserStore } from '@/stores/user'
 import { useRoute } from 'vue-router'
 import AppNav from './Nav.vue'
 import { ElMessage } from 'element-plus'
-// const { courses } = useUserStore()
+const courseStore = useUserStore()
 
 interface Props {
   fixed?: boolean
@@ -45,12 +45,15 @@ const isScrolled = computed(() => {
   return y.value > 0
 })
 const handleStudy = () => {
-  if (JSON.parse(localStorage.getItem('courses') as string).length > 0) {
+  if (courseStore.courses.length > 0) {
     window.open('https://paa-learning.ezijing.com')
   } else {
     ElMessage.warning('请先购买课程，才能开始学习')
   }
 }
+const handleOrder = () => {
+  window.open('https://account-show.ezijing.com/payment')
+}
 </script>
 
 <template>
@@ -71,7 +74,7 @@ const handleStudy = () => {
       </div>
       <div class="app-header-right">
         <template v-if="user.isLogin">
-          你好，{{ user.userName }}
+          <div @click="handleOrder" style="cursor: pointer">你好，{{ user.userName }}</div>
           <div class="app-header-logout" @click="handleLogout">
             <img src="https://webapp-pub.ezijing.com/project/saas/logout.png" v-if="isScrolled || !fixed" />
             <img src="https://webapp-pub.ezijing.com/project_online/fi/logout_white.png" v-else />
@@ -136,6 +139,8 @@ const handleStudy = () => {
     font-size: 18px;
     line-height: 50px;
     margin-right: 30px;
+    font-weight: 400;
+    cursor: pointer;
   }
   display: flex;
 

src/components/layout/Index.vue

 <script setup lang="ts">
 import AppHeader from './Header.vue'
 import AppFooter from './Footer.vue'
+import RightAside from './RightAside.vue'
 const attrs = useAttrs()
 </script>
 
@@ -11,5 +12,6 @@ const attrs = useAttrs()
       <router-view :key="$route.fullPath"></router-view>
     </section>
     <AppFooter></AppFooter>
+    <RightAside />
   </div>
 </template>

src/components/layout/RightAside.vue

+<template>
+  <div class="right_bar">
+    <ul class="tab_btns">
+      <li
+        :class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
+        @mouseenter="handleMsOver('enroll')"
+        @mouseleave="handleMsOut"
+      >
+        <p>我要报名</p>
+      </li>
+    </ul>
+    <transition
+      name="custom-classes-transition"
+      enter-active-class="animated tada"
+      leave-active-class="animated bounceOutRight"
+    >
+      <div
+        id="show-enroll"
+        v-show="tabBtnActive"
+        class="tab_cont"
+        @mouseenter="handleMsOver('')"
+        @mouseleave="handleMsOut"
+      >
+        <div class="enroll_cont" id="show-enroll-content" v-show="tabBtnTarget === 'enroll'">
+          <h5>报名咨询</h5>
+          <div class="p">
+            <el-input v-model="formInfo.name" placeholder="请输入您的名字" size="small"></el-input>
+          </div>
+          <div class="p">
+            <el-input v-model="formInfo.phone" placeholder="请输入您的电话" size="small"></el-input>
+          </div>
+          <div class="p sendcode">
+            <el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input
+            ><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">
+              获取验证码
+            </el-button>
+          </div>
+          <div class="p">
+            <el-button style="width: 100%" @click="submitEnroll">立即报名</el-button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import { sendCode, checkCode, postNes } from '@/api/base'
+const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+export default {
+  data() {
+    return {
+      tabBtnActive: false,
+      tabBtnTarget: '',
+      projectName: '金融硕士保研项目',
+      sendCode: '',
+      isBtnDisabled: false,
+      formInfo: {
+        name: '',
+        phone: '',
+        projectId: ''
+      }
+    }
+  },
+  watch: {
+    $route: {
+      handler: function (val, oldVal) {
+        if (val.path === '/studyAbroad') {
+          this.formInfo.projectId = '1018'
+        } else {
+          this.formInfo.projectId = '1012'
+        }
+      },
+      // 深度观察监听
+      deep: true,
+      immediate: true
+    }
+  },
+
+  computed: {
+    projectList() {
+      if (this.$route.path === '/internationalDegree') {
+        return this.projectListMap.slice(0, 7)
+      } else if (this.$route.path === '/studyAbroad') {
+        return this.projectListMap.slice(-4)
+      } else {
+        return this.projectListMap
+      }
+    }
+  },
+  methods: {
+    handleMsOver(type) {
+      this.tabBtnActive = true
+      if (type !== '') {
+        this.tabBtnTarget = type
+      }
+    },
+    handleMsOut(type) {
+      this.tabBtnActive = false
+    },
+    submitEnroll() {
+      let flag = true
+      Object.keys(this.formInfo).map(item => {
+        if (this.formInfo[item] === '') {
+          flag = false
+        }
+      })
+      if (!flag || !this.sendCode) {
+        this.$message('请完善信息')
+      } else if (!MOBILE_REG.test(this.formInfo.phone)) {
+        this.$message('手机号格式错误')
+      } else {
+        this.checkSendcode()
+          .then(res => {
+            return this.enrollQuery()
+          })
+          .then(res => {
+            this.$message({
+              type: 'success',
+              message: '报名成功',
+              duration: 5000
+            })
+          })
+          .catch(err => {
+            if (err && err.type === 'checkcode') this.$message.error(err.msg)
+            else this.$message.error(err.msg || '报名提交失败')
+          })
+      }
+    },
+    enrollQuery() {
+      const params = {
+        channel: localStorage.getItem('channel_num') || 19962,
+        project_id: this.formInfo.projectId === '9999' ? '1016' : this.formInfo.projectId,
+        name: this.formInfo.name,
+        phone: this.formInfo.phone
+      }
+      return new Promise((resolve, reject) => {
+        postNes(params).then(res => {
+          if (res && res.status === 200 && res.error === 0) {
+            resolve({
+              type: 'enroll',
+              state: 'success'
+            })
+          } else {
+            reject({
+              type: 'enroll',
+              state: 'fail',
+              msg: res.message || '报名提交失败'
+            })
+          }
+        })
+      })
+    },
+    getSendCode() {
+      if (!this.formInfo.phone) {
+        this.$message('手机号不能为空')
+      } else if (!MOBILE_REG.test(this.formInfo.phone)) {
+        this.$message('手机号格式错误')
+      } else {
+        const param = {
+          account: this.formInfo.phone,
+          service: 'ezijing.com'
+        }
+        sendCode(param)
+          .then(res => {
+            this.btnDisabledTimer()
+            if (res && res.code === 0) this.$message.success('验证码已发送，请注意查收')
+            else this.$message.error('获取验证码失败，请稍后再试')
+          })
+          .catch(() => {})
+      }
+    },
+    checkSendcode() {
+      const checkCodeParam = {
+        account: this.formInfo.phone,
+        code: this.sendCode,
+        countryCode: 86
+      }
+      return new Promise((resolve, reject) => {
+        checkCode(checkCodeParam).then(res => {
+          if (res && res.code === 0) {
+            res.type = 'checkcode'
+            resolve({
+              type: 'checked',
+              state: 'success'
+            })
+          } else {
+            reject({
+              type: 'checked',
+              state: 'fail',
+              msg: res.msg || '验证码检测失败'
+            })
+          }
+        })
+      })
+    },
+    btnDisabledTimer() {
+      this.isBtnDisabled = true
+      let count = 60
+      document.querySelector('#checkedCode').innerHTML = count + 's'
+      const timer = setInterval(() => {
+        count--
+        if (count < 1) {
+          clearInterval(timer)
+          this.isBtnDisabled = false
+          document.querySelector('#checkedCode').innerHTML = this.$t('aside.codeBtn')
+        } else {
+          document.querySelector('#checkedCode').innerHTML = count + 's'
+        }
+      }, 1000)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.right_bar {
+  position: fixed;
+  top: 50%;
+  right: 10px;
+  z-index: 2000;
+  transform: translateY(-50%);
+  .tab_btns {
+    width: 100px;
+    font-size: 12px;
+    border-radius: 4px;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    li {
+      padding: 70px 0 18px;
+      color: #999;
+      background-position: center 18px;
+      background-repeat: no-repeat;
+      background-color: #fff;
+      text-align: center;
+    }
+    li.active {
+      background-color: #af1b40;
+      color: #fff;
+      opacity: 0.9;
+      transition: 0.3s;
+    }
+    li.enroll {
+      position: relative;
+      background-image: url(https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png);
+    }
+    li.enroll:after {
+      content: '';
+      width: 100%;
+      height: 1px;
+      background: #b8bcbf;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      // transform: translateX(-50%) scale(0.5);
+    }
+    li.enroll.active {
+      background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
+    }
+    li.wx {
+      background-image: url(https://zws-imgs-pub.ezijing.com/static/public/5526b83d7526b2742f6eba7151c367db.png);
+    }
+    li.wx.active {
+      background-image: url(https://zws-imgs-pub.ezijing.com/static/public/0831ea27fee535ab0ce9f730f467b2e1.png);
+    }
+    li > p {
+      font-size: 12px;
+      line-height: 14px;
+      text-align: center;
+      // transform: scale(0.9);
+      line-height: 100%;
+      cursor: default;
+    }
+  }
+  .tab_cont {
+    position: absolute;
+    left: -360px;
+    top: -120px;
+    width: 346px;
+    height: 390px;
+    background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/right_bg.png);
+    // display:none;
+    h5 {
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 19px;
+      color: #ffffff;
+      text-align: center;
+      margin-bottom: 25px;
+    }
+    .enroll_cont {
+      padding: 46px 29px 69px 29px;
+      box-sizing: border-box;
+
+      .p {
+        margin-bottom: 20px;
+        position: relative;
+        :deep(.el-input__inner) {
+          line-height: 40px;
+          height: 40px;
+        }
+
+        :deep(.el-input__inner::placeholder) {
+          font-weight: 300;
+          font-size: 14px;
+          color: #999999;
+          line-height: 40px;
+          height: 40px;
+        }
+        :deep(.el-button) {
+          background-color: #c1ab85;
+          border: 1px solid #c1ab85;
+          color: #ffffff;
+          height: 40px;
+          font-size: 16px;
+        }
+      }
+      .sendcode {
+        display: flex;
+        justify-content: space-between;
+        :deep(.el-input) {
+          width: 170px;
+          height: 40px;
+        }
+        :deep(.el-button) {
+          height: 40px;
+          color: #ffffff;
+          font-size: 14px;
+          margin-left: 10px;
+        }
+        :deep(.is-disabled) {
+          color: #c0c4cc;
+          cursor: not-allowed;
+          background-image: none;
+          background-color: #fff;
+          border-color: #ebeef5;
+        }
+      }
+    }
+  }
+}
+</style>

src/modules/pay/components/Order.vue

@@ -7,6 +7,7 @@ const user = useUserStore()
 const timer = ref()
 const qrCodeUrl = ref('')
 const payStatus = ref('')
+const orderId = ref('')
 // const UA = navigator.userAgent
 // const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
 // const isWechat = /micromessenger/i.test(UA)
@@ -47,12 +48,15 @@ onMounted(() => {
     }, 2000)
   })
 })
+
 const handleGetOrderList = (id: any) => {
   getOrderList({ order_detail_id: id }).then(res => {
     payStatus.value = res.data[0].order_status
+    orderId.value = res.data[0].order_id
     if (payStatus.value === '4') {
       const params = {
-        orderId: res.data[0].pay_order_id,
+        orderId: res.data[0].order_id,
+        payPrice: res.data[0].payment_money,
         status: 'success',
         payStatus: res.data[0].order_status
       }
@@ -69,7 +73,7 @@ const handleGetOrderList = (id: any) => {
     <div class="main_order">
       <div class="order_id">
         <div class="id_tit">商品订单：</div>
-        <div class="id_num">11111</div>
+        <div class="id_num">{{ orderId }}</div>
       </div>
       <div class="order_price">
         <div class="price_tit">支付金额：</div>

src/modules/pay/components/PaySucess.vue

 <script setup lang="ts">
 const router = useRouter()
 const props = defineProps({
-  orderId: {
-    type: String
+  payInfo: {
+    type: Object
   },
   shopItem: {
     type: Object
-  },
-  payStatus: {
-    type: String
   }
 })
 const handleStudy = () => {
@@ -18,7 +15,7 @@ const handlePrev = () => {
   router.push({
     path: `/shop/detail/${props.shopItem?.id}`,
     query: {
-      payStatus: props.payStatus
+      payStatus: props.payInfo?.payStatus
     }
   })
 }
@@ -34,11 +31,11 @@ const handlePrev = () => {
       <div class="con_info">
         <div class="info_order">
           <div class="order_tit">商品订单：</div>
-          <div class="order_id">{{ orderId }}</div>
+          <div class="order_id">{{ payInfo?.orderId }}</div>
         </div>
         <div class="info_price">
           <div class="price_tit">支付金额：</div>
-          <div class="price_id">¥{{ shopItem?.price }}</div>
+          <div class="price_id">¥{{ payInfo?.payPrice }}</div>
         </div>
         <div class="info_tips">若有疑问请与客服联系，我们将尽快为您提供服务</div>
         <div class="info_btn">

src/modules/pay/index.ts

@@ -3,8 +3,8 @@ import AppLayout from '@/components/layout/Index.vue'
 
 export const routes: Array<RouteRecordRaw> = [
   {
-    path: '/pay',
+    path: '/shop/pay',
     component: AppLayout,
-    children: [{ path: '/pay/:id', component: () => import('./views/Index.vue'), props: true }]
+    children: [{ path: '/shop/pay/:id', component: () => import('./views/Index.vue'), props: true }]
   }
 ]

src/modules/pay/views/Index.vue

@@ -6,16 +6,15 @@ import { useShopStore } from '@/stores/shop'
 const { shopItem } = useShopStore()
 const status = ref('confirm') // confirm | order | success
 const payMethod = ref(0)
-const payStatus = ref('')
-const orderId = ref('')
+const payInfo = ref({})
+// const orderId = ref('')
 const handleSuccess = (data: any) => {
   payMethod.value = data.payMode
   status.value = data.status
 }
 const handleOrder = (data: any) => {
-  orderId.value = data.orderId
+  payInfo.value = data
   status.value = data.status
-  payStatus.value = data.payStatus
 }
 </script>
 
@@ -23,7 +22,7 @@ const handleOrder = (data: any) => {
   <div class="pay_main">
     <Confirm :shopItem="shopItem" @success="handleSuccess" v-if="status === 'confirm'" />
     <Order :shopItem="shopItem" :payMethod="payMethod" @update="handleOrder" v-if="status === 'order'" />
-    <PaySucess :shopItem="shopItem" :orderId="orderId" :payStatus="payStatus" v-if="status === 'success'" />
+    <PaySucess :shopItem="shopItem" :payInfo="payInfo" v-if="status === 'success'" />
   </div>
 </template>
 

src/modules/shop/components/CourseListItem.vue

@@ -24,7 +24,7 @@ const handleBuy = (courseItem: any) => {
       if (courseItem.type === '课程包') {
         buyDialogVisible.value = true
       } else {
-        router.push(`/pay/${courseItem.id}`)
+        router.push(`/shop/pay/${courseItem.id}`)
       }
     }
   }

src/modules/shop/views/View.vue

@@ -7,33 +7,32 @@ import ShareDialog from '../components/ShareDialog.vue'
 import ContactDialog from '../components/ContactDialog.vue'
 import { useShopStore } from '@/stores/shop'
 
-const { shopItem, shopRelatedList, list, shopRelatedListOther } = useShopStore()
+const shopStore = useShopStore()
 const router = useRouter()
 const route = useRoute()
-console.log(shopItem, '------', shopRelatedList, '---111', shopRelatedListOther)
 const courseItem: any = ref([]) // 课程所属课程包
-courseItem.value = list.filter((item: any) => item.type === '课程包' && item.child_ids.includes(shopItem?.id))
+courseItem.value = shopStore.shopList.filter(
+  (item: any) => item.type === '课程包' && item.child_ids.includes(shopStore.shopItem?.id)
+)
 const recommendCourse = computed(() => {
-  if (shopItem?.type === '课程包') {
+  if (shopStore.shopItem?.type === '课程包') {
     // 课程包推荐课程
-    return shopRelatedList
+    return shopStore.shopRelatedList
   } else {
     // 单一课程推荐的课程
-    return shopRelatedListOther
+    return shopStore.shopRelatedListOther
   }
 })
 const buyDialogVisible = ref(false)
 const shareDialogVisible = ref(false)
 const handleBuyCourse = () => {
-  {
-    if (route.query.payStatus === '4' && shopItem?.isBuy === true) {
-      window.open('https://paa-learning.ezijing.com')
+  if (route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true) {
+    window.open('https://paa-learning.ezijing.com')
+  } else {
+    if (shopStore.shopItem?.type === '课程包') {
+      buyDialogVisible.value = true
     } else {
-      if (shopItem?.type === '课程包') {
-        buyDialogVisible.value = true
-      } else {
-        router.push(`/pay/${shopItem?.id}`)
-      }
+      router.push(`/shop/pay/${shopStore.shopItem?.id}`)
     }
   }
 }
@@ -52,11 +51,11 @@ const handleShare = () => {
           src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
         />
         <div class="con_info">
-          <div class="info_tit">{{ shopItem?.title }}</div>
-          <div class="info_indentify">{{ shopItem?.course_card }}</div>
+          <div class="info_tit">{{ shopStore.shopItem?.title }}</div>
+          <div class="info_indentify">{{ shopStore.shopItem?.course_card }}</div>
           <div class="info_tips">
-            <div class="tips_card">{{ shopItem?.course_chapter }}</div>
-            <div class="tips_card">{{ shopItem?.course_total_hour }}</div>
+            <div class="tips_card">{{ shopStore.shopItem?.course_chapter }}</div>
+            <div class="tips_card">{{ shopStore.shopItem?.course_total_hour }}</div>
           </div>
         </div>
         <div class="con_share">
@@ -69,46 +68,46 @@ const handleShare = () => {
     </div>
     <div class="detail_buy">
       <div class="buy_left">
-        <div class="left_price" v-if="route.query.payStatus !== '4'">
+        <div class="left_status" v-if="route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true">已购买</div>
+        <div class="left_price" v-else>
           <div class="price_icon">¥</div>
-          <div class="price_num">{{ shopItem?.price }}</div>
+          <div class="price_num">{{ shopStore.shopItem?.price }}</div>
         </div>
-        <div class="left_status" v-else>已购买</div>
-
         <div class="left_tip tip1">支付安全</div>
         <div class="left_tip tip2">课程回放</div>
       </div>
       <div class="buy_right" @click="handleBuyCourse">
-        {{ route.query.payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
+        {{ route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
       </div>
     </div>
     <div class="detail_con">
       <div class="con_left">
         <div>
-          <IncludeCourseCard v-if="shopItem?.type !== '课程包'" :courseItem="courseItem" />
+          <IncludeCourseCard v-if="shopStore.shopItem?.type !== '课程包'" :courseItem="courseItem" />
         </div>
         <div>
-          <CourseIntroduceCard :shopItem="shopItem" />
+          <CourseIntroduceCard :shopItem="shopStore.shopItem" />
         </div>
       </div>
       <div class="con_right">
-        <TeacherCard :lecturerList="shopItem?.lecturer_list" />
+        <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" />
         <RecommendCourse :shopRelatedList="recommendCourse" />
       </div>
     </div>
     <div class="detail_footer">
-      <div class="footer_left">
-        <div class="left_tit">全部课程价格</div>
-        <div class="left_desc">根据课程价格累积计算</div>
-      </div>
-      <div class="footer_price" v-if="route.query.payStatus !== '4'">
-        <div class="price_icon">¥</div>
-        <div class="price_price">{{ shopItem?.price }}</div>
-      </div>
-      <div class="left_status" v-else>已购买</div>
-
+      <div class="left_status" v-if="route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true">已购买</div>
+      <template v-else>
+        <div class="footer_left">
+          <div class="left_tit">全部课程价格</div>
+          <div class="left_desc">根据课程价格累积计算</div>
+        </div>
+        <div class="footer_price">
+          <div class="price_icon">¥</div>
+          <div class="price_price">{{ shopStore.shopItem?.price }}</div>
+        </div>
+      </template>
       <div class="footer_btn" @click="handleBuyCourse">
-        {{ route.query.payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
+        {{ route.query.payStatus === '4' || shopStore.shopItem?.isBuy === true ? '立即学习' : '立即购买' }}
       </div>
     </div>
     <ShareDialog v-model:shareDialogVisible="shareDialogVisible" />
@@ -271,8 +270,15 @@ const handleShare = () => {
     margin: 30px auto;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding: 0 46px 0 60px;
     box-sizing: border-box;
+    .left_status {
+      font-size: 24px;
+      font-weight: normal;
+      line-height: 34px;
+      color: #666666;
+    }
     .footer_left {
       .left_tit {
         font-size: 16px;