android添加银行插件
diff --git a/pages/sub_index/offlineHelp.nvue b/pages/sub_index/offlineHelp.nvue
new file mode 100644
index 0000000..315f56e
--- /dev/null
+++ b/pages/sub_index/offlineHelp.nvue
@@ -0,0 +1,428 @@
+<template>
+ <div class="offlineHelp">
+ <map id="map" class="myMap" :longitude="longitude" :latitude="latitude" :markers="markList" :circles="circles"
+ @markertap="markertap" @labeltap="labeltap" :style="{width:windowWidth +'px',height:windowHeight+'px'}"
+ @tap="clickMap"
+ v-if="showMap"></map>
+ <div :class="className" ref="stations">
+ <div class="stations-title"><text class="stations-title-text">附件网点</text></div>
+ <scroll-view scroll-y="true" class="srcollView">
+ <div class="stations-items" v-for="(v,i) in stationList" :key="i" v-if="stationList.length != 0">
+ <div class="stations-items-left">
+ <text class="stations-items-left-title">{{v.name}}</text>
+ <text class="stations-items-left-desc">距离我{{v.distance}}m</text>
+ </div>
+ <div class="stations-items-btn">
+ <text class="stations-items-btn-text" @click="toDetails(i+1)">查看详情</text>
+ </div>
+ </div>
+ <div class="stations-noitems" v-if="stationList.length == 0">
+ <text class="stations-noitems-text">附近暂无网点</text>
+ </div>
+ </scroll-view>
+ </div>
+ <div class="detail" ref="details" v-if="stationList.length != 0">
+ <div class="detail-title">
+ <text class="detail-title-text">{{stationList[id].name}}</text>
+ <uni-rate :readonly="true" :value="value" size="18" activeColor="#30A8E1" margin="5" />
+ <text class="detail-title-rate">{{value}}.0分</text>
+ </div>
+ <div class="detail-subtitle">
+ <text class="detail-subtitle-text">地址：{{stationList[id].address}}</text>
+ </div>
+ <div class="detail-list">
+ <text class="detail-list-text">营业时间：{{stationList[id].starttime|changeVal}}-{{stationList[id].endtime|changeVal}}</text>
+ <text class="detail-list-text">服务范围：{{stationList[id].businescope}}等</text>
+ <text class="detail-list-text">服务热线：{{stationList[id].tel}}</text>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ longitude: 121.5383637152778,
+ latitude: 31.27619086371528,
+ value: 5,
+ circles: [{
+ longitude: 0,
+ latitude: 0,
+ fillColor: '#DBF4FF99',
+ radius: 1500,
+ color: '#DBF4FF99'
+ }],
+ markList: [{
+ id: 0,
+ longitude: 0,
+ latitude: 0,
+ title: '我所在位置',
+ iconPath: './images/map/my.png',
+ width: 20,
+ height: 20,
+ index: 0
+ }],
+ windowWidth: "",
+ windowHeight: "",
+ stationList: [],
+ // polyline: [{
+ // points: [{
+ // latitude: 31.27619086371528,
+ // longitude: 121.5383637152778
+ // }],
+ // color: "#30A8E1",
+ // }],
+ className: 'stations',
+ showMap: true,
+ id: 0
+ }
+ },
+ methods: {
+ getPhoneMsg() {
+ let that = this
+ uni.getSystemInfo({
+ success: function(res) {
+ that.windowHeight = res.windowHeight
+ that.windowWidth = res.windowWidth
+ }
+ });
+ },
+ getLocation() {
+ let that = this
+ uni.getLocation({
+ type: "gcj02",
+ success(res) {
+ console.log(res)
+ that.longitude = res.longitude
+ that.latitude = res.latitude
+ that.circles[0].longitude = res.longitude
+ that.circles[0].latitude = res.latitude
+ that.markList[0].longitude = res.longitude
+ that.markList[0].latitude = res.latitude
+ that.getNearbyStations(res.longitude, res.latitude)
+ },
+ fail(res) {
+ uni.showToast({
+ icon: "none",
+ title: "获取位置信息失败",
+ duration: 1500
+ })
+ }
+ })
+ },
+ markertap(e) {
+ let that = this
+ if (e.detail.markerId != 0) {
+ that.id = e.detail.markerId - 1
+ that.nearbyAnimateOut()
+ that.detailAnimateIn()
+ } else {
+ that.nearbyAnimateIn()
+ that.detailAnimateOut()
+ }
+ },
+ toDetails(e) {
+ let that = this
+ that.id = e - 1
+ that.nearbyAnimateOut()
+ that.detailAnimateIn()
+ },
+ onregionchange(e) {
+ console.log(e)
+ },
+ getNearbyStations(longitude, latitude) {
+ let that = this
+ that.showMap = false
+ let params = {
+ location: longitude + ',' + latitude,
+ distance: 3000
+ }
+ uni.request({
+ url: "https://yy.dlsmk.cn/portal/mobileapi/i/outlets/nearby",
+ data: params,
+ method: "GET",
+ success(res) {
+ console.log(res)
+ let list = res.data.data
+ console.log(list.length)
+ if (list.length != 0) {
+ that.stationList = list
+ list.map((value, index, arr) => {
+ that.markList.push({
+ longitude: value.location.substr(0, value.location.indexOf(",")),
+ latitude: value.location.substr(value.location.indexOf(",") + 1),
+ iconPath: './images/map/mark.png',
+ width: 20,
+ height: 35,
+ title: value.name,
+ id: index + 1,
+ })
+ })
+ }
+ that.showMap = true
+ that.nearbyAnimateIn()
+ },
+ fail(rej) {
+ that.showMap = true
+ uni.showModal({
+ title: "错误",
+ content: rej.code + ":" + rej.message,
+ showCancel: false,
+ })
+ }
+ })
+ },
+ //点击地图更换位置
+ clickMap(e) {
+ let that = this
+ that.nearbyAnimateIn()
+ that.detailAnimateOut()
+ //console.log(e.detail)
+ },
+
+ //动画效果
+ nearbyAnimateIn() {
+ // #ifdef APP-NVUE
+ const animation = weex.requireModule('animation')
+ animation.transition(this.$refs['stations'], {
+ styles: {
+ transform: 'translateY(-700px)',
+ transformOrigin: 'center center',
+ opacity: 1,
+ backgroundColor: "#ffffff"
+ },
+ duration: 500, //ms
+ needLayout: true, //ms
+ timingFunction: 'linear',
+ delay: 0 //ms
+ }, () => {})
+ // #endif
+
+ // #ifdef MP-WEIXIN
+ this.$scope.animate('.stations', [{
+ translateY: '-700px',
+ opacity: 1,
+ backgroundColor: "#ffffff",
+ transformOrigin: 'center center'
+ }], 500, function() {})
+ // #endif
+ },
+ nearbyAnimateOut() {
+ // #ifdef APP-NVUE
+ const animation = weex.requireModule('animation')
+ animation.transition(this.$refs['stations'], {
+ styles: {
+ transform: 'translateY(700px)',
+ transformOrigin: 'center center',
+ opacity: 0,
+ },
+ duration: 500, //ms
+ needLayout: true, //ms
+ timingFunction: 'linear',
+ delay: 0 //ms
+ }, () => {})
+ // #endif
+
+ // #ifdef MP-WEIXIN
+ this.$scope.animate('.stations', [{
+ translateY: '700px',
+ opacity: 0,
+ transformOrigin: 'center center'
+ }], 500, function() {})
+ // #endif
+
+ },
+ detailAnimateIn() {
+ // #ifdef APP-NVUE
+ const animation = weex.requireModule('animation')
+ animation.transition(this.$refs['details'], {
+ styles: {
+ transform: 'translateY(-850px)',
+ transformOrigin: 'center center',
+ backgroundColor: "#ffffff",
+ opacity: 1
+ },
+ duration: 500, //ms
+ needLayout: true, //ms
+ timingFunction: 'linear',
+ delay: 0 //ms
+ }, () => {})
+ // #endif
+
+ // #ifdef MP-WEIXIN
+ this.$scope.animate('.detail', [{
+ translateY: '-850px',
+ opacity: 1,
+ backgroundColor: "#ffffff",
+ transformOrigin: 'center center'
+ }], 500, function() {})
+ // #endif
+
+ },
+ detailAnimateOut() {
+ // #ifdef APP-NVUE
+ const animation = weex.requireModule('animation')
+ animation.transition(this.$refs['details'], {
+ styles: {
+ transform: 'translateY(850px)',
+ transformOrigin: 'center center',
+ opacity: 0
+ },
+ duration: 500, //ms
+ needLayout: true, //ms
+ timingFunction: 'linear',
+ delay: 0 //ms
+ }, () => {})
+ // #endif
+
+ // #ifdef MP-WEIXIN
+ this.$scope.animate('.detail', [{
+ translateY: '850px',
+ opacity: 0,
+ transformOrigin: 'center center'
+ }], 500, function() {})
+ // #endif
+
+ },
+
+ },
+ created() {
+ this.getLocation()
+ this.getPhoneMsg()
+ },
+ filters: {
+ changeVal(data) {
+ data = data.substr(0, 2) + ":" + data.substr(2, 2)
+ return data
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .offlineHelp {
+ position: relative;
+ justify-content: center;
+ }
+
+ .srcollView {
+ height: 450rpx;
+ }
+
+ .detail {
+ position: absolute;
+ bottom: -800px;
+ left: 50rpx;
+ background-color: #FFFFFF;
+ width: 650rpx;
+ padding: 30rpx;
+ border-radius: 10rpx;
+ overflow: hidden;
+ font-family: "PingFang-SC-Medium";
+ opacity: 0;
+
+ &-title {
+ flex-direction: row;
+ align-items: center;
+
+ &-text {
+ color: #333333;
+ font-size: 32rpx;
+ margin-right: 10rpx;
+ }
+
+ &-rate {
+ color: #30A8E1;
+ font-size: 28rpx;
+ font-family: "PingFang-SC-Medium";
+ margin-left: 10rpx;
+ }
+ }
+
+ &-subtitle {
+ margin: 13rpx 0;
+
+ &-text {
+ color: #9A9A9A;
+ font-size: 25rpx;
+ }
+ }
+
+ &-list {
+ &-text {
+ color: #666666;
+ font-size: 28rpx;
+ line-height: 50rpx;
+ }
+ }
+ }
+
+ .stations {
+ position: absolute;
+ bottom: -700px;
+ left: 50rpx;
+ width: 650rpx;
+ padding: 30rpx;
+ border-top-left-radius: 20rpx;
+ border-top-right-radius: 20rpx;
+ overflow: hidden;
+ font-family: "PingFang-SC-Medium";
+ opacity: 0;
+
+ &-title {
+ &-text {
+ color: #333333;
+ font-size: 32rpx;
+ }
+ }
+
+ &-noitems {
+ justify-content: center;
+ align-items: center;
+ margin-top: 30rpx;
+
+ &-text {
+ color: #333333;
+ font-size: 30rpx;
+ }
+ }
+
+ &-items {
+ // display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 20rpx 0;
+ align-items: center;
+ border-bottom-color: #CCCCCC;
+ border-bottom-width: 1px;
+
+ &-left {
+ // display: flex;
+ flex-direction: column;
+
+ &-title {
+ color: #666666;
+ font-size: 28rpx;
+ }
+
+ &-desc {
+ color: #999999;
+ font-size: 25rpx;
+ margin-top: 10rpx;
+ }
+ }
+
+ &-btn {
+ padding: 15rpx 30rpx;
+ background-color: #2FA8E1;
+ border-radius: 50rpx;
+
+ &-text {
+ color: #FFFFFF;
+ font-size: 25rpx;
+ }
+ }
+ }
+ }
+</style>