app_tree_planting/pages/duty/index.vue
2023-12-13 10:20:14 +08:00

956 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<view class="status-bar"></view>
<view class="content">
<scroller @init="initScroller" @down="refreshData" @up="getList" :up="optUp"
@scroll="navFloatShow(scroller)" :fixed="false">
<!-- 轮播图 -->
<swiper v-if="slider.length > 0" class="swiper" :indicator-dots="false" :autoplay="true"
:circular="true">
<swiper-item class="swiper-item" v-for="(item, index) in slider" :key="index">
<image :lazy-load="true" :src="item.imageUrl" mode="scaleToFill"></image>
</swiper-item>
</swiper>
<view :class="fixedSearch? 'fixed-box':'nofixed-box'">
<view class="func-box">
<view class="item" @click="openActivity()">
<image src="../../static/images/ic_labour_pious_icon.png" mode="scaleToFill"></image>
<text>劳动尽责</text>
</view>
<view class="item" @click="openCertificate">
<image src="../../static/images/ic_certify_search_icon.png" mode="scaleToFill"></image>
<text>证书查询</text>
</view>
<view class="item" @click="openExplain">
<image src="../../static/images/ic_duty_answer_icon.png" mode="scaleToFill"></image>
<text>尽责形式</text>
</view>
</view>
</view>
<view @click="openList" class="title-item">
<view class="title-item-line">
<view class="line-green"></view>
<view class="title-item-title">最新活动</view>
</view>
<view class="title-item-content">更多></view>
</view>
<!-- 劳动尽责内容 -->
<view class="list-box">
<view class="item" v-for="(item,index) in list" :key="index" @click="openDetail(item.activityId)">
<view class="activity-item">
<view class="activity-item-box">
<view class="activity-item-num">
{{item.joinedCount}}/{{item.joinCount}}
</view>
<image :src="imgUrl+item.img" mode="scaleToFill" class="img"></image>
</view>
<view class="activity-content">
<rich-text class="activity-name" :nodes="item.name"></rich-text>
<view class="item-type">
<view class="type-type">{{item.activityType}}</view>
<view class="type-theme">{{item.theme}}</view>
</view>
<view class="activity-time">{{item.startTime}}</view>
<!-- <rich-text class="activity-desc" :nodes="item.content"></rich-text> -->
</view>
</view>
</view>
</view>
<view class="page-foot">
<view class="name">
数据来源:乌兰察布市林业和草原局
</view>
<view class="phone" @click="doCall('14747318104')">联系电话14747318104</view>
<view class="phone" @click="doCall('12345')">服务热线12345</view>
</view>
</scroller>
</view>
<pageLoading v-if="showPageLoading"></pageLoading>
</view>
</template>
<script>
import pageLoading from '@/components/loading/pageLoading.vue';
import sm2 from 'sm-crypto';
export default {
components: {
pageLoading
},
data() {
return {
showPageLoading: true,
slider: [{
imageUrl: "/static/images/ic_duty_title_bg.png"
}], //轮播图
list: [],
scroller: {},
optUp: {
auto: true,
onScroll: true,
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10
},
empty: {
tip: '暂无数据~'
}
},
imgUrl: this.$api.common.imgUrl,
fixedSearch: false,
};
},
onLoad(res) {
// #ifdef H5
var obj = this.getParamsArg(window.location.href)
if (!obj.code) {
window.location.href = "https://app.zwfw.nmg.gov.cn/dgov-authing/auth2.0/authorize?app_id=" + this.$api
.common
.msbAppId + '&scope=base_info%2Cauth_user&redirect_uri=' + encodeURI(
'https://app.zwfw.nmg.gov.cn/rhpt/16e8a8a578025000')
} else {
this.getMsbToken(obj.code.replace('#\/', ''))
}
// #endif
},
methods: {
sm3SignTokenParam(code) {
var uuid = this.getUUID()
var time = new Date().getTime()
const data = "app_id=" + this.$api.common.msbAppId + "&app_secret=" + this.$api.common.msbAppSecret +
"&code=" + code + "&grant_type=authorization_code" + "&time=" + time + "&uuid=" + uuid
var params = {
uuid: uuid,
sign: sm2.sm3(data),
time: time
}
return params;
},
getParamsArg(url) {
let params = url.split('?')[1];
let paramsObj = {};
if (typeof(params) == 'undefined' || params == null) {
return paramsObj;
}
let paramsKVs = params.split('&');
for (let i = 0; i < paramsKVs.length; i++) {
let item = paramsKVs[i];
let kvs = item.split('=');
if (kvs.length === 1) {
paramsObj[kvs[0]] = null;
continue;
}
paramsObj[kvs[0]] = decodeURI(item.replace(kvs[0] + '=', ''));
}
return paramsObj;
},
sm3SignUserBaseInfo(token) {
var uuid = this.getUUID()
var time = new Date().getTime()
const data = "app_id=" + this.$api.common.msbAppId + "&app_secret=" + this.$api.common.msbAppSecret +
"&auth_token=" + token + "&time=" + time + "&uuid=" + uuid
var params = {
uuid: uuid,
sign: sm2.sm3(data),
time: time
}
return params;
},
getUUID() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
},
getAuthorize() {
var _self = this;
uni.showLoading({
title: '加载中...'
})
this.$app.request({
url: this.$api.common.getMsbAuthorize,
method: 'GET',
data: {
app_id: this.$api.common.msbAppId,
scope: 'base_info%2Cauth_user',
redirect_uri: encodeURI(
'https://app.zwfw.nmg.gov.cn/rhpt/16e8a8a578025000')
},
dataType: 'json',
success: res => {
if (res.data && res.data.code) {
_self.getMsbToken(res.data.code)
}
},
fail: error => {
console.log(error)
uni.hideLoading()
},
complete: res => {}
});
},
doCall(phone){
uni.makePhoneCall({
phoneNumber:phone
})
},
getMsbToken(code) {
var _self = this;
var signParams = _self.sm3SignTokenParam(code)
this.$app.request({
url: _self.$api.common.getToken,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
app_id: _self.$api.common.msbAppId,
grant_type: 'authorization_code',
code: code,
sign: signParams.sign,
time: signParams.time,
uuid: signParams.uuid
},
dataType: 'json',
success: res => {
},
fail: error => {
console.log(error)
uni.hideLoading()
},
complete: res => {
console.log(res)
uni.hideLoading()
if (res.data && res.data.code == 1000) {
_self.getMsbUserInfo(res.data.data.token)
}
}
});
},
getMsbUserInfo(token) {
var _self = this;
var params = _self.sm3SignUserBaseInfo(token)
this.$app.request({
url: this.$api.common.getMsbUserInfo,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
app_id: _self.$api.common.msbAppId,
auth_token: token,
sign: params.sign,
time: params.time,
uuid: params.uuid
},
dataType: 'json',
success: res => {
},
fail: error => {
console.log(error)
uni.hideLoading()
},
complete: res => {
uni.hideLoading()
if (res.data && res.data.code == 1000) {
_self.doLogin(res.data.data)
}
}
});
},
doLogin(user) {
console.log(user)
uni.showLoading({
title: '加载中...'
})
var _self = this;
this.$app.request({
url: _self.$api.user.msbLogin,
method: 'POST',
data: {
custName: user.custName,
mobilePhone: user.mobilePhone
},
dataType: 'json',
success: res => {
uni.hideLoading()
getApp().globalData.token = res.data
},
fail: error => {
uni.hideLoading()
uni.showToast({
icon: 'error',
title: '请稍后重新进入'
})
},
complete: res => {}
});
},
doSearch() {
},
onSearchInput(event) {
},
openActivity() {
uni.navigateTo({
url: '/pages/duty/activitynewlist'
})
},
openExplain() {
uni.navigateTo({
url: "/pages/duty/dutyexplain"
})
},
openCertificate() {
uni.navigateTo({
url: "/pages/user/mine_certif_search"
})
},
openDetail(id) {
uni.navigateTo({
url: "/pages/duty/activitydetail?id=" + id + "&type=" + -1
})
},
openList() {
uni.navigateTo({
url: "/pages/duty/activitynewlist"
})
},
/*初始化滚动*/
initScroller(scroller) {
this.scroller = scroller;
this.loadData();
},
/*刷新数据*/
refreshData() {
uni.showLoading({
title: '刷新中'
});
this.scroller.resetUpScroll();
},
onSearchInput: function(event) {
this.searchContent = event.target.value
console.log(event.target.value)
if (event.target.value == "") {
this.refreshData()
}
},
/*加载数据*/
loadData() {
this.list = [];
this.scroller.resetUpScroll();
},
/*滚动时导航栏浮动*/
navFloatShow(scroller) {
if (scroller) {
if (scroller.scrollTop > 350) {
if (!this.fixedSearch) {
this.fixedSearch = true;
}
} else {
if (this.fixedSearch) {
this.fixedSearch = false;
}
}
}
},
getList() {
var _self = this;
_self.$app.request({
url: _self.$api.duty.getActivityList,
method: 'GET',
data: {
page: _self.scroller.num,
rows: _self.scroller.size,
},
dataType: 'json',
success: res => {
uni.hideLoading()
if (res.rows != undefined) {
if (this.scroller.num == 1) {
this.list = [];
}
var tempList = []
tempList = res.rows
if (tempList.length > 0) {
for (var i = 0; i < tempList.length; i++) {
if (tempList[i].photo) {
var index = tempList[i].photo.indexOf(",")
if (index != -1) {
tempList[i].img = tempList[i].photo.substring(0, index)
} else {
tempList[i].img = tempList[i].photo
}
}
}
this.list = this.list.concat(tempList);
}
this.scroller.endBySize(res.rows.length, res.rows.total);
this.showPageLoading = false;
} else {
this.scroller.endSuccess();
this.$alert(res.msg);
}
},
fail: res => {
uni.hideLoading()
_self.scroller.endErr();
},
complete: res => {
uni.hideLoading()
uni.stopPullDownRefresh();
_self.showPageLoading = false;
}
});
}
}
};
</script>
<style scoped lang="scss">
page {
height: 100%;
}
.page {
display: flex;
flex: 1;
flex-direction: column;
overflow: auto;
height: 100%;
background: #F5F6FA;
}
.content {
width: 100%;
position: relative;
height: 100%;
margin-top: 50rpx;
}
.thick-divider {
height: 10rpx;
background: #f2f2f2;
width: 100%;
}
.fixed-box {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 40rpx;
background: white;
z-index: 10;
padding-bottom: 10rpx;
}
.nofixed-box {
position: static;
}
/*幻灯片广告 */
.swiper {
height: 299rpx;
margin: 17rpx 21rpx 15rpx 18rpx;
.swiper-item {
position: relative;
height: 299rpx;
width: 100%;
image {
height: 299rpx;
width: 100%;
border-radius: 15rpx;
}
}
}
.func-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding: 20rpx 10rpx;
background: #ffffff;
.item {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 80rpx;
height: 80rpx;
}
text {
color: #707070;
font-size: 27rpx;
margin-top: 20rpx;
}
}
}
.divider-img {
width: 94%;
height: 120rpx;
align-self: center;
margin: 10rpx 20rpx;
}
/*搜索*/
.search {
padding: 10rpx 24rpx 10rpx 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
.search-content {
background: #f2f2f2;
border-radius: 15px;
padding: 10rpx 24rpx 10rpx 24rpx;
margin-right: 15rpx;
flex: 1;
display: flex;
align-items: center;
}
/deep/.input {
color: #8cc7b5;
}
.icon {
width: 30rpx;
height: 30rpx;
margin-right: 15rpx;
}
.btn {
color: #b3b3b3;
}
}
.duty-box {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
.duty-content {
display: flex;
flex-direction: column;
width: 100%;
.content-left {
display: flex;
flex-direction: column;
background-image: url('../../static/images/ic_duty_index_item_1.png');
width: 48%;
height: 120%;
min-height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 10rpx;
padding: 15rpx;
.title {
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 32rpx;
}
.btn {
background: #169302;
border-radius: 15rpx;
padding: 10rpx 15rpx;
width: 140rpx;
color: white;
text-align: center;
font-size: 25rpx;
margin-top: 20rpx;
align-self: flex-end;
}
.time {
margin-top: 20rpx;
font-size: 25rpx;
}
}
.content-right {
display: flex;
flex-direction: column;
width: 48%;
height: 120%;
margin: 10rpx;
.right-item-top {
display: flex;
flex-direction: column;
background-image: url('../../static/images/ic_duty_index_item_2.png');
width: 100%;
height: 50%;
min-height: 53%;
background-size: 100% 100%;
background-repeat: no-repeat;
.title {
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 32rpx;
padding: 15rpx;
}
.btn {
background: #169302;
border-radius: 15rpx;
padding: 10rpx 15rpx;
width: 140rpx;
color: white;
text-align: center;
font-size: 25rpx;
margin-top: 20rpx;
margin-left: 10rpx;
align-self: flex-start;
}
}
.right-item-bottom {
display: flex;
flex-direction: column;
margin-top: 10rpx;
background-image: url('../../static/images/ic_duty_index_item_3.png');
width: 100%;
height: 50%;
min-height: 50%;
background-size: 100% 100%;
background-repeat: no-repeat;
.title {
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 32rpx;
padding: 15rpx;
}
.btn {
background: #169302;
border-radius: 15rpx;
padding: 10rpx 15rpx;
width: 140rpx;
color: white;
text-align: center;
margin-left: 10rpx;
font-size: 25rpx;
margin-top: 20rpx;
align-self: flex-start;
}
}
}
}
}
.title-item {
display: flex;
flex-direction: row;
justify-content: space-between;
background: #ffffff;
margin-top: 15rpx;
align-items: center;
.title-item-line {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 26rpx 0rpx 27rpx 41rpx;
}
.title-item-title {
display: flex;
flex-direction: row;
margin-left: 16rpx;
font-size: 27rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #3A3B3E;
line-height: 52rpx
}
.title-item-content {
font-size: 24rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #3A3B3E;
line-height: 52rpx;
margin-right: 42rpx;
}
}
.line-green {
width: 10rpx;
background: #0DB77E;
height: 30rpx;
}
.activity-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding: 20rpx 40rpx;
.activity-img {
width: 163rpx;
height: 163rpx;
min-width: 163rpx;
min-height: 163rpx;
}
}
.activity-item-box {
width: 163rpx;
height: 163rpx;
position: relative;
.activity-item-num {
color: white;
background: #0DB77E;
width: fit-content;
max-width: fit-content;
padding: 0rpx 10rpx;
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
position: absolute;
top: 15rpx;
font-size: 18rpx;
left: 0;
z-index: 2;
}
.img {
width: 163rpx;
height: 163rpx;
position: relative;
top: 0;
border-radius: 10rpx;
}
}
.activity-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
margin-left: 21rpx;
height: 163rpx;
.activity-name {
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 27rpx;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #3A3B3E;
}
.activity-time {
font-size: 24rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #A8A8A8;
line-height: 52rpx;
}
.activity-desc {
display: -webkit-box;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 24rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #707070;
line-height: 52rpx;
}
}
.empty-data {
align-items: center;
align-self: center;
}
.item-type {
display: flex;
flex-direction: row;
.type-theme {
display: -webkit-box;
background: #ECFFF9;
font-size: 28rpx;
padding: 0rpx 15rpx;
margin-left: 10rpx;
text-overflow: ellipsis;
word-break: break-all;
text-align: center;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 20rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #12D577;
line-height: 52rpx;
}
.type-type {
display: -webkit-box;
background: #E9F7FF;
text-overflow: ellipsis;
word-break: break-all;
text-align: center;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
padding: 0rpx 15rpx;
font-size: 20rpx;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #009FFF;
line-height: 52rpx;
}
}
.list-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
background: #ffffff;
.item {
display: flex;
flex-direction: column;
background: white;
.item-content {
display: flex;
flex-direction: row;
align-items: center;
image {
width: 163rpx;
height: 163rpx;
}
.item-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
margin-left: 20rpx;
.item-title {
color: #747474;
}
.item-person {
color: #747474;
}
.item-bottom {
display: flex;
flex-direction: row;
width: 95%;
justify-content: space-between;
color: #747474;
.item-status {
color: #00821E;
border: 1rpx #8cc7b5 solid;
font-size: 20rpx;
text-align: center;
padding: 0rpx 10rpx;
align-self: center;
}
}
}
}
.title {
font-size: 30rpx;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
padding: 10rpx;
color: #000;
}
}
}
.page-foot {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: #000;
width: 100%;
background-color: #ffffff;
box-shadow: 1px 2px 1px 2px #f5f5f5;
.name {
font-size: 24rpx;
}
.phone {
color: green;
}
}
</style>