修改
This commit is contained in:
曹辉
parent
4e77df2eaa
commit
a9a368dd3a
47
App.vue
47
App.vue
@ -9,54 +9,15 @@
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "uview-ui/index.scss";
|
||||
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #000000;
|
||||
padding: 30rpx 0 200rpx 0;
|
||||
|
||||
.cards {
|
||||
width: 94%;
|
||||
box-shadow: 0px 0px 30rpx 0px rgba(108, 99, 255, 0.16);
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
left: 3%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
padding: 40rpx 0 200rpx 0;
|
||||
border-radius: 25rpx;
|
||||
|
||||
.item {
|
||||
width: 43%;
|
||||
height: 300rpx;
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: 25rpx;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
width: 70%;
|
||||
text-align: center;
|
||||
font-size: 46rpx;
|
||||
color: #FCFCFC;
|
||||
position: absolute;
|
||||
top: 58%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
padding: 30rpx 0 150rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,37 +1,37 @@
|
||||
{
|
||||
"version" : "1",
|
||||
"prompt" : "template",
|
||||
"title" : "服务协议和隐私政策",
|
||||
"message" : "请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/> 你可阅读<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
|
||||
"buttonAccept" : "同意并接受",
|
||||
"buttonRefuse" : "暂不同意",
|
||||
"hrefLoader" : "system|default",
|
||||
"second" : {
|
||||
"title" : "确认提示",
|
||||
"message" : "进入应用前，你需先同意<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>，否则将退出应用。",
|
||||
"buttonAccept" : "同意并继续",
|
||||
"buttonRefuse" : "退出应用"
|
||||
},
|
||||
"disagreeMode" : {
|
||||
"support" : false,
|
||||
"loadNativePlugins" : false,
|
||||
"visitorEntry" : true,
|
||||
"showAlways" : true
|
||||
},
|
||||
"styles" : {
|
||||
"backgroundColor" : "#ffffff",
|
||||
"borderRadius" : "5px",
|
||||
"title" : {
|
||||
"color" : "#000000"
|
||||
},
|
||||
"buttonAccept" : {
|
||||
"color" : "#000000"
|
||||
},
|
||||
"buttonRefuse" : {
|
||||
"color" : "#000000"
|
||||
},
|
||||
"buttonVisitor" : {
|
||||
"color" : "#000000"
|
||||
}
|
||||
}
|
||||
"version": "1",
|
||||
"prompt": "template",
|
||||
"title": "用户协议与隐私政策",
|
||||
"message": "请你务必审慎阅读、充分理解“用户协议与隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/> 你可阅读<a href=\"https://app.xinelu.cn/privacypolicy/content.html\">《用户协议与隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
|
||||
"buttonAccept": "同意并接受",
|
||||
"buttonRefuse": "暂不同意",
|
||||
"hrefLoader": "system|default",
|
||||
"second": {
|
||||
"title": "确认提示",
|
||||
"message": "进入应用前，你需先同意<a href=\"https://app.xinelu.cn/privacypolicy/content.html\">《用户协议与隐私政策》</a>，否则将退出应用。",
|
||||
"buttonAccept": "同意并继续",
|
||||
"buttonRefuse": "退出应用"
|
||||
},
|
||||
"disagreeMode": {
|
||||
"support": false,
|
||||
"loadNativePlugins": false,
|
||||
"visitorEntry": false,
|
||||
"showAlways": false
|
||||
},
|
||||
"styles": {
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderRadius": "5px",
|
||||
"title": {
|
||||
"color": "#000000"
|
||||
},
|
||||
"buttonAccept": {
|
||||
"color": "#000000"
|
||||
},
|
||||
"buttonRefuse": {
|
||||
"color": "#000000"
|
||||
},
|
||||
"buttonVisitor": {
|
||||
"color": "#000000"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import request from "../request.js"
|
||||
|
||||
export function userPassWord(data) {
|
||||
export function updateNursePersonCheck(data) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/userPassWord`,
|
||||
url: `/nurseApplet/personCenter/updateNursePersonCheck`,
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function updateHeadAvatarHead(userId, File) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/updateHeadAvatarHead?userId=${userId}&File=${File}`,
|
||||
@ -20,3 +21,18 @@ export function nursePerson(phonenumber, password) {
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function nurseAppLoginSysUser(data) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/nurseAppLoginSysUser`,
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function personNurseStationLists(pageNum,pageSize) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/personNurseStationLists?pageNum=${pageNum}&pageSize=${pageSize}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
17
api/MyBenefits/MyBenefits.js
Normal file
17
api/MyBenefits/MyBenefits.js
Normal file
@ -0,0 +1,17 @@
|
||||
import request from "../request.js"
|
||||
|
||||
//个人中心 我的收益 金额
|
||||
export function personRevenue(nurseStationPersonId, monthTime, monthStartTime, monthEndTime) {
|
||||
return request({
|
||||
url: `/nurseApplet/personCenter/personRevenue?nurseStationPersonId=${nurseStationPersonId}&&monthTime=${monthTime}&&monthStartTime=${monthStartTime}&&monthEndTime=${monthEndTime}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 个人中心 我的收益 订单列表分页
|
||||
export function personRevenueDetails(pageNum, pageSize, nurseStationPersonId, monthTime, monthStartTime, monthEndTime) {
|
||||
return request({
|
||||
url: `/nurseApplet/personCenter/personRevenueDetails?pageNum=${pageNum}&&pageSize=${pageSize}&&nurseStationPersonId=${nurseStationPersonId}&&monthTime=${monthTime}&&monthStartTime=${monthStartTime}&&monthEndTime=${monthEndTime}`,
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
@ -1,9 +1,19 @@
|
||||
import request from "./request.js"
|
||||
import request from "../request.js"
|
||||
|
||||
|
||||
export function selectMission(nursePersonId, orderStatus, pageNum, pageSize,nurseItemName) {
|
||||
//工单list
|
||||
export function selectMission(nursePersonId, orderStatus, pageNum, pageSize, nurseItemName) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/selectMission?nursePersonId=${nursePersonId}&orderStatus=${orderStatus}&pageNum=${pageNum}&pageSize=${pageSize}&nurseItemName=${nurseItemName}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//接单
|
||||
export function receiveOrders(data) {
|
||||
return request({
|
||||
url: `/nurseApplet/personWorkOrder/receiveOrders`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
9
api/homepage/index.js
Normal file
9
api/homepage/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import request from "../request.js"
|
||||
|
||||
//
|
||||
export function selectOrderByNursePersonCount(nurseStationPersonId) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/selectOrderByNursePersonCount?nurseStationPersonId=${nurseStationPersonId}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
@ -1,7 +1,18 @@
|
||||
import request from "../request.js"
|
||||
export function nursePerson(phonenumber,password) {
|
||||
|
||||
//个人信息查询护理站人员的个人信息
|
||||
export function nurseAppletPersonCenter(nursePersonId) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/nursePerson?phonenumber=${phonenumber}&stationPersonPassword=${password}`,
|
||||
url: `/nurseApplet/personCenter/nurseAppletPersonCenter?nursePersonId=${nursePersonId}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 护理员App和小程序护理员修改状态
|
||||
export function updateNursePersonWorkStatus(data) {
|
||||
return request({
|
||||
url: `/nurseApplet/personCenter/updateNursePersonWorkStatus`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@ -16,29 +16,16 @@ var request = function(config) {
|
||||
success(res) {
|
||||
if (res.data.code == 9999) {
|
||||
uni.removeStorageSync('token');
|
||||
// uni.reLaunch({
|
||||
uni.removeStorageSync('nursePersonId');
|
||||
uni.removeStorageSync('phone');
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
} else if (res.data.code == 500) {
|
||||
// uni.removeStorageSync('nursePersonId');
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/login/login'
|
||||
// })
|
||||
uni.showModal({
|
||||
title: "登录提示",
|
||||
content: '登录失效,请重新登录',
|
||||
success(res1) {
|
||||
if (res1.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
} else if (res1.cancel) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepage/homepage'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail(err1) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepage/homepage'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
uni.hideLoading();
|
||||
resolve(res.data)
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import request from "./request.js"
|
||||
|
||||
import request from "../request.js"
|
||||
|
||||
export function appFileInfoByOneId() {
|
||||
return request({
|
||||
@ -1,11 +0,0 @@
|
||||
import request from "./request.js"
|
||||
|
||||
// 任务详情
|
||||
|
||||
export function taskDetails(orderDetailsId) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/taskDetails?&orderDetailsId=${orderDetailsId}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
9
api/taskDetails/taskDetails.js
Normal file
9
api/taskDetails/taskDetails.js
Normal file
@ -0,0 +1,9 @@
|
||||
import request from "../request.js"
|
||||
|
||||
// 任务详情
|
||||
export function taskDetails(orderDetailsId) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/taskDetails?orderNo=${orderDetailsId}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
import request from "../request.js"
|
||||
|
||||
|
||||
export function orderFallback(orderNo, taskReturnReason) {
|
||||
export function orderFallback(data) {
|
||||
return request({
|
||||
url: `/nurseApp/personLogin/orderFallback?orderNo=${orderNo}&taskReturnReason=${taskReturnReason}`,
|
||||
method: 'POST'
|
||||
url: `/nurseApp/personLogin/orderFallback`,
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{
|
||||
"name" : "泉医到家护理员APP",
|
||||
"name" : "泉医助手",
|
||||
"appid" : "__UNI__EE607B0",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.5",
|
||||
"versionCode" : 105,
|
||||
"versionName" : "1.0.6",
|
||||
"versionCode" : 106,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
@ -19,7 +19,8 @@
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Geolocation" : {},
|
||||
"Maps" : {}
|
||||
"Maps" : {},
|
||||
"Camera" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
|
||||
142
pages.json
142
pages.json
@ -4,85 +4,82 @@
|
||||
},
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/startup/startup",
|
||||
"style": {
|
||||
"navigationBarTitleText": "启动页",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录",
|
||||
"navigationBarBackgroundColor": "#ffffff", //背景颜色
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/confirmCompletion/confirmCompletion",
|
||||
}, {
|
||||
"path": "pages/startup/startup",
|
||||
"style": {
|
||||
"navigationBarTitleText": "完成确认",
|
||||
"navigationBarBackgroundColor": "#ffffff" //背景颜色
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/Healthknowledge/Healthknowledge",
|
||||
"style": {
|
||||
"navigationBarTitleText": "护理新闻",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/MyBenefits/MyBenefits",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的收益",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/Modifyinformation/Modifyinformation",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改信息",
|
||||
"enablePullDownRefresh": false
|
||||
// "navigationBarTextStyle": "white"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/personal/personal",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人信息",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarBackgroundColor": "#4C7BC9",
|
||||
"navigationBarTextStyle": "white"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/forgotPassword/forgotPassword",
|
||||
"path": "pages/Mymission/Mymission",
|
||||
"style": {
|
||||
"navigationBarTitleText": "忘记密码",
|
||||
"navigationBarBackgroundColor": "#ffffff" //背景颜色
|
||||
"navigationBarTitleText": "我的工单",
|
||||
"onReachBottomDistance": 20, //距离底部多远时触发 单位为px
|
||||
"enablePullDownRefresh": true //设置参数为true
|
||||
}
|
||||
}, {
|
||||
"path": "pages/register/register",
|
||||
"path": "pages/taskDetails/taskDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "注册账号",
|
||||
"navigationBarBackgroundColor": "#ffffff" //背景颜色
|
||||
"navigationBarTitleText": "工单信息",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/homepage/homepage",
|
||||
"style": {
|
||||
"navigationBarTitleText": "泉医到家",
|
||||
"navigationBarBackgroundColor": "#ffffff" //背景颜色
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"path": "pages/confirmCompletion/confirmCompletion",
|
||||
"style": {
|
||||
"navigationBarTitleText": "当前工单",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/taskReturn/taskReturn",
|
||||
"style": {
|
||||
"navigationBarTitleText": "任务退回",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarBackgroundColor": "#ffffff" //背景颜色
|
||||
"navigationBarTitleText": "退回原因",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/Mymission/Mymission",
|
||||
"path": "pages/forgotPassword/forgotPassword",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的任务",
|
||||
"navigationBarBackgroundColor": "#ffffff", //背景颜色
|
||||
"onReachBottomDistance": 20, //距离底部多远时触发 单位为px
|
||||
"enablePullDownRefresh": true //设置参数为true
|
||||
"navigationBarTitleText": "忘记密码"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/taskDetails/taskDetails",
|
||||
"path": "pages/register/register",
|
||||
"style": {
|
||||
"navigationBarTitleText": "任务详情",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarBackgroundColor": "#ffffff" //背景颜色
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
"path": "pages/Modifyinformation/Modifyinformation",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改信息",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarBackgroundColor": "#ffffff" //背景颜色
|
||||
// "navigationBarTextStyle": "white"
|
||||
"navigationBarTitleText": "注册"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/signature/signature",
|
||||
@ -90,14 +87,51 @@
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/RevenueDetails/RevenueDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收益信息",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/RevenueDetails/RevenueDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "收益信息",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
"path": "pages/study/study",
|
||||
"style": {
|
||||
"navigationBarTitleText": "泉医助手",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#4271B9",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
"uniIdRouter": {},
|
||||
"tabBar": {
|
||||
"color": "#7A7E83",
|
||||
"selectedColor": "#435950",
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [{
|
||||
"pagePath": "pages/homepage/homepage",
|
||||
"iconPath": "static/homepagew.png",
|
||||
"selectedIconPath": "static/homepagews.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/personal/personal",
|
||||
"iconPath": "static/userw.png",
|
||||
"selectedIconPath": "static/users.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
170
pages/Healthknowledge/Healthknowledge.vue
Normal file
170
pages/Healthknowledge/Healthknowledge.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<!-- <u-tabs :list="tabList" :current="tabcurrent" @change="change"></u-tabs>
|
||||
<view class="Healthknowledge" v-if="informationCategoryVOList">
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item,index) in informationCategoryVOList" :key="index"
|
||||
@tap='gohealthitem(item)'>
|
||||
<view class="text">
|
||||
{{item.informationTitle}}
|
||||
</view>
|
||||
<view class="author"></view>
|
||||
<image :src="item.leadThumbnailUrl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="Healthknowledge">
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<view class="text">
|
||||
护理 I 致力于打造专业护理人才
|
||||
</view>
|
||||
<view class="author"> 生活小窍门,是指人们在日常生活中总结出来的知识和经验,和生活小常识非常相似</view>
|
||||
<image src="../../static/hlxw.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="noorder" v-else>
|
||||
<u-empty mode="data" icon-size='220' text='暂无内容'></u-empty>
|
||||
</view> -->
|
||||
<u-back-top :scroll-top="scrollTop"></u-back-top>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseurl from '@/api/baseurl.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabcurrent: 0,
|
||||
tabList: [{
|
||||
name: '护理新闻'
|
||||
}],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
informationCategoryVOList: null,
|
||||
total: 0,
|
||||
scrollTop: 0,
|
||||
};
|
||||
},
|
||||
onShow() {},
|
||||
onLoad() {
|
||||
// this.pageNum = 1
|
||||
// this.getHeathHousing();
|
||||
},
|
||||
methods: {
|
||||
//跳转item
|
||||
gohealthitem(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Healthitem/Healthitem?item=${encodeURIComponent(JSON.stringify(item))}`
|
||||
})
|
||||
},
|
||||
getHeathHousing() {
|
||||
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
|
||||
if (res.rows.length > 0) {
|
||||
res.rows.forEach(e => {
|
||||
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
|
||||
})
|
||||
this.informationCategoryVOList = res.rows
|
||||
}
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
change() {},
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
onReachBottom() { //下滑加载
|
||||
if (this.informationCategoryVOList.length >= this.total) {} else {
|
||||
this.pageNum++
|
||||
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
|
||||
if (res.rows) {
|
||||
res.rows.forEach(e => {
|
||||
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
|
||||
this.informationCategoryVOList.push(e)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() { //下拉刷新
|
||||
this.pageNum = 1;
|
||||
this.getHeathHousing();
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
padding: 0;
|
||||
text-align: justify;
|
||||
|
||||
.noorder {
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.Healthknowledge {
|
||||
width: 94%;
|
||||
margin: 20rpx auto;
|
||||
padding: 0 30rpx 50rpx;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
line-height: 46rpx;
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
margin: 20rpx auto 0;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 250rpx;
|
||||
position: relative;
|
||||
border-bottom: 2rpx solid #CDC9C9;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.author {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
width: 65%;
|
||||
left: 0;
|
||||
font-size: 20rpx;
|
||||
color: #969494;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 0;
|
||||
width: 65%;
|
||||
font-size: 30rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5; //行数需设置
|
||||
line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +1,19 @@
|
||||
.app {
|
||||
background-color: #F4F5F7;
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
color: #000000;
|
||||
padding: 3%;
|
||||
font-size: 34rpx;
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
margin: 20rpx 20rpx 0;
|
||||
}
|
||||
padding: 2%;
|
||||
font-size: 30rpx;
|
||||
|
||||
.finish {
|
||||
width: 217rpx;
|
||||
width: 496rpx;
|
||||
background: #4271B9;
|
||||
border-radius: 5rpx;
|
||||
color: #FFFFFF;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
left: 70%;
|
||||
margin: 100rpx auto;
|
||||
background: #4C7BC9;
|
||||
border-radius: 26rpx;
|
||||
}
|
||||
|
||||
.centercontent {
|
||||
@ -29,8 +23,10 @@
|
||||
border-radius: 20rpx;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.content {
|
||||
line-height: 100rpx;
|
||||
|
||||
.name {
|
||||
margin-left: 20rpx;
|
||||
height: 100rpx;
|
||||
@ -42,55 +38,128 @@
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
text{
|
||||
width: 80%;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
input {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
line-height: 100rpx;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
font-size: 34rpx;
|
||||
|
||||
width: 75%;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.nursetype {
|
||||
padding-bottom: 20rpx;
|
||||
border: none;line-height: 50rpx;margin: 20rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.Commodity {
|
||||
line-height: 130rpx;
|
||||
margin-left: 20rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
position: relative;
|
||||
|
||||
.picture {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pictureA {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 18rpx;
|
||||
height: 27rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
line-height: 140rpx;
|
||||
margin-left: 5%;
|
||||
display: inline-block;
|
||||
line-height: 100rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
.rate {
|
||||
margin: 30rpx auto;
|
||||
width: 650rpx;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-radius: 5rpx;
|
||||
color: #E6E6E6;
|
||||
background: #FFFFFF;
|
||||
.itemimgs {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 0 10rpx 10rpx;
|
||||
position: relative;
|
||||
.delimg {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.itemimg {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
margin-bottom: 20rpx;
|
||||
width: 200rpx;
|
||||
margin: 0 0 0 2%;
|
||||
height: 212rpx;
|
||||
border: 1rpx dashed #E6E6E6;
|
||||
border-radius: 5rpx;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #969394;
|
||||
line-height: 70rpx;
|
||||
text-align:center;
|
||||
position: absolute;
|
||||
top: 58%;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 20%;
|
||||
transform: translateX(-50%);
|
||||
width: 89rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload {
|
||||
margin: 30rpx auto;
|
||||
width: 650rpx;
|
||||
height: 255rpx;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-radius: 5rpx;
|
||||
color: #E6E6E6;
|
||||
position: relative;
|
||||
view{
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Commodity {
|
||||
background-color: #F4F5F7;
|
||||
height: 330rpx;
|
||||
position: relative;
|
||||
|
||||
view {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 240rpx;
|
||||
font-size: 26rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.picture {
|
||||
border: 4px solid #6DD8FC;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,72 +1,136 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="centercontent">
|
||||
<view class="Commodity" @tap="uploadImag()">
|
||||
头像
|
||||
<image class="picture" :src="img" mode=""></image>
|
||||
<image class="pictureA" src="../../static/jiantou.png" mode=""></image>
|
||||
<view class="Commodity" @tap="uploadImag">
|
||||
<image class="picture" :src="myimg" mode="" v-if="myimg"></image>
|
||||
<image class="picture" :src="baseurl + appPersonallist.avatar" mode="" v-else></image>
|
||||
<view class="">
|
||||
点击编辑头像
|
||||
</view>
|
||||
</view>
|
||||
<view class="centercontent" v-if="appPersonallist">
|
||||
<view class="content">
|
||||
<view class="name">
|
||||
<span>姓名:</span>
|
||||
<input type="text" maxlength="10" placeholder="请输入" v-model="appPersonallist.nickName" />
|
||||
<span>姓名：</span>
|
||||
<input type="text" maxlength="10" placeholder="请输入" v-model="appPersonallist.nickName" disabled />
|
||||
</view>
|
||||
<view class="name">
|
||||
<span>性别：</span>
|
||||
<text v-if='appPersonallist.sex'> {{appPersonallist.sex}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="name">
|
||||
<span>年龄：</span>
|
||||
<input type="text" maxlength="4" placeholder=" " v-model="appPersonallist.age" disabled />
|
||||
</view>
|
||||
<!-- <view class="name">
|
||||
<span class="">
|
||||
账号：
|
||||
</span>
|
||||
<input type="text" disabled maxlength="10" placeholder="请填写" v-model="appPersonallist.userName" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="name">
|
||||
<span>电话：</span>
|
||||
<input disabled type="text" maxlength="11" placeholder="请输入"
|
||||
v-model="appPersonallist.phonenumber" />
|
||||
<span>手机号：</span>
|
||||
<input disabled type="text" maxlength="11" placeholder="请输入" v-model="appPersonallist.phonenumber"
|
||||
disabled />
|
||||
</view>
|
||||
<view class="nursetype" style="">
|
||||
<span>家庭住址：</span>
|
||||
<text v-if="appPersonallist.address"> {{appPersonallist.address}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="nursetype " style="">
|
||||
护理站：
|
||||
<text v-for='(uitem,index) in appPersonallist.nurseStationSysUserVOList'> {{uitem.nurseStationName}}
|
||||
<text v-if="index!=appPersonallist.nurseStationSysUserVOList.length-1">，</text>
|
||||
<text v-for='(uitem,uindex) in appPersonallist.nurseStationSysUserVOList' :key="uindex">
|
||||
{{uitem.nurseStationName}}
|
||||
<text v-if="uindex!=appPersonallist.nurseStationSysUserVOList.length-1">，</text>
|
||||
</text>
|
||||
<!-- {{getNurseStationName(appPersonallist)}} -->
|
||||
</view>
|
||||
<view class="nursetype" @tap='positionalTitleLevelshow=true'>
|
||||
<span>职称级别：</span>
|
||||
<text v-if="appPersonallist.positionalTitleLevelvalue">
|
||||
{{appPersonallist.positionalTitleLevelvalue}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="name" style="">
|
||||
擅长项目：
|
||||
<input type="text" placeholder=" " v-model="appPersonallist.geniusItem" />
|
||||
<!-- <input type="text" v-model="appPersonallist.geniusItem" /> -->
|
||||
<!-- <text v-if="appPersonallist.geniusItem"> {{}}
|
||||
</text> -->
|
||||
</view>
|
||||
<view class="nursetype " style="border: none;">
|
||||
证书上传：
|
||||
<view class="upload" @tap='uploadcertificate' v-if="certificateimg.length==0">
|
||||
<view class="">
|
||||
<u-icon name="plus" color='#E6E6E6' label='拍摄上传' label-color='#E6E6E6'></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rate" v-else>
|
||||
<view class="itemimgs" v-for="(item,index) in certificateimg" :key="index">
|
||||
<image class="delimg" src="../../static/gb2.png" mode="" @tap='delimg(item)'>
|
||||
</image>
|
||||
<image class="itemimg" :src="item" mode=""></image>
|
||||
</view>
|
||||
<view class="item" @tap='uploadcertificate'>
|
||||
<image src="../../static/paishe.png" mode=""></image>
|
||||
<view class="title">
|
||||
拍摄上传
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
注:只可修改姓名和头像
|
||||
</view>
|
||||
<view class="finish" @tap="gofinish()">完成
|
||||
</view>
|
||||
<u-select v-model="show" mode="single-column" :list="NurseStationList" @confirm="confirm"></u-select>
|
||||
<view class="finish" @tap="uploadcertificateimgs">提交</view>
|
||||
<!-- <u-select v-model="sexshow" :list="sexlist" mode="single-column" @confirm="sexconfirm"></u-select> -->
|
||||
<u-select v-model="positionalTitleLevelshow" :list="positionalTitleLevellist" mode="single-column"
|
||||
@confirm="positionalTitleLevelconfirm"></u-select>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
updateNursePersonCheck,
|
||||
personNurseStationLists
|
||||
} from '@/api/register/index.js'
|
||||
import {
|
||||
userPassWord,
|
||||
nursePerson
|
||||
} from '@/api/Modifyinformation/Modifyinformation.js';
|
||||
import {
|
||||
nurseAppletPersonCenter,
|
||||
} from '@/api/personnal/personal.js';
|
||||
import baseurl from '@/api/baseurl.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
baseurl: '', //url
|
||||
img: null,
|
||||
image: null,
|
||||
NurseStationList: [], //护理站list
|
||||
timer: null, //timer
|
||||
nursePersonId: null, //护理员id
|
||||
// sexshow: false, //性别选择
|
||||
// sexlist: [{
|
||||
// value: 'MALE',
|
||||
// label: '男'
|
||||
// },
|
||||
// {
|
||||
// value: 'FEMALE',
|
||||
// label: '女'
|
||||
// }
|
||||
// ],
|
||||
positionalTitleLevelshow: false,
|
||||
positionalTitleLevellist: [{
|
||||
label: "初级",
|
||||
value: "PRIMARY_LEVEL",
|
||||
}, {
|
||||
label: "中级",
|
||||
value: "MIDDLE_LEVEL",
|
||||
}, {
|
||||
label: "高级",
|
||||
value: "HIGH_LEVEL",
|
||||
}],
|
||||
appPersonallist: {
|
||||
userId: '',
|
||||
userName: '',
|
||||
nickName: '',
|
||||
phonenumber: '',
|
||||
avatar: '',
|
||||
File: '',
|
||||
},
|
||||
timer: null,
|
||||
nurseStationPersonCheckList: []
|
||||
}, //用户信息
|
||||
image: false, //判断是否上传头像
|
||||
certificateimg: [], //证书img
|
||||
myimg: null, //头像img
|
||||
uploadcertificateimg: [], //上传的证书img
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -74,119 +138,179 @@
|
||||
// return data => data?.nurseStationSysUserVOList?. [0]?.nurseStationName || ''
|
||||
// },
|
||||
},
|
||||
onShow() {
|
||||
this.info();
|
||||
this.baseurl = baseurl;
|
||||
},
|
||||
onShow() {},
|
||||
onLoad(options) {
|
||||
this.image = false
|
||||
this.baseurl = baseurl;
|
||||
let that = this
|
||||
try {
|
||||
const value = uni.getStorageSync('phonenumber');
|
||||
const value2 = uni.getStorageSync('password');
|
||||
if (value && value2) {
|
||||
that.phonenumber = value
|
||||
that.password = value2
|
||||
that.myInfo()
|
||||
}
|
||||
} catch (e) {}
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
that.nursePersonId = value
|
||||
that.myInfo()
|
||||
} else {}
|
||||
},
|
||||
methods: {
|
||||
//删除证书图片
|
||||
delimg(item) {
|
||||
this.certificateimg = this.certificateimg.filter(e => e != item)
|
||||
this.uploadcertificateimg = this.uploadcertificateimg.filter(e => e != item)
|
||||
this.appPersonallist.nurseStationPersonCertificateList = this.appPersonallist
|
||||
.nurseStationPersonCertificateList
|
||||
.filter(e => (this.baseurl + e.certificateUrl) != item)
|
||||
},
|
||||
//上传证书
|
||||
uploadcertificate() {
|
||||
var that = this;
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
success(res) {
|
||||
res.tempFilePaths.forEach(e => {
|
||||
that.uploadcertificateimg.push(e)
|
||||
that.certificateimg.push(e)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//上传头像
|
||||
uploadImag() {
|
||||
var that = this;
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album'],
|
||||
success(res) {
|
||||
that.appPersonallist.avatar = res.tempFilePaths[0]
|
||||
that.img = res.tempFilePaths[0]
|
||||
that.image = true
|
||||
that.myimg = res.tempFilePaths[0]
|
||||
that.appPersonallist.avatar = res.tempFilePaths[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
//个人信息
|
||||
myInfo() {
|
||||
nursePerson(this.phonenumber, this.password).then(res => {
|
||||
this.img = baseurl + res.data.avatar
|
||||
nurseAppletPersonCenter(this.nursePersonId).then(res => {
|
||||
res.data.sex == 'MALE' ? res.data.sex = '男' : ''
|
||||
res.data.sex == 'FEMALE' ? res.data.sex = '女' : ''
|
||||
res.data.positionalTitleLevel == 'PRIMARY_LEVEL' ? res.data.positionalTitleLevelvalue = '初级' :
|
||||
''
|
||||
res.data.positionalTitleLevel == 'MIDDLE_LEVEL' ? res.data.positionalTitleLevelvalue = '中级' :
|
||||
''
|
||||
res.data.positionalTitleLevel == 'HIGH_LEVEL' ? res.data.positionalTitleLevelvalue = '高级' : ''
|
||||
res.data.id = this.nursePersonId
|
||||
res.data.nurseStationPersonCertificateList.forEach(e => {
|
||||
if (e.certificateUrl) {
|
||||
this.certificateimg.push(baseurl + e.certificateUrl)
|
||||
}
|
||||
})
|
||||
res.data.nurseStationPersonCheckList = []
|
||||
this.appPersonallist = res.data
|
||||
})
|
||||
},
|
||||
//上传证书
|
||||
uploadcertificateimgs() {
|
||||
let that = this
|
||||
if (this.uploadcertificateimg && this.uploadcertificateimg.length > 0) {
|
||||
this.uploadcertificateimg.forEach(e => {
|
||||
uni.uploadFile({
|
||||
url: baseurl +
|
||||
'/nurseApplet/personCenter/uploadNurseStationPersonCertificateUrl',
|
||||
filePath: e, //file: 二进制(filePath)
|
||||
name: 'file',
|
||||
formData: { //多余值
|
||||
'nursePersonId': that.nursePersonId,
|
||||
},
|
||||
timeout: 10000,
|
||||
success(res) {
|
||||
var img = {
|
||||
certificateUrl: JSON.parse(res.data).imgUrl
|
||||
}
|
||||
that.appPersonallist.nurseStationPersonCheckList.push(img)
|
||||
if (that.appPersonallist.nurseStationPersonCheckList.length == that
|
||||
.uploadcertificateimg.length) {
|
||||
that.gofinish();
|
||||
that.appPersonallist.nurseStationPersonCheckList = []
|
||||
that.uploadcertificateimg = []
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
that.gofinish();
|
||||
}
|
||||
},
|
||||
//修改
|
||||
gofinish() {
|
||||
var that = this
|
||||
if (this.image) {
|
||||
uni.uploadFile({
|
||||
url: baseurl + '/nurseApp/personLogin/updateHeadAvatarHead',
|
||||
filePath: that.img, //file: 二进制(filePath)
|
||||
filePath: that.appPersonallist.avatar, //file: 二进制(filePath)
|
||||
name: 'file',
|
||||
formData: { //多余值
|
||||
'userId': that.appPersonallist.userId,
|
||||
},
|
||||
timeout: 5000,
|
||||
timeout: 10000,
|
||||
success(res) {
|
||||
that.appPersonallist.avatar = JSON.parse(res.data).imgUrl
|
||||
userPassWord(that.appPersonallist).then(res => {
|
||||
if (res.code == 200) {
|
||||
that.$refs.uToast.show({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: '1500',
|
||||
})
|
||||
if (that.timer) {
|
||||
clearTimeout(that.timer)
|
||||
}
|
||||
that.timer = setTimeout(e => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 1500)
|
||||
} else {
|
||||
that.$refs.uToast.show({
|
||||
title: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
that.updateNursePerson();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
userPassWord(that.appPersonallist).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
that.$refs.uToast.show({
|
||||
title: '修改成功',
|
||||
type: 'success',
|
||||
duration: '1500',
|
||||
})
|
||||
if (that.timer) {
|
||||
clearTimeout(that.timer)
|
||||
}
|
||||
that.timer = setTimeout(e => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 1500)
|
||||
} else {
|
||||
that.$refs.uToast.show({
|
||||
title: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
that.updateNursePerson();
|
||||
}
|
||||
},
|
||||
updateNursePerson() {
|
||||
this.appPersonallist.nurseStationPersonCertificateList.forEach(e => {
|
||||
var img = {
|
||||
certificateUrl: e.certificateUrl
|
||||
}
|
||||
this.appPersonallist.nurseStationPersonCheckList.push(img)
|
||||
})
|
||||
var that = this
|
||||
var obj = {
|
||||
avatar: that.appPersonallist.avatar,
|
||||
userId: that.appPersonallist.userId,
|
||||
id: that.nursePersonId,
|
||||
positionalTitleLevelCheck: that.appPersonallist.positionalTitleLevel,
|
||||
geniusItemCheck: that.appPersonallist.geniusItem,
|
||||
nurseStationPersonCheckList: that.appPersonallist.nurseStationPersonCheckList
|
||||
}
|
||||
updateNursePersonCheck(obj).then(res => {
|
||||
if (res.code == 200) {
|
||||
that.$refs.uToast.show({
|
||||
title: '为了保证资料真实，平台需要对你的资料进行审核，请耐心等待',
|
||||
type: 'success',
|
||||
duration: '10000',
|
||||
})
|
||||
if (that.timer) {
|
||||
clearTimeout(that.timer)
|
||||
}
|
||||
that.timer = setTimeout(e => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 10000)
|
||||
} else {
|
||||
that.$refs.uToast.show({
|
||||
title: res.msg,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm(e) {
|
||||
this.appPersonallist.nurseStationSysUserVOList[0].nurseStationId = e[0].value
|
||||
this.appPersonallist.nurseStationSysUserVOList[0].nurseStationName = e[0]['label']
|
||||
},
|
||||
//护理站
|
||||
info() {
|
||||
personNurseStationLists(this.pageNum, this.pageSize).then(res => {
|
||||
this.NurseStationList = res.rows.map((e) => {
|
||||
return {
|
||||
value: e.id,
|
||||
label: e.nurseStationName,
|
||||
}
|
||||
})
|
||||
})
|
||||
//开启选择性别
|
||||
sexshowtrue() {
|
||||
this.sexshow = true
|
||||
},
|
||||
//职称级别
|
||||
positionalTitleLevelconfirm(e) {
|
||||
this.appPersonallist.positionalTitleLevelvalue = e[0].label
|
||||
this.appPersonallist.positionalTitleLevel = e[0].value
|
||||
},
|
||||
//选择性别
|
||||
sexconfirm(e) {
|
||||
this.appPersonallist.sex = e[0].label
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
378
pages/MyBenefits/MyBenefits.vue
Normal file
378
pages/MyBenefits/MyBenefits.vue
Normal file
@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="topleft" @tap="taptime">
|
||||
{{newtime}}
|
||||
<u-icon name="arrow-down-fill" style='padding-left: 10rpx;'></u-icon>
|
||||
</view>
|
||||
<view class="benefits">
|
||||
<image src="../../static/shouyibeijing.png" mode=""></image>
|
||||
<view class="top">
|
||||
本月收益(元）
|
||||
</view>
|
||||
<view class="center" v-if="toppricerlist.monthOrderTotalPrice>=0">
|
||||
{{toppricerlist.monthOrderTotalPrice}}
|
||||
</view>
|
||||
<view class="center" v-else>
|
||||
0
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="bottomitem">
|
||||
<view class="text">
|
||||
今日收益(元)
|
||||
</view>
|
||||
<view class="price" v-if="toppricerlist.todayOrderPrice>=0">
|
||||
{{toppricerlist.todayOrderPrice}}
|
||||
</view>
|
||||
<view class="price" v-else>
|
||||
0
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottomitem">
|
||||
<view class="text">
|
||||
累计总收益(元)
|
||||
</view>
|
||||
<view class="price" v-if="toppricerlist.orderTotalPrice>=0">
|
||||
{{toppricerlist.orderTotalPrice}}
|
||||
</view>
|
||||
<view class="price" v-else>
|
||||
0
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list" v-if="Detailslist.length>0">
|
||||
<view class="item" v-for="(item,index) in Detailslist" :key="index" @tap='gotaskDetails(item)'>
|
||||
<view class="time">
|
||||
<!-- {{item.serviceDate}} {{item.serviceStartTime}} -->
|
||||
{{item.finishOrderTime}}
|
||||
</view>
|
||||
<view class="border"></view>
|
||||
<view class="title">
|
||||
{{item.nurseItemName}}
|
||||
</view>
|
||||
<view class="price" v-if="item.revenueAmount">
|
||||
+ {{item.revenueAmount}}
|
||||
</view>
|
||||
<view class="price" v-else>
|
||||
+ 0
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="" style="margin-top: 100rpx;">
|
||||
<u-empty text="暂无收益详细" mode="list" icon-size='240' font-size='32'></u-empty>
|
||||
</view>
|
||||
<u-popup v-model="tiemmask" mode='bottom' :closeable='true' :safe-area-inset-bottom='true'>
|
||||
<view class="timemask">
|
||||
<view class="tabs">
|
||||
<view class="tab" v-for="(item,index) in timetablist" @tap='timechange(index)'
|
||||
:style="timeindex == index?'border-bottom: 5rpx solid #4C7BC9;':''">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="upiker">
|
||||
<upicker mode="time" v-model="timeshow" :params="timeparams" v-if="timeindex==0" start-year='2023'
|
||||
:end-year='newyear' @confirm='timeconfirm'>
|
||||
</upicker>
|
||||
</view>
|
||||
<view class="ucalendar">
|
||||
<ucalendar mode="range" v-if="timeindex==1" @change="ucalendarchange">
|
||||
</ucalendar>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ucalendar from '../ucalendar/u-calendar.vue'
|
||||
import upicker from '../upicker/u-picker.vue'
|
||||
import {
|
||||
personRevenue,
|
||||
personRevenueDetails
|
||||
} from '@/api/MyBenefits/MyBenefits.js'
|
||||
export default {
|
||||
components: {
|
||||
ucalendar,
|
||||
upicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nursePersonId: null, //护理员id
|
||||
tiemmask: false, //遮罩层
|
||||
timeparams: { //时间picker
|
||||
year: true,
|
||||
month: true,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false
|
||||
},
|
||||
timeshow: false, //时间遮罩层
|
||||
timetablist: [{ //切换
|
||||
name: '月份选择'
|
||||
}, {
|
||||
name: '自定义'
|
||||
}, ],
|
||||
timeindex: 0, //切换绑定的index
|
||||
tiemshow: false, //选择时间开关
|
||||
newtime: null, //开局月份
|
||||
newyear: null, //当前年份
|
||||
monthTime: null, //只选一个
|
||||
monthStartTime: '', //开始时间
|
||||
monthEndTime: '', //结束时间
|
||||
toppricerlist: {}, //toplist
|
||||
Detailslist: [], //详细
|
||||
Detailstotal: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 15,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
var that = this
|
||||
this.Detailslist = []
|
||||
that.nowtime();
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
that.nursePersonId = value
|
||||
that.personRevenueinfo();
|
||||
that.personRevenueDetailsinfo();
|
||||
} else {}
|
||||
},
|
||||
methods: {
|
||||
//收益详细
|
||||
personRevenueDetailsinfo() {
|
||||
personRevenueDetails(this.pageNum, this.pageSize, this.nursePersonId, this.monthTime, this.monthStartTime,
|
||||
this.monthEndTime).then(
|
||||
res => {
|
||||
res.rows.forEach(e => {
|
||||
this.Detailslist.push(e)
|
||||
})
|
||||
this.Detailstotal = res.total
|
||||
})
|
||||
},
|
||||
//我的收益
|
||||
personRevenueinfo() {
|
||||
personRevenue(this.nursePersonId, this.monthTime, this.monthStartTime, this.monthEndTime).then(res => {
|
||||
this.toppricerlist = res.data
|
||||
})
|
||||
},
|
||||
//piker选择时间
|
||||
timeconfirm(e) {
|
||||
this.Detailslist = []
|
||||
this.newtime = e.year + '.' + e.month
|
||||
this.monthTime = e.year + '-' + e.month + '-01'
|
||||
this.personRevenueinfo();
|
||||
this.personRevenueDetailsinfo();
|
||||
this.tiemmask = false
|
||||
},
|
||||
//日历选择时间
|
||||
ucalendarchange(e) {
|
||||
this.Detailslist = []
|
||||
e.startMonth > 10 ? '' : e.startMonth = '0' + e.startMonth
|
||||
e.startDay > 10 ? '' : e.startDay = '0' + e.startDay
|
||||
e.endMonth > 10 ? '' : e.endMonth = '0' + e.endMonth
|
||||
e.endDay > 10 ? '' : e.endDay = '0' + e.endDay
|
||||
this.newtime = e.startYear + '.' +
|
||||
e.startMonth + '.' + e.startDay + ' - ' + e.endYear + '.' + e.endMonth + '.' + e.endDay
|
||||
this.monthStartTime = e.startYear + '-' + e.startMonth + '-' + e.startDay
|
||||
this.monthEndTime = e.endYear + '-' + e.endMonth + '-' + e.endDay
|
||||
this.monthTime = ''
|
||||
this.personRevenueinfo();
|
||||
this.personRevenueDetailsinfo();
|
||||
this.tiemmask = false
|
||||
},
|
||||
//time
|
||||
timechange(index) {
|
||||
this.timeindex = index;
|
||||
},
|
||||
//点击时间
|
||||
taptime() {
|
||||
this.tiemmask = true;
|
||||
},
|
||||
//当前月份
|
||||
nowtime() {
|
||||
let nowDate = new Date();
|
||||
let date = {
|
||||
// 获取当前年份
|
||||
year: nowDate.getFullYear(),
|
||||
//获取当前月份
|
||||
month: nowDate.getMonth() + 1,
|
||||
//获取当前日期
|
||||
};
|
||||
this.newyear = date.year
|
||||
//拼接
|
||||
if (date.month < 10) {
|
||||
this.newtime = date.year + ".0" + date.month
|
||||
this.monthTime = date.year + '-0' + date.month + '-01'
|
||||
} else {
|
||||
this.newtime = date.year + "." + date.month
|
||||
this.monthTime = date.year + '-' + date.month + '-01'
|
||||
}
|
||||
},
|
||||
//去详情
|
||||
gotaskDetails(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/RevenueDetails/RevenueDetails?orderNo=${item.orderNo}`
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom() { //下滑加载
|
||||
if (this.Detailslist.length >= this.Detailstotal) {} else {
|
||||
this.pageNum++
|
||||
this.personRevenueDetailsinfo();
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() { //下拉刷新
|
||||
this.pageNum = 1;
|
||||
this.personRevenueinfo();
|
||||
this.personRevenueDetailsinfo();
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
padding: 0 0 60rpx 0;
|
||||
|
||||
.timemask {
|
||||
height: 1100rpx;
|
||||
position: relative;
|
||||
|
||||
.ucalendar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upiker {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 70%;
|
||||
|
||||
.tab {
|
||||
width: 150rpx;
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
margin-left: 60rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
|
||||
.item {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 210rpx;
|
||||
margin-top: 20rpx;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5rpx;
|
||||
position: relative;
|
||||
|
||||
.border {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
height: 1rpx;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; // 超出多少行
|
||||
-webkit-box-orient: vertical;
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 120rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 120rpx;
|
||||
font-size: 34rpx;
|
||||
color: #EA706A;
|
||||
}
|
||||
|
||||
.time {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: #848383;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.benefits {
|
||||
width: 94%;
|
||||
height: 380rpx;
|
||||
margin: 20rpx auto 0;
|
||||
position: relative;
|
||||
color: #FFFFFF;
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
|
||||
.bottomitem {
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 17rpx;
|
||||
font-size: 37rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: 87rpx;
|
||||
left: 26rpx;
|
||||
font-size: 66rpx;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: absolute;
|
||||
top: 47rpx;
|
||||
left: 26rpx;
|
||||
font-size: 24rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.topleft {
|
||||
margin: 30rpx 0 0 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,182 +1,209 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="inputs">
|
||||
<i class="icon"></i>
|
||||
<input type="text" name="" v-model='nurseItemName' id="" class="input" placeholder="请输入搜索内容">
|
||||
<view class="cards">
|
||||
<view class="card" @tap="tapmymission('')" :style="orderStatus=='' ? 'background: #4271B9;color:#fff':''">
|
||||
<image src="../../static/qbgd.png" mode="" v-if="orderStatus!=''"></image>
|
||||
<image src="../../static/qbgd2.png" mode="" v-else></image>
|
||||
<view class="text">
|
||||
全部工单
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" @tap="tapmymission('NOT_FINISH')"
|
||||
:style="orderStatus=='NOT_FINISH' ? 'background: #F5A623;color:#fff':''">
|
||||
<image src="../../static/dqgd.png" mode="" v-if="orderStatus!='NOT_FINISH'"></image>
|
||||
<image src="../../static/dqgd2.png" mode="" v-else></image>
|
||||
<view class="text">
|
||||
当前工单
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" @tap="tapmymission('COMPLETE')"
|
||||
:style="orderStatus=='COMPLETE' ? 'background: #02D081;color:#fff':''">
|
||||
<image src="../../static/ywcgd.png" mode="" v-if="orderStatus!='COMPLETE'"></image>
|
||||
<image src="../../static/ywcgd2.png" mode="" v-else></image>
|
||||
<view class="text">
|
||||
已完成工单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab">
|
||||
<view class="tab-item" @tap="testTabClick(index)" v-for="(item,index) in tabList"
|
||||
:class="tabIndex == index?'active':''">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="" v-if="list.length>0">
|
||||
<view class="Apayment" v-if='choicetab==0' v-for="(item,index) in list" :key="item.id">
|
||||
<view class="names">{{item.serviceDate}} {{item.serviceStartTime}}-{{item.serviceEndTime}}
|
||||
<span>待完成</span>
|
||||
<view class="items" v-if="missionlist.length>0">
|
||||
<view class="item" v-for="(item,index) in missionlist" @click.stop='gotaskDetails(item)'>
|
||||
<view class="title">
|
||||
<view class="text">
|
||||
{{item.nurseItemName}}
|
||||
</view>
|
||||
<image @tap='gotask(item)' :src="baseurl+item.itemPictureUrl" mode=""></image>
|
||||
<view class="detailsinfo" @tap='gotask(item)'>
|
||||
<view class="change">
|
||||
{{item.nurseItemName}}
|
||||
</view>
|
||||
<view class="time">
|
||||
服务时长：{{item.itemServeDurationUnit}}
|
||||
</view>
|
||||
<view class="price">
|
||||
￥{{item.totalPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="anniu">
|
||||
<view class="logistics" @tap='gotask(item)'>详情</view>
|
||||
<view class="logistics harvest" @tap='goconfirmCompletion(item)'>去完成</view>
|
||||
<view class="image">
|
||||
<image src="../../static/jinbi.png" mode=""></image>
|
||||
<span v-if="item.orderCommissionAmount&&item.orderCommissionAmount>=0">
|
||||
+ {{item.orderCommissionAmount}}
|
||||
</span>
|
||||
<span v-else>
|
||||
+ 0
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Apayment" @tap='gotask(item)' v-if='choicetab==1' v-for="(item,uindex) in list"
|
||||
:key="uindex">
|
||||
<view class="names">{{item.serviceDate}} {{item.serviceStartTime}}-{{item.serviceEndTime}}
|
||||
<span>已完成</span>
|
||||
</view>
|
||||
<image :src="baseurl+item.itemPictureUrl" mode=""></image>
|
||||
<view class="detailsinfo">
|
||||
<view class="change">
|
||||
{{item.nurseItemName}}
|
||||
</view>
|
||||
<view class="time">
|
||||
服务时长：{{item.itemServeDurationUnit}}
|
||||
</view>
|
||||
<view class="price">
|
||||
￥{{item.totalPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="anniu">
|
||||
<view class="evaluate">查看评价</view>
|
||||
</view> -->
|
||||
<image class="itemimg" v-if="item.orderStatus=='NOT_FINISH'||item.orderStatus=='WAIT_RECEIVE'"
|
||||
src="../../static/dcl.png" mode=""></image>
|
||||
<image class="itemimg" v-else src="../../static/ywc.png" mode=""></image>
|
||||
<view class="time">
|
||||
{{item.serviceDate}}
|
||||
<span style='padding-left: 10rpx;'>{{item.serviceStartTime}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<!-- //暂无未完成订单 -->
|
||||
<view class="noorder" v-if="list.length==0&&choicetab==0">
|
||||
<image src="../../static/noorder.png" mode=""></image>
|
||||
<view class="">
|
||||
暂无待完成服务
|
||||
<view class="address" @click.stop='goMap(item)'>
|
||||
<view class="text">
|
||||
{{item.serviceAddress}}
|
||||
</view>
|
||||
<view class="daohang">
|
||||
<image src="../../static/daohang.png" mode=""></image>
|
||||
<span class='p'>导航</span>
|
||||
</view>
|
||||
</view>
|
||||
<!-- //暂无完成订单 -->
|
||||
<view class="noorder" v-if="list.length==0&&choicetab==1">
|
||||
<image src="../../static/noorder.png" mode=""></image>
|
||||
<view class="">
|
||||
暂无已完成服务
|
||||
<view class="btns" v-if="item.orderStatus=='NOT_FINISH'||item.orderStatus=='WAIT_RECEIVE'">
|
||||
<view class="btnreturn" @click.stop='gotaskReturn(item)'>
|
||||
退回
|
||||
</view>
|
||||
<view class="btnaccept" @click.stop='Receivingorders(item)' v-if="item.orderStatus=='WAIT_RECEIVE'">
|
||||
接单
|
||||
</view>
|
||||
<view class="btnaccept" @click.stop='goconfirmCompletion(item)'
|
||||
v-if="item.orderStatus=='NOT_FINISH'">
|
||||
去完成
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="" style="margin-top: 100rpx;">
|
||||
<u-empty text="暂无工单" mode="list" icon-size='240' font-size='32'></u-empty>
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseurl from '../../api/baseurl'
|
||||
import {
|
||||
selectMission
|
||||
} from '@/api/Mymission.js'
|
||||
import baseurl from '@/api/baseurl.js'
|
||||
selectMission,
|
||||
receiveOrders
|
||||
} from '@/api/Mymission/Mymission.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseurl: '',
|
||||
choicetab: 0, //切换
|
||||
tabIndex: 0, //切换
|
||||
tabList: [{
|
||||
name: "待完成"
|
||||
}, {
|
||||
name: "已完成"
|
||||
}, ],
|
||||
nursePersonId: '', //护理员id
|
||||
orderStatus: 'NOT_FINISH', // orderStatus:订单状态 未完成：NOT_FINISH，服务完成：COMPLETE
|
||||
baseurl: null,
|
||||
nursePersonId: null, //护理员id
|
||||
orderStatus: '', //COMPLETE 已完成 NOT_FINISH 未完成
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
//未完成任务
|
||||
list: [],
|
||||
nurseItemName: '', //项目名称
|
||||
missionlist: [], //项目list
|
||||
total: 0,
|
||||
nurseItemName: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
nurseItemName() {
|
||||
this.selectMissioninfo()
|
||||
tude: { //经纬度
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//点击toptabr
|
||||
tapmymission(item) {
|
||||
this.orderStatus = item
|
||||
this.selectMissioninfo();
|
||||
},
|
||||
//工单list请求
|
||||
selectMissioninfo() {
|
||||
this.pageNum = 1
|
||||
selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize, this.nurseItemName).then(
|
||||
res => {
|
||||
this.missionlist = res.rows
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
//跳转导航
|
||||
getlocations() {
|
||||
let that = this
|
||||
uni.openLocation({
|
||||
latitude: Number(that.tude.latitude),
|
||||
longitude: Number(that.tude.longitude),
|
||||
})
|
||||
},
|
||||
//获取经纬度
|
||||
goMap(item) {
|
||||
let that = this
|
||||
uni.request({
|
||||
url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=',
|
||||
method: 'GET',
|
||||
data: {
|
||||
key: 'TXGBZ-VGEWW-LJHRR-3CDLI-N57YO-YQBHJ', //地图key
|
||||
address: item.serviceAddress // 详细地址
|
||||
},
|
||||
success: function(res) {
|
||||
that.tude.latitude = res.data.result.location.lat
|
||||
that.tude.longitude = res.data.result.location.lng
|
||||
that.getlocations();
|
||||
},
|
||||
fail(err) {}
|
||||
})
|
||||
},
|
||||
//任务退回
|
||||
gotaskReturn(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/taskReturn/taskReturn?item=${JSON.stringify(item)}`
|
||||
})
|
||||
},
|
||||
//接单
|
||||
Receivingorders(item) {
|
||||
var obj = {
|
||||
"appointmentOrderId": item.id,
|
||||
"stationPersonId": this.nursePersonId,
|
||||
"appointmentOrderNo": item.orderNo
|
||||
}
|
||||
receiveOrders(obj).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$refs.uToast.show({
|
||||
title: '接单成功',
|
||||
type: 'success',
|
||||
duration: '1500'
|
||||
})
|
||||
this.selectMissioninfo();
|
||||
}
|
||||
})
|
||||
},
|
||||
//去完成
|
||||
goconfirmCompletion(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/confirmCompletion/confirmCompletion?orderDetailsId=${item.id}&orderNo=${item.orderNo}`
|
||||
url: `/pages/confirmCompletion/confirmCompletion?list=${JSON.stringify(item)}&&orderDetailsId=${item.id}`
|
||||
})
|
||||
},
|
||||
//任务list
|
||||
selectMissioninfo() {
|
||||
selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize, this.nurseItemName).then(
|
||||
res => {
|
||||
this.list = res.rows
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
//跳转详情页
|
||||
gotask(item) {
|
||||
//详情
|
||||
gotaskDetails(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/taskDetails/taskDetails?orderDetailsId=${item.id}`
|
||||
url: `/pages/taskDetails/taskDetails?orderNo=${item.orderNo}`
|
||||
})
|
||||
},
|
||||
//任务切换
|
||||
testTabClick(index) {
|
||||
this.list = []
|
||||
this.tabIndex = index
|
||||
this.choicetab = index
|
||||
this.pageNum == 1
|
||||
if (this.choicetab == 0) {
|
||||
this.orderStatus = 'NOT_FINISH'
|
||||
} else {
|
||||
this.orderStatus = 'COMPLETE'
|
||||
}
|
||||
selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize, this.nurseItemName).then(
|
||||
res => {
|
||||
this.list = res.rows
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// goorderdetails() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/orderDetails/orderDetails'
|
||||
// })
|
||||
// },
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderStatus = options.orderStatus
|
||||
},
|
||||
onShow() { //加载的时候执行（没有次数限制）
|
||||
this.baseurl = baseurl
|
||||
var that = this
|
||||
try {
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
that.nursePersonId = value
|
||||
this.selectMissioninfo();
|
||||
}
|
||||
} catch (e) {}
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
that.nursePersonId = value
|
||||
that.selectMissioninfo();
|
||||
} else {}
|
||||
},
|
||||
onReachBottom() { //下滑加载
|
||||
if (this.list.length >= this.total) {} else {
|
||||
if (this.missionlist.length >= this.total) {} else {
|
||||
this.pageNum++
|
||||
selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize, this.nurseItemName).then(
|
||||
res => {
|
||||
res.rows.forEach(e => {
|
||||
this.list.push(e)
|
||||
this.missionlist.push(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() { //下拉刷新
|
||||
this.pageNum = 1;
|
||||
selectMission(this.nursePersonId, this.orderStatus, this.PageNum, this.PageSize, this.nurseItemName).then(
|
||||
res => {
|
||||
this.list = res.rows
|
||||
this.total = res.total
|
||||
})
|
||||
this.selectMissioninfo();
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
@ -186,170 +213,166 @@
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
background-color: #F4F5F7;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 1rpx 3%;
|
||||
padding: 0;
|
||||
|
||||
.noorder {
|
||||
margin-top: 20%;
|
||||
.items {
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
|
||||
image {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 200rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
.item {
|
||||
margin: 15rpx auto;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5rpx;
|
||||
padding: 3%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
padding-bottom: 60rpx;
|
||||
|
||||
view {
|
||||
margin-top: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
color: #BFBFBF;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 30rpx;
|
||||
|
||||
.tab .active {
|
||||
background: #4C7BC9;
|
||||
}
|
||||
.btnaccept,
|
||||
.btnreturn {
|
||||
width: 170rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
line-height: 55rpx;
|
||||
border-radius: 5rpx;
|
||||
border: 1px solid #4271B9;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// 切换
|
||||
.tab-item {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
color: #ffffff;
|
||||
background: #BAB7B8;
|
||||
display: inline-block;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.btnaccept {
|
||||
right: 24rpx;
|
||||
color: #fff;
|
||||
background-color: #4271B9;
|
||||
}
|
||||
|
||||
.Apayment {
|
||||
width: 100%;
|
||||
height: 391rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx;
|
||||
line-height: 70rpx;
|
||||
padding: 1%;
|
||||
font-size: 30rpx;
|
||||
color: #969394;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
display: block;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 30rpx 0 0 20rpx;
|
||||
}
|
||||
|
||||
.anniu {
|
||||
// width: 375rpx;
|
||||
float: right;
|
||||
margin: 30rpx 20rpx 0 0;
|
||||
|
||||
.evaluate {
|
||||
background: #4C7BC9;
|
||||
width: 216rpx;
|
||||
height: 68rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
border-radius: 26rpx;
|
||||
.btnreturn {
|
||||
right: 220rpx;
|
||||
color: #4271B9;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.logistics {
|
||||
width: 175rpx;
|
||||
height: 68rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background: #E1AE3C;
|
||||
border-radius: 26rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
.address {
|
||||
position: relative;
|
||||
|
||||
.harvest {
|
||||
background: #4C7BC9;
|
||||
margin: 0 0 0 15rpx;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.detailsinfo {
|
||||
width: 60%;
|
||||
height: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 35%;
|
||||
.daohang {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10rpx;
|
||||
display: inline-block;
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.change {
|
||||
width: 100%;
|
||||
color: #000000;
|
||||
font-size: 34rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.p {
|
||||
padding-left: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #EA706A;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0rpx;
|
||||
transform: translateY(-40%);
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #D43953;
|
||||
.itemimg {
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
right: 15rpx;
|
||||
top: 18rpx;
|
||||
width: 140rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.names {
|
||||
width: 95%;
|
||||
margin-left: 20rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
.title {
|
||||
line-height: 100rpx;
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
height: 100rpx;
|
||||
|
||||
span {
|
||||
color: #4C7BC9;
|
||||
float: right;
|
||||
.text {
|
||||
height: 100%;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; // 超出多少行
|
||||
-webkit-box-orient: vertical;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
left: 51%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
font-size: 30rpx;
|
||||
color: #EA706A;
|
||||
width: 200rpx;
|
||||
|
||||
image {
|
||||
// vertical-align: middle;
|
||||
transform: translateY(20%);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inputs {
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border: 1rpx solid #f0f0f0;
|
||||
width: 99%;
|
||||
height: 65rpx;
|
||||
margin: 20rpx auto;
|
||||
border-radius: 20rpx;
|
||||
background-color: #Ffffff;
|
||||
position: relative;
|
||||
.cards {
|
||||
width: 96%;
|
||||
margin: 10rpx auto;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
|
||||
.input {
|
||||
position: absolute;
|
||||
height: 65rpx;
|
||||
left: 10%;
|
||||
line-height: 65rpx;
|
||||
font-size: 26rpx;
|
||||
color: #BEBEC0;
|
||||
}
|
||||
.card {
|
||||
width: 33.3%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 150rpx;
|
||||
border-radius: 5rpx;
|
||||
|
||||
.icon {
|
||||
background: url(@/static/sousuo.png) no-repeat;
|
||||
width: 30rpx;
|
||||
height: 28rpx;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 5%;
|
||||
.text {
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
position: absolute;
|
||||
top: 90rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
345
pages/RevenueDetails/RevenueDetails.vue
Normal file
345
pages/RevenueDetails/RevenueDetails.vue
Normal file
@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<image src="../../static/fuwu.png" mode=""></image>
|
||||
<view class="text" v-if="itemlist.nurseItemName">
|
||||
{{itemlist.nurseItemName}}
|
||||
</view>
|
||||
<view class="righttext">
|
||||
<span v-if="itemlist.orderCommissionAmount&&itemlist.orderCommissionAmount>=0">
|
||||
￥{{itemlist.orderCommissionAmount}}
|
||||
</span>
|
||||
<span v-else>
|
||||
￥ 0
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="time" style="line-height: 60rpx;padding-top: 15rpx;">
|
||||
单号：
|
||||
<span v-if="itemlist.orderNo">{{itemlist.orderNo}}</span>
|
||||
</view>
|
||||
<view class="time">
|
||||
时间：
|
||||
<span v-if="itemlist.serviceDate">{{itemlist.serviceDate}}</span>
|
||||
<span style='padding-left: 10rpx;'
|
||||
v-if="itemlist.serviceStartTime">{{itemlist.serviceStartTime}}</span>
|
||||
</view>
|
||||
<view class="address">
|
||||
地点：
|
||||
<span v-if="itemlist.serviceAddress">{{itemlist.serviceAddress}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<image src="../../static/user.png" mode=""></image>
|
||||
<view class="text">
|
||||
用户信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="content" style="margin-top: 20rpx;">
|
||||
<view class="item">
|
||||
姓名：
|
||||
<span v-if="itemlist.patientName">{{itemlist.patientName}}</span>
|
||||
</view>
|
||||
<view class="item">
|
||||
年龄：
|
||||
<span v-if="itemlist.age>=0">{{itemlist.age}}</span>
|
||||
</view>
|
||||
<view class="item">
|
||||
电话：
|
||||
<span v-if="itemlist.phone">{{itemlist.phone}}</span>
|
||||
</view>
|
||||
<view class="item address" @tap='goMap'>
|
||||
<view class="text" style="line-height: 60rpx;">
|
||||
住址：
|
||||
<span v-if="itemlist.serviceAddress">{{itemlist.serviceAddress}}</span>
|
||||
</view>
|
||||
<view class="daohang">
|
||||
<image src="../../static/daohang.png" mode=""></image>
|
||||
<span class='p'>导航</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
是否失能：{{itemlist.disablingCondition=="NOT_DISABLED"?'未失能':''}}
|
||||
{{itemlist.disablingCondition=="DISABLED"?'已失能':''}}
|
||||
</view>
|
||||
<view class="item" v-if="itemlist.disablingCondition=='DISABLED'">
|
||||
失能情况：
|
||||
<span v-if="itemlist.disablingReason">{{itemlist.disablingReason}}</span>
|
||||
</view>
|
||||
<view class="item">
|
||||
身体健康状况：
|
||||
<span v-if="itemlist.diseaseName">{{itemlist.diseaseName}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pictures top">
|
||||
<view class="title">
|
||||
<image src="../../static/ziliao.png" mode=""></image>
|
||||
<view class="text">
|
||||
相关资料
|
||||
</view>
|
||||
</view>
|
||||
<view class="picture">
|
||||
<view class="attendantImg">
|
||||
护理员到岗照片
|
||||
</view>
|
||||
<view class="uppicture">
|
||||
<image :src="baseurl + itemlist.onDutyPictureUrl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="picture">
|
||||
<view class="attendantImg">
|
||||
服务结束照片
|
||||
</view>
|
||||
<view class="uppicture">
|
||||
<image :src="baseurl + itemlist.serviceEndPictureUrl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="picture" style="height: 730rpx;">
|
||||
<view class="attendantImg" style="border-bottom: 1rpx solid #BAB7B8;">
|
||||
用户签名
|
||||
</view>
|
||||
<view class="uppicture">
|
||||
<image :src="baseurl + itemlist.userSignaturePictureUrl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
taskDetails
|
||||
} from '@/api/taskDetails/taskDetails.js'
|
||||
import baseurl from '@/api/baseurl.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itemlist: null, //信息list
|
||||
baseurl: null,
|
||||
tude: { //经纬度
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//获取经纬度
|
||||
goMap() {
|
||||
let that = this
|
||||
uni.request({
|
||||
url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=',
|
||||
method: 'GET',
|
||||
data: {
|
||||
key: 'TXGBZ-VGEWW-LJHRR-3CDLI-N57YO-YQBHJ', //高德地图key
|
||||
address: this.itemlist.serviceAddress // 详细地址
|
||||
},
|
||||
success: function(res) {
|
||||
that.tude.latitude = res.data.result.location.lat
|
||||
that.tude.longitude = res.data.result.location.lng
|
||||
that.getlocations();
|
||||
},
|
||||
fail(err) {}
|
||||
})
|
||||
},
|
||||
//跳转导航
|
||||
getlocations() {
|
||||
let that = this
|
||||
uni.openLocation({
|
||||
latitude: Number(that.tude.latitude),
|
||||
longitude: Number(that.tude.longitude),
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.baseurl = baseurl
|
||||
taskDetails(options.orderNo).then(res => {
|
||||
this.itemlist = res.data
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
font-size: 36rpx;
|
||||
padding: 0 0 100rpx;
|
||||
|
||||
.top {
|
||||
padding-bottom: 40rpx;
|
||||
background-color: #fff;
|
||||
width: 96%;
|
||||
margin: 15rpx auto 0;
|
||||
color: #333333;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5rpx;
|
||||
|
||||
.title {
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
display: flex;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.righttext {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 34rpx;
|
||||
color: #EA706A;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 34rpx;
|
||||
line-height: 100rpx;
|
||||
padding-left: 18rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
margin: 50rpx 0 0 35rpx;
|
||||
transform: translateY(-50%);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 50rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
.item {
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
position: relative;
|
||||
line-height: 45rpx;
|
||||
|
||||
.text {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.daohang {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10rpx;
|
||||
display: inline-block;
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.p {
|
||||
padding-left: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #EA706A;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0rpx;
|
||||
transform: translateY(-40%);
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pictures {
|
||||
width: 96%;
|
||||
margin: 15rpx auto;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5rpx;
|
||||
|
||||
.picture {
|
||||
width: 100%;
|
||||
height: 630rpx;
|
||||
|
||||
.attendantImg {
|
||||
color: #000000;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
margin-left: 30rpx;
|
||||
|
||||
span {
|
||||
color: #BAB7B8;
|
||||
}
|
||||
}
|
||||
|
||||
.uppicture {
|
||||
border: 1rpx dashed #818181;
|
||||
width: 90%;
|
||||
height: 500rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.choice {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
::v-deep .u-list-item[data-v-49deb6f2] {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 35rpx;
|
||||
color: #969394;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
color: #969394;
|
||||
margin-left: 30rpx;
|
||||
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.receive {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
color: #969394;
|
||||
margin-left: 30rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 496rpx;
|
||||
height: 58rpx;
|
||||
background: #4271B9;
|
||||
border-radius: 5rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 58rpx;
|
||||
background: #4C7BC9;
|
||||
margin: 90rpx auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,65 +1,111 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="picture">
|
||||
<view class="attendantImg">
|
||||
护理员到岗照片
|
||||
</view>
|
||||
<view class="uppicture" @tap='uploadonDutyPictureUrl'>
|
||||
<view class="choice" v-if="!onDutyPictureUrl">
|
||||
拍摄照片
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<image src="../../static/fuwu.png" mode=""></image>
|
||||
<view class="text">
|
||||
{{itemlist.nurseItemName}}
|
||||
</view>
|
||||
<image v-else :src="onDutyPictureUrl" mode=""></image>
|
||||
<!-- <u-upload class="slot-btn" width="530" height="130" ></u-upload> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="picture" style="height: 330rpx;">
|
||||
<view class="attendantImg">
|
||||
服务进行中视频（不少于1min）<span>*选填</span>
|
||||
</view>
|
||||
<view class="uppicture">
|
||||
<u-upload class="slot-btn" width="530" height="130"></u-upload>
|
||||
</view>
|
||||
<view class="user">
|
||||
<image src="../../static/radio.png" mode=""></image>
|
||||
用户不同意拍摄
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="picture">
|
||||
<view class="attendantImg">
|
||||
服务结束照片
|
||||
</view>
|
||||
<view class="uppicture" @tap='uploadserviceEndPictureUrl'>
|
||||
<view class="choice" v-if="!serviceEndPictureUrl">
|
||||
拍摄照片
|
||||
<view class="righttext">
|
||||
<span v-if="itemlist.orderCommissionAmount&&itemlist.orderCommissionAmount>=0">
|
||||
￥{{itemlist.orderCommissionAmount}}
|
||||
</span>
|
||||
<span v-else>
|
||||
￥ 0
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="time">
|
||||
时间： {{itemlist.serviceDate}}
|
||||
<span style='padding-left: 10rpx;'>{{itemlist.serviceStartTime}}</span>
|
||||
</view>
|
||||
<view class="address">
|
||||
地点：{{itemlist.serviceAddress}}
|
||||
</view>
|
||||
<image v-else :src="serviceEndPictureUrl" mode=""></image>
|
||||
<!-- <u-upload class="slot-btn" width="530" height="130" ></u-upload> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="picture" style="height: 730rpx;">
|
||||
<view class="attendantImg" style="border-bottom: 1rpx solid #BAB7B8;">
|
||||
用户签名确认
|
||||
<view class="pictures top">
|
||||
<view class="title">
|
||||
<image src="../../static/upload.png" mode=""></image>
|
||||
<view class="text">
|
||||
资料上传
|
||||
</view>
|
||||
</view>
|
||||
<view class="receive">
|
||||
我确认已接受服务
|
||||
<view class="picture">
|
||||
<view class="attendantImg">
|
||||
护理员到岗照片
|
||||
</view>
|
||||
<view class="uppicture" @tap='uploadonDutyPictureUrl'>
|
||||
<view class="choice" v-if="!onDutyPictureUrl">
|
||||
拍摄照片
|
||||
</view>
|
||||
<image v-else :src="onDutyPictureUrl" mode=""></image>
|
||||
<!-- <u-upload class="slot-btn" width="530" height="130" ></u-upload> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="uppicture" @tap='show=true'>
|
||||
<image v-if="!userSignaturePictureUrl" style="width: 36rpx;height: 36rpx;margin:8% 0 0 35%"
|
||||
src="../../static/autograph.png" mode="">
|
||||
</image>
|
||||
<span v-if="!userSignaturePictureUrl">点此签名</span>
|
||||
<image v-else :src="userSignaturePictureUrl" mode=""></image>
|
||||
<!-- <u-upload class="slot-btn" :action="action" :file-list="fileList" width="620" height="130"></u-upload> -->
|
||||
<!-- <view class="picture" style="height: 330rpx;">
|
||||
<view class="attendantImg">
|
||||
服务进行中视频（不少于1min）<span>*选填</span>
|
||||
</view>
|
||||
<view class="uppicture">
|
||||
<u-upload class="slot-btn" width="530" height="130"></u-upload>
|
||||
</view>
|
||||
<view class="user">
|
||||
<image src="../../static/radio.png" mode=""></image>
|
||||
用户不同意拍摄
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="picture">
|
||||
<view class="attendantImg">
|
||||
服务结束照片
|
||||
</view>
|
||||
<view class="uppicture" @tap='uploadserviceEndPictureUrl'>
|
||||
<view class="choice" v-if="!serviceEndPictureUrl">
|
||||
拍摄照片
|
||||
</view>
|
||||
<image v-else :src="serviceEndPictureUrl" mode=""></image>
|
||||
<!-- <u-upload class="slot-btn" width="530" height="130" ></u-upload> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="picture" style="height: 730rpx;">
|
||||
<view class="attendantImg" style="border-bottom: 1rpx solid #BAB7B8;">
|
||||
用户签名
|
||||
</view>
|
||||
<!-- <view class="receive">
|
||||
我确认已接受服务
|
||||
</view> -->
|
||||
<view class="uppicture" @tap='show=true'>
|
||||
<image v-if="!userSignaturePictureUrl" style="width: 36rpx;height: 36rpx;margin:8% 0 0 35%"
|
||||
src="../../static/autograph.png" mode="">
|
||||
</image>
|
||||
<span v-if="!userSignaturePictureUrl">点此签名</span>
|
||||
<image v-else :src="userSignaturePictureUrl" mode=""></image>
|
||||
<!-- <u-upload class="slot-btn" :action="action" :file-list="fileList" width="620" height="130"></u-upload> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="submit">
|
||||
<view class="finish" @tap='buyfinish'>
|
||||
去完成
|
||||
</view>
|
||||
<view class="submit" @tap='finishshow=true'>
|
||||
完成
|
||||
</view>
|
||||
<u-popup v-model="finishshow" mode='bottom' :closeable='true' :safe-area-inset-bottom='true'>
|
||||
<view class="finishmask">
|
||||
<view class="title">
|
||||
是否确认完成当前工单？
|
||||
</view>
|
||||
<view class="leftbtn" @tap='finishshow = false'>
|
||||
否
|
||||
</view>
|
||||
<view class="rightbtn" @tap='buyfinish'>
|
||||
是
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-mask :show="show" @click="show = false">
|
||||
<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
|
||||
style='position:absolute;bottom:0%;width: 100%;height: 800rpx;'></signature>
|
||||
<view style="position:absolute;bottom:0;height:900rpx;width:100%;background-color: #fff;" v-if='show'>
|
||||
<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
|
||||
style='background-color: #F4F5F7;width: 100%;height: 900rpx;'></signature>
|
||||
</view>
|
||||
</u-mask>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
@ -77,15 +123,17 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
orderNo: null,
|
||||
itemlist: null, //信息list
|
||||
finishshow: false, //是否完成
|
||||
show: false, //签名
|
||||
orderNo: null, //订单编号
|
||||
onDutyPictureUrl: null,
|
||||
serviceEndPictureUrl: null,
|
||||
userSignaturePictureUrl: null,
|
||||
list: {
|
||||
res: {},
|
||||
id: null,
|
||||
serviceLocationName:null,
|
||||
serviceLocationName: null,
|
||||
onDutyPictureUrl: null,
|
||||
serviceEndPictureUrl: null,
|
||||
userSignaturePictureUrl: null,
|
||||
@ -137,6 +185,7 @@
|
||||
},
|
||||
//完成
|
||||
buyfinish() {
|
||||
this.finishshow = true
|
||||
if (this.serviceEndPictureUrl && this.userSignaturePictureUrl && this.onDutyPictureUrl) {
|
||||
let that = this
|
||||
uni.uploadFile({
|
||||
@ -170,6 +219,7 @@
|
||||
success(res) {
|
||||
that.list.onDutyPictureUrl = JSON.parse(res.data)
|
||||
.imgUrl
|
||||
that.list.orderNo = that.itemlist.orderNo
|
||||
orderConfirm(that.list).then(res => {
|
||||
if (res.code == 200) {
|
||||
that.$refs.uToast.show({
|
||||
@ -208,8 +258,11 @@
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.itemlist = JSON.parse(options.list)
|
||||
this.list.id = options.orderDetailsId
|
||||
this.orderNo = options.orderNo
|
||||
this.orderNo = this.itemlist.orderNo
|
||||
},
|
||||
onShow() {
|
||||
var that = this
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
@ -248,101 +301,191 @@
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
padding: 3%;
|
||||
font-size: 36rpx;
|
||||
padding: 0 0 100rpx 0;
|
||||
|
||||
.picture {
|
||||
width: 95%;
|
||||
height: 630rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20px;
|
||||
margin: 20rpx auto 0;
|
||||
::v-deep .u-mask {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
.attendantImg {
|
||||
color: #000000;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
margin-left: 30rpx;
|
||||
.finishmask {
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
color: #BAB7B8;
|
||||
}
|
||||
.rightbtn,
|
||||
.leftbtn {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
line-height: 59rpx;
|
||||
width: 249rpx;
|
||||
height: 59rpx;
|
||||
border-radius: 5rpx;
|
||||
top: 200rpx;
|
||||
}
|
||||
|
||||
.uppicture {
|
||||
border: 1rpx dashed #818181;
|
||||
width: 90%;
|
||||
height: 500rpx;
|
||||
margin: 0 auto;
|
||||
.leftbtn {
|
||||
border: 1px solid #4271B9;
|
||||
background: #FFFFFF;
|
||||
color: #4271B9;
|
||||
left: 61rpx;
|
||||
}
|
||||
|
||||
.rightbtn {
|
||||
background: #4271B9;
|
||||
color: #fff;
|
||||
right: 61rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 41rpx;
|
||||
margin-top: 160rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
padding-bottom: 40rpx;
|
||||
background-color: #fff;
|
||||
width: 96%;
|
||||
margin: 15rpx auto 0;
|
||||
color: #333333;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5rpx;
|
||||
|
||||
.content {
|
||||
margin-left: 50rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
.time {
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.address {}
|
||||
}
|
||||
|
||||
.title {
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
display: flex;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.choice {
|
||||
.righttext {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translateY(-50%);
|
||||
font-size: 34rpx;
|
||||
color: #EA706A;
|
||||
}
|
||||
|
||||
::v-deep .u-list-item[data-v-49deb6f2] {
|
||||
background: #FFFFFF;
|
||||
.text {
|
||||
font-size: 34rpx;
|
||||
line-height: 100rpx;
|
||||
padding-left: 18rpx;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 35rpx;
|
||||
color: #969394;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
color: #969394;
|
||||
margin-left: 30rpx;
|
||||
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin: 50rpx 0 0 35rpx;
|
||||
transform: translateY(-50%);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pictures {
|
||||
width: 96%;
|
||||
margin: 15rpx auto;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5rpx;
|
||||
|
||||
.picture {
|
||||
width: 100%;
|
||||
height: 630rpx;
|
||||
|
||||
.attendantImg {
|
||||
color: #000000;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
margin-left: 30rpx;
|
||||
|
||||
span {
|
||||
color: #BAB7B8;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.uppicture {
|
||||
border: 1rpx dashed #818181;
|
||||
width: 90%;
|
||||
height: 500rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
.receive {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
color: #969394;
|
||||
margin-left: 30rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.choice {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
::v-deep .u-list-item[data-v-49deb6f2] {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 35rpx;
|
||||
color: #969394;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
color: #969394;
|
||||
margin-left: 30rpx;
|
||||
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.receive {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
color: #969394;
|
||||
margin-left: 30rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 32%;
|
||||
height: 68rpx;
|
||||
font-size: 32rpx;
|
||||
width: 496rpx;
|
||||
height: 58rpx;
|
||||
background: #4271B9;
|
||||
border-radius: 5rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
margin-left: 60%;
|
||||
|
||||
.finish {
|
||||
width: 100%;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 26rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
line-height: 58rpx;
|
||||
background: #4C7BC9;
|
||||
margin: 90rpx auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,88 +1,284 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="cards">
|
||||
<view class="item" style="background: #D43953;" @tap='gomymission'>
|
||||
<image src="../../static/dingdan.png" mode=""></image>
|
||||
<view class="title">
|
||||
我的任务
|
||||
</view>
|
||||
<image class="circular" :src="beijingurl" mode=""></image>
|
||||
<view class="topfloat">
|
||||
<image src="../../static/gongdan.png" mode="" @tap="goMymission('')"></image>
|
||||
<view class="tapbtn" @tap="goMymission('')">
|
||||
立即处理
|
||||
</view>
|
||||
<view class=" item" style="background: #4C7BC9; " @tap='gopersonal'>
|
||||
<image src="../../static/user.png" mode=""></image>
|
||||
<view class="title">
|
||||
个人信息
|
||||
<view class="btns">
|
||||
<view class="btn" @tap="goMymission('NOT_FINISH')">
|
||||
<view class="number" v-if="selectOrderByNursePersonCountlist.notFinishCount>=0">
|
||||
{{selectOrderByNursePersonCountlist.notFinishCount}}项
|
||||
</view>
|
||||
<view class="number" v-else>
|
||||
0项
|
||||
</view>
|
||||
<view class="text">
|
||||
待处理
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" @tap="goMymission('COMPLETE')">
|
||||
<view class="number" style="color: #333333;"
|
||||
v-if='selectOrderByNursePersonCountlist.completeCount>=0'>
|
||||
{{selectOrderByNursePersonCountlist.completeCount}}项
|
||||
</view>
|
||||
<view class="number" style="color: #333333;" v-else>
|
||||
0项
|
||||
</view>
|
||||
<view class="text">
|
||||
已完成
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="centerfloat">
|
||||
<view class="title">
|
||||
在线学习
|
||||
</view>
|
||||
<view class="cards">
|
||||
<image src="../../static/xxpx.png" mode="" @tap='gostudy'></image>
|
||||
<image src="../../static/jnks.png" mode="" @tap='gostudy'></image>
|
||||
<image src="../../static/zxkf.png" mode="" @tap='gostudy'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="centerfloat bottomfloat">
|
||||
<view class="title">
|
||||
护理新闻
|
||||
</view>
|
||||
<view class="righttitle" @tap='goHealthknowledge'>
|
||||
查看更多
|
||||
<u-icon name="arrow-right" color='#969494'></u-icon>
|
||||
</view>
|
||||
<view class="items" @tap='goHealthknowledge'>
|
||||
<view class="item">
|
||||
<image src="../../static/hlxw.png" mode=""></image>
|
||||
<view class="toptext">
|
||||
护理 I 致力于打造专业护理人才
|
||||
</view>
|
||||
<view class="centertext">
|
||||
生活小窍门,是指人们在日常生活中总结出来的知识和经验,和生活小常识非常相似
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
nursePerson,
|
||||
} from '@/api/personnal/personal.js';
|
||||
selectOrderByNursePersonCount
|
||||
} from '@/api/homepage/index.js'
|
||||
import baseurl from '@/api/baseurl.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phonenumber: null,
|
||||
password: null,
|
||||
beijingurl: null, //背景
|
||||
nurserStationPersonId: null, //护理员id
|
||||
selectOrderByNursePersonCountlist: {}, //项目数量对象
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
let that = this
|
||||
try {
|
||||
const value = uni.getStorageSync('phonenumber');
|
||||
const value2 = uni.getStorageSync('password');
|
||||
if (value && value2) {
|
||||
that.phonenumber = value
|
||||
that.password = value2
|
||||
}
|
||||
} catch (e) {}
|
||||
this.selectOrderByNursePersonCountlist = {}
|
||||
this.beijingurl = baseurl + '/profile/nursePersonAppletPicture/person_center.png'
|
||||
var that = this
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
that.nurserStationPersonId = value
|
||||
that.OrderByNursePersonCount();
|
||||
} else {}
|
||||
},
|
||||
methods: {
|
||||
gomymission() {
|
||||
nursePerson(this.phonenumber, this.password).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/Mymission/Mymission'
|
||||
})
|
||||
} else if (res.code == 9999) {} else {
|
||||
this.$refs.uToast.show({
|
||||
title: '账号异常,请重新登录',
|
||||
type: 'error',
|
||||
duration: '1000'
|
||||
})
|
||||
setTimeout(e => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
//项目数量
|
||||
OrderByNursePersonCount() {
|
||||
selectOrderByNursePersonCount(this.nurserStationPersonId).then(res => {
|
||||
this.selectOrderByNursePersonCountlist = res.data
|
||||
})
|
||||
},
|
||||
gopersonal() {
|
||||
nursePerson(this.phonenumber, this.password).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/personal/personal'
|
||||
})
|
||||
} else if (res.code == 9999) {} else {
|
||||
this.$refs.uToast.show({
|
||||
title: '账号异常,请重新登录',
|
||||
type: 'error',
|
||||
duration: '1000'
|
||||
})
|
||||
setTimeout(e => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
goMymission(item) {
|
||||
setTimeout(e => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Mymission/Mymission?orderStatus=${item}`
|
||||
})
|
||||
}, 0)
|
||||
},
|
||||
//跳转到模板消息订阅界面
|
||||
goTemplate() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/template/template"
|
||||
})
|
||||
},
|
||||
gostudy() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/study/study'
|
||||
})
|
||||
},
|
||||
goHealthknowledge() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/Healthknowledge/Healthknowledge',
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.app {
|
||||
position: relative;
|
||||
|
||||
.TemplateMessage {
|
||||
display: block;
|
||||
width: 94%;
|
||||
margin: 30rpx auto;
|
||||
background-color: #f4f6f7;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.bottomfloat {
|
||||
position: relative;
|
||||
|
||||
.items {
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
height: 150rpx;
|
||||
width: 100%;
|
||||
color: #666666;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.centertext {
|
||||
font-size: 22rpx;
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
left: 150rpx;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; // 超出多少行
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.toptext {
|
||||
font-size: 30rpx;
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 150rpx;
|
||||
width: 75%;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1; // 超出多少行
|
||||
-webkit-box-orient: vertical;
|
||||
// overflow: hidden; //超出的文本隐藏
|
||||
// text-overflow: ellipsis; //溢出用省略号显示
|
||||
// white-space: nowrap; // 默认不换行；
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.righttitle {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
color: #969494;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.centerfloat {
|
||||
width: 94%;
|
||||
margin: 50rpx auto 0;
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
image {
|
||||
width: 31%;
|
||||
height: 240rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 29rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 29rpx;
|
||||
color: #333333;
|
||||
margin: 0 0 40rpx 0;
|
||||
padding-left: 10rpx;
|
||||
border-left: 6rpx solid #4271B9;
|
||||
}
|
||||
}
|
||||
|
||||
.topfloat {
|
||||
z-index: 999;
|
||||
display: block;
|
||||
width: 94%;
|
||||
height: 510rpx;
|
||||
margin: 160rpx auto 0;
|
||||
position: relative;
|
||||
box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(79, 108, 254, 0.43);
|
||||
|
||||
.btns {
|
||||
position: absolute;
|
||||
top: 380rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.btn {
|
||||
width: 200rpx;
|
||||
|
||||
.text {
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 34rpx;
|
||||
color: #F14941;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tapbtn {
|
||||
width: 239rpx;
|
||||
height: 70rpx;
|
||||
background: #4271B9;
|
||||
border-radius: 35rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 210rpx;
|
||||
left: 60rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.circular {
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
checked: false,
|
||||
phonenumber: '',
|
||||
password: '',
|
||||
userId: '',
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
//获取到传值
|
||||
@ -50,21 +50,22 @@
|
||||
login() {
|
||||
var that = this
|
||||
appLogin(this.phonenumber, this.password).then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
uni.setStorageSync("phonenumber", that.phonenumber)
|
||||
uni.setStorageSync("password", that.password)
|
||||
uni.setStorageSync("nursePersonId", res.data.nursePersonId)
|
||||
uni.setStorageSync("phone", res.data.phone)
|
||||
that.$refs.uToast.show({
|
||||
title: '登录成功',
|
||||
type: 'success',
|
||||
duration: '1500'
|
||||
})
|
||||
setTimeout(() => {
|
||||
if (that.timer) {
|
||||
clearTimeout(that.timer)
|
||||
}
|
||||
that.timer = setTimeout(e => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepage/homepage',
|
||||
})
|
||||
}, 1500);
|
||||
}, 1500)
|
||||
} else {
|
||||
that.$refs.uToast.show({
|
||||
title: res.msg,
|
||||
|
||||
@ -1,264 +1,343 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="user">
|
||||
<view class="img" v-if="appPersonallist.avatar==''||!appPersonallist.avatar">
|
||||
<image style="height: 110rpx;" src="../../static/person.png" mode=""></image>
|
||||
<image class="circular" :src="beijingurl" mode=""></image>
|
||||
<view class="user" v-if="nursePersonId">
|
||||
<image class="img" :src="baseurl+Personallist.avatar" mode="" v-if="Personallist.avatar"></image>
|
||||
<image class="img" src="../../static/user2.png" mode="" v-else></image>
|
||||
<view class="phone" v-if="Personallist.nursePersonName">
|
||||
{{Personallist.nursePersonName}}
|
||||
</view>
|
||||
<view class="img" v-else>
|
||||
<image :src="baseurl+appPersonallist.avatar" mode=""></image>
|
||||
<view class="nickname" style="top:245rpx" v-if="Personallist.phone">
|
||||
{{Personallist.phone}}
|
||||
</view>
|
||||
<!-- <view class="phone">
|
||||
{{appPersonallist.phonenumber}}
|
||||
</view> -->
|
||||
<view class="nickname">
|
||||
{{appPersonallist.userName}}
|
||||
<view class="nickname" v-if="Personallist.evaluateStarCount>=0">
|
||||
<u-rate :count="5" v-model="Personallist.evaluateStarCount" disabled active-color='#F4EA2A'>
|
||||
</u-rate>
|
||||
</view>
|
||||
<view class="modify" @tap='updatainfo()'>
|
||||
<view class="modify" @tap='goModifyinformation'>
|
||||
<image src="../../static/xg.png" mode="" style="padding-right: 15rpx;"></image>
|
||||
修改信息
|
||||
<u-icon name="arrow-right" color="#ffffff" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="information">
|
||||
<view class="item">
|
||||
姓名：{{appPersonallist.nickName}}
|
||||
</view>
|
||||
<view class="item">
|
||||
电话：{{appPersonallist.phonenumber }}
|
||||
</view>
|
||||
<view class="item" style="border:none;border-radius:0 0 20rpx 20rpx;line-height:50rpx;padding: 20rpx 3%;"
|
||||
v-if="appPersonallist.nurseStationSysUserVOList">
|
||||
护理站：
|
||||
<text v-for='(uitem,index) in appPersonallist.nurseStationSysUserVOList'> {{uitem.nurseStationName}}
|
||||
<text v-if="index!=appPersonallist.nurseStationSysUserVOList.length-1">，</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="signout" @tap='remove'>
|
||||
退出账号
|
||||
<view class="user" v-else>
|
||||
<image class="img" src="../../static/user2.png" mode=""></image>
|
||||
<view class="login" @tap='gologin'>
|
||||
登录
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="External" style="margin: 100rpx auto 0;">
|
||||
<view class="lefttext">
|
||||
我的设备
|
||||
<view class="topitems">
|
||||
<view class="topitem" @tap="tapstatus('ONLINE')">
|
||||
<image src="../../static/kaishi2.png" mode="" v-if="Personallist.workStatus=='ONLINE'"></image>
|
||||
<image src="../../static/kaishi.png" mode="" v-else></image>
|
||||
<view class="">
|
||||
在线
|
||||
</view>
|
||||
</view>
|
||||
<image src="../../static/jiantou.png" mode=""></image>
|
||||
</view> -->
|
||||
<!-- <view class="External">
|
||||
<view class="lefttext">
|
||||
修改密码
|
||||
<view class="topitem" @tap="tapstatus('BE_BUSY')">
|
||||
<image src="../../static/manglu2.png" mode="" v-if="Personallist.workStatus=='BE_BUSY'"></image>
|
||||
<image src="../../static/manglu.png" mode="" v-else></image>
|
||||
<view class="">
|
||||
忙碌
|
||||
</view>
|
||||
</view>
|
||||
<image src="../../static/jiantou.png" mode=""></image>
|
||||
</view> -->
|
||||
<view class="topitem" @tap="tapstatus('OFFLINE')">
|
||||
<image src="../../static/lixian2.png" mode="" v-if="Personallist.workStatus=='OFFLINE'"></image>
|
||||
<image src="../../static/lixian.png" mode="" v-else></image>
|
||||
<view class="">
|
||||
离线
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottomitems">
|
||||
<view class="bottomitem" @tap='goMyBenefits'>
|
||||
<image src="../../static/shouyi.png" mode=""></image>
|
||||
<view class="">
|
||||
我的收益
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottomitem" @tap='gostudy'>
|
||||
<image src="../../static/xuexi.png" mode=""></image>
|
||||
<view class="">
|
||||
我的学习
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottomitem" @tap='gostudy'>
|
||||
<image src="../../static/kaoshi.png" mode=""></image>
|
||||
<view class="">
|
||||
我的考试
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottomitem" @tap='goremove'>
|
||||
<image src="../../static/shezhi.png" mode=""></image>
|
||||
<view class="">
|
||||
退出账号
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
nursePerson,
|
||||
nurseAppletPersonCenter,
|
||||
updateNursePersonWorkStatus
|
||||
} from '@/api/personnal/personal.js';
|
||||
import baseurl from '@/api/baseurl.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseurl: '', //url
|
||||
phonenumber: '',
|
||||
avatar: '',
|
||||
password: '',
|
||||
userId: '',
|
||||
appPersonallist: [], //获取个人信息
|
||||
nurseStationSysUserVOList: [],
|
||||
phone: null,
|
||||
beijingurl: null, //背景
|
||||
nursePersonId: null, //护理员id
|
||||
baseurl: null, //url
|
||||
Personallist: {
|
||||
workStatus: ''
|
||||
}, //获取个人信息
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.Personallist = {
|
||||
workStatus: ''
|
||||
}
|
||||
this.beijingurl = baseurl + '/profile/nursePersonAppletPicture/person_center.png'
|
||||
this.baseurl = baseurl;
|
||||
let that = this
|
||||
try {
|
||||
const value = uni.getStorageSync('phonenumber');
|
||||
const value2 = uni.getStorageSync('password');
|
||||
if (value && value2) {
|
||||
that.phonenumber = value
|
||||
that.password = value2
|
||||
that.myInfo()
|
||||
}
|
||||
} catch (e) {}
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
that.nursePersonId = value
|
||||
that.myInfo()
|
||||
} else {}
|
||||
const phone = uni.getStorageSync('phone');
|
||||
if (phone) {
|
||||
that.phone = phone
|
||||
} else {}
|
||||
},
|
||||
onLoad(options) {},
|
||||
methods: {
|
||||
//退出
|
||||
remove() {
|
||||
let that = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认要退出此账号吗',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync("phonenumber")
|
||||
uni.removeStorageSync("password")
|
||||
uni.removeStorageSync("nursePersonId")
|
||||
that.$refs.uToast.show({
|
||||
title: '退出账号成功',
|
||||
type: 'success',
|
||||
duration: '1000'
|
||||
})
|
||||
setTimeout(e => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}, 1000)
|
||||
} else if (res.cancel) {
|
||||
that.$refs.uToast.show({
|
||||
title: '退出账号失败',
|
||||
type: 'error',
|
||||
duration: '1000'
|
||||
})
|
||||
}
|
||||
//点击状态
|
||||
tapstatus(item) {
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
var obj = {
|
||||
id: this.nursePersonId,
|
||||
workStatus: item
|
||||
}
|
||||
});
|
||||
updateNursePersonWorkStatus(obj).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.myInfo()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
myInfo() {
|
||||
nursePerson(this.phonenumber, this.password).then(res => {
|
||||
nurseAppletPersonCenter(this.nursePersonId).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.appPersonallist = res.data
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
title: '账号异常,请重新登录',
|
||||
type: 'error',
|
||||
duration: '1500'
|
||||
})
|
||||
setTimeout(e => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}, 1500)
|
||||
this.Personallist = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
updatainfo() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/Modifyinformation/Modifyinformation`
|
||||
//跳登录
|
||||
gologin() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
//跳修改
|
||||
goModifyinformation() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/Modifyinformation/Modifyinformation'
|
||||
})
|
||||
},
|
||||
//我的学习
|
||||
gostudy() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/study/study'
|
||||
})
|
||||
},
|
||||
//我的收益
|
||||
goMyBenefits() {
|
||||
const nursePersonId = uni.getStorageSync('nursePersonId');
|
||||
if (nursePersonId) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/MyBenefits/MyBenefits'
|
||||
})
|
||||
} else {
|
||||
this.gologin();
|
||||
}
|
||||
},
|
||||
//退出账号
|
||||
goremove() {
|
||||
let that = this
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认要退出此账号吗',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.removeStorageSync('nursePersonId');
|
||||
uni.removeStorageSync('phone');
|
||||
that.nursePersonId = null
|
||||
that.Personallist = {
|
||||
workStatus: ''
|
||||
}
|
||||
that.$refs.uToast.show({
|
||||
title: '退出账号成功',
|
||||
type: 'success',
|
||||
duration: '1000'
|
||||
})
|
||||
if (that.timer) {
|
||||
clearTimeout(that.timer)
|
||||
}
|
||||
that.timer = setTimeout(e => {
|
||||
that.gologin();
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
that.$refs.uToast.show({
|
||||
title: '您未登录',
|
||||
type: 'error',
|
||||
duration: '1000'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 0;
|
||||
font-size: 32rpx;
|
||||
height: 100vh;
|
||||
|
||||
.signout {
|
||||
// position: absolute;
|
||||
// bottom: 60rpx;
|
||||
// width: 94%;
|
||||
background: #FFFFFF;
|
||||
margin-top: 50rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
// left:3%;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
.bottomitems {
|
||||
width: 100%;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.bottomitem {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
height: 120rpx;
|
||||
position: relative;
|
||||
border-bottom: 1rpx solid #F3F3F3;
|
||||
|
||||
view {
|
||||
display: inline-block;
|
||||
font-size: 35rpx;
|
||||
color: #333333;
|
||||
line-height: 120rpx;
|
||||
margin-left: 80rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.External {
|
||||
.topitems {
|
||||
z-index: 999;
|
||||
padding: 45rpx 0 35rpx;
|
||||
width: 94%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
margin: 20rpx auto;
|
||||
padding-left: 5%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(79, 108, 254, 0.43);
|
||||
border-radius: 5rpx;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.topitem {
|
||||
view {
|
||||
font-size: 32rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 18rpx;
|
||||
height: 27rpx;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.lefttext {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.information {
|
||||
width: 98%;
|
||||
border-radius: 20rpx;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 1%;
|
||||
color: #000000;
|
||||
overflow: hidden;
|
||||
font-size: 35rpx;
|
||||
|
||||
.item {
|
||||
// height: 110rpx;
|
||||
line-height: 110rpx;
|
||||
background: #FFFFFF;
|
||||
padding-left: 3%;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
|
||||
.address {
|
||||
height: 40rpx;
|
||||
// font-size: 30rpx;
|
||||
line-height: 40rpx;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
margin-left: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
background: #4C7BC9;
|
||||
height: 400rpx;
|
||||
position: relative;
|
||||
color: #FFFFFF;
|
||||
font-size: 38rpx;
|
||||
z-index: 999;
|
||||
|
||||
.modify {
|
||||
font-size: 32rpx;
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 18%;
|
||||
top: 250rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
image {
|
||||
width: 23rpx;
|
||||
height: 23rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 220rpx;
|
||||
left: 35%;
|
||||
font-size: 36rpx;
|
||||
width: 180rpx;
|
||||
line-height: 70rpx;
|
||||
border: 1rpx solid #fff;
|
||||
height: 70rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
left: 28%;
|
||||
top: 300rpx;
|
||||
left: 35%;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.phone {
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 28%;
|
||||
top: 180rpx;
|
||||
left: 35%;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: #F6F6F6;
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 5%;
|
||||
|
||||
image {
|
||||
border-radius: 50%;
|
||||
width: 120rpx;
|
||||
margin-left: 50%;
|
||||
margin-top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 120rpx;
|
||||
}
|
||||
top: 170rpx;
|
||||
left: 8%;
|
||||
// border: 4rpx solid #6DD8FC;
|
||||
}
|
||||
}
|
||||
|
||||
.circular {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
<template>
|
||||
<view class="" style="background-color: #F4F5F7;">
|
||||
<Signature @init="onSignInit" style='background-color: #fff;'></Signature>
|
||||
<view class="signature" style="background-color: #F4F5F7;height: 800rpx;">
|
||||
<Signature @init="onSignInit" style='background-color: #fff;height: 700rpx;width: 100%;'></Signature>
|
||||
<view class="btns">
|
||||
<button @click="clear">清空</button>
|
||||
<button @click="revoke">撤回</button>
|
||||
<button @click="saveTempFilePath">保存</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Signature from '@/components/v-sign/v-sign.vue'
|
||||
export default {
|
||||
@ -38,6 +36,11 @@
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.signature {
|
||||
height: 800rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-top: 50rpx;
|
||||
display: flex;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<view class="app">
|
||||
<image src="../../static/logo.png" mode=""></image>
|
||||
<view class="title">
|
||||
泉医到家
|
||||
泉医助手
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
@ -10,11 +10,11 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
appLogin
|
||||
createMobileToken
|
||||
} from '@/api/login/index.js'
|
||||
import {
|
||||
appFileInfoByOneId
|
||||
} from '@/api/startup.js'
|
||||
} from '@/api/startup/index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -22,12 +22,15 @@
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
createMobileToken().then(res => {
|
||||
uni.setStorageSync("token", res.data.token)
|
||||
})
|
||||
//自动更新
|
||||
var that = this;
|
||||
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
|
||||
this.apknumber = wgtinfo.version
|
||||
that.apknumber = wgtinfo.version
|
||||
appFileInfoByOneId().then(res => {
|
||||
if (res.fileVersion > this.apknumber) {
|
||||
if (res.fileVersion > that.apknumber) {
|
||||
uni.showToast({
|
||||
title: '有新的版本发布，程序已启动自动更新。新版本下载完成后将自动弹出安装程序。',
|
||||
mask: false,
|
||||
@ -104,38 +107,15 @@
|
||||
methods: {
|
||||
info() {
|
||||
var that = this
|
||||
try {
|
||||
const value = uni.getStorageSync('phonenumber');
|
||||
const value2 = uni.getStorageSync('password');
|
||||
if (value && value2) {
|
||||
appLogin(value, value2).then(res => {
|
||||
if (res.code == 200) {
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepage/homepage',
|
||||
})
|
||||
}, 2000);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}, 2000);
|
||||
const nursePersonId = uni.getStorageSync("nursePersonId")
|
||||
if (!nursePersonId) {
|
||||
uni.reLaunch({
|
||||
url: "/pages/login/login"
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: "/pages/homepage/homepage"
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -143,12 +123,18 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 50%;
|
||||
height: 200rpx;
|
||||
width: 390rpx;
|
||||
height: 380rpx;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
top: 28%;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -160,7 +146,7 @@
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: 55%;
|
||||
left: 10%;
|
||||
}
|
||||
</style>
|
||||
|
||||
71
pages/study/study.vue
Normal file
71
pages/study/study.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="concent">
|
||||
<view class="background">
|
||||
<image src="/static/logo.png" mode=""></image>
|
||||
<view>
|
||||
<view class="detailed">
|
||||
<view>
|
||||
敬请期待
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
padding-top: 10rpx;
|
||||
|
||||
.concent {
|
||||
width: 701rpx;
|
||||
height: 550rpx;
|
||||
background: #4C7BC9;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx;
|
||||
margin: 5% auto 20px;
|
||||
|
||||
.background {
|
||||
position: relative;
|
||||
width: 657rpx;
|
||||
height: 500rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 25rpx;
|
||||
background-color: white;
|
||||
margin: 0 auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 25px;
|
||||
margin-left: 68%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed {
|
||||
width: 657rpx;
|
||||
padding: 0 20rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.detailed view {
|
||||
text-indent: 2em;
|
||||
}
|
||||
</style>
|
||||
@ -1,120 +1,107 @@
|
||||
.app {
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
padding: 3%;
|
||||
.img{
|
||||
line-height: 90rpx;
|
||||
view{
|
||||
font-size: 32rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
image{
|
||||
width: 100%;
|
||||
height: 700rpx;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
width: 100%;
|
||||
height: 250rpx;
|
||||
background: #FFFFFF;
|
||||
.app {
|
||||
.btnsuccess,
|
||||
.btnreturn {
|
||||
width: 496rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 5rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.btnsuccess {
|
||||
margin: 100rpx auto 0;
|
||||
background: #4271B9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btnreturn {
|
||||
margin: 25rpx auto 0;
|
||||
color: #4271B9;
|
||||
border: 1px solid #4271B9;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding-bottom: 40rpx;
|
||||
background-color: #fff;
|
||||
width: 96%;
|
||||
margin: 15rpx auto 0;
|
||||
color: #333333;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
border-radius: 5rpx;
|
||||
|
||||
image {
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 20rpx 0 0 30rpx;
|
||||
}
|
||||
.content {
|
||||
padding: 0 50rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
.detailsinfo {
|
||||
width: 60%;
|
||||
height: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 35%;
|
||||
|
||||
.change {
|
||||
width: 100%;
|
||||
color: #000000;
|
||||
font-size: 34rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.item {
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #D43953;
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
.address {
|
||||
position: relative;
|
||||
line-height: 45rpx;
|
||||
.text {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.daohang {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10rpx;
|
||||
display: inline-block;
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.p {
|
||||
padding-left: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #EA706A;
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0rpx;
|
||||
transform: translateY(-40%);
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
top: 20rpx;
|
||||
|
||||
|
||||
.item {
|
||||
line-height: 110rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 100%;
|
||||
.title {
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
display: flex;
|
||||
height: 100rpx;
|
||||
height: 68rpx;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 80rpx;
|
||||
// background-color: red;
|
||||
left: 15%;
|
||||
// padding: 20rpx;
|
||||
|
||||
.return {
|
||||
width: 216rpx;
|
||||
height: 68rpx;
|
||||
background: #E1AE3C;
|
||||
border-radius: 26rpx;
|
||||
line-height: 68rpx;
|
||||
display: inline-block;
|
||||
|
||||
|
||||
line-height: 100rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.righttext{
|
||||
position: absolute;
|
||||
right:20rpx;
|
||||
top:50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 34rpx;
|
||||
color: #EA706A;
|
||||
}
|
||||
.text {
|
||||
font-size: 34rpx;
|
||||
line-height: 100rpx;
|
||||
padding-left: 18rpx;
|
||||
}
|
||||
|
||||
.finish {
|
||||
width: 217rpx;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 26rpx;
|
||||
display: inline-block;
|
||||
margin-left: 30rpx;
|
||||
|
||||
image {
|
||||
margin: 50rpx 0 0 35rpx;
|
||||
transform: translateY(-50%);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,96 +1,187 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="details">
|
||||
<image :src="baseurl+list.itemPictureUrl" mode=""></image>
|
||||
<view class="detailsinfo">
|
||||
<view class="change">
|
||||
<view class="app" v-if="baseurl">
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<image src="../../static/fuwu.png" mode=""></image>
|
||||
<view class="text">
|
||||
{{list.nurseItemName}}
|
||||
</view>
|
||||
<view class="righttext">
|
||||
<span v-if="list.orderCommissionAmount&&list.orderCommissionAmount>=0">
|
||||
￥{{list.orderCommissionAmount}}
|
||||
</span>
|
||||
<span v-else>
|
||||
￥ 0
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="time" style="line-height: 60rpx;padding-top: 15rpx;">
|
||||
单号：
|
||||
<span v-if="list.orderNo">{{list.orderNo}}</span>
|
||||
</view>
|
||||
<view class="time">
|
||||
服务时长： {{list.itemServeDurationUnit}}
|
||||
时间：{{list.serviceDate}}
|
||||
<span style='padding-left: 10rpx;'>{{list.serviceStartTime}}</span>
|
||||
</view>
|
||||
<view class="price">
|
||||
￥ {{list.totalPrice}}
|
||||
<view class="address">
|
||||
地点：{{list.serviceAddress}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="item">
|
||||
姓名： {{list.patientName}}
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<image src="../../static/user.png" mode=""></image>
|
||||
<view class="text">
|
||||
用户信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
电话：{{list.phone}}
|
||||
</view>
|
||||
<view class="item" style="border:none;line-height: 60rpx;padding: 20rpx 0;">
|
||||
地址：{{list.serviceAddress}}
|
||||
<view class="content" style="margin-top: 20rpx;">
|
||||
<view class="item">
|
||||
姓名：
|
||||
<span v-if="list.patientName">{{list.patientName}}</span>
|
||||
</view>
|
||||
<view class="item">
|
||||
年龄：{{list.age}}
|
||||
<span v-if="list.age>=0">{{list.age}}</span>
|
||||
</view>
|
||||
<view class="item">
|
||||
电话：
|
||||
<span v-if="list.phone">{{list.phone}}</span>
|
||||
</view>
|
||||
<view class="item address" @tap='getlocations'>
|
||||
<view class="text" style="line-height: 60rpx;">
|
||||
住址：
|
||||
<span v-if="list.address">{{list.address}}</span>
|
||||
</view>
|
||||
<view class="daohang">
|
||||
<image src="../../static/daohang.png" mode=""></image>
|
||||
<span class='p'>导航</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
是否失能：{{list.disablingCondition=="NOT_DISABLED"?'未失能':''}}
|
||||
{{list.disablingCondition=="DISABLED"?'已失能':''}}
|
||||
</view>
|
||||
<view class="item" v-if="list.disablingCondition=='DISABLED'">
|
||||
失能情况：
|
||||
<span v-if="list.disablingReason">{{list.disablingReason}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="img" v-if="list.orderStatus=='COMPLETE'||list.orderStatus=='EVALUATED'">
|
||||
<view class="">
|
||||
护理员到岗照片
|
||||
</view>
|
||||
<image :src="baseurl+list.onDutyPictureUrl" mode=""></image>
|
||||
</view>
|
||||
<view class="img" v-if="list.orderStatus=='COMPLETE'||list.orderStatus=='EVALUATED'">
|
||||
<view class="" >
|
||||
服务结束照片
|
||||
</view>
|
||||
<image :src="baseurl+list.serviceEndPictureUrl" mode=""></image>
|
||||
</view>
|
||||
<view class="img" v-if="list.orderStatus=='COMPLETE'||list.orderStatus=='EVALUATED'">
|
||||
<view class="">
|
||||
签名
|
||||
</view>
|
||||
<image :src="baseurl+list.userSignaturePictureUrl" mode=""></image>
|
||||
</view>
|
||||
<view class="submit">
|
||||
<view class="return" @tap='goreturn' v-if="list.orderStatus=='NOT_FINISH'">
|
||||
任务退回
|
||||
</view>
|
||||
<view class="finish" @tap='gocomplete' v-if="list.orderStatus=='NOT_FINISH'">
|
||||
<span v-if="list.orderStatus=='NOT_FINISH'||list.orderStatus=='WAIT_RECEIVE'">
|
||||
<view class="btnsuccess" @tap='goconfirmCompletion' v-if="list.orderStatus=='NOT_FINISH'">
|
||||
去完成
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnsuccess" @tap='Receivingorders' v-if="list.orderStatus=='WAIT_RECEIVE'">
|
||||
接单
|
||||
</view>
|
||||
<view class="btnreturn" @tap='gotaskReturn'>
|
||||
退回
|
||||
</view>
|
||||
</span>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
taskDetails
|
||||
} from '@/api/taskDetails.js'
|
||||
} from '@/api/taskDetails/taskDetails.js'
|
||||
import {
|
||||
receiveOrders
|
||||
} from '@/api/Mymission/Mymission.js'
|
||||
import baseurl from '@/api/baseurl.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseurl: '',
|
||||
list: {},
|
||||
orderDetailsId: null,
|
||||
nursePersonId: null, //护理员id
|
||||
baseurl: null,
|
||||
list: {}, //详情对象
|
||||
tude: { //经纬度
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
},
|
||||
orderNo: null, //工单orderno
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//详情接口
|
||||
taskDetailsinfo(orderDetailsId) {
|
||||
taskDetails(orderDetailsId).then(res => {
|
||||
this.list = res.data
|
||||
taskDetailsinfo(orderNo) {
|
||||
taskDetails(orderNo).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.list = res.data
|
||||
}
|
||||
this.baseurl = baseurl
|
||||
})
|
||||
},
|
||||
goreturn() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/taskReturn/taskReturn?orderNo=${this.list.orderNo}`
|
||||
//接单
|
||||
Receivingorders() {
|
||||
var obj = {
|
||||
"appointmentOrderId": this.list.orderDetailsId,
|
||||
"stationPersonId": this.nursePersonId,
|
||||
"appointmentOrderNo": this.list.orderNo
|
||||
}
|
||||
receiveOrders(obj).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$refs.uToast.show({
|
||||
title: '接单成功',
|
||||
type: 'success',
|
||||
duration: '1500'
|
||||
})
|
||||
this.taskDetailsinfo(this.orderNo)
|
||||
}
|
||||
})
|
||||
},
|
||||
gocomplete() {
|
||||
//经纬度
|
||||
getlocations() {
|
||||
let that = this
|
||||
uni.request({
|
||||
url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=',
|
||||
method: 'GET',
|
||||
data: {
|
||||
key: 'TXGBZ-VGEWW-LJHRR-3CDLI-N57YO-YQBHJ', //高德地图key
|
||||
address: that.list.address // 详细地址
|
||||
},
|
||||
success: function(res) {
|
||||
that.tude.latitude = res.data.result.location.lat
|
||||
that.tude.longitude = res.data.result.location.lng
|
||||
that.goaddress();
|
||||
},
|
||||
fail(err) {}
|
||||
})
|
||||
},
|
||||
//跳转地图
|
||||
goaddress() {
|
||||
let that = this
|
||||
uni.openLocation({
|
||||
latitude: Number(that.tude.latitude),
|
||||
longitude: Number(that.tude.longitude),
|
||||
})
|
||||
},
|
||||
//退回
|
||||
gotaskReturn() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/confirmCompletion/confirmCompletion?orderDetailsId=${this.list.orderDetailsId}&orderNo=${this.list.orderNo}`
|
||||
url: `/pages/taskReturn/taskReturn?item=${JSON.stringify(this.list)}`
|
||||
})
|
||||
},
|
||||
//去完成
|
||||
goconfirmCompletion() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/confirmCompletion/confirmCompletion?list=${JSON.stringify(this.list)}&&orderDetailsId=${this.list.orderDetailsId}`
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.baseurl = baseurl
|
||||
this.orderDetailsId = options.orderDetailsId
|
||||
this.orderNo = options.orderNo
|
||||
},
|
||||
onShow() {
|
||||
this.taskDetailsinfo(this.orderDetailsId)
|
||||
var that = this
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
that.nursePersonId = value
|
||||
} else {}
|
||||
this.taskDetailsinfo(this.orderNo)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,98 +1,235 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="return">
|
||||
<view class="reason">
|
||||
退回原因
|
||||
<view class="app" v-if="tasklist">
|
||||
<view class="top">
|
||||
<view class="title">
|
||||
<image src="../../static/fuwu.png" mode=""></image>
|
||||
<view class="text">
|
||||
{{tasklist.nurseItemName}}
|
||||
</view>
|
||||
<view class="righttext">
|
||||
<span v-if="tasklist.orderCommissionAmount&&tasklist.orderCommissionAmount>=0">
|
||||
￥{{tasklist.orderCommissionAmount}}
|
||||
</span>
|
||||
<span v-else>
|
||||
￥ 0
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="reason" style="border: none;margin: 20rpx 0 0 50rpx;">
|
||||
<input type="text" placeholder="请填写" v-model="taskReturnReason" />
|
||||
<view class="content">
|
||||
<view class="time" style="line-height: 60rpx;padding-top: 15rpx;">
|
||||
单号：
|
||||
<span v-if="tasklist.orderNo">{{tasklist.orderNo}}</span>
|
||||
</view>
|
||||
<view class="time">
|
||||
时间：{{tasklist.serviceDate}}
|
||||
<span style='padding-left: 10rpx;'>{{tasklist.serviceStartTime}}</span>
|
||||
</view>
|
||||
<view class="address">
|
||||
地点：{{tasklist.serviceAddress}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="submit">
|
||||
<view class="finish" @tap='taskreturn'>
|
||||
确定
|
||||
<view class="bottom">
|
||||
<view class="title">
|
||||
<image src="../../static/no.png" mode=""></image>
|
||||
<view class="text">
|
||||
拒绝原因（多选）
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkboxs">
|
||||
<u-checkbox-group @change="checkboxGroupChange" :wrap='true'>
|
||||
<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
|
||||
:key="index" :name="item.name" shape='circle'>{{item.name}}</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<u-input v-model="value" type="text" :border="true" border-color='#E6E6E6' placeholder='请在此输入'
|
||||
v-if="list[4].checked" />
|
||||
</view>
|
||||
<view class="btn" @tap='taskreturn'>
|
||||
立即提交
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
taskDetails
|
||||
} from '@/api/taskDetails/taskDetails.js'
|
||||
import {
|
||||
orderFallback
|
||||
} from '@/api/taskReturn/index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderNo: null,
|
||||
taskReturnReason: null,
|
||||
baseurl: null,
|
||||
tasklist: null, //传值item
|
||||
nursePersonId: null, //护理员id
|
||||
taskReturnReason: '',
|
||||
value: null, //input绑定
|
||||
list: [{
|
||||
name: '与其他工单时间冲突',
|
||||
checked: false,
|
||||
}, {
|
||||
name: '服务要求较高，当前资质无法完成',
|
||||
checked: false,
|
||||
}, {
|
||||
name: '距离较远无法到达',
|
||||
checked: false,
|
||||
}, {
|
||||
name: '价格不合理',
|
||||
checked: false,
|
||||
}, {
|
||||
name: '其它',
|
||||
checked: false,
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选中某个复选框时，由checkbox时触发
|
||||
checkboxChange(e) {},
|
||||
// 选中任一checkbox时，由checkbox-group触发
|
||||
checkboxGroupChange(e) {
|
||||
this.taskReturnReason = ''
|
||||
e.forEach(el => {
|
||||
if (el != '其它') {
|
||||
this.taskReturnReason += el + ';'
|
||||
}
|
||||
})
|
||||
},
|
||||
taskreturn() {
|
||||
orderFallback(this.orderNo, this.taskReturnReason).then(res => {
|
||||
this.$refs.uToast.show({
|
||||
title: '任务退回成功',
|
||||
type: 'success',
|
||||
duration: '1500'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
if (this.list[4].checked && this.value) {
|
||||
this.taskReturnReason += this.value + ';'
|
||||
}
|
||||
if (!this.tasklist.id) {
|
||||
this.tasklist.id = this.tasklist.orderDetailsId
|
||||
}
|
||||
var obj = {
|
||||
"appointmentOrderId": this.tasklist.id,
|
||||
"stationPersonId": this.nursePersonId,
|
||||
"appointmentOrderNo": this.tasklist.orderNo,
|
||||
"taskReturnReason": this.taskReturnReason,
|
||||
}
|
||||
orderFallback(obj).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$refs.uToast.show({
|
||||
title: '任务退回成功',
|
||||
type: 'success',
|
||||
duration: '1500'
|
||||
})
|
||||
}, 1500);
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 1500);
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
title: res.msg,
|
||||
type: 'error',
|
||||
duration: '1500'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderNo = options.orderNo
|
||||
this.tasklist = JSON.parse(options.item)
|
||||
var that = this
|
||||
const value = uni.getStorageSync('nursePersonId');
|
||||
if (value) {
|
||||
that.nursePersonId = value
|
||||
} else {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
::v-deep .u-input {
|
||||
border: 1rpx solid #E6E6E6;
|
||||
width: 85%;
|
||||
display: block;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
|
||||
::v-deep .u-checkbox {
|
||||
height: 80rpx !important;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 0;
|
||||
// font-size: 35rpx;
|
||||
height: 100vh;
|
||||
padding: 3%;
|
||||
|
||||
.return {
|
||||
width: 98%;
|
||||
height: 342rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 20rpx;
|
||||
margin: 0 auto;
|
||||
.btn {
|
||||
width: 496rpx;
|
||||
height: 70rpx;
|
||||
background: #4271B9;
|
||||
border-radius: 5rpx;
|
||||
margin: 80rpx auto;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reason {
|
||||
width: 93%;
|
||||
height: 80rpx;
|
||||
.checkboxs {
|
||||
padding-left: 50rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.bottom,
|
||||
.top {
|
||||
background-color: #fff;
|
||||
width: 96%;
|
||||
margin: 15rpx auto 0;
|
||||
color: #333333;
|
||||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.content {
|
||||
padding: 0 50rpx;
|
||||
font-size: 30rpx;
|
||||
color: #030303;
|
||||
line-height: 80rpx;
|
||||
border-bottom: 1rpx solid #D8D4D4;
|
||||
margin: 0 auto;
|
||||
|
||||
.time {
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.address {}
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
height: 68rpx;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 80rpx;
|
||||
left: 60%;
|
||||
.title {
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
display: flex;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.finish {
|
||||
width: 217rpx;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
background: #4C7BC9;
|
||||
border-radius: 26rpx;
|
||||
margin-left: 30rpx;
|
||||
.righttext {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 34rpx;
|
||||
color: #EA706A;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 34rpx;
|
||||
line-height: 100rpx;
|
||||
padding-left: 18rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
margin: 50rpx 0 0 35rpx;
|
||||
transform: translateY(-50%);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
671
pages/ucalendar/u-calendar.vue
Normal file
671
pages/ucalendar/u-calendar.vue
Normal file
@ -0,0 +1,671 @@
|
||||
<template>
|
||||
|
||||
<view class="u-calendar">
|
||||
<!-- <view class="u-calendar__header">
|
||||
<view class="u-calendar__header__text" v-if="!$slots['tooltip']">
|
||||
{{toolTip}}
|
||||
</view>
|
||||
<slot v-else name="tooltip" />
|
||||
</view> -->
|
||||
<view class="u-calendar__action u-flex u-row-center">
|
||||
<view class="u-calendar__action__icon">
|
||||
<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor"
|
||||
@click="changeYearHandler(0)"></u-icon>
|
||||
</view>
|
||||
<view class="u-calendar__action__icon">
|
||||
<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view class="u-calendar__action__text">{{ showTitle }}</view>
|
||||
<view class="u-calendar__action__icon">
|
||||
<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view class="u-calendar__action__icon">
|
||||
<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor"
|
||||
@click="changeYearHandler(1)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-calendar__week-day">
|
||||
<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
|
||||
</view>
|
||||
<view class="u-calendar__content">
|
||||
<!-- 前置空白部分 -->
|
||||
<block v-for="(item, index) in weekdayArr" :key="index">
|
||||
<view class="u-calendar__content__item"></view>
|
||||
</block>
|
||||
<view class="u-calendar__content__item" :class="{
|
||||
'u-hover-class':openDisAbled(year,month,index+1),
|
||||
'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
|
||||
'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
|
||||
}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
|
||||
@tap="dateClick(index)">
|
||||
<view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
|
||||
<view>{{ index + 1 }}</view>
|
||||
</view>
|
||||
<view class="u-calendar__content__item__tips" :style="{color:activeColor}"
|
||||
v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">
|
||||
{{startText}}
|
||||
</view>
|
||||
<view class="u-calendar__content__item__tips" :style="{color:activeColor}"
|
||||
v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
|
||||
</view>
|
||||
<view class="u-calendar__content__bg-month">{{month}}</view>
|
||||
</view>
|
||||
<view class="u-calendar__bottom">
|
||||
<view class="u-calendar__bottom__choose">
|
||||
<text>{{mode == 'date' ? activeDate : startDate}}</text>
|
||||
<text v-if="endDate">至{{endDate}}</text>
|
||||
</view>
|
||||
<view class="u-calendar__bottom__btn">
|
||||
<view class="btn" @click="btnFix(false)">
|
||||
确定
|
||||
</view>
|
||||
<!-- <u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* calendar 日历
|
||||
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
|
||||
* @tutorial http://uviewui.com/components/calendar.html
|
||||
* @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
|
||||
* @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
|
||||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
|
||||
* @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
|
||||
* @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
|
||||
* @property {String Number} max-year 可切换的最大年份(默认2050)
|
||||
* @property {String Number} min-year 可切换的最小年份(默认1950)
|
||||
* @property {String Number} min-date 最小可选日期(默认1950-01-01)
|
||||
* @property {String Number} max-date 最大可选日期(默认当前日期)
|
||||
* @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
|
||||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
|
||||
* @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
|
||||
* @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
|
||||
* @property {String} color 日期字体的默认颜色(默认#303133)
|
||||
* @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
|
||||
* @property {String Number} z-index 弹出时的z-index值(默认10075)
|
||||
* @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
|
||||
* @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
|
||||
* @property {String} range-color 选择范围内字体颜色(默认#2979ff)
|
||||
* @property {String} start-text 起始日期底部的提示文字(默认 '开始')
|
||||
* @property {String} end-text 结束日期底部的提示文字(默认 '结束')
|
||||
* @property {String} btn-type 底部确定按钮的主题(默认 'primary')
|
||||
* @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
|
||||
* @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
|
||||
* @example <u-calendar v-model="show" :mode="mode"></u-calendar>
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'u-calendar',
|
||||
props: {
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许通过点击遮罩关闭Picker
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 通过双向绑定控制组件的弹出与收起
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 弹出的z-index值
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 是否允许切换年份
|
||||
changeYear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许切换月份
|
||||
changeMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// date-单个日期选择，range-开始日期+结束日期选择
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'date'
|
||||
},
|
||||
// 可切换的最大年份
|
||||
maxYear: {
|
||||
type: [Number, String],
|
||||
default: 2050
|
||||
},
|
||||
// 可切换的最小年份
|
||||
minYear: {
|
||||
type: [Number, String],
|
||||
default: 1950
|
||||
},
|
||||
// 最小可选日期(不在范围内日期禁用不可选)
|
||||
minDate: {
|
||||
type: [Number, String],
|
||||
default: '1950-01-01'
|
||||
},
|
||||
/**
|
||||
* 最大可选日期
|
||||
* 默认最大值为今天，之后的日期不可选
|
||||
* 2030-12-31
|
||||
* */
|
||||
maxDate: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// 弹窗顶部左右两边的圆角值
|
||||
borderRadius: {
|
||||
type: [String, Number],
|
||||
default: 20
|
||||
},
|
||||
// 月份切换按钮箭头颜色
|
||||
monthArrowColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// 年份切换按钮箭头颜色
|
||||
yearArrowColor: {
|
||||
type: String,
|
||||
default: '#909399'
|
||||
},
|
||||
// 默认日期字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#303133'
|
||||
},
|
||||
// 选中|起始结束日期背景色
|
||||
activeBgColor: {
|
||||
type: String,
|
||||
default: '#4271B9'
|
||||
},
|
||||
// 选中|起始结束日期字体颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
// 范围内日期背景色
|
||||
rangeBgColor: {
|
||||
type: String,
|
||||
default: 'rgba(41,121,255,0.13)'
|
||||
},
|
||||
// 范围内日期字体颜色
|
||||
rangeColor: {
|
||||
type: String,
|
||||
default: '#4271B9'
|
||||
},
|
||||
// mode=range时生效，起始日期自定义文案
|
||||
startText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
// mode=range时生效，结束日期自定义文案
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
},
|
||||
//按钮样式类型
|
||||
btnType: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
// 当前选中日期带选中效果
|
||||
isActiveCurrent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 切换年月是否触发事件 mode=date时生效
|
||||
isChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示右上角的关闭图标
|
||||
closeable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 顶部的提示文字
|
||||
toolTip: {
|
||||
type: String,
|
||||
default: '选择日期'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 星期几,值为1-7
|
||||
weekday: 1,
|
||||
weekdayArr: [],
|
||||
// 当前月有多少天
|
||||
days: 0,
|
||||
daysArr: [],
|
||||
showTitle: '',
|
||||
year: 2020,
|
||||
month: 0,
|
||||
day: 0,
|
||||
startYear: 0,
|
||||
startMonth: 0,
|
||||
startDay: 0,
|
||||
endYear: 0,
|
||||
endMonth: 0,
|
||||
endDay: 0,
|
||||
today: '',
|
||||
activeDate: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
isStart: true,
|
||||
min: null,
|
||||
max: null,
|
||||
weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dataChange() {
|
||||
return `${this.mode}-${this.minDate}-${this.maxDate}`;
|
||||
},
|
||||
uZIndex() {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataChange(val) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
getColor(index, type) {
|
||||
let color = type == 1 ? '' : this.color;
|
||||
let day = index + 1
|
||||
let date = `${this.year}-${this.month}-${day}`
|
||||
let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
|
||||
let start = this.startDate.replace(/\-/g, '/')
|
||||
let end = this.endDate.replace(/\-/g, '/')
|
||||
if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
|
||||
color = type == 1 ? this.activeBgColor : this.activeColor;
|
||||
} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
|
||||
color = type == 1 ? this.rangeBgColor : this.rangeColor;
|
||||
}
|
||||
return color;
|
||||
},
|
||||
init() {
|
||||
let now = new Date();
|
||||
this.year = now.getFullYear();
|
||||
this.month = now.getMonth() + 1;
|
||||
this.day = now.getDate();
|
||||
this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
|
||||
this.activeDate = this.today;
|
||||
this.min = this.initDate(this.minDate);
|
||||
this.max = this.initDate(this.maxDate || this.today);
|
||||
this.startDate = "";
|
||||
this.startYear = 0;
|
||||
this.startMonth = 0;
|
||||
this.startDay = 0;
|
||||
this.endYear = 0;
|
||||
this.endMonth = 0;
|
||||
this.endDay = 0;
|
||||
this.endDate = "";
|
||||
this.isStart = true;
|
||||
this.changeData();
|
||||
},
|
||||
//日期处理
|
||||
initDate(date) {
|
||||
let fdate = date.split('-');
|
||||
return {
|
||||
year: Number(fdate[0] || 1920),
|
||||
month: Number(fdate[1] || 1),
|
||||
day: Number(fdate[2] || 1)
|
||||
}
|
||||
},
|
||||
openDisAbled: function(year, month, day) {
|
||||
let bool = true;
|
||||
let date = `${year}/${month}/${day}`;
|
||||
// let today = this.today.replace(/\-/g, '/');
|
||||
let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
|
||||
let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
|
||||
let timestamp = new Date(date).getTime();
|
||||
if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
|
||||
bool = false;
|
||||
}
|
||||
return bool;
|
||||
},
|
||||
generateArray: function(start, end) {
|
||||
return Array.from(new Array(end + 1).keys()).slice(start);
|
||||
},
|
||||
formatNum: function(num) {
|
||||
return num < 10 ? '0' + num : num + '';
|
||||
},
|
||||
//一个月有多少天
|
||||
getMonthDay(year, month) {
|
||||
let days = new Date(year, month, 0).getDate();
|
||||
return days;
|
||||
},
|
||||
getWeekday(year, month) {
|
||||
let date = new Date(`${year}/${month}/01 00:00:00`);
|
||||
return date.getDay();
|
||||
},
|
||||
checkRange(year) {
|
||||
let overstep = false;
|
||||
if (year < this.minYear || year > this.maxYear) {
|
||||
uni.showToast({
|
||||
title: "日期超出范围啦~",
|
||||
icon: 'none'
|
||||
})
|
||||
overstep = true;
|
||||
}
|
||||
return overstep;
|
||||
},
|
||||
changeMonthHandler(isAdd) {
|
||||
if (isAdd) {
|
||||
let month = this.month + 1;
|
||||
let year = month > 12 ? this.year + 1 : this.year;
|
||||
if (!this.checkRange(year)) {
|
||||
this.month = month > 12 ? 1 : month;
|
||||
this.year = year;
|
||||
this.changeData();
|
||||
}
|
||||
|
||||
} else {
|
||||
let month = this.month - 1;
|
||||
let year = month < 1 ? this.year - 1 : this.year;
|
||||
if (!this.checkRange(year)) {
|
||||
this.month = month < 1 ? 12 : month;
|
||||
this.year = year;
|
||||
this.changeData();
|
||||
}
|
||||
}
|
||||
},
|
||||
changeYearHandler(isAdd) {
|
||||
let year = isAdd ? this.year + 1 : this.year - 1;
|
||||
if (!this.checkRange(year)) {
|
||||
this.year = year;
|
||||
this.changeData();
|
||||
}
|
||||
},
|
||||
changeData() {
|
||||
this.days = this.getMonthDay(this.year, this.month);
|
||||
this.daysArr = this.generateArray(1, this.days)
|
||||
this.weekday = this.getWeekday(this.year, this.month);
|
||||
this.weekdayArr = this.generateArray(1, this.weekday)
|
||||
this.showTitle = `${this.year}年${this.month}月`;
|
||||
if (this.isChange && this.mode == 'date') {
|
||||
this.btnFix(true);
|
||||
}
|
||||
},
|
||||
dateClick: function(day) {
|
||||
day += 1;
|
||||
if (!this.openDisAbled(this.year, this.month, day)) {
|
||||
this.day = day;
|
||||
let date = `${this.year}-${this.month}-${day}`;
|
||||
if (this.mode == 'date') {
|
||||
this.activeDate = date;
|
||||
} else {
|
||||
let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(
|
||||
/\-/g, '/')).getTime()
|
||||
if (this.isStart || compare) {
|
||||
this.startDate = date;
|
||||
this.startYear = this.year;
|
||||
this.startMonth = this.month;
|
||||
this.startDay = this.day;
|
||||
this.endYear = 0;
|
||||
this.endMonth = 0;
|
||||
this.endDay = 0;
|
||||
this.endDate = "";
|
||||
this.activeDate = "";
|
||||
this.isStart = false;
|
||||
} else {
|
||||
this.endDate = date;
|
||||
this.endYear = this.year;
|
||||
this.endMonth = this.month;
|
||||
this.endDay = this.day;
|
||||
this.isStart = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
close() {
|
||||
// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
|
||||
this.$emit('input', false);
|
||||
},
|
||||
getWeekText(date) {
|
||||
date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
|
||||
let week = date.getDay();
|
||||
return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
|
||||
},
|
||||
btnFix(show) {
|
||||
if (!show) {
|
||||
this.close();
|
||||
}
|
||||
if (this.mode == 'date') {
|
||||
let arr = this.activeDate.split('-')
|
||||
let year = this.isChange ? this.year : Number(arr[0]);
|
||||
let month = this.isChange ? this.month : Number(arr[1]);
|
||||
let day = this.isChange ? this.day : Number(arr[2]);
|
||||
//当前月有多少天
|
||||
let days = this.getMonthDay(year, month);
|
||||
let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
|
||||
let weekText = this.getWeekText(result);
|
||||
let isToday = false;
|
||||
if (`${year}-${month}-${day}` == this.today) {
|
||||
//今天
|
||||
isToday = true;
|
||||
}
|
||||
this.$emit('change', {
|
||||
year: year,
|
||||
month: month,
|
||||
day: day,
|
||||
days: days,
|
||||
result: result,
|
||||
week: weekText,
|
||||
isToday: isToday,
|
||||
// switch: show //是否是切换年月操作
|
||||
});
|
||||
} else {
|
||||
if (!this.startDate || !this.endDate) return;
|
||||
let startMonth = this.formatNum(this.startMonth);
|
||||
let startDay = this.formatNum(this.startDay);
|
||||
let startDate = `${this.startYear}-${startMonth}-${startDay}`;
|
||||
let startWeek = this.getWeekText(startDate)
|
||||
|
||||
let endMonth = this.formatNum(this.endMonth);
|
||||
let endDay = this.formatNum(this.endDay);
|
||||
let endDate = `${this.endYear}-${endMonth}-${endDay}`;
|
||||
let endWeek = this.getWeekText(endDate);
|
||||
this.$emit('change', {
|
||||
startYear: this.startYear,
|
||||
startMonth: this.startMonth,
|
||||
startDay: this.startDay,
|
||||
startDate: startDate,
|
||||
startWeek: startWeek,
|
||||
endYear: this.endYear,
|
||||
endMonth: this.endMonth,
|
||||
endDay: this.endDay,
|
||||
endDate: endDate,
|
||||
endWeek: endWeek
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
|
||||
@mixin vue-flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.u-calendar {
|
||||
color: $u-content-color;
|
||||
// transform: scale(0.8);
|
||||
// width: 100%;
|
||||
// height: 800rpx;
|
||||
.btn {
|
||||
width: 496rpx;
|
||||
height: 70rpx;
|
||||
background: #4271B9;
|
||||
border-radius: 5rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
background-color: #fff;
|
||||
color: $u-main-color;
|
||||
|
||||
&__text {
|
||||
margin-top: 30rpx;
|
||||
padding: 0 60rpx;
|
||||
@include vue-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
padding: 40rpx 0 40rpx 0;
|
||||
|
||||
&__icon {
|
||||
margin: 0 16rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding: 0 16rpx;
|
||||
color: $u-main-color;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&__week-day {
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
|
||||
&__text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
@include vue-flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
&--end-date {
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
|
||||
&--start-date {
|
||||
border-top-left-radius: 8rpx;
|
||||
border-bottom-left-radius: 8rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 14.2857%;
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&__inner {
|
||||
height: 84rpx;
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
&__desc {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
transform: scale(0.75);
|
||||
transform-origin: center center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
bottom: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__tips {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: scale(0.8);
|
||||
transform-origin: center center;
|
||||
text-align: center;
|
||||
bottom: 8rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__bg-month {
|
||||
position: absolute;
|
||||
font-size: 130px;
|
||||
line-height: 130px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #e4e7ed;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
width: 100%;
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
padding: 0 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
color: $u-tips-color;
|
||||
|
||||
&__choose {
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
695
pages/upicker/u-picker.vue
Normal file
695
pages/upicker/u-picker.vue
Normal file
@ -0,0 +1,695 @@
|
||||
<template>
|
||||
<!-- <u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
|
||||
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex"> -->
|
||||
<view class="u-datetime-picker">
|
||||
<!-- <view class="u-picker-header" @touchmove.stop.prevent="">
|
||||
<view class="u-btn-picker u-btn-picker--tips" :style="{ color: cancelColor }" hover-class="u-opacity"
|
||||
:hover-stay-time="150" @tap="getResult('cancel')">{{cancelText}}</view>
|
||||
<view class="u-picker__title">{{ title }}</view>
|
||||
<view class="u-btn-picker u-btn-picker--primary" :style="{ color: moving ? cancelColor : confirmColor }"
|
||||
hover-class="u-opacity" :hover-stay-time="150" @touchmove.stop="" @tap.stop="getResult('confirm')">
|
||||
{{confirmText}}
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="u-picker-body">
|
||||
<picker-view v-if="mode == 'region'" :value="valueArr" @change="change" class="u-picker-view"
|
||||
@pickstart="pickstart" @pickend="pickend">
|
||||
<picker-view-column v-if="!reset && params.province">
|
||||
<view class="u-column-item" v-for="(item, index) in provinces" :key="index">
|
||||
<view class="u-line-1">{{ item.label }}</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.city">
|
||||
<view class="u-column-item" v-for="(item, index) in citys" :key="index">
|
||||
<view class="u-line-1">{{ item.label }}</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.area">
|
||||
<view class="u-column-item" v-for="(item, index) in areas" :key="index">
|
||||
<view class="u-line-1">{{ item.label }}</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-else-if="mode == 'time'" :value="valueArr" @change="change" class="u-picker-view"
|
||||
@pickstart="pickstart" @pickend="pickend">
|
||||
<picker-view-column v-if="!reset && params.year">
|
||||
<view class="u-column-item" v-for="(item, index) in years" :key="index">
|
||||
{{ item }}
|
||||
<text class="u-text" v-if="showTimeTag">年</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.month">
|
||||
<view class="u-column-item" v-for="(item, index) in months" :key="index">
|
||||
{{ formatNumber(item) }}
|
||||
<text class="u-text" v-if="showTimeTag">月</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.day">
|
||||
<view class="u-column-item" v-for="(item, index) in days" :key="index">
|
||||
{{ formatNumber(item) }}
|
||||
<text class="u-text" v-if="showTimeTag">日</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.hour">
|
||||
<view class="u-column-item" v-for="(item, index) in hours" :key="index">
|
||||
{{ formatNumber(item) }}
|
||||
<text class="u-text" v-if="showTimeTag">时</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.minute">
|
||||
<view class="u-column-item" v-for="(item, index) in minutes" :key="index">
|
||||
{{ formatNumber(item) }}
|
||||
<text class="u-text" v-if="showTimeTag">分</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && params.second">
|
||||
<view class="u-column-item" v-for="(item, index) in seconds" :key="index">
|
||||
{{ formatNumber(item) }}
|
||||
<text class="u-text" v-if="showTimeTag">秒</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-else-if="mode == 'selector'" :value="valueArr" @change="change" class="u-picker-view"
|
||||
@pickstart="pickstart" @pickend="pickend">
|
||||
<picker-view-column v-if="!reset">
|
||||
<view class="u-column-item" v-for="(item, index) in range" :key="index">
|
||||
<view class="u-line-1">{{ getItemValue(item, 'selector') }}</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<picker-view v-else-if="mode == 'multiSelector'" :value="valueArr" @change="change" class="u-picker-view"
|
||||
@pickstart="pickstart" @pickend="pickend">
|
||||
<picker-view-column v-if="!reset" v-for="(item, index) in range" :key="index">
|
||||
<view class="u-column-item" v-for="(item1, index1) in item" :key="index1">
|
||||
<view class="u-line-1">{{ getItemValue(item1, 'multiSelector') }}</view>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view class="btn" @tap="getResult('confirm')">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </u-popup> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import provinces from '../../libs/util/province.js';
|
||||
// import citys from '../../libs/util/city.js';
|
||||
// import areas from '../../libs/util/area.js';
|
||||
|
||||
/**
|
||||
* picker picker弹出选择器
|
||||
* @description 此选择器有两种弹出模式：一是时间模式，可以配置年，日，月，时，分，秒参数 二是地区模式，可以配置省，市，区参数
|
||||
* @tutorial https://www.uviewui.com/components/picker.html
|
||||
* @property {Object} params 需要显示的参数，见官网说明
|
||||
* @property {String} mode 模式选择，region-地区类型，time-时间类型（默认time）
|
||||
* @property {String Number} start-year 可选的开始年份，mode=time时有效（默认1950）
|
||||
* @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050）
|
||||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
|
||||
* @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
|
||||
* @property {String} cancel-color 取消按钮的颜色（默认#606266）
|
||||
* @property {String} confirm-color 确认按钮的颜色（默认#2979ff）
|
||||
* @property {String} default-time 默认选中的时间，mode=time时有效
|
||||
* @property {String} confirm-text 确认按钮的文字
|
||||
* @property {String} cancel-text 取消按钮的文字
|
||||
* @property {String} default-region 默认选中的地区，中文形式，mode=region时有效
|
||||
* @property {String} default-code 默认选中的地区，编号形式，mode=region时有效
|
||||
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
|
||||
* @property {String Number} z-index 弹出时的z-index值（默认1075）
|
||||
* @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
|
||||
* @property {Array} range 自定义选择的数据，mode=selector或mode=multiSelector时有效
|
||||
* @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
* @event {Function} cancel 点击取消按钮，返回当前选择的值
|
||||
* @example <u-picker v-model="show" mode="time"></u-picker>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-picker',
|
||||
props: {
|
||||
// picker中需要显示的参数
|
||||
params: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
province: true,
|
||||
city: true,
|
||||
area: true,
|
||||
timestamp: true,
|
||||
};
|
||||
}
|
||||
},
|
||||
// 当mode=selector或者mode=multiSelector时，提供的数组
|
||||
range: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
|
||||
defaultSelector: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [0];
|
||||
}
|
||||
},
|
||||
// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
|
||||
rangeKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'time'
|
||||
},
|
||||
// 年份开始时间
|
||||
startYear: {
|
||||
type: [String, Number],
|
||||
default: 1950
|
||||
},
|
||||
// 年份结束时间
|
||||
endYear: {
|
||||
type: [String, Number],
|
||||
default: 2050
|
||||
},
|
||||
// "取消"按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#606266'
|
||||
},
|
||||
// "确定"按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
|
||||
defaultTime: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
|
||||
defaultRegion: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// 时间模式时，是否显示后面的年月日中文提示
|
||||
showTimeTag: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
|
||||
areaCode: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否允许通过点击遮罩关闭Picker
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 通过双向绑定控制组件的弹出与收起
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 弹出的z-index值
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: [],
|
||||
months: [],
|
||||
days: [],
|
||||
hours: [],
|
||||
minutes: [],
|
||||
seconds: [],
|
||||
year: 0,
|
||||
month: 0,
|
||||
day: 0,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
reset: false,
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
valueArr: [],
|
||||
// provinces: provinces,
|
||||
// citys: citys[0],
|
||||
// areas: areas[0][0],
|
||||
province: 0,
|
||||
city: 0,
|
||||
area: 0,
|
||||
moving: false // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
propsChange() {
|
||||
// 引用这几个变量，是为了监听其变化
|
||||
return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${this.defaultRegion}-${this.areaCode}`;
|
||||
},
|
||||
regionChange() {
|
||||
// 引用这几个变量，是为了监听其变化
|
||||
return `${this.province}-${this.city}`;
|
||||
},
|
||||
yearAndMonth() {
|
||||
return `${this.year}-${this.month}`;
|
||||
},
|
||||
uZIndex() {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
propsChange() {
|
||||
this.reset = true;
|
||||
setTimeout(() => this.init(), 10);
|
||||
},
|
||||
// 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
|
||||
regionChange(val) {
|
||||
this.citys = citys[this.province];
|
||||
this.areas = areas[this.province][this.city];
|
||||
},
|
||||
// watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样
|
||||
// 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
|
||||
yearAndMonth(val) {
|
||||
if (this.params.year) this.setDays();
|
||||
},
|
||||
// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
|
||||
value(n) {
|
||||
if (n) {
|
||||
this.reset = true;
|
||||
setTimeout(() => this.init(), 10);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 标识滑动开始，只有微信小程序才有这样的事件
|
||||
pickstart() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.moving = true;
|
||||
// #endif
|
||||
},
|
||||
// 标识滑动结束
|
||||
pickend() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.moving = false;
|
||||
// #endif
|
||||
},
|
||||
// 对单列和多列形式的判断是否有传入变量的情况
|
||||
getItemValue(item, mode) {
|
||||
// 目前(2020-05-25)uni-app对微信小程序编译有错误，导致v-if为false中的内容也执行，错误导致
|
||||
// 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
|
||||
if (this.mode == mode) {
|
||||
return typeof item == 'object' ? item[this.rangeKey] : item;
|
||||
}
|
||||
},
|
||||
// 小于10前面补0，用于月份，日期，时分秒等
|
||||
formatNumber(num) {
|
||||
return +num < 10 ? '0' + num : String(num);
|
||||
},
|
||||
// 生成递进的数组
|
||||
generateArray: function(start, end) {
|
||||
// 转为数值格式，否则用户给end-year等传递字符串值时，下面的end+1会导致字符串拼接，而不是相加
|
||||
start = Number(start);
|
||||
end = Number(end);
|
||||
end = end > start ? end : start;
|
||||
// 生成数组，获取其中的索引，并剪出来
|
||||
return [...Array(end + 1).keys()].slice(start);
|
||||
},
|
||||
getIndex: function(arr, val) {
|
||||
let index = arr.indexOf(val);
|
||||
// 如果index为-1(即找不到index值)，~(-1)=-(-1)-1=0，导致条件不成立
|
||||
return ~index ? index : 0;
|
||||
},
|
||||
//日期时间处理
|
||||
initTimeValue() {
|
||||
// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
|
||||
let fdate = this.defaultTime.replace(/\-/g, '/');
|
||||
fdate = fdate && fdate.indexOf('/') == -1 ? `2020/01/01 ${fdate}` : fdate;
|
||||
let time = null;
|
||||
if (fdate) time = new Date(fdate);
|
||||
else time = new Date();
|
||||
// 获取年日月时分秒
|
||||
this.year = time.getFullYear();
|
||||
this.month = Number(time.getMonth()) + 1;
|
||||
this.day = time.getDate();
|
||||
this.hour = time.getHours();
|
||||
this.minute = time.getMinutes();
|
||||
this.second = time.getSeconds();
|
||||
},
|
||||
init() {
|
||||
this.valueArr = [];
|
||||
this.reset = false;
|
||||
if (this.mode == 'time') {
|
||||
this.initTimeValue();
|
||||
if (this.params.year) {
|
||||
this.valueArr.push(0);
|
||||
this.setYears();
|
||||
}
|
||||
if (this.params.month) {
|
||||
this.valueArr.push(0);
|
||||
this.setMonths();
|
||||
}
|
||||
if (this.params.day) {
|
||||
this.valueArr.push(0);
|
||||
this.setDays();
|
||||
}
|
||||
if (this.params.hour) {
|
||||
this.valueArr.push(0);
|
||||
this.setHours();
|
||||
}
|
||||
if (this.params.minute) {
|
||||
this.valueArr.push(0);
|
||||
this.setMinutes();
|
||||
}
|
||||
if (this.params.second) {
|
||||
this.valueArr.push(0);
|
||||
this.setSeconds();
|
||||
}
|
||||
} else if (this.mode == 'region') {
|
||||
if (this.params.province) {
|
||||
this.valueArr.push(0);
|
||||
this.setProvinces();
|
||||
}
|
||||
if (this.params.city) {
|
||||
this.valueArr.push(0);
|
||||
this.setCitys();
|
||||
}
|
||||
if (this.params.area) {
|
||||
this.valueArr.push(0);
|
||||
this.setAreas();
|
||||
}
|
||||
} else if (this.mode == 'selector') {
|
||||
this.valueArr = this.defaultSelector;
|
||||
} else if (this.mode == 'multiSelector') {
|
||||
this.valueArr = this.defaultSelector;
|
||||
this.multiSelectorValue = this.defaultSelector;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 设置picker的某一列值
|
||||
setYears() {
|
||||
// 获取年份集合
|
||||
this.years = this.generateArray(this.startYear, this.endYear);
|
||||
// 设置this.valueArr某一项的值，是为了让picker预选中某一个值
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
|
||||
},
|
||||
setMonths() {
|
||||
this.months = this.generateArray(1, 12);
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
|
||||
},
|
||||
setDays() {
|
||||
let totalDays = new Date(this.year, this.month, 0).getDate();
|
||||
this.days = this.generateArray(1, totalDays);
|
||||
let index = 0;
|
||||
// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
|
||||
// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误
|
||||
if (this.params.year && this.params.month) index = 2;
|
||||
else if (this.params.month) index = 1;
|
||||
else if (this.params.year) index = 1;
|
||||
else index = 0;
|
||||
// 当月份变化时，会导致日期的天数也会变化，如果原来选的天数大于变化后的天数，则重置为变化后的最大值
|
||||
// 比如原来选中3月31日，调整为2月后，日期变为最大29，这时如果day值继续为31显然不合理，于是将其置为29(picker-column从1开始)
|
||||
if (this.day > this.days.length) this.day = this.days.length;
|
||||
this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
|
||||
},
|
||||
setHours() {
|
||||
this.hours = this.generateArray(0, 23);
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
|
||||
},
|
||||
setMinutes() {
|
||||
this.minutes = this.generateArray(0, 59);
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
|
||||
},
|
||||
setSeconds() {
|
||||
this.seconds = this.generateArray(0, 59);
|
||||
this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second));
|
||||
},
|
||||
setProvinces() {
|
||||
// 判断是否需要province参数
|
||||
if (!this.params.province) return;
|
||||
let tmp = '';
|
||||
let useCode = false;
|
||||
// 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
|
||||
if (this.areaCode.length) {
|
||||
tmp = this.areaCode[0];
|
||||
useCode = true;
|
||||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[0];
|
||||
else tmp = 0;
|
||||
// 历遍省份数组匹配
|
||||
provinces.map((v, k) => {
|
||||
if (useCode ? v.value == tmp : v.label == tmp) {
|
||||
tmp = k;
|
||||
}
|
||||
});
|
||||
this.province = tmp;
|
||||
this.provinces = provinces;
|
||||
// 设置默认省份的值
|
||||
this.valueArr.splice(0, 1, this.province);
|
||||
},
|
||||
setCitys() {
|
||||
if (!this.params.city) return;
|
||||
let tmp = '';
|
||||
let useCode = false;
|
||||
if (this.areaCode.length) {
|
||||
tmp = this.areaCode[1];
|
||||
useCode = true;
|
||||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[1];
|
||||
else tmp = 0;
|
||||
citys[this.province].map((v, k) => {
|
||||
if (useCode ? v.value == tmp : v.label == tmp) {
|
||||
tmp = k;
|
||||
}
|
||||
});
|
||||
this.city = tmp;
|
||||
this.citys = citys[this.province];
|
||||
this.valueArr.splice(1, 1, this.city);
|
||||
},
|
||||
setAreas() {
|
||||
if (!this.params.area) return;
|
||||
let tmp = '';
|
||||
let useCode = false;
|
||||
if (this.areaCode.length) {
|
||||
tmp = this.areaCode[2];
|
||||
useCode = true;
|
||||
} else if (this.defaultRegion.length) tmp = this.defaultRegion[2];
|
||||
else tmp = 0;
|
||||
areas[this.province][this.city].map((v, k) => {
|
||||
if (useCode ? v.value == tmp : v.label == tmp) {
|
||||
tmp = k;
|
||||
}
|
||||
});
|
||||
this.area = tmp;
|
||||
this.areas = areas[this.province][this.city];
|
||||
this.valueArr.splice(2, 1, this.area);
|
||||
},
|
||||
close() {
|
||||
this.$emit('input', false);
|
||||
},
|
||||
// 用户更改picker的列选项
|
||||
change(e) {
|
||||
this.valueArr = e.detail.value;
|
||||
let i = 0;
|
||||
if (this.mode == 'time') {
|
||||
// 这里使用i++，是因为this.valueArr数组的长度是不确定长度的，它根据this.params的值来配置长度
|
||||
// 进入if规则，i会加1，保证了能获取准确的值
|
||||
if (this.params.year) this.year = this.years[this.valueArr[i++]];
|
||||
if (this.params.month) this.month = this.months[this.valueArr[i++]];
|
||||
if (this.params.day) this.day = this.days[this.valueArr[i++]];
|
||||
if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
|
||||
if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
|
||||
if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
|
||||
} else if (this.mode == 'region') {
|
||||
if (this.params.province) this.province = this.valueArr[i++];
|
||||
if (this.params.city) this.city = this.valueArr[i++];
|
||||
if (this.params.area) this.area = this.valueArr[i++];
|
||||
} else if (this.mode == 'multiSelector') {
|
||||
let index = null;
|
||||
// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
|
||||
this.defaultSelector.map((val, idx) => {
|
||||
if (val != e.detail.value[idx]) index = idx;
|
||||
});
|
||||
// 为了让用户对多列变化时，对动态设置其他列的变更
|
||||
if (index != null) {
|
||||
this.$emit('columnchange', {
|
||||
column: index,
|
||||
index: e.detail.value[index]
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
// 用户点击确定按钮
|
||||
getResult(event = null) {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.moving) return;
|
||||
// #endif
|
||||
let result = {};
|
||||
// 只返回用户在this.params中配置了为true的字段
|
||||
if (this.mode == 'time') {
|
||||
if (this.params.year) result.year = this.formatNumber(this.year || 0);
|
||||
if (this.params.month) result.month = this.formatNumber(this.month || 0);
|
||||
if (this.params.day) result.day = this.formatNumber(this.day || 0);
|
||||
if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
|
||||
if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
|
||||
if (this.params.second) result.second = this.formatNumber(this.second || 0);
|
||||
if (this.params.timestamp) result.timestamp = this.getTimestamp();
|
||||
} else if (this.mode == 'region') {
|
||||
if (this.params.province) result.province = provinces[this.province];
|
||||
if (this.params.city) result.city = citys[this.province][this.city];
|
||||
if (this.params.area) result.area = areas[this.province][this.city][this.area];
|
||||
} else if (this.mode == 'selector') {
|
||||
result = this.valueArr;
|
||||
} else if (this.mode == 'multiSelector') {
|
||||
result = this.valueArr;
|
||||
}
|
||||
if (event) this.$emit(event, result);
|
||||
this.close();
|
||||
},
|
||||
// 获取时间戳
|
||||
getTimestamp() {
|
||||
// yyyy-mm-dd为安卓写法，不支持iOS，需要使用"/"分隔，才能二者兼容
|
||||
let time = this.year + '/' + this.month + '/' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this
|
||||
.second;
|
||||
return new Date(time).getTime() / 1000;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
|
||||
@mixin vue-flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 496rpx;
|
||||
height: 70rpx;
|
||||
background: #4271B9;
|
||||
border-radius: 5rpx;
|
||||
margin: 90rpx auto;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.u-datetime-picker {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.u-picker-view {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-picker-header {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
padding: 0 40rpx;
|
||||
@include vue-flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.u-picker-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.u-picker__title {
|
||||
color: $u-content-color;
|
||||
}
|
||||
|
||||
.u-picker-body {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
// overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.u-column-item {
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 34rpx;
|
||||
color: $u-main-color;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.u-text {
|
||||
font-size: 24rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.u-btn-picker {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.u-opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.u-btn-picker--primary {
|
||||
color: $u-type-primary;
|
||||
}
|
||||
|
||||
.u-btn-picker--tips {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
</style>
|
||||
48
pages/v-sign/changelog.md
Normal file
48
pages/v-sign/changelog.md
Normal file
@ -0,0 +1,48 @@
|
||||
## 0.5.2（2022-06-10）
|
||||
- canvas 默认设置 disable-scroll 属性为true, 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
|
||||
## 0.5.1（2022-05-27）
|
||||
- 取消属性 width, height 默认值
|
||||
## 0.5.0（2022-05-27）
|
||||
- 新增 v-sgin 组件获取坐标信息数组方法 `getLineData`
|
||||
- 新增 v-sign 组件事件触发 @clear, @revoke, @end
|
||||
- 修复撤销操作重设背景色导致线条消失问题
|
||||
## 0.4.0（2022-05-15）
|
||||
- 新增属性 bgColor 设置画布背景色，修复导出图片无背景色问题
|
||||
## 0.3.4（2022-03-30）
|
||||
修复 v-sign-action 子组件 svg 加载报错
|
||||
## 0.3.3（2022-03-30）
|
||||
修复 v-sign-action 子组件 svg 加载报错
|
||||
## 0.3.2（2022-01-12）
|
||||
- 修复多组件共存绘制问题
|
||||
## 0.3.1（2021-12-14）
|
||||
- 【新增】保存 png 图片方法 saveImage;
|
||||
- 【修改】 控件子组件保存按钮动作由保存为临时文件路径改为保存图片
|
||||
## 0.3.0（2021-12-11）
|
||||
- 添加颜色选择器组件
|
||||
## 0.2.0（2021-12-10）
|
||||
- 修改为 uni_modules 规范
|
||||
## 0.1.7 (2021-12-09)
|
||||
|
||||
- 画笔组件优化
|
||||
|
||||
## 0.1.6 (2021-12-08)
|
||||
|
||||
- 画笔样式优化
|
||||
|
||||
## 0.1.5 (2021-12-08)
|
||||
|
||||
- 画笔子组件样式修改，支持circle、line 两种样式
|
||||
|
||||
## 0.1.4 (2021-12-08)
|
||||
|
||||
- 添加画笔子组件
|
||||
|
||||
## 0.1.3 (2021-12-02)
|
||||
|
||||
- 添加按钮控件子组件
|
||||
|
||||
## 0.1.0 (2021-11-28)
|
||||
|
||||
- 支持线宽、颜色自定义，自定义画布样式
|
||||
- 支持画布清空、撤回、保存图片
|
||||
- 事件 init 暴露清空、撤回、保存图片方法
|
||||
165
pages/v-sign/components/v-sign-action/v-sign-action.vue
Normal file
165
pages/v-sign/components/v-sign-action/v-sign-action.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<view class="v-sign-action" :style="[customStyle]">
|
||||
<view
|
||||
v-for="item in btns"
|
||||
:key="item.label"
|
||||
:class="['btn', { border: border }]"
|
||||
:style="[{ 'margin-right': formatSize(space) }]"
|
||||
@click="onBtnClick(item)"
|
||||
>
|
||||
<image v-if="item.icon" :class="['icon', 'icon-' + item.action]" :src="item.icon"></image>
|
||||
<text class="text">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* v-sign-action 控制按钮组（v-sign 子组件）
|
||||
* @description 控制 v-sign 组件的一些按钮
|
||||
* @tutorial
|
||||
* @property {Array} actions 按钮配置 所有值： 清空（clear）, 撤回（prev） 保存图片（save）
|
||||
* @property {Boolean} border 按钮是否有边框
|
||||
* @property {String/Number} space 按钮间隔
|
||||
* @property {Object} customStyle 根元素自定义样式
|
||||
* @event {Function} 点击对应类型按钮触发对应事件， 例如点击 clear 则触发 clear 事件
|
||||
* @example 示例
|
||||
**/
|
||||
import { formatSize } from '../../utils'
|
||||
|
||||
// v-sign 父组件提供的接口
|
||||
let vSignInterface
|
||||
// 按钮类型
|
||||
const btn_type = {
|
||||
CLEAR: 'clear', // 清空
|
||||
PREV: 'prev', // 撤回/上一步
|
||||
// NEXT: 'next',
|
||||
SAVE: 'save' // 保存临时图片
|
||||
}
|
||||
const all_action = Object.values(btn_type)
|
||||
const btnsConf = [
|
||||
{
|
||||
label: '清空',
|
||||
action: btn_type.CLEAR,
|
||||
icon: require('../../static/image/clear.svg')
|
||||
},
|
||||
{
|
||||
label: '撤回',
|
||||
action: btn_type.PREV,
|
||||
icon: require('../../static/image/prev.svg')
|
||||
},
|
||||
// {
|
||||
// label: '取消撤回',
|
||||
// action: btn_type.NEXT,
|
||||
// icon: '/uni_modules/v-sign/static/image/next.svg'
|
||||
// },
|
||||
{
|
||||
label: '保存',
|
||||
action: btn_type.SAVE,
|
||||
icon: require('../../static/image/save.svg')
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'v-sign-action',
|
||||
props: {
|
||||
// 按钮配置
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => all_action
|
||||
},
|
||||
// 按钮是否有边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 按钮间隔
|
||||
space: {
|
||||
type: [String, Number],
|
||||
default: 12
|
||||
},
|
||||
// 根元素自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
inject: ['getSignInterface'],
|
||||
data() {
|
||||
return {
|
||||
formatSize
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
btns() {
|
||||
return btnsConf.filter(item => this.actions.includes(item.action))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
vSignInterface = this.getSignInterface()
|
||||
},
|
||||
methods: {
|
||||
async onBtnClick(btn) {
|
||||
let emit_result
|
||||
switch (btn.action) {
|
||||
case btn_type.CLEAR:
|
||||
vSignInterface.clear()
|
||||
break
|
||||
case btn_type.PREV:
|
||||
vSignInterface.revoke()
|
||||
break
|
||||
// case btn_type.NEXT:
|
||||
// console.log('next')
|
||||
// break
|
||||
case btn_type.SAVE:
|
||||
emit_result = await vSignInterface.saveImage()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
// console.log(btn.action, emit_result);
|
||||
// 触发按钮对应类型事件
|
||||
this.$emit(btn.action, emit_result)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-sign-action {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12rpx;
|
||||
min-width: 88rpx;
|
||||
white-space: nowrap;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:active {
|
||||
transition: transform 0.3s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&.border {
|
||||
border: 2rpx solid #333;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
&.icon-clear,
|
||||
&.icon-prev,
|
||||
&.icon-next {
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
&.icon-save {
|
||||
}
|
||||
}
|
||||
.text {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
212
pages/v-sign/components/v-sign-color/v-sign-color.vue
Normal file
212
pages/v-sign/components/v-sign-color/v-sign-color.vue
Normal file
@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<view class="v-sign-color">
|
||||
<view class="options">
|
||||
<view
|
||||
class="option-item"
|
||||
v-for="(color, index) in options"
|
||||
:key="color"
|
||||
:style="[optionStyle(color, index)]"
|
||||
@click="onSelect(color, index)"
|
||||
>
|
||||
<view class="option-inner" :style="[optionInnerStyle(color, index)]">
|
||||
{{ tick && currentIndex === index ? '✓' : '' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* v-sign-color 颜色选择器（v-sign 子组件）
|
||||
* @description 设置 v-sign 画笔的颜色
|
||||
* @tutorial
|
||||
* @property {String} type 选项样式，可选 SQUARE \ CIRCLE
|
||||
* @property {String} color 默认颜色
|
||||
* @property {Array} options 备选色
|
||||
* @property {Number/String} size 圆/方形大小
|
||||
* @property {Boolean} tick 是否选中打勾
|
||||
* @property {Number/String} tickSize 勾大小
|
||||
* @property {String} borderColor 边框颜色
|
||||
* @property {Boolean} border 是否有边框
|
||||
* @property {Number/String} space 选项间隙
|
||||
* @event {Function} change 改变颜色时触发
|
||||
* @example 示例
|
||||
**/
|
||||
import { formatSize } from '../../utils'
|
||||
// 选项样式
|
||||
const type_style = {
|
||||
CIRCLE: 'circle',
|
||||
SQUARE: 'square'
|
||||
}
|
||||
// v-sign 父组件提供的接口
|
||||
let vSignInterface
|
||||
|
||||
export default {
|
||||
name: 'v-sign-color',
|
||||
props: {
|
||||
// 选项样式
|
||||
type: {
|
||||
type: String,
|
||||
default: type_style.SQUARE
|
||||
},
|
||||
// 默认色，需在备选中
|
||||
color: {
|
||||
type: String
|
||||
},
|
||||
// 备选色
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => ['#333', '#f44236', '#3f51b5', '#2195f3', '#ffeb3b', '#ff9900']
|
||||
},
|
||||
// 圆/方形大小
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 44
|
||||
},
|
||||
// 是否选中打勾
|
||||
tick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 勾大小
|
||||
tickSize: {
|
||||
type: [Number, String],
|
||||
default: 24
|
||||
},
|
||||
// 边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
// 是否有边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选项间隙
|
||||
space: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
}
|
||||
},
|
||||
inject: ['getSignInterface'],
|
||||
data() {
|
||||
return {
|
||||
formatSize,
|
||||
currentIndex: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
color: {
|
||||
handler(val) {
|
||||
if (!val) {
|
||||
this.currentIndex = 0
|
||||
return
|
||||
}
|
||||
const index = this.options.findIndex(item => item === this.color)
|
||||
if (index > 0) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentColor() {
|
||||
return this.options[this.currentIndex]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
vSignInterface = this.getSignInterface()
|
||||
this.setLineColor()
|
||||
},
|
||||
methods: {
|
||||
onSelect(color, index) {
|
||||
this.currentIndex = index
|
||||
this.$emit('change', color)
|
||||
this.setLineColor()
|
||||
},
|
||||
setLineColor() {
|
||||
vSignInterface.setLineColor(this.currentColor)
|
||||
},
|
||||
optionStyle(color, index) {
|
||||
const size = formatSize(this.size)
|
||||
let style = {
|
||||
marginRight: formatSize(this.space),
|
||||
width: size,
|
||||
height: size,
|
||||
lineHeight: size,
|
||||
border:
|
||||
this.border && this.currentIndex === index
|
||||
? `4rpx solid ${this.borderColor}`
|
||||
: '',
|
||||
padding: this.currentIndex === index ? 0 : this.border ? '4rpx' : ''
|
||||
}
|
||||
switch (this.type) {
|
||||
case type_style.SQUARE:
|
||||
style = {
|
||||
...style,
|
||||
borderRadius: this.currentIndex === index ? '8rpx' : 0
|
||||
}
|
||||
break
|
||||
case type_style.CIRCLE:
|
||||
style = {
|
||||
...style,
|
||||
borderRadius: '50%'
|
||||
}
|
||||
break
|
||||
}
|
||||
return style
|
||||
},
|
||||
optionInnerStyle(color, index) {
|
||||
let style = {
|
||||
background: color,
|
||||
fontSize: formatSize(this.tickSize)
|
||||
}
|
||||
switch (this.type) {
|
||||
case type_style.SQUARE:
|
||||
style = {
|
||||
...style,
|
||||
borderRadius: this.currentIndex === index ? 0 : '8rpx'
|
||||
}
|
||||
break
|
||||
case type_style.CIRCLE:
|
||||
style = {
|
||||
...style,
|
||||
borderRadius: '50%'
|
||||
}
|
||||
break
|
||||
}
|
||||
return style
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.options {
|
||||
padding: 8rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
overflow: hidden;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:active {
|
||||
transition: transform 0.3s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.option-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
215
pages/v-sign/components/v-sign-pen/v-sign-pen.vue
Normal file
215
pages/v-sign/components/v-sign-pen/v-sign-pen.vue
Normal file
@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="v-sign-pen">
|
||||
<view class="label" v-if="label">{{ label }}</view>
|
||||
<view class="options">
|
||||
<view
|
||||
class="opt-item"
|
||||
:style="{
|
||||
minHeight: minWrapHeight,
|
||||
marginRight: space + 'rpx'
|
||||
}"
|
||||
v-for="item in csizes"
|
||||
:key="item.size"
|
||||
@click="onItemClick(item)"
|
||||
>
|
||||
<view
|
||||
:class="type"
|
||||
:style="{
|
||||
border:
|
||||
border && currentSelect.size === item.size
|
||||
? `${borderWidth}rpx solid ${activeColor}`
|
||||
: ''
|
||||
}"
|
||||
>
|
||||
<view class="inner" :style="[defaultInnerStyle(item)]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* v-sign-pen 画笔（v-sign 子组件）
|
||||
* @description 设置 v-sign 画笔的线宽
|
||||
* @tutorial
|
||||
* @property {String} type 选项样式 line / circle
|
||||
* @property {String} label 标签
|
||||
* @property {Array} sizes 画笔大小数组，单位 px
|
||||
* @property {String} color 选项颜色
|
||||
* @property {String} activeColor 选中项颜色
|
||||
* @property {Boolean} border 选中项是否有边框
|
||||
* @property {Number} borderWidth 边框大小，单位 rpx
|
||||
* @property {String} space 选项间隙，单位 rpx
|
||||
* @property {Number} bigger 圆点变大变粗倍数
|
||||
* @property {Number} minSize 圆点最小大小，单位 px
|
||||
* @event {Function} change 选择画笔大小时触发
|
||||
* @example
|
||||
**/
|
||||
// v-sign 父组件提供的接口
|
||||
let vSignInterface
|
||||
// 选项样式
|
||||
const type_style = {
|
||||
CIRCLE: 'circle',
|
||||
LINE: 'line'
|
||||
}
|
||||
export default {
|
||||
name: 'v-sign-pen',
|
||||
props: {
|
||||
// 选项样式
|
||||
type: {
|
||||
type: String,
|
||||
default: type_style.CIRCLE
|
||||
},
|
||||
label: {
|
||||
type: String
|
||||
},
|
||||
// 画笔大小数组，单位是px
|
||||
sizes: {
|
||||
type: Array,
|
||||
default: () => [2, 4, 6, 8, 10]
|
||||
},
|
||||
// 选项颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
// 选中项颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
// 选中项是否有边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 边框大小, 单位 rpx
|
||||
borderWidth: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
// 选项间隙, 单位 rpx
|
||||
space: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
// 圆点变大变粗倍数
|
||||
bigger: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
// 圆点最小大小，单位 px
|
||||
minSize: {
|
||||
type: Number,
|
||||
default: 4
|
||||
}
|
||||
},
|
||||
inject: ['getSignInterface'],
|
||||
data() {
|
||||
return {
|
||||
type_style,
|
||||
currentSelect: null,
|
||||
csizes: [],
|
||||
maxSize: 0,
|
||||
maxCsize: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
minWrapHeight() {
|
||||
let height
|
||||
switch (this.type) {
|
||||
case type_style.CIRCLE:
|
||||
height = this.maxCsize + 10 + 'px'
|
||||
break
|
||||
case type_style.LINE:
|
||||
height = this.maxSize + 4 + 'px'
|
||||
break
|
||||
}
|
||||
return height
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.csizes = this.sizes.map((size, index) => {
|
||||
const csize = (index + 1) * this.bigger + this.minSize
|
||||
this.maxSize = csize > this.maxSize ? csize : this.maxSize
|
||||
this.maxCsize = csize > this.maxCsize ? csize : this.maxCsize
|
||||
return {
|
||||
size,
|
||||
csize
|
||||
}
|
||||
})
|
||||
this.currentSelect = this.csizes[0]
|
||||
},
|
||||
mounted() {
|
||||
vSignInterface = this.getSignInterface()
|
||||
this.setLineWidth()
|
||||
},
|
||||
methods: {
|
||||
onItemClick(opt) {
|
||||
this.currentSelect = opt
|
||||
this.setLineWidth()
|
||||
this.$emit('change', opt.size)
|
||||
},
|
||||
setLineWidth() {
|
||||
vSignInterface.setLineWidth(this.currentSelect.size)
|
||||
},
|
||||
defaultInnerStyle(item) {
|
||||
let width
|
||||
let height
|
||||
switch (this.type) {
|
||||
case type_style.CIRCLE:
|
||||
width = `${item.csize}px`
|
||||
height = `${item.csize}px`
|
||||
break
|
||||
case type_style.LINE:
|
||||
width = '20px'
|
||||
height = `${item.size}px`
|
||||
break
|
||||
}
|
||||
const background = this.currentSelect.size === item.size ? this.activeColor : this.color
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
background
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-sign-pen {
|
||||
padding: 12rpx;
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.opt-item {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:active {
|
||||
transition: transform 0.3s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
padding: 4rpx;
|
||||
.inner {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
padding: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
314
pages/v-sign/components/v-sign/v-sign.vue
Normal file
314
pages/v-sign/components/v-sign/v-sign.vue
Normal file
@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<view class="signature-wrap">
|
||||
<canvas
|
||||
:canvas-id="cid"
|
||||
:id="cid"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
disable-scroll
|
||||
style="width: 100%;height: 600rpx;"
|
||||
></canvas>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* sign canvas 手写签名
|
||||
* @description 设置线条宽度、颜色，撤回，清空
|
||||
* @tutorial
|
||||
* @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
|
||||
* @property {String, Number} width canvas 宽度
|
||||
* @property {String, Number} height canvas 高度
|
||||
* @property {bgColor} bgColor 画布背景颜色
|
||||
* @property {Object} customStyle canvas 自定义样式
|
||||
* @property {String} lineWidth 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小
|
||||
* @property {Number} lineColor 画笔颜色，权重小于 v-sign-pen 组件设置的画笔大小
|
||||
* @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
|
||||
* @example <v-sign @init="signInit"></v-sign>
|
||||
*/
|
||||
import { formatSize } from '../../utils'
|
||||
|
||||
export default {
|
||||
name: 'v-sign',
|
||||
props: {
|
||||
// canvas id
|
||||
cid: {
|
||||
type: String,
|
||||
default: `v-sign-${Date.now()}`
|
||||
// required: true
|
||||
},
|
||||
// canvas 宽度
|
||||
width: {
|
||||
type: [String, Number]
|
||||
},
|
||||
// canvas 高度
|
||||
height: {
|
||||
type: [String, Number]
|
||||
},
|
||||
// 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小 penLineWidth
|
||||
lineWidth: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
// 线颜色，权重小于 v-sign-color 组件设置的画笔颜色 penLineColor
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
// 画布背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
// canvas自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
getSignInterface: this.provideSignInterface
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formatSize,
|
||||
lineData: [],
|
||||
winWidth: 0,
|
||||
winHeight: 0,
|
||||
penLineWidth: null, // v-sign-pen 组件设置的画笔大小
|
||||
penLineColor: null // v-sign-color 组件设置的颜色
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取窗口宽高
|
||||
const { windowWidth, windowHeight } = uni.getSystemInfoSync()
|
||||
this.winWidth = windowWidth
|
||||
this.winHeight = windowHeight
|
||||
},
|
||||
mounted() {
|
||||
this.canvasCtx = uni.createCanvasContext(this.cid, this)
|
||||
// h5 需延迟绘制，否则绘制失败
|
||||
// #ifdef H5
|
||||
setTimeout(() => {
|
||||
// #endif
|
||||
this.setBackgroundColor(this.bgColor)
|
||||
// #ifdef H5
|
||||
}, 10)
|
||||
// #endif
|
||||
// 初始化完成，触发 init 事件
|
||||
this.$emit('init', this.provideSignInterface())
|
||||
},
|
||||
methods: {
|
||||
onTouchStart(e) {
|
||||
const pos = e.touches[0]
|
||||
this.lineData.push({
|
||||
style: {
|
||||
color: this.penLineColor || this.lineColor,
|
||||
width: this.penLineWidth || this.lineWidth
|
||||
},
|
||||
// 屏幕坐标
|
||||
coordinates: [
|
||||
{
|
||||
type: e.type,
|
||||
x: pos.x,
|
||||
y: pos.y
|
||||
}
|
||||
]
|
||||
})
|
||||
this.drawLine()
|
||||
},
|
||||
onTouchMove(e) {
|
||||
const pos = e.touches[0]
|
||||
this.lineData[this.lineData.length - 1].coordinates.push({
|
||||
type: e.type,
|
||||
x: pos.x,
|
||||
y: pos.y
|
||||
})
|
||||
this.drawLine()
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
this.$emit('end', this.lineData)
|
||||
},
|
||||
// 清空画布
|
||||
clear() {
|
||||
this.lineData = []
|
||||
this.canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
|
||||
this.canvasCtx.draw()
|
||||
this.setBackgroundColor(this.bgColor)
|
||||
this.$emit('clear')
|
||||
},
|
||||
// 撤销
|
||||
revoke() {
|
||||
this.setBackgroundColor(this.bgColor)
|
||||
this.lineData.pop()
|
||||
this.lineData.forEach((item, index) => {
|
||||
this.canvasCtx.beginPath()
|
||||
this.canvasCtx.setLineCap('round')
|
||||
this.canvasCtx.setStrokeStyle(item.style.color)
|
||||
this.canvasCtx.setLineWidth(item.style.width)
|
||||
if (item.coordinates.length < 2) {
|
||||
const pos = item.coordinates[0]
|
||||
this.canvasCtx.moveTo(pos.x, pos.y)
|
||||
this.canvasCtx.lineTo(pos.x + 1, pos.y)
|
||||
} else {
|
||||
item.coordinates.forEach(pos => {
|
||||
if (pos.type == 'touchstart') {
|
||||
this.canvasCtx.moveTo(pos.x, pos.y)
|
||||
} else {
|
||||
this.canvasCtx.lineTo(pos.x, pos.y)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.canvasCtx.stroke()
|
||||
})
|
||||
this.canvasCtx.draw(true)
|
||||
this.$emit('revoke', this.lineData)
|
||||
},
|
||||
// 绘制线条
|
||||
drawLine() {
|
||||
const lineDataLen = this.lineData.length
|
||||
if (!lineDataLen) return
|
||||
const currentLineData = this.lineData[lineDataLen - 1]
|
||||
const coordinates = currentLineData.coordinates
|
||||
const coordinatesLen = coordinates.length
|
||||
if (!coordinatesLen) return
|
||||
let startPos
|
||||
let endPos
|
||||
if (coordinatesLen < 2) {
|
||||
// only start, no move event
|
||||
startPos = coordinates[coordinatesLen - 1]
|
||||
endPos = {
|
||||
x: startPos.x + 1,
|
||||
y: startPos.y
|
||||
}
|
||||
} else {
|
||||
startPos = coordinates[coordinatesLen - 2]
|
||||
endPos = coordinates[coordinatesLen - 1]
|
||||
}
|
||||
|
||||
const style = currentLineData.style
|
||||
this.canvasCtx.beginPath()
|
||||
this.canvasCtx.setLineCap('round')
|
||||
this.canvasCtx.setStrokeStyle(style.color)
|
||||
this.canvasCtx.setLineWidth(style.width)
|
||||
this.canvasCtx.moveTo(startPos.x, startPos.y)
|
||||
this.canvasCtx.lineTo(endPos.x, endPos.y)
|
||||
// const P1 = this.caculateBezier(startPos, endPos, centerPos)
|
||||
// console.log(P1.x, P1.y)
|
||||
// this.canvasCtx.moveTo(startPos.x, startPos.y)
|
||||
// this.canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
|
||||
this.canvasCtx.stroke()
|
||||
this.canvasCtx.draw(true)
|
||||
},
|
||||
// 保存png图片，文件名配置 filename 仅支持 h5
|
||||
async saveImage(filename = '签名') {
|
||||
const tempFilePath = await this.canvasToTempFilePath()
|
||||
return new Promise((resolve, reject) => {
|
||||
// #ifdef H5
|
||||
try {
|
||||
const a = document.createElement('a')
|
||||
a.href = tempFilePath
|
||||
a.download = filename
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
a.remove()
|
||||
resolve({
|
||||
errMsg: 'saveImageH5:ok'
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
reject(e)
|
||||
}
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: tempFilePath,
|
||||
success(resObj) {
|
||||
resolve(resObj)
|
||||
},
|
||||
fail(err) {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
// canvas 保存为临时图片路径，h5返回 base64
|
||||
canvasToTempFilePath(conf = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: this.cid,
|
||||
...conf,
|
||||
success: res => {
|
||||
resolve(res.tempFilePath)
|
||||
},
|
||||
fail: err => {
|
||||
console.log('fail', err)
|
||||
reject(err)
|
||||
}
|
||||
},
|
||||
this
|
||||
)
|
||||
})
|
||||
},
|
||||
setBackgroundColor(color = '#fff') {
|
||||
this.canvasCtx.beginPath()
|
||||
this.canvasCtx.setFillStyle(color)
|
||||
this.canvasCtx.fillRect(0, 0, this.winWidth, this.winHeight)
|
||||
this.canvasCtx.fill()
|
||||
this.canvasCtx.draw(true)
|
||||
},
|
||||
setLineWidth(numberVal) {
|
||||
this.penLineWidth = numberVal
|
||||
},
|
||||
setLineColor(strValue) {
|
||||
this.penLineColor = strValue
|
||||
},
|
||||
// 向外暴露内部方法
|
||||
provideSignInterface() {
|
||||
return {
|
||||
cid: this.cid,
|
||||
ctx: this.canvasCtx,
|
||||
clear: this.clear,
|
||||
revoke: this.revoke,
|
||||
saveImage: this.saveImage,
|
||||
canvasToTempFilePath: this.canvasToTempFilePath,
|
||||
setLineWidth: this.setLineWidth,
|
||||
setLineColor: this.setLineColor,
|
||||
setBackgroundColor: this.setBackgroundColor,
|
||||
getLineData: () => this.lineData
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 计算二次贝塞尔曲线 控制点 P1
|
||||
* 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y)
|
||||
* 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
|
||||
* 代入坐标得：
|
||||
* x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2
|
||||
* y = (1-t)²*y0 + 2t(1-t)*y1 + t²*y2
|
||||
*/
|
||||
caculateBezier(P0, P2, B, t = 0.5) {
|
||||
const { x: x0, y: y0 } = P0
|
||||
const { x: x2, y: y2 } = P2
|
||||
const { x, y } = B
|
||||
let x1 = (x - (1 - t) * (1 - t) * x0 - t * t * x2) / (2 * t * (1 - t))
|
||||
let y1 = (y - (1 - t) * (1 - t) * y0 - t * t * y2) / (2 * t * (1 - t))
|
||||
return {
|
||||
x: x1,
|
||||
y: y1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.signature-wrap {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
83
pages/v-sign/package.json
Normal file
83
pages/v-sign/package.json
Normal file
@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "v-sign",
|
||||
"displayName": "canvas 手写 签名 签字 画板组件",
|
||||
"version": "0.5.2",
|
||||
"description": "基于 canvas 实现；1. 支持线条、背景色自定义样式；2. 支持撤回、清空、导出图片等功能；3. 内置按钮、画笔等子组件。",
|
||||
"keywords": [
|
||||
"canvas",
|
||||
"签名",
|
||||
"签字",
|
||||
"电子签名",
|
||||
"signature"
|
||||
],
|
||||
"repository": "https://github.com/jizai1125/v-sign",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "n"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
245
pages/v-sign/readme.md
Normal file
245
pages/v-sign/readme.md
Normal file
@ -0,0 +1,245 @@
|
||||
# v-sign 手写签名
|
||||
|
||||
**如有问题或者建议，欢迎留言或加群联系我（群号：736123963）！！！将保持维护！！！**
|
||||
|
||||
<img src="https://i.loli.net/2021/12/02/bgsfnDmCzXGq8ct.png" alt="uniapp 交流群群聊二维码" style="zoom: 80%;" />
|
||||
|
||||
## 快速使用
|
||||
|
||||
基础示例，具体说明见下方 API，**若需要使用内置子组件，见下方子组件说明。**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<v-sign :width="winWidth + 'px'" @init="onSignInit"></v-sign>
|
||||
<button @click="clear">清空<button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
winWidth: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 宽度设为可使用窗口宽度
|
||||
const { windowWidth } = uni.getSystemInfoSync()
|
||||
this.winWidth = windowWidth
|
||||
},
|
||||
methods: {
|
||||
onSignInit(signCtx) {
|
||||
this.signCtx = signCtx
|
||||
},
|
||||
// 清空
|
||||
clear() {
|
||||
this.signCtx.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### 属性 (Props)
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| :---------: | :-----------: | :-----------: | :--------------------------: |
|
||||
| cid | String | v-sign-时间戳 | canvas id |
|
||||
| width | String/Number | - | canvas 宽度，Number 单位 rpx |
|
||||
| height | String/Number | - | canvas 高度，Number 单位 rpx |
|
||||
| customStyle | Object | - | canvas 自定义样式 |
|
||||
| lineWidth | Number | 4 | 线宽，单位 px |
|
||||
| lineColor | String | #333 | 线颜色 |
|
||||
| bgColor | String | #fff | 画布背景颜色 |
|
||||
|
||||
### 事件（Events）
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| :------: | :------------------------------------------------------------: | :--------------------------------: |
|
||||
| @init | 创建完 canvas 实例后触发，向外提供 canvas 实例，撤回，清空方法 | Object：具体见下方事件回调参数说明 |
|
||||
| @clear | 清空画布后触发 | - |
|
||||
| @revoke | 撤销操作后触发 | 坐标信息数组 |
|
||||
| @end | 每次绘制结束后触发 | 坐标信息数组 |
|
||||
|
||||
### 事件回调参数说明
|
||||
|
||||
#### **`init(ctx: SignContext)`**
|
||||
|
||||
可以通过该事件回调暴露的 clear、revoke 等方法操作画布。
|
||||
|
||||
```java
|
||||
interface SignContext {
|
||||
// canvas 实例
|
||||
ctx: object;
|
||||
// 清空画布
|
||||
clear(): void;
|
||||
// 撤回
|
||||
revoke(): void;
|
||||
// 保存 png 图片，文件名 filename 配置仅支持 h5
|
||||
saveImage(filename: string): Promise<object>;
|
||||
// 返回图片临时文件路径，config 参数同 uni.canvasToTempFilePath方法，内部只是做了 Promise 化处理而已
|
||||
canvasToTempFilePath(config: object): Promise<object>;
|
||||
// 设置画布背景色
|
||||
setBackgroundColor(color: string): void;
|
||||
setLineWidth(value: number): void;
|
||||
setLineColor(value: string): void;
|
||||
// 获取坐标信息数组
|
||||
getLineData(): Array<object>;
|
||||
}
|
||||
```
|
||||
|
||||
示例：
|
||||
|
||||
```html
|
||||
<template>
|
||||
<v-sign @init="onSignInit"></v-sign>
|
||||
<button @click="clear">清空<button>
|
||||
<button @click="revoke">撤回<button>
|
||||
<button @click="saveTempFilePath">保存临时图片路径<button>
|
||||
<button @click="saveImage">保存图片<button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onSignInit(signCtx) {
|
||||
this.signCtx = signCtx
|
||||
},
|
||||
// 清空
|
||||
clear() {
|
||||
this.signCtx.clear()
|
||||
},
|
||||
// 撤回
|
||||
revoke() {
|
||||
this.signCtx.revoke()
|
||||
},
|
||||
// 保存为临时图片路径，h5返回 base64
|
||||
saveTempFilePath() {
|
||||
this.signCtx.canvasToTempFilePath()
|
||||
},
|
||||
// 保存 png 图片
|
||||
saveImage() {
|
||||
this.signCtx.saveImage()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
# 子组件
|
||||
|
||||
子组件需要包裹在 `v-sign` 组件内使用！！！
|
||||
|
||||
## 按钮控件（v-sign-action）
|
||||
|
||||
### 示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<v-sign>
|
||||
<v-sign-action @save="save" @clear="clear" @prev="revoke"></v-sign-action>
|
||||
</v-sign>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
save(tempFilePath) {
|
||||
console.log(tempFilePath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
### 属性 (Props)
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| :---------: | :-----------: | :-----------------------: | :----------------------------------------------------: |
|
||||
| actions | Array | ["clear", "prev", "save"] | 按钮配置；清空（clear）, 撤回（prev） 保存图片（save） |
|
||||
| border | Boolean | true | 按钮是否有边框 |
|
||||
| space | String/Number | 12 | 按钮间隔，Number 单位 rpx |
|
||||
| customStyle | Object | - | 根元素自定义样式 |
|
||||
|
||||
### 事件（Events）
|
||||
|
||||
点击对应类型按钮触发对应事件， 例如：配置了清空（clear）按钮，点击则触发 clear 事件。
|
||||
|
||||
---
|
||||
|
||||
## 画笔组件（v-sign-pen）
|
||||
|
||||
### 示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<v-sign>
|
||||
<v-sign-pen></v-sign-pen>
|
||||
</v-sign>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
### 属性 (Props)
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| :---------: | :-----: | :--------------: | :--------------------------: |
|
||||
| type | String | circle | 选项样式，可选 circle \ line |
|
||||
| label | String | - | 标签 |
|
||||
| sizes | Array | [2, 4, 6, 8, 10] | 画笔尺寸数组，单位 px |
|
||||
| color | String | #333 | 选项颜色 |
|
||||
| activeColor | String | #333 | 选中项颜色 |
|
||||
| border | Boolean | true | 选中项是否有边框 |
|
||||
| borderWidth | Number | 4 | 边框大小，单位 rpx |
|
||||
| space | Number | 20 | 选项间隙，单位 rpx |
|
||||
| bigger | Number | 2 | 圆点变大变粗倍数 |
|
||||
| minSize | Number | 4 | 圆点最小尺寸，单位 px |
|
||||
|
||||
### 事件（Events）
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| :------: | :----------------: | :----------------: |
|
||||
| @change | 选择画笔大小时触发 | size：画笔尺寸大小 |
|
||||
|
||||
---
|
||||
|
||||
## 颜色选择器组件（v-sign-color）
|
||||
|
||||
### 示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<v-sign>
|
||||
<v-sign-color></v-sign-color>
|
||||
</v-sign>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
### 属性 (Props)
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| :---------: | :-----------: | :-------------------------------------------------------------: | :-------------------: |
|
||||
| type | String | square | 选项样式，可选 circle |
|
||||
| color | String | - | 默认颜色 |
|
||||
| options | Array | ['#333', '#f44236', '#3f51b5', '#2195f3', '#ffeb3b', '#ff9900'] | 备选色 |
|
||||
| size | Number/String | 44 | 圆/方形大小，单位 rpx |
|
||||
| tick | Boolean | true | 是否选中打勾 |
|
||||
| tickSize | Number/String | 24 | 勾大小 |
|
||||
| borderColor | String | #fff | 边框颜色 |
|
||||
| border | Boolean | false | 是否有边框 |
|
||||
| space | Number/String | 16 | 选项间隙 |
|
||||
|
||||
### 事件（Events）
|
||||
|
||||
| 事件称名 | 说明 | 返回值 |
|
||||
| :------: | :------------: | :----: |
|
||||
| @change | 选择颜色时触发 | color |
|
||||
BIN
pages/v-sign/static/image/clear.png
Normal file
BIN
pages/v-sign/static/image/clear.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
1
pages/v-sign/static/image/clear.svg
Normal file
1
pages/v-sign/static/image/clear.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639214313546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="827" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M274.56 798.997333l19.434667-25.130666-33.792 68.565333a18.133333 18.133333 0 0 0 11.562666 25.536l59.733334 16a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.818667 35.626667-35.989333 45.290666-48.469333l19.456-25.130667-33.813333 68.565333a18.133333 18.133333 0 0 0 11.562667 25.536l84.48 22.634667a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.84 35.626667-35.989333 45.269333-48.469333l19.456-25.130667-33.813333 68.565333A18.133333 18.133333 0 0 0 535.530667 938.666667l72.106666 19.328a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.84 35.626667-36.010667 45.269334-48.490667l19.456-25.130667-33.813334 68.586667a18.133333 18.133333 0 0 0 11.584 25.514667l86.421334 23.338666 3.84-0.213333c13.269333-0.704 29.056-5.034667 43.84-12.8 29.781333-15.701333 48.170667-43.2 52.181333-78.250667 2.133333-18.517333 4.778667-38.549333 8.405333-63.530666 1.642667-11.221333 2.944-20.010667 6.229334-41.834667 11.050667-73.322667 14.634667-101.034667 17.130666-133.674667l0.938667-12.373333 2.837333-2.922667 12.330667-1.344a41.813333 41.813333 0 0 0 24.810667-11.221333c10.730667-10.24 14.805333-25.386667 11.093333-42.197333l-37.546667-171.584c-3.029333-13.696-11.264-27.946667-23.146666-39.829334-11.648-11.626667-25.92-20.138667-39.893334-23.893333L723.626667 331.306667l-2.261334-3.925334L774.250667 130.133333c8.32-31.061333-11.754667-63.744-44.970667-72.64l-79.509333-21.312c-33.194667-8.896-66.922667 9.365333-75.264 40.426667l-52.842667 197.269333-3.925333 2.261334-118.101334-31.637334c-13.994667-3.754667-30.634667-3.498667-46.506666 0.746667-16.256 4.352-30.506667 12.586667-39.957334 22.933333l-118.314666 129.792c-11.605333 12.714667-15.658667 27.84-11.52 42.090667 4.16 14.229333 15.850667 25.194667 32.896 30.528l13.610666 4.266667 2.133334 3.882666-3.626667 13.802667c-21.12 79.850667-52.885333 136.917333-85.717333 150.890667-47.530667 20.202667-72.938667 49.429333-78.421334 85.034666-5.034667 32.682667 9.28 67.114667 37.589334 91.541334l22.037333 8.341333 74.666667 20.010667a42.666667 42.666667 0 0 0 41.216-11.050667c15.274667-15.274667 26.88-28.032 34.837333-38.293333z m551.381333-396.565333c14.144 3.797333 29.952 19.2 32.768 32l34.56 157.781333a10.666667 10.666667 0 0 1-13.184 12.586667L240.64 433.493333a10.666667 10.666667 0 0 1-5.12-17.493333l108.8-119.36c8.832-9.685333 30.229333-15.146667 44.373333-11.349333l141.333334 37.866666a21.333333 21.333333 0 0 0 26.133333-15.082666l58.304-217.642667a21.333333 21.333333 0 0 1 26.133333-15.082667l77.056 20.650667a21.333333 21.333333 0 0 1 15.082667 26.133333l-58.325333 217.642667a21.333333 21.333333 0 0 0 15.082666 26.112l136.448 36.565333zM315.456 701.568c-33.664 45.141333-64.597333 79.082667-92.8 101.802667l-5.909333 4.778666-2.837334 0.597334-88.106666-24.106667-2.922667-3.2c-13.034667-14.165333-19.370667-31.04-16.981333-46.592 3.285333-21.333333 22.058667-39.338667 53.205333-52.586667 31.722667-13.482667 59.818667-47.104 82.922667-99.904 10.026667-22.954667 18.88-48.725333 26.389333-76.586666l3.882667-14.4 3.904-2.261334 566.165333 151.701334 2.346667 3.306666-0.789334 12.224c-1.984 30.592-30.336 229.397333-32.128 244.906667-2.346667 20.416-11.306667 34.986667-27.605333 44.394667a73.237333 73.237333 0 0 1-21.397333 8.106666l-5.013334 0.725334-60.373333-16.170667 11.242667-20.288c8.277333-14.976 22.656-43.84 43.093333-86.613333a21.12 21.12 0 0 0-9.962667-28.16l-3.136-1.493334a21.333333 21.333333 0 0 0-26.261333 6.485334c-33.642667 45.056-64.533333 78.912-92.672 101.546666l-5.909333 4.757334-2.837334 0.597333-52.544-14.08 11.114667-20.266667c3.562667-6.485333 7.04-13.013333 10.453333-19.626666 7.04-13.504 17.898667-35.797333 32.597334-66.816a21.290667 21.290667 0 0 0-9.984-28.309334l-3.029334-1.450666a21.333333 21.333333 0 0 0-26.368 6.442666c-33.6 45.013333-64.469333 78.826667-92.608 101.482667l-5.909333 4.757333-2.837333 0.597334-52.138667-13.973334 11.114667-20.266666c3.242667-5.888 6.72-12.416 10.453333-19.626667 6.997333-13.461333 17.962667-35.946667 32.896-67.434667a20.970667 20.970667 0 0 0-10.112-28.010666l-3.328-1.536a21.333333 21.333333 0 0 0-26.069333 6.613333c-33.642667 45.056-64.554667 78.976-92.778667 101.696l-5.909333 4.757333-2.837334 0.597334-32.64-8.746667 11.093334-20.245333c3.541333-6.506667 7.04-13.034667 10.453333-19.626667 6.976-13.482667 17.941333-35.968 32.874667-67.456a21.056 21.056 0 0 0-10.069334-28.074667l-3.242666-1.514666a21.333333 21.333333 0 0 0-26.154667 6.549333z" fill="#333333" p-id="828"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
BIN
pages/v-sign/static/image/next.png
Normal file
BIN
pages/v-sign/static/image/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
1
pages/v-sign/static/image/next.svg
Normal file
1
pages/v-sign/static/image/next.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639214327673" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1119" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M588.8 934.4c-17.066667-4.266667-25.6-21.333333-25.6-38.4v-204.8c-68.266667-8.533333-128-4.266667-192 12.8-76.8 21.333333-170.666667 93.866667-273.066667 213.333333-12.8 17.066667-34.133333 21.333333-51.2 12.8-17.066667-8.533333-29.866667-25.6-25.6-42.666666 17.066667-162.133333 76.8-298.666667 187.733334-405.333334 98.133333-98.133333 213.333333-153.6 349.866666-166.4V128c0-17.066667 8.533333-34.133333 25.6-38.4 17.066667-8.533333 34.133333-4.266667 46.933334 8.533333l358.4 375.466667c17.066667 17.066667 17.066667 42.666667 0 59.733333l-358.4 392.533334c-8.533333 8.533333-21.333333 12.8-29.866667 12.8-4.266667 0-8.533333 0-12.8-4.266667z m55.466667-699.733333v123.733333c0 21.333333-17.066667 42.666667-42.666667 42.666667-132.266667 0-243.2 46.933333-337.066667 140.8-59.733333 59.733333-102.4 128-128 204.8 72.533333-68.266667 145.066667-110.933333 209.066667-128 85.333333-21.333333 166.4-25.6 260.266667-8.533334 21.333333 4.266667 34.133333 21.333333 34.133333 42.666667v132.266667l256-281.6-251.733333-268.8z" fill="#333333" p-id="1120"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
pages/v-sign/static/image/prev.png
Normal file
BIN
pages/v-sign/static/image/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
1
pages/v-sign/static/image/prev.svg
Normal file
1
pages/v-sign/static/image/prev.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639214320974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="973" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M422.4 938.666667c-12.8 0-21.333333-4.266667-29.866667-12.8L34.133333 533.333333c-17.066667-17.066667-12.8-42.666667 0-59.733333l358.4-375.466667c8.533333-12.8 25.6-17.066667 42.666667-8.533333s25.6 21.333333 25.6 38.4v187.733333c136.533333 8.533333 256 64 354.133333 166.4 106.666667 106.666667 170.666667 243.2 187.733334 405.333334 0 17.066667-8.533333 38.4-25.6 42.666666-17.066667 8.533333-38.4 4.266667-51.2-12.8-98.133333-119.466667-192-196.266667-273.066667-213.333333-64-17.066667-123.733333-21.333333-192-12.8V896c0 17.066667-12.8 34.133333-25.6 38.4-4.266667 4.266667-8.533333 4.266667-12.8 4.266667z m-298.666667-435.2l256 281.6v-132.266667c0-21.333333 17.066667-38.4 34.133334-42.666667 93.866667-17.066667 174.933333-12.8 260.266666 8.533334 64 17.066667 136.533333 59.733333 209.066667 128-25.6-76.8-72.533333-149.333333-128-204.8-93.866667-93.866667-204.8-140.8-337.066667-140.8-21.333333 0-42.666667-21.333333-42.666666-42.666667V234.666667l-251.733334 268.8z" fill="#333333" p-id="974"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
pages/v-sign/static/image/save.png
Normal file
BIN
pages/v-sign/static/image/save.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
1
pages/v-sign/static/image/save.svg
Normal file
1
pages/v-sign/static/image/save.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639214153477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="861" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M62.848 60.992h704v64h-704zM62.848 640.832h543.936v64H62.848z" fill="#333333" p-id="862"></path><path d="M702.848 60.992h64v320h-64zM62.848 113.536h64v527.296h-64z" fill="#333333" p-id="863"></path><path d="M70.528 498.304l218.24-117.312 30.4 56.32-218.304 117.376z" fill="#333333" p-id="864"></path><path d="M298.432 375.04l144.896 274.176-56.576 29.888L241.92 404.928zM512 194.176h126.592v127.168H512zM663.296 448.448h128v320h-128z" fill="#333333" p-id="865"></path><path d="M599.36 764.992l127.936 128 128.064-128z" fill="#333333" p-id="866"></path></svg>
|
||||
|
After Width: | Height: | Size: 934 B |
15
pages/v-sign/utils/index.js
Normal file
15
pages/v-sign/utils/index.js
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* 判断是否未数值
|
||||
* @param {Object} val
|
||||
*/
|
||||
export function isNumber(val) {
|
||||
return !isNaN(Number(val))
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理大小单位
|
||||
* @param {Object} val
|
||||
*/
|
||||
export function formatSize(val, unit = 'rpx') {
|
||||
return isNumber(val) ? `${val}${unit}` : val
|
||||
}
|
||||
BIN
static/1024.png
BIN
static/1024.png
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.0 KiB |
BIN
static/daohang.png
Normal file
BIN
static/daohang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 793 B |
BIN
static/dcl.png
Normal file
BIN
static/dcl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
BIN
static/dingyue.png
Normal file
BIN
static/dingyue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
static/dqgd.png
Normal file
BIN
static/dqgd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/dqgd2.png
Normal file
BIN
static/dqgd2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
BIN
static/fuwu.png
Normal file
BIN
static/fuwu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
BIN
static/gb.png
BIN
static/gb.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
BIN
static/gb2.png
Normal file
BIN
static/gb2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
static/gongdan.png
Normal file
BIN
static/gongdan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
BIN
static/hlxw.png
Normal file
BIN
static/hlxw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
static/home.png
BIN
static/home.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
BIN
static/home1.png
BIN
static/home1.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
BIN
static/homepage.png
Normal file
BIN
static/homepage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
BIN
static/jinbi.png
Normal file
BIN
static/jinbi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/jnks.png
Normal file
BIN
static/jnks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
static/kaishi.png
Normal file
BIN
static/kaishi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
static/kaishi2.png
Normal file
BIN
static/kaishi2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/kaoshi.png
Normal file
BIN
static/kaoshi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/lixian.png
Normal file
BIN
static/lixian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
static/lixian2.png
Normal file
BIN
static/lixian2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/logo.png
BIN
static/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 53 KiB |
BIN
static/manglu.png
Normal file
BIN
static/manglu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
static/manglu2.png
Normal file
BIN
static/manglu2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/no.png
Normal file
BIN
static/no.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
BIN
static/order.png
BIN
static/order.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
static/paishe.png
Normal file
BIN
static/paishe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
BIN
static/pic.png
BIN
static/pic.png
Binary file not shown.
|
Before Width: | Height: | Size: 729 B |
BIN
static/qbgd.png
Normal file
BIN
static/qbgd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 987 B |
BIN
static/qbgd2.png
Normal file
BIN
static/qbgd2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 847 B |
BIN
static/radio.png
BIN
static/radio.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 638 B |
BIN
static/shezhi.png
Normal file
BIN
static/shezhi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
BIN
static/shouyi.png
Normal file
BIN
static/shouyi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/shouyibeijing.png
Normal file
BIN
static/shouyibeijing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
static/temple.png
Normal file
BIN
static/temple.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/upload.png
Normal file
BIN
static/upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 590 B |
BIN
static/user.png
BIN
static/user.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 1014 B |
BIN
static/user2.png
Normal file
BIN
static/user2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/userw.png
Normal file
BIN
static/userw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user