crmeb-mp/pages/debug_union/index.vue

<template>
	<view class="debug-page">
		<view class="card">
			<view class="title">UnionID 调试 · 获取 wx.login code</view>
			<view class="desc">
				点下方按钮执行 uni.login()，拿到 code 后：<br />
				① 页面直接显示 code（长按可复制）<br />
				② 同时 console.log 输出，方便开发者工具里复制<br />
				③ 可选：直接调本地 code2session 接口
			</view>

			<button class="btn" type="primary" @click="getCode">1. 获取 code</button>
			<button class="btn" type="warn" @click="copyCode" :disabled="!code">2. 复制 code</button>

			<view v-if="code" class="code-box">
				<view class="label">code（5 分钟有效，一次性）：</view>
				<view class="code" @longpress="copyCode">{{ code }}</view>
			</view>

			<view class="section">
				<view class="label">可选：本地 code2session 接口地址（内网穿透公网地址）</view>
				<input class="input" v-model="endpoint" placeholder="http://你的公网地址:8090/api/union/code2session" />
				<button class="btn" type="default" @click="sendToLocal" :disabled="!code">3. 发送到本地接口</button>
			</view>

			<view v-if="result" class="result">
				<view class="label">接口返回：</view>
				<view class="code">{{ result }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				endpoint: '',
				result: ''
			}
		},
		onLoad() {},
		methods: {
			getCode() {
				this.code = ''
				this.result = ''
				uni.showLoading({
					title: '获取中'
				})
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					timeout: 10000,
					success: (res) => {
						uni.hideLoading()
						this.code = res.code || ''
						console.log('[debug-union] MY_CODE=', this.code)
						uni.showToast({
							title: '已获取 code',
							icon: 'success'
						})
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('[debug-union] wx.login fail', err)
						uni.showToast({
							title: '获取失败',
							icon: 'none'
						})
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.hideLoading()
				uni.showToast({
					title: '请在微信小程序环境运行',
					icon: 'none'
				})
				// #endif
			},
			copyCode() {
				if (!this.code) return
				uni.setClipboardData({
					data: this.code,
					success: () => {
						uni.showToast({
							title: '已复制',
							icon: 'success'
						})
					}
				})
			},
			sendToLocal() {
				if (!this.code) {
					uni.showToast({
						title: '请先获取 code',
						icon: 'none'
					})
					return
				}
				if (!this.endpoint) {
					uni.showToast({
						title: '请填接口地址',
						icon: 'none'
					})
					return
				}
				uni.request({
					url: this.endpoint,
					method: 'POST',
					data: {
						js_code: this.code
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						this.result = JSON.stringify(res.data, null, 2)
						console.log('[debug-union] response=', this.result)
					},
					fail: (err) => {
						this.result = '请求失败: ' + JSON.stringify(err)
						console.error('[debug-union] request fail', err)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.debug-page {
		padding: 24rpx;
		background: #f7f8fa;
		min-height: 100vh;
	}
	.card {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
	}
	.title {
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 16rpx;
	}
	.desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.7;
		margin-bottom: 24rpx;
	}
	.btn {
		margin-bottom: 20rpx;
	}
	.section {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}
	.label {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 12rpx;
	}
	.input {
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 16rpx;
		font-size: 26rpx;
		margin-bottom: 16rpx;
		width: 100%;
		box-sizing: border-box;
	}
	.code-box {
		margin-top: 20rpx;
		background: #f0f5ff;
		border-radius: 12rpx;
		padding: 20rpx;
	}
	.code {
		font-size: 24rpx;
		word-break: break-all;
		color: #1a1a1a;
		user-select: text;
	}
	.result {
		margin-top: 20rpx;
		background: #fffbe6;
		border-radius: 12rpx;
		padding: 20rpx;
	}
</style>