349 lines
8.1 KiB
Vue
349 lines
8.1 KiB
Vue
<template>
|
|
<view class="growth-package-page">
|
|
<image class="content-image" src="@/static/images/home/growth-package/intro.png" mode="widthFix"></image>
|
|
<view class="deal-carousel">
|
|
<swiper class="deal-swiper" autoplay circular :interval="3000" previous-margin="40rpx"
|
|
next-margin="40rpx" :current="dealCurrentIndex" @change="handleDealChange">
|
|
<swiper-item v-for="(item, index) in dealSlides" :key="item">
|
|
<view class="deal-slide" :class="getDealSlideClass(index)">
|
|
<image class="deal-slide-image" :src="item" mode="aspectFit"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="deal-indicator">
|
|
<view class="indicator-track" v-for="(item, index) in dealSlides" :key="item"
|
|
:class="{ active: index === dealCurrentIndex }"></view>
|
|
</view>
|
|
</view>
|
|
<image class="content-image" src="@/static/images/home/growth-package/plan.png" mode="widthFix"></image>
|
|
|
|
<view class="fixed-action" @tap="handlePayTap">
|
|
<image class="action-image" :src="actionImage" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "@/utils/request";
|
|
|
|
export default {
|
|
name: "GrowthPackage",
|
|
data() {
|
|
return {
|
|
dealCurrentIndex: 0,
|
|
isPaying: false,
|
|
isJoined: false,
|
|
dealSlides: [
|
|
"/static/images/home/growth-package/deal-1.png",
|
|
"/static/images/home/growth-package/deal-2.png",
|
|
"/static/images/home/growth-package/deal-3.png",
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
actionImage() {
|
|
return this.isJoined
|
|
? "/static/images/home/growth-package/action-success.png"
|
|
: "/static/images/home/growth-package/action.png";
|
|
},
|
|
},
|
|
onShow() {
|
|
this.getGrowthPackageStatus();
|
|
},
|
|
methods: {
|
|
async getGrowthPackageStatus() {
|
|
if (!uni.getStorageSync("accessToken")) {
|
|
this.isJoined = false;
|
|
return;
|
|
}
|
|
if (this.isPaying) return;
|
|
uni.showLoading({
|
|
title: "查询报名状态...",
|
|
mask: true,
|
|
});
|
|
try {
|
|
const res = await request.post(
|
|
"/sj/growthPackage/status",
|
|
{},
|
|
{
|
|
hideLoading: true,
|
|
}
|
|
);
|
|
this.isJoined = !!(res && res.code === 200 && res.data && Number(res.data.is_joined) === 1);
|
|
} catch (error) {
|
|
console.log("growthPackageStatus error", error);
|
|
} finally {
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
handleDealChange(event) {
|
|
this.dealCurrentIndex = event.detail.current;
|
|
},
|
|
getDealSlideClass(index) {
|
|
const length = this.dealSlides.length;
|
|
const prevIndex = (this.dealCurrentIndex + length - 1) % length;
|
|
const nextIndex = (this.dealCurrentIndex + 1) % length;
|
|
if (index === this.dealCurrentIndex) {
|
|
return "is-active";
|
|
}
|
|
if (index === prevIndex) {
|
|
return "is-prev";
|
|
}
|
|
if (index === nextIndex) {
|
|
return "is-next";
|
|
}
|
|
return "";
|
|
},
|
|
handlePayTap() {
|
|
if (this.isPaying) return;
|
|
if (this.isJoined) return;
|
|
if (!uni.getStorageSync("accessToken")) {
|
|
uni.navigateTo({
|
|
url: "/pages/blogPopup/blogPopup",
|
|
});
|
|
return;
|
|
}
|
|
uni.showActionSheet({
|
|
itemList: ["微信支付", "支付宝支付"],
|
|
success: (res) => {
|
|
const payKind = res.tapIndex === 0 ? 2 : 3;
|
|
this.createGrowthPackagePay(payKind);
|
|
},
|
|
});
|
|
},
|
|
async createGrowthPackagePay(payKind) {
|
|
this.isPaying = true;
|
|
uni.showLoading({
|
|
title: "支付中...",
|
|
mask: true,
|
|
});
|
|
try {
|
|
const payRes = await request.post(
|
|
"/sj/growthPackage/pay",
|
|
{
|
|
pay_kind: payKind,
|
|
},
|
|
{
|
|
hideLoading: true,
|
|
}
|
|
);
|
|
if (!payRes || payRes.code !== 200) {
|
|
uni.hideLoading();
|
|
this.isPaying = false;
|
|
if (payRes && payRes.data && (payRes.data.id || payRes.data.number)) {
|
|
this.goToPayResult("fail", payRes.data);
|
|
return;
|
|
}
|
|
uni.showToast({
|
|
title: (payRes && payRes.msg) || "支付请求失败",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
const orderInfo = payRes.data || {};
|
|
if (Number(orderInfo.is_joined) === 1) {
|
|
uni.hideLoading();
|
|
this.isPaying = false;
|
|
this.isJoined = true;
|
|
this.goToPayResult("success", orderInfo.order || {});
|
|
return;
|
|
}
|
|
const paymentParams = orderInfo.pay_params || orderInfo.orderInfo;
|
|
if (!paymentParams) {
|
|
uni.hideLoading();
|
|
this.isPaying = false;
|
|
if (orderInfo.id || orderInfo.number) {
|
|
this.goToPayResult("fail", orderInfo);
|
|
return;
|
|
}
|
|
uni.showToast({
|
|
title: "支付参数缺失",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
uni.hideLoading();
|
|
this.requestGrowthPackagePayment(payKind, paymentParams, orderInfo);
|
|
} catch (error) {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "支付请求失败",
|
|
icon: "none",
|
|
});
|
|
this.isPaying = false;
|
|
console.log("growthPackagePay error", error);
|
|
}
|
|
},
|
|
requestGrowthPackagePayment(payKind, paymentParams, orderInfo) {
|
|
const provider = payKind === 2 ? "wxpay" : "alipay";
|
|
let payOrderInfo = paymentParams;
|
|
if (payKind === 2 && paymentParams && typeof paymentParams === "object") {
|
|
payOrderInfo = {
|
|
...paymentParams,
|
|
};
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
if (systemInfo.platform === "ios" && payOrderInfo.appid) {
|
|
payOrderInfo.appId = payOrderInfo.appid;
|
|
delete payOrderInfo.appid;
|
|
}
|
|
}
|
|
uni.requestPayment({
|
|
provider,
|
|
orderInfo: payOrderInfo,
|
|
success: () => {
|
|
this.queryGrowthPackagePay(orderInfo);
|
|
},
|
|
fail: (err) => {
|
|
this.isPaying = false;
|
|
console.log("growthPackage requestPayment fail", err);
|
|
this.goToPayResult("fail", orderInfo);
|
|
},
|
|
});
|
|
},
|
|
async queryGrowthPackagePay(orderInfo) {
|
|
try {
|
|
const queryRes = await request.post(
|
|
"/sj/growthPackage/queryPay",
|
|
{
|
|
id: orderInfo.id,
|
|
number: orderInfo.number,
|
|
},
|
|
{
|
|
hideLoading: true,
|
|
}
|
|
);
|
|
const order = queryRes && queryRes.data && queryRes.data.order;
|
|
if (queryRes && queryRes.code === 200 && order && Number(order.state) === 2) {
|
|
this.isJoined = true;
|
|
this.goToPayResult("success", order);
|
|
return;
|
|
}
|
|
this.goToPayResult("fail", orderInfo);
|
|
} catch (error) {
|
|
console.log("growthPackageQueryPay error", error);
|
|
this.goToPayResult("fail", orderInfo);
|
|
} finally {
|
|
this.isPaying = false;
|
|
}
|
|
},
|
|
goToPayResult(status, orderInfo = {}) {
|
|
const params = [`status=${status}`];
|
|
if (orderInfo.number) {
|
|
params.push(`number=${encodeURIComponent(orderInfo.number)}`);
|
|
}
|
|
if (orderInfo.pay_money || orderInfo.order_money) {
|
|
params.push(`money=${encodeURIComponent(orderInfo.pay_money || orderInfo.order_money)}`);
|
|
}
|
|
uni.redirectTo({
|
|
url: `/pages/home/growth-package-result?${params.join("&")}`,
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #150903;
|
|
}
|
|
|
|
.growth-package-page {
|
|
min-height: 100vh;
|
|
padding-bottom: 259rpx;
|
|
background: #150903;
|
|
|
|
.content-image {
|
|
display: block;
|
|
width: 750rpx;
|
|
}
|
|
|
|
.deal-carousel {
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 1342rpx;
|
|
background: #000000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.deal-swiper {
|
|
width: 750rpx;
|
|
height: 1280rpx;
|
|
background: #000000;
|
|
}
|
|
|
|
.deal-slide {
|
|
position: relative;
|
|
width: 670rpx;
|
|
height: 1280rpx;
|
|
background: #000000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.deal-slide-image {
|
|
display: block;
|
|
width: 670rpx;
|
|
height: 1280rpx;
|
|
}
|
|
|
|
.deal-slide.is-prev,
|
|
.deal-slide.is-next {
|
|
height: 1169rpx;
|
|
margin-top: 56rpx;
|
|
}
|
|
|
|
.deal-slide.is-prev .deal-slide-image,
|
|
.deal-slide.is-next .deal-slide-image {
|
|
position: absolute;
|
|
top: -56rpx;
|
|
}
|
|
|
|
.deal-slide.is-prev .deal-slide-image {
|
|
right: 10rpx;
|
|
border-top-right-radius: 20rpx;
|
|
border-bottom-right-radius: 20rpx;
|
|
}
|
|
|
|
.deal-slide.is-next .deal-slide-image {
|
|
left: 10rpx;
|
|
border-top-left-radius: 20rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
}
|
|
|
|
.deal-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 62rpx;
|
|
column-gap: 8rpx;
|
|
background: #000000;
|
|
}
|
|
|
|
.indicator-track {
|
|
width: 146rpx;
|
|
height: 8rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, 0.42);
|
|
}
|
|
|
|
.indicator-track.active {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.fixed-action {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
width: 750rpx;
|
|
height: 259rpx;
|
|
background: #150903;
|
|
}
|
|
|
|
.action-image {
|
|
display: block;
|
|
width: 750rpx;
|
|
}
|
|
}
|
|
</style>
|