积分余额页面

pages/point/amount.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="outer">
+    <div class="container">
+      <div class="overview">
+        <div class="title">会员余额(¥)</div>
+        <div class="money">89757.00</div>
+        <div class="pay">
+          <span class="icon"></span>
+          <span class="text"> 充值</span>
+        </div>
+      </div>
+      <div class="detail">
+        <div class="title">金额明细</div>
+        <div class="part">
+          <div class="active">全部</div>
+          <div class="">充值</div>
+          <div class="">支出</div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="ele">
+          <div class="title">
+            <span class="text">充值</span>
+            <span class="amount">+ 1050.00</span>
+          </div>
+          <div class="item">
+            <span class="text">充值金额</span>
+            <span class="amount">1000.00</span>
+          </div>
+          <div class="item">
+            <span class="text">赠送金额</span> <span class="amount">50.00</span>
+          </div>
+          <div class="item">
+            <span class="text">充值时间</span>
+            <span class="amount">2020/09/20 18:00:00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductList from "../../components/ProductList";
+export default {
+  head() {
+    return {
+      title: "积分订单",
+    };
+  },
+  data() {
+    return {
+      images: [],
+      list: [],
+      loading: false, //加载状态
+      finished: false, //是否完成加载
+      refreshing: false, //是否正在上拉刷新
+      listsrc: "/test/pro.png",
+    };
+  },
+  components: {
+    ProductList,
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+    console.log(this);
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    // onLoad() {
+    //   var that = this;
+    //   that.$axios
+    //     .get("/getIntegralWaresInfoList", {
+    //       params: {
+    //         stationId: "1",
+    //       },
+    //     })
+    //     .then((res) => {
+    //       if (res.data.retCode == 0) {
+    //         that.list = res.data.data; //追加数据
+    //         // 加载状态结束
+    //         that.loading = false;
+    //         that.finished = true;
+    //         console.log(that.list);
+    //       }
+    //     });
+    // },
+    // onRefresh() {
+    //   // 清空列表数据
+    //   that.finished = true;
+    //   // 重新加载数据
+    //   // 将 loading 设置为 true，表示处于加载状态
+    //   that.loading = true;
+    //   that.onLoad();
+    // },
+  },
+};
+</script>
+
+<style>
+.outer {
+  width: 100%;
+  height: 16.24rem;
+  background: #ffffff;
+}
+.outer .container {
+  width: 6.9rem;
+  margin: 0 auto;
+}
+.outer .container .overview {
+  width: 6.9rem;
+  height: 2.8rem;
+  background: url("../../static/point/4_b01_bj@2x.png") no-repeat;
+  background-size: cover;
+  position: relative;
+}
+.outer .container .overview .title {
+  width: 1.48rem;
+  height: 0.4rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.4rem;
+  position: absolute;
+  left: 0.6rem;
+  top: 0.6rem;
+}
+.outer .container .overview .money {
+  width: 2.2rem;
+  height: 0.7rem;
+  font-size: 0.5rem;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 0.7rem;
+  position: absolute;
+  top: 1.2rem;
+  left: 0.6rem;
+}
+
+.outer .container .overview .pay {
+  width: 1.56rem;
+  height: 0.6rem;
+  border-radius: 0.39rem;
+  border: 0.02rem solid #ffffff;
+  position: absolute;
+  top: 1.3rem;
+  right: 0.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.outer .container .overview .pay .icon {
+  width: 0.3rem;
+  height: 0.3rem;
+  background: #ffffff;
+  display: inline-block;
+  background: url("../../static/point/jinbi.png") no-repeat;
+  background-size: cover;
+}
+
+.outer .container .overview .pay .text {
+  display: inline-block;
+  width: 0.56rem;
+  height: 0.6rem;
+  font-size: 0.28rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.6rem;
+  margin-left: 0.2rem;
+}
+
+.outer .container .detail {
+  width: 100%;
+  height: 1.17rem;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 0.01rem solid #e0e0e0;
+}
+
+.outer .container .detail .title {
+  width: 1.28rem;
+  height: 1.17rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  line-height: 1.17rem;
+}
+.outer .container .detail .part {
+  display: flex;
+  width: 3.2rem;
+  height: 1.13rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.outer .container .detail .part div {
+  width: 0.64rem;
+  height: 1.13rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #aaaaaa;
+  line-height: 1.13rem;
+}
+.outer .container .detail .part .active {
+  width: 0.64rem;
+  height: 1.13rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  border-bottom: 0.06rem solid #db9d28;
+}
+.outer .container .content {
+  width: 100%;
+}
+
+.outer .container .content .ele {
+  height: 2.7rem;
+  border-bottom: 0.01rem solid #e0e0e0;
+  padding: 0.3rem 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around
+}
+.outer .container .content .ele .title {
+  width: 100%;
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  color: #111111;
+  line-height: 0.45rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.outer .container .content .ele .title .text {
+  display: inline-block;
+  width: 0.64rem;
+  height: 0.45rem;
+  font-weight: 500;
+  color: #111111;
+}
+
+.outer .container .content .ele .title .amount {
+  display: inline-block;
+  height: 0.45rem;
+  font-weight: 500;
+  color: #db9d28;
+}
+
+.outer .container .content .ele .item{
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top:0.15rem; 
+height: 0.4rem;
+font-size: 0.28rem;
+font-family: PingFangSC-Regular, PingFang SC;
+font-weight: 400;
+color: #AAAAAA;
+line-height: 0.4rem;
+}
+
+.outer .container .content .ele .item .text{
+display:inline-block;
+height: 0.4rem;
+font-size: 0.28rem;
+font-family: PingFangSC-Regular, PingFang SC;
+font-weight: 400;
+color: #AAAAAA;
+line-height: 0.4rem;
+}
+
+.outer .container .content .ele .item .amount{
+display:inline-block;
+height: 0.4rem;
+font-size: 0.28rem;
+font-family: PingFangSC-Regular, PingFang SC;
+font-weight: 400;
+color: #666666;
+line-height: 0.4rem;
+}
+</style>

pages/point/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="outer">
+  <div class="point-list">
     <div class="order">
       <div class="top">
         <div class="code">订单号 836847623234289</div>
@@ -124,24 +124,24 @@ export default {
 </script>
 
 <style>
-.outer {
+.point-list {
   width: 100%;
   background: #f8f8f8;
   width: 7rem;
   margin: 0 auto;
 }
-.outer .order {
+.point-list .order {
   width: 100%;
   background: #ffffff;
   margin-top: 0.2rem;
 }
-.outer .order .top {
+.point-list .order .top {
   width: 100%rem;
   height: 1rem;
   position: relative;
   border-bottom: 0.01rem solid #e0e0e0;
 }
-.outer .order .top .code {
+.point-list .order .top .code {
   width: 3.44rem;
   height: 0.4rem;
   font-size: 0.28rem;
@@ -153,7 +153,7 @@ export default {
   top: 0.3rem;
   left: 0.3rem;
 }
-.outer .order .top .status {
+.point-list .order .top .status {
   width: 0.84rem;
   height: 0.4rem;
   font-size: 0.28rem;
@@ -166,14 +166,14 @@ export default {
   right: 0.3rem;
 }
 
-.outer .order .middle {
+.point-list .order .middle {
   width: 100%;
   height: 4rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.outer .order .middle .imgcon {
+.point-list .order .middle .imgcon {
   width: 2.4rem;
   height: 2.4rem;
   background: #ffffff;
@@ -183,16 +183,16 @@ export default {
   padding: 0.3rem;
   margin-bottom: 1rem;
 }
-.outer .order .middle .imgcon img {
+.point-list .order .middle .imgcon img {
   width: 100%;
   height: 100%;
 }
-.outer .order .middle .content {
+.point-list .order .middle .content {
   width: 4.48rem;
   height: 3.4rem;
   padding: 0.3rem 0.1rem;
 }
-.outer .order .middle .content .title {
+.point-list .order .middle .content .title {
   width: 3.56rem;
   height: 0.45rem;
   font-size: 0.32rem;
@@ -201,7 +201,7 @@ export default {
   color: #111111;
   line-height: 0.45rem;
 }
-.outer .order .middle .content .desc {
+.point-list .order .middle .content .desc {
   width: 4.2rem;
   height: 1.95rem;
   font-size: 0.28rem;
@@ -210,7 +210,7 @@ export default {
   color: #666666;
   line-height: 0.4rem;
 }
-.outer .order .middle .content .amount {
+.point-list .order .middle .content .amount {
   width: 4.2rem;
   height: 1rem;
   font-size: 0.32rem;
@@ -220,13 +220,13 @@ export default {
   line-height: 0.45rem;
   position: relative;
 }
-.outer .order .middle .content .amount div {
+.point-list .order .middle .content .amount div {
   display: inline-block;
   position: absolute;
   right: 0;
   top: 0.2rem;
 }
-.outer .order .middle .content .amount .text {
+.point-list .order .middle .content .amount .text {
   width: 1.7rem;
   height: 0.33rem;
   font-size: 0.24rem;
@@ -235,14 +235,14 @@ export default {
   color: #666666;
   line-height: 0.33rem;
 }
-.outer .order .middle .content .amount .icon {
+.point-list .order .middle .content .amount .icon {
   display: inline-block;
   width: 0.25rem;
   height: 0.25rem;
   background: url("../../static/common/a01_jifen@2x.png") no-repeat 0 0;
   background-size: cover;
 }
-.outer .order .footer {
+.point-list .order .footer {
   width: 100%;
   height: 1rem;
   position: relative;
@@ -251,7 +251,7 @@ export default {
   align-items: baseline;
 }
 
-.outer .order .footer .paytime {
+.point-list .order .footer .paytime {
   display: inline-block;
   width: 2.84rem;
   height: 0.4rem;
@@ -261,13 +261,13 @@ export default {
   color: #aaaaaa;
   line-height: 0.4rem;
 }
-.outer .order .footer .paybutton {
+.point-list .order .footer .paybutton {
   display: flex;
   justify-content: space-between;
   width: 3.4rem;
 }
 
-.outer .order .footer .paybutton .cancel {
+.point-list .order .footer .paybutton .cancel {
   border: none;
   background-color: transparent;
   outline: none;
@@ -282,7 +282,7 @@ export default {
   color: #aaaaaa;
   line-height: 0.4rem;
 }
-.outer .order .footer .paybutton .pay {
+.point-list .order .footer .paybutton .pay {
   border: none;
   background-color: transparent;
   outline: none;