Merge branch 'test' into feature/feature_showcase_v1.1.0

components/modules/menuBox/tab.vue

@@ -210,7 +210,6 @@ export default {
         overflow: hidden;
         font-size: 0.13rem;
         text-overflow: ellipsis;
-        transition: font-size .1s;
         opacity: 0.8;
         span {
           white-space: nowrap;

components/modules/redBox/business/info.vue

 <template>
   <div class="red-info" v-show="redInfo.rid">
-    <div class="head">
-      <img v-if="redInfo.businessLogoUrl == ''" :src="channelInfo.defaultPhoneHeadAva" />
-      <img v-else-if="redInfo.businessLogoUrl == 'default'" :src="channelInfo.chatAdminAvaUrl" />
-      <img v-else :src="redInfo.businessLogoUrl" alt />
+    <div class="head" :style="{opacity: showHead ? '1' : '0'}">
+      <img v-if="redInfo.businessLogoUrl == ''" :src="channelInfo.defaultPhoneHeadAva" @load="showImg">
+      <img v-else-if="redInfo.businessLogoUrl == 'default'" :src="channelInfo.chatAdminAvaUrl" @load="showImg"/>
+      <img v-else :src="redInfo.businessLogoUrl" alt @load="showImg">
     </div>
     <div class="content-box">
       <div class="content">
@@ -26,8 +26,8 @@
     <div class="open-box" v-else-if="redInfo.advertUrlSwitchState">
       <a class="link" :href="redInfo.advertLink">{{ redInfo.advertBtName }}</a>
     </div>
-    <div class="advert-box" v-if="redInfo.advert">
-      <img :src="redInfo.advert" alt />
+    <div class="advert-box" v-if="redInfo.advert" :style="{opacity: showAdvert ? '1' : '0'}">
+      <img :src="redInfo.advert" alt @load="showAdvertImg"/>
     </div>
   </div>
 </template>
@@ -45,7 +45,10 @@ export default {
       wait: 6,
       isAjax: true,
       timer: null,
-      redTimer: null
+      redTimer: null,
+      showHead: false,
+      showAdvert: false,
+      oldSV: ''
     };
   },
   computed: {
@@ -59,27 +62,35 @@ export default {
     }
   },
   methods: {
+    showImg(){
+      this.showHead = true
+    },
+    showAdvertImg(){
+      this.showAdvert = true
+    },
     _getRed() {
       this.redInfo = {};
       clearTimeout(this.redTimer);
       this.redTimer = setTimeout(() => {
         this._robRedpacket();
         this.redTimer = null;
-      }, 500);
+      }, 100);
     },
     async _robRedpacket() {
       if (!this.isAjax) {
         return false;
       }
       this.isAjax = false;
-      const res = await robRedpacket({
+      const parm = {
         id: this.showRedInfo.id,
         uin: this.channelInfo.uin,
         channelId: this.channelInfo.id,
         sv: this.$md5(`${this.channelInfo.uin}_${this.userInfo.id}_${this.$redSV.rob}`)
-      });
+      }
+      const res = await robRedpacket(parm);
       this.isAjax = true;
       if (res.code === 200 && res.errorCode === 0) {
+        this.oldSV = this.$md5(`${this.channelInfo.uin}_${this.userInfo.id}_${this.$redSV.rob}`)
         this.redInfo = res.data;
         this._timerWait(res.data.wait);
       }
@@ -123,7 +134,11 @@ export default {
         this._getRed();
       }
     },
-    redInfo() {
+    redInfo(newVal) {
+      if (Object.keys(newVal).length === 0) {
+        this.showHead = false
+        this.showAdvert = false
+      }
       if (this.redInfo.rid) {
         if (this.redInfo.isExpire === 1) {
           this.$Bus.$emit('bus-editBusinessLis', 3);
@@ -156,6 +171,8 @@ export default {
     height: 0.65rem;
     border-radius: 50%;
     overflow: hidden;
+    background: #febe5c;
+    transition: opacity .3s;
     img {
       display: block;
       width: 100%;
@@ -191,6 +208,8 @@ export default {
     width: 2.55rem;
     height: 1.03rem;
     border: 0.02rem solid #febe5c;
+    background: #febe5c;
+    transition: all .3s;
     img {
       display: block;
       width: 100%;

components/modules/redBox/index.vue

@@ -120,21 +120,21 @@ export default {
 
 <style lang="less" scoped>
 .fade-enter,.fade-leave-to{
-  max-width: 0;
-  max-height: 0;
-  margin-top: 50vh;
-  margin-left: 50vw;
+  // max-width: 0;
+  // max-height: 0;
+  // margin-top: 50vh;
+  // margin-left: 50vw;
   opacity: 0;
 }
 .fade-enter-to,.fade-leave{
-  max-width: 100vw;
-  max-height: 100vh;
-  margin-left: 0;
-  margin-top: 0;
+  // max-width: 100vw;
+  // max-height: 100vh;
+  // margin-left: 0;
+  // margin-top: 0;
   opacity: 1;
 }
 .fade-enter-active,.fade-leave-active{
-  transition: all .3s cubic-bezier(0,0,0.58,1);
+  transition: all .6s cubic-bezier(0,0,0.58,1);
 }
 .red-box {
   position: absolute;

components/modules/redBox/password/index.vue

@@ -146,16 +146,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.fade-enter,.fade-leave-to{
-  opacity: 0;
-}
-.fade-enter-to,.fade-leave{
-  opacity: 1;
-}
-.fade-enter-active,.fade-leave-active{
-  transition: opacity .6s cubic-bezier(0,0,0.58,1);
-}
-
 .password {
   position: fixed;
   top: 0;
@@ -165,6 +155,9 @@ export default {
   z-index: 500;
   background-color: rgba(0, 0, 0, 0.3);
   overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .box {
     position: absolute;
     z-index: 100;

components/modules/sendBox/index.vue

@@ -206,14 +206,15 @@ export default {
 <style lang="less" scoped>
 .fade-enter,.fade-leave-to{
   max-height: 0;
+  padding: 0;
 }
 .fade-enter-to,.fade-leave{
   max-height: 1.5rem;
 }
 
-
 .left-enter,.left-leave-to{
   max-height: 0;
+  padding: 0;
 }
 
 .fade-enter-active,
@@ -314,10 +315,12 @@ export default {
       .login {
         padding: 0 0.1rem;
         line-height: 0.28rem;
+        border-radius: 0.28rem;
         background-color: var(--sendBox-icon-bg);
         border: 0.02rem solid var(--sendBox-text-border);
         span {
           color: var(--main-color);
+          filter: contrast(50%);
           cursor: pointer;
         }
       }

package.json

@@ -34,7 +34,7 @@
     "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
-    "@gdyfe/ink-marks": "^1.1.0",
+    "@gdyfe/ink-marks": "^1.1.4",
     "@gdyfe/uploader": "^2.2.2",
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/component-cache": "^1.1.5",

yarn.lock

@@ -2126,10 +2126,10 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
-"@gdyfe/ink-marks@^1.1.0":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@gdyfe/ink-marks/-/ink-marks-1.1.3.tgz#a0bf90713c38f4b61baea8c2423c1566c54bb621"
-  integrity sha512-NSkg7ZFq/4zyX6KqNnSU1tGIoHhpbYmCsEIB65esyDY4fRD3YrHePhqGQ7pgJxGMCKtJMAVjAvSkuwuAaI7Y+Q==
+"@gdyfe/ink-marks@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@gdyfe/ink-marks/-/ink-marks-1.1.4.tgz#9684e04fb2e35608321d503e271af0f3c1ffed75"
+  integrity sha512-N0KtCGDQVo2F6HUez2b1cTmwuLrtFgiPA4mrsAHoh1+I9HK+56GBzcJxfLubyCdUGCqgoihrm+JZ4OsBAvAhVw==
   dependencies:
     crypto-js "^4.0.0"
     dayjs "^1.8.34"