1

src/pages/index.vue

@@ -2,18 +2,43 @@
   <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 v-model="radioTreaty" @change="radioChange">
-          <el-radio label="1">199/年 精准匹配一次权益</el-radio>
-          <el-radio label="2">399/年 精准匹配三次权益</el-radio>
-          <el-radio label="3">1999/年 精准匹配十次权益</el-radio>
-        </el-radio-group>
-      </div>
-      <div class="detail_area">
+      <!-- <div class="radio_area"> -->
+      <el-radio-group
+        style="width: 100%"
+        v-model="radioTreaty"
+        @change="radioChange"
+      >
+        <el-radio
+          v-for="(item, index) in arr"
+          :key="index"
+          :value="item.valuable"
+          :label="item.valuable"
+          ><span
+            style="
+              display: flex;
+              align-items: center;
+              left: 20px;
+              background: #1c1817;
+              padding: 0 5%;
+              font-weight: 900;
+              font-size: 22px;
+              color: #fec629;
+              position: absolute;
+              bottom: 0;
+              height: 80%;
+            "
+            >{{ item.valuable / 100 }}</span
+          >
+          <span class="content">{{ item.content }}</span
+          ><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>
     <div class="pay_area">
       <div class="pay_btn" @click="pay">立即购买</div>
@@ -24,8 +49,7 @@
           style="margin-top: 2px"
         /> -->
         <div class="xy" @click="goXy()">
-          点击购买即代表同意<span
-            style="color: rgba(20, 80, 130); font-weight: 900"
+          点击购买即代表同意<span style="color: #fff; font-weight: 900"
             >《平台用户服务协议》</span
           >
         </div>
@@ -36,13 +60,14 @@
 <script>
 import openId from "../util/getOpenId";
 import { Message } from "element-ui";
-import { getPay, getPayList, getMypayList } from "../api";
+import { getPay, getPayList } from "../api";
 export default {
   name: "index",
   data() {
     return {
       url: require("../assets/huiyuan_bj.jpg"),
-      radioTreaty: "1",
+      arr: [],
+      radioTreaty: "",
       payOptions: {
         appId: "", //公众号名称，由商户传入
         timeStamp: "", //时间戳，自1970年以来的秒数
@@ -57,17 +82,20 @@ export default {
     goXy() {
       this.$router.push("/xy");
     },
-    goFirst() {
-      this.$router.push("/firstPay");
-    },
-    goSecond() {
-      this.$router.push("/secondPay");
-    },
-    goThird() {
-      this.$router.push("/thirdPay");
+    goDetails(item) {
+      console.log(item)
+       this.$router.push({name:'payDetails',query: {contentImg:item.contentImg,valuable:item.valuable,title:item.title}})
+      // this.$router.push("/firstPay");
     },
+    // goSecond() {
+    //   this.$router.push("/secondPay");
+    // },
+    // goThird() {
+    //   this.$router.push("/thirdPay");
+    // },
     radioChange: (val) => {
       console.log(val);
+      // console.log(this.radioTreaty)
     },
     // checkboxChange: (val) => {
     //   this.checked = val;
@@ -113,42 +141,57 @@ export default {
     },
     async pay() {
       let params = {};
-      if (this.radioTreaty == "1") {
-        params = {
-          body: "wxtest199",
-          outTradeNo: new Date().getTime(),
-          totalFee: "1",
-          spbillCreateIp: "127.0.0.1",
-          notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
-          tradeType: "JSAPI",
-          openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
-          // openid: window.localStorage.getItem("openId"),
-        };
-      }
-      if (this.radioTreaty == "2") {
-        params = {
-          body: "wxtest399",
-          outTradeNo: new Date().getTime(),
-          totalFee: "2",
-          spbillCreateIp: "127.0.0.1",
-          notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
-          tradeType: "JSAPI",
-          openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
-          // openid: window.localStorage.getItem("openId"),
-        };
-      }
-      if (this.radioTreaty == "3") {
-        params = {
-          body: "wxtest1999",
-          outTradeNo: new Date().getTime(),
-          totalFee: "3",
-          spbillCreateIp: "127.0.0.1",
-          notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
-          tradeType: "JSAPI",
-          openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
-          // openid: window.localStorage.getItem("openId"),
-        };
+      for (let i = 0; i++; i < this.arr.length) {
+        if (this.arr[i].valuable == this.radioTreaty) {
+          params = {
+            body: this.arr[i].title,
+            outTradeNo: new Date().getTime(),
+            totalFee: this.arr[i].valuable,
+            spbillCreateIp: "127.0.0.1",
+            notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
+            tradeType: "JSAPI",
+            openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
+            // openid: window.localStorage.getItem("openId"),
+          };
+        }
       }
+      // }
+      // if (this.radioTreaty == "1") {
+      //   params = {
+      //     body: "wxtest199",
+      //     outTradeNo: new Date().getTime(),
+      //     totalFee: "1",
+      //     spbillCreateIp: "127.0.0.1",
+      //     notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
+      //     tradeType: "JSAPI",
+      //     openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
+      //     // openid: window.localStorage.getItem("openId"),
+      //   };
+      // }
+      // if (this.radioTreaty == "2") {
+      //   params = {
+      //     body: "wxtest399",
+      //     outTradeNo: new Date().getTime(),
+      //     totalFee: "2",
+      //     spbillCreateIp: "127.0.0.1",
+      //     notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
+      //     tradeType: "JSAPI",
+      //     openid: "oyp646XW37eIqrv3XisVWQ3xq3BQ",
+      //     // openid: window.localStorage.getItem("openId"),
+      //   };
+      // }
+      // if (this.radioTreaty == "3") {
+      //   params = {
+      //     body: "wxtest1999",
+      //     outTradeNo: new Date().getTime(),
+      //     totalFee: "3",
+      //     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);
       const result = await getPay(params);
       console.log(result);
@@ -157,7 +200,7 @@ export default {
       this.payOptions.nonceStr = result.nonceStr; //随机串
       this.payOptions.package = result.packageValue; //prepay_id用等式的格式
       this.payOptions.signType = result.signType; //微信签名方式：
-      this.payOptions.paySign = result.paySign; //微信签
+      this.payOptions.paySign = result.paySign; //微信签名
       console.log(this.payOptions);
       this.jsSdk();
     },
@@ -169,9 +212,10 @@ export default {
     //   console.log(openid, "我是获取的openid");
     // });
     const result = await getPayList();
-    console.log(result)
-    const result1 = await getMypayList();
-    console.log(result1)
+    console.log(result);
+    this.arr = result.grades;
+    console.log(this.arr);
+
   },
 };
 </script>
@@ -180,20 +224,23 @@ export default {
   width: 100%;
   height: 10%;
   position: absolute;
-  bottom: 1.5%;
+  bottom: 8%;
   left: 0;
   // border: 1px solid red;
   // text-align: center;
 }
 .pay_btn {
-  height: 60px;
+  height: 85%;
   width: 100%;
-  text-align: center;
+  // text-align: center;
   //  border: 1px solid red;
   color: #fff;
   font-weight: 900;
   font-size: 30px;
-  line-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // line-height: 60px;
 }
 .el-image {
   display: block;
@@ -202,23 +249,43 @@ export default {
   display: flex;
   width: 70%;
   position: absolute;
-  top: 52%;
+  top: 30%;
   left: 15%;
-  height: 100px;
-}
-.radio_area {
-  height: 100%;
-  width: 75%;
-}
-.detail_area {
-  width: 25%;
-  height: 100%;
-  // margin-left: %;
+  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%;
+}
+.content{
+  // width: 80%;
+  // overflow: hidden;
+  // border: 1px solid red;
+  position: absolute;
+  top: 20%;
+  left: 45%;
+  font-size: 16px;
+  font-weight: 600;
+  width: 55%;
+  word-break:break-all;
+  white-space:normal,
+  // overflow: hidden;
+
+}
 .el-radio-group
   .el-radio
   /deep/
@@ -230,6 +297,9 @@ export default {
   color: #fff !important;
   font-size: 13px !important;
   padding-left: 4px !important;
+  width: 80%!important;
+  // border: 1px solid red;
+  overflow: hidden;
 }
 .el-radio-group
   .el-radio
@@ -240,7 +310,7 @@ export default {
   content: "";
   width: 10px !important;
   height: 5px !important;
-  border: 2px solid #fea001 !important;
+  border: 2px solid #1c1817 !important;
   border-top: transparent !important;
   border-right: transparent !important;
   text-align: center !important;
@@ -258,13 +328,21 @@ 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;
   height: 15px;
 }
 .el-radio-group .el-radio {
-  margin-top: 10px;
+  margin-top: 6%;
+  position: relative;
+  width: 100%;
+  // overflow: hidden;
+  background: #feb800;
+  overflow: hidden;
+  height: 26%;
+  // width: 100%;
   .el-radio__input {
     display: none;
     color: #fff;
@@ -285,15 +363,22 @@ export default {
   }
 }
 .ck {
-  font-size: 12px;
+  font-size: 13px;
   margin-top: 11px;
-  background: #fea001;
-  color: #fff;
-  text-align: center;
+  background: #1f1619;
+  color: #feb800;
+  float: right;
+  padding: 5px 12px;
+  font-weight: 900;
+  position: absolute;
+  bottom: 5%;
+  right: 2%;
+  // text-align: right;
 }
 .xy {
   font-size: 13px;
   color: #fff;
   margin-left: 5px;
+  margin-top: 10%;
 }
 </style>

src/pages/firstPay.vue

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <el-image style="width: 100%" :src="url" fit="contain"></el-image>
+    <el-image
+      style="width: 100%"
+      :src="contentImg"
+      fit="contain"
+    ></el-image>
     <div class="pay_area">
-      <div class="btn" @click="pay">￥199/年 立即购买</div>
+      <div class="btn" @click="pay">￥{{ valuable / 100 }} 立即购买</div>
       <div style="display: flex; justify-content: center">
         <!-- <el-checkbox v-model="checked"/><div class="xy" @click="goXy()">平台用户服务协议</div> -->
         <div class="xy" @click="goXy()">
@@ -19,9 +23,12 @@ import openId from "../util/getOpenId";
 import { Message } from "element-ui";
 import { getPay } from "../api";
 export default {
-  name: "firstPay",
+  name: "payDetails",
   data() {
     return {
+      contentImg:'',
+      valuable:'',
+      title:'',
       url: require("../assets/199.png"),
       payOptions: {
         appId: "", //公众号名称，由商户传入
@@ -35,6 +42,7 @@ export default {
   },
   methods: {
     goXy() {
+      // this.$router.push({ name: "xy", query: { item: this.data } });
       this.$router.push("/xy");
     },
     jsSdk() {
@@ -77,9 +85,9 @@ export default {
     },
     async pay() {
       let params = {
-        body: "wxtest199",
+        body: this.title,
         outTradeNo: new Date().getTime(),
-        totalFee: "1",
+        totalFee: this.valuable,
         spbillCreateIp: "127.0.0.1",
         notifyUrl: "https://yuehe.hellevil.com/pay/notify/order",
         tradeType: "JSAPI",
@@ -101,11 +109,16 @@ export default {
   },
   computed: {},
   mounted() {
+    this.contentImg = this.$route.query.contentImg;
+    this.valuable = this.$route.query.valuable;
+    this.title = this.$route.query.title;
+    console.log(this.contentImg);
+    console.log(this.valuable);
+    console.log(this.title);
     // openId.getOpenId(() => {
     //   let openid = window.localStorage.getItem("openId");
     //   console.log(openid, "我是获取的openid");
     // });
-    
   },
 };
 </script>

src/pages/payList.vue

@@ -1,64 +1,112 @@
 <template>
-  <div style="background:#fff;min-height:100vh">
+  <div class="bj">
+    <div class="hello">
+      <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.name }}</div>
-          <div class="status">{{ item.status }}</div>
+          <div class="name">{{ item.memberName }}</div>
+          <div class="status">{{ item.memberOrderGrade }}</div>
         </div>
-        <div class="number one">{{item.number}}</div>
-        <div class="title">{{ item.title }}</div>
-        <div class="time">购买时间：{{ item.time }}</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="color: #ff2c2c; font-size: 25px">￥{{ item.money }}</div>
-         <div style="line-height:38px">实付</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>
 </template>
 <script>
+import openId from "../util/getOpenId";
+import { getMypayList } from "../api";
 export default {
   name: "payList",
   data() {
     return {
       arr: [
         {
-          name: "韩式辣酱",
-          status: "立即脱单",
-          title: "全年五十次权益",
-          time: "2020-09-09 15:52",
-          number: "9",
-          money: "199999",
+          benefitNum: "1", //剩余次数
+          createTime: "2021-01-04 20:46:30",
+          endTime: "2021-01-05 20:46:30",
+          memberName: "名字",
+          memberOrderContent: "一次1对1见面",
+          memberOrderGrade: "立即脱单",
+          payAmount: "1",
         },
         {
-          name: "韩式辣酱",
-          status: "可能脱单",
-          title: "全年五十次权益",
-          time: "2020-09-09 15:52",
-          number: "已使用",
-          money: "27799",
+          benefitNum: "1", //剩余次数
+          createTime: "2021-01-04 20:46:30",
+          endTime: "2021-01-05 20:46:30",
+          memberName: "名字",
+          memberOrderContent: "一次1对1见面",
+          memberOrderGrade: "立即脱单",
+          payAmount: "2",
         },
         {
-          name: "韩式辣酱",
-          status: "即将脱单",
-          title: "全年五十次权益",
-          time: "2020-09-09 15:52",
-          number: "已使用",
-          money: "27799",
+          benefitNum: "1", //剩余次数
+          createTime: "2021-01-04 20:46:30",
+          endTime: "2021-01-05 20:46:30",
+          memberName: "名字",
+          memberOrderContent: "一次1对1见面",
+          memberOrderGrade: "立即脱单",
+          payAmount: "3",
         },
       ],
     };
   },
   methods: {},
   computed: {},
-  mounted() {},
+  async mounted() {
+    // const result = await getMypayList();
+    // this.arr = result.orders;
+  },
 };
 </script>
 <style scoped>
+.bj {
+  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%; */
+}
+.hello {
+  background: #fde79c;
+  width: 70%;
+  height: 80px;
+  /* position: fixed; */
+  margin-top: 40px;
+  /* left: 0; */
+}
+.p1{
+  font-size: 22px;
+  padding-top:20px;
+  margin-left:40px;
+  /* height: 50px; */
+  /* border: 1px solid red; */
+  /* float:left */
+  /* display: block; */
+  /* line-height: 55px; */
+}
+.p2{
+  font-size: 16px;
+  /* margin-top:50px; */
+  margin-left:80px;
+  color: #000;
+  /* display: block; */
+  /* line-height: 55px; */
+}
 .replybox {
-  background: #fafafa;
+  background: #f7f2f2;
   width: 90%;
   margin: 20px 5%;
   border-radius: 10px;
@@ -69,23 +117,24 @@ export default {
   width: 100%;
   /* border: 1px solid red; */
   position: relative;
-  padding: 15px;
+  padding: 10px;
 }
 .name {
   font-size: 14px;
   font-weight: 600;
 }
 .status {
-  background: #fad398;
+  background: #fbb409;
   border-radius: 5px;
   padding: 0px 5px;
   margin-left: 5px;
-  color: #724119;
+  color: #fff;
   font-size: 13px;
 }
 .one {
-  background: #8ee34e;
+  background: #b61d1c;
   color: #fff;
+  font-size: 14px;
   /* border: 1px solid red; */
 }
 .two {
@@ -93,13 +142,13 @@ export default {
   color: #8b8b8b;
 }
 .number {
-    /* border: 1px solid red; */
+  /* border: 1px solid red; */
   /* float: right; */
   /* width: 55px; */
   text-align: center;
   border-radius: 5px;
   padding: 0px 8px;
-  font-size: 12px;
+  font-size: 14px;
   position: absolute;
   top: 20px;
   right: 50px;
@@ -119,12 +168,14 @@ export default {
   width: 100%;
   height: 1px;
   background: #eeeeee;
-  margin:5px
+  margin: 5px;
 }
 .money_body {
   font-size: 16px;
   display: flex;
   text-align: right;
-  flex-direction:row-reverse;
+  flex-direction: row-reverse;
+  margin-right: 10px;
+  padding-bottom: 10px;
 }
 </style>

src/pages/secondPay.vue

@@ -1,138 +0,0 @@
-<template>
-  <div>
-    <el-image style="width: 100%" :src="url" fit="contain"></el-image>
-    <div class="pay_area">
-      <div class="btn" @click="pay">￥399/年 立即购买</div>
-      <div style="display: flex; justify-content: center">
-        <!-- <el-checkbox v-model="checked"/><div class="xy" @click="goXy()">平台用户服务协议</div> -->
-        <div class="xy" @click="goXy()">
-          点击购买即代表同意<span
-            style="color: rgba(20, 80, 130); font-weight: 900"
-            >《平台用户服务协议》</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import openId from "../util/getOpenId";
-import { Message } from "element-ui";
-import { getPay } from "../api";
-export default {
-  name: "secondPay",
-  data() {
-    return {
-      url: require("../assets/399.png"),
-      payOptions: {
-        appId: "", //公众号名称，由商户传入
-        timeStamp: "", //时间戳，自1970年以来的秒数
-        nonceStr: "", //随机串
-        package: "", //prepay_id用等式的格式
-        signType: "", //微信签名方式：
-        paySign: "", //微信签名
-      },
-    };
-  },
-  methods: {
-    goXy() {
-      this.$router.push("/xy");
-    },
-    jsSdk() {
-      // 判断微信的WeixinJSBridge
-      console.log(typeof WeixinJSBridge);
-      if (typeof WeixinJSBridge == "undefined") {
-        if (document.addEventListener) {
-          document.addEventListener(
-            "WeixinJSBridgeReady",
-            this.onBridgeReady,
-            false
-          );
-        } else if (document.attachEvent) {
-          document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
-          document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
-        }
-      } else {
-        this.onBridgeReady();
-      }
-    },
-    // 支付sdk准备完成
-    onBridgeReady() {
-      // 触发微信支付
-      WeixinJSBridge.invoke(
-        "getBrandWCPayRequest",
-        this.payOptions,
-        function (res) {
-          console.log(res);
-          if (res.err_msg == "get_brand_wcpay_request:ok") {
-            // 支付成功 返回成功页
-            let tempUrl = "https://yuehe.hellevil.com/mp/#/paySuccess";
-            location.href = tempUr;
-          } else {
-            //  取消支付或者其他情况 get_brand_wcpay_request:cancel get_brand_wcpay_request:fail
-            let tempUrl = "https://yuehe.hellevil.com/mp/#/";
-            location.href = tempUrl;
-          }
-        }
-      );
-    },
-    async pay() {
-      let params = {
-        body: "wxtest399",
-        outTradeNo: new Date().getTime(),
-        totalFee: "2",
-        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);
-      const result = await getPay(params);
-      console.log(result);
-      this.payOptions.appId = result.appId; //公众号名称，由商户传入
-      this.payOptions.timeStamp = result.timeStamp; //时间戳，自1970年以来的秒数
-      this.payOptions.nonceStr = result.nonceStr; //随机串
-      this.payOptions.package = result.packageValue; //prepay_id用等式的格式
-      this.payOptions.signType = result.signType; //微信签名方式：
-      this.payOptions.paySign = result.paySign; //微信签
-      console.log(this.payOptions);
-      this.jsSdk();
-    },
-  },
-  computed: {},
-  mounted() {
-    openId.getOpenId(() => {
-      let openid = window.localStorage.getItem("openId");
-      console.log(openid, "我是获取的openid");
-    });
-  },
-};
-</script>
-<style scoped lang="less">
-.pay_area {
-  width: 100%;
-  height: 100px;
-  text-align: center;
-  background: rgba(218, 80, 80);
-}
-.el-image {
-  display: block;
-}
-.btn {
-  height: 60%;
-  width: 100%;
-  font-weight: 900;
-  font-size: 28px;
-  line-height: 60px;
-  color: #fff;
-}
-.el-checkbox /deep/ .el-checkbox__label {
-  color: #fff;
-}
-.xy {
-  font-size: 13px;
-  color: #fff;
-  margin-left: 5px;
-}
-</style>

src/pages/thirdPay.vue

@@ -1,138 +0,0 @@
-<template>
-  <div>
-    <el-image style="width: 100%" :src="url" fit="contain"></el-image>
-    <div class="pay_area">
-      <div class="btn" @click="pay">￥1999/年 立即购买</div>
-      <div style="display: flex; justify-content: center">
-        <!-- <el-checkbox v-model="checked"/><div class="xy" @click="goXy()">平台用户服务协议</div> -->
-        <div class="xy" @click="goXy()">
-          点击购买即代表同意<span
-            style="color: rgba(20, 80, 130); font-weight: 900"
-            >《平台用户服务协议》</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import openId from "../util/getOpenId";
-import { Message } from "element-ui";
-import { getPay } from "../api";
-export default {
-  name: "thirdPay",
-  data() {
-    return {
-      url: require("../assets/1999.png"),
-      payOptions: {
-        appId: "", //公众号名称，由商户传入
-        timeStamp: "", //时间戳，自1970年以来的秒数
-        nonceStr: "", //随机串
-        package: "", //prepay_id用等式的格式
-        signType: "", //微信签名方式：
-        paySign: "", //微信签名
-      },
-    };
-  },
-  methods: {
-    goXy() {
-      this.$router.push("/xy");
-    },
-    jsSdk() {
-      // 判断微信的WeixinJSBridge
-      console.log(typeof WeixinJSBridge);
-      if (typeof WeixinJSBridge == "undefined") {
-        if (document.addEventListener) {
-          document.addEventListener(
-            "WeixinJSBridgeReady",
-            this.onBridgeReady,
-            false
-          );
-        } else if (document.attachEvent) {
-          document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
-          document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
-        }
-      } else {
-        this.onBridgeReady();
-      }
-    },
-    // 支付sdk准备完成
-    onBridgeReady() {
-      // 触发微信支付
-      WeixinJSBridge.invoke(
-        "getBrandWCPayRequest",
-        this.payOptions,
-        function (res) {
-          console.log(res);
-          if (res.err_msg == "get_brand_wcpay_request:ok") {
-            // 支付成功 返回成功页
-            let tempUrl = "https://yuehe.hellevil.com/mp/#/paySuccess";
-            location.href = tempUr;
-          } else {
-            //  取消支付或者其他情况 get_brand_wcpay_request:cancel get_brand_wcpay_request:fail
-            let tempUrl = "https://yuehe.hellevil.com/mp/#/";
-            location.href = tempUrl;
-          }
-        }
-      );
-    },
-    async pay() {
-      let params = {
-        body: "wxtest1999",
-        outTradeNo: new Date().getTime(),
-        totalFee: "3",
-        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);
-      const result = await getPay(params);
-      console.log(result);
-      this.payOptions.appId = result.appId; //公众号名称，由商户传入
-      this.payOptions.timeStamp = result.timeStamp; //时间戳，自1970年以来的秒数
-      this.payOptions.nonceStr = result.nonceStr; //随机串
-      this.payOptions.package = result.packageValue; //prepay_id用等式的格式
-      this.payOptions.signType = result.signType; //微信签名方式：
-      this.payOptions.paySign = result.paySign; //微信签
-      console.log(this.payOptions);
-      this.jsSdk();
-    },
-  },
-  computed: {},
-  mounted() {
-    openId.getOpenId(() => {
-      let openid = window.localStorage.getItem("openId");
-      console.log(openid, "我是获取的openid");
-    });
-  },
-};
-</script>
-<style scoped lang="less">
-.pay_area {
-  width: 100%;
-  height: 100px;
-  text-align: center;
-  background: rgba(218, 80, 80);
-}
-.el-image {
-  display: block;
-}
-.btn {
-  height: 60%;
-  width: 100%;
-  font-weight: 900;
-  font-size: 28px;
-  line-height: 60px;
-  color: #fff;
-}
-.el-checkbox /deep/ .el-checkbox__label {
-  color: #fff;
-}
-.xy {
-  font-size: 13px;
-  color: #fff;
-  margin-left: 5px;
-}
-</style>

src/router/index.js

@@ -13,23 +13,23 @@ const routes = [
     component: index
   },
   {
-    path: '/firstPay',
-    name: 'firstPay',
-    component: getComponent('firstPay'),
+    path: '/payDetails',
+    name: 'payDetails',
+    component: getComponent('payDetails'),
   }, {
     path: '/xy',
     name: 'xy',
     component: getComponent('xy'),
   },
-  {
-    path: '/secondPay',
-    name: 'secondPay',
-    component: getComponent('secondPay'),
-  }, {
-    path: '/thirdPay',
-    name: 'thirdPay',
-    component: getComponent('thirdPay'),
-  },
+  // {
+  //   path: '/secondPay',
+  //   name: 'secondPay',
+  //   component: getComponent('secondPay'),
+  // }, {
+  //   path: '/thirdPay',
+  //   name: 'thirdPay',
+  //   component: getComponent('thirdPay'),
+  // },
   {
     path: '/payList',
     name: 'payList',