|
- <template>
- <div class="page">
- <div class="commoditylIst">
- <div class="item" v-for="item in list" :key="item.title">
- <div @click="clickPayDialog(item)">
- <div class="line" :style="`background-color:${item.color} ;`"></div>
- <div class="info">
- <!-- 商品信息 -->
- <div class="content">
- <div class="title">
- <el-icon><i-ep-edit /></el-icon>
- {{ $t(item.title) }}
- </div>
- <div class="money">
- <span class="price">{{ item.price }}元</span>/{{
- item.priceTime
- }}
- </div>
- <div class="time">
- <span>{{ item.time }}</span
- >分钟/月
- </div>
- <div class="button" :style="`background-color:${item.color} ;`">
- {{ $t("shop.selectPlan") }}
- </div>
- </div>
- <!-- 商品权益 -->
- <div class="authority">
- <div
- class="authority-item"
- v-for="items in item.authority"
- :key="items"
- >
- <span>✔</span>{{ items }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 对话框 -->
- <el-dialog v-model="showPayDialog" width="60%" center>
- <div class="payDialog">
- <div class="left">
- <div class="title">{{ $t(presentItme.value.title) }}</div>
- <div class="price">
- <span>{{ presentItme.value.price }}</span>
- 元/{{ presentItme.value.priceTime }}
- </div>
- <div
- class="authority"
- v-for="item in presentItme.value.authority"
- :key="item"
- >
- {{ item }}
- </div>
- </div>
- <div class="right">
- <div
- style="background-color: #07c160; cursor: pointer"
- @click="showOrderCode(1)"
- >
- {{ $t("shop.WeChatPay") }}
- </div>
- <div
- style="background-color: #1378fe; cursor: pointer"
- @click="showOrderCode(2)"
- >
- {{ $t("shop.Alipay") }}
- </div>
- <div
- style="background-color: #0070ba; cursor: pointer"
- @click="showOrderCode(3)"
- >
- Paypal
- </div>
- </div>
- </div>
- <!-- 二维码弹出框 -->
- <el-dialog
- v-model="orderCodeDialogShow"
- width="30%"
- append-to-body
- destroy-on-close
- >
- <div class="orderCodeDialog">
- <div class="codeImg">
- <img src="../../assets/img/false1.png" alt="" />
- </div>
- <div class="tips">扫描二维码进行付款</div>
- <div class="btnBox">
- <div>刷新二维码</div>
- </div>
- </div>
- </el-dialog>
- </el-dialog>
- </div>
- </template>
-
- <script setup>
- const title = ref("");
- //#region 各个套餐的逻辑
- const list = reactive([
- {
- color: "#f3af00",
- title: "shop.Lite",
- icon: "",
- price: "0",
- priceTime: "14天",
- time: "5",
- authority: [
- "Metavatar 水印",
- "高级和标准演示器",
- "15 个 AI 演示提示",
- "AI 脚本世代",
- ],
- },
- {
- color: "#c971ff",
- title: "shop.Pro",
- icon: "",
- price: "10",
- priceTime: "30天",
- time: "10",
- authority: [
- "Metavatar 水印",
- "高级和标准演示器",
- "15 个 AI 演示提示",
- "AI 脚本世代",
- "API访问",
- ],
- },
- {
- color: "#7b61ff",
- title: "shop.Adv",
- icon: "",
- price: "20",
- priceTime: "30天",
- time: "15",
- authority: [
- "Metavatar 水印",
- "高级和标准演示器",
- "15 个 AI 演示提示",
- "AI 脚本世代",
- "API访问",
- "商业用途",
- ],
- },
- {
- color: "#000",
- title: "shop.Ent",
- icon: "",
- price: "50",
- priceTime: "30天",
- time: "40",
- authority: [
- "Metavatar 水印",
- "高级和标准演示器",
- "15 个 AI 演示提示",
- "AI 脚本世代",
- "API访问",
- "商业用途",
- "PowerPoint 插件",
- ],
- },
- ]);
- const showPayDialog = ref(false); //套餐信息dialog显示隐藏
- const presentItme = reactive({}); //点击的套餐项
- function clickPayDialog(item) {
- presentItme.value = item;
- console.log(presentItme);
- showPayDialog.value = true;
- }
- function showOrderCode(type) {
- orderCodeDialogShow.value = true;
- }
- //#endregion ------------------------------------
-
- //#region 点击套餐内的支付
- const orderCodeDialogShow = ref(false);
- //#endregion ------------------------------------
-
- //#region
-
- //#endregion ------------------------------------
- </script>
-
- <style lang="scss" scoped>
- .page {
- min-width: calc(100vw - 210px);
- height: calc(100vh - 80px);
- padding: 20px 20px 0 20px;
- background-color: #fff;
- border-radius: 25px 0 0;
- padding: 20px;
- }
- .commoditylIst {
- display: flex;
- justify-content: flex-start;
- // overflow-x: auto;
- padding: 20px 20px 20px 50px;
- // width: 100%;
- // height: 75%;
- overflow: hidden;
- overflow-x: scroll;
- // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */
- // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */
- // &::-webkit-scrollbar {
- // display: none; /* 隐藏滚动条(Safari、Chrome) */
- // }
- .item {
- width: 350px;
- height: 780px;
- margin-right: 50px;
- background-color: #fffefd;
- flex-shrink: 0; /* 防止缩小宽度 */
- border: 1px solid #c0bfbd;
- border-radius: 20px;
- overflow: hidden;
- transition: all 0.2s;
- cursor: pointer;
- .line {
- height: 20px;
- background-color: pink;
- cursor: pointer;
- }
- .info {
- padding: 20px;
- cursor: pointer;
- .content {
- height: 300px;
- padding: 20px;
- border-bottom: 1px solid #c0bfbd;
- cursor: pointer;
- .title {
- font-size: 30px;
- font-weight: 700;
- line-height: 25px;
- margin-bottom: 30px;
- cursor: pointer;
- .el-icon {
- line-height: 30px;
- width: 40px;
- height: 40px;
- font-size: 40px;
- color: #000;
- text-align: center;
- vertical-align: sub;
- cursor: pointer;
- }
- }
- .money {
- margin-bottom: 30px;
- font-size: 20px;
- color: #7c7c7a;
- cursor: pointer;
- .price {
- font-size: 30px;
- font-weight: 700;
- color: #242625;
- cursor: pointer;
- }
- }
- .time {
- margin-bottom: 30px;
- font-size: 20px;
- color: #7c7c7a;
- cursor: pointer;
- span {
- font-weight: 700;
- color: #242625;
- cursor: pointer;
- }
- }
- .button {
- width: 100%;
- height: 40px;
- border-radius: 10px;
- text-align: center;
- line-height: 40px;
- color: #fff;
- font-weight: 700;
- background-color: yellow;
- cursor: pointer;
- }
- }
- .authority {
- cursor: pointer;
- &-item {
- cursor: pointer;
- padding: 20px 10px;
- span {
- cursor: pointer;
- color: #7c7c7a;
- margin-right: 30px;
- }
- }
- }
- }
- &:hover {
- cursor: pointer;
- transform: translateY(-20px);
- box-shadow: #00000026 2px 2px 2px 2px;
- }
- }
- }
-
- .payDialog {
- display: flex;
- position: relative;
- min-height: 500px;
- .left {
- width: 35%;
- border-right: 1px solid #7c7c7a;
- .title {
- color: #242625;
- font-weight: 700;
- font-size: 30px;
- text-align: center;
- }
- .price {
- span {
- font-size: 30px;
- font-weight: 700;
- color: #242625;
- }
- }
- .authority {
- padding: 10px 20px;
- }
- }
- .right {
- width: 65%;
- position: absolute;
- top: 20%;
- right: 0%;
- padding-left: 20%;
- > div {
- width: 200px;
- height: 40px;
- // border: 1px solid #242625;
- border-radius: 10px;
- text-align: center;
- line-height: 40px;
- margin: 30px;
- color: #fff;
- }
- }
- }
- .orderCodeDialog {
- width: 100%;
- .codeImg {
- display: flex;
- justify-content: space-evenly;
- img {
- width: 300px;
- height: 300px;
- }
- }
- .tips {
- padding-top: 10px;
- text-align: center;
- }
- .btnBox {
- padding: 15px 40px;
- display: flex;
- justify-content: space-evenly;
- > div {
- padding: 10px 20px;
- color: #000;
- background-color: #fff;
- border: #000 solid 1px;
- border-radius: 10px;
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- color: #fff;
- background-color: #000;
- }
- }
- }
- }
- </style>
|