141 lines
3.7 KiB
Vue
141 lines
3.7 KiB
Vue
<template>
|
|
<view class="bg-page min-h-screen px-4 pt-6 pb-safe">
|
|
<view class="rounded-16px bg-white px-5 py-6">
|
|
<text class="mb-6 block text-center text-18px text-[#212121] font-700">
|
|
我的分销码
|
|
</text>
|
|
|
|
<view v-if="loading && !distributionCode" class="min-h-64 center">
|
|
<text class="text-14px text-[#999]">
|
|
正在加载分销码...
|
|
</text>
|
|
</view>
|
|
|
|
<view v-else-if="errorMessage" class="min-h-64 center flex-col">
|
|
<text class="text-center text-14px text-[#7a8590]">
|
|
{{ errorMessage }}
|
|
</text>
|
|
<button class="bg-brand mt-4 rounded-8px px-6 py-2 text-14px text-white" @click="loadDistributionCode">
|
|
重试
|
|
</button>
|
|
</view>
|
|
|
|
<view v-else-if="distributionCode" class="flex flex-col items-center">
|
|
<view class="rounded-12px bg-white p-2 shadow-sm">
|
|
<canvas
|
|
id="distribution-code-qr"
|
|
canvas-id="distribution-code-qr"
|
|
class="qr-canvas"
|
|
style="width: 240px; height: 240px;"
|
|
/>
|
|
</view>
|
|
<text class="mt-4 text-13px text-[#7a8590]">
|
|
扫描二维码进入代理注册
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import qrcodeGenerator from 'qrcode-generator';
|
|
import { nextTick, onMounted, ref } from 'vue';
|
|
import { getUserInfo } from '@/api/auth';
|
|
import { getShopDetail } from '@/api/shop';
|
|
|
|
const QR_CANVAS_ID = 'distribution-code-qr';
|
|
const QR_CANVAS_SIZE = 240;
|
|
const QR_QUIET_ZONE = 4;
|
|
|
|
const loading = ref(true);
|
|
const distributionCode = ref('');
|
|
const errorMessage = ref('');
|
|
|
|
function getRegistrationUrl(code: string) {
|
|
return `https://cmp-admin.boss160.cn/agent-registration#/agent-registration?distribution_code=${encodeURIComponent(code)}`;
|
|
}
|
|
|
|
function drawQrCode(value: string) {
|
|
const qrCode = qrcodeGenerator(0, 'M');
|
|
qrCode.addData(value);
|
|
qrCode.make();
|
|
|
|
const moduleCount = qrCode.getModuleCount();
|
|
const moduleSize = QR_CANVAS_SIZE / (moduleCount + QR_QUIET_ZONE * 2);
|
|
const context = uni.createCanvasContext(QR_CANVAS_ID);
|
|
|
|
context.setFillStyle('#ffffff');
|
|
context.fillRect(0, 0, QR_CANVAS_SIZE, QR_CANVAS_SIZE);
|
|
context.setFillStyle('#1F2937');
|
|
|
|
for (let row = 0; row < moduleCount; row += 1) {
|
|
for (let column = 0; column < moduleCount; column += 1) {
|
|
if (qrCode.isDark(row, column)) {
|
|
context.fillRect(
|
|
(column + QR_QUIET_ZONE) * moduleSize,
|
|
(row + QR_QUIET_ZONE) * moduleSize,
|
|
moduleSize + 0.25,
|
|
moduleSize + 0.25,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
context.draw(false);
|
|
}
|
|
|
|
async function loadDistributionCode() {
|
|
loading.value = true;
|
|
distributionCode.value = '';
|
|
errorMessage.value = '';
|
|
|
|
try {
|
|
const user = await getUserInfo();
|
|
if (user.user_type !== 3) {
|
|
errorMessage.value = '当前账号无权查看分销码';
|
|
return;
|
|
}
|
|
|
|
if (!user.shop_id) {
|
|
errorMessage.value = '未获取到当前店铺信息，暂无法查看分销码';
|
|
return;
|
|
}
|
|
|
|
const shop = await getShopDetail(user.shop_id);
|
|
const code = shop.distribution_code?.trim();
|
|
if (!code) {
|
|
errorMessage.value = '当前店铺暂无可用的分销码';
|
|
return;
|
|
}
|
|
|
|
distributionCode.value = code;
|
|
await nextTick();
|
|
drawQrCode(getRegistrationUrl(code));
|
|
}
|
|
catch (error) {
|
|
console.error('加载分销码失败:', error);
|
|
distributionCode.value = '';
|
|
errorMessage.value = '分销码加载失败，请稍后重试';
|
|
}
|
|
finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
void loadDistributionCode();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.qr-canvas {
|
|
display: block;
|
|
}
|
|
</style>
|