Author | SHA1 | Message | Date |
---|---|---|---|
|
55251de6f4 | 新增订单页面 | 3 months ago |
|
09e66b7ea9 | 重新提交 | 3 months ago |
|
7631224d3d | Merge remote-tracking branch 'origin/master' | 3 months ago |
|
24988f96c9 | 修改页面逻辑,新增身份证识别 | 3 months ago |
|
18f0330fb6 | 删除多余文件 | 3 months ago |
|
2ec5fee5c5 | Merge branch 'master' of http://175.178.51.79:3000/Augcl/contract-front | 3 months ago |
|
c60138a824 | 11 | 3 months ago |
|
51a517cdb6 | 初始化 | 3 months ago |
|
ce47a3af6d |
上传文件至 ''
初始化项目 |
3 months ago |
@ -1,49 +0,0 @@ | |||
<script lang="uts"> | |||
let firstBackTime = 0 | |||
export default { | |||
onLaunch: function () { | |||
console.log('App Launch') | |||
}, | |||
onShow: function () { | |||
console.log('App Show') | |||
}, | |||
onHide: function () { | |||
console.log('App Hide') | |||
}, | |||
// #ifdef APP-ANDROID | |||
onLastPageBackPress: function () { | |||
console.log('App LastPageBackPress') | |||
if (firstBackTime == 0) { | |||
uni.showToast({ | |||
title: '再按一次退出应用', | |||
position: 'bottom', | |||
}) | |||
firstBackTime = Date.now() | |||
setTimeout(() => { | |||
firstBackTime = 0 | |||
}, 2000) | |||
} else if (Date.now() - firstBackTime < 2000) { | |||
firstBackTime = Date.now() | |||
uni.exit() | |||
} | |||
}, | |||
// #endif | |||
onExit: function () { | |||
console.log('App Exit') | |||
}, | |||
} | |||
</script> | |||
<style> | |||
@import "@/static/iconfont.css"; | |||
/*每个页面公共css */ | |||
.uni-row { | |||
flex-direction: row; | |||
} | |||
body{ | |||
background-color: #ffffff; | |||
} | |||
.uni-column { | |||
flex-direction: column; | |||
} | |||
</style> |
@ -1,3 +0,0 @@ | |||
# contract-front | |||
合同小程序前端代码仓库 |
@ -1,43 +0,0 @@ | |||
{ | |||
"name" : "111", | |||
"appid" : "__UNI__ABF0653", | |||
"description" : "", | |||
"versionName" : "1.0.0", | |||
"versionCode" : "100", | |||
"uni-app-x" : {}, | |||
/* 快应用特有相关 */ | |||
"quickapp" : {}, | |||
/* 小程序特有相关 */ | |||
"mp-weixin" : { | |||
"appid" : "wx7d74b5db6c1f7328", | |||
"setting" : { | |||
"urlCheck" : false | |||
}, | |||
"usingComponents" : true | |||
}, | |||
"mp-alipay" : { | |||
"usingComponents" : true | |||
}, | |||
"mp-baidu" : { | |||
"usingComponents" : true | |||
}, | |||
"mp-toutiao" : { | |||
"usingComponents" : true | |||
}, | |||
"uniStatistics" : { | |||
"enable" : false | |||
}, | |||
"vueVersion" : "3", | |||
"app" : { | |||
"distribute" : { | |||
"icons" : { | |||
"android" : { | |||
"hdpi" : "", | |||
"xhdpi" : "", | |||
"xxhdpi" : "", | |||
"xxxhdpi" : "" | |||
} | |||
} | |||
} | |||
} | |||
} |
@ -1,85 +0,0 @@ | |||
{ | |||
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages | |||
{ | |||
"path": "pages/index/login", | |||
"style": { | |||
"navigationBarTitleText": "", | |||
"navigationStyle":"custom" | |||
} | |||
}, | |||
{ | |||
"path": "pages/home/home", | |||
"style": { | |||
"navigationBarTitleText": "主页", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
}, | |||
{ | |||
"path": "pages/index/wode", | |||
"style": { | |||
"navigationBarTitleText": "我的", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
}, | |||
{ | |||
"path": "pages/views/dingDanCreate", | |||
"style": { | |||
"navigationBarTitleText": "录入订单", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
}, | |||
{ | |||
"path": "pages/views/payment", | |||
"style": { | |||
"navigationBarTitleText": "付款信息", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
} | |||
], | |||
"globalStyle": { | |||
"navigationBarTextStyle": "black", | |||
"navigationBarTitleText": "uni-app x", | |||
"navigationBarBackgroundColor": "#F8F8F8", | |||
"backgroundColor": "#F8F8F8" | |||
}, | |||
"uniIdRouter": {}, | |||
"tabBar": { | |||
"color": "#7A7E83", | |||
"selectedColor": "#3cc51f", | |||
"borderStyle": "black", | |||
"backgroundColor": "#ffffff", | |||
"list": [{ | |||
"pagePath": "pages/home/home", | |||
"iconPath": "/", | |||
"selectedIconPath": "/static/image/路径 3909.png", | |||
"text": "首页" | |||
}, { | |||
"pagePath": "", | |||
"iconPath": "/static/image/路径 4016_1.png", | |||
"selectedIconPath": "/static/image/路径 4016.png", | |||
"text": "订单" | |||
}, | |||
{ | |||
"pagePath": "pages/index/wode", | |||
"iconPath": "/static/image/路径 3917.png", | |||
"selectedIconPath": "/static/image/路径 24@2x.png", | |||
"text": "我的" | |||
} | |||
] | |||
}, | |||
"condition" : { //模式配置,仅开发期间生效 | |||
"current": 0, //当前激活的模式(list 的索引项) | |||
"list": [ | |||
{ | |||
"name": "", //模式名称 | |||
"path": "", //启动页面,必选 | |||
"query": "" //启动参数,在页面的onLoad函数里面得到 | |||
} | |||
] | |||
} | |||
} |
@ -1,354 +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> | |||
<view class="swiper"> | |||
<image class="swiper-image" src="/static/image/组 71699.png"></image> | |||
</view> | |||
<view class="order_Entry_container" @click="orderEntry"> | |||
<image class="order_Entry_image" src="/static/image/组 71699_1@3x.png"></image> | |||
<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 :inputBorder="false" @input="handleSearch(ServiceName)" class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" /> | |||
<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" @click="change_city(item.name)">{{item.name}}</text> | |||
</view> | |||
</view> | |||
<view v-if="isshow_1" class="show_container_1"> | |||
<image class="show_container_1_image" src="/static/image/图层_6.png"></image> | |||
<view class="show_container_1_footer"> | |||
<text>门店已经切换为{{title}}</text> | |||
<button @click="close_view">好的</button> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
ServiceName:'', | |||
title:"北京汽车有限公司", | |||
isshow:false, | |||
isshow_1:false, | |||
newListData:[], | |||
allMsg : [ | |||
{ name: "myhua", id: 1 }, | |||
{ name: "mp3", id: 2 }, | |||
{ name: "hello", id: 3 }, | |||
{ name: "world", id: 4 }, | |||
{ name: "warm weather", id: 5 }, | |||
{ name: "m3", id: 6 }, | |||
{ name: "hahaha", id: 7 } | |||
], | |||
textcontent: [ | |||
'公告1:欢迎使用车辆合同生成系统!', | |||
'公告2:请及时查看最新用户协议。', | |||
'公告3:隐私政策已更新,请知悉。', | |||
'公告1:欢迎使用车辆合同生成系统!', | |||
'公告2:请及时查看最新用户协议。', | |||
'公告3:隐私政策已更新,请知悉。' | |||
], | |||
}; | |||
}, | |||
mounted() { | |||
this.allMsg = [ | |||
{ name: "myhua", id: 1 }, | |||
{ name: "mp3", id: 2 }, | |||
{ name: "hello", id: 3 }, | |||
{ name: "world", id: 4 }, | |||
{ name: "warm weather", id: 5 }, | |||
{ name: "m3", id: 6 }, | |||
{ name: "hahaha", id: 7 } | |||
]; | |||
this.textcontent = this.allMsg; | |||
}, | |||
methods: { | |||
change_text(){ | |||
if(this.isshow){ | |||
this.isshow=false; | |||
}else{ | |||
this.isshow=true; | |||
console.log('111') | |||
} | |||
}, | |||
orderEntry(){ | |||
console.log('111'); | |||
uni.navigateTo( | |||
{ url: '/pages/views/dingDanCreate' } | |||
) | |||
}, | |||
// 搜索城市名字 | |||
searchName(){ | |||
}, | |||
change_city(name){ | |||
this.title = name; | |||
this.change_text(); | |||
this.isshow_1 = true; | |||
}, | |||
close_view(){ | |||
this.isshow_1 = false; | |||
}, | |||
// 模糊匹配 | |||
// 右上角搜索框--模糊查询 | |||
handleSearch(queryString) { | |||
if(event.target.value){ | |||
let queryStringArr = event.target.value.split(""); | |||
let str = "(.*?)"; | |||
this.textcontent = []; | |||
let regStr = str + queryStringArr.join(str) + str; | |||
let reg = RegExp(regStr, "i"); // 以mh为例生成的正则表达式为/(.*?)m(.*?)h(.*?)/i | |||
this.allMsg.map(item => { | |||
if (reg.test(item.name)) { | |||
this.textcontent.push(item); | |||
} | |||
}); | |||
}else { | |||
this.textcontent=[]; | |||
this.textcontent = this.allMsg; | |||
} | |||
} | |||
} | |||
}; | |||
</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_image{ | |||
width: 10%; | |||
height: 70%; | |||
margin-left: 3%; | |||
} | |||
.order_Entry_end{ | |||
margin-left: auto; | |||
margin-right: 7%; | |||
} | |||
/* 轮播图 */ | |||
.swiper { | |||
height: 30%; | |||
width: 100%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
overflow: hidden; | |||
} | |||
.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; | |||
} | |||
/* 遮罩层 */ | |||
.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; | |||
} | |||
/* 提示框*/ | |||
.show_container_1{ | |||
width: 80%; | |||
height: 40%; | |||
background-color: #ffffff; | |||
position: absolute; | |||
border-radius: 20rpx; | |||
/* border: 1px solid; */ | |||
box-shadow: 0px 3rpx 0px #e4e4e4; | |||
left:10%; | |||
top: 30%; | |||
z-index:999; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.show_container_1_image{ | |||
height: 50%; | |||
width: 50%; | |||
top: 5%; | |||
} | |||
.show_container_1_footer{ | |||
height: 50%; | |||
width: 100%; | |||
color:#0b5583; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
font-weight: bold; | |||
font-size: 10rpx; | |||
} | |||
.show_container_1_footer text{ | |||
margin-top: 10%; | |||
} | |||
.show_container_1_footer button{ | |||
color:#0b5583; | |||
height: 30%; | |||
border-radius: 40rpx; | |||
width: 80%; | |||
margin-top: 5%; | |||
border: 1px solid #0c547e; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
</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,271 +0,0 @@ | |||
<template> | |||
<view class="login-container"> | |||
<!-- 顶部欢迎语 --> | |||
<view class="login_image"> | |||
<image src="/static/image/组件 3 – 1.png" draggable ="false"></image> | |||
</view> | |||
<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"); | |||
if(this.checked){ | |||
this.checked = this.checked; | |||
}else{ | |||
this.checked = true; | |||
} | |||
this.popupNoCancelShow = false; | |||
} | |||
} | |||
}; | |||
</script> | |||
<style> | |||
/* 页面容器 */ | |||
.login-container { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
background-color: #ffffff; | |||
height: 100vh; | |||
width: 100%; | |||
} | |||
.button-text { | |||
color: #fff; | |||
font-size: 12px; | |||
} | |||
/* 登录图片 */ | |||
.login_image{ | |||
width: 100%; | |||
height: 40%; | |||
} | |||
.login_image image{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
/* 欢迎语 */ | |||
.welcome { | |||
height: 15%; | |||
margin-bottom: 40rpx; | |||
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: 100%; | |||
left:10%; | |||
display: flex; | |||
flex-direction: row; | |||
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> |
@ -1,267 +0,0 @@ | |||
<template> | |||
<view class="container"> | |||
<!-- 顶部标题 --> | |||
<view class="header"> | |||
<view class="header_info"> | |||
<uni-icons class="header_info_icon" type="left" size="30" color="#c2d4de" :size="1" @click="toBack"></uni-icons> | |||
<text class="header_text">录入订单</text> | |||
</view> | |||
</view> | |||
<view class="content_container"> | |||
<view class="isshow-header"> | |||
<uni-icons class=" isshow-header-content-icon" type="search" :size="20"></uni-icons> | |||
<uni-easyinput :inputBorder="false" @input="handleSearch(ServiceName)" class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" focus=true /> | |||
<text class="isshow-header-content-text" @click="searchName">搜索</text> | |||
</view> | |||
</view> | |||
<!-- 二级分类 --> | |||
<view class="content_footer"> | |||
<!-- 分类 --> | |||
<scroll-view show-scrollbar="false" class="content_footer_left"> | |||
<view v-for="(item,index) in product" :class="['content_footer_left_product', FirstIndex === item.id?'click_color':'']" @click="FirstLevelChange(item.id)">{{item.name}}</view> | |||
</scroll-view> | |||
<scroll-view show-scrollbar="false" class="content_footer_right"> | |||
<view v-for="(item,index) in product_2" class="content_footer_right_content"> | |||
<text class="text" :class="['content_footer_right_content_text', item.name === name?'select_color':'']">{{item.name}}</text> | |||
<radio class="content_footer_right_content_radio" value="item.id" :checked="item.name == name" activeBackgroundColor="#04517b" @click="selctRadio(item.name)"></radio> | |||
</view> | |||
</scroll-view> | |||
</view> | |||
<!-- 下一步 --> | |||
<button class="buttun" @click="toPayment">下一步</button> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
product:[ | |||
{ | |||
id: 1, | |||
name: '数码', | |||
children: [ | |||
{ | |||
id: 12, | |||
name: '耳机', | |||
children: [ | |||
{ id: 121, name: '漫步者' }, | |||
{ id: 122, name: '倍思' } | |||
] | |||
}, | |||
{ | |||
id: 13, | |||
name: '电脑', | |||
children: [ | |||
{ id: 131, name: '联想' }, | |||
{ id: 132, name: '小米' }, | |||
{ id: 133, name: '戴尔' } | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
id: 2, | |||
name: '家用电器', | |||
// 类似数码的子结构 | |||
children:[ | |||
{ | |||
id: 11, | |||
name: '手机', | |||
children: [ | |||
{ id: 111, name: 'iphone' }, | |||
{ id: 112, name: 'vivo' }, | |||
{ id: 113, name: 'oppo' } | |||
] | |||
} | |||
] | |||
} | |||
], | |||
product_2:[], | |||
FirstIndex:0, | |||
name:'' | |||
} | |||
}, | |||
methods: { | |||
toBack(){ | |||
uni.navigateBack({ | |||
delta: 1 | |||
}); | |||
}, | |||
nameClick (){ | |||
}, | |||
FirstLevelChange(id){ | |||
this.FirstIndex = id; | |||
this.product_2 = this.product[id-1].children; | |||
}, | |||
selctRadio(name){ | |||
console.log(name); | |||
this.name = name; | |||
} | |||
}, | |||
toPayment(){ | |||
console.log(111); | |||
uni.navigateTo( | |||
{ url: '/pages/views/payment' } | |||
) | |||
} | |||
} | |||
</script> | |||
<style> | |||
.container { | |||
display: flex; | |||
flex-direction: column; | |||
height: 100vh; | |||
background-color: #f5f5f5; | |||
position: relative; | |||
} | |||
/* 头部 */ | |||
.header { | |||
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; | |||
justify-content: center; | |||
align-items: center; | |||
flex: 15; | |||
} | |||
.header_info_icon{ | |||
margin-right: auto; | |||
flex: 1; | |||
} | |||
.header_text{ | |||
flex: 14; | |||
display: flex; | |||
/* justify-content: center; */ | |||
left:35%; | |||
align-items: center; | |||
} | |||
/* 搜索框 */ | |||
.content_container{ | |||
width: 100%; | |||
height: 10%; | |||
display: flex; | |||
flex-direction: row; | |||
justify-content: center; | |||
align-items: center | |||
} | |||
.content_footer{ | |||
width: 100%; | |||
height: 75%; | |||
display: flex; | |||
flex-direction: row; | |||
} | |||
/* 搜索框 */ | |||
/* 遮罩层 */ | |||
.isshow-header{ | |||
width: 90%; | |||
height: 100%; | |||
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; | |||
} | |||
/* 二级分类 */ | |||
.content_footer_left{ | |||
width: 20%; | |||
} | |||
.content_footer_left_product{ | |||
width: 100%; | |||
height: 10%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 27rpx; | |||
color: #7f7f7f; | |||
} | |||
.content_footer_right{ | |||
width: 80%; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.content_footer_right_content{ | |||
width: 100%; | |||
height: 10%; | |||
display: flex; | |||
flex-direction: row; | |||
/* background-color: red; */ | |||
align-items: center; | |||
} | |||
.content_footer_right_content_text{ | |||
margin-right: auto; | |||
color:#242424; | |||
margin-left: 5%; | |||
} | |||
.content_footer_right_content_radio{ | |||
margin-left: auto; | |||
margin-right: 5%; | |||
} | |||
/* 点击颜色 */ | |||
.click_color{ | |||
background-color: #044f7a; | |||
color: #f0fcf2; | |||
} | |||
.select_color{ | |||
color: #316b8b; | |||
} | |||
/* 按钮 */ | |||
.buttun{ | |||
width: 30%; | |||
position: absolute; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 25rpx; | |||
border-radius: 30rpx; | |||
background-color: #05507c; | |||
bottom:5%; | |||
right: 5%; | |||
color: #fafcff; | |||
} | |||
</style> |
@ -1,22 +0,0 @@ | |||
<template> | |||
<view> | |||
你好 | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style> | |||
</style> |
@ -1,676 +0,0 @@ | |||
<template> | |||
<view class="uni-easyinput" :class="{ 'uni-easyinput-error': msg }" :style="boxStyle"> | |||
<view class="uni-easyinput__content" :class="inputContentClass" :style="inputContentStyle"> | |||
<uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')" size="22"></uni-icons> | |||
<slot name="left"> | |||
</slot> | |||
<!-- #ifdef MP-ALIPAY --> | |||
<textarea :enableNative="enableNative" v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{ 'input-padding': inputBorder }" :name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class" :maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" @input="onInput" @blur="_Blur" @focus="_Focus" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange"></textarea> | |||
<input :enableNative="enableNative" v-else :type="type === 'password' ? 'text' : type" class="uni-easyinput__content-input" :style="inputStyle" :name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder" :placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" @focus="_Focus" @blur="_Blur" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange" /> | |||
<!-- #endif --> | |||
<!-- #ifndef MP-ALIPAY --> | |||
<textarea v-if="type === 'textarea'" class="uni-easyinput__content-textarea" :class="{ 'input-padding': inputBorder }" :name="name" :value="val" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" placeholder-class="uni-easyinput__placeholder-class" :maxlength="inputMaxlength" :focus="focused" :autoHeight="autoHeight" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" @input="onInput" @blur="_Blur" @focus="_Focus" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange"></textarea> | |||
<input v-else :type="type === 'password' ? 'text' : type" class="uni-easyinput__content-input" :style="inputStyle" :name="name" :value="val" :password="!showPassword && type === 'password'" :placeholder="placeholder" :placeholderStyle="placeholderStyle" placeholder-class="uni-easyinput__placeholder-class" :disabled="disabled" :maxlength="inputMaxlength" :focus="focused" :confirmType="confirmType" :cursor-spacing="cursorSpacing" :adjust-position="adjustPosition" @focus="_Focus" @blur="_Blur" @input="onInput" @confirm="onConfirm" @keyboardheightchange="onkeyboardheightchange" /> | |||
<!-- #endif --> | |||
<template v-if="type === 'password' && passwordIcon"> | |||
<!-- 开启密码时显示小眼睛 --> | |||
<uni-icons v-if="isVal" class="content-clear-icon" :class="{ 'is-textarea-icon': type === 'textarea' }" :type="showPassword ? 'eye-slash-filled' : 'eye-filled'" :size="22" :color="focusShow ? primaryColor : '#c0c4cc'" @click="onEyes"></uni-icons> | |||
</template> | |||
<template v-if="suffixIcon"> | |||
<uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc" @click="onClickIcon('suffix')" size="22"></uni-icons> | |||
</template> | |||
<template v-else> | |||
<uni-icons v-if="clearable && isVal && !disabled && type !== 'textarea'" class="content-clear-icon" :class="{ 'is-textarea-icon': type === 'textarea' }" type="clear" :size="clearSize" :color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'" @click="onClear"></uni-icons> | |||
</template> | |||
<slot name="right"></slot> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
/** | |||
* Easyinput 输入框 | |||
* @description 此组件可以实现表单的输入与校验,包括 "text" 和 "textarea" 类型。 | |||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3455 | |||
* @property {String} value 输入内容 | |||
* @property {String } type 输入框的类型(默认text) password/text/textarea/.. | |||
* @value text 文本输入键盘 | |||
* @value textarea 多行文本输入键盘 | |||
* @value password 密码输入键盘 | |||
* @value number 数字输入键盘,注意iOS上app-vue弹出的数字键盘并非9宫格方式 | |||
* @value idcard 身份证输入键盘,信、支付宝、百度、QQ小程序 | |||
* @value digit 带小数点的数字键盘 ,App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持 | |||
* @property {Boolean} clearable 是否显示右侧清空内容的图标控件,点击可清空输入框内容(默认true) | |||
* @property {Boolean} autoHeight 是否自动增高输入区域,type为textarea时有效(默认true) | |||
* @property {String } placeholder 输入框的提示文字 | |||
* @property {String } placeholderStyle placeholder的样式(内联样式,字符串),如"color: #ddd" | |||
* @property {Boolean} focus 是否自动获得焦点(默认false) | |||
* @property {Boolean} disabled 是否禁用(默认false) | |||
* @property {Number } maxlength 最大输入长度,设置为 -1 的时候不限制最大长度(默认140) | |||
* @property {String } confirmType 设置键盘右下角按钮的文字,仅在type="text"时生效(默认done) | |||
* @property {Number } clearSize 清除图标的大小,单位px(默认15) | |||
* @property {String} prefixIcon 输入框头部图标 | |||
* @property {String} suffixIcon 输入框尾部图标 | |||
* @property {String} primaryColor 设置主题色(默认#2979ff) | |||
* @property {Boolean} trim 是否自动去除两端的空格 | |||
* @property {Boolean} cursorSpacing 指定光标与键盘的距离,单位 px | |||
* @property {Boolean} ajust-position 当键盘弹起时,是否上推内容,默认值:true | |||
* @value both 去除两端空格 | |||
* @value left 去除左侧空格 | |||
* @value right 去除右侧空格 | |||
* @value start 去除左侧空格 | |||
* @value end 去除右侧空格 | |||
* @value all 去除全部空格 | |||
* @value none 不去除空格 | |||
* @property {Boolean} inputBorder 是否显示input输入框的边框(默认true) | |||
* @property {Boolean} passwordIcon type=password时是否显示小眼睛图标 | |||
* @property {Object} styles 自定义颜色 | |||
* @event {Function} input 输入框内容发生变化时触发 | |||
* @event {Function} focus 输入框获得焦点时触发 | |||
* @event {Function} blur 输入框失去焦点时触发 | |||
* @event {Function} confirm 点击完成按钮时触发 | |||
* @event {Function} iconClick 点击图标时触发 | |||
* @example <uni-easyinput v-model="mobile"></uni-easyinput> | |||
*/ | |||
function obj2strClass(obj) { | |||
let classess = ''; | |||
for (let key in obj) { | |||
const val = obj[key]; | |||
if (val) { | |||
classess += `${key} `; | |||
} | |||
} | |||
return classess; | |||
} | |||
function obj2strStyle(obj) { | |||
let style = ''; | |||
for (let key in obj) { | |||
const val = obj[key]; | |||
style += `${key}:${val};`; | |||
} | |||
return style; | |||
} | |||
export default { | |||
name: 'uni-easyinput', | |||
emits: [ | |||
'click', | |||
'iconClick', | |||
'update:modelValue', | |||
'input', | |||
'focus', | |||
'blur', | |||
'confirm', | |||
'clear', | |||
'eyes', | |||
'change', | |||
'keyboardheightchange' | |||
], | |||
model: { | |||
prop: 'modelValue', | |||
event: 'update:modelValue' | |||
}, | |||
options: { | |||
// #ifdef MP-TOUTIAO | |||
virtualHost: false, | |||
// #endif | |||
// #ifndef MP-TOUTIAO | |||
virtualHost: true | |||
// #endif | |||
}, | |||
inject: { | |||
form: { | |||
from: 'uniForm', | |||
default: null | |||
}, | |||
formItem: { | |||
from: 'uniFormItem', | |||
default: null | |||
} | |||
}, | |||
props: { | |||
name: String, | |||
value: [Number, String], | |||
modelValue: [Number, String], | |||
type: { | |||
type: String, | |||
default: 'text' | |||
}, | |||
clearable: { | |||
type: Boolean, | |||
default: true | |||
}, | |||
autoHeight: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
placeholder: { | |||
type: String, | |||
default: ' ' | |||
}, | |||
placeholderStyle: String, | |||
focus: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
disabled: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
maxlength: { | |||
type: [Number, String], | |||
default: 140 | |||
}, | |||
confirmType: { | |||
type: String, | |||
default: 'done' | |||
}, | |||
clearSize: { | |||
type: [Number, String], | |||
default: 24 | |||
}, | |||
inputBorder: { | |||
type: Boolean, | |||
default: true | |||
}, | |||
prefixIcon: { | |||
type: String, | |||
default: '' | |||
}, | |||
suffixIcon: { | |||
type: String, | |||
default: '' | |||
}, | |||
trim: { | |||
type: [Boolean, String], | |||
default: false | |||
}, | |||
cursorSpacing: { | |||
type: Number, | |||
default: 0 | |||
}, | |||
passwordIcon: { | |||
type: Boolean, | |||
default: true | |||
}, | |||
adjustPosition: { | |||
type: Boolean, | |||
default: true | |||
}, | |||
primaryColor: { | |||
type: String, | |||
default: '#2979ff' | |||
}, | |||
styles: { | |||
type: Object, | |||
default () { | |||
return { | |||
color: '#333', | |||
backgroundColor: '#fff', | |||
disableColor: '#F7F6F6', | |||
borderColor: '#e5e5e5' | |||
}; | |||
} | |||
}, | |||
errorMessage: { | |||
type: [String, Boolean], | |||
default: '' | |||
}, | |||
// #ifdef MP-ALIPAY | |||
enableNative: { | |||
type: Boolean, | |||
default: false | |||
} | |||
// #endif | |||
}, | |||
data() { | |||
return { | |||
focused: false, | |||
val: '', | |||
showMsg: '', | |||
border: false, | |||
isFirstBorder: false, | |||
showClearIcon: false, | |||
showPassword: false, | |||
focusShow: false, | |||
localMsg: '', | |||
isEnter: false // 用于判断当前是否是使用回车操作 | |||
}; | |||
}, | |||
computed: { | |||
// 输入框内是否有值 | |||
isVal() { | |||
const val = this.val; | |||
// fixed by mehaotian 处理值为0的情况,字符串0不在处理范围 | |||
if (val || val === 0) { | |||
return true; | |||
} | |||
return false; | |||
}, | |||
msg() { | |||
// console.log('computed', this.form, this.formItem); | |||
// if (this.form) { | |||
// return this.errorMessage || this.formItem.errMsg; | |||
// } | |||
// TODO 处理头条 formItem 中 errMsg 不更新的问题 | |||
return this.localMsg || this.errorMessage; | |||
}, | |||
// 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,用户可以传入字符串数值 | |||
inputMaxlength() { | |||
return Number(this.maxlength); | |||
}, | |||
// 处理外层样式的style | |||
boxStyle() { | |||
return `color:${ | |||
this.inputBorder && this.msg ? '#e43d33' : this.styles.color | |||
};`; | |||
}, | |||
// input 内容的类和样式处理 | |||
inputContentClass() { | |||
return obj2strClass({ | |||
'is-input-border': this.inputBorder, | |||
'is-input-error-border': this.inputBorder && this.msg, | |||
'is-textarea': this.type === 'textarea', | |||
'is-disabled': this.disabled, | |||
'is-focused': this.focusShow | |||
}); | |||
}, | |||
inputContentStyle() { | |||
const focusColor = this.focusShow ? | |||
this.primaryColor : | |||
this.styles.borderColor; | |||
const borderColor = | |||
this.inputBorder && this.msg ? '#dd524d' : focusColor; | |||
return obj2strStyle({ | |||
'border-color': borderColor || '#e5e5e5', | |||
'background-color': this.disabled ? | |||
this.styles.disableColor : this.styles.backgroundColor | |||
}); | |||
}, | |||
// input右侧样式 | |||
inputStyle() { | |||
const paddingRight = | |||
this.type === 'password' || this.clearable || this.prefixIcon ? | |||
'' : | |||
'10px'; | |||
return obj2strStyle({ | |||
'padding-right': paddingRight, | |||
'padding-left': this.prefixIcon ? '' : '10px' | |||
}); | |||
} | |||
}, | |||
watch: { | |||
value(newVal) { | |||
// fix by mehaotian 解决 值为null的情况下,input报错的bug | |||
if (newVal === null) { | |||
this.val = ''; | |||
return | |||
} | |||
this.val = newVal; | |||
}, | |||
modelValue(newVal) { | |||
if (newVal === null) { | |||
this.val = ''; | |||
return | |||
} | |||
this.val = newVal; | |||
}, | |||
focus(newVal) { | |||
this.$nextTick(() => { | |||
this.focused = this.focus; | |||
this.focusShow = this.focus; | |||
}); | |||
} | |||
}, | |||
created() { | |||
this.init(); | |||
// TODO 处理头条vue3 computed 不监听 inject 更改的问题(formItem.errMsg) | |||
if (this.form && this.formItem) { | |||
this.$watch('formItem.errMsg', newVal => { | |||
this.localMsg = newVal; | |||
}); | |||
} | |||
}, | |||
mounted() { | |||
this.$nextTick(() => { | |||
this.focused = this.focus; | |||
this.focusShow = this.focus; | |||
}); | |||
}, | |||
methods: { | |||
/** | |||
* 初始化变量值 | |||
*/ | |||
init() { | |||
if (this.value || this.value === 0) { | |||
this.val = this.value; | |||
} else if ( | |||
this.modelValue || | |||
this.modelValue === 0 || | |||
this.modelValue === '' | |||
) { | |||
this.val = this.modelValue; | |||
} else { | |||
// fix by ht 如果初始值为null,则input报错,待框架修复 | |||
this.val = ''; | |||
} | |||
}, | |||
/** | |||
* 点击图标时触发 | |||
* @param {Object} type | |||
*/ | |||
onClickIcon(type) { | |||
this.$emit('iconClick', type); | |||
}, | |||
/** | |||
* 显示隐藏内容,密码框时生效 | |||
*/ | |||
onEyes() { | |||
this.showPassword = !this.showPassword; | |||
this.$emit('eyes', this.showPassword); | |||
}, | |||
/** | |||
* 输入时触发 | |||
* @param {Object} event | |||
*/ | |||
onInput(event) { | |||
let value = event.detail.value; | |||
// 判断是否去除空格 | |||
if (this.trim) { | |||
if (typeof this.trim === 'boolean' && this.trim) { | |||
value = this.trimStr(value); | |||
} | |||
if (typeof this.trim === 'string') { | |||
value = this.trimStr(value, this.trim); | |||
} | |||
} | |||
if (this.errMsg) this.errMsg = ''; | |||
this.val = value; | |||
// TODO 兼容 vue2 | |||
this.$emit('input', value); | |||
// TODO 兼容 vue3 | |||
this.$emit('update:modelValue', value); | |||
}, | |||
/** | |||
* 外部调用方法 | |||
* 获取焦点时触发 | |||
* @param {Object} event | |||
*/ | |||
onFocus() { | |||
this.$nextTick(() => { | |||
this.focused = true; | |||
}); | |||
this.$emit('focus', null); | |||
}, | |||
_Focus(event) { | |||
this.focusShow = true; | |||
this.$emit('focus', event); | |||
}, | |||
/** | |||
* 外部调用方法 | |||
* 失去焦点时触发 | |||
* @param {Object} event | |||
*/ | |||
onBlur() { | |||
this.focused = false; | |||
this.$emit('blur', null); | |||
}, | |||
_Blur(event) { | |||
let value = event.detail.value; | |||
this.focusShow = false; | |||
this.$emit('blur', event); | |||
// 根据类型返回值,在event中获取的值理论上讲都是string | |||
if (this.isEnter === false) { | |||
this.$emit('change', this.val); | |||
} | |||
// 失去焦点时参与表单校验 | |||
if (this.form && this.formItem) { | |||
const { validateTrigger } = this.form; | |||
if (validateTrigger === 'blur') { | |||
this.formItem.onFieldChange(); | |||
} | |||
} | |||
}, | |||
/** | |||
* 按下键盘的发送键 | |||
* @param {Object} e | |||
*/ | |||
onConfirm(e) { | |||
this.$emit('confirm', this.val); | |||
this.isEnter = true; | |||
this.$emit('change', this.val); | |||
this.$nextTick(() => { | |||
this.isEnter = false; | |||
}); | |||
}, | |||
/** | |||
* 清理内容 | |||
* @param {Object} event | |||
*/ | |||
onClear(event) { | |||
this.val = ''; | |||
// TODO 兼容 vue2 | |||
this.$emit('input', ''); | |||
// TODO 兼容 vue2 | |||
// TODO 兼容 vue3 | |||
this.$emit('update:modelValue', ''); | |||
// 点击叉号触发 | |||
this.$emit('clear'); | |||
}, | |||
/** | |||
* 键盘高度发生变化的时候触发此事件 | |||
* 兼容性:微信小程序2.7.0+、App 3.1.0+ | |||
* @param {Object} event | |||
*/ | |||
onkeyboardheightchange(event) { | |||
this.$emit('keyboardheightchange', event); | |||
}, | |||
/** | |||
* 去除空格 | |||
*/ | |||
trimStr(str, pos = 'both') { | |||
if (pos === 'both') { | |||
return str.trim(); | |||
} else if (pos === 'left') { | |||
return str.trimLeft(); | |||
} else if (pos === 'right') { | |||
return str.trimRight(); | |||
} else if (pos === 'start') { | |||
return str.trimStart(); | |||
} else if (pos === 'end') { | |||
return str.trimEnd(); | |||
} else if (pos === 'all') { | |||
return str.replace(/\s+/g, ''); | |||
} else if (pos === 'none') { | |||
return str; | |||
} | |||
return str; | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="scss"> | |||
$uni-error: #e43d33; | |||
$uni-border-1: #dcdfe6 !default; | |||
.uni-easyinput { | |||
/* #ifndef APP-NVUE */ | |||
width: 100%; | |||
/* #endif */ | |||
flex: 1; | |||
position: relative; | |||
text-align: left; | |||
color: #333; | |||
font-size: 14px; | |||
} | |||
.uni-easyinput__content { | |||
flex: 1; | |||
/* #ifndef APP-NVUE */ | |||
width: 100%; | |||
display: flex; | |||
box-sizing: border-box; | |||
// min-height: 36px; | |||
/* #endif */ | |||
flex-direction: row; | |||
align-items: center; | |||
// 处理border动画刚开始显示黑色的问题 | |||
border-color: #fff; | |||
transition-property: border-color; | |||
transition-duration: 0.3s; | |||
} | |||
.uni-easyinput__content-input { | |||
/* #ifndef APP-NVUE */ | |||
width: auto; | |||
/* #endif */ | |||
position: relative; | |||
overflow: hidden; | |||
flex: 1; | |||
line-height: 1; | |||
font-size: 14px; | |||
height: 35px; | |||
// min-height: 36px; | |||
/*ifdef H5*/ | |||
& ::-ms-reveal { | |||
display: none; | |||
} | |||
& ::-ms-clear { | |||
display: none; | |||
} | |||
& ::-o-clear { | |||
display: none; | |||
} | |||
/*endif*/ | |||
} | |||
.uni-easyinput__placeholder-class { | |||
color: #999; | |||
font-size: 12px; | |||
// font-weight: 200; | |||
} | |||
.is-textarea { | |||
align-items: flex-start; | |||
} | |||
.is-textarea-icon { | |||
margin-top: 5px; | |||
} | |||
.uni-easyinput__content-textarea { | |||
position: relative; | |||
overflow: hidden; | |||
flex: 1; | |||
line-height: 1.5; | |||
font-size: 14px; | |||
margin: 6px; | |||
margin-left: 0; | |||
height: 80px; | |||
min-height: 80px; | |||
/* #ifndef APP-NVUE */ | |||
min-height: 80px; | |||
width: auto; | |||
/* #endif */ | |||
} | |||
.input-padding { | |||
padding-left: 10px; | |||
} | |||
.content-clear-icon { | |||
padding: 0 5px; | |||
} | |||
.label-icon { | |||
margin-right: 5px; | |||
margin-top: -1px; | |||
} | |||
// 显示边框 | |||
.is-input-border { | |||
/* #ifndef APP-NVUE */ | |||
display: flex; | |||
box-sizing: border-box; | |||
/* #endif */ | |||
flex-direction: row; | |||
align-items: center; | |||
border: 1px solid $uni-border-1; | |||
border-radius: 4px; | |||
/* #ifdef MP-ALIPAY */ | |||
overflow: hidden; | |||
/* #endif */ | |||
} | |||
.uni-error-message { | |||
position: absolute; | |||
bottom: -17px; | |||
left: 0; | |||
line-height: 12px; | |||
color: $uni-error; | |||
font-size: 12px; | |||
text-align: left; | |||
} | |||
.uni-error-msg--boeder { | |||
position: relative; | |||
bottom: 0; | |||
line-height: 22px; | |||
} | |||
.is-input-error-border { | |||
border-color: $uni-error; | |||
.uni-easyinput__placeholder-class { | |||
color: mix(#fff, $uni-error, 50%); | |||
} | |||
} | |||
.uni-easyinput--border { | |||
margin-bottom: 0; | |||
padding: 10px 15px; | |||
// padding-bottom: 0; | |||
border-top: 1px #eee solid; | |||
} | |||
.uni-easyinput-error { | |||
padding-bottom: 0; | |||
} | |||
.is-first-border { | |||
/* #ifndef APP-NVUE */ | |||
border: none; | |||
/* #endif */ | |||
/* #ifdef APP-NVUE */ | |||
border-width: 0; | |||
/* #endif */ | |||
} | |||
.is-disabled { | |||
background-color: #f7f6f6; | |||
color: #d5d5d5; | |||
.uni-easyinput__placeholder-class { | |||
color: #d5d5d5; | |||
font-size: 12px; | |||
} | |||
} | |||
</style> |
@ -1,8 +0,0 @@ | |||
{ | |||
"hash": "6ffcc05d", | |||
"configHash": "c4424c2b", | |||
"lockfileHash": "e3b0c442", | |||
"browserHash": "4bbf14b9", | |||
"optimized": {}, | |||
"chunks": {} | |||
} |
@ -0,0 +1,83 @@ | |||
<script lang="uts"> | |||
let firstBackTime = 0 | |||
export default { | |||
onLaunch: function () { | |||
console.log('App Launch') | |||
}, | |||
onShow: function () { | |||
console.log('App Show') | |||
}, | |||
onHide: function () { | |||
console.log('App Hide') | |||
}, | |||
// #ifdef APP-ANDROID | |||
onLastPageBackPress: function () { | |||
console.log('App LastPageBackPress') | |||
if (firstBackTime == 0) { | |||
uni.showToast({ | |||
title: '再按一次退出应用', | |||
position: 'bottom', | |||
}) | |||
firstBackTime = Date.now() | |||
setTimeout(() => { | |||
firstBackTime = 0 | |||
}, 2000) | |||
} else if (Date.now() - firstBackTime < 2000) { | |||
firstBackTime = Date.now() | |||
uni.exit() | |||
} | |||
}, | |||
// #endif | |||
onExit: function () { | |||
console.log('App Exit') | |||
}, | |||
} | |||
</script> | |||
<style> | |||
@import "@/static/iconfont.css"; | |||
@import "css/header.css"; | |||
/*每个页面公共css */ | |||
body{ | |||
background-color: #ffffff; | |||
} | |||
body { | |||
font-family: Arial, sans-serif; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
@media only screen and (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ | |||
.uni-hairline{ | |||
border-width: 0.5px !important; | |||
} | |||
.uni-nbfc { | |||
background-color: transparent !important; | |||
} | |||
} | |||
@media screen and (min-width: 320px) { | |||
html {font-size: 14px;} | |||
} | |||
@media screen and (min-width: 360px) { | |||
html {font-size: 16px;} | |||
} | |||
@media screen and (min-width: 400px) { | |||
html {font-size: 18px;} | |||
} | |||
@media screen and (min-width: 440px) { | |||
html {font-size: 20px;} | |||
} | |||
@media screen and (min-width: 480px) { | |||
html {font-size: 22px;} | |||
} | |||
@media screen and (min-width: 640px) { | |||
html {font-size: 28px;} | |||
} | |||
</style> |
@ -0,0 +1,60 @@ | |||
.container { | |||
display: flex; | |||
flex-direction: column; | |||
height: 100vh; | |||
width: 100%; | |||
background-color: #f5f5f5; | |||
/* position: relative; */ | |||
} | |||
/* 头部 */ | |||
.header { | |||
height: 15%; | |||
width: 100%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
padding: 1rem; | |||
background-color: #044f7a; | |||
} | |||
.header_info{ | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
} | |||
.header_info_icons{ | |||
display: flex; | |||
align-items: center; | |||
height: 100%; | |||
width: 100%; | |||
margin: 0 0.5rem 0 0.5rem; | |||
} | |||
.header_info_icon{ | |||
display: flex; | |||
height: 100%; | |||
width: 10%; | |||
width: 5%; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.header_text{ | |||
color: #bdd1dc; | |||
font-size: 1rem; | |||
left : 25%; | |||
} | |||
.header_texts{ | |||
color: #bdd1dc; | |||
font-size: 1rem; | |||
} | |||
.header_change{ | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
font-size: 1rem; | |||
color: #bdd1dc; | |||
} |
@ -0,0 +1,43 @@ | |||
{ | |||
"name" : "111", | |||
"appid" : "__UNI__ABF0653", | |||
"description" : "", | |||
"versionName" : "1.0.0", | |||
"versionCode" : "100", | |||
"uni-app-x" : {}, | |||
/* 快应用特有相关 */ | |||
"quickapp" : {}, | |||
/* 小程序特有相关 */ | |||
"mp-weixin" : { | |||
"appid" : "wx5b4b75c83b7485b1", | |||
"setting" : { | |||
"urlCheck" : false | |||
}, | |||
"usingComponents" : true | |||
}, | |||
"mp-alipay" : { | |||
"usingComponents" : true | |||
}, | |||
"mp-baidu" : { | |||
"usingComponents" : true | |||
}, | |||
"mp-toutiao" : { | |||
"usingComponents" : true | |||
}, | |||
"uniStatistics" : { | |||
"enable" : false | |||
}, | |||
"vueVersion" : "3", | |||
"app" : { | |||
"distribute" : { | |||
"icons" : { | |||
"android" : { | |||
"hdpi" : "", | |||
"xhdpi" : "", | |||
"xxhdpi" : "", | |||
"xxxhdpi" : "" | |||
} | |||
} | |||
} | |||
} | |||
} |
@ -0,0 +1,95 @@ | |||
{ | |||
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages | |||
{ | |||
"path": "pages/index/login", | |||
"style": { | |||
"navigationBarTitleText": "登录", | |||
"navigationStyle":"custom" | |||
} | |||
}, | |||
{ | |||
"path": "pages/home/home", | |||
"style": { | |||
"navigationBarTitleText": "主页", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
}, | |||
{ | |||
"path": "pages/index/wode", | |||
"style": { | |||
"navigationBarTitleText": "我的", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
}, | |||
{ | |||
"path": "pages/views/dingDanCreate", | |||
"style": { | |||
"navigationBarTitleText": "录入订单", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
}, | |||
{ | |||
"path": "pages/index/dingdan", | |||
"style": { | |||
"navigationBarTitleText": "订单", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
}, | |||
{ | |||
"path" : "pages/index/PayPal", | |||
"style" : | |||
{ | |||
"navigationBarTitleText" : "", | |||
"navigationStyle":"custom" | |||
}, | |||
"needLogin": true | |||
} | |||
], | |||
"globalStyle": { | |||
"navigationBarTextStyle": "black", | |||
"navigationBarTitleText": "uni-app x", | |||
"navigationBarBackgroundColor": "#F8F8F8", | |||
"backgroundColor": "#F8F8F8" | |||
}, | |||
"uniIdRouter": {}, | |||
"tabBar": { | |||
"color": "#7A7E83", | |||
"selectedColor": "#3cc51f", | |||
"borderStyle": "black", | |||
"backgroundColor": "#ffffff", | |||
"list": [{ | |||
"pagePath": "pages/home/home", | |||
"iconPath": "/static/image/11.png", | |||
"selectedIconPath": "/static/image/路径 3909.png", | |||
"text": "首页" | |||
}, { | |||
"pagePath": "pages/index/dingdan", | |||
"iconPath": "/static/image/路径 4016_1.png", | |||
"selectedIconPath": "/static/image/路径 4016.png", | |||
"text": "订单" | |||
}, | |||
{ | |||
"pagePath": "pages/index/wode", | |||
"iconPath": "/static/image/路径 3917.png", | |||
"selectedIconPath": "/static/image/路径 24.png", | |||
"text": "我的" | |||
} | |||
] | |||
}, | |||
"condition" : { //模式配置,仅开发期间生效 | |||
"current": 0, //当前激活的模式(list 的索引项) | |||
"list": [ | |||
{ | |||
"name": "", //模式名称 | |||
"path": "", //启动页面,必选 | |||
"query": "" //启动参数,在页面的onLoad函数里面得到 | |||
} | |||
] | |||
} | |||
} |
@ -0,0 +1,317 @@ | |||
<template> | |||
<view class="container"> | |||
<!-- 顶部标题 --> | |||
<view class="header"> | |||
<view class="header_info"> | |||
<text class="header_texts" :title="title">{{title}}</text> | |||
<text class="header_info_icons">|</text> | |||
<view @click="change_text" class="header_change"> | |||
<text >切换</text> | |||
<uni-icons type="right" size="30" color="#c2d4de" ></uni-icons> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="swiper"> | |||
<image class="swiper-image" src="/static/image/组 71699.png"></image> | |||
</view> | |||
<view class="order_Entry_container" @click="orderEntry"> | |||
<image class="order_Entry_image" src="/static/image/组 71699_1@3x.png"></image> | |||
<text style="color: #115881;font-weight: bold;margin-left: 1rem;">录入订单</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 :inputBorder="false" @input="handleSearch" class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" /> | |||
<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" @click="change_city(item.name)">{{item.name}}</text> | |||
</view> | |||
</view> | |||
<view v-if="isshow_1" class="show_container_1"> | |||
<image class="show_container_1_image" src="/static/image/图层_6.png"></image> | |||
<view class="show_container_1_footer"> | |||
<text>门店已经切换为{{title}}</text> | |||
<button class="show_container_1_footer_button" @click="close_view">好的</button> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
ServiceName:'', | |||
title:"北京汽车有限公司", | |||
isshow:false, | |||
isshow_1:false, | |||
newListData:[], | |||
allMsg : [ | |||
{ name: "myhua", id: 1 }, | |||
{ name: "mp3", id: 2 }, | |||
{ name: "hello", id: 3 }, | |||
{ name: "world", id: 4 }, | |||
{ name: "warm weather", id: 5 }, | |||
{ name: "m3", id: 6 }, | |||
{ name: "hahaha", id: 7 } | |||
], | |||
textcontent: [], | |||
}; | |||
}, | |||
mounted() { | |||
this.allMsg = [ | |||
{ name: "myhua", id: 1 }, | |||
{ name: "mp3", id: 2 }, | |||
{ name: "hello", id: 3 }, | |||
{ name: "world", id: 4 }, | |||
{ name: "warm weather", id: 5 }, | |||
{ name: "m3", id: 6 }, | |||
{ name: "hahaha", id: 7 } | |||
]; | |||
this.textcontent = this.allMsg; | |||
}, | |||
methods: { | |||
change_text(){ | |||
if(this.isshow){ | |||
this.isshow=false; | |||
}else{ | |||
this.isshow=true; | |||
console.log('111') | |||
} | |||
}, | |||
orderEntry(){ | |||
console.log('111'); | |||
uni.navigateTo( | |||
{ url: '/pages/views/dingDanCreate' } | |||
) | |||
}, | |||
// 搜索城市名字 | |||
searchName(){ | |||
}, | |||
change_city(name){ | |||
this.title = name; | |||
this.change_text(); | |||
this.isshow_1 = true; | |||
}, | |||
close_view(){ | |||
this.isshow_1 = false; | |||
}, | |||
// 模糊匹配 | |||
// 右上角搜索框--模糊查询 | |||
handleSearch(event) { | |||
console.log(event); | |||
if(event){ | |||
let queryStringArr = event.split(""); | |||
let str = "(.*?)"; | |||
this.textcontent = []; | |||
let regStr = str + queryStringArr.join(str) + str; | |||
let reg = RegExp(regStr, "i"); // 以mh为例生成的正则表达式为/(.*?)m(.*?)h(.*?)/i | |||
this.allMsg.map(item => { | |||
if (reg.test(item.name)) { | |||
this.textcontent.push(item); | |||
} | |||
}); | |||
}else { | |||
this.textcontent=[]; | |||
this.textcontent = this.allMsg; | |||
} | |||
} | |||
} | |||
}; | |||
</script> | |||
<style> | |||
/* 订单录入 */ | |||
.order_Entry_container{ | |||
width: 90%; | |||
height: 8%; | |||
background-color: #d9e5eb; | |||
border-radius: 0.6rem; | |||
margin-left:5%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
margin-top: 10%; | |||
} | |||
.order_Entry_image{ | |||
width: 10%; | |||
height: 70%; | |||
margin-left: 3%; | |||
} | |||
.order_Entry_end{ | |||
margin-left: auto; | |||
margin-right: 7%; | |||
} | |||
/* 轮播图 */ | |||
.swiper { | |||
height: 30%; | |||
width: 100%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
overflow: hidden; | |||
} | |||
.swiper-image { | |||
width: 100%; | |||
height: 100%; | |||
margin: 0 auto; | |||
} | |||
.form { | |||
flex: 1; | |||
padding: 1rem; | |||
} | |||
.submit-button { | |||
width: 100%; | |||
height: 3rem; | |||
background-color: #007aff; | |||
color: #fff; | |||
border: none; | |||
border-radius: 0.3rem; | |||
font-size: 1rem; | |||
} | |||
.footer { | |||
display: flex; | |||
justify-content: space-around; | |||
padding: 0.8rem; | |||
background-color: #fff; | |||
border-top: 1rem solid #ccc; | |||
} | |||
.nav-item { | |||
text-align: center; | |||
} | |||
.nav-item text { | |||
font-size: 0.9rem; | |||
} | |||
.icon-image{ | |||
width: 30%; | |||
height: 10rem; | |||
margin: 0 auto; | |||
margin-top: 1rem; | |||
} | |||
/* 遮罩层 */ | |||
.show_container{ | |||
width: 60%; | |||
height: 36%; | |||
background-color: #ffffff; | |||
position: absolute; | |||
border-radius: 1rem; | |||
/* border: 1rem solid; */ | |||
box-shadow: 0rem 0.2rem 0rem #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 1rem 0 1rem; | |||
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: 1.5rem; | |||
width: 100%; | |||
line-height: 1.5rem; | |||
margin: 1rem 0 1rem 0; | |||
font-size: 0.8rem; | |||
} | |||
.isshow-content::-webkit-scrollbar { | |||
display: none; | |||
} | |||
/* 提示框*/ | |||
.show_container_1{ | |||
width: 80%; | |||
height: 50%; | |||
background-color: #ffffff; | |||
position: absolute; | |||
border-radius: 1rem; | |||
/* border: 1rem solid; */ | |||
box-shadow: 0rem 0.2rem 0rem #e4e4e4; | |||
left:10%; | |||
top:25%; | |||
z-index:999; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.show_container_1_image{ | |||
height: 40%; | |||
width: 60%; | |||
top: 5%; | |||
} | |||
.show_container_1_footer{ | |||
height: 50%; | |||
width: 100%; | |||
color:#0b5583; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
font-weight: bold; | |||
font-size: 0.7rem; | |||
} | |||
.show_container_1_footer text{ | |||
margin-top: 10%; | |||
} | |||
.show_container_1_footer_button{ | |||
background-color: #ffffff; | |||
color:#0b5583; | |||
height: 30%; | |||
border-radius: 1.8rem; | |||
width: 80%; | |||
margin-top: 5%; | |||
border: 0.1rem solid #0c547e; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
</style> |
@ -0,0 +1,470 @@ | |||
<template> | |||
<view class="containers"> | |||
<view class="header"> | |||
<view class="header_info"> | |||
<view class="header_info_icon" @click.native.stop.prevent="toBack" style="display: flex; justify-content: center; align-items: center;"> | |||
<uni-icons type="left" size="30" color="#c2d4de" > </uni-icons> | |||
</view> | |||
<text class="header_text">付款信息</text> | |||
</view> | |||
</view> | |||
<view class="section" style="margin-top: 5%;"> | |||
<view class="form-item"> | |||
<text class="label">产品名称</text> | |||
<l-radio :checked="paymentMethod === '全款'" label="全款" fontSize="1rem" style="transform: scale(0.7);"> | |||
<template #icon="{checked}"> | |||
<image v-show="checked" style="width:1.2rem; height:1.2rem;" src="/static/image/xuanzhong.png"></image> | |||
<image v-show="!checked" style="width:1.2rem; height:1.2rem" src="/static/image/weixuanzhong.png"></image> | |||
</template> | |||
</l-radio> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">经销商</text> | |||
<l-radio-group v-model="checked" @change="onChange" class="radio-group" > | |||
<l-radio value="Beijing" label="个人" fontSize="1rem" style="margin-right: 1rem; transform: scale(0.7);"> | |||
<template #icon="{checked}"> | |||
<image v-show="checked" style="width:1.2rem; height:1.2rem;" src="/static/image/xuanzhong.png"></image> | |||
<image v-show="!checked" style="width:1.2rem; height:1.2rem" src="/static/image/weixuanzhong.png"></image> | |||
</template> | |||
</l-radio> | |||
<l-radio value="Shanghai" label="公司" fontSize="1rem" style="transform: scale(0.7);"> | |||
<template #icon="{checked}"> | |||
<image v-show="checked" style="width:1.2rem; height:1.2rem;" src="/static/image/xuanzhong.png"></image> | |||
<image v-show="!checked" style="width:1.2rem; height:1.2rem" src="/static/image/weixuanzhong.png"></image> | |||
</template> | |||
</l-radio> | |||
</l-radio-group> | |||
</view> | |||
</view> | |||
<view class="idCard-box"> | |||
<view class="reverse"> | |||
<image :src="upLoadPositiveImg == ''?positiveImg:upLoadPositiveImg" @tap.prevent="uploadPositive"> | |||
</image> | |||
</view> | |||
<view class="reverse"> | |||
<image :src="upLoadReverseImg == ''?reverseImg:upLoadReverseImg" @tap.prevent="uploadReverse"> | |||
</image> | |||
</view> | |||
<view class="reverse"> | |||
<image :src="upLoadCarImg == ''?carImg:upLoadCarImg" @tap.prevent="uploadReverse"> | |||
</image> | |||
</view> | |||
</view> | |||
<!-- 客户基本信息 --> | |||
<view class="section"> | |||
<view class="con_size"> | |||
<image src="/static/image/矩形 5315.png" class='con_size_img' ></image> | |||
客户基本信息 | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">产品名称</text> | |||
<text class="value">{{ selectedProduct }}</text> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">经销商</text> | |||
<text class="value">{{ selectedStore }}</text> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">客户姓名</text> | |||
<input class="input" v-model="clientInfo.name" placeholder="请输入客户姓名" /> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">居住地址</text> | |||
<input class="input" v-model="clientInfo.address" placeholder="请输入居住地址" /> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">身份证号码</text> | |||
<input class="input" v-model="clientInfo.idNumber" placeholder="请输入身份证号码" /> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">联系方式</text> | |||
<input class="input" v-model="clientInfo.contact" placeholder="请输入联系方式" /> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">销售部门</text> | |||
<l-radio-group class="radio-group" @change="handleDepartmentChange"> | |||
<label class="radio-label" v-for="item in departments" :key="item"> | |||
<l-radio :value="item" :checked="clientInfo.department === item" > | |||
<template #icon="{checked}"> | |||
<image v-show="checked" style="width:1.2rem; height:1.2rem;" src="/static/image/xuanzhong.png"></image> | |||
<image v-show="!checked" style="width:1.2rem; height:1.2rem" src="/static/image/weixuanzhong.png"></image> | |||
</template> | |||
</l-radio> | |||
<text style="margin-left:0.2rem;">{{ item }}</text> | |||
</label> | |||
</l-radio-group> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">促销销售顾问</text> | |||
<input class="input" v-model="clientInfo.salesAdvisor" placeholder="请输入店铺销售顾问" /> | |||
</view> | |||
</view> | |||
<!-- 车辆信息 --> | |||
<view class="section"> | |||
<view class="con_size"> | |||
<image src="/static/image/矩形 5315.png" class='con_size_img' ></image>车辆信息</view> | |||
<view class="form-item"> | |||
<text class="label">车牌车系</text> | |||
<picker class="picker" @change="bindCarBrandChange" :value="carBrandIndex" :range="carBrands"> | |||
<view class="picker-text">{{ carBrands[carBrandIndex] || '请选择车辆品牌 >' }}</view> | |||
</picker> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">车牌号</text> | |||
<input class="input" v-model="vehicleInfo.plateNumber" placeholder="456123351" /> | |||
</view> | |||
</view> | |||
<!-- 产品描述 --> | |||
<view class="section"> | |||
<view class="con_size"> | |||
<image src="/static/image/矩形 5315.png" class='con_size_img' ></image>产品描述</view> | |||
<view class="form-item"> | |||
<text class="label">产品名称</text> | |||
<text class="value">{{ selectedService }}</text> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">服务年龄</text> | |||
<picker class="picker" @change="bindServiceAgeChange" :value="serviceAgeIndex" :range="serviceAges"> | |||
<view class="picker-text">{{ serviceAges[serviceAgeIndex] || '请选择服务年龄 >' }}</view> | |||
</picker> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">销售金额</text> | |||
<input class="input" v-model="productInfo.salesAmount" placeholder="请输入销售金额" /> | |||
</view> | |||
</view> | |||
<!-- 付款信息 --> | |||
<view class="section"> | |||
<view class="con_size"> | |||
<image src="/static/image/矩形 5315.png" class='con_size_img' ></image>付款信息</view> | |||
<view class="form-item"> | |||
<text class="label">收款方</text> | |||
<picker class="picker" @change="bindPayeeChange" :value="payeeIndex" :range="payees"> | |||
<view class="picker-text">{{ payees[payeeIndex] || '请选择收款方 >' }}</view> | |||
</picker> | |||
</view> | |||
<view class="form-item"> | |||
<text class="label">付款时间</text> | |||
<uni-datetime-picker class="timePiker" type="datetime" v-model="paymentInfo.paymentTime" :clear-icon="false" :border="false"> | |||
</uni-datetime-picker> | |||
</view> | |||
<view class="con_size"> | |||
<text class="label">上传凭证</text> | |||
<wht-img-upload v-model="imageList" /> | |||
</view> | |||
</view> | |||
<view class="section"> | |||
<view class="form-button"> | |||
<button class=" button" @click="get_to" style="width: 60%;">提交去录单</button> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
selectedProduct: "自动填写所选商品服务分类", | |||
selectedStore: "自动填写所选择的门店", | |||
selectedService: "自动填写所选择的服务分类", | |||
paymentMethod: '全款', // 默认选中全款 | |||
customerType: '个人' , // 默认选中个人 | |||
clientInfo: { | |||
name: '', | |||
address: '', | |||
idNumber: '', | |||
contact: '', | |||
department: '', | |||
salesAdvisor: '' | |||
}, | |||
imageList:[], | |||
vehicleInfo: { | |||
plateNumber: '456123351' | |||
}, | |||
productInfo: { | |||
salesAmount: '' | |||
}, | |||
paymentInfo: { | |||
paymentTime: '' | |||
}, | |||
departments: ['售前', '售后', '二网车'], | |||
carBrands: ['品牌A', '品牌B', '品牌C'], | |||
carBrandIndex: -1, | |||
serviceAges: ['1年', '2年', '3年'], | |||
serviceAgeIndex: -1, | |||
payees: ['收款方A', '收款方B', '收款方C'], | |||
payeeIndex: -1, | |||
// 扫描 | |||
positiveImg: '/static/image/组件 4 – 1.png',//自己图片路径 | |||
upLoadPositiveImg: '', | |||
// 反面身份证 | |||
reverseImg: '/static/image/组 71663.png', //自己图片路径 | |||
upLoadReverseImg: '', | |||
// 行车驾驶证 | |||
carImg: '/static/image/组件 2 – 1.png', //自己图片路径 | |||
upLoadCarImg: '', | |||
baidu_token:' '//百度token | |||
} | |||
}, | |||
methods: { | |||
get_to(){ | |||
console.log(111); | |||
}, | |||
toBack(){ | |||
let canNavBack = getCurrentPages() | |||
if( canNavBack && canNavBack.length>1) { | |||
uni.navigateBack() | |||
} else { | |||
history.back(); | |||
} | |||
}, | |||
handleDepartmentChange(e) { | |||
this.clientInfo.department = e.detail.value | |||
}, | |||
bindCarBrandChange(e) { | |||
this.carBrandIndex = e.detail.value | |||
}, | |||
bindServiceAgeChange(e) { | |||
this.serviceAgeIndex = e.detail.value | |||
}, | |||
bindPayeeChange(e) { | |||
this.payeeIndex = e.detail.value | |||
}, | |||
// file文件转base64 | |||
getImageBase64(blob) { | |||
return new Promise((resolve, reject) => { | |||
const reader = new FileReader(); | |||
reader.readAsDataURL(blob); | |||
reader.onload = () => { | |||
const base64 = reader.result; | |||
resolve(base64); | |||
} | |||
reader.onerror = error => reject(error); | |||
}); | |||
}, | |||
// 身份证正面上传 | |||
uploadPositive() { | |||
uni.chooseImage({ | |||
count: 1, | |||
sizeType: ['original', 'compressed'], | |||
sourceType: ['album', 'camera'], | |||
success: (res) => { | |||
this.upLoadPositiveImg = res.tempFilePaths[0] | |||
this.getImageBase64(res.tempFiles[0]).then(res => { | |||
this.uploadIdentify(res) | |||
}) | |||
} | |||
}) | |||
}, | |||
// 身份证反面上传 | |||
uploadReverse() { | |||
uni.chooseImage({ | |||
count: 1, | |||
sizeType: ['original', 'compressed'], | |||
sourceType: ['album', 'camera'], | |||
success: (res) => { | |||
this.upLoadReverseImg = res.tempFilePaths[0] | |||
this.getImageBase64(res.tempFiles[0]).then(res => { | |||
this.uploadIdentify(res) | |||
}) | |||
} | |||
}) | |||
}, | |||
// 获取百度token | |||
getACSS_TOKEN() { | |||
let that = this | |||
uni.request({ | |||
// url: '/baiduApi/oauth/2.0/token', | |||
url: 'https://aip.baidubce.com/oauth/2.0/token', | |||
method: 'POST', | |||
data: { | |||
grant_type: 'client_credentials', | |||
client_id: '你的', | |||
client_secret: '你的', | |||
}, | |||
header: { | |||
'Content-Type': 'application/x-www-form-urlencoded' | |||
}, | |||
success: res => { | |||
this.baidu_token = res.data.access_token | |||
} | |||
}); | |||
}, | |||
// 上传识别 | |||
uploadIdentify(res) { | |||
uni.request({ | |||
url: '/baiduApi/rest/2.0/ocr/v1/idcard?access_token=' + this.baidu_token, | |||
method: 'POST', | |||
data: { | |||
image: res, | |||
id_card_side: 'back' // 身份证 正反面 front:身份证含照片的一面 back:身份证带国徽的一面 | |||
}, | |||
header: { | |||
'Content-Type': 'application/x-www-form-urlencoded' | |||
}, | |||
success: res => { | |||
console.log(res.data) | |||
} | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.containers { | |||
height: 100%; | |||
width: 100%; | |||
background-color: #fff; | |||
overflow-y:scroll; | |||
} | |||
.container::-webkit-scrollbar { | |||
display: none; | |||
} | |||
.section { | |||
// margin-bottom: 30rpx; | |||
border-bottom: 1rpx solid #eee; | |||
margin: 0 1rem 0 1rem; | |||
} | |||
.form-item { | |||
display: flex; | |||
flex-direction: row; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 0.5rem 0; | |||
border-bottom: 0.1rem solid #f2f2f2; | |||
color: #767676; | |||
} | |||
.label { | |||
font-size: 28rpx; | |||
color: #666; | |||
width: 200rpx; | |||
} | |||
.input { | |||
flex: 1; | |||
text-align: right; | |||
font-size: 28rpx; | |||
color: #737373; | |||
} | |||
.picker { | |||
flex: 1; | |||
} | |||
.picker-text { | |||
text-align: right; | |||
color: #737373; | |||
font-size: 0.8rem; | |||
} | |||
.radio-group { | |||
display: flex; | |||
flex: 1; | |||
justify-content: flex-end; | |||
flex-direction: row; | |||
} | |||
.radio-label { | |||
padding: 0; | |||
margin-left: 10rpx; | |||
display: flex; | |||
flex-direction: row; | |||
font-size: 1rem; | |||
transform: scale(0.7); | |||
} | |||
.value { | |||
flex: 1; | |||
text-align: right; | |||
color: #737373; | |||
} | |||
.timePiker{ | |||
display: flex; | |||
justify-content: center; | |||
/* align-items: center; */ | |||
color: #3f3f3f; | |||
} | |||
.idCard-box { | |||
margin-top: 10%; | |||
width: 100%; | |||
height: 50%; | |||
display: flex; | |||
flex-direction: row; | |||
/* background-color: red; */ | |||
flex-wrap: wrap; | |||
.reverse { | |||
height: 30%; | |||
width: 40%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
// background-color: blue; | |||
margin: 0 5% 0 5%; | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
} | |||
/* 表单分区样式 */ | |||
.con_size { | |||
font-size: 1rem; | |||
font-weight: bold; | |||
margin: 1rem 0; | |||
color: #000000; | |||
display: flex; | |||
flex-direction: row; | |||
} | |||
.con_size_img{ | |||
height: 100%; | |||
width: 2%; | |||
margin-right: 2%; | |||
} | |||
.form-button{ | |||
width: 100%; | |||
height:100%; | |||
// background-color: #000000; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.button{ | |||
height: 100%; | |||
width: 100%; | |||
background-color: #044f7a; | |||
color: #ffffff; | |||
border-radius: 1rem; | |||
} | |||
</style> |
@ -0,0 +1,213 @@ | |||
<template> | |||
<view class="container"> | |||
<!-- 搜索栏 --> | |||
<view class="search-box"> | |||
<input | |||
v-model="searchKey" | |||
placeholder="请输入客户姓名/客户手机号" | |||
class="search-input" | |||
/> | |||
<button @tap="handleSearch" class="search-btn">搜索</button> | |||
</view> | |||
<!-- 订单状态筛选 --> | |||
<view class="filter-tabs"> | |||
<text | |||
v-for="tab in tabs" | |||
:key="tab" | |||
:class="['tab-item', activeTab === tab ? 'active' : '']" | |||
@tap="activeTab = tab" | |||
> | |||
{{ tab }} | |||
</text> | |||
</view> | |||
<!-- 订单列表 --> | |||
<scroll-view scroll-y class="order-list"> | |||
<view | |||
v-for="(order, index) in filteredOrders" | |||
:key="index" | |||
class="order-item" | |||
> | |||
<view class="order-header"> | |||
<text class="order-no">{{ order.orderNo }}</text> | |||
<text class="copy-btn" @tap="copyOrderNo(order.orderNo)">复制</text> | |||
</view> | |||
<view class="order-info"> | |||
<text>客户姓名:{{ order.customerName }}</text> | |||
<text>联系方式:{{ order.phone }}</text> | |||
<text>服务名称:{{ order.serviceName }}</text> | |||
<text>订单时间:{{ order.orderTime }}</text> | |||
<text>销售人员:{{ order.salesman }}</text> | |||
<text>门店名称:{{ order.store }}</text> | |||
</view> | |||
<button class="download-btn" @tap="downloadPDF(order)">PDF下载</button> | |||
</view> | |||
</scroll-view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
searchKey: '', // 搜索关键词 | |||
activeTab: '全部', // 当前激活的标签 | |||
tabs: ['全部', '已生效', '已失效'], | |||
orders: [/* 从接口获取的数据 */] | |||
} | |||
}, | |||
computed: { | |||
// 过滤后的订单列表 | |||
filteredOrders() { | |||
return this.orders.filter(order => { | |||
const matchStatus = this.activeTab === '全部' || | |||
order.status === this.activeTab | |||
const matchSearch = order.customerName.includes(this.searchKey) || | |||
order.phone.includes(this.searchKey) | |||
return matchStatus && matchSearch | |||
}) | |||
} | |||
}, | |||
methods: { | |||
// 搜索处理 | |||
handleSearch() { | |||
// 实际调用接口获取数据 | |||
console.log('搜索关键词:', this.searchKey) | |||
}, | |||
// 复制订单号 | |||
copyOrderNo(orderNo) { | |||
uni.setClipboardData({ | |||
data: orderNo, | |||
success: () => { | |||
uni.showToast({ title: '复制成功' }) | |||
} | |||
}) | |||
}, | |||
// PDF下载 | |||
async downloadPDF(order) { | |||
uni.showLoading({ title: '下载中...' }) | |||
try { | |||
// 1. 调用下载接口 | |||
const { tempFilePath } = await uni.downloadFile({ | |||
url: 'https://your-api.com/download', | |||
header: { 'order-id': order.id } | |||
}) | |||
// 2. 保存到本地 | |||
await uni.saveFile({ | |||
tempFilePath, | |||
success: (res) => { | |||
uni.showToast({ title: '下载成功' }) | |||
console.log('文件路径:', res.savedFilePath) | |||
} | |||
}) | |||
// 3. 打开文档(可选) | |||
uni.openDocument({ | |||
filePath: tempFilePath, | |||
showMenu: true | |||
}) | |||
} catch (err) { | |||
uni.showToast({ title: '下载失败', icon: 'none' }) | |||
} finally { | |||
uni.hideLoading() | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.container { | |||
padding: 20rpx; | |||
background-color: #f5f5f5; | |||
} | |||
.search-box { | |||
display: flex; | |||
margin-bottom: 30rpx; | |||
.search-input { | |||
flex: 1; | |||
background: #fff; | |||
padding: 20rpx; | |||
border-radius: 8rpx; | |||
} | |||
.search-btn { | |||
width: 140rpx; | |||
margin-left: 20rpx; | |||
background: #007AFF; | |||
color: white; | |||
} | |||
} | |||
.filter-tabs { | |||
display: flex; | |||
margin-bottom: 30rpx; | |||
.tab-item { | |||
flex: 1; | |||
text-align: center; | |||
padding: 20rpx; | |||
color: #666; | |||
border-bottom: 4rpx solid transparent; | |||
&.active { | |||
color: #007AFF; | |||
border-bottom-color: #007AFF; | |||
} | |||
} | |||
} | |||
.order-list { | |||
width: 100%; | |||
height: 40%; | |||
height: calc(100vh - 300rpx); | |||
} | |||
.order-item { | |||
background: white; | |||
border-radius: 12rpx; | |||
margin-bottom: 20rpx; | |||
padding: 20rpx; | |||
.order-header { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding-bottom: 20rpx; | |||
border-bottom: 1rpx solid #eee; | |||
.order-no { | |||
color: #333; | |||
font-size: 28rpx; | |||
} | |||
.copy-btn { | |||
color: #007AFF; | |||
font-size: 24rpx; | |||
} | |||
} | |||
.order-info { | |||
padding: 20rpx 0; | |||
text { | |||
display: block; | |||
color: #666; | |||
font-size: 24rpx; | |||
line-height: 1.8; | |||
} | |||
} | |||
.download-btn { | |||
width: 100%; | |||
height: 100%; | |||
background-color: red; | |||
color: #333; | |||
font-size: 26rpx; | |||
margin-top: 20rpx; | |||
} | |||
} | |||
</style> |
@ -0,0 +1,297 @@ | |||
<template> | |||
<view class="login-container"> | |||
<!-- 顶部欢迎语 --> | |||
<view class="login_image"> | |||
<image class="login_image_img" src="/static/image/组件 3 – 1.png" ></image> | |||
</view> | |||
<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' :clearable='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' :passwordIcon="false" :clearable='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, | |||
}; | |||
}, | |||
onLoad() { | |||
uni.request( | |||
{ | |||
url: 'https://gpt.aiym.run/contract/miniapp/product/categories' , | |||
method:'GET', | |||
header:{ | |||
"Content-Type": "application/json", | |||
"X-Access-Token":'11' | |||
}, | |||
success:(res)=>{ | |||
console.log(res.data) | |||
} | |||
} | |||
); | |||
}, | |||
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"); | |||
if(this.checked){ | |||
this.checked = this.checked; | |||
}else{ | |||
this.checked = true; | |||
} | |||
this.popupNoCancelShow = false; | |||
} | |||
} | |||
}; | |||
</script> | |||
<style> | |||
/* 页面容器 */ | |||
.login-container { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
background-color: #ffffff; | |||
height: 100vh; | |||
width: 100%; | |||
} | |||
.button-text { | |||
color: #fff; | |||
font-size: 12rem; | |||
} | |||
/* 登录图片 */ | |||
.login_image{ | |||
width: 100%; | |||
height: 40%; | |||
} | |||
.login_image_img{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
/* 欢迎语 */ | |||
.welcome { | |||
height: 15%; | |||
margin-bottom: 10%; | |||
display: flex; | |||
justify-content: end; | |||
align-items: center; | |||
} | |||
.welcome-text { | |||
font-size: 1.3rem; | |||
font-weight: bold; | |||
color: #044f7a; | |||
} | |||
/* 输入框容器 */ | |||
.input-container { | |||
width: 70%; | |||
height: 7%; | |||
/* background-color: #007aff; */ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
/* 输入框样式 */ | |||
.input { | |||
width: 100%; | |||
height: 99%; | |||
font-size: 1rem; | |||
border: none; | |||
outline: none; | |||
background-color: transparent; | |||
/* z-index: 99; */ | |||
} | |||
/* 下划线样式 */ | |||
.underline { | |||
width: 100%; | |||
height: 0.1%; | |||
background-color: #f2f2f2; | |||
} | |||
/* 协议提示 */ | |||
.agreement { | |||
font-size: 1rem; | |||
color: #666; | |||
margin-bottom: 1.2rem; | |||
width: 90%; | |||
left:10%; | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
} | |||
.login-agree{ | |||
font-size: 0.6rem; | |||
transform: scale(0.9); | |||
} | |||
.link { | |||
color: #007aff; | |||
text-decoration: underline; | |||
font-size: 0.6rem; | |||
} | |||
.button_container{ | |||
width: 100%; | |||
height: 40%; | |||
display: flex; | |||
align-items: center; | |||
} | |||
/* 登录按钮 */ | |||
.login-button { | |||
width: 70%; | |||
height: 10%; | |||
line-height: 10%; | |||
background-color: #044f7a; | |||
color: #fff; | |||
border: none; | |||
border-radius: 4rem; | |||
font-size: 1rem; | |||
position: absolute; | |||
top:15%; | |||
left:15%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
/* 弹窗样式 */ | |||
.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: 0.5rem; | |||
padding: 1.5rem; | |||
} | |||
.modal-header { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
font-size: 1rem; | |||
font-weight: bold; | |||
margin-bottom: 1rem; | |||
} | |||
.close { | |||
font-size: 1.5rem; | |||
cursor: pointer; | |||
} | |||
.modal-body { | |||
font-size: 1rem; | |||
line-height: 1.5; | |||
} | |||
.mini_container{ | |||
display: flex; | |||
flex-direction: row; | |||
align-items: center; | |||
} | |||
/* 按钮 */ | |||
.mini-btn{ | |||
width: 30%; | |||
margin-left: 15%; | |||
} | |||
</style> |
@ -0,0 +1,124 @@ | |||
<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> |
@ -0,0 +1,258 @@ | |||
<template> | |||
<view class="container"> | |||
<!-- 顶部标题 --> | |||
<view class="header"> | |||
<view class="header_info" > | |||
<view class="header_info_icon" @click.native.stop.prevent="toBack" style="display: flex; justify-content: center; align-items: center;"> | |||
<uni-icons type="left" size="30" color="#c2d4de" > </uni-icons> | |||
</view> | |||
<text class="header_text">录入订单</text> | |||
</view> | |||
</view> | |||
<view class="content_container"> | |||
<view class="isshow-header"> | |||
<uni-icons class=" isshow-header-content-icon" type="search" :size="20"></uni-icons> | |||
<uni-easyinput :inputBorder="false" class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" :focus="firstFocus" /> | |||
<text class="isshow-header-content-text" @click="searchName">搜索</text> | |||
</view> | |||
</view> | |||
<!-- 二级分类 --> | |||
<view class="content_footer"> | |||
<!-- 分类 --> | |||
<scroll-view show-scrollbar="false" class="content_footer_left"> | |||
<view v-for="(item,index) in product" :class="['content_footer_left_product', FirstIndex === item.id?'click_color':'']" @click="FirstLevelChange(item.id)">{{item.name}}</view> | |||
</scroll-view> | |||
<scroll-view show-scrollbar="false" class="content_footer_right"> | |||
<view v-for="(item,index) in product_2" class="content_footer_right_content"> | |||
<text class="text" :class="['content_footer_right_content_text', item.name === name?'select_color':'']">{{item.name}}</text> | |||
<radio class="content_footer_right_content_radio" value="item.id" :checked="item.name == name" activeBackgroundColor="#04517b" @click="selctRadio(item.name)"></radio> | |||
</view> | |||
</scroll-view> | |||
</view> | |||
<!-- 下一步 --> | |||
<view class="buttun" @click="toNext">下一步</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
firstFocus:true, | |||
ServiceName:'', | |||
product:[ | |||
{ | |||
id: 1, | |||
name: '数码', | |||
children: [ | |||
{ | |||
id: 12, | |||
name: '耳机', | |||
children: [ | |||
{ id: 121, name: '漫步者' }, | |||
{ id: 122, name: '倍思' } | |||
] | |||
}, | |||
{ | |||
id: 13, | |||
name: '电脑', | |||
children: [ | |||
{ id: 131, name: '联想' }, | |||
{ id: 132, name: '小米' }, | |||
{ id: 133, name: '戴尔' } | |||
] | |||
} | |||
] | |||
}, | |||
{ | |||
id: 2, | |||
name: '家用电器', | |||
// 类似数码的子结构 | |||
children:[ | |||
{ | |||
id: 11, | |||
name: '手机', | |||
children: [ | |||
{ id: 111, name: 'iphone' }, | |||
{ id: 112, name: 'vivo' }, | |||
{ id: 113, name: 'oppo' } | |||
] | |||
} | |||
] | |||
} | |||
], | |||
product_2:[], | |||
FirstIndex:0, | |||
name:'' | |||
} | |||
}, | |||
onLoad() { | |||
uni.request( | |||
{ | |||
url: 'https://gpt.aiym.run/contract/miniapp/product/categories' , | |||
method:'GET', | |||
header:{ | |||
"Content-Type": "application/json", | |||
"X-Access-Token":'11' | |||
}, | |||
success:(res)=>{ | |||
console.log(res.data.result) | |||
} | |||
} | |||
); | |||
}, | |||
methods: { | |||
toBack(){ | |||
let canNavBack = getCurrentPages() | |||
if( canNavBack && canNavBack.length>1) { | |||
uni.navigateBack() | |||
} else { | |||
history.back(); | |||
} | |||
}, | |||
toNext(){ | |||
console.log(111); | |||
uni.navigateTo( | |||
{ url: '/pages/index/PayPal' } | |||
) | |||
}, | |||
nameClick (){ | |||
}, | |||
FirstLevelChange(id){ | |||
this.FirstIndex = id; | |||
this.product_2 = this.product[id-1].children; | |||
}, | |||
selctRadio(name){ | |||
console.log(name); | |||
this.name = name; | |||
} | |||
}, | |||
searchName(){ | |||
console.log('1'); | |||
} | |||
} | |||
</script> | |||
<style> | |||
/* 搜索框 */ | |||
.content_container{ | |||
width: 100%; | |||
height: 10%; | |||
display: flex; | |||
flex-direction: row; | |||
justify-content: center; | |||
align-items: center | |||
} | |||
.content_footer{ | |||
width: 100%; | |||
height: 75%; | |||
display: flex; | |||
flex-direction: row; | |||
} | |||
/* 搜索框 */ | |||
/* 遮罩层 */ | |||
.isshow-header{ | |||
width: 90%; | |||
height: 100%; | |||
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 1rem 0 1rem; | |||
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: 1.5rem; | |||
width: 100%; | |||
line-height: 1,5rem; | |||
margin: 1rem 0 1rem 0; | |||
font-size: 1.5rem; | |||
} | |||
.isshow-content::-webkit-scrollbar { | |||
display: none; | |||
} | |||
/* 二级分类 */ | |||
.content_footer_left{ | |||
width: 20%; | |||
} | |||
.content_footer_left_product{ | |||
width: 100%; | |||
height: 10%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 1rem; | |||
color: #7f7f7f; | |||
} | |||
.content_footer_right{ | |||
width: 80%; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.content_footer_right_content{ | |||
width: 100%; | |||
height: 10%; | |||
display: flex; | |||
flex-direction: row; | |||
/* background-color: red; */ | |||
align-items: center; | |||
} | |||
.content_footer_right_content_text{ | |||
margin-right: auto; | |||
color:#242424; | |||
margin-left: 5%; | |||
font-size: 1rem; | |||
} | |||
.content_footer_right_content_radio{ | |||
margin-left: auto; | |||
margin-right: 5%; | |||
} | |||
/* 点击颜色 */ | |||
.click_color{ | |||
background-color: #044f7a; | |||
color: #f0fcf2; | |||
} | |||
.select_color{ | |||
color: #316b8b; | |||
} | |||
/* 按钮 */ | |||
.buttun{ | |||
width: 30%; | |||
height: 5%; | |||
position: absolute; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 1.3rem; | |||
border-radius: 1.5rem; | |||
background-color: #05507c; | |||
bottom:5%; | |||
right: 5%; | |||
color: #fafcff; | |||
z-index: 99999; | |||
} | |||
</style> |