239 lines
7.5 KiB
Plaintext
239 lines
7.5 KiB
Plaintext
<template>
|
|
<view class="admin-page message-management">
|
|
<view class="admin-sections">
|
|
<view class="admin-card">
|
|
<!-- 标签页 -->
|
|
<view class="tabs-container">
|
|
<view class="tabs-bar">
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: currentTab === 0 }"
|
|
@click="currentTab = 0"
|
|
>
|
|
<text class="tab-text">会员通知</text>
|
|
<view class="tab-line" v-if="currentTab === 0"></view>
|
|
</view>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: currentTab === 1 }"
|
|
@click="currentTab = 1"
|
|
>
|
|
<text class="tab-text">平台通知</text>
|
|
<view class="tab-line" v-if="currentTab === 1"></view>
|
|
</view>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: currentTab === 2 }"
|
|
@click="currentTab = 2"
|
|
>
|
|
<text class="tab-text">自定义通知</text>
|
|
<view class="tab-line" v-if="currentTab === 2"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 顶部操作 -->
|
|
<view class="top-actions">
|
|
<button class="btn btn-primary" @click="syncMiniProgram">同步小程序订阅消息</button>
|
|
<button class="btn btn-primary ml-10" @click="syncWechat">同步微信模板消息</button>
|
|
</view>
|
|
|
|
<!-- 提示信息 -->
|
|
<view class="alert-info">
|
|
<text class="alert-title">小程序订阅消息</text>
|
|
<text class="alert-desc">登录微信小程序后台，基本设置，服务类目增加《生活服务 > 百货/超市/便利店》（否则同步小程序订阅消息会报错）</text>
|
|
<text class="alert-desc">同步小程序订阅消息，是在小程序后台未添加订阅消息模板的前提下使用的，会新增一个模板消息并把信息同步过来，并非本项目数据库。</text>
|
|
</view>
|
|
|
|
<!-- 数据表格 -->
|
|
<view class="table-container">
|
|
<view class="table-header">
|
|
<view class="table-cell" style="flex: 0 0 60px;">ID</view>
|
|
<view class="table-cell" style="flex: 2;">通知类型</view>
|
|
<view class="table-cell" style="flex: 3;">通知场景说明</view>
|
|
<view class="table-cell" style="flex: 1;">站内信</view>
|
|
<view class="table-cell" style="flex: 1.5;">公众号模板</view>
|
|
<view class="table-cell" style="flex: 1;">发送短信</view>
|
|
<view class="table-cell" style="flex: 1.5;">小程序订阅</view>
|
|
<view class="table-cell action-cell" style="flex: 1;">操作</view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view class="table-row" v-for="(item, index) in messageList" :key="index">
|
|
<view class="table-cell" style="flex: 0 0 60px;">{{ item.id }}</view>
|
|
<view class="table-cell" style="flex: 2;">{{ item.type }}</view>
|
|
<view class="table-cell" style="flex: 3;">{{ item.desc }}</view>
|
|
<view class="table-cell" style="flex: 1;">
|
|
<switch color="#1890ff" :checked="item.is_msg" style="transform: scale(0.7);" />
|
|
</view>
|
|
<view class="table-cell" style="flex: 1.5;">
|
|
<switch color="#1890ff" :checked="item.is_wechat" style="transform: scale(0.7);" />
|
|
</view>
|
|
<view class="table-cell" style="flex: 1;">
|
|
<switch color="#1890ff" :checked="item.is_sms" style="transform: scale(0.7);" />
|
|
</view>
|
|
<view class="table-cell" style="flex: 1.5;">
|
|
<switch color="#1890ff" :checked="item.is_mini" style="transform: scale(0.7);" />
|
|
</view>
|
|
<view class="table-cell action-cell" style="flex: 1;">
|
|
<text class="action-link" @click="handleSet(item)">设置</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view></template>
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
const currentTab = ref(0)
|
|
const messageList = ref([
|
|
{ id: 1, type: '短信验证码', desc: '短信验证码', is_msg: false, is_wechat: false, is_sms: true, is_mini: false },
|
|
{ id: 2, type: '绑定推广关系消息', desc: '绑定推广关系消息', is_msg: true, is_wechat: false, is_sms: false, is_mini: false },
|
|
{ id: 3, type: '支付成功提醒消息', desc: '支付成功提醒消息', is_msg: true, is_wechat: true, is_sms: true, is_mini: true },
|
|
{ id: 4, type: '发货提醒消息', desc: '发货提醒消息', is_msg: true, is_wechat: true, is_sms: true, is_mini: true },
|
|
{ id: 5, type: '送货提醒消息', desc: '送货提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
|
|
{ id: 6, type: '确认收货提醒消息', desc: '确认收货提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
|
|
{ id: 7, type: '退款成功提醒消息', desc: '退款成功提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
|
|
{ id: 8, type: '退款失败提醒消息', desc: '退款失败提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
|
|
{ id: 9, type: '改价提醒消息', desc: '改价提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true },
|
|
{ id: 10, type: '未付款提醒消息', desc: '未付款提醒消息', is_msg: true, is_wechat: true, is_sms: false, is_mini: true }
|
|
])
|
|
|
|
function syncMiniProgram() {
|
|
uni.showToast({ title: '同步小程序订阅消息', icon: 'none' })
|
|
}
|
|
|
|
function syncWechat() {
|
|
uni.showToast({ title: '同步微信模板消息', icon: 'none' })
|
|
}
|
|
|
|
function handleSet(item: any) {
|
|
uni.showToast({ title: '设置: ' + item.type, icon: 'none' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.message-management {
|
|
padding: 20px;
|
|
background-color: #f5f7f9;
|
|
}
|
|
|
|
.admin-card {
|
|
background-color: #fff;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tabs-container {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tabs-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tab-item {
|
|
padding: 12px 20px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #1890ff;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tab-line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: #1890ff;
|
|
}
|
|
|
|
.top-actions {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.btn {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 14px;
|
|
padding: 0 15px;
|
|
border-radius: 4px;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #1890ff;
|
|
color: #fff;
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: #fff7e6;
|
|
border: 1px solid #ffd591;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.alert-title {
|
|
color: #fa8c16;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.alert-desc {
|
|
color: #666;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.table-container {
|
|
border: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #f8f8f9;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding: 12px 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-cell {
|
|
font-size: 13px;
|
|
color: #666;
|
|
padding: 0 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.action-link {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ml-10 {
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
|