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

<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>