<template>
  <view>
    <custom-nav-bar position="fixed" color="black" :left-text="optins.name" left-arrow />
    <web-view v-if="optins.name === '手机充值' || optins.name === '生活缴费'" :src="url"></web-view>

    <view v-else class="web-view-image">
      <view v-if="optins.name === '随手拍'">
        <image class="img" mode="aspectFit" src="/static/images/WechatIMG8826.jpg" />
        <view style="padding:20rpx 100rpx;font-size:30rpx;line-height: 54rpx;">
          长按图片前往“民生介休”公众号或保存图片并扫码，关注“民生介休”公众号
          即可发布随手拍。
        </view>
      </view>
      <view v-if="optins.name === '智慧社区'">
        <image class="img" mode="aspectFit" src="/static/images/WechatIMG8889.jpg" />
        <view style="padding:20rpx 100rpx;font-size:30rpx;line-height: 54rpx;">
          长按图片前往“介休智慧社区”公众号或保存图片并扫码，关注“介休智慧社区”公众号
          即可发布随手拍。
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  export default {
    data() {
      return {
        optins: {
          name: ''
        },
        url: ''
      };
    },
    onLoad(optins) {
      this.optins = optins
      let url = '';
      switch (optins.name) {
        // case '随手拍':
        //   url =
        //     'http://mssq.jiexiu.gov.cn/eGovaPublic/view/mobileapp/publicinspect/index.html?cityCode=2988&moduleId=2&isWechat=1&state=STATE#/report/1?hash=002';
        //   break;
        case '手机充值':
          url =
            'https://h5.bestpay.cn/subapps/txjfwap-h5/index.html?payType=1&amp;payChannel=winglet_go&amp;channel=xygj';
          break;
        case '生活缴费':
          url =
            'https://h5.bestpay.cn/subapps/utilities/union/main.html?cid=0880000081&amp;channel=hg&amp;partner_token=';
          break;
        default:
          break;
      }
      console.log(url)
      this.url = url
    },
    methods: {}
  };
</script>
<style lang="less">
  web-view {
    width: 100%;
    height: 100%;
  }

  .web-view-image{
    width: 100%;
    // height: 100%;
    position: absolute;
    text-align: center;
   transform: translate(-50% -50%);
   margin-top: 100rpx;
  }

  .img {
    display: inline-block;
    margin:0 auto;
    text-align: center;
    // width: 750rpx;
    // height: 1334rpx;
  }
</style>