GCLS_Page_ROOT/src/components/Personalcenter/Purchasehitory.vue

<template>
  <!-- 购买记录 -->
  <div class="Purchasehitory">
    <div class="cut">
      <div class="sele">
        <div
          @click="SelectShowEvent('1')"
          :class="SelectShow == '1' ? 'select' : ''"
        >
          已购买
        </div>
        <div
          @click="SelectShowEvent('2')"
          :class="SelectShow == '1' ? '' : 'select'"
        >
          待付款
        </div>
      </div>
    </div>
    <div class="list">
      <!-- 已购买 -->
      <div v-if="SelectShow == '1'" class="haveBought">
        <div>
          <div class="image">
            <img src="../../assets/Personalcenter/image/img1.png" alt="" />
          </div>
          <div class="text">
            <p class="title">
              <span>Learn Chinese with Ease-Learn Chinese with Ease</span>
              <span>2021-05-21 16:43:12</span>
            </p>
            <p>Beijing language and Culture University</p>
            <p>Esther Howard</p>
            <div class="buy">
              <span class="price">
                $
                <span class="price_1" v-text="changePrice('1', '19.99')"></span>
                <span class="price_2" v-text="changePrice('2', '19.99')"></span>
              </span>
              <button>已购买</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 待付款 -->
      <div v-else class="obligation">
        <div>
          <div class="image">
            <img src="../../assets/Personalcenter/image/img1.png" alt="" />
          </div>
          <div class="text">
            <p class="title">
              <span>Learn Chinese with Ease-Learn Chinese with Ease</span>
              <span>2021-05-21 16:43:12</span>
            </p>
            <p>Beijing language and Culture University</p>
            <p>Esther Howard</p>
            <div class="buy">
              <span class="price">
                $
                <span class="price_1" v-text="changePrice('1', '19.99')"></span>
                <span class="price_2" v-text="changePrice('2', '19.99')"></span>
              </span>
              <button>购买</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      SelectShow: "1",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 选择已购买还是待付款
    SelectShowEvent(num) {
      this.SelectShow = num;
    },
    // 处理价格
    changePrice(type, item) {
      if (item.indexOf(".") != -1) {
        if (type == 1) {
          return item.split(".")[0];
        } else if (type == 2) {
          return "." + item.split(".")[1];
        }
      } else {
        if (type == 1) {
          return item;
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.Purchasehitory {
  .cut {
    margin: 32px;
    .sele {
      width: 318px;
      height: 48px;
      background: #ebebeb;
      border-radius: 30px;
      color: #9f9f9f;
      font-size: 20px;
      display: flex;
      align-items: center;
      > div {
        width: 158px;
        height: 48px;
        border-radius: 30px;
        line-height: 48px;
        text-align: center;
        cursor: pointer;
      }
      .select {
        background: #ff9900;
        color: white;
        box-shadow: 0px 2px 8px rgba(255, 153, 0, 0.15);
      }
    }
  }
  .list {
    .haveBought {
      > div {
        display: flex;
        height: 160px;
        width: 100%;
        padding: 16px 16px 16px 32px;
        border-bottom: 1px solid #9f9f9f;
        .image {
          img {
            width: 96px;
            height: 128px;
          }
        }
        .text {
          width: 800px;
          margin-left: 16px;
          margin-right: 16px;
          p {
            margin: 0;
            font-size: 16px;
          }
          .title {
            font-weight: 600;
            color: #2c2c2c;
            display: flex;
            justify-content: space-between;
            :nth-child(2) {
              color: #2c2c2c;
              opacity: 0.7;
            }
          }
          p:not(.title) {
            margin-top: 8px;
            color: #2c2c2c;
            opacity: 0.7;
          }
          .buy {
            text-align: right;
            button {
              width: 120px;
              height: 40px;
              background: #d5d5d5;
              border-radius: 4px;
              border: none;
              outline: none;
              cursor: pointer;
              color: white;
              margin-left: 16px;
            }
          }
        }
      }
    }
    .obligation {
      > div {
        display: flex;
        height: 160px;
        width: 100%;
        padding: 16px 16px 16px 32px;
        border-bottom: 1px solid #9f9f9f;
        .image {
          img {
            width: 96px;
            height: 128px;
          }
        }
        .text {
          width: 800px;
          margin-left: 16px;
          margin-right: 16px;
          p {
            margin: 0;
            font-size: 16px;
          }
          .title {
            font-weight: 600;
            color: #2c2c2c;
            display: flex;
            justify-content: space-between;
            :nth-child(2) {
              color: #2c2c2c;
              opacity: 0.7;
            }
          }
          p:not(.title) {
            margin-top: 8px;
            color: #2c2c2c;
            opacity: 0.7;
          }
          .buy {
            text-align: right;
            button {
              width: 120px;
              height: 40px;
              background: #ff9900;
              border-radius: 4px;
              border: none;
              outline: none;
              cursor: pointer;
              color: white;
              margin-left: 16px;
            }
          }
        }
      }
    }
    .price {
      font-weight: 600;
      font-size: 24px;
      .price_2 {
        font-size: 16px;
      }
    }
  }
}
</style>