8.28 修改事件详情相关概念模块样式，增加股票详情信息来源展示

unpackage/dist/dev/mp-weixin/pages/index/stockDetails/stockDetails.js

@@ -1,6 +1,7 @@
 "use strict";
 const common_vendor = require("../../../common/vendor.js");
 const request_api = require("../../../request/api.js");
+const utils_util = require("../../../utils/util.js");
 const common_assets = require("../../../common/assets.js");
 const echarts = require("../../../uni_modules/lime-echart/static/echarts.min.js");
 const _sfc_main = {
@@ -9,18 +10,33 @@ const _sfc_main = {
       navH: common_vendor.inject("navHeight"),
       contentTop: "",
       navTitle: "",
+      type: "",
+      //1事件详情2投资详情
+      eventId: "",
+      //事件id
       stockCode: "",
       //股票code
-      categoryList: ["分钟线", "分时图", "日K线"],
+      categoryList: ["分时图", "日K线"],
       selectCategory: 0,
       option: {
         title: {
           show: false
         },
         tooltip: {
+          position: function(pos, params, dom, rect, size) {
+            var obj = { top: "10%" };
+            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
+            return obj;
+          },
           trigger: "axis",
           axisPointer: {
             type: "cross"
+          },
+          formatter: function(params) {
+            common_vendor.index.__f__("log", "at pages/index/stockDetails/stockDetails.vue:66", params);
+            let res = "日期：" + params[0].name + "\n开盘价：" + params[0].data[1] + "\n收盘价：" + params[0].data[2] + "\n最低价：" + params[0].data[3] + "\n最高价：" + params[0].data[4];
+            common_vendor.index.__f__("log", "at pages/index/stockDetails/stockDetails.vue:68", res);
+            return res;
           }
         },
         legend: {
@@ -70,107 +86,76 @@ const _sfc_main = {
               color0: "#8A0000",
               borderColor: "#00da3c",
               borderColor0: "#008F28"
-            },
-            markPoint: {
-              label: {
-                formatter: function(param) {
-                  return param != null ? Math.round(param.value) + "" : "";
-                }
-              },
-              data: [
-                {
-                  name: "Mark",
-                  coord: ["2013/5/31", 2300],
-                  value: 2300,
-                  itemStyle: {
-                    color: "rgb(41,60,85)"
-                  }
-                },
-                {
-                  name: "highest value",
-                  type: "max",
-                  valueDim: "highest"
-                },
-                {
-                  name: "lowest value",
-                  type: "min",
-                  valueDim: "lowest"
-                },
-                {
-                  name: "average value on close",
-                  type: "average",
-                  valueDim: "close"
-                }
-              ],
-              tooltip: {
-                formatter: function(param) {
-                  return param.name + "<br>" + (param.data.coord || "");
-                }
-              }
-            },
-            markLine: {
-              symbol: ["none", "none"],
-              data: [
-                [
-                  {
-                    name: "from lowest to highest",
-                    type: "min",
-                    valueDim: "lowest",
-                    symbol: "circle",
-                    symbolSize: 10,
-                    label: {
-                      show: false
-                    },
-                    emphasis: {
-                      label: {
-                        show: false
-                      }
-                    }
-                  },
-                  {
-                    type: "max",
-                    valueDim: "highest",
-                    symbol: "circle",
-                    symbolSize: 10,
-                    label: {
-                      show: false
-                    },
-                    emphasis: {
-                      label: {
-                        show: false
-                      }
-                    }
-                  }
-                ],
-                {
-                  name: "min line on close",
-                  type: "min",
-                  valueDim: "close"
-                },
-                {
-                  name: "max line on close",
-                  type: "max",
-                  valueDim: "close"
-                }
-              ]
             }
           }
         ]
-      }
+      },
+      option1: {
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: "axis"
+        },
+        grid: {
+          left: "10%",
+          right: "12%",
+          bottom: "10%"
+        },
+        xAxis: {
+          type: "category"
+        },
+        yAxis: {
+          scale: true
+        },
+        dataZoom: [
+          {
+            type: "inside"
+          }
+        ],
+        series: {
+          name: "分时图",
+          type: "line",
+          markLine: {
+            silent: true,
+            symbol: ["none", "none"],
+            lineStyle: {
+              width: 2,
+              color: "#AAA"
+            },
+            data: []
+          }
+        }
+      },
+      relatedDesc: "",
+      //关联描述
+      sourceList: [],
+      //来源列表
+      getLocalDate: utils_util.getLocalDate
     };
   },
   onLoad(e) {
-    this.contentTop = this.navH + (60 + 10) / 750 * common_vendor.inject("windowWidth");
     if (e.code) {
-      this.stockCode = e.code;
-      this.getStockDetailsData();
-      this.getStockCandlestickChartData();
+      this.type = e.type;
+      if (e.type == 1) {
+        this.contentTop = this.navH + (60 + 8) / 750 * common_vendor.inject("windowWidth");
+        this.eventId = e.id;
+        this.stockCode = e.code;
+        this.getStockDetailsData();
+      } else {
+        this.contentTop = this.navH;
+        this.navTitle = e.name + "(" + e.code + ")";
+        this.relatedDesc = e.des;
+      }
     }
   },
   methods: {
     async init() {
       const chart = await this.$refs.chartRef.init(echarts);
-      chart.setOption(this.option);
+      if (this.selectCategory == 0) {
+        chart.setOption(this.option1);
+      } else
+        chart.setOption(this.option);
     },
     /**
      * 点击切换分类
@@ -179,9 +164,10 @@ const _sfc_main = {
     clickCategoryItem(index) {
       if (this.selectCategory != index) {
         this.selectCategory = index;
-        if (index == 0 || index == 2) {
+        if (index == 1) {
           this.getStockCandlestickChartData();
-        }
+        } else
+          this.init();
       }
     },
     /**
@@ -189,9 +175,47 @@ const _sfc_main = {
      */
     getStockDetailsData() {
       let stockCode = this.stockCode;
-      request_api.stockDetails(stockCode).then((res) => {
+      let eventId = this.eventId;
+      request_api.stockDetails(eventId, stockCode).then((res) => {
         if (res.code == 200) {
           this.navTitle = res.data.basic_info.stock_name + "(" + res.data.basic_info.stock_code + ")";
+          let data = res.data.minute_chart_data;
+          let categoryData = [];
+          let valueData = [];
+          for (let item of data) {
+            categoryData.push(item.time);
+            valueData.push(item.close);
+          }
+          this.option1.xAxis.data = categoryData;
+          this.option1.series.data = valueData;
+          this.option1.series.markLine.data = [
+            {
+              yAxis: data[0].open,
+              label: {
+                show: true,
+                position: "start",
+                // formatter:'111',
+                color: "#333"
+              }
+            },
+            {
+              yAxis: data[0].open,
+              label: {
+                show: true,
+                position: "end",
+                formatter: "0.00%",
+                color: "#333"
+              }
+            }
+          ];
+          let relatedDesc = res.data.related_desc;
+          if (relatedDesc) {
+            this.relatedDesc = relatedDesc.relation_desc;
+            if (relatedDesc.retrieved_sources) {
+              this.sourceList = relatedDesc.retrieved_sources;
+            }
+          }
+          this.init();
         } else
           common_vendor.index.showToast({
             title: res.message,
@@ -206,16 +230,19 @@ const _sfc_main = {
     getStockCandlestickChartData() {
       let stockCode = this.stockCode;
       let param = { chart_type: "minute" };
-      if (this.selectCategory == 2) {
+      if (this.selectCategory == 1) {
         param.chart_type = "daily";
       }
       request_api.stockCandlestickChartData(stockCode, param).then((res) => {
         let data = res.data;
         let categoryData = [];
+        let valueData = [];
         for (let item of data) {
           categoryData.push(item.time);
+          valueData.push([item.open, item.close, item.low, item.high]);
         }
         this.option.xAxis.data = categoryData;
+        this.option.series[0].data = valueData;
         this.init();
       }).catch((error) => {
       });
@@ -233,12 +260,14 @@ if (!Math) {
   (_easycom_navBar + _easycom_l_echart)();
 }
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return {
+  return common_vendor.e({
     a: common_vendor.p({
       leftText: $data.navTitle
     }),
     b: common_assets._imports_0,
-    c: common_vendor.f($data.categoryList, (item, index, i0) => {
+    c: $data.type == 1
+  }, $data.type == 1 ? {
+    d: common_vendor.f($data.categoryList, (item, index, i0) => {
       return common_vendor.e({
         a: common_vendor.t(item),
         b: $data.selectCategory == index
@@ -248,10 +277,27 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         e: common_vendor.o(($event) => $options.clickCategoryItem(index), index)
       });
     }),
-    d: common_vendor.s("top:" + $data.navH + "px;"),
-    e: common_vendor.sr("chartRef", "42054871-1"),
-    f: common_vendor.s("top:" + $data.contentTop + "px;")
-  };
+    e: common_vendor.s("top:" + $data.navH + "px;")
+  } : {}, {
+    f: $data.type == 1
+  }, $data.type == 1 ? {
+    g: common_vendor.sr("chartRef", "42054871-1")
+  } : {}, {
+    h: common_vendor.t($data.relatedDesc),
+    i: $data.type == 1 && $data.sourceList.length > 0
+  }, $data.type == 1 && $data.sourceList.length > 0 ? {} : {}, {
+    j: common_vendor.f($data.sourceList, (item, index, i0) => {
+      return {
+        a: common_vendor.t(item.sentences),
+        b: common_vendor.t(item.report_title),
+        c: common_vendor.t(item.author),
+        d: common_vendor.t($data.getLocalDate(item.declare_date)),
+        e: index
+      };
+    }),
+    k: common_vendor.n("contentC fixed " + ($data.type == 2 ? "radius" : "")),
+    l: common_vendor.s("top:" + $data.contentTop + "px;")
+  });
 }
 const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
 wx.createPage(MiniProgramPage);

unpackage/dist/dev/mp-weixin/pages/index/stockDetails/stockDetails.wxml

@@ -1 +1 @@
-<view><nav-bar wx:if="{{a}}" u-i="42054871-0" bind:__l="__l" u-p="{{a}}"></nav-bar><image class="topBg absolute" src="{{b}}" mode="widthFix"></image><view class="tabC fixed" style="{{d}}"><view wx:for="{{c}}" wx:for-item="item" wx:key="d" class="{{item.c}}" bindtap="{{item.e}}">{{item.a}} <view wx:if="{{item.b}}" class="line absolute"></view></view></view><view class="contentC fixed" style="{{f}}"><view style="width:750rpx;height:400rpx"><l-echart class="r" u-r="chartRef" u-i="42054871-1" bind:__l="__l"></l-echart></view><view class="section">关联描述</view><view class="des">全球原油运输巨头，VLCC运力规模全球第一，直接受益于霍尔木兹海峡地缘风险带来的运价上涨及风险溢价。</view></view></view>
+<view><nav-bar wx:if="{{a}}" u-i="42054871-0" bind:__l="__l" u-p="{{a}}"></nav-bar><image class="topBg absolute" src="{{b}}" mode="widthFix"></image><view wx:if="{{c}}" class="tabC fixed" style="{{e}}"><view wx:for="{{d}}" wx:for-item="item" wx:key="d" class="{{item.c}}" bindtap="{{item.e}}">{{item.a}} <view wx:if="{{item.b}}" class="line absolute"></view></view></view><view class="{{k}}" style="{{l}}"><view wx:if="{{f}}" style="width:750rpx;height:400rpx"><l-echart class="r" u-r="chartRef" u-i="42054871-1" bind:__l="__l"></l-echart></view><view class="section">关联描述</view><view class="des">{{h}}</view><view wx:if="{{i}}" class="section">信息来源</view><view class="list"><view wx:for="{{j}}" wx:for-item="item" wx:key="e" class="item"><view class="content">{{item.a}}</view><view class="article">——《{{item.b}}》</view><view class="authorDateC flex"><view class="author flex1">{{item.c}}</view><view class="date">{{item.d}}</view></view></view></view></view></view>

unpackage/dist/dev/mp-weixin/pages/index/stockDetails/stockDetails.wxss

@@ -35,6 +35,7 @@
   left: 0;
   right: 0;
   bottom: 0;
+  overflow-y: scroll;
 }
 .contentC .section {
   padding: 0 28rpx;
@@ -44,8 +45,45 @@
   color: #222;
 }
 .contentC .des {
-  padding: 0 30rpx;
+  padding: 0 0 30rpx;
+  margin: 0 25rpx;
+  border-bottom: solid 1rpx #E4E4E4;
+  line-height: 1.4rem;
   font-size: 24rpx;
   font-weight: 500;
   color: #666;
 }
+.contentC .list {
+  padding: 0 25rpx;
+}
+.contentC .list .item {
+  background-color: #F8F8F8;
+  margin-bottom: 20rpx;
+  padding: 30rpx 26rpx;
+  border-radius: 10rpx;
+}
+.contentC .list .item .content {
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #222;
+}
+.contentC .list .item .article {
+  margin-top: 10rpx;
+  font-size: 22rpx;
+  font-weight: 500;
+  color: #666;
+  text-align: right;
+}
+.contentC .list .item .authorDateC {
+  margin-top: 30rpx;
+  font-size: 22rpx;
+  font-weight: 500;
+  color: #AAA;
+}
+.contentC .list .item .authorDateC .author {
+  margin-right: 10rpx;
+}
+.contentC.radius {
+  margin-top: 10rpx;
+  border-radius: 20rpx 20rpx 0 0;
+}