xunyingcloud/totustec-unipp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改设备详情

Browse Source
This commit is contained in:
18796357645 2025-07-15 16:37:09 +08:00
parent 73536a9cc1
commit 164138577c
3 changed files with 770 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@ -4,3 +4,5 @@ export const BASE_API_URL = "https://online.totustec.com/api";
// 静态数据 // 静态数据
export const BASE_IMG_URL = "https://online.totustec.com/upload"; export const BASE_IMG_URL = "https://online.totustec.com/upload";
export const BASE_STOKECT_URL = "ws://online.totustec.com/webSocket/vue"

464
pages/deviceManage/index.vue
View File

@ -5,7 +5,8 @@
<view class="top_nav_warp"> <view class="top_nav_warp">
<view>设备管理</view> <view>设备管理</view>
<view class="back_button_warp" @click="goBack()"> <view class="back_button_warp" @click="goBack()">
<image class="back_button_icon" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image> <image class="back_button_icon"
src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
</view> </view>
</view> </view>
</view> </view>
@ -19,7 +20,8 @@
@click="getVideoImg('video')"> @click="getVideoImg('video')">
获取视频 获取视频
</view> </view>
<view class="select_device_item" :class="{ device_active: getType == 'img' }" @click="getVideoImg('img')"> <view class="select_device_item" :class="{ device_active: getType == 'img' }"
@click="getVideoImg('img')">
获取图片</view> 获取图片</view>
</view> </view>
</view> </view>
@ -43,30 +45,13 @@
<!-- 设备状态 --> <!-- 设备状态 -->
<view class="device_status_warp" v-if="deviceType == 1"> <view class="device_status_warp" v-if="deviceType == 1">
<!-- 设备名称 --> <view class="device_status_item" v-for="(field, idx) in statusFields" :key="idx">
<view class="device_status_item">
<view class="statusItem_modal_warp"> <view class="statusItem_modal_warp">
<view class="item_content_warp"> <view class="item_content_warp">
<view class="item_content_left">设备名称</view> <view class="item_content_left">{{ field.label }}</view>
<view class="item_content_middel">{{
deviceDetail.brand
}}</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 打印状态 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">状态</view>
<view class="item_content_middel"> <view class="item_content_middel">
<!-- 状态特殊处理 -->
<template v-if="field.isStatus">
<view class="label_warp" v-if="deviceDetail.status == 0"> <view class="label_warp" v-if="deviceDetail.status == 0">
<view class="label_icon"></view> <view class="label_icon"></view>
<view class="label_text">空闲</view> <view class="label_text">空闲</view>
@ -87,73 +72,33 @@
<view class="label_icon" style="background: #999999"></view> <view class="label_icon" style="background: #999999"></view>
<view class="label_text" style="color: #999999">断开</view> <view class="label_text" style="color: #999999">断开</view>
</view> </view>
</view> </template>
</view> <!-- 子状态特殊处理 -->
<template v-else-if="field.isErrorStatus">
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"> </view>
</view>
</view>
</view>
</view>
<!-- 子状态 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">子状态</view>
<view class="item_content_middel">
<view class="label_warp2"> <view class="label_warp2">
<!-- 状态图标颜色映射 --> <view class="label_icon"
<view class="label_icon" :style="{ :style="{ background: getStatusColor(deviceDetail.errorStatus) }">
background: getStatusColor(deviceDetail.errorStatus), </view>
}"></view> <view class="label_text label_text2"
<!-- 状态文字条件渲染 --> :style="{ color: getStatusColor(deviceDetail.errorStatus) }">
<view class="label_text label_text2" :style="{
color: getStatusColor(deviceDetail.errorStatus),
}">
{{ getStatusText(deviceDetail.errorStatus) }} {{ getStatusText(deviceDetail.errorStatus) }}
</view> </view>
</view> </view>
</view> </template>
</view> <!-- 错误码特殊处理 -->
<template v-else-if="field.isErrorCode">
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 当前时间 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">当前时间</view>
<view class="item_content_middel">{{ getCurrentTime() }}</view>
</view>
<view class="itemContent_line_warp">
<view class="item_content_model">
<view class="item_content_line"></view>
</view>
</view>
</view>
</view>
<!-- 错误码 -->
<view class="device_status_item">
<view class="statusItem_modal_warp">
<view class="item_content_warp">
<view class="item_content_left">错误码</view>
<view class="item_content_middel">
<!-- {{deviceDetail.errorStatus}} -->
{{ deviceDetail.errorStatus === -1 ? '断开' : deviceDetail.errorStatus }} {{ deviceDetail.errorStatus === -1 ? '断开' : deviceDetail.errorStatus }}
</template>
<!-- 当前时间特殊处理 -->
<template v-else-if="field.isCurrentTime">
{{ getCurrentTime() }}
</template>
<!-- 其他字段 -->
<template v-else>
{{ deviceDetail[field.key] }}
</template>
</view> </view>
</view> </view>
<view class="itemContent_line_warp"> <view class="itemContent_line_warp">
<view class="item_content_model"> <view class="item_content_model">
<view class="item_content_line"></view> <view class="item_content_line"></view>
@ -170,7 +115,8 @@
<input class="deviceN_input" type="text" v-model="deviceName" /> <input class="deviceN_input" type="text" v-model="deviceName" />
<view class="clear_deviceN_warp"> <view class="clear_deviceN_warp">
<image class="clear_deviceN_icon" @click="deviceName = ''" v-if="deviceName" <image class="clear_deviceN_icon" @click="deviceName = ''" v-if="deviceName"
src="https://online.totustec.com/upload/deviceManage/clear_deviceN_icon.png"></image> src="https://online.totustec.com/upload/deviceManage/clear_deviceN_icon.png">
</image>
</view> </view>
</view> </view>
</view> </view>
@ -182,7 +128,8 @@
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#cccccc',
}"> }">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png"> <image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> </image>
<view class="operation_btn_txt">开始打印</view> <view class="operation_btn_txt">开始打印</view>
</view> </view>
@ -195,7 +142,8 @@
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#cccccc',
}"> }">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/print_status1.png"></image> <image class="operation_btn_icon"
src="https://online.totustec.com/upload/print_status1.png"></image>
<view class="operation_btn_txt">继续打印</view> <view class="operation_btn_txt">继续打印</view>
</view> </view>
</view> </view>
@ -203,11 +151,12 @@
<view class="device_operation_warp"> <view class="device_operation_warp">
<view class="device_operation_btn" @click="operationData('PAUSE')" :style="{ <view class="device_operation_btn" @click="operationData('PAUSE')" :style="{
backgroundColor: backgroundColor:
deviceDetail.status == 2 && deviceDetail.status != -1 (deviceDetail.status == 1 || deviceDetail.status == 2) && deviceDetail.status != -1
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#cccccc',
}"> }">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status1.png"> <image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status1.png">
</image> </image>
<view class="operation_btn_txt">暂停打印</view> <view class="operation_btn_txt">暂停打印</view>
</view> </view>
@ -218,19 +167,22 @@
? '#ffffff' ? '#ffffff'
: '#cccccc', : '#cccccc',
}"> }">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/print_status1.png"></image> <image class="operation_btn_icon"
src="https://online.totustec.com/upload/print_status1.png"></image>
<view class="operation_btn_txt">退出打印</view> <view class="operation_btn_txt">退出打印</view>
</view> </view>
</view> </view>
<view class="device_operation_warp"> <view class="device_operation_warp">
<view class="device_operation_btn" @click="sendWsCommand('ALARM_CONTINUE')"> <view class="device_operation_btn" @click="sendWsCommand('ALARM_CONTINUE')">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png"> <image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status2.png">
</image> </image>
<view class="operation_btn_txt">报警继续</view> <view class="operation_btn_txt">报警继续</view>
</view> </view>
<view class="device_operation_btn" @click="sendWsCommand('ALARM_EXIT')"> <view class="device_operation_btn" @click="sendWsCommand('ALARM_EXIT')">
<image class="operation_btn_icon" src="https://online.totustec.com/upload/deviceManage/print_status2.png"> <image class="operation_btn_icon"
src="https://online.totustec.com/upload/deviceManage/print_status2.png">
</image> </image>
<view class="operation_btn_txt">报警退出</view> <view class="operation_btn_txt">报警退出</view>
</view> </view>
@ -241,8 +193,11 @@
</view> </view>
</template> </template>
<script> <script>
export default { import {
data () { BASE_STOKECT_URL
} from "@/config.js";
export default {
data() {
return { return {
deviceName: "", deviceName: "",
title: "Hello", title: "Hello",
@ -252,15 +207,93 @@ export default {
deviceCode: "", // 存储接收到的设备编码 deviceCode: "", // 存储接收到的设备编码
deviceDetail: {}, // 存储设备详情数据 deviceDetail: {}, // 存储设备详情数据
statusMap: { statusMap: {
0: { text: "正常", color: "#00d195" }, // 绿色 0: {
1: { text: "文件校验失败", color: "#ff0000" }, // 红色 text: "正常",
2: { text: "设备或加密错误", color: "#ff0000" }, color: "#00d195"
3: { text: "打印准备过程出错", color: "#ff0000" }, // 橙色 }, // 绿色
4: { text: "打印出错", color: "#ff0000" }, 1: {
5: { text: "加液失败", color: "#ff9800" }, text: "文件校验失败",
6: { text: "铲件失败", color: "#ff9800" }, color: "#ff0000"
7: { text: "图片异物", color: "#ff0000" }, }, // 红色
2: {
text: "设备或加密错误",
color: "#ff0000"
}, },
3: {
text: "打印准备过程出错",
color: "#ff0000"
}, // 橙色
4: {
text: "打印出错",
color: "#ff0000"
},
5: {
text: "加液失败",
color: "#ff9800"
},
6: {
text: "铲件失败",
color: "#ff9800"
},
7: {
text: "图片异物",
color: "#ff0000"
},
},
// 新增：设备状态字段配置
statusFields: [{
label: '设备名称',
key: 'brand'
},
{
label: '状态',
key: 'status',
isStatus: true
},
{
label: '子状态',
key: 'errorStatus',
isErrorStatus: true
},
{
label: '当前打印层数',
key: 'currentLayer'
},
{
label: '打印任务总层数',
key: 'totalLayer'
},
{
label: '已打印时间(s)',
key: 'printedTime'
},
{
label: '总打印时间(s)',
key: 'totalTime'
},
{
label: '打印文件名称',
key: 'fileName'
},
{
label: '错误码',
key: 'errorStatus',
isErrorCode: true
},
{
label: '当前任务数量',
key: 'Task'
},
{
label: '总共任务数量',
key: 'totalTask'
},
{
label: '当前时间',
key: 'currentTime',
isCurrentTime: true
}
],
// WebSocket 相关状态 // WebSocket 相关状态
socketTask: null, // uni-app 的 WebSocket 任务实例 socketTask: null, // uni-app 的 WebSocket 任务实例
@ -270,7 +303,7 @@ export default {
socketData: {}, socketData: {},
}; };
}, },
onLoad (options) { onLoad(options) {
const systemInfo = wx.getSystemInfoSync(); const systemInfo = wx.getSystemInfoSync();
const { const {
statusBarHeight, // 状态栏高度（单位：px） statusBarHeight, // 状态栏高度（单位：px）
@ -288,13 +321,13 @@ export default {
this.connectWebSocket(); // 初始化 WebSocket 连接 this.connectWebSocket(); // 初始化 WebSocket 连接
}, },
onUnload () { onUnload() {
this.closeWebSocket(); // 页面卸载时关闭连接 this.closeWebSocket(); // 页面卸载时关闭连接
}, },
methods: { methods: {
// ---------------------- WebSocket 核心方法 ---------------------- // ---------------------- WebSocket 核心方法 ----------------------
connectWebSocket () { connectWebSocket() {
const wsUrl = "ws://online.totustec.com/webSocket/vue"; const wsUrl = BASE_STOKECT_URL;
// 初始化 WebSocket 连接（使用 uni-app 接口） // 初始化 WebSocket 连接（使用 uni-app 接口）
this.socketTask = uni.connectSocket({ this.socketTask = uni.connectSocket({
@ -311,7 +344,7 @@ export default {
}); });
}, },
listenSocketMessage () { listenSocketMessage() {
// 监听 WebSocket 消息 // 监听 WebSocket 消息
uni.onSocketMessage((event) => { uni.onSocketMessage((event) => {
console.log("event", event); console.log("event", event);
@ -322,7 +355,7 @@ export default {
}); });
}, },
closeWebSocket () { closeWebSocket() {
// 关闭连接并清理资源 // 关闭连接并清理资源
if (this.socketTask) { if (this.socketTask) {
uni.closeSocket(); uni.closeSocket();
@ -332,7 +365,7 @@ export default {
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
}, },
tryReconnect () { tryReconnect() {
// 自动重连机制 // 自动重连机制
clearTimeout(this.reconnectTimer); clearTimeout(this.reconnectTimer);
this.reconnectTimer = setTimeout(() => { this.reconnectTimer = setTimeout(() => {
@ -341,7 +374,7 @@ export default {
}, this.reconnectInterval); }, this.reconnectInterval);
}, },
updateDeviceStatus (message) { updateDeviceStatus(message) {
console.log("实时消息", message); console.log("实时消息", message);
// CLOSE、STATUS 你那就刷新接口就行 // CLOSE、STATUS 你那就刷新接口就行
if (message.msgType == "CLOSE" || message.msgType == "STATUS") { if (message.msgType == "CLOSE" || message.msgType == "STATUS") {
@ -349,7 +382,10 @@ export default {
} }
// ERROR 抛出异常信息 // ERROR 抛出异常信息
if (message.msgType == "ERROR") { if (message.msgType == "ERROR") {
uni.showToast({ title: message.msg, icon: "none" }); uni.showToast({
title: message.msg,
icon: "none"
});
} }
// INFO 返回视频/图片地址 // INFO 返回视频/图片地址
if (message.msgType == "INFO") { if (message.msgType == "INFO") {
@ -373,7 +409,7 @@ export default {
* 发送 WebSocket 指令 * 发送 WebSocket 指令
* @param {string} command - 指令值（如 PAUSE、CONTINUE 等） * @param {string} command - 指令值（如 PAUSE、CONTINUE 等）
*/ */
sendWsCommand (command) { sendWsCommand(command) {
if (!this.isSocketConnected) { if (!this.isSocketConnected) {
console.warn("WebSocket 未连接，无法发送指令"); console.warn("WebSocket 未连接，无法发送指令");
return; return;
@ -406,7 +442,7 @@ export default {
}); });
}, },
operationData (type) { operationData(type) {
if (type == "PRINT") { if (type == "PRINT") {
if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) { if (this.deviceDetail.status == 0 && this.deviceDetail.status != -1) {
this.sendWsCommand(type); this.sendWsCommand(type);
@ -422,17 +458,38 @@ export default {
} }
} }
if (type == 'PAUSE') { if (type == 'PAUSE') {
if (this.deviceDetail.status == 2 && this.deviceDetail.status != -1) { if ((this.deviceDetail.status == 1 || this.deviceDetail.status == 2) && this.deviceDetail.status != -
1) {
uni.showModal({
title: '提示',
content: '确定要暂停打印吗？',
confirmText: '确定',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
this.sendWsCommand(type); this.sendWsCommand(type);
} }
} }
});
}
}
if (type == 'EXIT') { if (type == 'EXIT') {
if (this.deviceDetail.status != 0 && this.deviceDetail.status != -1) { if (this.deviceDetail.status != 0 && this.deviceDetail.status != -1) {
uni.showModal({
title: '提示',
content: '确定要退出打印吗？',
confirmText: '确定',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
this.sendWsCommand(type); this.sendWsCommand(type);
} }
} }
});
}
}
}, },
getVideoImg (type) { getVideoImg(type) {
if (type == "img") { if (type == "img") {
this.getType = "img"; this.getType = "img";
this.sendWsCommand("IMAGE"); this.sendWsCommand("IMAGE");
@ -442,20 +499,20 @@ export default {
} }
}, },
// 获取状态文字 // 获取状态文字
getStatusText (status) { getStatusText(status) {
if (status == -1) { if (status == -1) {
return "断开"; return "断开";
} }
return this.statusMap[status]?.text || ""; return this.statusMap[status]?.text || "";
}, },
// 获取状态颜色 // 获取状态颜色
getStatusColor (status) { getStatusColor(status) {
if (status == -1) { if (status == -1) {
return "#999999"; return "#999999";
} }
return this.statusMap[status]?.color; // 默认灰色 return this.statusMap[status]?.color; // 默认灰色
}, },
getCurrentTime () { getCurrentTime() {
const date = new Date(); const date = new Date();
const year = date.getFullYear(); const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); const month = String(date.getMonth() + 1).padStart(2, "0");
@ -463,12 +520,12 @@ export default {
const hours = String(date.getHours()).padStart(2, "0"); const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0");
return `${year}.${month}.${day} ${hours}:${minutes}`; return `${year}年${month}月${day}日${hours}时${minutes}分`;
}, },
goBack () { goBack() {
uni.navigateBack(); uni.navigateBack();
}, },
async getDeviceDetail () { async getDeviceDetail() {
try { try {
const res = await uni.request({ const res = await uni.request({
url: `https://online.totustec.com/api/api/front/device/get`, url: `https://online.totustec.com/api/api/front/device/get`,
@ -488,27 +545,30 @@ export default {
} }
} catch (error) { } catch (error) {
console.error("获取设备详情失败:", error); console.error("获取设备详情失败:", error);
uni.showToast({ title: "获取设备信息失败", icon: "none" }); uni.showToast({
title: "获取设备信息失败",
icon: "none"
});
} }
}, },
}, },
}; };
</script> </script>
<!-- 临时样式 --> <!-- 临时样式 -->
<style scoped> <style scoped>
.operation_btn_icon { .operation_btn_icon {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
.operation_btn_txt { .operation_btn_txt {
font-weight: 600; font-weight: 600;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
} }
.device_operation_btn { .device_operation_btn {
width: 320rpx; width: 320rpx;
height: 68rpx; height: 68rpx;
background: #ffffff; background: #ffffff;
@ -516,16 +576,16 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.device_operation_warp { .device_operation_warp {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
.deviceN_input_tip { .deviceN_input_tip {
margin: 24rpx 0 70rpx 0; margin: 24rpx 0 70rpx 0;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
@ -533,33 +593,33 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.device_control_warp { .device_control_warp {
width: 710rpx; width: 710rpx;
margin-top: 32rpx; margin-top: 32rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.deviceN_input_warp { .deviceN_input_warp {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.device_name_txt { .device_name_txt {
font-weight: 600; font-weight: 600;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
} }
.deviceN_input_area { .deviceN_input_area {
position: relative; position: relative;
} }
.clear_deviceN_warp { .clear_deviceN_warp {
position: absolute; position: absolute;
right: 16rpx; right: 16rpx;
top: 0; top: 0;
@ -567,14 +627,14 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 99; z-index: 99;
} }
.clear_deviceN_icon { .clear_deviceN_icon {
width: 26rpx; width: 26rpx;
height: 26rpx; height: 26rpx;
} }
.deviceN_input { .deviceN_input {
width: 419rpx; width: 419rpx;
height: 74rpx; height: 74rpx;
background: #ffffff; background: #ffffff;
@ -583,108 +643,108 @@ export default {
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #666666; color: #666666;
} }
.label_text { .label_text {
margin-left: 8rpx; margin-left: 8rpx;
} }
.label_text2 { .label_text2 {
color: #ff0000; color: #ff0000;
} }
.label_warp { .label_warp {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.label_warp2 { .label_warp2 {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.label_icon { .label_icon {
width: 18rpx; width: 18rpx;
height: 18rpx; height: 18rpx;
background: #cccccc; background: #cccccc;
border-radius: 100%; border-radius: 100%;
} }
.item_content_model { .item_content_model {
padding: 0 20rpx; padding: 0 20rpx;
} }
.item_content_line { .item_content_line {
width: 100%; width: 100%;
height: 1rpx; height: 1rpx;
background-color: #ededed; background-color: #ededed;
} }
.itemContent_line_warp { .itemContent_line_warp {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.item_content_middel { .item_content_middel {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #666666; color: #666666;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.item_content_left { .item_content_left {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 600; font-weight: 600;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
margin-left: 5rpx; margin-left: 5rpx;
width: 222rpx; width: 222rpx;
} }
.item_content_warp { .item_content_warp {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.statusItem_modal_warp { .statusItem_modal_warp {
padding: 0 22rpx; padding: 0 22rpx;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
} }
.device_status_item { .device_status_item {
width: 100%; width: 100%;
height: 81rpx; height: 81rpx;
} }
.device_status_warp { .device_status_warp {
width: 710rpx; width: 710rpx;
background: #ffffff; background: #ffffff;
margin-top: 23rpx; margin-top: 23rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.modal_warp { .modal_warp {
padding: 0 16rpx; padding: 0 16rpx;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.device_active { .device_active {
background-color: #ffffff !important; background-color: #ffffff !important;
} }
.select_device_item { .select_device_item {
width: 329rpx; width: 329rpx;
height: 56rpx; height: 56rpx;
background: #e2edff; background: #e2edff;
@ -696,46 +756,46 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.select_device_warp { .select_device_warp {
width: 710rpx; width: 710rpx;
height: 68rpx; height: 68rpx;
background: #e2edff; background: #e2edff;
border-radius: 60rpx; border-radius: 60rpx;
} }
.content_warp { .content_warp {
padding: 16rpx 20rpx 0 20rpx; padding: 16rpx 20rpx 0 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.content_area_warp { .content_area_warp {
width: 100%; width: 100%;
} }
</style> </style>
<style scoped> <style scoped>
.device_model { .device_model {
width: 33%; width: 33%;
} }
.img_video_warp { .img_video_warp {
width: 100%; width: 100%;
height: 281rpx; height: 281rpx;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
border-radius: 20rpx; border-radius: 20rpx;
margin: 22rpx 0 32rpx 0; margin: 22rpx 0 32rpx 0;
} }
.back_button_icon { .back_button_icon {
transform: rotate(180deg); transform: rotate(180deg);
width: 28rpx; width: 28rpx;
height: 28rpx; height: 28rpx;
} }
.back_button_warp { .back_button_warp {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -744,9 +804,9 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 20rpx; padding-left: 20rpx;
} }
.contai_warp { .contai_warp {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -755,20 +815,20 @@ export default {
min-height: 100vh; min-height: 100vh;
background-color: #f1f6fc; background-color: #f1f6fc;
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.top_area_warp { .top_area_warp {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
} }
.top_status_area { .top_status_area {
width: 100%; width: 100%;
} }
.top_nav_warp { .top_nav_warp {
width: 100%; width: 100%;
height: 88rpx; height: 88rpx;
display: flex; display: flex;
@ -781,5 +841,5 @@ export default {
position: relative; position: relative;
z-index: 5; z-index: 5;
position: relative; position: relative;
} }
</style> </style>

23
pages/mine/update.vue
View File

@ -17,9 +17,7 @@
<view class="profile_item"> <view class="profile_item">
<text class="item_label">头像</text> <text class="item_label">头像</text>
<view class="avatar_wrapper" @click="changeAvatar"> <view class="avatar_wrapper" @click="changeAvatar">
<image class="avatar" <image class="avatar" :src="userInfo.avatar || user" mode="aspectFill"></image>
:src="userInfo.avatar || user"
mode="aspectFill"></image>
</view> </view>
</view> </view>
@ -36,17 +34,20 @@
</template> </template>
<script> <script>
import { BASE_API_URL,BASE_IMG_URL } from "@/config.js"; import {
BASE_API_URL,
BASE_IMG_URL
} from "@/config.js";
export default { export default {
data() { data() {
return { return {
back:BASE_IMG_URL + "/minePage/back.png", //返回图标 back: BASE_IMG_URL + "/minePage/back.png", //返回图标
user:BASE_IMG_URL + "/minePage/user.png", //用户默认图标 user: BASE_IMG_URL + "/minePage/user.png", //用户默认图标
statusBarHeight: 0, statusBarHeight: 0,
userInfo: { userInfo: {
nikename: "", nikename: "",
avatar:"", avatar: "",
phone:"" phone: ""
} }
}; };
}, },
@ -86,8 +87,9 @@
}, },
success: (uploadRes) => { success: (uploadRes) => {
console.log(uploadRes) console.log(uploadRes)
this.userInfo.avatar= this.userInfo.avatar =
"https://online.totustec.com/upload/file/image/" + uploadRes.data; "https://online.totustec.com/upload/file/image/" + uploadRes
.data;
uni.showToast({ uni.showToast({
title: "头像上传成功" title: "头像上传成功"
}); });
@ -182,6 +184,7 @@
position: relative; position: relative;
z-index: 5; z-index: 5;
} }
.back_icon { .back_icon {
position: absolute; position: absolute;
left: 20rpx; left: 20rpx;