tab切换变字体颜色

<template>
   <a-spin :spinning="spinning">
       <div class="logo-top">
    <img class="img" src="../assets/images/cj2.png" alt="" />
    <!-- 商城 -->
    <div :style="{marginTop: height*220/707 + 'px'}"  class="nav-title">仙品商城</div>
    <div class="immortal-products" :style="{top:height*285/707 + 'px'}">
      <div class="immortal-nav">
        <span @click="num = 0" :class="{ span: num == 0 }">实物商品</span>
        <span>|</span
        ><span @click="num = 1" :class="{ span: num == 1 }">虚拟商品</span>
      </div>
      <!-- 实物 -->
      <div :style="{width: width*340/360 + 'px',height:height*330/707 + 'px'}" v-show="num == 0" class="xianpin-mall">
        <div
          v-for="(item, index) in physicalGoods"
          :key="index"
          class="commodity"
        >
          <div class="material">
            <div class="img">
              <img :src="item.prizeImg" alt="" />
            </div>
            <p>{{ item.prizeName }}</p>
          </div>
          <!-- 弹框 -->
          <!-- <button>积分不足</button> -->
          <button @click="postExchange(wxuser, item.prizeId)">
            {{ item.exchangePoints }}积分兑换</button>
        </div>
      </div>
      <!-- 虚拟 -->
      <div :style="{width: width*340/360 + 'px',height:height*330/707 + 'px'}" v-show="num == 1" class="xianpin-mall">
        <div
          v-for="(item, index) in virtualGoods"
          :key="index"
          class="commodity"
        >
          <div class="material">
            <div class="fictitious">
              <img :src="item.prizeImg" alt="" />
            </div>
            <p>{{ item.prizeName }}</p>
          </div>
          <button @click="postExchange(wxuser, item.prizeId)">
            {{ item.exchangePoints }}积分兑换</button>
        </div>
      </div>
    </div>
  </div>
    </a-spin>
</template>

<script>
import http from "../services/http-service";
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      spinning: true, // 加载
      wxuser: window.localStorage.getItem("wxUser"),
      prizeid: '', // 商品id
      integral: [], // 兑换积分传参
      physicalGoods: [], // 实物商品
      virtualGoods: [], // 虚拟商品
      num: 0,
      width: window.innerWidth,
      height: window.innerHeight,
      phoneCache: window.localStorage.getItem("phone"), // 本地电话缓存
      residualIntegral: window.localStorage.getItem("residualIntegral"), // 本地用户账号缓存
      visible: false, // 兑换实物弹框
      visibles: false, // 兑换虚拟弹框
      codes: null,
      code: null,
    };
  },
  created() {
    this.getPrize();
  },
  mounted() {
    // this.postExchange()
  },

  methods: {
    // 兑换虚拟/实物商品
   async postExchange (User, commodityId) {
   let temp =await http.exchange(User, commodityId)
      //  alert(temp)
      console.log(temp)
     if (temp === 500) {
       alert('积分不足')
     } else if (temp === 400) {
       alert('商品数量不足')
     }else if (temp === 200) {
     alert('兑换成功')
     }else if (temp === 404) {
     alert('请填写收货地址')
     }
    },
    // 虚拟/实物商品
    async getPrize() {
      let temp = await http.Prize();
      temp.forEach((item) => {
        if (item.prizeType === "实物商品") {
          this.physicalGoods.push(item);
        } else if (item.prizeType === "虚拟商品") {
          this.virtualGoods.push(item);
        }
        this.spinning = false
      });
      // console.log(this.physicalGoods);
      // console.log(this.virtualGoods);
      console.log(temp);
    },
    // 兑换实物弹框
    showModal(e) {
      this.integral = e
      this.visible = true;
      console.log(this.integral)
    },
     // 兑换虚拟弹框
    showModals() {
      this.visibles = true;
    },
    // 兑换实物弹框
    hideModal(e,v) {
      console.log(e)
      console.log(v)
      this.visible = false
    },
     // 兑换虚拟弹框
    hideModals() {
      this.visible = false;
    },
  },
};
</script>

<style scoped lang="less">
// @import '../style/PointsMall';
.immortal-products {
    // border: 1px solid red;
    overflow: hidden;
    top: 8rem;
    // top: 285px;
    position: absolute;
    .immortal-nav {
      margin-bottom: 0.1rem;
      span {
        font-size: 0.5rem;
        display: inline-block;
        padding: 0.2rem 0.1rem;
        color: #666666;
      }
      .span {
        color: #9b2816;
      }
    }
    .xianpin-mall {
      padding: 0.3rem;
      box-sizing: border-box;
      display: flex;
      overflow-x: hidden;
      flex-wrap: wrap;
      border-radius: 0.3rem;
      background-color: #e3b97f;
    }
  }
  .commodity {
    width: 4rem;
    margin-bottom: 0.2rem;
    .material {
      background-color: #f0e5c8;
      width: 4rem;
      height: 4rem;
      padding-top: 0.7rem;
      border-radius: 0.2rem;
      .img {
        margin: 0 auto;
        width: 3rem; 
        height: 2rem;
        // border: 1px solid red;
        img {
          width: 3rem;
          height: 2rem;
          object-fit: contain;
        }
      }
      .fictitious {
        margin: 0 auto;
        width: 2.7rem;
        background-size: 8.5rem;
        background-repeat: no-repeat;
        img {
          width: 2.7rem;
          object-fit: contain;
        }
      }
      p {
        margin-top: 0.2rem;
        font-size: 0.4rem;
        text-align: center;
        color: #9b2816;
      }
    }
    button,
    .p {
      width: 100%;
      border: none;
      color: white;
      font-size: 0.4rem;
      margin-top: 0.3rem;
      border-radius: 0.1rem;
      text-align: center;
      padding: 0.2rem;
      background-color: #9b2816;
    }
  }
  .commodity:nth-child(odd) {
    margin-right: 0.4rem;
  }
  // 弹框
  /deep/.ant-modal-content {
    width: 80%;
    margin: 2.5rem auto;
  }
  /deep/.ant-modal-body {
    padding: 0.2rem;
    text-align: center;
    p:nth-child(1) {
      color: rgb(90, 88, 88);
      font-size: 0.7rem;
      margin: 0.5rem 0 0.1rem 0;
    }
    p:nth-child(2) {
      color: rgb(138, 133, 133);
      font-size: 0.4rem;
      margin: 0;
    }
  }
</style>
posted @ 2021-05-26 16:38  zjxgdq  阅读(234)  评论(0)  编辑  收藏  举报