feat: 增加介质材料模块及案例展示模块

pages_tool/seal/medium/detail.vue

@@ -0,0 +1,202 @@
+<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>