huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面6

Browse Source
This commit is contained in:
huangzhenbao
2026-02-13 01:13:21 +08:00
parent 1b558e3117
commit da1075b9e9
15 changed files with 1331 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
pages/mall/admin/app/wechat/config.uvue Normal file
View File

@@ -0,0 +1,136 @@
<template>
<view class="admin-page">
<view class="admin-card content-card">
<view class="tabs-row">
<view
v-for="tab in tabs"
:key="tab.key"
class="tab-item"
:class="{ active: currentTab === tab.key }"
@click="currentTab = tab.key"
>
{{ tab.label }}
</view>
</view>
<view v-if="currentTab === 'basic'" class="config-form">
<view class="form-item">
<text class="label">AppID：</text>
<input class="form-input" value="wxa815e4f2ef7bdb0b" />
<text class="tip">微信公众号的AppID</text>
</view>
<view class="form-item">
<text class="label">AppSecret：</text>
<input class="form-input" value="2c9f1ef4cc695c05c4462fef4e081120" />
<text class="tip">微信公众号的AppSecret</text>
</view>
<view class="form-item">
<text class="label">关注二维码：</text>
<view class="upload-box">
<text class="plus">+</text>
</view>
<text class="tip">引导关注公众号显示的公众号关注二维码</text>
</view>
<view class="form-item">
<text class="label">微信校验文件：</text>
<view class="upload-btn">
<text class="icon">⤒</text>
<text>点击上传</text>
</view>
<text class="tip">配置微信网页授权域名时候下载的微信校验文件，在此处上传</text>
</view>
<view class="form-btns">
<button class="btn primary">提交</button>
</view>
</view>
<view v-else class="config-form">
<view class="form-item">
<text class="label">接口地址：</text>
<input class="form-input" readonly value="https://v5.crmeb.net/api/wechat/serve" />
<text class="tip">配置服务器域名使用的接口地址，直接复制输入框内容（此项系统生成，无法修改）</text>
</view>
<view class="form-item">
<text class="label">消息加解密方式：</text>
<radio-group class="radio-group">
<label><radio value="1" checked />明文模式</label>
<label><radio value="2" />兼容模式</label>
<label><radio value="3" />安全模式</label>
</radio-group>
<text class="tip">如需使用安全模式请在管理中心修改，仅限服务号和认证订阅号</text>
</view>
<view class="form-btns">
<button class="btn primary">提交</button>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const currentTab = ref('basic')
const tabs = [
{ key: 'basic', label: '公众号配置' },
{ key: 'server', label: '服务器域名配置' }
]
</script>
<style scoped>
.config-form {
padding: 30px 10%;
}
.form-item {
margin-bottom: 30px;
display: flex;
flex-direction: column;
}
.form-item .label {
font-weight: bold;
margin-bottom: 10px;
color: #303133;
}
.form-input {
border: 1px solid #dcdfe6;
padding: 10px 15px;
border-radius: 4px;
width: 100%;
}
.tip {
font-size: 12px;
color: #909399;
margin-top: 8px;
}
.upload-box {
width: 80px;
height: 80px;
border: 1px dashed #dcdfe6;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
background-color: #fafafa;
}
.upload-btn {
width: 120px;
height: 40px;
border: 1px solid #dcdfe6;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
gap: 5px;
}
.radio-group label {
margin-right: 30px;
}
</style>

129
pages/mall/admin/app/wechat/menu.uvue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<view class="admin-page">
<view class="admin-card header-card">
<text class="title">微信菜单</text>
</view>
<view class="admin-card content-card menu-editor-wrap">
<!-- 微信菜单编辑器的模拟界面 -->
<view class="phone-preview">
<view class="phone-header">
<text class="status-bar">1:21 AM</text>
<view class="nav-bar">
<text class="back">返回</text>
<text class="user-icon">👤</text>
</view>
</view>
<view class="phone-body">
<!-- 菜单展示区域 -->
<view class="menu-display">
<view class="menu-bottom">
<view class="keyboard-icon">⌨️</view>
<view class="menu-items">
<view class="menu-item">手机111</view>
<view class="menu-item active">商品分类</view>
<view class="menu-item">+</view>
</view>
</view>
</view>
</view>
</view>
<view class="menu-settings">
<view class="tip-box">
<text>点击左侧菜单进行编辑</text>
</view>
<!-- 这里将来可以放菜单编辑表单 -->
</view>
</view>
</view>
</template>
<script setup lang="uts">
// 微信菜单页面逻辑
</script>
<style scoped>
.menu-editor-wrap {
display: flex;
flex-direction: row;
padding: 40px;
gap: 40px;
min-height: 600px;
}
.phone-preview {
width: 320px;
height: 560px;
border: 1px solid #ddd;
border-radius: 30px;
overflow: hidden;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
}
.phone-header {
background-color: #333;
color: #fff;
padding: 10px 15px;
}
.nav-bar {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.phone-body {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.menu-bottom {
height: 50px;
background-color: #fff;
border-top: 1px solid #eee;
display: flex;
align-items: center;
}
.keyboard-icon {
width: 50px;
text-align: center;
border-right: 1px solid #eee;
}
.menu-items {
flex: 1;
display: flex;
}
.menu-item {
flex: 1;
text-align: center;
line-height: 50px;
border-right: 1px solid #eee;
font-size: 14px;
}
.menu-item.active {
border: 2px solid #2d8cf0;
background-color: #f0f7ff;
}
.menu-settings {
flex: 1;
background-color: #fff;
}
.tip-box {
padding: 20px;
background-color: #f8f8f9;
border-radius: 4px;
color: #808695;
}
</style>

82
pages/mall/admin/app/wechat/news.uvue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<view class="admin-page">
<view class="admin-card filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">图文搜索：</text>
<input class="filter-input" placeholder="请输入图文名称" />
</view>
<view class="filter-btns">
<button class="btn primary">查询</button>
<button class="btn success">添加图文消息</button>
</view>
</view>
</view>
<view class="admin-card content-card">
<view class="news-list">
<!-- 模拟图文卡片 -->
<view class="news-item">
<image class="cover" src="/static/placeholder.png" mode="aspectFill"></image>
<view class="news-info">
<text class="title">hahah</text>
<text class="id">207</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
// 图文管理逻辑
</script>
<style scoped>
.news-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 10px;
}
.news-item {
width: 240px;
border: 1px solid #ebeef5;
border-radius: 4px;
overflow: hidden;
transition: all 0.3s;
}
.news-item:hover {
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.cover {
width: 100%;
height: 140px;
background-color: #f5f7fa;
}
.news-info {
padding: 10px;
display: flex;
flex-direction: column;
}
.title {
font-size: 16px;
color: #303133;
}
.id {
font-size: 12px;
color: #2d8cf0;
margin-top: 5px;
}
.btn.success {
background-color: #2d8cf0;
color: #fff;
}
</style>

144
pages/mall/admin/app/wechat/reply/follow.uvue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<view class="admin-page">
<view class="admin-card header-card">
<view class="breadcrumb">
<text class="back" @click="goBack">返回</text>
<text class="sep">/</text>
<text class="current">微信关注回复</text>
</view>
</view>
<view class="admin-card content-card reply-editor-wrap">
<view class="phone-preview">
<!-- 简化的手机预览 -->
<view class="phone-header">
<text class="time">9:36</text>
</view>
<view class="phone-body">
<view class="chat-item">
<view class="avatar">🐷</view>
<view class="bubble">{{ replyContent }}</view>
</view>
</view>
</view>
<view class="reply-form">
<view class="form-item">
<text class="label">消息状态：</text>
<radio-group class="radio-group">
<label><radio value="1" checked />启用</label>
<label><radio value="0" />禁用</label>
</radio-group>
</view>
<view class="form-item">
<text class="label">消息类型：</text>
<view class="filter-select">
<text>文字消息</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="form-item">
<text class="label">消息内容：</text>
<textarea v-model="replyContent" class="reply-textarea" placeholder="请输入内容"></textarea>
</view>
<view class="form-btns">
<button class="btn primary">保存并发布</button>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const replyContent = ref('567856875687')
const goBack = () => {
// 返回逻辑
}
</script>
<style scoped>
.reply-editor-wrap {
display: flex;
flex-direction: row;
padding: 40px;
gap: 60px;
}
.phone-preview {
width: 320px;
height: 560px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
}
.phone-header {
height: 60px;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.chat-item {
display: flex;
padding: 15px;
gap: 10px;
}
.avatar {
font-size: 24px;
}
.bubble {
background-color: #fff;
padding: 10px;
border-radius: 4px;
position: relative;
max-width: 200px;
word-break: break-all;
}
.reply-form {
flex: 1;
}
.form-item {
margin-bottom: 25px;
display: flex;
align-items: flex-start;
}
.form-item .label {
width: 100px;
padding-top: 5px;
color: #606266;
}
.radio-group label {
margin-right: 20px;
}
.reply-textarea {
flex: 1;
height: 120px;
border: 1px solid #dcdfe6;
padding: 10px;
border-radius: 4px;
}
.btn.primary {
margin-left: 100px;
background-color: #2d8cf0;
color: #fff;
}
</style>

63
pages/mall/admin/app/wechat/reply/invalid.uvue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<view class="admin-page">
<view class="admin-card header-card">
<view class="breadcrumb">
<text class="back">返回</text>
<text class="sep">/</text>
<text class="current">无效关键词回复</text>
</view>
</view>
<view class="admin-card content-card reply-editor-wrap">
<view class="phone-preview">
<view class="phone-header">
<text class="time">9:36</text>
</view>
<view class="phone-body">
<view class="chat-item">
<view class="avatar">🐷</view>
<view class="bubble empty"></view>
</view>
</view>
</view>
<view class="reply-form">
<view class="form-item">
<text class="label">消息状态：</text>
<radio-group class="radio-group">
<label><radio value="1" />启用</label>
<label><radio value="0" checked />禁用</label>
</radio-group>
</view>
<view class="form-item">
<text class="label">消息类型：</text>
<view class="filter-select">
<text class="select-placeholder">请选择规则状态</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="form-btns">
<button class="btn primary">保存并发布</button>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
// 无效关键词回复逻辑
</script>
<style scoped>
.bubble.empty {
width: 40px;
height: 40px;
background-color: #fff;
}
.select-placeholder {
color: #c0c4cc;
}
</style>

57
pages/mall/admin/app/wechat/reply/keyword.uvue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<view class="admin-page">
<view class="admin-card filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">回复类型：</text>
<view class="filter-select">
<text class="select-placeholder">请选择</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="filter-item">
<text class="label">关键字：</text>
<input class="filter-input" placeholder="请输入关键字" />
</view>
<view class="filter-btns">
<button class="btn primary">查询</button>
</view>
</view>
</view>
<view class="admin-card content-card">
<view class="table-toolbar">
<button class="btn primary">添加关键字</button>
</view>
<view class="admin-table">
<view class="table-header">
<text class="cell id">ID</text>
<text class="cell">关键字</text>
<text class="cell">回复类型</text>
<text class="cell">是否显示</text>
<text class="cell actions">操作</text>
</view>
<view class="table-empty">
<text>暂无数据</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
// 关键字回复逻辑
</script>
<style scoped>
.table-toolbar {
margin-bottom: 20px;
}
.table-empty {
padding: 100px;
text-align: center;
color: #909399;
}
</style>