ry_mall
/
ry_app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加店铺设备页面以及对接接口（新增和列表接口

master
赵太阳 2026-04-08 22:24:20 +08:00
parent 62b5b05e25
commit 1b0f71b9db
5 changed files with 438 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
api/device.js Normal file
View File

@ -0,0 +1,24 @@
import request from '@/utils/request'
import config from '@/config'
const baseUrl = 'http://193.112.94.36:8081'
// 添加设备
export function addDevice(data) {
return request({
baseUrl: baseUrl,
url: '/mall/device/add',
method: 'post',
data: data
})
}
// 获取设备列表
export function getDeviceList(storeId) {
return request({
baseUrl: baseUrl,
url: `/mall/device/getDevice/${storeId}`,
method: 'get'
})
}

2
manifest.json
View File

@ -1,6 +1,6 @@
{
"name" : "海驰24",
"appid" : "__UNI__F8B45C3",
"appid" : "__UNI__C30329B",
"description" : "111",
"versionName" : "1.2.6",
"versionCode" : 106,

406
package_a/device/device.vue Normal file
View File

@ -0,0 +1,406 @@
<template>
<view class="container">
<!-- 设备列表 -->
<scroll-view scroll-y class="device-list">
<view class="empty-state" v-if="deviceList.length === 0 && !loading">
<text class="empty-text">暂无设备</text>
</view>
<view class="device-item" v-for="(item, index) in deviceList" :key="index">
<view class="device-header">
<text class="device-name">{{ item.deviceName }}</text>
<text class="device-id">ID: {{ item.deviceCode || item.id }}</text>
</view>
<view class="device-info">
<view class="info-row">
<text class="label">设备品牌：</text>
<text class="value">{{ item.deviceBrand || '-' }}</text>
</view>
<view class="info-row">
<text class="label">设备型号：</text>
<text class="value">{{ item.deviceModel || '-' }}</text>
</view>
</view>
</view>
<view v-if="loading" class="loading">
<text>加载中...</text>
</view>
</scroll-view>
<!-- 悬浮新增按钮 -->
<view class="fab-button" @click="openAddDialog">
<uni-icons type="plus" size="24" color="#fff"></uni-icons>
<!-- <text class="fab-text">新增</text>-->
</view>
<!-- 新增弹窗 -->
<uni-popup ref="addPopup" type="center" :mask-click="false">
<view class="dialog-content">
<view class="dialog-title">新增设备</view>
<scroll-view scroll-y class="form-container">
<view class="form-item">
<text class="form-label"><text class="required">*</text>设备编号</text>
<input class="form-input" v-model="form.deviceCode" placeholder="请输入设备编号/ID" />
</view>
<view class="form-item">
<text class="form-label"><text class="required">*</text>设备名称</text>
<input class="form-input" v-model="form.deviceName" placeholder="请输入设备名称" />
</view>
<view class="form-item">
<text class="form-label"><text class="required">*</text>设备类型</text>
<picker class="form-picker" @change="onTypeChange" :value="typeIndex" :range="deviceTypes" range-key="label">
<view class="picker-value">{{ typeIndex !== -1 ? deviceTypes[typeIndex].label : '请选择设备类型' }}</view>
</picker>
</view>
<view class="form-item">
<text class="form-label">设备品牌</text>
<input class="form-input" v-model="form.deviceBrand" placeholder="请输入设备品牌" />
</view>
<view class="form-item">
<text class="form-label">设备型号</text>
<input class="form-input" v-model="form.deviceModel" placeholder="请输入设备型号" />
</view>
<view class="form-item">
<text class="form-label">备注</text>
<textarea class="form-textarea" v-model="form.remark" placeholder="请输入备注信息"></textarea>
</view>
</scroll-view>
<view class="dialog-footer">
<button class="btn btn-cancel" @click="closeAddDialog">取消</button>
<button class="btn btn-confirm" @click="submitAdd" :loading="submitting">确定</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { addDevice, getDeviceList } from '@/api/device'
import { getStoreId } from '@/utils/auth'
export default {
data() {
return {
storeId: null,
deviceList: [],
loading: false,
submitting: false,
// 设备类型：1-摄像头 2-扫码枪 3-打印机 4-收银机
deviceTypes: [
{ label: '摄像头', value: 1 },
{ label: '扫码枪', value: 2 },
{ label: '打印机', value: 3 },
{ label: '收银机', value: 4 }
],
typeIndex: -1,
form: {
deviceCode: '',
deviceName: '',
deviceType: '',
deviceBrand: '',
deviceModel: '',
remark: ''
}
}
},
onLoad() {
this.storeId = getStoreId();
if (!this.storeId) {
uni.showToast({
title: '未获取到门店信息，请重新登录',
icon: 'none'
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
return;
}
this.fetchDeviceList();
},
methods: {
goBack() {
uni.navigateBack();
},
fetchDeviceList() {
this.loading = true;
getDeviceList(this.storeId).then(res => {
if (res.code === 200) {
this.deviceList = res.data || [];
} else {
uni.showToast({
title: res.msg || '获取设备列表失败',
icon: 'none'
});
}
}).catch(err => {
console.error(err);
uni.showToast({
title: '获取失败，请重试',
icon: 'none'
});
}).finally(() => {
this.loading = false;
});
},
openAddDialog() {
// 重置表单
this.form = {
deviceCode: '',
deviceName: '',
deviceType: '',
deviceBrand: '',
deviceModel: '',
remark: ''
};
this.typeIndex = -1;
this.$refs.addPopup.open();
},
closeAddDialog() {
this.$refs.addPopup.close();
},
onTypeChange(e) {
this.typeIndex = e.detail.value;
this.form.deviceType = this.deviceTypes[this.typeIndex].value;
},
submitAdd() {
if (!this.form.deviceCode) {
return uni.showToast({ title: '请输入设备编号', icon: 'none' });
}
if (!this.form.deviceName) {
return uni.showToast({ title: '请输入设备名称', icon: 'none' });
}
if (!this.form.deviceType) {
return uni.showToast({ title: '请选择设备类型', icon: 'none' });
}
this.submitting = true;
const submitData = {
...this.form,
storeId: this.storeId
};
addDevice(submitData).then(res => {
if (res.code === 200) {
uni.showToast({ title: '添加成功', icon: 'success' });
this.closeAddDialog();
this.fetchDeviceList();
} else {
uni.showToast({ title: res.msg || '添加失败', icon: 'none' });
}
}).catch(err => {
console.error(err);
uni.showToast({ title: '网络错误，添加失败', icon: 'none' });
}).finally(() => {
this.submitting = false;
});
}
}
}
</script>
<style scoped lang="scss">
.container {
min-height: 100vh;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
position: relative;
}
.device-list {
flex: 1;
padding: 20rpx;
}
.device-item {
background-color: #fff;
border-radius: 12rpx;
padding: 24rpx;
margin-bottom: 20rpx;
}
.device-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
padding-bottom: 16rpx;
border-bottom: 1rpx solid #eee;
}
.device-name {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.device-id {
font-size: 24rpx;
color: #999;
}
.device-info {
display: flex;
flex-direction: column;
gap: 12rpx;
}
.info-row {
display: flex;
font-size: 26rpx;
}
.info-row .label {
color: #666;
width: 140rpx;
}
.info-row .value {
color: #333;
flex: 1;
}
.empty-state {
padding: 100rpx 0;
text-align: center;
}
.empty-text {
color: #999;
font-size: 28rpx;
}
.loading {
text-align: center;
padding: 30rpx;
color: #999;
font-size: 28rpx;
}
/* 悬浮按钮样式 */
.fab-button {
position: fixed;
right: 40rpx;
bottom: 100rpx;
width: 60rpx;
height: 60rpx;
background-color: #e62318;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(230, 35, 24, 0.4);
z-index: 99;
}
.fab-text {
color: #fff;
font-size: 22rpx;
margin-top: 4rpx;
}
/* 弹窗样式 */
.dialog-content {
background-color: #fff;
width: 650rpx;
border-radius: 16rpx;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 80vh;
}
.dialog-title {
font-size: 32rpx;
font-weight: bold;
text-align: center;
padding: 30rpx 0;
border-bottom: 1px solid #eee;
}
.form-container {
padding: 30rpx;
max-height: 60vh;
}
.form-item {
margin-bottom: 24rpx;
}
.form-label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 12rpx;
}
.required {
color: #e62318;
margin-right: 4rpx;
}
.form-input, .form-picker {
width: 100%;
height: 72rpx;
border: 1px solid #ddd;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 26rpx;
box-sizing: border-box;
}
.form-picker {
display: flex;
align-items: center;
}
.picker-value {
flex: 1;
}
.form-textarea {
width: 100%;
height: 160rpx;
border: 1px solid #ddd;
border-radius: 8rpx;
padding: 20rpx;
font-size: 26rpx;
box-sizing: border-box;
}
.dialog-footer {
display: flex;
border-top: 1px solid #eee;
}
.btn {
flex: 1;
height: 88rpx;
line-height: 88rpx;
text-align: center;
font-size: 30rpx;
border: none;
border-radius: 0;
background-color: #fff;
}
.btn::after {
border: none;
}
.btn-cancel {
color: #666;
border-right: 1px solid #eee;
}
.btn-confirm {
color: #e62318;
}
</style>

1
pages.json
View File

@ -30,6 +30,7 @@
{
"root": "package_a",
"pages": [
{ "path": "device/device", "style": { "navigationBarTitleText": "店铺设备" } },
{ "path": "product/product", "style": { "navigationBarTitleText": "" } },
{ "path": "translation/translation", "style": { "navigationBarTitleText": "录入清单" } },
{ "path": "addProduct/addProduct", "style": { "navigationBarTitleText": "" } },

6
pages/index.vue
View File

@ -320,6 +320,12 @@ export default {
this.selectedShop = type;
},
navigateTo(page) {
if (page === '店铺设备') {
uni.navigateTo({
url: '/package_a/device/device'
});
return;
}
uni.showToast({
title: `跳转到${page}`,
icon: 'none'