ydb-components-material 0.1.119 → 0.1.121

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

@@ -0,0 +1,144 @@
+.places-content {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 12px 12px 0;
+  margin-top: 12px;
+
+  .inner-content {
+    background: #f5f6f8;
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    border-radius: 5px;
+    margin-top: 24px;
+
+    .map-con {
+      flex: 0.6;
+      border-radius: 5px;
+      overflow: hidden;
+      min-height: 300px;
+
+      .map-placeholder {
+        width: 100%;
+        height: 400px;
+        background: #e8edf3;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+
+        .map-marker {
+          width: 32px;
+          height: 32px;
+          background: #1678FF;
+          border-radius: 50% 50% 50% 0;
+          transform: rotate(-45deg);
+          position: relative;
+
+          &::after {
+            content: '';
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background: #fff;
+            border-radius: 50%;
+            top: 10px;
+            left: 10px;
+          }
+        }
+
+        .map-coords {
+          font-size: 13px;
+          color: #666;
+        }
+
+        .map-hint {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+    }
+
+    .list-con {
+      flex: 0.4;
+      padding: 0 20px;
+
+      .item {
+        padding: 16px 0;
+        border-bottom: 1px solid #EEEEEE;
+        cursor: pointer;
+
+        &:last-child {
+          border: none;
+        }
+
+        &:hover {
+          background: #f0f5ff;
+          margin: 0 -20px;
+          padding: 16px 20px;
+          border-radius: 4px;
+        }
+
+        .name {
+          font-size: 16px;
+          font-weight: 500;
+          color: #333333;
+          margin-bottom: 12px;
+        }
+
+        .info {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          font-size: 14px;
+          line-height: 24px;
+          margin-top: 8px;
+          color: #222222;
+
+          .icon {
+            margin-right: 6px;
+            margin-top: 4px;
+            flex-shrink: 0;
+          }
+
+          .icon-address::before {
+            content: '📍';
+          }
+          .icon-time::before {
+            content: '🕐';
+          }
+          .icon-phone::before {
+            content: '📞';
+          }
+
+          .desc {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+
+  .empty-con {
+    background: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 50vh;
+
+    .empty-img {
+      width: 189px;
+      height: 120px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      margin-bottom: 12px;
+    }
+
+    .empty-text {
+      font-size: 14px;
+      color: #8BB5ED;
+    }
+  }
+}

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

@@ -0,0 +1,198 @@
+<template>
+  <view class="places-content">
+    <guideTitle title="办事大厅" />
+
+    <view v-if="list.length" class="inner-content">
+      <view class="map-con">
+        <commonMap
+          :longitude="local.longitude"
+          :latitude="local.latitude"
+          :list="list"
+          mapH="400px"
+          mapW="800px"
+          @clickDot="clickDotHandle"
+        />
+      </view>
+      <view class="list-con">
+        <view
+          class="item"
+          v-for="item, index in list" :key="index"
+          @click="clickDotHandle(item)"
+        >
+          <view class="name">{{ item.hallName }}</view>
+          <view class="info">
+            <u-icon class="icon" name="map-fill" color="#666666" size="16" />
+            <view class="title_">地址：</view>
+            <view class="desc">{{ item.addressDetail }}</view>
+          </view>
+  
+          <view class="info">
+            <u-icon class="icon" name="clock-fill" color="#666666" size="16" />
+            <view class="title_">时间：</view>
+            <view class="desc">
+              {{ item.firstStartTime }} - {{ item.firstEndTime }} /
+              {{ item.secondStartTime }} - {{ item.secondEndTime }}
+            </view>
+          </view>
+  
+          <view class="info">
+            <u-icon class="icon" name="phone-fill" color="#666666" size="16" />
+            <view class="title_">电话：</view>
+            <view class="desc">{{ item.consultPhone }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="empty-con" v-if="!list.length">
+      <view class="empty-img" :style="{backgroundImage: `url(${emptyImg})`}"></view>
+      <view class="empty-text">暂无办事大厅</view>
+    </view>
+    <!-- <empty
+      v-if="!list.length"
+      mode="address"
+      text="暂无办事大厅"
+    /> -->
+  </view>
+</template>
+
+<script>
+import guideTitle from './guideTitle.vue'
+export default {
+  components: { guideTitle },
+  data() {
+    return {
+      // 中心点位经纬度
+      local: {
+        longitude: NaN,
+        latitude: NaN
+      },
+      list: [],
+      emptyImg: '../static/img/declare/empty.png', // 背景图片
+    }
+  },
+  mounted() {
+    // this.init()
+    this.initData()
+  },
+  methods: {
+    // 初始化 成效分析
+    async initData() {
+      const { hallList } = uni.getStorageSync('eventInfo')
+      this.list = hallList
+			if(hallList.length) {
+				this.clickDotHandle(hallList[0])
+			}
+    },
+    // 初始化当前位置 [方法]
+    init() {
+      uni.getLocation({
+        success: (res) => {
+          const { latitude, longitude } = res
+          console.log('经纬度', latitude, longitude);
+          this.setCenter(latitude, longitude)
+        }
+      });
+    },
+    // 设置中心点经纬度 [方法]
+    setCenter(latitude, longitude) {
+      this.local.latitude = +latitude
+      this.local.longitude = +longitude
+    },
+    // 点击某个服务点 [地图][按钮]
+    clickDotHandle(point) {
+      console.log(point);
+      const { latitude, longitude } = point
+			if(latitude && longitude) {
+				this.setCenter(latitude, longitude)
+			}else{
+				this.setCenter(37.81, 112.52)
+			}
+    },
+
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .places-content{
+    background: #ffffff;
+    border-radius: 8px;
+    padding: 12px 12px 0;
+    margin-top: 12px;
+
+    .inner-content{
+      background: #f5f6f8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 20px;
+      border-radius: 5px;
+      margin-top: 24px;
+
+      .map-con{
+        border-radius: 5px;
+        overflow: hidden;
+        // border: 1px solid red;
+        flex: .6;
+        // flex: 1;
+      }
+  
+      .list-con{
+        // border: 1px solid green;
+        flex: .4;
+        padding: 0 20px;
+        .item{
+          padding: 16px 0;
+          border-bottom: 1px solid #EEEEEE;
+          &:last-child{
+            border: none;
+          }
+          .name{
+            font-size: 28px;
+            font-weight: 500;
+            color: #333333;
+            margin-bottom: 50px;
+          }
+          .info{
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            font-size: 16px;
+            line-height: 24px;
+            margin-top: 16px;
+            color: #222222;
+            .icon{
+              margin-right: 6px;
+              margin-top: 4px;
+            }
+            .desc{
+              flex: 1;
+            }
+  
+          }
+        }
+      }
+    }
+
+    .empty-con{
+      background: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      height: 50vh;
+      .empty-img{
+        width: 189px;
+        height: 120px;
+        background-size: 100% 100%;
+      }
+      .empty-text{
+        font-size: 14px;
+        color: #8BB5ED;
+        margin-top: 5px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import './processImg.scss';
+export interface ProcessImgProps {
+    eventInfo?: any;
+    baseUrl?: string;
+    declarationAppToken?: string;
+}
+declare const ProcessImg: React.FC<ProcessImgProps>;
+export default ProcessImg;

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

@@ -0,0 +1,220 @@
+import _Loading from "@alifd/next/es/loading";
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import GuideTitle from "./guideTitle";
+import "./processImg.scss";
+import { getUrlById } from "../../../api.js";
+var ProcessImg = function ProcessImg(_ref) {
+  var eventInfoProp = _ref.eventInfo,
+    baseUrlProp = _ref.baseUrl,
+    declarationAppTokenProp = _ref.declarationAppToken;
+  var _React$useState = React.useState(true),
+    loading = _React$useState[0],
+    setLoading = _React$useState[1];
+  var _React$useState2 = React.useState(''),
+    processImg = _React$useState2[0],
+    setProcessImg = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    subIndex = _React$useState3[0],
+    setSubIndex = _React$useState3[1];
+  var _React$useState4 = React.useState([]),
+    strategyList = _React$useState4[0],
+    setStrategyList = _React$useState4[1];
+  var subList = ['办事攻略', '办事流程'];
+  React.useEffect(function () {
+    initData();
+  }, [eventInfoProp]);
+  var initData = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _eventInfo$taskGenera;
+      var eventInfo, imgObj, imgObjParsed, _urlRes$presignedUrlL, urlRes, strategies, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            eventInfo = eventInfoProp;
+            if (eventInfo) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            // Process image (workflow chart)
+            imgObj = (_eventInfo$taskGenera = eventInfo.taskGeneralExtend) === null || _eventInfo$taskGenera === void 0 ? void 0 : _eventInfo$taskGenera.programProcess;
+            _context.prev = 2;
+            imgObjParsed = JSON.parse(imgObj);
+            if (!(imgObjParsed.length > 0 && imgObjParsed[0].id)) {
+              _context.next = 4;
+              break;
+            }
+            _context.next = 3;
+            return getUrlById({
+              id: imgObjParsed[0].id,
+              effectiveTime: 3600000
+            }, {
+              tokenTY: declarationAppTokenProp,
+              baseUrl: baseUrlProp
+            });
+          case 3:
+            urlRes = _context.sent;
+            if ((urlRes === null || urlRes === void 0 ? void 0 : (_urlRes$presignedUrlL = urlRes.presignedUrlList) === null || _urlRes$presignedUrlL === void 0 ? void 0 : _urlRes$presignedUrlL.length) > 0) {
+              setProcessImg(urlRes.presignedUrlList[2]);
+            }
+            setLoading(false);
+            _context.next = 5;
+            break;
+          case 4:
+            setLoading(false);
+          case 5:
+            _context.next = 7;
+            break;
+          case 6:
+            _context.prev = 6;
+            _t = _context["catch"](2);
+            setLoading(false);
+          case 7:
+            // Strategy guide list
+            strategies = eventInfo.applicationAffairsStrategy || [];
+            setStrategyList(strategies);
+
+            // Fetch file URLs for each strategy item
+            if (strategies.length > 0) {
+              strategies.forEach(function (ele, index) {
+                if (ele.fileId) {
+                  getFileUrl(ele.fileId, index);
+                }
+              });
+            }
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 6]]);
+    }));
+    return function initData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var getFileUrl = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id, index) {
+      var imgFormat, _urlRes$presignedUrlL2, urlRes, fileUrl, isImg, _t2;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            imgFormat = ['jpg', 'jpeg', 'png', 'gif'];
+            _context2.prev = 1;
+            _context2.next = 2;
+            return getUrlById({
+              id: id,
+              effectiveTime: 3600000
+            }, {
+              tokenTY: declarationAppTokenProp,
+              baseUrl: baseUrlProp
+            });
+          case 2:
+            urlRes = _context2.sent;
+            if ((urlRes === null || urlRes === void 0 ? void 0 : (_urlRes$presignedUrlL2 = urlRes.presignedUrlList) === null || _urlRes$presignedUrlL2 === void 0 ? void 0 : _urlRes$presignedUrlL2.length) > 0) {
+              fileUrl = urlRes.presignedUrlList[2];
+              isImg = imgFormat.some(function (fmt) {
+                return fileUrl.includes(fmt);
+              });
+              setStrategyList(function (prev) {
+                var next = [].concat(prev);
+                if (next[index]) {
+                  next[index] = _extends({}, next[index], {
+                    fileUrl: fileUrl,
+                    isImg: isImg
+                  });
+                }
+                return next;
+              });
+            }
+            _context2.next = 4;
+            break;
+          case 3:
+            _context2.prev = 3;
+            _t2 = _context2["catch"](1);
+            console.error(_t2);
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[1, 3]]);
+    }));
+    return function getFileUrl(_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var preView = function preView() {
+    // In mobile Vue version used uni.previewImage; in PC we open in a new tab
+    if (processImg) {
+      window.open(processImg);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "processImg-content"
+  }, /*#__PURE__*/React.createElement(GuideTitle, {
+    title: "\u529E\u4E8B\u6D41\u7A0B"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sub-con"
+  }, subList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sub-item " + (subIndex === index ? 'active' : ''),
+      key: index,
+      onClick: function onClick() {
+        return setSubIndex(index);
+      }
+    }, item);
+  })), subIndex === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "card"
+  }, strategyList.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "list-con"
+  }, strategyList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "item",
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title-con"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "num"
+    }, "0", index + 1), /*#__PURE__*/React.createElement("div", {
+      className: "item-title"
+    }, item.title)), /*#__PURE__*/React.createElement("div", {
+      className: "desc-con"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "desc-info"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "desc"
+    }, item.introduction), item.fileUrl && item.isImg && /*#__PURE__*/React.createElement("img", {
+      className: "video-con",
+      src: item.fileUrl,
+      alt: ""
+    }), item.fileUrl && !item.isImg && /*#__PURE__*/React.createElement("video", {
+      className: "video-con",
+      src: item.fileUrl,
+      controls: true
+    }))));
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "empty-text"
+  }, "\u6682\u65E0\u529E\u4E8B\u653B\u7565")), subIndex === 1 && /*#__PURE__*/React.createElement("div", {
+    className: "card"
+  }, processImg ? /*#__PURE__*/React.createElement("div", {
+    className: "imgView",
+    onClick: preView
+  }, /*#__PURE__*/React.createElement("img", {
+    src: processImg,
+    alt: "\u529E\u4E8B\u6D41\u7A0B",
+    style: {
+      width: '100%'
+    }
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "empty-content"
+  }, loading ? /*#__PURE__*/React.createElement(_Loading, {
+    tip: "\u52A0\u8F7D\u4E2D"
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "empty-text"
+  }, "\u6682\u65E0\u76F8\u5173\u6750\u6599"))));
+};
+ProcessImg.displayName = 'ProcessImg';
+export default ProcessImg;

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

@@ -0,0 +1,117 @@
+.processImg-content {
+  .sub-con {
+    display: flex;
+    gap: 0;
+    margin: 20px 0;
+    width: 240px;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    overflow: hidden;
+
+    .sub-item {
+      flex: 1;
+      padding: 8px 0;
+      text-align: center;
+      font-size: 14px;
+      color: #666666;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &.active {
+        background: #1678FF;
+        color: #ffffff;
+      }
+
+      &:hover:not(.active) {
+        background: #f0f5ff;
+      }
+    }
+  }
+
+  .card {
+    width: 100%;
+    margin-bottom: 20px;
+
+    .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;
+              width: 68px;
+              height: 8px;
+              margin-top: -7px;
+              background: linear-gradient(90deg, #D9E9FF 0%, #FFFFFF 98%);
+            }
+          }
+        }
+
+        .desc-con {
+          margin-top: 10px;
+
+          .desc-info {
+            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 {
+              width: 262px;
+              height: 146px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .imgView {
+    cursor: pointer;
+    margin: 20px 0;
+    img {
+      width: 100%;
+    }
+  }
+
+  .empty-content {
+    padding: 60px 0;
+    text-align: center;
+  }
+
+  .empty-text {
+    text-align: center;
+    padding: 40px;
+    color: #999;
+    font-size: 14px;
+  }
+}