初始化项目
This commit is contained in:
43
attractor-ui/pages/common/textview/index.vue
Normal file
43
attractor-ui/pages/common/textview/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-card class="view-title" :title="title">
|
||||
<text class="uni-body view-content">{{ content }}</text>
|
||||
</uni-card>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.title = options.title
|
||||
this.content = options.content
|
||||
uni.setNavigationBarTitle({
|
||||
title: options.title
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.view-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.view-content {
|
||||
font-size: 26rpx;
|
||||
padding: 12px 5px 0;
|
||||
color: #333;
|
||||
line-height: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
34
attractor-ui/pages/common/webview/index.vue
Normal file
34
attractor-ui/pages/common/webview/index.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<view v-if="params.url">
|
||||
<web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
params: {},
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: "#FF3333"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
src: {
|
||||
type: [String],
|
||||
default: null
|
||||
}
|
||||
},
|
||||
onLoad(event) {
|
||||
this.params = event
|
||||
if (event.title) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: event.title
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
1252
attractor-ui/pages/devices/attractor/attractor.vue
Normal file
1252
attractor-ui/pages/devices/attractor/attractor.vue
Normal file
File diff suppressed because it is too large
Load Diff
276
attractor-ui/pages/devices/detail/detail.vue
Normal file
276
attractor-ui/pages/devices/detail/detail.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="device-detail-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<button class="back-btn" @click="goBack">← 返回</button>
|
||||
<text class="nav-title">设备详情</text>
|
||||
<button class="save-btn" @click="saveDevice">保存</button>
|
||||
</view>
|
||||
|
||||
<!-- 基础信息编辑区 -->
|
||||
<view class="base-info">
|
||||
<text class="section-title">基础信息</text>
|
||||
|
||||
<!-- 设备图片编辑 -->
|
||||
<view class="info-item">
|
||||
<text class="label">设备图片：</text>
|
||||
<view class="img-upload">
|
||||
<image class="device-img" :src="currentDevice.image" mode="aspectFill"></image>
|
||||
<button class="change-img-btn" @click="chooseImage">更换图片</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设备名称编辑 -->
|
||||
<view class="info-item">
|
||||
<text class="label">设备名称：</text>
|
||||
<input
|
||||
class="input"
|
||||
v-model="currentDevice.name"
|
||||
placeholder="请输入设备名称"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- SN码（不可编辑） -->
|
||||
<view class="info-item">
|
||||
<text class="label">SN码：</text>
|
||||
<text class="sn-text">{{ currentDevice.sn }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 设备类型（不可编辑） -->
|
||||
<view class="info-item">
|
||||
<text class="label">设备类型：</text>
|
||||
<text class="type-text">
|
||||
{{ deviceTabs.find(item => item.type === currentDevice.type).name || '未知类型' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 使用者/团队管理区 -->
|
||||
<view class="manager-info">
|
||||
<text class="section-title">归属管理</text>
|
||||
|
||||
<!-- 使用者选择 -->
|
||||
<view class="info-item">
|
||||
<text class="label">使用者：</text>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="userList"
|
||||
@change="selectUser"
|
||||
>
|
||||
<view class="picker">
|
||||
{{ currentDevice.user || '请选择使用者' }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 所属团队选择 -->
|
||||
<view class="info-item">
|
||||
<text class="label">所属团队：</text>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="teamList"
|
||||
@change="selectTeam"
|
||||
>
|
||||
<view class="picker">
|
||||
{{ currentDevice.team || '请选择所属团队' }}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDevice: {}, // 当前编辑的设备信息
|
||||
deviceTabs: [
|
||||
{ name: '全部设备', type: '' },
|
||||
{ name: '智能硬件', type: 'hardware' },
|
||||
{ name: '传感器', type: 'sensor' },
|
||||
{ name: '控制器', type: 'controller' }
|
||||
],
|
||||
// 模拟使用者列表
|
||||
userList: ['张三', '李四', '王五', '赵六'],
|
||||
// 模拟团队列表
|
||||
teamList: ['研发部', '测试部', '运维部', '市场部']
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 获取设备ID并从列表中匹配设备信息
|
||||
const deviceId = Number(options.id);
|
||||
// 从全局/本地存储获取设备列表（实际项目建议用vuex/本地存储）
|
||||
const deviceList = getApp().globalData.deviceList || [];
|
||||
this.currentDevice = JSON.parse(JSON.stringify(deviceList.find(item => item.id === deviceId)));
|
||||
// 若未找到设备，返回上一页
|
||||
if (!this.currentDevice) {
|
||||
uni.showToast({ title: '设备不存在', icon: 'none' });
|
||||
setTimeout(() => this.goBack(), 1500);
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 初始化全局设备列表（方便跨页面共享）
|
||||
if (!getApp().globalData.deviceList) {
|
||||
getApp().globalData.deviceList = [
|
||||
{
|
||||
id: 1,
|
||||
name: '温湿度传感器',
|
||||
sn: 'SN20260210001',
|
||||
type: 'sensor',
|
||||
image: '/static/device/sensor.png',
|
||||
user: '张三',
|
||||
team: '研发部'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '智能控制器',
|
||||
sn: 'SN20260210002',
|
||||
type: 'controller',
|
||||
image: '/static/device/controller.png',
|
||||
user: '李四',
|
||||
team: '测试部'
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
// 选择设备图片（uniapp上传图片API）
|
||||
async chooseImage() {
|
||||
try {
|
||||
const res = await uni.chooseImage({
|
||||
count: 1, // 仅选1张
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'] // 相册/相机
|
||||
});
|
||||
// 模拟上传图片（实际项目需上传到服务器，替换为返回的图片URL）
|
||||
this.currentDevice.image = res.tempFilePaths[0];
|
||||
} catch (err) {
|
||||
console.error('选择图片失败：', err);
|
||||
uni.showToast({ title: '选择图片失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
// 选择使用者
|
||||
selectUser(e) {
|
||||
this.currentDevice.user = this.userList[e.detail.value];
|
||||
},
|
||||
// 选择所属团队
|
||||
selectTeam(e) {
|
||||
this.currentDevice.team = this.teamList[e.detail.value];
|
||||
},
|
||||
// 保存设备信息
|
||||
saveDevice() {
|
||||
// 更新全局设备列表
|
||||
const deviceList = getApp().globalData.deviceList;
|
||||
const index = deviceList.findIndex(item => item.id === this.currentDevice.id);
|
||||
if (index > -1) {
|
||||
deviceList[index] = this.currentDevice;
|
||||
getApp().globalData.deviceList = deviceList;
|
||||
}
|
||||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||||
setTimeout(() => this.goBack(), 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面整体样式 */
|
||||
.device-detail-page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.back-btn, .save-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.back-btn {
|
||||
color: #666;
|
||||
}
|
||||
.save-btn {
|
||||
color: #409eff;
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 信息区块 */
|
||||
.base-info, .manager-info {
|
||||
background-color: #fff;
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 信息项 */
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.label {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.input, .picker, .sn-text, .type-text {
|
||||
flex: 1;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.input {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sn-text, .type-text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 图片上传区 */
|
||||
.img-upload {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.device-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.change-img-btn {
|
||||
background-color: #e5e5e5;
|
||||
color: #666;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
229
attractor-ui/pages/devices/devices.vue
Normal file
229
attractor-ui/pages/devices/devices.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="device-page">
|
||||
<view class="search-row">
|
||||
<view class="search-box">
|
||||
<uni-icons type="search" size="16" color="#7b8794"></uni-icons>
|
||||
<input class="search-input" placeholder="搜索设备名称或SN" v-model="searchKeyword" @confirm="fetchMyDevices" />
|
||||
<button v-if="searchKeyword" class="clear-btn" @click="clearSearch">×</button>
|
||||
</view>
|
||||
<button class="scan-chip" @click="refreshScan">扫描连接</button>
|
||||
</view>
|
||||
|
||||
<view class="section" v-if="scannedDevices.length">
|
||||
<view class="section-head">
|
||||
<text class="section-title">可连接设备</text>
|
||||
<text class="section-sub">点击连接后自动写入后端</text>
|
||||
</view>
|
||||
<view v-for="s in scannedDevices" :key="s.deviceId" class="device-card" @click="askConnect(s)">
|
||||
<image class="device-icon" :src="getIconForType()" mode="aspectFit" />
|
||||
<view class="device-main">
|
||||
<text class="device-name">{{ s.name }}</text>
|
||||
<text class="device-meta">SN: {{ s.deviceId }}</text>
|
||||
</view>
|
||||
<view class="state-pill running">连接</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="content" scroll-y>
|
||||
<view class="section">
|
||||
<view class="section-head">
|
||||
<text class="section-title">我的设备</text>
|
||||
<text class="section-sub">后端持久化数据</text>
|
||||
</view>
|
||||
|
||||
<view v-if="deviceList.length === 0" class="empty-card">
|
||||
<text>暂无设备，请先扫描连接</text>
|
||||
</view>
|
||||
|
||||
<view v-for="item in deviceList" :key="item.deviceId" class="device-card" @click="gotoDetail(item)">
|
||||
<image class="device-icon" :src="getIconForType()" mode="aspectFit" />
|
||||
<view class="device-main">
|
||||
<text class="device-name">{{ item.deviceName || '未命名设备' }}</text>
|
||||
<text class="device-meta">SN: {{ item.deviceSn || '--' }}</text>
|
||||
<text class="device-meta" v-if="item.lastConnectedAt">最近连接：{{ formatTime(item.lastConnectedAt) }}</text>
|
||||
</view>
|
||||
<view class="device-actions">
|
||||
<view class="state-pill" :class="item.status === '0' ? 'running' : 'offline'">
|
||||
{{ item.status === '0' ? '正常' : '停用' }}
|
||||
</view>
|
||||
<button class="delete-btn" @click.stop="removeDevice(item)">
|
||||
<uni-icons type="trash" size="12" color="#64748b"></uni-icons>
|
||||
<text>删除</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listMyDevices, deleteMyDevices, addMyDevice, updateMyDevice } from '@/api/device'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
deviceList: [],
|
||||
scannedDevices: [],
|
||||
_bluetoothFoundHandler: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchMyDevices()
|
||||
},
|
||||
onUnload() {
|
||||
this.stopScan()
|
||||
},
|
||||
methods: {
|
||||
fetchMyDevices() {
|
||||
const params = {}
|
||||
if ((this.searchKeyword || '').trim()) params.deviceName = this.searchKeyword.trim()
|
||||
listMyDevices(params).then(res => {
|
||||
this.deviceList = Array.isArray(res.rows) ? res.rows : []
|
||||
})
|
||||
},
|
||||
clearSearch() {
|
||||
this.searchKeyword = ''
|
||||
this.fetchMyDevices()
|
||||
},
|
||||
refreshScan() {
|
||||
this.scannedDevices = []
|
||||
this.startScan()
|
||||
},
|
||||
startScan() {
|
||||
uni.openBluetoothAdapter({
|
||||
success: () => {
|
||||
uni.startBluetoothDevicesDiscovery({
|
||||
allowDuplicatesKey: false,
|
||||
success: () => {
|
||||
if (this._bluetoothFoundHandler) {
|
||||
try { uni.offBluetoothDeviceFound(this._bluetoothFoundHandler) } catch (e) {}
|
||||
}
|
||||
this._bluetoothFoundHandler = res => {
|
||||
const arr = res.devices || []
|
||||
arr.forEach(dev => {
|
||||
const id = dev.deviceId
|
||||
const name = (dev.name || dev.localName || '').trim()
|
||||
if (!id || !name) return
|
||||
if (this.scannedDevices.some(s => s.deviceId === id)) return
|
||||
this.scannedDevices.push({ deviceId: id, name })
|
||||
})
|
||||
}
|
||||
uni.onBluetoothDeviceFound(this._bluetoothFoundHandler)
|
||||
uni.showToast({ title: '扫描中...', icon: 'none' })
|
||||
setTimeout(() => this.stopScan(), 10000)
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => uni.showToast({ title: '请开启蓝牙权限', icon: 'none' })
|
||||
})
|
||||
},
|
||||
stopScan() {
|
||||
try { uni.stopBluetoothDevicesDiscovery({}) } catch (e) {}
|
||||
if (this._bluetoothFoundHandler) {
|
||||
try { uni.offBluetoothDeviceFound(this._bluetoothFoundHandler) } catch (e) {}
|
||||
this._bluetoothFoundHandler = null
|
||||
}
|
||||
},
|
||||
askConnect(device) {
|
||||
uni.showModal({
|
||||
title: '连接确认',
|
||||
content: `连接设备「${device.name}」后将自动写入后端，是否继续？`,
|
||||
success: res => {
|
||||
if (res.confirm) this.connectDevice(device)
|
||||
}
|
||||
})
|
||||
},
|
||||
connectDevice(device) {
|
||||
uni.showLoading({ title: '连接中...' })
|
||||
uni.createBLEConnection({
|
||||
deviceId: device.deviceId,
|
||||
success: () => {
|
||||
this.upsertDeviceToServer(device).finally(() => uni.hideLoading())
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '连接失败', icon: 'none' })
|
||||
}
|
||||
})
|
||||
},
|
||||
upsertDeviceToServer(device) {
|
||||
const exist = this.deviceList.find(d => d.deviceSn === device.deviceId)
|
||||
const payload = {
|
||||
deviceName: device.name,
|
||||
deviceSn: device.deviceId,
|
||||
deviceType: 'attractor',
|
||||
status: '0',
|
||||
lastConnectedAt: new Date().toISOString()
|
||||
}
|
||||
if (exist) {
|
||||
return updateMyDevice({ ...payload, deviceId: exist.deviceId }).then(() => {
|
||||
uni.showToast({ title: '连接成功，已更新', icon: 'success' })
|
||||
this.fetchMyDevices()
|
||||
})
|
||||
}
|
||||
return addMyDevice(payload).then(() => {
|
||||
uni.showToast({ title: '连接成功，已入库', icon: 'success' })
|
||||
this.fetchMyDevices()
|
||||
})
|
||||
},
|
||||
formatTime(ts) {
|
||||
if (!ts) return ''
|
||||
const d = new Date(ts)
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
const h = String(d.getHours()).padStart(2, '0')
|
||||
const min = String(d.getMinutes()).padStart(2, '0')
|
||||
return `${y}-${m}-${day} ${h}:${min}`
|
||||
},
|
||||
getIconForType() {
|
||||
return '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png'
|
||||
},
|
||||
removeDevice(item) {
|
||||
uni.showModal({
|
||||
title: '删除设备',
|
||||
content: '确认删除该设备吗？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
deleteMyDevices(item.deviceId).then(() => {
|
||||
uni.showToast({ title: '删除成功', icon: 'none' })
|
||||
this.fetchMyDevices()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
gotoDetail(device) {
|
||||
if (!device || !device.deviceSn) return
|
||||
uni.navigateTo({ url: `/pages/devices/attractor/attractor?deviceId=${encodeURIComponent(device.deviceSn)}` })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.device-page { min-height: 100vh; background: #f4f7f8; padding: 20rpx 20rpx 0; box-sizing: border-box; }
|
||||
.search-row { display: flex; gap: 12rpx; align-items: center; margin-bottom: 18rpx; }
|
||||
.search-box { flex: 1; height: 72rpx; display: flex; align-items: center; gap: 10rpx; padding: 0 16rpx; background: #fff; border-radius: 14rpx; border: 1rpx solid #e7eeef; }
|
||||
.search-input { flex: 1; font-size: 24rpx; color: #0f172a; }
|
||||
.clear-btn { border: none; background: transparent; font-size: 32rpx; color: #9ca3af; line-height: 1; }
|
||||
.scan-chip { height: 72rpx; padding: 0 16rpx; border-radius: 14rpx; background: #e6f5f4; border: 1rpx solid #bfe9e7; display: flex; align-items: center; font-size: 22rpx; color: #0f7f7a; }
|
||||
.content { height: calc(100vh - 240rpx); }
|
||||
.section { margin-bottom: 20rpx; }
|
||||
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
|
||||
.section-title { font-size: 26rpx; font-weight: 600; color: #0f172a; }
|
||||
.section-sub { font-size: 22rpx; color: #94a3b8; }
|
||||
.empty-card { background: #fff; border-radius: 16rpx; border: 1rpx dashed #d6dde3; padding: 24rpx; text-align: center; color: #94a3b8; font-size: 24rpx; }
|
||||
.device-card { display: flex; align-items: center; padding: 18rpx; border-radius: 18rpx; background: #fff; border: 1rpx solid #e7eeef; margin-bottom: 12rpx; }
|
||||
.device-icon { width: 70rpx; height: 70rpx; border-radius: 16rpx; background: #f2f7f6; margin-right: 16rpx; }
|
||||
.device-main { flex: 1; display: flex; flex-direction: column; gap: 4rpx; }
|
||||
.device-name { font-size: 26rpx; font-weight: 600; color: #0f172a; }
|
||||
.device-meta { font-size: 22rpx; color: #94a3b8; }
|
||||
.device-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10rpx; }
|
||||
.state-pill { padding: 4rpx 12rpx; border-radius: 999rpx; font-size: 20rpx; font-weight: 600; background: #f1f5f9; color: #64748b; }
|
||||
.state-pill.running { background: #ecfdf3; color: #059669; }
|
||||
.state-pill.offline { background: #f1f5f9; color: #94a3b8; }
|
||||
.delete-btn { display: inline-flex; align-items: center; gap: 6rpx; height: 44rpx; padding: 0 12rpx; border-radius: 12rpx; border: 1rpx solid #e2e8f0; background: #f8fafc; color: #64748b; font-size: 20rpx; }
|
||||
</style>
|
||||
430
attractor-ui/pages/devices/master.vue
Normal file
430
attractor-ui/pages/devices/master.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<view class="master-page">
|
||||
<view class="hero-card">
|
||||
<view>
|
||||
<text class="hero-title">设备管理</text>
|
||||
<text class="hero-sub">统一管理你的 Attractor 设备</text>
|
||||
</view>
|
||||
<button class="hero-btn" @click="openAddDeviceModal">新增设备</button>
|
||||
</view>
|
||||
|
||||
<view class="filter-row">
|
||||
<view
|
||||
v-for="(tab, index) in deviceTabs"
|
||||
:key="tab.type || index"
|
||||
class="filter-pill"
|
||||
:class="{ active: activeTab === index }"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="device-list" scroll-y>
|
||||
<view v-if="filteredDevices.length === 0" class="empty-card">
|
||||
<text class="empty-title">当前分类暂无设备</text>
|
||||
<text class="empty-sub">你可以点击右上角“新增设备”进行添加</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="device-card"
|
||||
v-for="device in filteredDevices"
|
||||
:key="device.id"
|
||||
@click="toDeviceDetail(device.id)"
|
||||
>
|
||||
<image class="device-icon" :src="device.image" mode="aspectFit" />
|
||||
|
||||
<view class="device-main">
|
||||
<text class="device-name">{{ device.name }}</text>
|
||||
<text class="device-sn">SN: {{ device.sn }}</text>
|
||||
<view class="meta-row">
|
||||
<text class="meta-tag">{{ typeText(device.type) }}</text>
|
||||
<text class="meta-text" v-if="device.user">使用者：{{ device.user }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="delete-btn" @click.stop="deleteDevice(device.id)">
|
||||
<uni-icons type="trash" size="13" color="#64748b"></uni-icons>
|
||||
<text>删除</text>
|
||||
</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<uni-popup ref="addDevicePopup" type="center">
|
||||
<view class="popup-card">
|
||||
<text class="popup-title">新增设备</text>
|
||||
|
||||
<button class="pair-btn" @click="bluetoothPair">蓝牙配对设备</button>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">设备名称</text>
|
||||
<input class="form-input" v-model="newDevice.name" placeholder="请输入设备名称" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">SN 码</text>
|
||||
<input class="form-input" v-model="newDevice.sn" placeholder="配对后自动填充/手动输入" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">设备类型</text>
|
||||
<picker :range="pickerTypes" :value="newDevice.type" @change="onTypeChange">
|
||||
<view class="picker-view">{{ pickerTypes[newDevice.type] }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="popup-actions">
|
||||
<button class="ghost" @click="closeAddDeviceModal">取消</button>
|
||||
<button class="primary" @click="confirmAddDevice">确认添加</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
deviceTabs: [
|
||||
{ name: '全部', type: '' },
|
||||
{ name: '智能硬件', type: 'hardware' },
|
||||
{ name: '传感器', type: 'sensor' },
|
||||
{ name: '控制器', type: 'controller' }
|
||||
],
|
||||
activeTab: 0,
|
||||
deviceList: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Attractor 主控器',
|
||||
sn: 'ATR-20260327001',
|
||||
type: 'controller',
|
||||
image: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
user: 'Attractor_001'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '环境传感器 A1',
|
||||
sn: 'ATR-20260327002',
|
||||
type: 'sensor',
|
||||
image: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
user: ''
|
||||
}
|
||||
],
|
||||
newDevice: {
|
||||
name: '',
|
||||
sn: '',
|
||||
type: 0
|
||||
},
|
||||
pickerTypes: ['智能硬件', '传感器', '控制器']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredDevices() {
|
||||
if (this.activeTab === 0) return this.deviceList
|
||||
const targetType = this.deviceTabs[this.activeTab].type
|
||||
return this.deviceList.filter(item => item.type === targetType)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeText(type) {
|
||||
const map = {
|
||||
hardware: '智能硬件',
|
||||
sensor: '传感器',
|
||||
controller: '控制器'
|
||||
}
|
||||
return map[type] || '未知类型'
|
||||
},
|
||||
switchTab(index) {
|
||||
this.activeTab = index
|
||||
},
|
||||
openAddDeviceModal() {
|
||||
this.newDevice = { name: '', sn: '', type: 0 }
|
||||
this.$refs.addDevicePopup.open()
|
||||
},
|
||||
closeAddDeviceModal() {
|
||||
this.$refs.addDevicePopup.close()
|
||||
},
|
||||
onTypeChange(e) {
|
||||
this.newDevice.type = Number(e.detail.value)
|
||||
},
|
||||
bluetoothPair() {
|
||||
this.newDevice.sn = `ATR-${Date.now().toString().slice(-8)}`
|
||||
uni.showToast({ title: '配对成功，SN 已填充', icon: 'none' })
|
||||
},
|
||||
confirmAddDevice() {
|
||||
if (!this.newDevice.name || !this.newDevice.sn) {
|
||||
uni.showToast({ title: '设备名称和 SN 不能为空', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
const typeMap = ['hardware', 'sensor', 'controller']
|
||||
const id = Math.max(...this.deviceList.map(d => d.id), 0) + 1
|
||||
this.deviceList.unshift({
|
||||
id,
|
||||
name: this.newDevice.name,
|
||||
sn: this.newDevice.sn,
|
||||
type: typeMap[this.newDevice.type],
|
||||
image: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
user: ''
|
||||
})
|
||||
|
||||
this.closeAddDeviceModal()
|
||||
uni.showToast({ title: '设备已添加', icon: 'success' })
|
||||
},
|
||||
deleteDevice(id) {
|
||||
uni.showModal({
|
||||
title: '删除设备',
|
||||
content: '确认删除该设备吗？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.deviceList = this.deviceList.filter(item => item.id !== id)
|
||||
uni.showToast({ title: '删除成功', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
toDeviceDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/devices/detail/detail?id=' + id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.master-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f7f8;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e7eeef;
|
||||
border-radius: 18rpx;
|
||||
padding: 22rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
height: 62rpx;
|
||||
line-height: 62rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid #bfe9e7;
|
||||
background: #e6f5f4;
|
||||
color: #0f7f7a;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.filter-pill {
|
||||
flex-shrink: 0;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid #e2e8f0;
|
||||
background: #ffffff;
|
||||
color: #64748b;
|
||||
font-size: 23rpx;
|
||||
}
|
||||
|
||||
.filter-pill.active {
|
||||
border-color: #bfe9e7;
|
||||
background: #e6f5f4;
|
||||
color: #0f7f7a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.device-list {
|
||||
height: calc(100vh - 240rpx);
|
||||
}
|
||||
|
||||
.empty-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx dashed #d7dee5;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.device-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e7eeef;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 14rpx;
|
||||
margin-right: 14rpx;
|
||||
background: #f0fdfa;
|
||||
}
|
||||
|
||||
.device-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 26rpx;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.device-sn,
|
||||
.meta-text {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 21rpx;
|
||||
color: #0f7f7a;
|
||||
background: #e6f5f4;
|
||||
border-radius: 8rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
height: 46rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.popup-card {
|
||||
width: 620rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.pair-btn {
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid #bfe9e7;
|
||||
background: #e6f5f4;
|
||||
color: #0f7f7a;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 23rpx;
|
||||
color: #64748b;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.picker-view {
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
padding: 0 14rpx;
|
||||
font-size: 24rpx;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.popup-actions {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.popup-actions button {
|
||||
flex: 1;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.popup-actions .ghost {
|
||||
border: 1rpx solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.popup-actions .primary {
|
||||
border: 1rpx solid #bfe9e7;
|
||||
background: #e6f5f4;
|
||||
color: #0f7f7a;
|
||||
}
|
||||
</style>
|
||||
3
attractor-ui/pages/index.vue
Normal file
3
attractor-ui/pages/index.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<view>设备列表</view>
|
||||
</template>
|
||||
145
attractor-ui/pages/login.vue
Normal file
145
attractor-ui/pages/login.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<view class="login-page">
|
||||
<view class="hero">
|
||||
<image class="logo" src="/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png" mode="aspectFit" />
|
||||
<text class="title">Attractor 登录</text>
|
||||
<text class="sub">手机号一键登录，新用户自动注册</text>
|
||||
</view>
|
||||
|
||||
<view class="form-card">
|
||||
<view class="input-row">
|
||||
<uni-icons type="phone" size="18" color="#0f7f7a"></uni-icons>
|
||||
<input
|
||||
v-model="mobile"
|
||||
class="input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="hint-row">
|
||||
<text class="hint">验证码已内置：666666（测试阶段）</text>
|
||||
</view>
|
||||
|
||||
<button class="login-btn" @click="handleMobileLogin">登录 / 自动注册</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobile: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
if (getToken()) {
|
||||
this.$tab.reLaunch('/pages/devices/devices')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMobileLogin() {
|
||||
const mobile = (this.mobile || '').trim()
|
||||
if (!/^1\d{10}$/.test(mobile)) {
|
||||
this.$modal.msgError('请输入正确的11位手机号')
|
||||
return
|
||||
}
|
||||
|
||||
this.$modal.loading('登录中，请稍候...')
|
||||
this.$store.dispatch('MobileLogin', mobile).then(() => {
|
||||
return this.$store.dispatch('GetInfo')
|
||||
}).then(() => {
|
||||
this.$modal.closeLoading()
|
||||
this.$tab.reLaunch('/pages/devices/devices')
|
||||
}).catch(() => {
|
||||
this.$modal.closeLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f7f8;
|
||||
padding: 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 80rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 16rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.sub {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e7eeef;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
height: 82rpx;
|
||||
border: 1rpx solid #bfe9e7;
|
||||
background: #f2fbfa;
|
||||
border-radius: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.hint-row {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 22rpx;
|
||||
height: 82rpx;
|
||||
line-height: 82rpx;
|
||||
border-radius: 14rpx;
|
||||
border: 1rpx solid #bfe9e7;
|
||||
background: #1f9f9a;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
22
attractor-ui/pages/member/member.vue
Normal file
22
attractor-ui/pages/member/member.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
成员管理
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
22
attractor-ui/pages/member/permi.vue
Normal file
22
attractor-ui/pages/member/permi.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
173
attractor-ui/pages/mine/about/index.vue
Normal file
173
attractor-ui/pages/mine/about/index.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="manual-page">
|
||||
<view class="hero-card">
|
||||
<image class="logo" src="/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png" mode="aspectFit"></image>
|
||||
<view class="hero-text">
|
||||
<text class="title">Attractor 设备与软件说明</text>
|
||||
<text class="subtitle">让连接、控制与日常使用更清晰</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="manual-list" scroll-y>
|
||||
<view class="section-card">
|
||||
<text class="section-title">软件说明</text>
|
||||
<view class="row">
|
||||
<text class="label">当前版本</text>
|
||||
<text class="value">v{{ version }}</text>
|
||||
</view>
|
||||
<text class="desc">Attractor App 用于设备连接、参数设置、状态查看与快捷控制。建议保持应用为最新版本，以获得更稳定的蓝牙连接和更完整的功能体验。</text>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<text class="section-title">设备连接说明</text>
|
||||
<text class="bullet">1. 首次使用前，请确保设备电量充足并处于可连接状态。</text>
|
||||
<text class="bullet">2. 打开“我的设备”页面后，系统会自动搜索附近设备。</text>
|
||||
<text class="bullet">3. 点击候选设备并确认连接，成功后会进入“我的设备”列表。</text>
|
||||
<text class="bullet">4. 若连接失败，请重启设备蓝牙并靠近手机后重试。</text>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<text class="section-title">治疗参数说明</text>
|
||||
<text class="bullet">• 模式：舒缓模式适合日常放松，强效模式适合更高强度需求。</text>
|
||||
<text class="bullet">• 档位：建议从低档逐步上调，避免突然增加刺激强度。</text>
|
||||
<text class="bullet">• 频率/脉宽：请根据个人体感逐步调整，若不适请立即停止。</text>
|
||||
<text class="bullet">• 电压：支持按“+/-”调整，建议先低后高，逐步适配。</text>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<text class="section-title">安全与注意事项</text>
|
||||
<text class="bullet">• 使用过程中若出现明显不适，请立即停止并咨询专业人士。</text>
|
||||
<text class="bullet">• 请勿在驾驶、洗浴、睡眠等不适宜场景中使用。</text>
|
||||
<text class="bullet">• 设备异常发热、无响应或连接不稳定时，请先断电后再排查。</text>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<text class="section-title">技术支持</text>
|
||||
<view class="row">
|
||||
<text class="label">支持邮箱</text>
|
||||
<text class="value">support@attractor.app</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">服务时间</text>
|
||||
<text class="value">工作日 09:00 - 18:00</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-tip">
|
||||
<text>© 2026 Attractor. All Rights Reserved.</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
version: getApp().globalData?.config?.appInfo?.version || '2.3.0'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.manual-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f7f8;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e7eeef;
|
||||
border-radius: 18rpx;
|
||||
padding: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 18rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 31rpx;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.manual-list {
|
||||
height: calc(100vh - 170rpx);
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e7eeef;
|
||||
border-radius: 16rpx;
|
||||
padding: 18rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #0f7f7a;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 24rpx;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #334155;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.bullet {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #334155;
|
||||
line-height: 1.65;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.footer-tip {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 22rpx;
|
||||
padding: 16rpx 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
618
attractor-ui/pages/mine/avatar/index.vue
Normal file
618
attractor-ui/pages/mine/avatar/index.vue
Normal file
@@ -0,0 +1,618 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body uni-content-info">
|
||||
<view class='cropper-content'>
|
||||
<view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
|
||||
<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
|
||||
<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
|
||||
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
|
||||
:style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
|
||||
<view class="uni-cropper-view-box">
|
||||
<view class="uni-cropper-dashed-h"></view>
|
||||
<view class="uni-cropper-dashed-v"></view>
|
||||
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
|
||||
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
|
||||
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cropper-config'>
|
||||
<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
|
||||
<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
|
||||
</view>
|
||||
<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
import store from "@/store"
|
||||
import { uploadAvatar } from "@/api/system/user"
|
||||
|
||||
const baseUrl = config.baseUrl
|
||||
let sysInfo = uni.getSystemInfoSync()
|
||||
let SCREEN_WIDTH = sysInfo.screenWidth
|
||||
let PAGE_X, // 手按下的x位置
|
||||
PAGE_Y, // 手按下y的位置
|
||||
PR = sysInfo.pixelRatio, // dpi
|
||||
T_PAGE_X, // 手移动的时候x的位置
|
||||
T_PAGE_Y, // 手移动的时候Y的位置
|
||||
CUT_L, // 初始化拖拽元素的left值
|
||||
CUT_T, // 初始化拖拽元素的top值
|
||||
CUT_R, // 初始化拖拽元素的
|
||||
CUT_B, // 初始化拖拽元素的
|
||||
CUT_W, // 初始化拖拽元素的宽度
|
||||
CUT_H, // 初始化拖拽元素的高度
|
||||
IMG_RATIO, // 图片比例
|
||||
IMG_REAL_W, // 图片实际的宽度
|
||||
IMG_REAL_H, // 图片实际的高度
|
||||
DRAFG_MOVE_RATIO = 1, //移动时候的比例,
|
||||
INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
|
||||
DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
|
||||
|
||||
export default {
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data() {
|
||||
return {
|
||||
imageSrc: store.getters.avatar,
|
||||
isShowImg: false,
|
||||
// 初始化的宽高
|
||||
cropperInitW: SCREEN_WIDTH,
|
||||
cropperInitH: SCREEN_WIDTH,
|
||||
// 动态的宽高
|
||||
cropperW: SCREEN_WIDTH,
|
||||
cropperH: SCREEN_WIDTH,
|
||||
// 动态的left top值
|
||||
cropperL: 0,
|
||||
cropperT: 0,
|
||||
|
||||
transL: 0,
|
||||
transT: 0,
|
||||
|
||||
// 图片缩放值
|
||||
scaleP: 0,
|
||||
imageW: 0,
|
||||
imageH: 0,
|
||||
|
||||
// 裁剪框 宽高
|
||||
cutL: 0,
|
||||
cutT: 0,
|
||||
cutB: SCREEN_WIDTH,
|
||||
cutR: '100%',
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: DRAFG_MOVE_RATIO
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
this.loadImage()
|
||||
},
|
||||
methods: {
|
||||
setData: function (obj) {
|
||||
let that = this
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
that.$set(that.$data, key, obj[key])
|
||||
})
|
||||
},
|
||||
getImage: function () {
|
||||
var _this = this
|
||||
uni.chooseImage({
|
||||
success: function (res) {
|
||||
_this.setData({
|
||||
imageSrc: res.tempFilePaths[0],
|
||||
})
|
||||
_this.loadImage()
|
||||
},
|
||||
})
|
||||
},
|
||||
loadImage: function () {
|
||||
var _this = this
|
||||
|
||||
uni.getImageInfo({
|
||||
src: _this.imageSrc,
|
||||
success: function success(res) {
|
||||
IMG_RATIO = 1 / 1
|
||||
if (IMG_RATIO >= 1) {
|
||||
IMG_REAL_W = SCREEN_WIDTH
|
||||
IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
|
||||
} else {
|
||||
IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
|
||||
IMG_REAL_H = SCREEN_WIDTH
|
||||
}
|
||||
let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
|
||||
INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
|
||||
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
|
||||
if (IMG_RATIO >= 1) {
|
||||
let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2)
|
||||
let cutB = cutT
|
||||
let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2)
|
||||
let cutR = cutL
|
||||
_this.setData({
|
||||
cropperW: SCREEN_WIDTH,
|
||||
cropperH: SCREEN_WIDTH / IMG_RATIO,
|
||||
// 初始化left right
|
||||
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
|
||||
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
|
||||
cutL: cutL,
|
||||
cutT: cutT,
|
||||
cutR: cutR,
|
||||
cutB: cutB,
|
||||
// 图片缩放值
|
||||
imageW: IMG_REAL_W,
|
||||
imageH: IMG_REAL_H,
|
||||
scaleP: IMG_REAL_W / SCREEN_WIDTH,
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: IMG_RATIO
|
||||
})
|
||||
} else {
|
||||
let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2)
|
||||
let cutR = cutL
|
||||
let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2)
|
||||
let cutB = cutT
|
||||
_this.setData({
|
||||
cropperW: SCREEN_WIDTH * IMG_RATIO,
|
||||
cropperH: SCREEN_WIDTH,
|
||||
// 初始化left right
|
||||
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
|
||||
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
|
||||
|
||||
cutL: cutL,
|
||||
cutT: cutT,
|
||||
cutR: cutR,
|
||||
cutB: cutB,
|
||||
// 图片缩放值
|
||||
imageW: IMG_REAL_W,
|
||||
imageH: IMG_REAL_H,
|
||||
scaleP: IMG_REAL_W / SCREEN_WIDTH,
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: IMG_RATIO
|
||||
})
|
||||
}
|
||||
_this.setData({
|
||||
isShowImg: true
|
||||
})
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 拖动时候触发的touchStart事件
|
||||
contentStartMove(e) {
|
||||
PAGE_X = e.touches[0].pageX
|
||||
PAGE_Y = e.touches[0].pageY
|
||||
},
|
||||
|
||||
// 拖动时候触发的touchMove事件
|
||||
contentMoveing(e) {
|
||||
var _this = this
|
||||
var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
// 左移
|
||||
if (dragLengthX > 0) {
|
||||
if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
|
||||
} else {
|
||||
if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
|
||||
}
|
||||
|
||||
if (dragLengthY > 0) {
|
||||
if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
|
||||
} else {
|
||||
if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
|
||||
}
|
||||
this.setData({
|
||||
cutL: this.cutL - dragLengthX,
|
||||
cutT: this.cutT - dragLengthY,
|
||||
cutR: this.cutR + dragLengthX,
|
||||
cutB: this.cutB + dragLengthY
|
||||
})
|
||||
|
||||
PAGE_X = e.touches[0].pageX
|
||||
PAGE_Y = e.touches[0].pageY
|
||||
},
|
||||
|
||||
contentTouchEnd() {
|
||||
|
||||
},
|
||||
|
||||
// 获取图片
|
||||
getImageInfo() {
|
||||
var _this = this
|
||||
uni.showLoading({
|
||||
title: '图片生成中...',
|
||||
})
|
||||
// 将图片写入画布
|
||||
const ctx = uni.createCanvasContext('myCanvas')
|
||||
ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H)
|
||||
ctx.draw(true, () => {
|
||||
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
|
||||
var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W
|
||||
var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H
|
||||
var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W
|
||||
var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H
|
||||
uni.canvasToTempFilePath({
|
||||
x: canvasL,
|
||||
y: canvasT,
|
||||
width: canvasW,
|
||||
height: canvasH,
|
||||
destWidth: canvasW,
|
||||
destHeight: canvasH,
|
||||
quality: 0.5,
|
||||
canvasId: 'myCanvas',
|
||||
success: function (res) {
|
||||
uni.hideLoading()
|
||||
let data = {name: 'avatarfile', filePath: res.tempFilePath}
|
||||
uploadAvatar(data).then(response => {
|
||||
store.commit('SET_AVATAR', baseUrl + response.imgUrl)
|
||||
uni.showToast({ title: "修改成功", icon: 'success' })
|
||||
uni.navigateBack()
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 设置大小的时候触发的touchStart事件
|
||||
dragStart(e) {
|
||||
T_PAGE_X = e.touches[0].pageX
|
||||
T_PAGE_Y = e.touches[0].pageY
|
||||
CUT_L = this.cutL
|
||||
CUT_R = this.cutR
|
||||
CUT_B = this.cutB
|
||||
CUT_T = this.cutT
|
||||
},
|
||||
|
||||
// 设置大小的时候触发的touchMove事件
|
||||
dragMove(e) {
|
||||
var _this = this
|
||||
var dragType = e.target.dataset.drag
|
||||
switch (dragType) {
|
||||
case 'right':
|
||||
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
if (CUT_R + dragLength < 0) dragLength = -CUT_R
|
||||
this.setData({
|
||||
cutR: CUT_R + dragLength
|
||||
})
|
||||
break
|
||||
case 'left':
|
||||
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
if (CUT_L - dragLength < 0) dragLength = CUT_L
|
||||
if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
|
||||
this.setData({
|
||||
cutL: CUT_L - dragLength
|
||||
})
|
||||
break
|
||||
case 'top':
|
||||
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
if (CUT_T - dragLength < 0) dragLength = CUT_T
|
||||
if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
|
||||
this.setData({
|
||||
cutT: CUT_T - dragLength
|
||||
})
|
||||
break
|
||||
case 'bottom':
|
||||
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
if (CUT_B + dragLength < 0) dragLength = -CUT_B
|
||||
this.setData({
|
||||
cutB: CUT_B + dragLength
|
||||
})
|
||||
break
|
||||
case 'rightBottom':
|
||||
var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
|
||||
if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
|
||||
if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
|
||||
let cutB = CUT_B + dragLengthY
|
||||
let cutR = CUT_R + dragLengthX
|
||||
|
||||
this.setData({
|
||||
cutB: cutB,
|
||||
cutR: cutR
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cropper-config {
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
|
||||
.cropper-content {
|
||||
min-height: 750rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-corpper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-corpper-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-corpper-content image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0 !important;
|
||||
max-width: none !important;
|
||||
height: 100%;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
image-orientation: 0deg !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 移动图片效果 */
|
||||
.uni-cropper-drag-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: move;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 内部的信息 */
|
||||
.uni-corpper-crop-box {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.uni-corpper-crop-box .uni-cropper-view-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
outline: 1rpx solid #69f;
|
||||
outline-color: rgba(102, 153, 255, .75)
|
||||
}
|
||||
|
||||
/* 横向虚线 */
|
||||
.uni-cropper-dashed-h {
|
||||
position: absolute;
|
||||
top: 33.33333333%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 33.33333333%;
|
||||
border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 纵向虚线 */
|
||||
.uni-cropper-dashed-v {
|
||||
position: absolute;
|
||||
left: 33.33333333%;
|
||||
top: 0;
|
||||
width: 33.33333333%;
|
||||
height: 100%;
|
||||
border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 四个方向的线 为了之后的拖动事件*/
|
||||
.uni-cropper-line-t {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1rpx;
|
||||
opacity: 0.1;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-t::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0rpx;
|
||||
width: 100%;
|
||||
-webkit-transform: translate3d(0, -50%, 0);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
bottom: 0;
|
||||
height: 41rpx;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-r {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
right: 0rpx;
|
||||
width: 1rpx;
|
||||
opacity: 0.1;
|
||||
height: 100%;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-r::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 41rpx;
|
||||
-webkit-transform: translate3d(-50%, 0, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-b {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #69f;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1rpx;
|
||||
opacity: 0.1;
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-b::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0rpx;
|
||||
width: 100%;
|
||||
-webkit-transform: translate3d(0, -50%, 0);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
bottom: 0;
|
||||
height: 41rpx;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-l {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1rpx;
|
||||
opacity: 0.1;
|
||||
height: 100%;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-l::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 41rpx;
|
||||
-webkit-transform: translate3d(-50%, 0, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-point {
|
||||
width: 5rpx;
|
||||
height: 5rpx;
|
||||
background-color: #69f;
|
||||
opacity: .75;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.point-t {
|
||||
top: -3rpx;
|
||||
left: 50%;
|
||||
margin-left: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-tr {
|
||||
top: -3rpx;
|
||||
left: 100%;
|
||||
margin-left: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-r {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-rb {
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
cursor: n-resize;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background-color: #69f;
|
||||
position: absolute;
|
||||
z-index: 1112;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.point-b {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-bl {
|
||||
left: 0%;
|
||||
top: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-l {
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-lt {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
/* 裁剪框预览内容 */
|
||||
.uni-cropper-viewer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-cropper-viewer image {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
199
attractor-ui/pages/mine/help/index.vue
Normal file
199
attractor-ui/pages/mine/help/index.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<view class="record-page">
|
||||
<view class="header-card">
|
||||
<text class="title">使用记录</text>
|
||||
<text class="sub">最近设备连接与控制行为</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="record-list" scroll-y>
|
||||
<view v-if="records.length === 0" class="empty-card">
|
||||
<text class="empty-title">暂无使用记录</text>
|
||||
<text class="empty-sub">连接设备并执行操作后会自动生成记录</text>
|
||||
</view>
|
||||
|
||||
<view v-for="item in records" :key="item.id" class="record-card">
|
||||
<view class="row top">
|
||||
<text class="device-name">{{ item.deviceName }}</text>
|
||||
<text class="time">{{ item.time }}</text>
|
||||
</view>
|
||||
|
||||
<view class="row middle">
|
||||
<text class="device-id">{{ item.deviceId }}</text>
|
||||
<text class="status" :class="item.statusClass">{{ item.statusText }}</text>
|
||||
</view>
|
||||
|
||||
<view class="event-wrap">
|
||||
<text class="event-tag">{{ item.eventType }}</text>
|
||||
<text class="event-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
records: [
|
||||
{
|
||||
id: 1,
|
||||
deviceName: 'Attractor 主设备',
|
||||
deviceId: '8A:E5:FC:D4:C0:50',
|
||||
time: '2026-03-27 14:18',
|
||||
eventType: '连接',
|
||||
desc: '设备连接成功并进入参数页面',
|
||||
statusText: '成功',
|
||||
statusClass: 'ok'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
deviceName: 'Attractor 主设备',
|
||||
deviceId: '8A:E5:FC:D4:C0:50',
|
||||
time: '2026-03-27 14:22',
|
||||
eventType: '快捷启动',
|
||||
desc: '首页快捷启动指令发送完成（0x30/0x01）',
|
||||
statusText: '成功',
|
||||
statusClass: 'ok'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
deviceName: 'Attractor 主设备',
|
||||
deviceId: '8A:E5:FC:D4:C0:50',
|
||||
time: '2026-03-27 14:26',
|
||||
eventType: '快捷停止',
|
||||
desc: '首页快捷停止指令发送完成（0x30/0x00）',
|
||||
statusText: '成功',
|
||||
statusClass: 'ok'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.record-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f7f8;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e7eeef;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.sub {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
height: calc(100vh - 150rpx);
|
||||
}
|
||||
|
||||
.record-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e7eeef;
|
||||
border-radius: 16rpx;
|
||||
padding: 18rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row.top {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.row.middle {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 21rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.device-id {
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 20rpx;
|
||||
border-radius: 999rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
}
|
||||
|
||||
.status.ok {
|
||||
color: #0f7f7a;
|
||||
background: #e6f5f4;
|
||||
}
|
||||
|
||||
.event-wrap {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.event-tag {
|
||||
font-size: 21rpx;
|
||||
color: #0f7f7a;
|
||||
background: #f0fdfa;
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-desc {
|
||||
font-size: 23rpx;
|
||||
color: #334155;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.empty-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx dashed #d6dde3;
|
||||
border-radius: 16rpx;
|
||||
padding: 36rpx 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
179
attractor-ui/pages/mine/index.vue
Normal file
179
attractor-ui/pages/mine/index.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="mine-page">
|
||||
<view class="profile-card">
|
||||
<image class="avatar" :src="avatar" mode="aspectFill"></image>
|
||||
<view class="profile-info">
|
||||
<text class="name">{{ name }}</text>
|
||||
<text class="desc">Attractor 用户</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-section">
|
||||
<view class="menu-item" @click="goToDevice">
|
||||
<view class="left">
|
||||
<uni-icons type="gear" size="20" color="#1f9f9a"></uni-icons>
|
||||
<text class="label">我的设备</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="goToNotice">
|
||||
<view class="left">
|
||||
<uni-icons type="notification" size="20" color="#1f9f9a"></uni-icons>
|
||||
<text class="label">公告中心</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="goToUsageRecord">
|
||||
<view class="left">
|
||||
<uni-icons type="calendar" size="20" color="#1f9f9a"></uni-icons>
|
||||
<text class="label">使用记录</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="goToDeviceGuide">
|
||||
<view class="left">
|
||||
<uni-icons type="help" size="20" color="#1f9f9a"></uni-icons>
|
||||
<text class="label">设备说明</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="resetDeviceFactory">
|
||||
<view class="left">
|
||||
<uni-icons type="reload" size="20" color="#ef4444"></uni-icons>
|
||||
<text class="label danger">恢复出厂</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#94a3b8"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Attractor_001',
|
||||
avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToDevice() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/devices/master'
|
||||
})
|
||||
},
|
||||
goToNotice() {
|
||||
uni.switchTab({
|
||||
url: '/pages/work/index'
|
||||
})
|
||||
},
|
||||
goToUsageRecord() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/help/index'
|
||||
})
|
||||
},
|
||||
goToDeviceGuide() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/about/index'
|
||||
})
|
||||
},
|
||||
resetDeviceFactory() {
|
||||
uni.showModal({
|
||||
title: '恢复出厂',
|
||||
content: '确认恢复出厂设置吗？该操作无法撤销。',
|
||||
confirmText: '确认恢复',
|
||||
confirmColor: '#ef4444',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '已提交恢复指令', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mine-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f7f8;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18rpx;
|
||||
border: 1rpx solid #e7eeef;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
background: #f2f4f7;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #94a3b8;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #e7eeef;
|
||||
padding: 6rpx 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
height: 92rpx;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-item + .menu-item {
|
||||
border-top: 1rpx solid #f1f5f9;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.label.danger {
|
||||
color: #ef4444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
</style>
|
||||
127
attractor-ui/pages/mine/info/edit.vue
Normal file
127
attractor-ui/pages/mine/info/edit.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="example">
|
||||
<uni-forms ref="form" :model="user" labelWidth="80px">
|
||||
<uni-forms-item label="用户昵称" name="nickName">
|
||||
<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号码" name="phonenumber">
|
||||
<uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="邮箱" name="email">
|
||||
<uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="性别" name="sex" required>
|
||||
<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button type="primary" @click="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserProfile } from "@/api/system/user"
|
||||
import { updateUserProfile } from "@/api/system/user"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
nickName: "",
|
||||
phonenumber: "",
|
||||
email: "",
|
||||
sex: ""
|
||||
},
|
||||
sexs: [{
|
||||
text: '男',
|
||||
value: "0"
|
||||
}, {
|
||||
text: '女',
|
||||
value: "1"
|
||||
}],
|
||||
rules: {
|
||||
nickName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '用户昵称不能为空'
|
||||
}]
|
||||
},
|
||||
phonenumber: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '手机号码不能为空'
|
||||
}, {
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
errorMessage: '请输入正确的手机号码'
|
||||
}]
|
||||
},
|
||||
email: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '邮箱地址不能为空'
|
||||
}, {
|
||||
format: 'email',
|
||||
errorMessage: '请输入正确的邮箱地址'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUser()
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
this.user = response.data
|
||||
})
|
||||
},
|
||||
submit(ref) {
|
||||
this.$refs.form.validate().then(res => {
|
||||
updateUserProfile(this.user).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
44
attractor-ui/pages/mine/info/index.vue
Normal file
44
attractor-ui/pages/mine/info/index.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-list>
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserProfile } from "@/api/system/user"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
roleGroup: "",
|
||||
postGroup: ""
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUser()
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
this.user = response.data
|
||||
this.roleGroup = response.roleGroup
|
||||
this.postGroup = response.postGroup
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
85
attractor-ui/pages/mine/pwd/index.vue
Normal file
85
attractor-ui/pages/mine/pwd/index.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view class="pwd-retrieve-container">
|
||||
<uni-forms ref="form" :value="user" labelWidth="80px">
|
||||
<uni-forms-item name="oldPassword" label="旧密码">
|
||||
<uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="newPassword" label="新密码">
|
||||
<uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="confirmPassword" label="确认密码">
|
||||
<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
|
||||
</uni-forms-item>
|
||||
<button type="primary" @click="submit">提交</button>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateUserPwd } from "@/api/system/user"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
},
|
||||
rules: {
|
||||
oldPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '旧密码不能为空'
|
||||
}]
|
||||
},
|
||||
newPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '新密码不能为空',
|
||||
},
|
||||
{
|
||||
minLength: 6,
|
||||
maxLength: 20,
|
||||
errorMessage: '长度在 6 到 20 个字符'
|
||||
}
|
||||
]
|
||||
},
|
||||
confirmPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '确认密码不能为空'
|
||||
}, {
|
||||
validateFunction: (rule, value, data) => data.newPassword === value,
|
||||
errorMessage: '两次输入的密码不一致'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs.form.validate().then(res => {
|
||||
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.pwd-retrieve-container {
|
||||
padding-top: 36rpx;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
78
attractor-ui/pages/mine/setting/index.vue
Normal file
78
attractor-ui/pages/mine/setting/index.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view class="setting-container" :style="{height: `${windowHeight}px`}">
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToPwd">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-password menu-icon"></view>
|
||||
<view>修改密码</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleToUpgrade">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-refresh menu-icon"></view>
|
||||
<view>检查更新</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleCleanTmp">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-clean menu-icon"></view>
|
||||
<view>清理缓存</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu">
|
||||
<view class="cu-item item-box">
|
||||
<view class="content text-center" @click="handleLogout">
|
||||
<text class="text-black">退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
windowHeight: uni.getSystemInfoSync().windowHeight
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToPwd() {
|
||||
this.$tab.navigateTo('/pages/mine/pwd/index')
|
||||
},
|
||||
handleToUpgrade() {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
},
|
||||
handleCleanTmp() {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
},
|
||||
handleLogout() {
|
||||
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {}).finally(()=>{
|
||||
this.$tab.reLaunch('/pages/index')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
background-color: #FFFFFF;
|
||||
margin: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
color: #303133;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
189
attractor-ui/pages/register.vue
Normal file
189
attractor-ui/pages/register.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<view class="normal-login-container">
|
||||
<view class="logo-content align-center justify-center flex">
|
||||
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
||||
</image>
|
||||
<text class="title">若依移动端注册</text>
|
||||
</view>
|
||||
<view class="login-form-content">
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-user icon"></view>
|
||||
<input v-model="registerForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
||||
</view>
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-password icon"></view>
|
||||
<input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
||||
</view>
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-password icon"></view>
|
||||
<input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码" maxlength="20" />
|
||||
</view>
|
||||
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
||||
<view class="iconfont icon-code icon"></view>
|
||||
<input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
||||
<view class="login-code">
|
||||
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-btn">
|
||||
<button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="xieyi text-center">
|
||||
<text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg, register } from '@/api/login'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
codeUrl: "",
|
||||
captchaEnabled: true,
|
||||
globalConfig: getApp().globalData.config,
|
||||
registerForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
code: "",
|
||||
uuid: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode()
|
||||
},
|
||||
methods: {
|
||||
// 用户登录
|
||||
handleUserLogin() {
|
||||
this.$tab.navigateTo(`/pages/login`)
|
||||
},
|
||||
// 获取图形验证码
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||
if (this.captchaEnabled) {
|
||||
this.codeUrl = 'data:image/gif;base64,' + res.img
|
||||
this.registerForm.uuid = res.uuid
|
||||
}
|
||||
})
|
||||
},
|
||||
// 注册方法
|
||||
async handleRegister() {
|
||||
if (this.registerForm.username === "") {
|
||||
this.$modal.msgError("请输入您的账号")
|
||||
} else if (this.registerForm.password === "") {
|
||||
this.$modal.msgError("请输入您的密码")
|
||||
} else if (this.registerForm.confirmPassword === "") {
|
||||
this.$modal.msgError("请再次输入您的密码")
|
||||
} else if (this.registerForm.password !== this.registerForm.confirmPassword) {
|
||||
this.$modal.msgError("两次输入的密码不一致")
|
||||
} else if (this.registerForm.code === "" && this.captchaEnabled) {
|
||||
this.$modal.msgError("请输入验证码")
|
||||
} else {
|
||||
this.$modal.loading("注册中，请耐心等待...")
|
||||
this.register()
|
||||
}
|
||||
},
|
||||
// 用户注册
|
||||
async register() {
|
||||
register(this.registerForm).then(res => {
|
||||
this.$modal.closeLoading()
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({ url: `/pages/login` });
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
if (this.captchaEnabled) {
|
||||
this.getCode()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.normal-login-container {
|
||||
width: 100%;
|
||||
|
||||
.logo-content {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding-top: 15%;
|
||||
|
||||
image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-content {
|
||||
text-align: center;
|
||||
margin: 20px auto;
|
||||
margin-top: 15%;
|
||||
width: 80%;
|
||||
|
||||
.input-item {
|
||||
margin: 20px auto;
|
||||
background-color: #f5f6f7;
|
||||
height: 45px;
|
||||
border-radius: 20px;
|
||||
|
||||
.icon {
|
||||
font-size: 38rpx;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
margin-top: 40px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-code {
|
||||
height: 38px;
|
||||
float: right;
|
||||
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
22
attractor-ui/pages/team/detail.vue
Normal file
22
attractor-ui/pages/team/detail.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
团队配置
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
22
attractor-ui/pages/team/team.vue
Normal file
22
attractor-ui/pages/team/team.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
团队管理
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
208
attractor-ui/pages/work/index.vue
Normal file
208
attractor-ui/pages/work/index.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="notice-page">
|
||||
|
||||
|
||||
<scroll-view class="notice-list" scroll-y>
|
||||
<view v-for="item in announcementList" :key="item.id" class="notice-card">
|
||||
<view class="notice-head">
|
||||
<image class="avatar" :src="item.avatar" mode="aspectFill" />
|
||||
<view class="author-wrap">
|
||||
<text class="author">{{ item.author }}</text>
|
||||
<text class="publish-time">{{ item.publishTime }}</text>
|
||||
</view>
|
||||
<view class="type-tag">{{ item.type }}</view>
|
||||
</view>
|
||||
|
||||
<text class="notice-title">{{ item.title }}</text>
|
||||
<text class="notice-content">{{ item.content }}</text>
|
||||
|
||||
<view v-if="item.keywords && item.keywords.length" class="keyword-row">
|
||||
<text v-for="k in item.keywords" :key="k" class="keyword">#{{ k }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
announcementList: [
|
||||
{
|
||||
id: 1,
|
||||
author: '官方公告',
|
||||
avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
type: '版本更新',
|
||||
title: 'V2.3.0 上线：设备连接流程与控制链路全面优化',
|
||||
content: '本次版本重点优化了蓝牙连接时序与重连稳定性，新增设备连接历史缓存、候选设备自动扫描与连接确认流程，同时对参数页布局进行重构。若你在旧版本中遇到“连接成功但不可控”的情况，建议升级后重新绑定一次设备。',
|
||||
publishTime: '2026-03-27 10:30',
|
||||
keywords: ['连接优化', '稳定性', 'UI重构']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
author: '官方公告',
|
||||
avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
type: '功能调整',
|
||||
title: '设备页交互升级：新增首页快捷启停与运行状态同步',
|
||||
content: '为了减少操作路径，首页“我的设备”现已支持快捷启动/停止。操作成功后将同步更新设备状态标签（运行中/已停止），并写入最近控制时间。若首次点击出现等待，请保持设备开机并靠近手机，系统会自动完成连接补偿后发送指令。',
|
||||
publishTime: '2026-03-27 11:15',
|
||||
keywords: ['快捷控制', '状态同步', '设备页']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
author: '官方公告',
|
||||
avatar: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
|
||||
type: '体验优化',
|
||||
title: '公告中心改版：支持顶部搜索与精准筛选',
|
||||
content: '公告中心已由“消息流”改造为“公告流”，顶部新增搜索入口，可按标题、正文关键词和标签快速检索历史公告。后续我们还会补充“置顶公告”“版本分类”和“发布时间筛选”能力，便于你快速定位需要的信息。',
|
||||
publishTime: '2026-03-27 12:05',
|
||||
keywords: ['公告中心', '搜索', '信息检索']
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.setStorageSync('ANNOUNCEMENT_LIST', this.announcementList)
|
||||
},
|
||||
methods: {
|
||||
goSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/work/search'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notice-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f6f9;
|
||||
padding: 18rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #edf2f7;
|
||||
border-radius: 18rpx;
|
||||
padding: 18rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.nav-title-wrap {
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
margin-top: 4rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-entry {
|
||||
height: 64rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 14rpx;
|
||||
background: #f8fafc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.search-entry-text {
|
||||
font-size: 24rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.notice-list {
|
||||
height: calc(100vh - 210rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
border: 1rpx solid #edf2f7;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.notice-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.author-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 25rpx;
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.publish-time {
|
||||
font-size: 21rpx;
|
||||
color: #9ca3af;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #ecfeff;
|
||||
color: #0f766e;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
font-size: 29rpx;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
font-size: 25rpx;
|
||||
color: #334155;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.keyword-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
font-size: 20rpx;
|
||||
color: #0f766e;
|
||||
background: #f0fdfa;
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
}
|
||||
</style>
|
||||
207
attractor-ui/pages/work/search.vue
Normal file
207
attractor-ui/pages/work/search.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<view class="search-page">
|
||||
<view class="search-top">
|
||||
<view class="search-bar">
|
||||
<uni-icons type="search" size="16" color="#6B7280"></uni-icons>
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="keyword"
|
||||
placeholder="搜索公告标题、正文、标签"
|
||||
confirm-type="search"
|
||||
@confirm="onSearch"
|
||||
/>
|
||||
<button v-if="keyword" class="clear-btn" @click="clearKeyword">×</button>
|
||||
</view>
|
||||
<text class="cancel" @click="goBack">取消</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="result-list" scroll-y>
|
||||
<view v-if="filteredList.length === 0" class="empty-block">
|
||||
<text class="empty-title">未找到相关公告</text>
|
||||
<text class="empty-sub">试试更短关键词或更换标签词</text>
|
||||
</view>
|
||||
|
||||
<view v-for="item in filteredList" :key="item.id" class="result-card">
|
||||
<view class="result-head">
|
||||
<text class="result-type">{{ item.type }}</text>
|
||||
<text class="result-time">{{ item.publishTime }}</text>
|
||||
</view>
|
||||
<text class="result-title">{{ item.title }}</text>
|
||||
<text class="result-content">{{ item.content }}</text>
|
||||
<view class="result-keyword-row" v-if="item.keywords && item.keywords.length">
|
||||
<text v-for="k in item.keywords" :key="k" class="result-keyword">#{{ k }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
announcementList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredList() {
|
||||
const k = this.keyword.trim().toLowerCase()
|
||||
if (!k) return this.announcementList
|
||||
return this.announcementList.filter(item => {
|
||||
const keywordHit = Array.isArray(item.keywords)
|
||||
? item.keywords.some(tag => (tag || '').toLowerCase().includes(k))
|
||||
: false
|
||||
return (
|
||||
(item.type || '').toLowerCase().includes(k) ||
|
||||
(item.title || '').toLowerCase().includes(k) ||
|
||||
(item.content || '').toLowerCase().includes(k) ||
|
||||
keywordHit
|
||||
)
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const list = uni.getStorageSync('ANNOUNCEMENT_LIST')
|
||||
this.announcementList = Array.isArray(list) ? list : []
|
||||
},
|
||||
methods: {
|
||||
onSearch() {},
|
||||
clearKeyword() {
|
||||
this.keyword = ''
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-page {
|
||||
min-height: 100vh;
|
||||
background: #f4f6f9;
|
||||
padding: 18rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 14rpx;
|
||||
padding: 0 14rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 25rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
font-size: 38rpx;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
color: #0f766e;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.result-list {
|
||||
height: calc(100vh - 110rpx);
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #edf2f7;
|
||||
border-radius: 16rpx;
|
||||
padding: 18rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.result-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.result-type {
|
||||
font-size: 20rpx;
|
||||
color: #0f766e;
|
||||
background: #f0fdfa;
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
}
|
||||
|
||||
.result-time {
|
||||
font-size: 20rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
display: block;
|
||||
font-size: 27rpx;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #334155;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.result-keyword-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.result-keyword {
|
||||
font-size: 20rpx;
|
||||
color: #0f766e;
|
||||
background: #f0fdfa;
|
||||
border-radius: 8rpx;
|
||||
padding: 3rpx 8rpx;
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
text-align: center;
|
||||
padding: 90rpx 0;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #64748b;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user