支付会员页面绘制

src/components/Card/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="card" :class="classObject" @click="handleClick">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    showSelectIcon: {
+      type: Boolean,
+      default: true
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    alwaysShowIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isChecked: false
+    }
+  },
+  computed: {
+    classObject() {
+      return {
+        'active': this.isChecked,
+        'has-border': this.border,
+        'hide-icon': !this.alwaysShowIcon,
+        'check-icon': true
+      }
+    }
+  },
+  created() {
+    this.isChecked = this.checked
+  },
+  methods: {
+    handleClick() {
+      this.isChecked = !this.isChecked
+      this.$emit('change', this.isChecked)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+$active-color: #ff6d6d;
+
+.card {
+  display: inline-block;
+  margin-right: 16px;
+  position: relative;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &.has-border{
+    border-width: 1px;
+    border-style: solid;
+    border-color: #d8d8d8;
+  }
+
+  &.check-icon{
+    &::after{
+      position: absolute;
+      display: block;
+      content: '';
+      bottom: 0;
+      right: 0;
+      width: 26px;
+      height: 26px;
+      background: url(~@/assets/img/icon-select.png) no-repeat center;
+    }
+  }
+
+  &.hide-icon{
+    &::after{
+      display: none;
+    }
+  }
+
+  &.active {
+    border-color: $active-color;
+    &::after {
+      display: block;
+      background: url(~@/assets/img/icon-select-active.png);
+    }
+  }
+}
+</style>

src/views/components/MemberBenefits/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <table class="member-benefits" cellpadding="0" cellspacing="0">
+    <!-- 基础功能 -->
+    <tr>
+      <td style="width:96px;writing-mode: vertical-lr;" class="title" rowspan="7">基础功能</td>
+      <td style="width:279px;" class="title">功能特权</td>
+      <td style="width:279px;" class="title bgcolor-f7f7f7">非会员</td>
+      <td class="color1890ff title bgcolor-edf6ff">
+        <span>会员</span>
+        <i class="vip-icon" />
+      </td>
+    </tr>
+    <tr>
+      <td>机构授权认证</td>
+      <td class="color909399">90天免费体验</td>
+      <td class="color1890ff">永久</td>
+    </tr>
+    <tr>
+      <td>设备授权认证</td>
+      <td class="color909399">90天免费体验</td>
+      <td class="color1890ff">永久</td>
+    </tr>
+    <tr>
+      <td>医师资格认证</td>
+      <td class="color909399">90天免费体验</td>
+      <td class="color1890ff">永久</td>
+    </tr>
+    <tr>
+      <td>采美品牌背书</td>
+      <td class="color909399">90天免费体验</td>
+      <td class="color1890ff">永久</td>
+    </tr>
+    <tr>
+      <td>专属服务</td>
+      <td class="color909399">90天免费体验</td>
+      <td class="color1890ff">永久</td>
+    </tr>
+    <tr>
+      <td>免费升级迭代</td>
+      <td class="color909399">90天免费体验</td>
+      <td class="color1890ff">永久</td>
+    </tr>
+    <!-- 定制服务 -->
+    <tr>
+      <td rowspan="4" class="title" style="writing-mode: vertical-lr;">定制服务</td>
+      <td>认证授权图片模板</td>
+      <td class="color909399">—</td>
+      <td class="color1890ff">订制要求与费用另议</td>
+    </tr>
+    <tr>
+      <td>认证授权物料制作</td>
+      <td class="color909399">—</td>
+      <td class="color1890ff">订制要求与费用另议</td>
+    </tr>
+    <tr>
+      <td>品牌资料库</td>
+      <td class="color909399">—</td>
+      <td class="color1890ff">订制要求与费用另议</td>
+    </tr>
+    <tr>
+      <td>其他</td>
+      <td class="color909399">—</td>
+      <td class="color1890ff">订制要求与费用另议</td>
+    </tr>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'MemberBenefits'
+}
+</script>
+
+<style scoped lang="scss">
+.member-benefits {
+  margin: 0 auto;
+  min-width: 1100px;
+  // width: 100%;
+
+  tr {
+    &:first-child {
+      td {
+        border-top: 1px solid #dfe6ec;
+      }
+    }
+    td {
+      color: #404040;
+      text-align: center;
+      padding: 16px 0;
+      font-size: 16px;
+      border-left: 1px solid #dfe6ec;
+      border-bottom: 1px solid #dfe6ec;
+      &:last-child {
+        border-right: 1px solid #dfe6ec;
+      }
+    }
+
+    .title {
+      font-size: 18px;
+      color: #101010;
+    }
+
+    .color909399 {
+      color: #909399;
+    }
+
+    .color1890ff {
+      color: #1890ff;
+    }
+
+    .bgcolor-f7f7f7{
+      background-color: #F7F7F7;
+    }
+
+    .bgcolor-edf6ff{
+      background-color: #EDF6FF;
+    }
+  }
+}
+
+.vip-icon{
+  display: inline-block;
+  width: 40px;
+  height: 32px;
+  margin-left: 6px;
+  background: url(~@/assets/img/vip-icon.png) no-repeat;
+  background-size: 40px;
+  vertical-align: bottom;
+}
+</style>

src/views/normal/vip/buy.vue

@@ -1,15 +1,275 @@
 <template>
-  <div>
-    购买会员
+  <div class="container">
+    <div class="title">购买会员</div>
+    <!-- 会员套餐 -->
+    <div class="section">
+      <div class="subtitle">会员套餐<span class="tip">（基础服务功能）</span></div>
+      <div class="list">
+        <card>
+          <div class="vip-package">
+            <div class="time">1年</div>
+            <div>
+              <span>￥</span>
+              <span class="price">5980</span>
+              <span class="deleted">￥7980</span>
+            </div>
+          </div>
+        </card>
+        <card>
+          <div class="vip-package">
+            <div class="time">1年</div>
+            <div>
+              <span>￥</span>
+              <span class="price">5980</span>
+              <span class="deleted">￥7980</span>
+            </div>
+          </div>
+        </card>
+      </div>
+    </div>
+    <el-divider class="divider" />
+    <!-- 定制服务 -->
+    <div class="section">
+      <div class="subtitle">订制服务<span class="tip">（勾选且付费后，将会有专人与您进行沟通）</span></div>
+      <div class="list">
+        <card>
+          <div class="service-package">
+            <div class="name">认证授权图片模板</div>
+            <div class="subname">定制要求与费用另议</div>
+          </div>
+        </card>
+        <card>
+          <div class="service-package">
+            <div class="name">认证授权物料制作</div>
+            <div class="subname">定制要求与费用另议</div>
+          </div>
+        </card>
+        <card>
+          <div class="service-package">
+            <div class="name">品牌资料库</div>
+            <div class="subname">定制要求与费用另议</div>
+          </div>
+        </card>
+        <card>
+          <div class="service-package">
+            <div class="name">其他</div>
+            <div class="subname">定制要求与费用另议</div>
+          </div>
+        </card>
+      </div>
+    </div>
+    <el-divider class="divider" />
+    <!-- 选择支付方式 -->
+    <div class="section">
+      <div class="subtitle">选择支付方式</div>
+      <div class="list">
+        <card v-for="item in payWayList" :key="item.id">
+          <el-image :src="item.image" class="pay-way" />
+        </card>
+      </div>
+    </div>
+    <!-- 支付 -->
+    <div class="pay-action">
+      <!-- 阿里云支付 -->
+      <div class="pay-code">
+        <div class="paymount">扫码付款：<span class="exp">￥</span><span class="price">5980.00</span></div>
+        <el-image src="https://picsum.photos/200/200" class="qrcode" />
+        <div class="pay-tip">
+          <i class="icon-alipay" />
+          <span>使用支付宝扫码</span>
+        </div>
+      </div>
+      <!-- 微信支付 -->
+      <!-- 企业网银支付 -->
+      <!-- 个人网银支付 -->
+    </div>
   </div>
 </template>
 
 <script>
-export default {
+import imgPayAli from '@/assets/pay/pay-ali.png'
+import imgBank from '@/assets/pay/pay-bank.png'
+import imgSelfBank from '@/assets/pay/pay-self-bank.png'
+import imgWechat from '@/assets/pay/pay-wechat.png'
 
+import Card from '@/components/Card'
+export default {
+  components: {
+    Card
+  },
+  data() {
+    return {
+      payWayList: [
+        {
+          image: imgPayAli,
+          name: '阿里云支付',
+          id: 0
+        },
+        {
+          image: imgWechat,
+          name: '微信支付',
+          id: 1
+        },
+        {
+          image: imgBank,
+          name: '企业网银支付',
+          id: 2
+        },
+        {
+          image: imgSelfBank,
+          name: '个人网银支付',
+          id: 3
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.container {
+  margin: 0 auto;
+  padding: 0 60px;
+}
+.divider {
+  margin: 40px 0;
+}
+
+.pay-action {
+  margin: 40px 0;
+  .pay-code {
+
+    .paymount{
+      margin-bottom: 16px;
+      font-size: 16px;
+      color: #101010;
+
+      .exp,.price{
+        color: #FF6D6D;
+      }
+
+      .exp{
+        font-size: 14px;
+      }
+
+      .price{
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+
+    .qrcode {
+      width: 180px;
+      height: 180px;
+      border: 1px solid #1890ff;
+      box-sizing: border-box;
+      padding: 8px;
+    }
+
+    .pay-tip {
+      width: 180px;
+      margin-top: 12px;
+      font-size: 14px;
+      color: #101010;
+      line-height: 25px;
+      text-align: center;
+    }
+
+    .icon-alipay,.icon-wechat{
+      display: inline-block;
+      width: 25px;
+      height: 25px;
+      vertical-align: middle;
+      margin-right: 10px;
+    }
+
+    .icon-wechat{
+      background: url(~@/assets/pay/icon-wechat.png) no-repeat center;
+      background-size: 25px;
+    }
 
+    .icon-alipay{
+      background: url(~@/assets/pay/icon-alipay.png) no-repeat center;
+      background-size: 25px;
+    }
+  }
+}
+
+.title {
+  margin: 40px 0;
+  font-size: 24px;
+  font-weight: bold;
+  color: #404040;
+  text-align: center;
+}
+
+.section {
+  .subtitle {
+    margin-bottom: 24px;
+    font-size: 18px;
+    color: #101010;
+    .tip {
+      font-size: 14px;
+      color: #909399;
+    }
+  }
+
+  .list {
+    .pay-way {
+      display: block;
+      width: 128px;
+      height: 44px;
+    }
+
+    .service-package {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      width: 232px;
+      height: 128px;
+
+      .name {
+        margin-bottom: 16px;
+        font-size: 18px;
+        color: #404040;
+      }
+      .subname {
+        font-size: 14px;
+        color: #ff6d6d;
+      }
+    }
+
+    .vip-package {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      width: 232px;
+      height: 128px;
+
+      .time {
+        margin-bottom: 16px;
+        font-size: 18px;
+        font-weight: bold;
+        color: #404040;
+      }
+
+      .price {
+        font-size: 36px;
+        font-weight: bold;
+        color: #ff6d6d;
+      }
+      .deleted {
+        font-size: 14px;
+        color: #b2b2b2;
+        text-decoration: line-through;
+      }
+    }
+  }
+}
 </style>

src/views/normal/vip/index.vue

@@ -1,15 +1,188 @@
 <template>
-  <div>
-    会员介绍
+  <div class="container">
+    <div class="section privilege">
+      <div class="title">会员特权</div>
+      <div class="content">
+        <div v-for="(item, index) in privilegeList" :key="index" class="item">
+          <el-image :src="item.image" class="image" />
+          <div class="name" v-text="item.name" />
+          <div class="subname" v-text="item.subName" />
+        </div>
+      </div>
+      <el-button class="open-vip" type="primary">开通会员</el-button>
+    </div>
+    <div class="section benefits">
+      <div class="title">会员权益对比</div>
+      <div class="content">
+        <member-benefits />
+      </div>
+    </div>
+    <!-- 开通、续费会员 -->
+    <div class="open-control">
+      <div class="tip"><i class="vip-icon" /><span>会员</span>享有机构授权认证、设备授权认证等特权</div>
+      <el-button class="submit" type="primary">开通会员</el-button>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
+import vipIcon1 from '@/assets/img/vip-icon-01.png'
+import vipIcon2 from '@/assets/img/vip-icon-02.png'
+import vipIcon3 from '@/assets/img/vip-icon-03.png'
+import vipIcon4 from '@/assets/img/vip-icon-04.png'
+import vipIcon5 from '@/assets/img/vip-icon-05.png'
+import vipIcon6 from '@/assets/img/vip-icon-06.png'
+import vipIcon7 from '@/assets/img/vip-icon-07.png'
+
+import MemberBenefits from '@/views/components/MemberBenefits'
 
+export default {
+  components: {
+    MemberBenefits
+  },
+  data() {
+    return {
+      privilegeList: [
+        {
+          image: vipIcon1,
+          name: '机构授权认证',
+          subName: '享认证数量不限'
+        },
+        {
+          image: vipIcon2,
+          name: '机构授权认证',
+          subName: '享认证数量不限'
+        },
+        {
+          image: vipIcon3,
+          name: '机构授权认证',
+          subName: '享认证数量不限'
+        },
+        {
+          image: vipIcon4,
+          name: '机构授权认证',
+          subName: '享认证数量不限'
+        },
+        {
+          image: vipIcon5,
+          name: '机构授权认证',
+          subName: '享认证数量不限'
+        },
+        {
+          image: vipIcon6,
+          name: '机构授权认证',
+          subName: '享认证数量不限'
+        },
+        {
+          image: vipIcon7,
+          name: '机构授权认证',
+          subName: '享认证数量不限'
+        }
+      ]
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.container {
+  min-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  .title {
+    margin: 40px 0;
+    font-size: 24px;
+    font-weight: bold;
+    color: #404040;
+    text-align: center;
+  }
+}
+
+.benefits {
+  margin: 10px 0 20px;
+  overflow: hidden;
+}
+
+.privilege {
+  .open-vip {
+    display: block;
+    width: 260px;
+    height: 48px;
+    margin: 60px auto 20px;
+    opacity: 1;
+    border-radius: 4px;
+  }
+  .content {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    .item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
 
+      .image {
+        width: 50px;
+        height: 50px;
+      }
+
+      .name {
+        font-size: 18px;
+        color: #101010;
+        margin-top: 16px;
+      }
+
+      .subname {
+        font-size: 14px;
+        color: #909399;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+.open-control {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  max-width: 1100px;
+  margin: 90px auto;
+  border: 1px solid #1890ff;
+
+  .tip{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    color: #101010;
+    font-size: 18px;
+
+    span{
+      color: #1890FF;
+      font-weight: bold;
+    }
+  }
+
+  .submit {
+    width: 210px;
+    height: 80px;
+    font-size: 18px;
+    border-radius: 0;
+  }
+
+  .vip-icon {
+    display: inline-block;
+    width: 40px;
+    height: 32px;
+    margin: 0 16px 0 30px;
+    background: url(~@/assets/img/vip-icon.png) no-repeat;
+    background-size: 40px;
+    vertical-align: bottom;
+
+    transform: translateY(-6px);
+  }
+}
 </style>