登录、我的、仓储页面以及逻辑编写
This commit is contained in:
@@ -1,49 +1,49 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
|
||||
首页
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
|
||||
49
pages/intelligent/index.vue
Normal file
49
pages/intelligent/index.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
智能
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
166
pages/login/login.vue
Normal file
166
pages/login/login.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="huanying">HELLO，</view>
|
||||
<view class="huanyingText">
|
||||
欢迎登录
|
||||
<text>智汇仓储管理</text>
|
||||
</view>
|
||||
<view class="huanyingDes">
|
||||
<!-- 近距离、快响应，即时补给线 -->
|
||||
</view>
|
||||
<uv-form labelPosition="left" :model="formModel" labelWidth="80" :rules="rules" class="formContent" ref="formRef">
|
||||
<uv-form-item label="用户名" prop="userInfo.username" borderBottom>
|
||||
<uv-input v-model="formModel.userInfo.username" border="none" placeholder="请输入用户名" />
|
||||
</uv-form-item>
|
||||
<uv-form-item label="密码" prop="userInfo.password" borderBottom>
|
||||
<uv-input v-model="formModel.userInfo.password" :type="showPass ? '' : 'password'" border="none"
|
||||
placeholder="请输入密码" />
|
||||
<template v-slot:right>
|
||||
<uv-icon name="eye" @tap="changePassStatus" v-show="!showPass"></uv-icon>
|
||||
<uv-icon name="eye-off-outline" @tap="changePassStatus" v-show="showPass"></uv-icon>
|
||||
</template>
|
||||
</uv-form-item>
|
||||
<uv-form-item label="验证码" prop="userInfo.code" v-if="captchaEnabled" borderBottom>
|
||||
<uv-input v-model="formModel.userInfo.code" border="none" placeholder="请输入验证码" />
|
||||
<uv-image :src="codeUrl" @click="getCode" width="200rpx" height="70rpx"></uv-image>
|
||||
</uv-form-item>
|
||||
<uv-button type="primary" size="large" text="登 录" shape="circle" color="#199793" customStyle="margin-top: 50px"
|
||||
@click="submit"></uv-button>
|
||||
</uv-form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { userLogin, getCodeImg, getInfo } from "@/api/login"
|
||||
|
||||
const formModel = ref({
|
||||
userInfo: {
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: ""
|
||||
},
|
||||
})
|
||||
const formRef = ref()
|
||||
|
||||
const codeUrl = ref("")
|
||||
const captchaEnabled = ref(true)// 验证码开关
|
||||
|
||||
const showPass = ref(false)
|
||||
|
||||
const rules = ({
|
||||
'userInfo.username': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '输入用户名',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'userInfo.password': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写密码',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'userInfo.code': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写验证码',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
})
|
||||
function getCode() {
|
||||
getCodeImg().then(res => {
|
||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||
if (captchaEnabled.value) {
|
||||
codeUrl.value = "data:image/gif;base64," + res.img
|
||||
formModel.value.userInfo.uuid = res.uuid
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changePassStatus = () => {
|
||||
showPass.value = !showPass.value
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||||
formRef.value.validate().then(res => {
|
||||
userLogin(formModel.value.userInfo).then(res => {
|
||||
uni.setStorageSync('app_token', res.token)
|
||||
if (res) {
|
||||
getInfo().then(user => {
|
||||
if (user.code == 200) {
|
||||
uni.setStorageSync('app_user', user.user)
|
||||
uni.setStorageSync('app_roles', user.roles)
|
||||
uni.setStorageSync('app_permissions', user.permissions)
|
||||
uni.switchTab({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}).catch(e => {
|
||||
if (e?.data?.code == 500) {
|
||||
getCode()
|
||||
}
|
||||
|
||||
})
|
||||
}).catch(errors => {
|
||||
console.log(errors, '')
|
||||
})
|
||||
}
|
||||
getCode()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 0 56rpx;
|
||||
.title {
|
||||
font-size: 72rpx;
|
||||
}
|
||||
|
||||
.formContent {
|
||||
margin-top: 140rpx;
|
||||
}
|
||||
|
||||
.huanyingText {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
line-height: 44rpx;
|
||||
font-style: normal;
|
||||
margin-top: 38rpx;
|
||||
|
||||
text {
|
||||
color: #199793;
|
||||
}
|
||||
}
|
||||
|
||||
.huanying {
|
||||
margin-top: 130rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 72rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.huanyingDes {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
line-height: 44rpx;
|
||||
font-style: normal;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uv-input__content {
|
||||
flex-direction: column;
|
||||
align-items: unset;
|
||||
}
|
||||
</style>
|
||||
88
pages/my/index.vue
Normal file
88
pages/my/index.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<view class="userInfo">
|
||||
<uv-image src="../../static/avatar.png" width="120rpx" height="120rpx" shape="circle" />
|
||||
<view class="right">
|
||||
<h3 class="nickName">{{ userInfo?.nickName }}</h3>
|
||||
<!-- todo 这里仓库信息暂时没有 所以写死 -->
|
||||
<p class="tag">电网仓储公司</p>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 24rpx;">
|
||||
<uni-list>
|
||||
<uni-list-item v-for="(item, index) in menuList" :key="item.id" :title="item.title" :thumb="item.thumb"
|
||||
thumb-size="sm" link @click="item.click" clickable />
|
||||
</uni-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const userInfo = ref(null)
|
||||
const menuList = [
|
||||
{
|
||||
id: 1,
|
||||
title: '用户协议',
|
||||
thumb: '../../static/userAgreement.svg',
|
||||
click: () => {
|
||||
console.log('用户协议')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '发布交易信息',
|
||||
thumb: '../../static/postTradeInfo.svg',
|
||||
click: () => {
|
||||
console.log('发布交易信息')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '退出登录',
|
||||
thumb: '../../static/exit.svg',
|
||||
click: () => {
|
||||
console.log('退出登录')
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 获取缓存内的用户信息
|
||||
const getUserInfo = () => {
|
||||
uni.getStorage({
|
||||
key: 'app_user',
|
||||
success: ({ data }) => {
|
||||
userInfo.value = data
|
||||
},
|
||||
fail: (error) => { }
|
||||
})
|
||||
}
|
||||
getUserInfo();
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.userInfo {
|
||||
background-color: #fff;
|
||||
padding: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.right {
|
||||
margin-left: 48rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-top: 36rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
background-color: #4682B4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
274
pages/warehousing/index.vue
Normal file
274
pages/warehousing/index.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-card v-for="(item, index) in menuList" :key="item.id" :title="item.title" :isFull="true"
|
||||
class="custom-card">
|
||||
<view v-for="value in item.menuItem" :key="value.id" class="card_items" @click="value.click">
|
||||
<uv-image :src="value.icon" width="40rpx" height="40rpx" style="margin-top:10rpx" />
|
||||
<p> {{ value.title }} </p>
|
||||
</view>
|
||||
</uni-card>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const menuList = [
|
||||
{
|
||||
id: 'inventory',
|
||||
title: '库存信息',
|
||||
menuItem: [
|
||||
{
|
||||
id: "inventory_uniqueCodeInventory",
|
||||
icon: '../../static/warehousing/uniqueCodeInventory.png',
|
||||
title: '唯一码盘点',
|
||||
click: () => {
|
||||
console.log('唯一码盘点')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "inventory_ inventoryAgeQuery",
|
||||
icon: '../../static/warehousing/inventoryAgeQuery.png',
|
||||
title: '库龄查看',
|
||||
click: () => {
|
||||
console.log('库龄查看')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "inventory_inventoryWarning",
|
||||
icon: '../../static/warehousing/inventoryWarning.png',
|
||||
title: '库存预警',
|
||||
click: () => {
|
||||
console.log('库存预警')
|
||||
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'report',
|
||||
title: '报表',
|
||||
menuItem: [
|
||||
{
|
||||
id: "report_inventoryDailyReport",
|
||||
icon: '../../static/report/inventoryDailyReport.png',
|
||||
title: '库存日报',
|
||||
click: () => {
|
||||
console.log('库存日报')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "report_ inventoryMonthlyReport",
|
||||
icon: '../../static/report/inventoryMonthlyReport.png',
|
||||
title: '库存月报',
|
||||
click: () => {
|
||||
console.log('库存月报')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "report_companyInventoryReport",
|
||||
icon: '../../static/report/companyInventoryReport.png',
|
||||
title: '公司库存报表',
|
||||
click: () => {
|
||||
console.log('公司库存报表')
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "report_ warehouseInventoryReport",
|
||||
icon: '../../static/report/warehouseInventoryReport.png',
|
||||
title: '仓库库存报表',
|
||||
click: () => {
|
||||
console.log('仓库库存报表')
|
||||
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'declarationForm',
|
||||
title: '申报单',
|
||||
menuItem: [
|
||||
{
|
||||
id: "declarationForm_materialsQuery",
|
||||
icon: '../../static/declarationForm/materialsQuery.png',
|
||||
title: '物资查询',
|
||||
click: () => {
|
||||
console.log('物资查询')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "declarationForm_createDeclarationForm",
|
||||
icon: '../../static/declarationForm/createDeclarationForm.png',
|
||||
title: '申报单开单',
|
||||
click: () => {
|
||||
console.log('申报单开单')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "declarationForm_myDeclarationForms",
|
||||
icon: '../../static/declarationForm/myDeclarationForms.png',
|
||||
title: '我的申报单',
|
||||
click: () => {
|
||||
console.log('我的申报单')
|
||||
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'warehousingReceipt',
|
||||
title: '入库单',
|
||||
menuItem: [
|
||||
{
|
||||
id: "warehousingReceipt_stockInCreateOrder",
|
||||
icon: '../../static/stockInOrOut/stockInCreateOrder.png',
|
||||
title: '入库单开单',
|
||||
click: () => {
|
||||
console.log('入库单开单')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "warehousingReceipt_myWarehousingReceipt",
|
||||
icon: '../../static/stockInOrOut/myWarehousingReceipt.png',
|
||||
title: '我的入库单',
|
||||
click: () => {
|
||||
console.log('我的入库单')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "warehousingReceipt_stockIn",
|
||||
icon: '../../static/stockInOrOut/stockIn.png',
|
||||
title: '入库单入库',
|
||||
click: () => {
|
||||
console.log('入库单入库')
|
||||
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'outboundOrder',
|
||||
title: '出库单',
|
||||
menuItem: [
|
||||
{
|
||||
id: "outboundOrder_stockOutCreateOrder",
|
||||
icon: '../../static/stockInOrOut/stockOutCreateOrder.png',
|
||||
title: '出库单开单',
|
||||
click: () => {
|
||||
console.log('出库单开单')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "outboundOrder_myOutboundOrder",
|
||||
icon: '../../static/stockInOrOut/myOutboundOrder.png',
|
||||
title: '我的出库单',
|
||||
click: () => {
|
||||
console.log('我的出库单')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "outboundOrder_stockOut",
|
||||
icon: '../../static/stockInOrOut/stockOut.png',
|
||||
title: '出库单出库',
|
||||
click: () => {
|
||||
console.log('出库单出库')
|
||||
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'uniqueCode',
|
||||
title: '唯一码',
|
||||
menuItem: [
|
||||
{
|
||||
id: "uniqueCode_issueUniqueCode",
|
||||
icon: '../../static/uniqueCode/issueUniqueCode.png',
|
||||
title: '唯一码发放',
|
||||
click: () => {
|
||||
console.log('唯一码发放')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "uniqueCode_myUniqueCode",
|
||||
icon: '../../static/uniqueCode/myUniqueCode.png',
|
||||
title: '唯一码',
|
||||
click: () => {
|
||||
console.log('唯一码')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "uniqueCode_bindRFID",
|
||||
icon: '../../static/uniqueCode/bindRFID.png',
|
||||
title: '绑定RFID',
|
||||
click: () => {
|
||||
console.log('绑定RFID')
|
||||
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'transportCheckIn',
|
||||
title: '运输打卡',
|
||||
menuItem: [
|
||||
{
|
||||
id: "transportCheckIn_transportCheckIn",
|
||||
icon: '../../static/transportCheckIn/transportCheckIn.png',
|
||||
title: '运输打卡',
|
||||
click: () => {
|
||||
console.log('运输打卡')
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "transportCheckIn_myTransportCheckIn",
|
||||
icon: '../../static/transportCheckIn/myTransportCheckIn.png',
|
||||
title: '我的运输打卡',
|
||||
click: () => {
|
||||
console.log('我的运输打卡')
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 覆盖 uni-card 根容器样式 */
|
||||
::v-deep .custom-card.uni-card {
|
||||
margin-bottom: 6rpx !important;
|
||||
border-color: #F8F8FF !important;
|
||||
box-shadow: none !important;
|
||||
.uni-card__header {
|
||||
padding: 10rpx;
|
||||
|
||||
.uni-card__header-box {
|
||||
.uni-card__header-content-title {
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-card__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.card_items {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
margin-top: 10rpx;
|
||||
font-size: 12px;
|
||||
color: #1b1b1b;
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user