lucky_shop/pages_tool/seal/medium/detail.vue

<template>
  <view>
    <view class="content">
      <view class="goods-attr">
        <view class="title">{{ title }}</view>
        <view class="attr-wrap">
          <block v-for="(item, index) in list" :key="index">
            <view class="item">
              <text class="attr-name" :style="{ background: item.background }">{{ item.text }}</text>
              <text class="value-name" :style="{ color: item.color }">{{ item.value }}</text>
            </view>
          </block>
        </view>
      </view>
      <block v-if="g0 > 0">
        <view class="foot">
          <view @tap="generateImage" class="item" style="margin-right:30rpx;">导出图片</view>
          <view @tap="generatePdf" class="item">导出PDF</view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "搜索结果",
      info: {},
      list: [],
      keyword: "",
      g0: 1 // 默认显示导出按钮
    };
  },
  computed: {
    themeColor() {
      return '#ffffff';
    }
  },
  onLoad(options) {
    if (options.keyword) {
      this.keyword = options.keyword;
    }
    this.getdata();
  },
  onShow() {
    // 页面显示时执行
  },
  methods: {
    generatePdf() {
      const url = this.$util.img(this.info.files_url);
      uni.showLoading({ title: '正在加载' });
      try {
        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              uni.hideLoading();
              const filePath = res.tempFilePath;
              uni.shareFileMessage({
                filePath: filePath,
                success: () => { },
                fail: console.error
              });
            }
          },
          fail: () => {
            uni.hideLoading();
          },
          complete: (res) => {
            if (res.statusCode === 404) {
              uni.showToast({ title: '文件不存在', icon: 'none' });
            }
          }
        });
      } catch (error) {
        console.log("CatchClause", error);
        uni.hideLoading();
      }
    },
    generateImage() {
      const url = this.$util.img(this.info.img_url);
      uni.showLoading({ title: '正在加载' });
      uni.downloadFile({
        url: url,
        success: (res) => {
          uni.hideLoading();
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                this.$util.showToast({ title: '保存成功' });
              },
              fail: (err) => {
                if (err.errMsg !== 'saveImageToPhotosAlbum:fail auth deny' && err.errMsg !== 'saveImageToPhotosAlbum:fail:auth denied') {
                  this.$util.showToast({ title: '保存失败，请稍后重试' });
                }
              }
            });
          } else {
            this.$util.showToast({ title: '下载失败' });
          }
        },
        fail: (err) => {
          console.log(err);
          uni.hideLoading();
          this.$util.showToast({ title: '下载失败' });
        }
      });
    },
    getdata() {
      this.$api.sendRequest({
        url: '/api/seal/info',
        data: { keyword: this.keyword },
        success: (res) => {
          console.log(res);
          this.list = res.value;
          this.info = res;
          this.title = res.name;
        }
      });
    }
  }
};
</script>

<style scoped>
.content {
  padding: 20rpx;
}

.goods-attr {
  margin: 24rpx 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.goods-attr .title {
  height: 70rpx;
  line-height: 70rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  margin: 0 20rpx;
  text-align: center;
  font-weight: 600;
  color: #000;
}

.goods-attr .attr-wrap {
  margin: 20rpx;
  border: 2rpx solid #f1f1f1;
  overflow: hidden;
}

.goods-attr .attr-wrap .item {
  display: flex;
  border-bottom: 2rpx solid #f1f1f1;
}

.goods-attr .attr-wrap .item:last-child {
  border-bottom: 0;
}

.goods-attr .attr-wrap .item .attr-name {
  width: 200rpx;
  padding-right: 30rpx;
  background-color: #fbfafa;
  white-space: pre-wrap;
  border-right: 2rpx solid #f1f1f1;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  text-align: right;
  font-weight: 600;
}

.goods-attr .attr-wrap .item .value-name {
  padding-left: 30rpx;
  white-space: pre-wrap;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  flex: 1;
  width: 0;
}

.foot {
  display: flex;
  margin: 40rpx 20rpx;
}

.foot .item {
  width: 50%;
  text-align: center;
  background: #ff4646;
  padding: 10rpx 0;
  color: #fff;
  border-radius: 10rpx;
}
</style>