兑换成功页面

pages/point/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="outer">
+  <div class="point-index">
     <div class="background">
       <div class="top">
         <h4 class="text">我的积分</h4>
@@ -96,19 +96,19 @@ export default {
 </script>
 
 <style>
-.outer {
+.point-index {
   position: relative;
 }
-.background {
+.point-index .background {
   background-color: #f3b335;
   width: 100%;
   height: 49.46vw;
   position: relative;
   background: url("../../static/point/bj.png") no-repeat 0px 0px;
-  background-size: cover;
+  background-size: 100% 100%;
   z-index: -1;
 }
-.background .text {
+.point-index .background .text {
   position: absolute;
   left: 4vw;
   top: 8vw;
@@ -122,7 +122,7 @@ export default {
   color: #ffffff;
   line-height: 5.33vw;
 }
-.background .point {
+.point-index .background .point {
   position: absolute;
   margin: 0;
   padding: 0;
@@ -136,7 +136,7 @@ export default {
   color: #ffffff;
   line-height: 14vw;
 }
-.background .earn {
+.point-index .background .earn {
   position: absolute;
   right: 0;
   top: 20.66vw;
@@ -149,7 +149,7 @@ export default {
   background-size: cover;
   box-sizing: border-box;
 }
-.background .earn div {
+.point-index .background .earn div {
   position: absolute;
   top: 1.5vw;
   right: 2vw;
@@ -161,7 +161,7 @@ export default {
   color: #f3b235;
   line-height: 4.93vw;
 }
-.container {
+.point-index .container {
   margin-top: -13.33vw;
   width: 100%;
   padding: 0 4vw;
@@ -170,7 +170,7 @@ export default {
   flex-direction: column;
   z-index: 99;
 }
-.container .menu {
+.point-index .container .menu {
   width: 100%;
   height: 26.66vw;
   background: #ffffff;
@@ -181,17 +181,17 @@ export default {
   justify-content: space-around;
   align-items: center;
 }
-.container .menu .item {
+.point-index .container .menu .item {
   width: 14.93vw;
   height: 14.93vw;
 }
-.container .menu .item img {
+.point-index .container .menu .item img {
   display: block;
   width: 12vw;
   height: 12vw;
   margin: 0 auto;
 }
-.container .menu .item span {
+.point-index .container .menu .item span {
   display: block;
   width: 100%;
   height: 3.73vw;
@@ -204,12 +204,12 @@ export default {
   margin-top: 3vw;
 }
 
-.container .news {
+.point-index .container .news {
   margin-top: 4vw;
   width: 100%;
   height: 21.33vw;
 }
-.container .news img {
+.point-index .container .news img {
   width: 100%;
   height: 100%;
 }

pages/point/success.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="point-success">
+    <div class="background">
+      <span class="icon"></span>
+      <span class="text">支付成功</span>
+    </div>
+    <div class="container">
+      <div class="menu">
+        <span class="text1">回到首页</span>  <span class="text2">查看订单</span>
+      </div>
+      <div class="show">
+        <product-list />
+      </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, //是否正在上拉刷新
+    };
+  },
+  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>
+.point-success {
+  position: relative;
+}
+.point-success .background {
+  background-color: #f3b335;
+  width: 100%;
+  height: 3.8rem;
+  position: relative;
+  background: url("../../static/point/bj2@2x.png") no-repeat 0px 0px;
+  background-size: 100% 100%;
+  z-index: -1;
+  position: relative;
+}
+.point-success .background .icon {
+  display: inline-block;
+  width: 0.48rem;
+  height: 0.48rem;
+  background: url("../../static/point/1_e10_cg@2x.png");
+  background-size: 100% 100%;
+  position: absolute;
+  top: 1.13rem;
+  left: 2.41rem;
+}
+.point-success .background .text {
+  width: 2rem;
+  height: 0.7rem;
+  font-size: 0.5rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 0.7rem;
+  position: absolute;
+  top: 1rem;
+  left: 3.09rem;
+}
+.point-success .container {
+  margin-top: -13.33vw;
+  width: 100%;
+  padding: 0 4vw;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  z-index: 99;
+}
+.point-success .container .menu {
+  width: 100%;
+  height: 1.1rem;
+  background: #ffffff;
+  box-shadow: 0rem 0.02rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
+  border-radius: 0.1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
+.point-success .container .menu span {
+  width: 1.28rem;
+  height: 0.45rem;
+  font-size: 0.32rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #111111;
+  line-height: 0.45rem;
+}
+</style>