TBtools-会员购买

htmldev/TBTools/src/views/modules/mine/user.vue

@@ -9,9 +9,27 @@
       <a href="javascript:;" v-for="(item, index) in vipList" :key="index">
         <img :src="item.vipImg" alt="">
         <p>{{ item.vipDesc }}</p>
-        <button class="primary">立即购买</button>
+        <button class="primary" @click="handleDialog(index)">立即购买</button>
       </a>
     </el-col>
+    <template v-if="vipList.length">
+      <el-dialog :title="vipList[activeVipIndex].vipName"
+                 :visible.sync="dialogTableVisible"
+                 :show-close="false"
+                 :center="true">
+        <p class="TT-title">
+          <span>Hi，用户{{ userPhone }}</span>
+          <span>您正在开通</span>
+          <span>金币会员</span>
+        </p>
+        <p class="TT-price">
+          <span>应付金额：</span>
+          <span>{{ vipList[activeVipIndex].vipPrice }}</span>
+          <span>金币</span>
+        </p>
+        <p class="TT-desc">{{ vipList[activeVipIndex].vipDesc }}</p>
+      </el-dialog>
+    </template>
   </el-row>
 </template>
 
@@ -23,7 +41,9 @@ export default {
   name: 'user',
   data () {
     return {
-      vipList: []
+      vipList: [],
+      activeVipIndex: 0,
+      dialogTableVisible: false
     }
   },
   computed: {
@@ -36,6 +56,10 @@ export default {
     this.funInit()
   },
   methods: {
+    handleDialog (index) {
+      this.activeVipIndex = index
+      this.dialogTableVisible = true
+    },
     funInit () {
       this.$http({
         url: this.$http.adornUrl('/user/viplist'),
@@ -147,4 +171,79 @@ export default {
     }
   }
 }
+
+/deep/ .el-dialog__wrapper {
+  .el-dialog--center {
+    box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 7px;
+
+    .el-dialog__header {
+      padding: 9px 0;
+      border-radius: 7px 7px 0 0;
+      background: linear-gradient(180deg, #FBF9F1 0%, #F6F0DE 100%);
+
+      .el-dialog__title {
+        line-height: 30px;
+        font-size: 22px;
+        font-weight: 800;
+        color: #C1AE70;
+      }
+    }
+
+    .TT-title {
+      display: flex;
+      align-items: flex-end;
+
+      span {
+        color: #333333;
+
+        &:nth-of-type(1) {
+          font-size: 17px;
+        }
+
+        &:nth-of-type(2) {
+          margin-left: 6px;
+          font-size: 18px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+        }
+
+        &:nth-of-type(3) {
+          font-size: 17px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #DE4E24;
+        }
+      }
+    }
+
+    .TT-price {
+      display: flex;
+      align-items: flex-end;
+
+      span {
+        font-size: 15px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+
+        &:nth-of-type(1) {
+          color: #9B9B9B;
+        }
+
+        &:nth-of-type(2) {
+          color: #DE4E24;
+        }
+
+        &:nth-of-type(3) {
+          color: #333;
+        }
+      }
+    }
+
+    .TT-desc {
+      line-height: 18px;
+      font-size: 13px;
+      color: #666;
+    }
+  }
+}
 </style>