1

src/api/ajax.js

@@ -44,6 +44,7 @@ export default function ajax(url, data = {}, type = 'GET', isupload) {
         });
       } else {
         // promise = axios.post(url, qs.stringify(data));
+        console.log(data,'收到的数据')
         promise = axios.post(url, JSON.stringify(data), {
           headers: {
             'Content-Type': 'application/json; charset=utf-8'

src/api/index.js

@@ -1,11 +1,9 @@
 import ajax from './ajax';
-let openId = window.localStorage.getItem("openId");
-// let openId = 'oyp646XW37eIqrv3XisVWQ3xq3BQ';
 //获取openid
 export const getOpenId = params => ajax(`/wx/mpuser/wxeef6678b92b6c856/info`, params, 'GET');
 // 支付获取参数
 export const getPay = params => ajax(`/pay/createOrder`, params, 'POST');
 // 获取权益列表
-export const getPayList = params => ajax(`/wx/membership/${openId}/grades`, params, 'GET');
+export const getPayList = params => ajax(`/wx/membership/${params.openId}/grades`, {}, 'GET');
 // 获取我已购买的列表
-export const getMypayList = params => ajax(`/wx/membership/${openId}/orders`, params, 'GET');
+export const getMypayList = params => ajax(`/wx/membership/${params.openId}/orders`, {}, 'GET');

src/pages/index.vue

@@ -2,7 +2,6 @@
   <div style="position: relative">
     <el-image style="width: 100%" :src="url" fit="contain"></el-image>
     <div class="area">
-      <!-- <div class="radio_area"> -->
       <el-radio-group
         style="width: 100%"
         v-model="radioTreaty"
@@ -17,9 +16,9 @@
             style="
               display: flex;
               align-items: center;
-              left: 20px;
+              left: 30px;
               background: #1c1817;
-              padding: 0 5%;
+              padding: 0 4%;
               font-weight: 900;
               font-size: 22px;
               color: #fec629;
@@ -33,12 +32,6 @@
           ><span class="ck" @click="goDetails(item)">详情</span></el-radio
         >
       </el-radio-group>
-      <!-- </div> -->
-      <!-- <div class="detail_area">
-        <div class="ck" @click="goFirst">查看详情</div>
-        <div class="ck" @click="goSecond">查看详情</div>
-        <div class="ck" @click="goThird">查看详情</div>
-      </div> -->
     </div>
     <div class="pay_area">
       <div class="pay_btn" @click="pay">立即购买</div>
@@ -50,7 +43,8 @@
         /> -->
         <div class="xy" @click="goXy()">
           点击购买即代表同意<span style="color: #fff; font-weight: 900"
-            >《平台用户服务协议》</span>
+            >《平台用户服务协议》</span
+          >
         </div>
       </div>
     </div>
@@ -134,10 +128,10 @@ export default {
       );
     },
     async pay() {
-      if(!this.radioTreaty){
-         this.$message({
-          message: '至少选择一种权益哦',
-          type: 'warning'
+      if (!this.radioTreaty) {
+        this.$message({
+          message: "至少选择一种权益哦",
+          type: "warning",
         });
         return;
       }
@@ -170,16 +164,21 @@ export default {
       console.log(this.payOptions);
       this.jsSdk();
     },
+    async findArr(openId) {
+      let params = {
+        openId: openId,
+      };
+      const result = await getPayList(params);
+      console.log(result);
+      this.arr = result.grades;
+    },
   },
   computed: {},
   async mounted() {
     openId.getOpenId(() => {
-      let openid = window.localStorage.getItem("openId");
-      console.log(openid, "我是获取的openid");
+      let openId = window.localStorage.getItem("openId");
+      this.findArr(openId);
     });
-    const result = await getPayList();
-    this.arr = result.grades;
-    // console.log(this.arr);
   },
 };
 </script>
@@ -190,65 +189,46 @@ export default {
   position: absolute;
   bottom: 8%;
   left: 0;
-  // border: 1px solid red;
-  // text-align: center;
 }
 .pay_btn {
   height: 85%;
   width: 100%;
-  // text-align: center;
-  //  border: 1px solid red;
   color: #fff;
   font-weight: 900;
   font-size: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
-  // line-height: 60px;
 }
 .el-image {
   display: block;
 }
 .area {
   display: flex;
-  width: 70%;
+  width: 80%;
   position: absolute;
   top: 30%;
-  left: 15%;
+  left: 10%;
   height: 30%;
-  // border: 1px solid red;
 }
-// .radio_area {
-//   height: 100%;
-//   width: 100%;
-//   border: 1px solid red;
-// }
-// .detail_area {
-//   width: 25%;
-//   height: 100%;
-//   // margin-left: %;
-// }
 .el-radio-group .el-radio {
   display: block;
   color: #fff;
 }
-.el-radio /deep/ .el-radio__input{
-  margin-top: 13%;
+.el-radio /deep/ .el-radio__input {
+  margin-top: 11%;
+  margin-left: 10px;
 }
-.content{
-  // width: 80%;
-  // overflow: hidden;
-  // border: 1px solid red;
+.content {
   position: absolute;
-  top: 20%;
-  left: 45%;
+  top: 18%;
+  left: 41%;
   font-size: 16px;
   font-weight: 600;
   width: 55%;
-  word-break:break-all;
-  white-space:normal,
-  // overflow: hidden;
-
+  word-break: break-all;
+  white-space: normal;
+  // border: 1px solid red;
 }
 .el-radio-group
   .el-radio
@@ -261,8 +241,7 @@ export default {
   color: #fff !important;
   font-size: 13px !important;
   padding-left: 4px !important;
-  width: 80%!important;
-  // border: 1px solid red;
+  width: 80% !important;
   overflow: hidden;
 }
 .el-radio-group
@@ -292,7 +271,6 @@ export default {
   background: #fff;
   width: 15px;
   height: 15px;
-  // margin-top: 20%;
 }
 .el-radio-group .el-radio /deep/ .el-radio__input .el-radio__inner {
   width: 15px;
@@ -302,11 +280,9 @@ export default {
   margin-top: 6%;
   position: relative;
   width: 100%;
-  // overflow: hidden;
   background: #feb800;
   overflow: hidden;
-  height: 26%;
-  // width: 100%;
+  height: 28%;
   .el-radio__input {
     display: none;
     color: #fff;
@@ -337,7 +313,6 @@ export default {
   position: absolute;
   bottom: 5%;
   right: 2%;
-  // text-align: right;
 }
 .xy {
   font-size: 13px;

src/pages/payDetails.vue

@@ -22,10 +22,9 @@ export default {
   name: "payDetails",
   data() {
     return {
-      contentImg: "",
+      contentImg: '',
       valuable: "",
       title: "",
-      url: require("../assets/199.png"),
       payOptions: {
         appId: "", //公众号名称，由商户传入
         timeStamp: "", //时间戳，自1970年以来的秒数
@@ -86,7 +85,6 @@ export default {
         spbillCreateIp: "127.0.0.1",
         notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
         tradeType: "JSAPI",
-        // openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
         openid: window.localStorage.getItem("openId"),
       };
       console.log(params);
@@ -104,10 +102,6 @@ export default {
   },
   computed: {},
   mounted() {
-    openId.getOpenId(() => {
-      let openid = window.localStorage.getItem("openId");
-      console.log(openid, "我是获取的openid");
-    });
     this.contentImg = this.$route.query.contentImg;
     this.valuable = this.$route.query.valuable;
     this.title = this.$route.query.title;
@@ -117,9 +111,10 @@ export default {
 <style scoped lang="less">
 .pay_area {
   width: 100%;
-  height: 100px;
+  height: 88px;
   text-align: center;
-  background: #294166;
+  position: relative;
+  margin-top: -90px;
 }
 .el-image {
   display: block;

src/pages/payList.vue

@@ -4,21 +4,23 @@
       <div class="p1">欢迎哦！</div>
       <div class="p2">您已成功加入月合缘粉</div>
     </div>
-    <div v-for="(item, index) in arr" :key="index" class="replybox">
-      <div class="div_body">
-        <div style="display: flex; margin: 10px 0">
-          <div class="name">{{ item.memberName }}</div>
-          <div class="status">{{ item.memberOrderGrade }}</div>
+    <div style="padding-bottom: 30px">
+      <div v-for="(item, index) in arr" :key="index" class="replybox">
+        <div class="div_body">
+          <div style="display: flex; margin: 10px 0">
+            <div class="name">{{ item.memberName }}</div>
+            <div class="status">{{ item.memberOrderGrade }}</div>
+          </div>
+          <div class="number one">剩{{ item.benefitNum }}次</div>
+          <div class="title">{{ item.memberOrderContent }}</div>
+          <div class="time">购买时间：{{ item.createTime }}</div>
+          <div class="time">到期时间：{{ item.endTime }}</div>
+        </div>
+        <!-- <div class="line"></div> -->
+        <div class="money_body">
+          <div style="font-size: 15px">实付￥{{ item.payAmount / 100 }}元</div>
+          <!-- <div style="line-height: 38px">实付</div> -->
         </div>
-        <div class="number one">剩{{ item.benefitNum }}次</div>
-        <div class="title">{{ item.memberOrderContent }}</div>
-        <div class="time">购买时间：{{ item.createTime }}</div>
-        <div class="time">到期时间：{{ item.endTime }}</div>
-      </div>
-      <!-- <div class="line"></div> -->
-      <div class="money_body">
-        <div style="font-size: 15px">实付￥{{ item.payAmount/100 }}元</div>
-        <!-- <div style="line-height: 38px">实付</div> -->
       </div>
     </div>
   </div>
@@ -30,42 +32,24 @@ export default {
   name: "payList",
   data() {
     return {
-      arr: [
-        {
-          benefitNum: "1", //剩余次数
-          createTime: "2021-01-04 20:46:30",
-          endTime: "2021-01-05 20:46:30",
-          memberName: "名字",
-          memberOrderContent: "一次1对1见面",
-          memberOrderGrade: "立即脱单",
-          payAmount: "1",
-        },
-        {
-          benefitNum: "1", //剩余次数
-          createTime: "2021-01-04 20:46:30",
-          endTime: "2021-01-05 20:46:30",
-          memberName: "名字",
-          memberOrderContent: "一次1对1见面",
-          memberOrderGrade: "立即脱单",
-          payAmount: "2",
-        },
-        {
-          benefitNum: "1", //剩余次数
-          createTime: "2021-01-04 20:46:30",
-          endTime: "2021-01-05 20:46:30",
-          memberName: "名字",
-          memberOrderContent: "一次1对1见面",
-          memberOrderGrade: "立即脱单",
-          payAmount: "3",
-        },
-      ],
+      arr: [],
     };
   },
-  methods: {},
+  methods: {
+    async findArr(openId) {
+      let params = {
+        openId: openId,
+      };
+      const result = await getMypayList(params);
+      this.arr = result.orders;
+    },
+  },
   computed: {},
   async mounted() {
-    const result = await getMypayList();
-    this.arr = result.orders;
+    openId.getOpenId(() => {
+      let openId = window.localStorage.getItem("openId");
+      this.findArr(openId);
+    });
   },
 };
 </script>
@@ -74,10 +58,9 @@ export default {
   min-height: 100vh;
   border: 1px solid red;
   background-image: url("../assets/mylist_bj.jpg");
-  background-repeat:no-repeat;
-  background-size:100% 100%;
-  -moz-background-size:100% 100%;
-  /* background-size: 100%; */
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  -moz-background-size: 100% 100%;
 }
 .hello {
   background: #fde79c;
@@ -87,35 +70,24 @@ export default {
   margin-top: 40px;
   /* left: 0; */
 }
-.p1{
+.p1 {
   font-size: 22px;
-  padding-top:20px;
-  margin-left:40px;
-  /* height: 50px; */
-  /* border: 1px solid red; */
-  /* float:left */
-  /* display: block; */
-  /* line-height: 55px; */
+  padding-top: 20px;
+  margin-left: 40px;
 }
-.p2{
+.p2 {
   font-size: 16px;
-  /* margin-top:50px; */
-  margin-left:80px;
+  margin-left: 80px;
   color: #000;
-  /* display: block; */
-  /* line-height: 55px; */
 }
 .replybox {
   background: #f7f2f2;
-  width: 90%;
-  margin: 20px 5%;
+  width: 84%;
+  margin: 20px 8%;
   border-radius: 10px;
-  /* box-shadow: 10px; */
-  /* border: 1px solid red; */
 }
 .div_body {
   width: 100%;
-  /* border: 1px solid red; */
   position: relative;
   padding: 10px;
 }
@@ -135,16 +107,12 @@ export default {
   background: #b61d1c;
   color: #fff;
   font-size: 14px;
-  /* border: 1px solid red; */
 }
 .two {
   background: #e7e7e7;
   color: #8b8b8b;
 }
 .number {
-  /* border: 1px solid red; */
-  /* float: right; */
-  /* width: 55px; */
   text-align: center;
   border-radius: 5px;
   padding: 0px 8px;

src/util/getOpenId.js

@@ -9,7 +9,6 @@ export default {
         } else {
             this.getAppid(loading, callback);
         }
-
     },
     async getAppid(loading, callback) {
         this.getCode('wxeef6678b92b6c856', loading, callback);