You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
8.5 KiB
286 lines
8.5 KiB
3 years ago
|
<template>
|
||
|
<view>
|
||
|
<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
|
<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
|
||
|
<view class="sticky-tabs">
|
||
|
<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
|
||
|
</view>
|
||
|
|
||
|
<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授权微信</button>
|
||
|
|
||
|
<!-- 搜索 -->
|
||
|
<view class="cu-bar bg-white search sticky-tabs">
|
||
|
<view class="search-form round">
|
||
|
<input type="text" @confirm="keywordSearch" placeholder="请输入客户名称/业务编号" confirm-type="search"></input>
|
||
|
<text class="cuIcon-search"></text>
|
||
|
</view>
|
||
|
</view>
|
||
|
|
||
|
<!-- 数据列表 -->
|
||
|
<view>
|
||
|
<view v-for="(item,index) in ListData" :key="index">
|
||
|
<view class="good-list">
|
||
|
<view class="charge" :id="'index-' + item.name" :data-index="item.name">
|
||
|
<view class="charge-title flex-between">
|
||
|
<text>{{item.clientName}}</text>
|
||
|
</view>
|
||
|
<view class="charge-text">
|
||
|
<view>
|
||
|
<text class="label-text">提单人:</text>
|
||
|
<text class="mgl30">{{item.applicant}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">申请日期:</text>
|
||
|
<text class="mgl30">{{item.applicationDate}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">累计耗时:</text>
|
||
|
<text class="mgl30">{{item.timeConsuming}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">任务节点:</text>
|
||
|
<text class="mgl30">{{item.taskNode}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">完成时间:</text>
|
||
|
<text class="mgl30">{{item.completeTime}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">审批状态:</text>
|
||
|
<text class="mgl30">{{item.approveStatus}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">业务状态:</text>
|
||
|
<text class="mgl30">{{item.businessStatus}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">操作状态:</text>
|
||
|
<text class="mgl30">{{item.operatingStatus}}</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
|
||
|
<!-- 抄送数据列表 -->
|
||
|
<view>
|
||
|
<view v-for="(item,index) in copyData" :key="index">
|
||
|
<view class="good-list">
|
||
|
<view class="charge" :id="'index-' + item.name" :data-index="item.name">
|
||
|
<view class="charge-title flex-between">
|
||
|
<text>{{item.clientName}}</text>
|
||
|
</view>
|
||
|
<view class="charge-text">
|
||
|
<view>
|
||
|
<text class="label-text">提单人:</text>
|
||
|
<text class="mgl30">{{item.applicant}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">申请日期:</text>
|
||
|
<text class="mgl30">{{item.applicationDate}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">任务节点:</text>
|
||
|
<text class="mgl30">{{item.taskNode}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">完成时间:</text>
|
||
|
<text class="mgl30">{{item.approveDate}}</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<text class="label-text">业务状态:</text>
|
||
|
<text class="mgl30">{{item.businessStatus}}</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</mescroll-body>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
|
import {apiSearch} from "@/api/mock.js"
|
||
|
export default {
|
||
|
mixins: [MescrollMixin], // 使用mixin
|
||
|
data() {
|
||
|
return {
|
||
|
upOption: {
|
||
|
// 如果用mescroll-uni 则需要onScroll: true, 且需要 @scroll="scroll"; 而mescroll-body最简单只需在onPageScroll处理即可
|
||
|
// onScroll: true // 是否监听滚动事件, 默认false (配置为true时,可@scroll="scroll"获取到滚动条位置和方向)
|
||
|
},
|
||
|
tabs:[
|
||
|
{name:'全部', value: ''},
|
||
|
{name:'已发起', value: 0},
|
||
|
{name:'待审核', value: 1},
|
||
|
{name:'已处理', value: 2},
|
||
|
{name:'抄送我', value: 3}
|
||
|
],
|
||
|
tabIndex: 0, // 当前菜单下标
|
||
|
ListData: [],//前几个的data
|
||
|
copyData: [],//抄送的列表
|
||
|
totals: 0,
|
||
|
|
||
|
page: {
|
||
|
num: 1,
|
||
|
size: 10,
|
||
|
},
|
||
|
keyword: '',//搜索关键词
|
||
|
operatingStatus: '',
|
||
|
userInfo: {}
|
||
|
};
|
||
|
},
|
||
|
methods: {
|
||
|
wxGetUserInfo(){
|
||
|
let _this = this
|
||
|
uni.getUserInfo({
|
||
|
provider: 'weixin',
|
||
|
success: infoRes => {
|
||
|
_this.userInfo = infoRes.userInfo; //用户信息,微信头像,昵称等等
|
||
|
console.log(infoRes)
|
||
|
uni.login({
|
||
|
success(res){
|
||
|
console.log(res) //获取到的code
|
||
|
let params = {
|
||
|
code: res.code,
|
||
|
encryptedData: infoRes.encryptedData,
|
||
|
iv: infoRes.iv
|
||
|
}
|
||
|
_this.$http.post('/apiHrmsAuth/hrms/auth/userlogin/wxAuthLogin',params).then(res =>{
|
||
|
let params = {
|
||
|
phone: '',
|
||
|
type: 2,
|
||
|
wechatId: res.data,
|
||
|
password: '',
|
||
|
tenDayEffective: 2
|
||
|
}
|
||
|
_this.$http.post('/apiHrmsAuth/hrms/auth/userlogin/login',params).then(res =>{
|
||
|
|
||
|
}).catch(()=>{})
|
||
|
}).catch(()=>{})
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
fail(res) {
|
||
|
uni.showToast({
|
||
|
title:'登录授权失败',
|
||
|
icon:'none',
|
||
|
})
|
||
|
}
|
||
|
});
|
||
|
|
||
|
//4、解密数据
|
||
|
// var decrypt = function(res){
|
||
|
// var data = {
|
||
|
// action: 'wxDecryptData',
|
||
|
// encryptedData: res.encryptedData,
|
||
|
// iv: res.iv,
|
||
|
// sessionKey: res.session_key,
|
||
|
// }
|
||
|
// console.log('wxDecryptData send:');
|
||
|
// console.log(data);
|
||
|
// wd.wd.mina.request(data).then(res=>{
|
||
|
// var ret = res.data;
|
||
|
// console.log('wxDecryptData return:');
|
||
|
// console.log(ret);
|
||
|
|
||
|
// if( ret.status == 0 ){
|
||
|
// if( ret.data.unionId != undefined ){
|
||
|
// that.setData({
|
||
|
// unionId1: ret.data.unionId
|
||
|
// })
|
||
|
// }
|
||
|
// }else{
|
||
|
|
||
|
// }
|
||
|
// })
|
||
|
// }
|
||
|
},
|
||
|
keywordSearch(){},
|
||
|
/*下拉刷新的回调 */
|
||
|
downCallback() {
|
||
|
this.mescroll.resetUpScroll()
|
||
|
},
|
||
|
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
||
|
upCallback(page) {
|
||
|
//联网加载数据
|
||
|
if(this.isChangeTab){
|
||
|
this.mescroll.hideUpScroll(); // 切换菜单,不显示mescroll进度, 显示系统进度条
|
||
|
uni.showLoading();
|
||
|
}
|
||
|
if(this.operatingStatus == 3){
|
||
|
this.$http.post('/api-guarantee/dg-copy-user/queryCopyForMe',{clientName: this.keyword}).then(res =>{
|
||
|
this.copyData = this.copyData.concat(res.data.list); //追加新数据
|
||
|
this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
|
||
|
// this.totals = res.data.totalCount;
|
||
|
}).catch(()=>{
|
||
|
//联网失败, 结束加载
|
||
|
this.mescroll.endErr();
|
||
|
})
|
||
|
}else{
|
||
|
this.$http.post('/api-guarantee/guarantee/efficiency/personalEfficiencyList',{operatingStatus: this.operatingStatus}).then(res =>{
|
||
|
this.ListData = this.ListData.concat(res.data.list); //追加新数据
|
||
|
this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
|
||
|
// this.totals = res.data.totalCount;
|
||
|
}).catch(()=>{
|
||
|
//联网失败, 结束加载
|
||
|
this.mescroll.endErr();
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
// 设置nav到顶部的距离 (滚动条为0, 菜单顶部的数据加载完毕获取到的navTop数值是最精确的)
|
||
|
setNavTop(){
|
||
|
let view = uni.createSelectorQuery().select('#tabInList');
|
||
|
view.boundingClientRect(data => {
|
||
|
this.navTop = data.top // 到屏幕顶部的距离
|
||
|
}).exec();
|
||
|
},
|
||
|
// 点击回到顶部按钮时,先隐藏悬浮菜单,避免闪动
|
||
|
topClick(){
|
||
|
this.isShowSticky = false
|
||
|
},
|
||
|
// 切换菜单
|
||
|
tabChange (index) {
|
||
|
this.operatingStatus = this.tabs[index].value;//当前下标的值
|
||
|
this.keyword = '';
|
||
|
this.ListData = []; // 置空列表,显示加载进度条
|
||
|
this.copyData = []; // 置空列表,显示加载进度条
|
||
|
this.mescroll.resetUpScroll()
|
||
|
},
|
||
|
},
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.cu-bar .search-form{
|
||
|
border: 2rpx solid #00B9FF;
|
||
|
border-radius: 20rpx;
|
||
|
background-color: #fff;
|
||
|
margin: 0 50rpx;
|
||
|
height: 72rpx;
|
||
|
line-height: 72rpx;
|
||
|
margin-top: 20rpx;
|
||
|
input{
|
||
|
height: 72rpx;
|
||
|
line-height: 72rpx;
|
||
|
padding: 0 40rpx;
|
||
|
}
|
||
|
.cuIcon-search{
|
||
|
margin: 0 20rpx;
|
||
|
}
|
||
|
}
|
||
|
.add-customer{
|
||
|
padding: 0 50rpx;
|
||
|
button{
|
||
|
background-color: #00B9FF;
|
||
|
border-radius: 30rpx;
|
||
|
.mar-icon{
|
||
|
margin-right: 10rpx;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|