zhywpt-sp/subpackage/after-sale/account-change/product-detail.vue

<template>
	<image style="
      margin-top: 20rpx;
      width: 100%;
      height: 240rpx;
      background-color: #eeeeee;
    " :src="`${$imgUrl}applyCard/car-service.png`" mode="aspectFill"></image>
	<view class="title"> 微信车主服务 </view>
	<view class="value">
		<view class="content_1">
			微信车主服务是微信支付为车主用户提供的安全便捷的智慧服务
		</view>
		<view class="content_2">
			本次将为安徽高灯微行科技有限公司开启免密支付服务，后续相关的费用将通过微信车主服务从你的微信支付账户扣除
		</view>
	</view>
	<view class="action">
		<button type="default" class="button" @click="savaHandle()">
			开通服务
		</button>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { reactive } from "vue";
	import { getOpenidApi } 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 { getItem, StorageKeys } from "@/utils/storage.ts";
	import {
		checkOrderStatus,
		wechatAppID,
		wechatSecret,
	} from "@/utils/network/api";
	const imgURL = `${fileURL}image/`;

	const savaHandle = () => {

	};
	const state = reactive({
		openid: "",
		orderId: "",
	});
	onLoad((option : any) => {
		getOpenID();
		state.orderId = option.orderId;
	});
	//获取微信小程序openid
	const getOpenID = () => {
		uni.login({
			provider: "weixin",
			success: function (e) {
				getOpenid(e.code);
			},
		});
	};
	const getOpenid = (code) => {
		const options = {
			type: 2,
			data: {
				"jsCode": code
			},
			method: "POST",
			showLoading: true,
		};
		// #ifdef MP-WEIXIN
		request(getOpenidApi, options).then((res) => {
			const result = stringToJson(res.bizContent);
			console.log("获取微信小程序openid", result);
			const openidData = stringToJson(result.data);
			state.openid = openidData.openid
		});
		// #endif
	}
</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;
		}
	}

	.title {
		text-align: center;
		margin-top: 15rpx;
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
	}

	.value {
		padding: 0rpx 60rpx;
	}

	.content_1 {
		margin-top: 60rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 58rpx;
	}

	.content_2 {
		margin-top: 50rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 58rpx;
	}
</style>