|
|
@@ -0,0 +1,141 @@
|
|
|
+<template>
|
|
|
+ <div class="app-content">
|
|
|
+ <div class="rank-top-wrap">
|
|
|
+ <div class="rank-top-text">
|
|
|
+ <div class="rank-top-tit">VIP会员权益</div>
|
|
|
+ <div>升级会员享受更多权益~</div>
|
|
|
+ </div>
|
|
|
+ <div class="rank-top-img">
|
|
|
+ <img :src="`${constant.imgUrl}/retail/interest/VIP-interest.png`" alt mode="widthFix" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rank-bottom-wrap">
|
|
|
+ <div class="rank-text">
|
|
|
+ <div>1、以下达到每个等级的要求</div>
|
|
|
+ <div>2、等级越高享有越低的价格，具体价格查看商品详情页</div>
|
|
|
+ </div>
|
|
|
+ <div class="level-list-wrap">
|
|
|
+ <div class="level-list-tit">
|
|
|
+ <div>等级</div>
|
|
|
+ <div>最低消费数</div>
|
|
|
+ <div>最低消费额</div>
|
|
|
+ </div>
|
|
|
+ <div class="level-list-blo">
|
|
|
+ <div class="level-list" v-for="(item, index) in list" :key="index">
|
|
|
+ <div>{{item.name}}</div>
|
|
|
+ <div>{{parseFloat(item.num)}}扎</div>
|
|
|
+ <div v-if="Number(item.amount) > 0">¥{{parseFloat(item.amount)}}</div>
|
|
|
+ <div v-else>无</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getCustomLevel } from "@/api/ghs";
|
|
|
+export default {
|
|
|
+ name: "customLevel",
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ list: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getCustomLevel({id:this.option.id}).then(res => {
|
|
|
+ this.list = res.data.list;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.rank-top-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 230px;
|
|
|
+ position: relative;
|
|
|
+ background-color: #191919;
|
|
|
+ .rank-top-text {
|
|
|
+ color: #d2d2d2;
|
|
|
+ padding-top: 60px;
|
|
|
+ padding-left: 70px;
|
|
|
+ .rank-top-tit {
|
|
|
+ color: #ffd515;
|
|
|
+ font-size: 44px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rank-top-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 44px;
|
|
|
+ width: 232px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.rank-bottom-wrap {
|
|
|
+ padding: 30px;
|
|
|
+ background-color: #fff;
|
|
|
+ .rank-text {
|
|
|
+ font-size:26rpx;
|
|
|
+ margin-bottom: 26px;
|
|
|
+ & > div {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-wrap {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ margin-top: 50px;
|
|
|
+ .button-com {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .level-list-wrap {
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ font-size: 26px;
|
|
|
+ .level-list-tit,
|
|
|
+ .level-list {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ & > div {
|
|
|
+ margin: 0 auto;
|
|
|
+ flex: 1;
|
|
|
+ @include disFlex(center, center);
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+ .level-img {
|
|
|
+ /deep/.vip-text {
|
|
|
+ left: 42px;
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .level-list-tit {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #d9c096;
|
|
|
+ & > div {
|
|
|
+ border-left: 1px solid #fff;
|
|
|
+ }
|
|
|
+ & > div:first-child {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .level-list {
|
|
|
+ &:nth-child(2n) {
|
|
|
+ background-color: #f7f7ed;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ border-left: 1px solid #eeeeee;
|
|
|
+ }
|
|
|
+ & > div:first-child {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
shish