| <template> |
| <view class="wrap"> |
| <!-- 头部导航 --> |
| <u-sticky h5-nav-height="0"> |
| <!-- #ifndef MP-WEIXIN --> |
| <view class="status_bar"></view> |
| <!-- #endif --> |
| <view class="wrap-header"> |
| <view class="img-box" @click="scan"> |
| <u-image src="/static/images/index/scan.png" width="40rpx" height="40rpx" mode="aspectFit"></u-image> |
| </view> |
| <u-search placeholder="暂无服务可查询" v-model="searchVal" :show-action="false" bg-color="#F7F7F7" margin="0 15rpx" |
| @search="search"></u-search> |
| <view class="img-box" @click="toPath('/pages/sub_index/qrcode/index')"> |
| <u-image src="/static/images/index/money.png" width="40rpx" height="40rpx" mode="aspectFit"></u-image> |
| </view> |
| <view class="img-box" @click="toPath('')"> |
| <u-image src="/static/images/index/square.png" width="40rpx" height="40rpx" mode="aspectFit"></u-image> |
| </view> |
| </view> |
| </u-sticky> |
| <!-- bannar内容 --> |
| <view class="wrap-bannar"> |
| <view class="wrap-bannar-title"> |
| <text>城市服务</text> |
| <text>一键速享</text> |
| </view> |
| <view class="wrap-bannar-box"> |
| <image src="/static/images/index/bannar.png" mode="widthFix"></image> |
| <view class="wrap-bannar-box-overtitle"> |
| <text>出行缴费</text> |
| <text>自在随心</text> |
| </view> |
| </view> |
| </view> |
| <!-- 功能列表 --> |
| <view class="wrap-func"> |
| <u-image src="/static/images/index/bannar1.png" width="100%" mode="widthFix" border-radius="10"></u-image> |
| <!-- <view class="wrap-func-item" v-for="(v,i) in funcList" :key="i" @click="toPath()"> |
| <u-image :src="v.src" width="70rpx" height="70rpx" mode="aspectFit"></u-image> |
| <text>{{v.title}}</text> |
| </view> --> |
| </view> |
| <!--热门活动 --> |
| <view class="wrap-active"> |
| <text class="wrap-active-title">热门活动</text> |
| <view class="wrap-active-bannar"> |
| <!-- <u-image src="/static/images/index/bannar01.png" width="100%" mode="widthFix"></u-image> --> |
| <u-swiper :list="activeImgList" name="picid" img-mode="scaleToFill" height="170" interval="5000" duration="1500" |
| @click="activeImg"></u-swiper> |
| </view> |
| <view class="wrap-active-con"> |
| <view class="wrap-active-con-item" @click="signin"> |
| <u-image src="/static/images/index/mrqd.png" width="70rpx" height="70rpx"></u-image> |
| <view class="wrap-active-con-item-desc"> |
| <text class="wrap-active-con-item-desc-title">每日签到</text> |
| <text class="wrap-active-con-item-desc-desc">签到即可领积分</text> |
| </view> |
| </view> |
| <view class="wrap-active-con-item" @click="activity.length == 0?'':toUrl('/pages/sub_index/activeDetails/index?id='+ activity.articleno + '&type=' + activity.code)"> |
| <u-image src="/static/images/index/smkhd.png" width="70rpx" height="70rpx"></u-image> |
| <view class="wrap-active-con-item-desc"> |
| <text class="wrap-active-con-item-desc-title">{{activity.title?activity.title:''}}</text> |
| <text class="wrap-active-con-item-desc-desc">{{activity.subtitle?activity.subtitle:'暂无'}}</text> |
| </view> |
| </view> |
| <view class="wrap-active-con-item" @click="toPath('/pages/sub_tabbar/active')"> |
| <u-image src="/static/images/index/more.png" width="70rpx" height="70rpx"></u-image> |
| <view class="wrap-active-con-item-desc"> |
| <text class="wrap-active-con-item-desc-title">更多活动</text> |
| </view> |
| </view> |
| </view> |
| </view> |
| <!-- 市民卡业务 --> |
| <view class="wrap-service"> |
| <text class="wrap-service-title">市民卡业务</text> |
| <view class="wrap-service-con"> |
| <view class="wrap-service-con-exp" @click="toUrl('/pages/sub_index/introduce/index')"> |
| <u-image src="/static/images/index/smkjj.png" width="100%" mode="widthFix"></u-image> |
| <text class="wrap-service-con-exp-desc">市民卡简介</text> |
| </view> |
| <view class="wrap-service-con-box"> |
| <view class="wrap-service-con-box-bl"> |
| <u-image src="/static/images/index/bl.png" width="100%" mode="widthFix"></u-image> |
| <view class="wrap-service-con-box-bl-over" @click="toPath('/pages/sub_index/getCityCard/index')"> |
| <text class="wrap-service-con-box-bl-over-up">办理</text> |
| <text class="wrap-service-con-box-bl-over-dowm">网络快速办理</text> |
| </view> |
| </view> |
| <view class="wrap-service-con-box-bl"> |
| <u-image src="/static/images/index/zx.png" width="100%" mode="widthFix"></u-image> |
| <view class="wrap-service-con-box-bl-over" @click="toPath('/pages/sub_index/chat/index')"> |
| <text class="wrap-service-con-box-bl-over-up">咨询</text> |
| <text class="wrap-service-con-box-bl-over-dowm">24小时在线咨询</text> |
| </view> |
| </view> |
| </view> |
| </view> |
| </view> |
| <!-- 底部tabbar --> |
| <!-- <u-gap height="70"></u-gap> --> |
| <u-tabbar :list="vuex_tabbar" :mid-button="true" active-color="#2FA8E1" inactive-color="#999999" @change="changeTabbar"></u-tabbar> |
| </view> |
| </template> |
| |
| <script> |
| const app = getApp() |
| export default { |
| data() { |
| return { |
| searchVal: "", |
| funcList: [{ |
| title: "物业缴费", |
| src: "/static/images/index/wyjf.png" |
| }, { |
| title: "电费", |
| src: "/static/images/index/df.png" |
| }, { |
| title: "加油卡充值", |
| src: "/static/images/index/jykcz.png" |
| }, { |
| title: "宽带费", |
| src: "/static/images/index/kdf.png" |
| }, { |
| title: "手机缴费", |
| src: "/static/images/index/sjjf.png" |
| }, { |
| title: "固话充值", |
| src: "/static/images/index/ghcz.png" |
| }, { |
| title: "违章查询", |
| src: "/static/images/index/wzcx.png" |
| }, { |
| title: "全部", |
| src: "/static/images/index/all.png" |
| }], |
| activity: [], |
| activeImgList: [{ |
| picid: "/static/images/index/bannar01.png", |
| articleno: '00000003' |
| }, ] |
| } |
| }, |
| methods: { |
| get_prompt() { |
| //提示更新或通告 |
| let vername = app.globalData.vername |
| let verno = app.globalData.verno |
| let params = { |
| vername, |
| verno |
| } |
| this.$u.get('/i/app/prompt', params).then(res => { |
| let is_have_content = res.prompt |
| if (!!is_have_content) { |
| uni.showModal({ |
| title: '提示', |
| content: is_have_content |
| }) |
| } |
| |
| }) |
| }, |
| search(e) { |
| uni.showToast({ |
| icon: "none", |
| title: "搜索服务功能暂未开通", |
| duration: 1500 |
| }) |
| }, |
| |
| scan() { |
| // #ifdef APP-PLUS |
| let that = this |
| var ali = uni.requireNativePlugin("Mpaas-Scan-Module") |
| ali.mpaasScan({ |
| // 扫码 UI 风格，参数可为 qr、bar，默认为 qr |
| 'type': 'qr', |
| // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有 |
| 'scanType': ['qrCode'], |
| // 是否隐藏相册，默认false不隐藏 |
| 'hideAlbum': false |
| }, |
| (ret) => { |
| let url = ret.resp_result |
| uni.showToast({ |
| title: "扫描成功", |
| icon: "none", |
| duration: 800, |
| complete() { |
| let param = { |
| url: url |
| } |
| //console.log(param.url) |
| that.$u.get('/v1/qrcode/auth', param).then(ret => { |
| // console.log(ret.data) |
| if (ret.data.permit) { |
| if (ret.data.action == 'water') { |
| setTimeout(() => { |
| uni.navigateTo({ |
| url: "/pages/sub_index/scanView/index?url=" + ret.data.url |
| }) |
| }, 1500) |
| } else if (ret.data.action == 'dlsmkh5') { |
| let token = uni.getStorageSync('token') |
| let wv = plus.webview.create(ret.data.url, 'webview_pay', { |
| backButtonAutoControl: 'close', |
| additionalHttpHeaders: { |
| Authorization: 'Bearer ' + token |
| } |
| }) |
| setTimeout(() => { |
| wv.show() |
| }, 1500) |
| } |
| } else { |
| uni.showToast({ |
| icon: "none", |
| title: "暂不支持此二维码", |
| duration: 1500 |
| }) |
| } |
| }) |
| } |
| }) |
| }) |
| // #endif |
| |
| }, |
| getActivityList() { |
| let that = this |
| let param = [{ |
| code: "PopularActivities", //OnlineActivities、OfflineActivities、PopularActivities |
| pagesize: 1, |
| pageno: 1 |
| }] |
| that.$u.post("/i/activity", param).then(res => { |
| if (res.data[0].articles.list.length > 0) { |
| let list = res.data[0].articles.list[0] |
| list.code = 'PopularActivities' |
| that.activity = list |
| } |
| }) |
| }, |
| activeImg(index) { |
| let that = this |
| let obj = that.activeImgList[index] |
| uni.navigateTo({ |
| url: '/pages/sub_index/activeDetails/index?id=' + obj.articleno |
| }) |
| }, |
| getBannarList() { |
| let that = this |
| that.$u.get('i/column/banner', {}).then(res => { |
| if (res.data.length > 0) { |
| that.activeImgList = res.data |
| //console.log(that.activeImgList) |
| } |
| }).catch(res => { |
| //console.log(1) |
| }) |
| }, |
| signin() { |
| let that = this |
| that.$u.post('v1/point/task/signin', {}).then(res => { |
| uni.showToast({ |
| icon: "none", |
| title: "签到成功", |
| duration: 1500 |
| }) |
| }) |
| } |
| }, |
| onLoad() { |
| this.getBannarList() |
| setTimeout(() => { |
| this.get_prompt() |
| }, 5 * 1000) |
| this.getActivityList() |
| // #ifdef APP-PLUS |
| //引入插件 |
| const KJJPush = uni.requireNativePlugin('KJ-JPush'); |
| let uid = uni.getStorageSync("uid") |
| //设置Alias |
| KJJPush.setAlias(uid ? uid : 'tourist', 1, result => { |
| //console.log("setAlias:" + JSON.stringify(result)); |
| }); |
| |
| // #endif |
| |
| }, |
| async onPullDownRefresh() { |
| await this.getActivityList() |
| uni.stopPullDownRefresh() |
| } |
| } |
| </script> |
| |
| <style lang="scss" scoped> |
| /* #ifdef MP-WEIXIN */ |
| .wrap-func { |
| /deep/image { |
| display: block; |
| } |
| } |
| |
| /* #endif */ |
| |
| .status_bar { |
| background-color: #FFFFFF; |
| } |
| |
| .wrap { |
| background-color: #FFFFFF; |
| |
| &-header { |
| display: flex; |
| flex-direction: row; |
| align-items: center; |
| justify-content: space-between; |
| padding: 10rpx 15rpx; |
| background-color: #FFFFFF; |
| |
| image { |
| width: 50rpx; |
| height: 50rpx; |
| } |
| |
| .img-box { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| padding: 0 15rpx; |
| } |
| } |
| |
| &-bannar { |
| width: 100vw; |
| margin-top: 10rpx; |
| |
| &-title { |
| width: 300rpx; |
| margin: auto; |
| display: flex; |
| justify-content: space-between; |
| font-size: 35rpx; |
| font-weight: bold; |
| font-style: oblique; |
| font-family: "PingFang-SC-Bold"; |
| } |
| |
| image { |
| width: 100%; |
| } |
| |
| &-box { |
| position: relative; |
| |
| &-overtitle { |
| position: absolute; |
| width: 250rpx; |
| background-color: #ECECEC; |
| padding: 10rpx 20rpx; |
| border-radius: 50rpx; |
| top: 20rpx; |
| left: 50%; |
| transform: translate(-50%, 0); |
| display: flex; |
| font-size: 24rpx; |
| justify-content: space-between; |
| color: #808080; |
| letter-spacing: 2rpx; |
| font-family: "PingFang-SC-Medium"; |
| } |
| } |
| } |
| |
| &-func { |
| width: 95vw; |
| background-color: #FFFFFF; |
| margin: -180rpx auto 0; |
| // display: flex; |
| // flex-wrap: wrap; |
| // justify-content: space-between; |
| // padding: 30rpx 0; |
| border-radius: 10rpx; |
| box-shadow: 0 0rpx 6rpx #808080; |
| position: relative; |
| |
| /deep/uni-image { |
| display: block; |
| } |
| |
| &-item { |
| width: 25%; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| margin-bottom: 30rpx; |
| |
| text { |
| margin-top: 10rpx; |
| color: #333333; |
| font-family: "PingFang-SC-Medium"; |
| font-size: 24rpx; |
| } |
| } |
| } |
| |
| &-active { |
| margin-top: 30rpx; |
| padding: 0 2.5vw; |
| |
| &-title { |
| font-family: "PingFang-SC-Medium"; |
| font-size: 30rpx; |
| color: #333333; |
| } |
| |
| &-bannar { |
| margin-top: 20rpx; |
| } |
| |
| &-con { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 20rpx; |
| |
| // align-items: center; |
| &-item { |
| width: 32%; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| background-color: #F7F7F7; |
| padding: 50rpx 20rpx 30rpx; |
| border-radius: 10rpx; |
| |
| &-desc { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| margin-top: 50rpx; |
| width: 100%; |
| text-align: center; |
| |
| &-desc { |
| width: 100%; |
| color: #666666; |
| font-size: 20rpx; |
| margin-top: 10rpx; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| &-title { |
| width: 100%; |
| font-family: "PingFang-SC-Medium"; |
| font-size: 26rpx; |
| color: #333333; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| } |
| } |
| } |
| } |
| |
| &-service { |
| margin-top: 30rpx; |
| padding: 0 2.5vw; |
| |
| &-title { |
| font-family: "PingFang-SC-Medium"; |
| font-size: 30rpx; |
| color: #333333; |
| } |
| |
| &-con { |
| display: flex; |
| flex-direction: row; |
| justify-content: space-between; |
| margin-top: 20rpx; |
| |
| &-exp { |
| position: relative; |
| width: 50%; |
| |
| &-desc { |
| position: absolute; |
| top: 30rpx; |
| left: 30rpx; |
| font-family: "PingFang-SC-Medium"; |
| color: #FFFFFF; |
| font-size: 36rpx; |
| } |
| } |
| |
| &-box { |
| width: 49%; |
| display: flex; |
| flex-direction: column; |
| |
| &-bl { |
| position: relative; |
| margin-top: -10rpx; |
| |
| &-over { |
| display: flex; |
| flex-direction: column; |
| position: absolute; |
| top: 50%; |
| left: 15%; |
| transform: translateY(-50%); |
| |
| &-up { |
| font-family: "PingFang-SC-Medium"; |
| font-size: 30rpx; |
| } |
| |
| &-dowm { |
| font-family: "PingFang-SC-Medium"; |
| font-size: 24rpx; |
| color: #999999; |
| } |
| } |
| } |
| } |
| } |
| |
| } |
| } |
| </style> |