|
|
@@ -1,270 +1,288 @@ |
|
|
|
<template> |
|
|
|
<navBar title="产品详情"></navBar> |
|
|
|
<navBgCar></navBgCar> |
|
|
|
<view class="content-wrap"> |
|
|
|
<view class="ul-item"> |
|
|
|
<image |
|
|
|
style="width: 100%; height: 170rpx; background-color: #eeeeee" |
|
|
|
:src="`${$imgUrl}applyCard/product-bg.png`" |
|
|
|
></image> |
|
|
|
<view class="item-value"> |
|
|
|
<image class="icon-tip" :src="`${$imgUrl}applyCard/wechat.png`"></image> |
|
|
|
<view class="content"> |
|
|
|
<view class="title"> 微信车主服务 </view> |
|
|
|
<view style="margin-top: 15rpx" class="tip"> 先通行后付费! </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="value-wrapper"> |
|
|
|
<view class="flex"> |
|
|
|
<view class="title"> 产品金额 </view> |
|
|
|
<view class="value"> |
|
|
|
{{ "¥" + state.clientFee }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex"> |
|
|
|
<view class="title"> 加购权益 </view> |
|
|
|
<view class="value"> ¥0.00 </view> |
|
|
|
</view> |
|
|
|
<view class="flex"> |
|
|
|
<view class="title"> 运费 </view> |
|
|
|
<view class="value"> ¥0.00 </view> |
|
|
|
</view> |
|
|
|
<view class="flex"> |
|
|
|
<view class="title"> 优惠券 </view> |
|
|
|
<view class="value"> 暂无优惠券 </view> |
|
|
|
</view> |
|
|
|
<view class="flex"> |
|
|
|
<view class="title"> 积分兑换 </view> |
|
|
|
<view class="value"> 暂无积分 </view> |
|
|
|
</view> |
|
|
|
<view class="flex"> |
|
|
|
<view class="title"> 实付款 </view> |
|
|
|
<view class="money"> |
|
|
|
{{ "¥" + state.clientFee }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="action"> |
|
|
|
<button type="default" class="button" @click="savaHandle()"> |
|
|
|
{{ "确认办理:¥" + state.clientFee }} |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { onLoad, onShow } from "@dcloudio/uni-app"; |
|
|
|
import { reactive } from "vue"; |
|
|
|
import { etcQueryProduct } from "@/utils/network/api.js"; |
|
|
|
import { request } from "@/utils/network/request.js"; |
|
|
|
|
|
|
|
import { stringToJson } from "@/utils/network/encryption"; |
|
|
|
import { fileURL } from "@/datas/fileURL.js"; |
|
|
|
import navBgCar from "./components/nav-bg-car5"; |
|
|
|
import navBar from "../components/nav-bar/nav-bar2.vue"; |
|
|
|
|
|
|
|
import { getItem, StorageKeys } from "@/utils/storage.ts"; |
|
|
|
import { |
|
|
|
checkOrderStatus, |
|
|
|
orderPay, |
|
|
|
wechatAppID, |
|
|
|
wechatPayConfigId, |
|
|
|
wechatSecret, |
|
|
|
} from "@/utils/network/api"; |
|
|
|
import { confirm, msg } from "@/utils/utils"; |
|
|
|
const imgURL = `${fileURL}image/`; |
|
|
|
|
|
|
|
const savaHandle = () => { |
|
|
|
wxPayment(); |
|
|
|
}; |
|
|
|
|
|
|
|
//获取微信小程序openid |
|
|
|
const getOpenID = () => { |
|
|
|
uni.login({ |
|
|
|
provider: "weixin", |
|
|
|
success: function (e) { |
|
|
|
wx.request({ |
|
|
|
url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`, |
|
|
|
success: (res: any) => { |
|
|
|
state.openid = res.data.openid; |
|
|
|
// console.log(state.openid); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
//掉起微信支付 |
|
|
|
const wxPayment = () => { |
|
|
|
// #ifdef MP-WEIXIN |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
openid: state.openid, |
|
|
|
productId: state.id, |
|
|
|
orderId: state.orderId, |
|
|
|
payConfigId: wechatPayConfigId, |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
request(orderPay, options).then((res) => { |
|
|
|
const data = stringToJson(res.bizContent); |
|
|
|
uni.requestPayment({ |
|
|
|
provider: "wxpay", |
|
|
|
orderInfo: "", |
|
|
|
timeStamp: data.timestamp, |
|
|
|
nonceStr: data.noncestr, |
|
|
|
package: data.wxPackage ?? "", |
|
|
|
signType: data.signType, |
|
|
|
paySign: data.sign, |
|
|
|
success: function (e) { |
|
|
|
console.log("支付成功", e); |
|
|
|
checkOrder(); |
|
|
|
}, |
|
|
|
fail: function (err) { |
|
|
|
confirm(err, () => {}, "支付失败", false); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
// #endif |
|
|
|
}; |
|
|
|
|
|
|
|
//支付成功改变订单状态 |
|
|
|
const checkOrder = () => { |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
orderId: state.orderId, |
|
|
|
payConfigId: wechatPayConfigId, |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
|
|
|
|
request(checkOrderStatus, options).then((res) => { |
|
|
|
msg("支付成功!"); |
|
|
|
|
|
|
|
var pages = getCurrentPages().length; |
|
|
|
uni.$emit("refreshOrder"); |
|
|
|
uni.switchTab({ |
|
|
|
url:"/pages/order/order" |
|
|
|
}) |
|
|
|
}); |
|
|
|
}; |
|
|
|
onLoad((option: any) => { |
|
|
|
state.orderId = option.orderId; |
|
|
|
state.clientFee = option.clientFee / 100; |
|
|
|
state.id = option.id; |
|
|
|
getOpenID(); |
|
|
|
}); |
|
|
|
|
|
|
|
const state = reactive({ |
|
|
|
openid: "", |
|
|
|
orderId: "", |
|
|
|
clientFee: undefined, |
|
|
|
id: "", |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.action { |
|
|
|
margin-top: 40rpx; |
|
|
|
padding-left: 20rpx; |
|
|
|
padding-right: 20rpx; |
|
|
|
padding-bottom: 30rpx; |
|
|
|
|
|
|
|
.button { |
|
|
|
height: 80rpx; |
|
|
|
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%); |
|
|
|
border-radius: 40rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 80rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.value-wrapper { |
|
|
|
margin-top: 40rpx; |
|
|
|
padding: 0rpx 30rpx; |
|
|
|
|
|
|
|
.flex { |
|
|
|
padding: 20rpx 0rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 28rpx; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #777777; |
|
|
|
line-height: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
font-size: 28rpx; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.money { |
|
|
|
font-size: 36rpx; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #00b38b; |
|
|
|
line-height: 36rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content-wrap { |
|
|
|
position: relative; |
|
|
|
margin-top: -50rpx; |
|
|
|
padding: 0rpx 30rpx; |
|
|
|
|
|
|
|
.ul-item { |
|
|
|
padding: 5px 20rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.item-value { |
|
|
|
padding: 20rpx; |
|
|
|
position: absolute; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
.content { |
|
|
|
.title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
.tip { |
|
|
|
font-size: 24rpx; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.icon-tip { |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
margin-left: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
<template>
|
|
|
|
<navBar title="产品详情"></navBar>
|
|
|
|
<navBgCar></navBgCar>
|
|
|
|
<view class="content-wrap">
|
|
|
|
<view class="ul-item">
|
|
|
|
<image style="width: 100%; height: 170rpx; background-color: #eeeeee"
|
|
|
|
:src="`${$imgUrl}applyCard/product-bg.png`"></image>
|
|
|
|
<view class="item-value">
|
|
|
|
<image class="icon-tip" :src="`${$imgUrl}applyCard/wechat.png`"></image>
|
|
|
|
<view class="content">
|
|
|
|
<view class="title"> 微信车主服务 </view>
|
|
|
|
<view style="margin-top: 15rpx" class="tip"> 先通行后付费! </view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="value-wrapper">
|
|
|
|
<view class="flex">
|
|
|
|
<view class="title"> 产品金额 </view>
|
|
|
|
<view class="value">
|
|
|
|
{{ "¥" + state.clientFee }}
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="flex">
|
|
|
|
<view class="title"> 加购权益 </view>
|
|
|
|
<view class="value"> ¥0.00 </view>
|
|
|
|
</view>
|
|
|
|
<view class="flex">
|
|
|
|
<view class="title"> 运费 </view>
|
|
|
|
<view class="value"> ¥0.00 </view>
|
|
|
|
</view>
|
|
|
|
<view class="flex">
|
|
|
|
<view class="title"> 优惠券 </view>
|
|
|
|
<view class="value"> 暂无优惠券 </view>
|
|
|
|
</view>
|
|
|
|
<view class="flex">
|
|
|
|
<view class="title"> 积分兑换 </view>
|
|
|
|
<view class="value"> 暂无积分 </view>
|
|
|
|
</view>
|
|
|
|
<view class="flex">
|
|
|
|
<view class="title"> 实付款 </view>
|
|
|
|
<view class="money">
|
|
|
|
{{ "¥" + state.clientFee }}
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="action">
|
|
|
|
<button type="default" class="button" @click="savaHandle()">
|
|
|
|
{{ "确认办理:¥" + state.clientFee }}
|
|
|
|
</button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
import {
|
|
|
|
onLoad,
|
|
|
|
onShow
|
|
|
|
} from "@dcloudio/uni-app";
|
|
|
|
import {
|
|
|
|
reactive
|
|
|
|
} from "vue";
|
|
|
|
import {
|
|
|
|
etcQueryProduct
|
|
|
|
} from "@/utils/network/api.js";
|
|
|
|
import {
|
|
|
|
request
|
|
|
|
} from "@/utils/network/request.js";
|
|
|
|
|
|
|
|
import {
|
|
|
|
stringToJson
|
|
|
|
} from "@/utils/network/encryption";
|
|
|
|
import {
|
|
|
|
fileURL
|
|
|
|
} from "@/datas/fileURL.js";
|
|
|
|
import navBgCar from "./components/nav-bg-car5";
|
|
|
|
import navBar from "../components/nav-bar/nav-bar2.vue";
|
|
|
|
|
|
|
|
import {
|
|
|
|
getItem,
|
|
|
|
StorageKeys
|
|
|
|
} from "@/utils/storage.ts";
|
|
|
|
import {
|
|
|
|
checkOrderStatus,
|
|
|
|
orderPay,
|
|
|
|
wechatAppID,
|
|
|
|
wechatPayConfigId,
|
|
|
|
wechatSecret,
|
|
|
|
} from "@/utils/network/api";
|
|
|
|
import {
|
|
|
|
confirm,
|
|
|
|
msg
|
|
|
|
} from "@/utils/utils";
|
|
|
|
const imgURL = `${fileURL}image/`;
|
|
|
|
|
|
|
|
const savaHandle = () => {
|
|
|
|
wxPayment();
|
|
|
|
};
|
|
|
|
|
|
|
|
//获取微信小程序openid
|
|
|
|
const getOpenID = () => {
|
|
|
|
uni.login({
|
|
|
|
provider: "weixin",
|
|
|
|
success: function(e) {
|
|
|
|
wx.request({
|
|
|
|
url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`,
|
|
|
|
success: (res: any) => {
|
|
|
|
state.openid = res.data.openid;
|
|
|
|
// console.log(state.openid);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
//掉起微信支付
|
|
|
|
const wxPayment = () => {
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
const options = {
|
|
|
|
type: 2,
|
|
|
|
data: {
|
|
|
|
openid: state.openid,
|
|
|
|
productId: state.id,
|
|
|
|
orderId: state.orderId,
|
|
|
|
payConfigId: wechatPayConfigId,
|
|
|
|
},
|
|
|
|
method: "POST",
|
|
|
|
showLoading: true,
|
|
|
|
};
|
|
|
|
request(orderPay, options).then((res) => {
|
|
|
|
const data = stringToJson(res.bizContent);
|
|
|
|
uni.requestPayment({
|
|
|
|
provider: "wxpay",
|
|
|
|
orderInfo: "",
|
|
|
|
timeStamp: data.timestamp,
|
|
|
|
nonceStr: data.noncestr,
|
|
|
|
package: data.wxPackage ?? "",
|
|
|
|
signType: data.signType,
|
|
|
|
paySign: data.sign,
|
|
|
|
success: function(e) {
|
|
|
|
console.log("支付成功", e);
|
|
|
|
checkOrder();
|
|
|
|
},
|
|
|
|
fail: function(err) {
|
|
|
|
checkOrder();
|
|
|
|
confirm(err, () => {}, "支付失败", false);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// #endif
|
|
|
|
};
|
|
|
|
|
|
|
|
//支付成功改变订单状态
|
|
|
|
const checkOrder = () => {
|
|
|
|
const options = {
|
|
|
|
type: 2,
|
|
|
|
data: {
|
|
|
|
orderId: state.orderId,
|
|
|
|
payConfigId: wechatPayConfigId,
|
|
|
|
},
|
|
|
|
method: "POST",
|
|
|
|
showLoading: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
request(checkOrderStatus, options).then((res) => {
|
|
|
|
msg("支付成功!");
|
|
|
|
|
|
|
|
var pages = getCurrentPages().length;
|
|
|
|
uni.$emit("refreshOrder");
|
|
|
|
uni.switchTab({
|
|
|
|
url: "/pages/order/order"
|
|
|
|
})
|
|
|
|
});
|
|
|
|
};
|
|
|
|
onLoad((option: any) => {
|
|
|
|
state.orderId = option.orderId;
|
|
|
|
state.clientFee = option.clientFee / 100;
|
|
|
|
state.id = option.id;
|
|
|
|
getOpenID();
|
|
|
|
});
|
|
|
|
|
|
|
|
const state = reactive({
|
|
|
|
openid: "",
|
|
|
|
orderId: "",
|
|
|
|
clientFee: undefined,
|
|
|
|
id: "",
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.action {
|
|
|
|
margin-top: 40rpx;
|
|
|
|
padding-left: 20rpx;
|
|
|
|
padding-right: 20rpx;
|
|
|
|
padding-bottom: 30rpx;
|
|
|
|
|
|
|
|
.button {
|
|
|
|
height: 80rpx;
|
|
|
|
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
|
|
|
|
border-radius: 40rpx;
|
|
|
|
font-size: 32rpx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #ffffff;
|
|
|
|
line-height: 80rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.value-wrapper {
|
|
|
|
margin-top: 40rpx;
|
|
|
|
padding: 0rpx 30rpx;
|
|
|
|
|
|
|
|
.flex {
|
|
|
|
padding: 20rpx 0rpx;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
font-size: 28rpx;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #777777;
|
|
|
|
line-height: 28rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.value {
|
|
|
|
font-size: 28rpx;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #333333;
|
|
|
|
line-height: 28rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.money {
|
|
|
|
font-size: 36rpx;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #00b38b;
|
|
|
|
line-height: 36rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.content-wrap {
|
|
|
|
position: relative;
|
|
|
|
margin-top: -50rpx;
|
|
|
|
padding: 0rpx 30rpx;
|
|
|
|
|
|
|
|
.ul-item {
|
|
|
|
padding: 5px 20rpx;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.item-value {
|
|
|
|
padding: 20rpx;
|
|
|
|
position: absolute;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
.content {
|
|
|
|
.title {
|
|
|
|
font-size: 32rpx;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tip {
|
|
|
|
font-size: 24rpx;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-tip {
|
|
|
|
width: 100rpx;
|
|
|
|
height: 100rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
|
|
margin-left: 40rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |