充值页面

src/views/mall/purchasePackage/index.vue

@@ -2,10 +2,10 @@
 <template>
   <div class="default-width py-3">
     <div class="white-bgc resume-box">
-      <div class="resume-header">
+      <div class="resume-header" v-if="showTitle">
         <div class="resume-title">购买会员</div>
       </div>
-      <div class="d-flex align-center justify-center my-5">
+      <div :class="['d-flex', 'align-center', 'justify-center', {'my-5': showTitle}]">
         <div
           v-for="(item, index) in packList"
           :key="index"
@@ -47,6 +47,10 @@ defineProps({
   type: {
     type: Number,
     default: 0 // 0个人 1企业
+  },
+  showTitle: {
+    type: Boolean,
+    default: true
   }
 })
 

src/views/recruit/enterprise/memberCenter/myAccount/components/package.vue

@@ -0,0 +1,13 @@
+<template>
+  <Package :showTitle="false" :type="1"></Package>
+</template>
+
+<script setup>
+defineOptions({ name: 'myAccount-package'})
+import Package from '@/views/mall/purchasePackage'
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/recruit/enterprise/memberCenter/myAccount/components/pointsAndBalance.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="resume-box">
+    <div class="resume-header" v-if="showTitle">
+      <div class="resume-title">余额充值</div>
+    </div>
+    <div class="d-flex align-center justify-center mb-10 mt-5">
+      <div
+        v-for="(item, index) in list"
+        :key="index"
+        class="packagesItem cursor-pointer mx-3"
+        :class="{'active': current === (index+1)}"
+        style="width: 200px;"
+        @click="current = index + 1; price = item.price"
+      >
+        <div class="d-flex flex-column align-center pb-5" style="position: relative;">  
+          <div class="my-4 font-size-16 font-weight-bold titleColor">{{ item.title }}</div>  
+          <div class="font-weight-bold priceBox">
+            <span v-if="item.custom">
+              <input 
+                v-model="item.price" 
+                type="text" 
+                class="custom-input-num" 
+                :style="{'color': current === (index + 1) ? '#ff4747' : '#000'}" 
+                @keyup.enter="handleCustomEnter"
+                @focus="item.tip = '输入完成后请按Enter键确认'"
+              >
+            </span>
+            <span class="font28" v-else>{{ item.price }}</span>
+          </div>  
+          <div class="dailyPrice font-size-12 mt-3">
+            <span v-if="!item.custom">￥{{ item.price }}</span>
+            <span v-else>{{ item.tip }}</span>
+          </div>
+          <div class="vip">
+            <svg v-if="current === (index+1)" xmlns="http://www.w3.org/2000/svg" class="svg__StyledSvg-sc-5p68xx-0 gSyYMA svg-icon ext00/mat/card_checked_top_right icon top-right-img" viewBox="0 0 104 102" aria-hidden="true"><path fill="url(#paint0_linear_4683_12836)" d="M132.93 24.67 111.3-3.55a11 11 0 0 0-4.07-3.27A12 12 0 0 0 101.98-8H33.02c-1.83 0-3.63.4-5.25 1.18s-3.02 1.9-4.08 3.27L2.1 24.67A10 10 0 0 0 0 31.17a10 10 0 0 0 2.7 6.32L58.8 98.3c1.07 1.17 2.4 2.1 3.9 2.74a12.3 12.3 0 0 0 9.6 0c1.5-.64 2.84-1.57 3.91-2.74l56.09-60.81a10 10 0 0 0 2.69-6.3 10 10 0 0 0-2.06-6.51m-31.9 6.6L69.9 66.33q-.45.5-1.07.77a3.3 3.3 0 0 1-3.72-.77l-31.13-35.1q-.55-.63-.67-1.45-.1-.81.28-1.55.39-.74 1.14-1.19a3.3 3.3 0 0 1 1.65-.44H50.5q.7 0 1.32.27.63.28 1.07.77l12.23 13.73q.44.49 1.07.77a3.3 3.3 0 0 0 3.71-.77l12.22-13.73q.45-.48 1.07-.76.63-.27 1.32-.28h14.13q.88.01 1.65.44.74.45 1.14 1.18a2.6 2.6 0 0 1-.4 3.02z"></path><defs><linearGradient id="paint0_linear_4683_12836" x1="67.5" x2="67.5" y1="-8" y2="102" gradientUnits="userSpaceOnUse"><stop stop-color="#FFCC76"></stop><stop offset="1" stop-color="#FEE1B0"></stop></linearGradient></defs></svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" class="svg__StyledSvg-sc-5p68xx-0 gSyYMA svg-icon ext00/mat/card_not_checked_top_right icon top-right-img" viewBox="0 0 104 102" aria-hidden="true"><path fill="#ECF5FF" d="M132.93 24.67 111.3-3.55a11 11 0 0 0-4.07-3.27A12 12 0 0 0 101.98-8H33.02c-1.83 0-3.63.4-5.25 1.18s-3.02 1.9-4.08 3.27L2.1 24.67A10 10 0 0 0 0 31.17a10 10 0 0 0 2.7 6.32L58.8 98.3c1.07 1.17 2.4 2.1 3.9 2.74a12.3 12.3 0 0 0 9.6 0c1.5-.64 2.84-1.57 3.91-2.74l56.09-60.81a10 10 0 0 0 2.69-6.3 10 10 0 0 0-2.06-6.51m-31.9 6.6L69.9 66.33q-.45.5-1.07.77a3.3 3.3 0 0 1-3.72-.77l-31.13-35.1q-.55-.63-.67-1.45-.1-.81.28-1.55.39-.74 1.14-1.19a3.3 3.3 0 0 1 1.65-.44H50.5q.7 0 1.32.27.63.28 1.07.77l12.23 13.73q.44.49 1.07.77a3.3 3.3 0 0 0 3.71-.77l12.22-13.73q.45-.48 1.07-.76.63-.27 1.32-.28h14.13q.88.01 1.65.44.74.45 1.14 1.18a2.6 2.6 0 0 1-.4 3.02z"></path></svg>
+          </div> 
+        </div> 
+      </div>
+    </div>
+    <div class="code pa-5 resume-box">
+      <div class="resume-header">
+        <div class="resume-title">扫码支付</div>
+      </div>
+      <div class="d-flex align-end mt-3">
+        <div class="code-left">
+          <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" :width="170" style="height: 170px;"></v-img>
+        </div>
+        <div class="code-right ml-5">
+          <div class="price">
+            <span class="font-size-13">￥</span>
+            {{ price }}
+          </div>
+          <div class="d-flex align-center mt-5">
+            <svg t="1722917564069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6649" width="25" height="25"><path d="M267.547234 569.082553a59.261277 59.261277 0 0 0-25.055319 36.602553 74.948085 74.948085 0 0 0 20.48 68.411915 145.974468 145.974468 0 0 0 79.959149 34.42383 215.257872 215.257872 0 0 0 127.891064-43.574468 245.542128 245.542128 0 0 0 61.657872-61.657872C479.319149 576.054468 416.13617 546.205957 348.595745 550.781277a148.371064 148.371064 0 0 0-79.959149 18.301276m653.617021 116.561702a454.045957 454.045957 0 0 0 36.384681-174.297872 445.984681 445.984681 0 1 0-84.316596 261.446808c-77.780426-38.781277-203.492766-100.439149-281.055319-139.220425a329.422979 329.422979 0 0 1-152.510638 102.617872 223.972766 223.972766 0 0 1-108.936171 9.150639 137.695319 137.695319 0 0 1-77.562553-40.96 357.528511 357.528511 0 0 1-22.876595-32.027234v2.178723a57.300426 57.300426 0 0 1-6.971915-15.904681 40.088511 40.088511 0 0 1-2.178724-15.904681V631.829787a65.361702 65.361702 0 0 1 2.178724-20.48 115.47234 115.47234 0 0 1 29.84851-57.082553 183.666383 183.666383 0 0 1 130.723405-43.574468A765.821277 765.821277 0 0 1 566.468085 550.781277a567.557447 567.557447 0 0 0 36.384681-105.014468H331.601702V416.13617h137.041702v-57.082553h-166.890213v-29.848511h166.890213v-57.082553a11.982979 11.982979 0 0 1 13.725958-13.725957h63.836595v73.205106h180.616171v29.630638h-180.616171v57.082554h144.013617A547.295319 547.295319 0 0 1 631.829787 578.233191c102.835745 34.205957 244.452766 89.109787 290.205958 107.411064" fill="#3383C6" p-id="6650"></path></svg>
+            <svg t="1722917499216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3857" width="21" height="21"><path d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" fill="#50B674" p-id="3858"></path><path d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" fill="#50B674" p-id="3859"></path><path d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" fill="#50B674" p-id="3860"></path><path d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" fill="#50B674" p-id="3861"></path><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" fill="#50B674" p-id="3862"></path></svg>
+            <span class="color-666 font-size-14 ml-3">支持支付宝/微信扫码</span>
+          </div>
+          <div class="font-size-14 color-666 mt-3 cursor-pointer">
+            服务协议
+            <span class="septal-line"></span>
+            <span @click="show = true">对公支付</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <CtDialog :visible="show" :widthType="2" :footer="false" titleClass="text-h6" title="对公账户信息" @close="show = false">
+    <Public v-if="show" :price="price"></Public>
+  </CtDialog>
+</template>
+
+<script setup>
+defineOptions({ name: 'myAccount-pointsAndBalance'})
+import { ref } from 'vue'
+import Public from './public.vue'
+
+defineProps({
+  showTitle: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const show = ref(false)
+const current = ref(1)
+const price = ref(200)
+
+const list = ref([
+  { title: '余额200元', price: 200 },
+  { title: '余额800元', price: 800 },
+  { title: '余额1000元', price: 1000 },
+  { title: '余额1200元', price: 1200 },
+  { title: '自定义充值', price: 100, custom: true, tip: '输入完成后请按Enter键确认' }
+])
+
+const handleCustomEnter = (e) => {
+  const num = e.target.value
+  const custom = list.value.find(k => k.custom)
+  if (num < 100) {
+    custom.tip = '最低充值金额为100元'
+    custom.price = 100
+    return
+  }
+  price.value = num
+}
+</script>
+
+<style scoped lang="scss">
+.packagesItem {
+  border: 1px solid var(--color-f3);
+  border-radius: 8px;
+  background-color: var(--color-f2f4f742);
+}
+.dailyPrice {
+  border-radius: 14px;
+  background-color: #dde3e94f;
+  padding: 2px 18px;
+  color: var(--color-666);
+}
+.active {
+  border: 2px solid #cf990c;
+  background: linear-gradient(rgb(255, 242, 214) 8.86%, rgb(255, 225, 177) 100%);;
+  .priceBox {
+    color: #ff4747;
+  }
+  .dailyPrice {
+    color: #ff4747;
+    background-color: #fff4e7;
+  }
+}
+.custom-input-num {
+  border: none;
+  outline: none;
+  background-color: transparent;
+  max-width: 100%;
+  text-align: center;
+  font-weight: 700;
+}
+.code {
+  max-width: 1100px;
+  background-color: #f7f8fa;
+  border-radius: 6px;
+  margin: 0 auto;
+  &-left {
+    border: 1px solid #00897B;
+    border-radius: 6px;
+    padding: 5px;
+  }
+  &-right {
+    .price {
+      font-size: 30px;
+      font-weight: 700;
+      color: #ff4747;
+    }
+  }
+}
+.vip {
+  width: 50px; 
+  height: 50px;
+  position: absolute; 
+  top: 0; 
+  right: 0;
+  overflow: hidden;
+  border-radius: 8px
+}
+</style>

src/views/recruit/enterprise/memberCenter/myAccount/components/public.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- <v-timeline truncate-line="both" side="end">
+    <v-timeline-item dot-color="primary" icon="mdi-numeric-1">
+      <h2 class="mt-n1 headline font-weight-regular">对公汇款账户信息</h2>
+    </v-timeline-item>
+    <v-timeline-item dot-color="indigo-lighten-2" icon="mdi-numeric-2">
+      <h2 class="mt-n1 headline font-weight-regular">对公汇款账户信息</h2>
+    </v-timeline-item>
+  </v-timeline> -->
+  <div v-for="val in list" :key="val.value" class="font-size-14 color-666 my-3">
+    <span>{{ val.label }}</span>
+    <span class="ml-5">{{ val.value }}</span>
+  </div>
+  <div class="color-error font-size-14">
+    <v-icon>mdi-information-outline</v-icon>
+    请在对公汇款时务必备注订单号
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'public-page'})
+
+const props = defineProps({
+  price: {
+    type: Number,
+    default: 200
+  }
+})
+
+const list = [
+  { label: '账户名称：', value: '苏州识喜识谊科技有限公司' },
+  { label: '开户银行：', value: '招商银行北京分行三里屯支行' },
+  { label: '银行账号：', value: '1109 1354 8610 601' },
+  { label: '汇款金额：', value: '￥' + props.price },
+  { label: '汇款备注：', value: '订单号UIzi232rmwwzpif' }
+]
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/recruit/enterprise/memberCenter/myAccount/index.vue

@@ -1,26 +1,23 @@
 <!-- 购买套餐 -->
 <template>
-  <v-card class="card-box pa-10">
-    <div class="d-flex justify-center">
-      <div class="d-flex align-center" style="color: red">
-        <div class="mdi mdi-alert font-20"></div>
-        <div class="font-15 ml-1">您还未购买任何会员！购买会员可享受VIP待遇！</div>
-      </div>
-      <v-btn color="primary" variant="text"  @click="handleToPurchasePackage">{{ $t('vipPackage.buyNow') }}</v-btn>
-    </div>
+  <v-card class="card-box pa-3">
+    <v-tabs v-model="tab" align-tabs="center" color="primary" bg-color="#f7f8fa">
+      <v-tab :value="0">套餐购买</v-tab>
+      <v-tab :value="1">余额充值</v-tab>
+    </v-tabs>
+    <Package v-if="tab === 0"></Package>
+    <PointsAndBalance v-else></PointsAndBalance>
   </v-card>
 </template>
 
 <script setup>
 defineOptions({name: 'enterprise-memberCenter-myAccount'})
+import { ref } from 'vue'
+import Package from './components/package.vue'
+import PointsAndBalance from './components/pointsAndBalance.vue'
 
-const handleToPurchasePackage = () => {
-  window.open('/recruit/enterprise/purchasePackage')
-}
+const tab = ref(0)
 </script>
 
 <style lang="scss" scoped>
-.font-13 { font-size: 13px; }
-.font-15 { font-size: 15px; }
-.font-20 { font-size: 20px; }
 </style>