feat: 支付

src/lib/api/pay.js

@@ -0,0 +1,23 @@
+import request from "../utils/request";
+
+/**
+ * 预支付接口
+ *
+ * [API](https://console-docs.apipost.cn/preview/888dcf083e39e4e4/ae9a5ffd745e57d1?target_id=e8d757e6-25a4-4088-8290-2840017042a1)
+ */
+export const vipPrePay = (data) => request.post("/weapp/vip/prepay", data);
+
+/**
+ * 支付完成接口
+ *
+ * [API](https://console-docs.apipost.cn/preview/888dcf083e39e4e4/ae9a5ffd745e57d1?target_id=4aeef220-7df1-415c-a13a-575af72dbaca)
+ */
+export const vipCompletePay = (data) =>
+  request.post("/weapp/vip/complete/pay", data);
+
+/**
+ * [轮询]支付状态查询接口
+ *
+ * [API](https://console-docs.apipost.cn/preview/888dcf083e39e4e4/ae9a5ffd745e57d1?target_id=3b0d4bb2-923f-44e5-b733-3f629a9492fd)
+ */
+export const vipQueryPay = (data) => request.post("/weapp/vip/query/pay", data);

src/lib/utils/request.js

@@ -19,7 +19,7 @@ function getCommonHeader() {
   if (info.session) {
     header.session = info.session;
   }
-  header.session = "375ac5dd70ebc9af27864ecfc91e9181";
+  // header.session = "375ac5dd70ebc9af27864ecfc91e9181";
   return header;
 }
 // todo 这里的问题，先注释掉

src/pages/vip/vip.vue

@@ -4,7 +4,8 @@
       <view class="card-title">VIP会员</view>
       <view class="card-desc">开通VIP会员专享权益</view>
       <view class="card-status">
-        已经开通 <button class="card-btn">立即开通</button>
+        <template v-if="userInfo && userInfo.type === '1'">已开通</template>
+        <button class="card-btn" v-else @click="handlePay">立即开通</button>
       </view>
     </view>
     <view class="list-title">VIP会员专享{{ list.length }}项权益</view>
@@ -18,11 +19,15 @@
 </template>
 
 <script>
+import { getUserInfo } from "@/lib/api/user";
+import { vipPrePay, vipCompletePay, vipQueryPay } from "@/lib/api/pay";
+
 export default {
   name: "VipVip",
   data() {
     return {
       id: 0,
+      userInfo: null,
       list: [
         {
           name: "10000积分",
@@ -51,7 +56,114 @@ export default {
       ],
     };
   },
-  methods: {},
+  onShow() {
+    const uinfoStr = uni.getStorageSync("userinfo");
+    if (uinfoStr) {
+      this.userInfo = JSON.parse(uinfoStr);
+      this.getUserInfo();
+    } else {
+      this.userInfo = {};
+    }
+  },
+  methods: {
+    async getUserInfo() {
+      const res = await getUserInfo();
+      this.userInfo = { ...this.userInfo, ...res.data };
+      uni.setStorageSync("userinfo", JSON.stringify(this.userInfo));
+    },
+
+    async handlePay() {
+      try {
+        await this.wechatPay();
+        this.getUserInfo();
+      } catch (e) {
+        uni.showToast({
+          icon: "none",
+          title: e.message,
+        });
+      }
+    },
+
+    async wechatPay() {
+      uni.showLoading({
+        title: "加载中",
+        mask: true,
+      });
+
+      const { errno, errmsg, data } = await vipPrePay();
+
+      uni.hideLoading();
+
+      if (errno !== 10000) {
+        throw new Error(errmsg);
+      }
+      const {
+        timeStamp,
+        nonceStr,
+        package: pkg,
+        signType,
+        paySign,
+        order_id,
+      } = data;
+
+      const type = await new Promise((resolve) => {
+        uni.requestPayment({
+          provider: "wxpay",
+          timeStamp,
+          nonceStr,
+          package: pkg,
+          signType,
+          paySign,
+          success: async (res) => {
+            resolve(
+              res.errMsg === "requestPayment:ok"
+                ? "1"
+                : res.errMsg === "requestPayment:fail cancel"
+                ? "3"
+                : "2"
+            );
+          },
+          fail: async (err) => {
+            resolve(err.errMsg === "requestPayment:fail cancel" ? "3" : "2");
+          },
+        });
+      });
+
+      await vipCompletePay({
+        order_id,
+        type,
+      }).catch((e) => {
+        console.log(e);
+      });
+
+      if (type !== "1") throw new Error(type === "3" ? "取消支付" : "支付失败");
+
+      return this.loopPayRes("" + order_id);
+    },
+    async loopPayRes(order_id) {
+      uni.showLoading({
+        title: "加载中",
+        mask: true,
+      });
+      const data = await vipQueryPay({
+        order_id,
+      });
+
+      if (data.errno == 90000) {
+        return new Promise((r) => {
+          setTimeout(() => r(), 1000);
+        }).then(() => this.loopPayRes(order_id));
+      }
+
+      uni.hideLoading();
+
+      if (data.errno == 10000) {
+        return data.data;
+      }
+
+      throw new Error("订单查询失败");
+    },
+  },
 };
 </script>