|
|
@@ -0,0 +1,338 @@
|
|
|
+<script setup name="ActivateMembership">
|
|
|
+import { ref } from 'vue';
|
|
|
+import { Close } from '@element-plus/icons-vue';
|
|
|
+import SvgIcon from '~/components/SvgIcon/index.vue';
|
|
|
+
|
|
|
+const visibleDialog = ref(false)
|
|
|
+
|
|
|
+const visiblePay = ref(false)
|
|
|
+
|
|
|
+// NOTE: 事件
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="activate-membership-container">
|
|
|
+ <el-dialog class="dialog-primary" v-model="visibleDialog" :show-close="false" width="30%">
|
|
|
+ <!-- :before-close="handleClose" -->
|
|
|
+ <template #header="{ close, titleId, titleClass }">
|
|
|
+ <div class="headerbox flex-row flex-aic flex-jc-sb">
|
|
|
+ <div class="infobox flex-row flex-aic">
|
|
|
+ <!-- NOTE: 只有登录才展示用户头像 -->
|
|
|
+ <img src="https://dummyimage.com/50x50/e3e3e3/fff" />
|
|
|
+ <div class="info">
|
|
|
+ <template v-if="true">
|
|
|
+ <div class="infobox__title">注册/登录</div>
|
|
|
+ <div class="infobox__description">请登录后再购买</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="close">
|
|
|
+ <el-icon @click="close" :size="30" color="#ffffff" class="no-inherit">
|
|
|
+ <Close />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="dialog-container flex-row flex-jc-sb">
|
|
|
+ <div class="left">
|
|
|
+ <div class="title">
|
|
|
+ 开通权益
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>购买额外赠送18888积分</li>
|
|
|
+ <li>额外免费2次拍摄</li>
|
|
|
+ <li>升级领福利</li>
|
|
|
+ <li>积分商城折扣</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="right__title">购买时长</div>
|
|
|
+ <div class="items flex-row flex-jc-sb">
|
|
|
+ <div class="item active flex-col flex-aic flex-jc-sb">
|
|
|
+ <div class="item__title">会员半年卡</div>
|
|
|
+ <div class="item__money">
|
|
|
+ <span>￥</span>
|
|
|
+ <span>125</span>
|
|
|
+ </div>
|
|
|
+ <div class="item__origin-money">￥158</div>
|
|
|
+ </div>
|
|
|
+ <div class="item flex-col flex-aic flex-jc-sb">
|
|
|
+ <div class="item__title">会员半年卡</div>
|
|
|
+ <div class="item__money">
|
|
|
+ <span>￥</span>
|
|
|
+ <span>125</span>
|
|
|
+ </div>
|
|
|
+ <div class="item__origin-money">￥158</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="paym-tit">支付方式</div>
|
|
|
+ <div class="paymethods flex-row">
|
|
|
+ <div class="active">微信支付</div>
|
|
|
+ <div>支付宝支付</div>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary">
|
|
|
+ 去付款
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- Pay dialog -->
|
|
|
+ <el-dialog v-model="visiblePay" title="支付宝支付" width="20%">
|
|
|
+ <div class="paybox flex-col flex-aic">
|
|
|
+ <div class="paybox__title">
|
|
|
+ 支付金额 <span>￥</span><span>500</span>
|
|
|
+ </div>
|
|
|
+ <div class="paybox__countdown">支付剩余时间：14:45</div>
|
|
|
+ <div class="paybox__qrcode">
|
|
|
+ <img src="https://dummyimage.com/140x140/e3e3e3/fff?text=qrcode" />
|
|
|
+ </div>
|
|
|
+ <div class="paybox__foot flex-row flex-aic">
|
|
|
+ <SvgIcon name="scan" :size="30" color="rgba(152, 152, 152, 1)" />
|
|
|
+ <div class="flex-col">
|
|
|
+ <span>打开手机支付宝</span>
|
|
|
+ <span>扫一扫二维码</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "~/styles/variable.scss";
|
|
|
+
|
|
|
+.activate-membership-container {
|
|
|
+ width: auto;
|
|
|
+
|
|
|
+
|
|
|
+ .dialog-primary {
|
|
|
+
|
|
|
+ &:deep(.el-dialog) {
|
|
|
+ --el-dialog-border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-dialog__header) {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-dialog__body) {
|
|
|
+ background-color: rgba(249, 249, 249, 1),
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .headerbox {
|
|
|
+ padding: 20px 22px 10px;
|
|
|
+ background-color: $color-primary;
|
|
|
+
|
|
|
+ .infobox {
|
|
|
+ width: 0;
|
|
|
+ flex: 1;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__description {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-container {
|
|
|
+ column-gap: 12px;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .left,
|
|
|
+ .right {
|
|
|
+ padding: 16px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ margin-block-start: 0;
|
|
|
+ padding-inline-start: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #444444;
|
|
|
+ line-height: 28px;
|
|
|
+
|
|
|
+ &::marker {
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 0;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 3em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .items {
|
|
|
+ column-gap: 20px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ user-select: none;
|
|
|
+ width: 0;
|
|
|
+ flex: 1;
|
|
|
+ padding: 18px;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ background: #F6F6F6;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border: 2px solid #57C3C2;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #444444;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__money {
|
|
|
+ padding: 30px 0;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: JDZhengHT, JDZhengHT;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__origin-money {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 19px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paym-tit {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 3em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paymethods {
|
|
|
+ column-gap: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: 112px;
|
|
|
+ height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36px;
|
|
|
+ border: 1px solid #BCBCBC;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #444444;
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border: 1px solid $color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paybox {
|
|
|
+ &__title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: $color-primary;
|
|
|
+
|
|
|
+ &:first-child {}
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ font-size: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__countdown {
|
|
|
+ padding: 8px 0 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qrcode {
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__foot {
|
|
|
+ padding-top: 10px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
