index.vue

<template>
  <div class="main">
    <!-- <div class="tops"></div> -->
    <div class="contents">
      <div v-for="(item, index) of test.list.main" :key="index">
        <div class="content">
          <div class="content-imgs">
            <img class="imgs-img" :src="item.imgUrl" alt />
          </div>
          <div class="content-infos">
            <div class="infos-mains">
              <div class="mains">
                <div class="main-usedPercent">核销率{{item.usedPercent}}%</div>
                <div class="main-money">{{item.money}}元代金券</div>
              </div>
              <div class="buttons">
                <button class="button-send" @click="testButtonClick">推送</button>
              </div>
            </div>
            <div class="infos-tips">
              <div class="tip-shareMan">最后分享：{{item.shareMan}}</div>
              <div class="tip-commision">佣金：¥ {{item.commision}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="menus">
      <div class="menu" @click="buttonMainMarketingClick">精准营销</div>
      <div class="menu activeMenu" @click="buttonSingleMarketingClick">一对一营销侧边栏</div>
    </div>
  </div>
</template>

<script>
import { ApiTestGet, ApiTestPost } from "@/api/test/main";
const log = console.log.bind(console);

export default {
  name: "discountIndex",
  data() {
    return {
      test: {
        list: {
          main: [
            {
              imgUrl: "/mainSale/test-city.png",
              usedPercent: "10",
              money: "100",
              shareMan: "Alice",
              commision: "11"
            },
            {
              imgUrl: "/mainSale/test-city.png",
              usedPercent: "20",
              money: "200",
              shareMan: "Bob",
              commision: "22"
            },
            {
              imgUrl: "/mainSale/test-city.png",
              usedPercent: "30",
              money: "300",
              shareMan: "Clid",
              commision: "33"
            },
            {
              imgUrl: "/mainSale/test-city.png",
              usedPercent: "40",
              money: "400",
              shareMan: "Doke",
              commision: "44"
            }
          ]
        }
      },
      dis: {}
    };
  },
  created() {
    // this.testApiGet();
    this.testApiPost();
  },
  methods: {
    testApiGet() {
      log("--->testApi: Start:");
      ApiTestGet().then(res => {
        log("--->Api: Get: res =", res);
      });
      log("--->testApi: End.");
    },
    testApiPost() {
      log("--->testApi: Start:");
      let postData = {
        brief: "停车券兑换",
        orderNo: "12345678",
        point: "123.321",
        procType: 46,
        updateType: "dec",
        vipId: 1
      };
      ApiTestPost(postData).then(res => {
        log("--->Api: Post: res =", res);
      });
      log("--->testApi: End.");
    },
    testButtonClick() {},

    buttonSingleMarketingClick() {
      // this.$router.push("");
    },
    buttonMainMarketingClick() {
      this.$router.push("MainSale");
    }
  }
};
</script>

<style scoped>
.main {
  background-color: white;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: start;
}
.tops {
  border: 2px solid lightblue;
  width: 100%;
  height: 100px;
}
.contents {
  /* border: 2px solid lightpink; */
  width: 100%;
  height: 100%;
  padding: 16px;
  padding-bottom: 40px;
}
.content {
  border: 0px solid orange;
  height: 100px;
  width: 100%;
  padding: 4px 0px;
  margin-bottom: 16px;

  border-radius: 4px;
  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);

  display: flex;
  flex-direction: row;
  justify-content: start;
}
.content-imgs {
  /* border: 1px solid pink; */
  width: 20%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.imgs-img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  border-radius: 50%;
  object-fit: cover;
}
.content-infos {
  /* border: 1px solid orange; */
  width: 80%;
  height: 100%;
}
.infos-mains {
  height: 70%;
  width: 100%;
  /* border: 1px solid green; */

  display: flex;
  flex-direction: row;
  justify-content: start;
}
.mains {
  /* border: 1px solid red; */
  width: 70%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.main-usedPercent {
  font-size: 14px;
  color: grey;
}
.main-money {
  /* border: 1px solid lightgreen; */
  font-size: 24px;
}
.buttons {
  /* border: 1px solid darkorange; */
  /* background-color: bisque; */
  width: 30%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-send {
  border: 0px solid blue;
  height: 40px;
  width: 60px;
  border-radius: 4px;
  background-color: rgba(68, 93, 251, 1);
  color: white;

  font-size: 16px;
}

.infos-tips {
  height: 30%;
  width: 100%;
  /* border: 1px solid red; */
  border-top: 1px dashed gray;
  padding-top: 6px;

  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.tip-shareMan {
  /* border: 1px solid orange; */
  width: 70%;
  height: 100%;

  font-size: 14px;
  line-height: 16px;
  color: rgb(150, 150, 150);
}
.tip-commision {
  /* border: 1px solid green; */
  width: 30%;
  height: 100%;

  font-size: 14px;
  line-height: 16px;
  color: rgb(150, 150, 150);
}

.menus {
  border-top: 1px solid rgb(194, 194, 194);

  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background-color: white;

  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.menu {
  /* border: 1px solid red; */
  height: 50px;
  /* width: 120px; */
  width: 50%;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: black;
}
.activeMenu {
  color: lightcoral;
}
</style>