公告修改

src/components/birthPopup/birthPopup.vue

@@ -122,9 +122,10 @@ export default {
     },
     // 获取用户信息
     getUserInfo() {
-      if (this.$store.state.userInfo.nickName) { this.nickName = this.$store.state.userInfo.nickName }
-      if (this.$store.state.userInfo.avatarUrl) { this.avatar = this.$store.state.userInfo.avatarUrl }
-      else {
+      if (this.$store.state.userInfo) {
+        this.nickName = this.$store.state.userInfo.nickName
+        this.avatar = this.$store.state.userInfo.avatarUrl
+      } else {
         this.avatar = "http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/jpg/02c0c235-daae-412d-bced-5fb315ad570e.jpg"
       }
     },

static/nativeComponents/Notice/index.js

 // static/nativeComponents/Notice/index.js
-let app = getApp()
+const app = getApp();
+const { DFSImg, $themeToLink } = app;
 Component({
   /**
    * 组件的属性列表
@@ -14,61 +15,68 @@ Component({
    * 组件的初始数据
    */
   data: {
-    timer:null,
-    newLeft : 0
+    singleImg: '',
+    CommonHeight: 0,
+    NoticeMargin: 0,
+    NoticePadding: 0
   },
 
-  ready(){
-    let marqueeWidth = 0;
-    let screenWidth = 0;
-    let _this = this
-    this.createSelectorQuery().select('.marquee').boundingClientRect(function(res){
-      if (res) {
-        marqueeWidth = res.width
-        _this.createSelectorQuery().select('.notice').boundingClientRect(function (res1) {
-          if (res1) {
-            screenWidth = res1.width
-
-            console.log(marqueeWidth, screenWidth, 'screenWidth')
-
-            if (marqueeWidth > screenWidth) {
-              _this.marqueeMove(marqueeWidth,screenWidth);
-            }else{
-              clearInterval(_this.data.timer);
-              _this.setData({
-                newLeft : 0
-              })
-            }
+  ready() {
+    let { noticeList, singleImage } = this.data.datas.componentData
+    singleImage = DFSImg(singleImage)
+    for (let i = 0; i < noticeList.length; i++) {
+      let imageUrl = DFSImg(noticeList[i].imageUrl)
+      noticeList[i].imageUrl = imageUrl
     }
-        }).exec()
-      }
-    }).exec()
-    
-
-    
+    this.setData({
+      singleImg: singleImage,
+      "data.datas.componentData.noticeList": noticeList
+    })
+    this.getNoticeHeight()
+    this.getNoticeMargin()
+    this.getNoticePadding()
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-    marqueeMove(marqueeWidth,screenWidth){
-      clearInterval(this.data.timer);
-      
-      this.data.timer = setInterval(() => {
+    onclickHandle(e) {
+      app.$themeToLink(this.data.datas.componentData.noticeList[e.currentTarget.dataset.index].link)
+    },
+    getNoticeMargin() {
       this.setData({
-          newLeft : this.data.newLeft - 1
+        NoticeMargin: this.data.datas.componentData.verticalMargin+'px '+this.data.datas.componentData.horizontalMargin+'px'
       })
-        if(Math.abs(this.data.newLeft) >= marqueeWidth + 200){
+    },
+    getNoticePadding() {
       this.setData({
-            newLeft: screenWidth
+        NoticePadding: this.data.datas.componentData.verticalPadding+'px '+this.data.datas.componentData.horizontalPadding+'px'
       })
-        }
-      },10)
-
     },
-    onclickHandle(){
-      app.$themeToLink(this.data.datas.componentData.link)
+    getNoticeHeight() {
+      if (this.data.datas.componentData.isChange) {
+        if (this.data.datas.componentData.imageWidth > this.data.datas.componentData.noticeWidth) {
+          this.setData({
+            CommonHeight: this.data.datas.componentData.imageWidth < 53 ? '53px' : this.data.datas.componentData.imageWidth + 'px'
+          })
+          return
+        } else if (this.data.datas.componentData.noticeWidth >= this.data.datas.componentData.imageWidth) {
+          this.setData({
+            CommonHeight: this.data.datas.componentData.noticeWidth < 53 ? '53px' : this.data.datas.componentData.noticeWidth + 'px'
+          })
+          return
+        }
+        this.setData({
+          CommonHeight: this.data.datas.componentData.noticeWidth > this.data.datas.componentData.imageWidth ? this.data.datas.componentData.noticeWidth + 'px' : this.data.datas.componentData.imageWidth + 'px'
+        })
+        return
+      } else {
+        this.setData({
+          CommonHeight: this.data.datas.componentData.noticeWidth < 53 ? '53px' : this.data.datas.componentData.noticeWidth + 'px'
+        })
+        return
+      }
     }
   }
 })

static/nativeComponents/Notice/index.json

 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "van-icon": "/static/vant/icon/index"
+  }
 }

static/nativeComponents/Notice/index.wxml

 <!--static/nativeComponents/Notice/index.wxml-->
-<view class="notice-wrap" style="background-color:{{datas.componentData.backgroundColor}}">
-<view class="notice" style="text-align:left;color:{{datas.componentData.fontColor}}; ">
-  <view class="marquee" style="left:{{newLeft * 2}}rpx" bindtap="onclickHandle">{{datas.componentData.content}}</view>
+<view class="notice" style="border-radius:{{datas.componentData.borderRadius}}px;background-color:{{datas.componentData.backgroundColor}};margin:{{NoticeMargin}};padding:{{NoticePadding}};height:{{(CommonHeight)}}">
+  <swiper autoplay interval="3000" vertical style="height:{{CommonHeight}}" circular>
+    <swiper-item wx:for="{{datas.componentData.noticeList}}" wx:key="{{index}}">
+      <view class="container" bindtap="onclickHandle" data-index="{{index}}" style="width: 100%;height:{{CommonHeight}}">
+        <block wx:if="{{item.imageUrl||datas.componentData.singleImage}}">
+          <view wx:if="{{datas.componentData.styleType===1}}">
+            <image class="notice-icon" style="width:{{datas.componentData.imageWidth}}px !important;height:{{datas.componentData.imageWidth}}px;" src="{{item.imageUrl}}" />
+          </view>
+          <view wx:else>
+            <image class="notice-icon" style="width:{{datas.componentData.imageWidth}}px !important;height:{{datas.componentData.imageWidth}}px;" src="{{singleImg}}" />
+          </view>
+        </block>
+        <view class="notice-content" style="font-size:{{datas.componentData.fontSize}}px;color:{{datas.componentData.fontColor}}">
+          <text class="content">{{item.title}}</text>
+        </view>
+        <van-icon class="notice-arrowhead" name="arrow" color="#000" wx:if="{{!datas.componentData.showArrow}}"></van-icon>
+      </view>
+    </swiper-item>
+  </swiper>
 </view>
-</view>
-

static/nativeComponents/Notice/index.wxss

 /* static/nativeComponents/Notice/index.wxss */
-.notice{
-  font-size: 32rpx;
+.notice {
   position: relative;
+}
+
+.notice .container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.container .notice-icon {
+  margin-left: 15px;
+  width: 100%;
+  border-radius: 6px;
+}
+
+.container .notice-content {
+  flex: auto;
+  margin-left: 15px;
+}
+
+.notice-content .content {
+  flex: auto;
+  word-wrap: break-word;
+  word-break: break-all;
   overflow: hidden;
-  height: 80rpx;
-  width: calc(100vw  - 40rpx);
-  margin-left: 20rpx;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
-.marquee {
-  position: absolute;
-  height: 80rpx;
-  line-height: 80rpx;
-  /* width: 100%; */
-  margin: 0 auto;
-  white-space: nowrap;
-  box-sizing: border-box;
+
+.container .notice-arrowhead {
+  margin: 0 15px;
+  width: 17px;
+  height: 17px;
 }