fix(主题装修): 预览弹窗改走主题预览码接口,修复报错不显示内容

This commit is contained in:
From-wh 2026-10-24 17:25:26 +08:00 committed by 吴昊天
parent 7c1f5df5b6
commit c57f3fa811
7 changed files with 124 additions and 20 deletions

View File

@ -107,6 +107,18 @@ class ThemeController extends AuthController
return app('json')->success($data);
}
/**
* 主题预览小程序二维码
* @param int $id 主题ID
* @return \think\Response
*/
public function getRoutineCode($id)
{
$pageType = (string)$this->request->param('page_type', 'home');
$image = $this->services->getRoutineCode((int)$id, $pageType);
return app('json')->success(compact('image'));
}
/**
* 保存主题基本信息
* @param int $id 主题ID

View File

@ -87,6 +87,7 @@ Route::group('theme', function () {
Route::get('plugin_status', [\app\adminapi\controller\diy\ThemeController::class, 'getPluginStatus'])->option(['real_name' => '主题活动插件安装状态']);
Route::get('list', [\app\adminapi\controller\diy\ThemeController::class, 'getThemeList'])->option(['real_name' => '主题列表']);
Route::get('info/:id/[:type]', [\app\adminapi\controller\diy\ThemeController::class, 'getThemeInfo'])->option(['real_name' => '主题详情']);
Route::get('routine_code/:id', [\app\adminapi\controller\diy\ThemeController::class, 'getRoutineCode'])->option(['real_name' => '主题预览小程序码']);
Route::post('save/:id', [\app\adminapi\controller\diy\ThemeController::class, 'saveTheme'])->option(['real_name' => '保存主题']);
Route::post('save_title/:id', [\app\adminapi\controller\diy\ThemeController::class, 'saveThemeTitle'])->option(['real_name' => '保存主题名称和简介']);
Route::post('save_image/:id', [\app\adminapi\controller\diy\ThemeController::class, 'saveThemeImage'])->option(['real_name' => '保存主题的图片']);

View File

@ -13,6 +13,7 @@
namespace app\services\diy;
use app\dao\diy\ThemeDao;
use app\services\other\QrcodeServices;
use crmeb\basic\BaseService;
use crmeb\exceptions\AdminException;
use crmeb\exceptions\ApiException;
@ -699,6 +700,27 @@ class ThemeServices extends BaseService
return $navigation;
}
/**
* 取主题预览小程序二维码
*
* @param int $id 主题ID(eb_theme 表主键)
* @param string $pageType micro 时二维码指向微页面预览页,其余指向首页
* @return string|false
* @throws \think\db\exception\DataNotFoundException
* @throws \think\db\exception\DbException
* @throws \think\db\exception\ModelNotFoundException
*/
public function getRoutineCode(int $id, string $pageType = 'home')
{
$theme = $this->dao->getOne(['id' => $id, 'is_del' => 0]);
if (!$theme) {
throw new AdminException('数据不存在');
}
/** @var QrcodeServices $QrcodeService */
$QrcodeService = app()->make(QrcodeServices::class);
return $QrcodeService->getThemeRoutineQrcodePath($id, $pageType);
}
/**
* 获取微页面列表
*

View File

@ -238,8 +238,6 @@ class QrcodeServices extends BaseService
*/
public function getRoutineQrcodePath(int $id, int $uid, int $type, array $param = [], bool $isSaveAttach = true)
{
/** @var SystemAttachmentServices $systemAttachmentService */
$systemAttachmentService = app()->make(SystemAttachmentServices::class);
$page = '';
$namePath = '';
$data = 'id=' . $id . '&pid=' . $uid;
@ -281,6 +279,39 @@ class QrcodeServices extends BaseService
if (!$page || !$namePath) {
return false;
}
return $this->createRoutineQrcode($data, $page, $namePath, $isSaveAttach);
}
/**
* 主题预览小程序码(scene 携带 theme_id,与移动端 pages/index/index、pages/annex/special/index 的 scene 解析一致)
* @param int $themeId
* @param string $pageType micro 时指向微页面预览页,其余指向首页
* @return false|mixed|string
*/
public function getThemeRoutineQrcodePath(int $themeId, string $pageType = 'home')
{
if ($pageType === 'micro') {
$page = 'pages/annex/special/index';
$namePath = 'theme_micro_' . $themeId . '_routine_index_code.jpg';
} else {
$page = 'pages/index/index';
$namePath = 'theme_' . $themeId . '_routine_index_code.jpg';
}
return $this->createRoutineQrcode('theme_id=' . $themeId, $page, $namePath, false);
}
/**
* 通过事件代理生成小程序码并上传,返回图片地址
* @param string $data scene 参数
* @param string $page 小程序页面路径
* @param string $namePath 上传文件名(同时作为附件缓存键)
* @param bool $isSaveAttach 是否按附件名缓存复用
* @return false|mixed|string
*/
protected function createRoutineQrcode(string $data, string $page, string $namePath, bool $isSaveAttach)
{
/** @var SystemAttachmentServices $systemAttachmentService */
$systemAttachmentService = app()->make(SystemAttachmentServices::class);
try {
if (!$isSaveAttach) {
$imageInfo = "";

View File

@ -284,6 +284,17 @@ export function getRoutineCode(id) {
});
}
/**
* @description 主题预览 -- 小程序二维码(theme/routine_code/:id,page_type=micro 时指向微页面预览页);
*/
export function getThemeRoutineCode(id, pageType) {
return request({
url: `theme/routine_code/${id}`,
method: 'get',
params: pageType ? { page_type: pageType } : {},
});
}
/**
* @description 个人中心-提交信息;
*/

View File

@ -223,7 +223,8 @@
</div>
<div class="acea-row row-column-around row-between-wrapper">
<div class="QRpic">
<img v-lazy="qrcodeImg" />
<img v-if="qrcodeImg" v-lazy="qrcodeImg" />
<span v-else class="qr-empty">小程序二维码无法生成<br />请检查微信小程序配置</span>
</div>
<span class="mt10">小程序二维码</span>
</div>
@ -257,7 +258,7 @@ import {
setDefault,
recovery,
diyUpdateName,
getRoutineCode,
getThemeRoutineCode,
saveThemeImage,
getColorChange,
getDiyComponentStatus,
@ -760,29 +761,31 @@ function preview() {
modal.value = true;
// 弹窗 DOM 首次打开时下一帧才挂载(Element Plus teleport 懒渲染),qrCodeUrl ref 需等 nextTick
nextTick(() => {
creatQrCode(pageId.value, diyStatus.value);
creatQrCode();
});
routineCode(pageId.value);
if (pageId.value) {
routineCode(pageId.value);
} else {
qrcodeImg.value = '';
}
}
//小程序二维码
//小程序二维码(装修编辑器保存于 eb_theme,走主题预览码接口)
function routineCode(id) {
getRoutineCode(id)
getThemeRoutineCode(id, isMicroPage.value ? 'micro' : 'home')
.then((res) => {
qrcodeImg.value = res.data.image;
qrcodeImg.value = res.data.image || '';
})
.catch((err) => {
ElMessage.error(err);
qrcodeImg.value = '';
ElMessage.error(err?.msg || err?.message || '获取小程序预览码失败');
});
}
//生成二维码
function creatQrCode(id, status) {
function creatQrCode() {
qrCodeUrl.value.innerHTML = '';
let url = `${BaseURL}pages/index/index?theme_id=${route.query.id}`;
// if (status) {
// url = `${BaseURL}pages/index/index`;
// } else {
// url = `${BaseURL}pages/annex/special/index?id=${id}`;
// }
// 微页面预览页与首页均通过 theme_id 场景值解析主题(见 uni-app 对应页面 onLoad)
let path = isMicroPage.value ? 'pages/annex/special/index' : 'pages/index/index';
let url = `${BaseURL}${path}?theme_id=${route.query.id}`;
var qrcode = new QRCode(qrCodeUrl.value, {
text: url, // 需要转换为二维码的内容
width: 160,
@ -2409,6 +2412,17 @@ onUnmounted(() => {
width: 100%;
height: 100%;
}
.qr-empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
font-size: 12px;
color: var(--prev-color-text-secondary);
}
}
.contxt {

View File

@ -171,7 +171,8 @@
</div>
<div class="acea-row row-column-around row-between-wrapper">
<div class="QRpic">
<img v-lazy="qrcodeImg" />
<img v-if="qrcodeImg" v-lazy="qrcodeImg" />
<span v-else class="qr-empty">小程序二维码无法生成<br />请检查微信小程序配置</span>
</div>
<span class="mt10">小程序二维码</span>
</div>
@ -372,10 +373,11 @@ function creatQrCode(id) {
function routineCode(id) {
getRoutineCode(id)
.then((res) => {
qrcodeImg.value = res.data.image;
qrcodeImg.value = res.data.image || '';
})
.catch((err) => {
ElMessage.error(err);
qrcodeImg.value = '';
ElMessage.error(err?.msg || err?.message || '获取小程序预览码失败');
});
}
function preview(row) {
@ -593,6 +595,17 @@ function recovery(row) {
width: 100%;
height: 100%;
}
.qr-empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
font-size: 12px;
color: var(--prev-color-text-secondary);
}
}
.left-wrapper {
padding: 20px 0 0 20px;