<template>
  <view class="preview-page">
    <web-view class="pdf-view" :src="pdfUrl"></web-view>
    <view class="fixed-footer" @click="goToSign">
      <text class="footer-text">前往签字</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: ''
    }
  },
  
  onLoad(options) {
    const url = options && options.url ? decodeURIComponent(options.url) : '/static/templates.pdf'
    this.pdfUrl = url
  },

  methods: {
    goToSign() {
      uni.navigateTo({
        url: '/pages/sub-pages/webview/sign'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.preview-page {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
}

.pdf-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 120rpx;
}

.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background: #ffffff;
  border-top: 2rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.footer-text {
  background: #f30303;
  color: #fff;
  font-size: 32rpx;
  padding: 18rpx 30rpx;
  border-radius: 20rpx;
  width: 94%;
  text-align: center;
  box-shadow: 0 8rpx 20rpx rgba(255, 45, 45, 0.25);
}
</style>

