ydb-components-material 0.1.119 → 0.1.120

package/es/components/guide-pc/components/processImg.vue

@@ -0,0 +1,300 @@
+<template>
+  <view class="processImg-content">
+    <guideTitle title="办事流程" />
+    <view class="sub-con">
+      <u-subsection :list="subList" :current="subIndex" @change="subChange" />
+    </view>
+    <!-- 办事攻略 -->
+    <view class="card" v-if="subIndex == 0">
+      <view class="list-con">
+        <view class="item" v-for="item, index in strategyList" :key="index">
+          <view class="title-con">
+            <view class="num">0{{ index + 1 }}</view>
+            <view class="item-title">{{ item.title }}</view>
+          </view>
+
+          <view class="desc-con">
+            <view class="desc-info">
+              
+              <view class="desc">
+                {{ item.introduction }}
+              </view>
+              <template v-if="item.fileId">
+                <img v-if="item.isImg" class="video-con" :src="item.fileUrl"/>
+                <video v-if="!item.isImg" class="video-con" :src="item.fileUrl" />
+              </template>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+
+    <!-- 办事流程 -->
+    <view class="card" v-if="subIndex == 1">
+      <!-- <view class="title">办事流程</view> -->
+      <view
+        class="imgView"
+        v-if="processImg"
+        :style="{backgroundImage: `url(${processImg})`}"
+        @click="preView"
+      />
+    </view>
+
+    <view v-if="!processImg || loading" class="empty-content">
+      <u-loading-icon
+        :show="loading"
+        text="加载中"
+        textSize="14"
+        mode="circle"
+        vertical
+      />
+      <empty
+        v-if="!processImg && !loading"
+        mode="page"
+        text="暂无相关材料"
+        :isFull="false"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import { getFileUrlApi } from '@/api/business.js'
+import guideTitle from './guideTitle.vue'
+export default {
+  components: { guideTitle },
+  data() {
+    return {
+      loading: true,
+      processImg: '',
+
+      subList: ['办事攻略', '办事流程'],
+      // 或者如下，也可以配置keyName参数修改对象键名
+      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
+      subIndex: 0,
+
+      strategyList: [],
+
+      list: [
+        {
+          title: '委托授权',
+          desc: '如果企业法定代表人本人来办理，则可以直接登录账号或者去大厅窗口进行业务办理。如果是委托第三方机构或者个人来办理，需要先去办理委托授权申请。',
+          url: '../../static/img/declare/commonBg.png',
+          video: 'https://zwfwpt.sxzwfw.gov.cn/fis/18a78d3d407-true/master/18b4752f107/2025/12/2001230010824531969/demo2.mp4',
+        },
+        {
+          title: '业务申报',
+          desc: '登录账号选择“数字化”专区，选择对应的事项进行填写信息，提交对应的材料进行业务办理。',
+          url: '../../static/img/declare/commonBg.png',
+          video: 'https://zwfwpt.sxzwfw.gov.cn/fis/18a78d3d407-true/master/18b4752f107/2025/12/2001229910601637890/demo.mp4'
+        },
+        {
+          title: '结果领取',
+          desc: '结果领取可选择窗口领取或邮寄送达。',
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    subChange(index) {
+      console.log(index);
+      this.subIndex = index
+    },
+    // 初始化 流程图
+    async initData() {
+      const eventInfo = uni.getStorageSync('eventInfo')
+      const imgObj = eventInfo.taskGeneralExtend.programProcess
+      const imgObj_ = JSON.parse(imgObj)
+      if(imgObj_.length > 0) {
+        if(imgObj_[0].id) {
+          const photoUrl = await this.getFileUrlFun(imgObj_[0].id)
+          this.processImg = photoUrl
+          this.loading = false
+        }else{
+          this.loading = false
+        }
+      }else{
+        this.loading = false
+      }
+
+      // 办事攻略
+      this.strategyList = eventInfo.applicationAffairsStrategy
+      this.initStrategyList() // 将办事攻略中的图片和视频查回来 并放到列表里
+    },
+    // 预览图片 [方法]
+    preView() {
+      uni.previewImage({
+        urls: [this.processImg]
+      })
+    },
+
+    // 初始化攻略列表 将文件id查询到文件地址 [方法]
+    initStrategyList() {
+      const { applicationAffairsStrategy } = uni.getStorageSync('eventInfo')
+      if(applicationAffairsStrategy && applicationAffairsStrategy.length) {
+        applicationAffairsStrategy.forEach((ele, index) => {
+          if(ele.fileId) {
+            this.getFileUrlFun2(ele.fileId, index)
+          }
+        })
+      }
+    },
+
+    // =============== API ===============
+    // 获取文件地址
+    getFileUrlFun(id) {
+      const params = {
+        effectiveTime: '3600',
+        id
+      }
+      this.loading = true
+      return new Promise((resole) => {
+        getFileUrlApi(params).then((res) => {
+          if(res && res.presignedUrlList && res.presignedUrlList.length > 0) {
+            resole(res.presignedUrlList[2])
+          }
+        }).catch(err => {
+          console.log(err)
+          this.loading = false
+        })
+      })
+    },
+
+    // 获取文件地址(同步的)
+    getFileUrlFun2(id, index) {
+      const params = {
+        effectiveTime: '3600',
+        id
+      }
+      const imgFormat = ['jpg', 'jpeg', 'png', 'gif']
+      getFileUrlApi(params).then((res) => {
+        if(res && res.presignedUrlList && res.presignedUrlList.length > 0) {
+          const fileUrl = res.presignedUrlList[2]
+          const isImg = imgFormat.find((item) => fileUrl.includes(item))
+          this.strategyList[index].fileUrl = fileUrl
+          this.strategyList[index].isImg = isImg
+          this.$forceUpdate()
+        }
+      }).catch(err => {
+        console.log(err)
+        this.loading = false
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .processImg-content{
+    margin-top: 20px;
+    .sub-con{
+      width: 200px;
+    }
+    .card{
+      background: #FFFFFF;
+      border-radius: 8px;
+      width: 100%;
+      margin-bottom: 30rpx;
+      box-sizing: border-box;
+      .title{
+        font-size: 16px;
+        font-weight: 500;
+        color: #333333;
+        margin-bottom: 16px;
+      }
+    }
+
+    .list-con{
+
+      .item{
+        margin: 16px 0;
+        background: #f5f6f8;
+        padding: 20px;
+        border-radius: 8px;
+        .title-con{
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          .num{
+            background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
+            color: #ffffff;
+            font-size: 13px;
+            padding: 0 7px;
+            border-radius: 2px;
+
+            transform: skew(-10deg)
+          }
+          .item-title{
+            font-size: 16px;
+            font-weight: 500;
+            color: #333333;
+            margin-left: 10px;
+            &::after{
+              content: '';
+              display: block;
+              // position: absolute;
+              width: 68px;
+              height: 8px;
+              margin-top: -7px;
+              background: linear-gradient(90deg, #D9E9FF 0%, #FFFFFF 98%);
+            }
+          }
+        }
+        .desc-con{
+          // border-left: 1px dashed #1678FF;
+          // margin-left: 14px;
+          margin-top: 10px;
+          // padding-left: 22px;
+          .desc-info{
+            // background: #F5F9FF;
+            // padding: 12px;
+            font-size: 14px;
+            line-height: 22px;
+            color: #333333;
+            border-radius: 8px;
+
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: 50px;
+            .desc{
+              flex: 1;
+            }
+
+            .video-con{
+              // border: 1px solid red;
+              width: 100%;
+              width: 262px;
+              // margin-top: 10px;
+              height: 146px;
+            }
+          }
+        }
+        &:last-child{
+          .desc-con{
+            border: none;
+          }
+        }
+      }
+    }
+    .imgView{
+      width: 30%;
+      height: 900px;
+      // border: 1px solid;
+      background-size: 100%;
+      background-repeat: no-repeat;
+      margin: 20px auto;
+    }
+
+    .empty-content{
+      height: 800rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+</style>

package/es/components/guide-pc/components/result.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import './result.scss';
+export interface ResultProps {
+    eventInfo?: any;
+}
+declare const Result: React.FC<ResultProps>;
+export default Result;

package/es/components/guide-pc/components/result.js

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import GuideTitle from "./guideTitle";
+import icon1 from "../../guide/imgs/icon1.png";
+import icon2 from "../../guide/imgs/icon2.png";
+import icon3 from "../../guide/imgs/icon3.png";
+import icon4 from "../../guide/imgs/icon4.png";
+import down from "../../guide/imgs/down.png";
+import "./result.scss";
+var Result = function Result(_ref) {
+  var eventInfoProp = _ref.eventInfo;
+  var _React$useState = React.useState([]),
+    list = _React$useState[0],
+    setList = _React$useState[1];
+  React.useEffect(function () {
+    var eventInfo = eventInfoProp;
+    if (eventInfo !== null && eventInfo !== void 0 && eventInfo.applicationConfigEfficiencies) {
+      setList(eventInfo.applicationConfigEfficiencies);
+    }
+  }, [eventInfoProp]);
+  if (!list.length) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "result-content"
+    }, /*#__PURE__*/React.createElement(GuideTitle, {
+      title: "\u6210\u6548\u5206\u6790"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "empty-text"
+    }, "\u6682\u65E0\u6210\u6548\u5206\u6790"));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "result-content"
+  }, /*#__PURE__*/React.createElement(GuideTitle, {
+    title: "\u6210\u6548\u5206\u6790"
+  }), list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card",
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title"
+    }, "\u60C5\u5F62", index + 1), /*#__PURE__*/React.createElement("div", {
+      className: "desc"
+    }, item.scene), /*#__PURE__*/React.createElement("div", {
+      className: "bg-card",
+      style: {
+        backgroundImage: "url(https://zwfwpt.sxzwfw.gov.cn:11001/fis/18a78d3d488-true/master/18b4752f107/2026/5/2059443890220503042/bg2.png)"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "info-title"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title-item"
+    }, "\u73B0\u5728\u529E\u7406\u4E1A\u52A1"), /*#__PURE__*/React.createElement("div", {
+      className: "title-item past"
+    }, "\u8FC7\u5F80\u529E\u7406\u4E1A\u52A1")), /*#__PURE__*/React.createElement("div", {
+      className: "info-list"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "info-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "icon",
+      style: {
+        backgroundImage: "url(" + icon1 + ")"
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "right"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "num"
+    }, item.materialReduction), "\u4EFD", /*#__PURE__*/React.createElement("div", {
+      className: "info-label"
+    }, "\u5E73\u5747\u63D0\u4EA4\u6750\u6599\u51CF\u5C11 ", /*#__PURE__*/React.createElement("span", {
+      className: "down-icon",
+      style: {
+        backgroundImage: "url(" + down + ")"
+      }
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "info-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "icon",
+      style: {
+        backgroundImage: "url(" + icon2 + ")"
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "right"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "num"
+    }, item.timeReduction), "\u5929", /*#__PURE__*/React.createElement("div", {
+      className: "info-label"
+    }, "\u5E73\u5747\u8017\u65F6\u51CF\u5C11 ", /*#__PURE__*/React.createElement("span", {
+      className: "down-icon",
+      style: {
+        backgroundImage: "url(" + down + ")"
+      }
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "info-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "icon",
+      style: {
+        backgroundImage: "url(" + icon3 + ")"
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "right"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "num"
+    }, item.formReduction), "\u4E2A", /*#__PURE__*/React.createElement("div", {
+      className: "info-label"
+    }, "\u5E73\u5747\u8868\u5355\u5B57\u6BB5\u51CF\u5C11 ", /*#__PURE__*/React.createElement("span", {
+      className: "down-icon",
+      style: {
+        backgroundImage: "url(" + down + ")"
+      }
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "info-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "icon",
+      style: {
+        backgroundImage: "url(" + icon4 + ")"
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "right"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "num"
+    }, item.runReduction), "\u6B21", /*#__PURE__*/React.createElement("div", {
+      className: "info-label"
+    }, "\u5E73\u5747\u8DD1\u817F\u6B21\u6570\u51CF\u5C11 ", /*#__PURE__*/React.createElement("span", {
+      className: "down-icon",
+      style: {
+        backgroundImage: "url(" + down + ")"
+      }
+    })))))));
+  }));
+};
+Result.displayName = 'Result';
+export default Result;

package/es/components/guide-pc/components/result.scss

@@ -0,0 +1,104 @@
+.result-content {
+  .card {
+    background: #ffffff;
+    border-radius: 8px;
+    padding: 16px 0 0;
+    margin-bottom: 12px;
+
+    .title {
+      font-size: 20px;
+      font-weight: 500;
+      color: #333333;
+      margin: 0 16px;
+    }
+
+    .desc {
+      font-size: 16px;
+      line-height: 22px;
+      color: #222222;
+      margin: 8px 16px 12px;
+    }
+
+    .bg-card {
+      width: 100%;
+      height: 242px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+
+      .info-title {
+        height: 68px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .title-item {
+          font-size: 20px;
+          font-weight: 500;
+          color: #FFFFFF;
+
+          &.past {
+            color: #6480A7;
+            margin-top: 8px;
+          }
+        }
+      }
+
+      .info-list {
+        margin: 0 30px;
+        height: 150px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .info-item {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex: 1;
+          gap: 16px;
+
+          .icon {
+            width: 60px;
+            height: 60px;
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            flex-shrink: 0;
+          }
+
+          .right {
+            .num {
+              font-size: 26px;
+              font-weight: 500;
+              color: #1678FF;
+              margin: 0 5px;
+            }
+
+            .info-label {
+              font-size: 14px;
+              color: #333333;
+              display: flex;
+              align-items: center;
+              margin-top: 2px;
+
+              .down-icon {
+                display: inline-block;
+                width: 17px;
+                height: 17px;
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                margin-left: 2px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .empty-text {
+    text-align: center;
+    padding: 40px;
+    color: #999;
+    font-size: 14px;
+  }
+}