@ -1,308 +0,0 @@ | |||
<template> | |||
<view class="container"> | |||
<!-- 顶部标题 --> | |||
<view class="header"> | |||
<view class="header_info"> | |||
<text class="header_text" :title="title">{{title}}</text> | |||
<text style="margin-right: 10rpx; font-size: 40rpx;">|</text> | |||
<view @click="change_text" class="header_change"> | |||
<text >切换</text> | |||
<uni-icons type="right" size="30" color="#c2d4de" :size="1"></uni-icons> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 轮播图 --> | |||
<swiper class="swiper" indicator-dots autoplay interval="3000" duration="500" indicator-color="#ffffff" indicator-active-color="#707070"> | |||
<swiper-item> | |||
<image class="swiper-image" src="/static/logo.png" mode="scaleToFill"></image> | |||
</swiper-item> | |||
<swiper-item> | |||
<image class="swiper-image" src="/static/logo.png" mode="scaleToFill"></image> | |||
</swiper-item> | |||
<swiper-item> | |||
<image class="swiper-image" src="/static/logo.png" mode="scaleToFill"></image> | |||
</swiper-item> | |||
</swiper> | |||
<!-- 公告 --> | |||
<view class = "swiper_ac_container"> | |||
<uni-icons custom-prefix="iconfont" type="qungonggao"></uni-icons> | |||
<swiper class="swiper_ac" autoplay circular vertical='true'> | |||
<swiper-item v-for="(item, index) in announcements" :key="index"> | |||
<view class="announcement-item"> | |||
<text class="announcement-text" style="color: #397496;">{{ item.title }}</text> | |||
</view> | |||
</swiper-item> | |||
</swiper> | |||
</view> | |||
<view class="order_Entry_container" @click="orderEntry"> | |||
<uni-icons ></uni-icons> | |||
<text style="color: #115881;font-weight: bold;margin-left: 20rpx;" >录入订单</text> | |||
<uni-icons class="order_Entry_end" type="right" :size="25" color="#306e91"></uni-icons> | |||
</view> | |||
<view v-if="isshow" class="show_container"> | |||
<view class="isshow-header"> | |||
<uni-icons class=" isshow-header-content-icon" type="search" :size="20"></uni-icons> | |||
<uni-easyinput class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" focus="true" /> | |||
<text class="isshow-header-content-text" @click="searchName">搜索</text> | |||
</view> | |||
<view class="isshow-content" > | |||
<text class="isshow-content-text" v-for="(item, index) in textcontent" :key="index" >{{item}}</text> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
ServiceName:'', | |||
title:"北京汽车有限公司", | |||
isshow:false, | |||
announcements: [ | |||
'公告1:欢迎使用车辆合同生成系统!', | |||
'公告2:请及时查看最新用户协议。', | |||
'公告3:隐私政策已更新,请知悉。' | |||
], | |||
textcontent: [ | |||
'公告1:欢迎使用车辆合同生成系统!', | |||
'公告2:请及时查看最新用户协议。', | |||
'公告3:隐私政策已更新,请知悉。', | |||
'公告1:欢迎使用车辆合同生成系统!', | |||
'公告2:请及时查看最新用户协议。', | |||
'公告3:隐私政策已更新,请知悉。' | |||
], | |||
}; | |||
}, | |||
onLoad() { | |||
uni.request({ | |||
url: 'https://gpt.aiym.run/contract/miniapp/notice/list', //仅为示例,并非真实接口地址。 | |||
method:'GET', | |||
data: { | |||
}, | |||
header: { | |||
'X-Access-Token': 'hello' //自定义请求头信息 | |||
}, | |||
success: (res) => { | |||
console.log(res.data.result); | |||
this.announcements = res.data.result; | |||
} | |||
}); | |||
}, | |||
methods: { | |||
change_text(){ | |||
if(this.isshow){ | |||
this.isshow=false; | |||
}else{ | |||
this.isshow=true; | |||
console.log('111') | |||
} | |||
}, | |||
orderEntry(){ | |||
console.log('111') | |||
}, | |||
// 搜索城市名字 | |||
searchName(){ | |||
} | |||
} | |||
}; | |||
</script> | |||
<style> | |||
.container { | |||
display: flex; | |||
flex-direction: column; | |||
height: 100vh; | |||
background-color: #f5f5f5; | |||
} | |||
/* 头部 */ | |||
.header { | |||
padding: 20px; | |||
width: 100%; | |||
height: 15%; | |||
background-color: #044f7a; | |||
color: #fff; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
} | |||
.header_info{ | |||
width: 100%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
color: #e0e9ef; | |||
} | |||
.header_text{ | |||
width: 45%; | |||
white-space: nowrap;/*设置不换行*/ | |||
overflow: hidden; /*设置隐藏*/ | |||
text-overflow: ellipsis; /*设置隐藏部分为省略号*/ | |||
} | |||
.header_change{ | |||
width: 100%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
} | |||
/* 订单录入 */ | |||
.order_Entry_container{ | |||
width: 90%; | |||
height: 8%; | |||
background-color: #d9e5eb; | |||
border-radius: 10rpx; | |||
left:5%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
margin-top: 10%; | |||
} | |||
.order_Entry_end{ | |||
margin-left: auto; | |||
margin-right: 7%; | |||
} | |||
/* 轮播图 */ | |||
.swiper { | |||
height: 30%; | |||
width: 100%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
} | |||
.swiper-image { | |||
width: 100%; | |||
height: 100%; | |||
margin: 0 auto; | |||
} | |||
.form { | |||
flex: 1; | |||
padding: 20px; | |||
} | |||
.submit-button { | |||
width: 100%; | |||
height: 40px; | |||
background-color: #007aff; | |||
color: #fff; | |||
border: none; | |||
border-radius: 4px; | |||
font-size: 16px; | |||
} | |||
.footer { | |||
display: flex; | |||
justify-content: space-around; | |||
padding: 10px; | |||
background-color: #fff; | |||
border-top: 1px solid #ccc; | |||
} | |||
.nav-item { | |||
text-align: center; | |||
} | |||
.nav-item text { | |||
font-size: 14px; | |||
} | |||
.icon-image{ | |||
width: 30%; | |||
height: 140px; | |||
margin: 0 auto; | |||
margin-top: 20px; | |||
} | |||
/* 轮播公告 */ | |||
.swiper_ac_container{ | |||
width: 100%; | |||
height: 6%; | |||
background-color: #e7eef2; | |||
display: flex; | |||
flex-direction: row; | |||
} | |||
.swiper_ac { | |||
width: 70%; | |||
height: 100%; | |||
} | |||
/* 轮播项 */ | |||
.announcement-item { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 100%; | |||
} | |||
/* 公告文字 */ | |||
.announcement-text { | |||
font-size: 15px; | |||
color: #6996af; | |||
} | |||
/* 遮罩层 */ | |||
.show_container{ | |||
width: 60%; | |||
height: 36%; | |||
background-color: #ffffff; | |||
position: absolute; | |||
border-radius: 20rpx; | |||
/* border: 1px solid; */ | |||
box-shadow: 0px 3rpx 0px #e4e4e4; | |||
left:5%; | |||
top: 13%; | |||
z-index:999; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.isshow-header{ | |||
width: 90%; | |||
height: 30%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
flex-direction: row; | |||
color: #3c7697; | |||
} | |||
.isshow-header-content-icon{ | |||
width: 10%; | |||
height: 30%; | |||
} | |||
.isshow-header-content-input{ | |||
width: 80%; | |||
height: 40%; | |||
margin: 0 20rpx 0 20rpx; | |||
border:none; | |||
outline:none; | |||
} | |||
.isshow-content{ | |||
height: 70%; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
overflow-y:scroll; | |||
} | |||
.isshow-content-text{ | |||
color: #414141; | |||
height: 30rpx; | |||
width: 100%; | |||
line-height: 30rpx; | |||
margin: 20rpx 0 20rpx 0; | |||
font-size: 30rpx; | |||
} | |||
.isshow-content::-webkit-scrollbar { | |||
display: none; | |||
} | |||
</style> |
@ -1,105 +0,0 @@ | |||
<template> | |||
<view class="container"> | |||
<view class="form"> | |||
<input class="input" type="text" placeholder="请输入您的账号" v-model="username" /> | |||
<input class="input" type="password" placeholder="请输入您的密码" v-model="password" /> | |||
<view class="agreement"> | |||
<checkbox-group @change="handleAgreementChange"> | |||
<label> | |||
<checkbox value="agree" /> 阅读并同意《用户协议》和《隐私政策》 | |||
</label> | |||
</checkbox-group> | |||
</view> | |||
<button class="button" @click="handleLogin">登录</button> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
username: '', | |||
password: '', | |||
agreed: false | |||
}; | |||
}, | |||
methods: { | |||
handleAgreementChange(e) { | |||
this.agreed = e.detail.value.includes('agree'); | |||
}, | |||
handleLogin() { | |||
if (!this.agreed) { | |||
uni.showToast({ | |||
title: '请先同意用户协议和隐私政策', | |||
icon: 'none' | |||
}); | |||
return; | |||
} | |||
// 简单的登录验证逻辑 | |||
if (this.username === 'admin' && this.password === '123456') { | |||
uni.showToast({ | |||
title: '登录成功', | |||
icon: 'success', | |||
duration: 1500, // 提示持续时间 | |||
success: () => { | |||
// 延迟跳转,确保用户看到提示 | |||
setTimeout(() => { | |||
uni.navigateTo({ | |||
url: '/pages/home/home' // 跳转到首页或其他页面 | |||
}); | |||
}, 1500); | |||
} | |||
}); | |||
} else { | |||
uni.showToast({ | |||
title: '账号或密码错误', | |||
icon: 'none' | |||
}); | |||
} | |||
} | |||
} | |||
}; | |||
</script> | |||
<style> | |||
.container { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 100vh; | |||
background-color: #f5f5f5; | |||
} | |||
.form { | |||
width: 80%; | |||
background-color: #fff; | |||
padding: 20px; | |||
border-radius: 8px; | |||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |||
} | |||
.input { | |||
width: 100%; | |||
height: 40px; | |||
margin-bottom: 15px; | |||
padding: 10px; | |||
border: 1px solid #ccc; | |||
border-radius: 4px; | |||
} | |||
.agreement { | |||
margin-bottom: 15px; | |||
} | |||
.button { | |||
width: 100%; | |||
height: 40px; | |||
background-color: #007aff; | |||
color: #fff; | |||
border: none; | |||
border-radius: 4px; | |||
font-size: 16px; | |||
} | |||
</style> |
@ -1,88 +0,0 @@ | |||
<template> | |||
<view class="container"> | |||
<view class="form"> | |||
<input class="input" type="text" placeholder="请输入您的账号" v-model="username" /> | |||
<input class="input" type="password" placeholder="请输入您的密码" v-model="password" /> | |||
<view class="agreement"> | |||
<checkbox-group @change="handleAgreementChange"> | |||
<label> | |||
<checkbox value="agree" /> 阅读并同意《用户协议》和《隐私政策》 | |||
</label> | |||
</checkbox-group> | |||
</view> | |||
<button class="button" @click="handleLogin">登录</button> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
username: '', | |||
password: '', | |||
agreed: false | |||
}; | |||
}, | |||
methods: { | |||
handleAgreementChange(e) { | |||
this.agreed = e.detail.value.includes('agree'); | |||
}, | |||
handleLogin() { | |||
if (!this.agreed) { | |||
uni.showToast({ | |||
title: '请先同意用户协议和隐私政策', | |||
icon: 'none' | |||
}); | |||
return; | |||
} | |||
// 这里可以添加登录逻辑 | |||
uni.showToast({ | |||
title: '登录成功', | |||
icon: 'success' | |||
}); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style> | |||
.container { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 100vh; | |||
background-color: #f5f5f5; | |||
} | |||
.form { | |||
width: 80%; | |||
background-color: #fff; | |||
padding: 20px; | |||
border-radius: 8px; | |||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |||
} | |||
.input { | |||
width: 100%; | |||
height: 40px; | |||
margin-bottom: 15px; | |||
padding: 10px; | |||
border: 1px solid #ccc; | |||
border-radius: 4px; | |||
} | |||
.agreement { | |||
margin-bottom: 15px; | |||
} | |||
.button { | |||
width: 100%; | |||
height: 40px; | |||
background-color: #007aff; | |||
color: #fff; | |||
border: none; | |||
border-radius: 4px; | |||
font-size: 16px; | |||
} | |||
</style> |
@ -1,255 +0,0 @@ | |||
<template> | |||
<view class="login-container"> | |||
<!-- 顶部欢迎语 --> | |||
<view class="welcome"> | |||
<text class="welcome-text">欢迎登陆车辆合同生成</text> | |||
</view> | |||
<!-- 账号输入框 --> | |||
<view class="input-container"> | |||
<uni-easyinput prefixIcon="person" class="input" placeholder="请输入您的账号" v-model="username" :inputBorder="false" ></uni-easyinput> | |||
<view class="underline"></view> | |||
</view> | |||
<!-- 密码输入框 --> | |||
<view class="input-container"> | |||
<uni-easyinput prefixIcon="locked" class="input" type="password" placeholder="请输入您的密码" v-model="password" :inputBorder="false" ></uni-easyinput> | |||
<view class="underline"></view> | |||
</view> | |||
<!-- 协议提示 --> | |||
<view class="agreement"> | |||
<radio class = "login-agree" value="r1" :checked="checked" @click="changeCK">登录即代表同意 | |||
</radio> | |||
<text class="link" @click="showModal">《用户协议》</text> | |||
<text class="login-agree">与</text> | |||
<text class="link" @click="showModal">《隐私政策》</text> | |||
</view> | |||
<view class = 'button_container'> | |||
<!-- 登录按钮 --> | |||
<button class="login-button" @click="handleLogin">登陆</button> | |||
</view> | |||
<mosowe-confirm-popup | |||
v-model="popupNoCancelShow" | |||
title="服务协议和隐私政策" | |||
confirmText | |||
cancelText | |||
> | |||
没有取消弹框 | |||
<template v-slot:footer> | |||
<view class="mini_container"> | |||
<button class="mini-btn" type="primary" size="mini" @click="closeModal">取消</button> | |||
<button class="mini-btn" type="primary" size="mini" @click="getConfirm">确认</button> | |||
</view> | |||
</template> | |||
</mosowe-confirm-popup> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
username: '', // 账号 | |||
password: '', // 密码 | |||
isModalVisible: false, // 控制弹窗显示 | |||
modalTitle: '', // 弹窗标题 | |||
modalContent: '' ,// 弹窗内容 | |||
popupNoCancelShow: false, | |||
checked:false, | |||
}; | |||
}, | |||
methods: { | |||
// 处理登录逻辑 | |||
handleLogin() { | |||
if (!this.username || !this.password) { | |||
uni.showToast({ title: '请输入账号和密码', icon: 'none' }); | |||
return; | |||
}else{ | |||
console.log(this.checked); | |||
if(this.checked){ | |||
uni.showToast({ title: '登录成功', icon: 'success' }); | |||
uni.switchTab({ url: '/pages/home/home' }); | |||
}else{ | |||
uni.showToast({ title: '请勾选服务协议', icon: 'none' }); | |||
} | |||
} | |||
}, | |||
// 显示弹窗 | |||
showModal() { | |||
this.popupNoCancelShow = true ; | |||
}, | |||
// 关闭弹窗 | |||
closeModal() { | |||
this.popupNoCancelShow = false ; | |||
}, | |||
change(e) { | |||
console.log('当前模式:' + e.type + ',状态:' + e.show); | |||
}, | |||
changeCK(){ | |||
if(this.checked){ | |||
this.checked = false; | |||
}else{ | |||
this.checked = true; | |||
} | |||
}, | |||
// 处理选中事件 | |||
getConfirm(){ | |||
console.log("111"); | |||
this.changeCK(); | |||
this.popupNoCancelShow = false; | |||
} | |||
} | |||
}; | |||
</script> | |||
<style> | |||
/* 页面容器 */ | |||
.login-container { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
padding: 40px 20px; | |||
background-color: #ffffff; | |||
height: 100vh; | |||
} | |||
.button-text { | |||
color: #fff; | |||
font-size: 12px; | |||
} | |||
/* 欢迎语 */ | |||
.welcome { | |||
height: 50%; | |||
margin-bottom: 40px; | |||
display: flex; | |||
justify-content: end; | |||
align-items: center; | |||
} | |||
.welcome-text { | |||
font-size: 20px; | |||
font-weight: bold; | |||
color: #044f7a; | |||
} | |||
/* 输入框容器 */ | |||
.input-container { | |||
width: 100%; | |||
left:10%; | |||
} | |||
/* 输入框样式 */ | |||
.input { | |||
width: 70%; | |||
height: 40px; | |||
font-size: 16px; | |||
border: none; | |||
outline: none; | |||
background-color: transparent; | |||
} | |||
/* 下划线样式 */ | |||
.underline { | |||
width: 100%; | |||
height: 1px; | |||
background-color: #f2f2f2; | |||
margin-top: 5px; | |||
} | |||
/* 协议提示 */ | |||
.agreement { | |||
font-size: 14px; | |||
color: #666; | |||
margin-bottom: 20px; | |||
width: 70%; | |||
display: flex; | |||
flex-direction: row; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.login-agree{ | |||
font-size: 20rpx; | |||
} | |||
.link { | |||
color: #007aff; | |||
text-decoration: underline; | |||
font-size: 20rpx; | |||
} | |||
.button_container{ | |||
width: 100%; | |||
height: 40%; | |||
display: flex; | |||
align-items: center; | |||
} | |||
/* 登录按钮 */ | |||
.login-button { | |||
width: 70%; | |||
height: 70rpx; | |||
line-height: 70rpx; | |||
background-color: #044f7a; | |||
color: #fff; | |||
border: none; | |||
border-radius: 4px; | |||
font-size: 16px; | |||
position: absolute; | |||
top:15%; | |||
left:20%; | |||
} | |||
/* 弹窗样式 */ | |||
.modal { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.modal-content { | |||
width: 80%; | |||
background-color: #fff; | |||
border-radius: 8px; | |||
padding: 20px; | |||
} | |||
.modal-header { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 18px; | |||
font-weight: bold; | |||
margin-bottom: 15px; | |||
} | |||
.close { | |||
font-size: 24px; | |||
cursor: pointer; | |||
} | |||
.modal-body { | |||
font-size: 16px; | |||
line-height: 1.5; | |||
} | |||
.mini_container{ | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
} | |||
/* 按钮 */ | |||
.mini-btn{ | |||
width: 30%; | |||
margin-left: 15%; | |||
} | |||
</style> |
@ -1,123 +0,0 @@ | |||
<template> | |||
<view class="container"> | |||
<!-- 用户信息 --> | |||
<view class="user-info"> | |||
<text class="username">李晓春</text> | |||
</view> | |||
<!-- 功能列表 --> | |||
<view class="menu"> | |||
<view class="menu-item" > | |||
<image class="arrow" src="/static/arrow-right.png"></image> | |||
<text>关于我们</text> | |||
</view> | |||
<view class="menu-item" > | |||
<image class="arrow" src="/static/arrow-right.png"></image> | |||
<text>修改密码</text> | |||
</view> | |||
<view class="menu-item"> | |||
<image class="arrow" src="/static/arrow-right.png"></image> | |||
<text>服务协议</text> | |||
</view> | |||
<view class="menu-item" > | |||
<image class="arrow" src="/static/arrow-right.png"></image> | |||
<text>隐私政策</text> | |||
</view> | |||
<view class="menu-item" @click="logout"> | |||
<image class="arrow" src="/static/arrow-right.png"></image> | |||
<text>退出登录</text> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
logout() { | |||
uni.showModal({ | |||
title: '提示', | |||
content: '确定要退出登录吗?', | |||
success: (res) => { | |||
if (res.confirm) { | |||
uni.showToast({ | |||
title: '退出登录成功', | |||
icon: 'success', | |||
success: () => { | |||
// 这里可以添加退出登录的逻辑,例如清除用户登录状态 | |||
setTimeout(() => { | |||
uni.navigateTo({ url: '/pages/index/index' }); | |||
}, 1500); | |||
} | |||
}); | |||
} | |||
} | |||
}); | |||
} | |||
} | |||
}; | |||
</script> | |||
<style> | |||
.container { | |||
display: flex; | |||
flex-direction: column; | |||
height: 300vh; | |||
background-color: #f5f5f5; | |||
} | |||
.user-info { | |||
padding: 20px; | |||
height: 200px; | |||
background-color: #007aff; | |||
color: #fff; | |||
text-align: center; | |||
} | |||
.username { | |||
font-size: 20px; | |||
font-weight: bold; | |||
margin: 0 auto; | |||
line-height: 200px; | |||
} | |||
.menu { | |||
flex: 1; | |||
padding: 20px; | |||
background-color: #fff; | |||
} | |||
.menu-item { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 15px 0; | |||
border-bottom: 1px solid #eee; | |||
} | |||
.menu-item text { | |||
font-size: 16px; | |||
} | |||
.arrow { | |||
width: 20px; | |||
height: 20px; | |||
} | |||
.footer { | |||
display: flex; | |||
justify-content: space-around; | |||
padding: 10px; | |||
background-color: #fff; | |||
border-top: 1px solid #ccc; | |||
} | |||
.nav-item { | |||
text-align: center; | |||
} | |||
.nav-item text { | |||
font-size: 14px; | |||
} | |||
</style> |