You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
3.6 KiB
Vue
175 lines
3.6 KiB
Vue
<template>
|
|
<view class="push-message-page">
|
|
<div class="top-div">
|
|
<div></div>
|
|
<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="backToIndex">
|
|
<uni-icons type="arrow-left" size="18" color="#0099ff" style="margin-right: 5px;"></uni-icons>返回
|
|
</tn-button>
|
|
</div>
|
|
<view class="page-content">
|
|
<!-- 推送目标选择 -->
|
|
<view class="section">
|
|
<view class="section-title">推送目标</view>
|
|
<tn-radio-group v-model="pushForm.targetType">
|
|
<tn-radio label="all" value="all">全部</tn-radio>
|
|
<tn-radio label="ios" value="ios">呼号端</tn-radio>
|
|
<tn-radio label="android" value="android">自助机</tn-radio>
|
|
<tn-radio label="specific" value="specific">综合屏</tn-radio>
|
|
</tn-radio-group>
|
|
|
|
<!-- 指定设备输入 -->
|
|
<view class="specific-device">
|
|
<tn-input v-model="pushForm.deviceId" placeholder="请输入设备ID" border></tn-input>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 消息内容编辑 -->
|
|
<view class="section">
|
|
<view class="section-title">推送内容</view>
|
|
<TnInput v-model="pushForm.title" placeholder="请输入推送标题" border class="input-field"></TnInput>
|
|
<TnInput v-model="pushForm.content" placeholder="请输入推送内容" border
|
|
class="textarea-field"></TnInput>
|
|
</view>
|
|
|
|
<!-- 推送按钮 -->
|
|
<view class="button-section">
|
|
<tn-button @click="handlePush" :loading="loading" class="push-button">
|
|
{{ loading ? '推送中...' : '立即推送' }}
|
|
</tn-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from 'vue'
|
|
import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'
|
|
|
|
// 表单数据
|
|
const pushForm = reactive({
|
|
targetType: 'all',
|
|
deviceId: '',
|
|
title: '',
|
|
content: ''
|
|
})
|
|
|
|
const loading = ref(false)
|
|
|
|
// 处理推送
|
|
const handlePush = () => {
|
|
// 表单验证
|
|
if (!pushForm.title.trim()) {
|
|
uni.showToast({
|
|
title: '请输入推送标题',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (!pushForm.content.trim()) {
|
|
uni.showToast({
|
|
title: '请输入推送内容',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (pushForm.targetType === 'specific' && !pushForm.deviceId.trim()) {
|
|
uni.showToast({
|
|
title: '请输入设备ID',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// 确认推送
|
|
uni.showModal({
|
|
title: '确认推送',
|
|
content: '确定要发送这条推送消息吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
sendPushMessage()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 发送推送消息
|
|
const sendPushMessage = () => {
|
|
console.log('pushing...')
|
|
}
|
|
|
|
const backToIndex = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.push-message-page {
|
|
min-height: 100vh;
|
|
background-color: #fff;
|
|
|
|
.top-div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 6vh 20px 1vh 20px;
|
|
}
|
|
|
|
.page-content {
|
|
padding: 10px;
|
|
}
|
|
|
|
.section {
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
// box-shadow: 10px;
|
|
|
|
.section-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #dddddd;
|
|
margin-bottom: 10px;
|
|
border-left: 8rpx solid 10px;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
.specific-device {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.input-field {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.textarea-field {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.button-section {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
|
|
.push-button {
|
|
width: 80%;
|
|
height: 40px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (min-width: 768px) {
|
|
.push-message-page {
|
|
.page-content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style> |