flx

src/components/add-tips/index.js

@@ -0,0 +1,69 @@
+
+const STORAGE_KEY = 'PLUG-ADD-MYAPP-KEY'
+Component({
+  properties: {
+    name: {
+      type: String,
+      value: '测试'
+    },
+    duration: {
+      type: Number,
+      value: 10
+    },
+    delay: {
+      type: Number,
+      value: 2
+    },
+    logo: {
+      type: String,
+      value: 'https://cdn.blog.makergyt.com/mini/assets/component-add_tips.png'
+    },
+    custom: {
+      type: Boolean,
+      value: false
+    }
+  },
+  lifetimes: {
+    attached: function () {
+      if (wx.getStorageSync(STORAGE_KEY)) return;
+      let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null
+      let { screenWidth } = wx.getSystemInfoSync()
+      this.setData({
+        navbarHeight: rect.bottom,
+        arrowR: screenWidth - rect.right + rect.width * 3 / 4 - 5,
+        bodyR: screenWidth - rect.right
+      })
+      this.startTimer = setTimeout(() => {
+        this.setData({
+          SHOW_TOP: true
+        })
+      }, this.data.delay * 1000)
+      this.duraTimer = setTimeout(() => {
+        this.shrink();
+      }, (this.data.duration + this.data.delay) * 1000)
+    },
+    detached: function () {
+      if (this.startTimer) clearTimeout(this.startTimer)
+      if (this.duraTimer) clearTimeout(this.duraTimer)
+    },
+  },
+  data: {
+    SHOW_TOP: false
+  },
+  methods: {
+    hidden: function () {
+      wx.setStorageSync(STORAGE_KEY, true)
+      this.shrink()
+    },
+    shrink: function () {
+      this.animate('#add-tips', [
+        { scale: [1, 1] },
+        { scale: [0, 0], ease: 'ease', transformOrigin: `calc(600rpx - ${this.data.arrowR}px) 1%` }
+      ], 500, function () {
+        this.setData({
+          SHOW_TOP: false
+        })
+      }.bind(this))
+    }
+  }
+})

src/components/add-tips/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/components/add-tips/index.wxml

@@ -0,0 +1,7 @@
+<view class="box" wx:if="{{SHOW_TOP}}" style="top:{{custom?navbarHeight:0}}px;" id="add-tips">
+  <view class='arrow' style="margin-right:{{arrowR}}px;"></view>
+  <view class='body' bindtap='hidden' style="margin-right:{{bodyR}}px;">
+    <image src="{{logo}}" class="logo"></image>
+    <view class="tips">选择"添加到我的小程序",使用更便捷</view>
+  </view>
+</view>

src/components/add-tips/index.wxss

@@ -0,0 +1,47 @@
+.box {
+  position: fixed;
+  right: 0;
+  z-index: 999;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  flex-direction: column;
+  width: 600px;
+}
+.arrow {
+  width: 0;
+  height: 0;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
+}
+.body {
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 42px;
+  padding: 10px;
+  zoom: 1.5;
+}
+.tips {
+  flex: 1;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+}
+.logo {
+  height: 42px;
+  width: 42px;
+  border-radius: 8px;
+  margin-right: 10px;
+}
+
+.button-view {
+  color: #04b040;
+  text-align: center;
+  font-size: 20px;
+  /* line-height: 22px; */
+  display: initial;
+}

src/layouts/Loading.jsx

@@ -22,7 +22,9 @@ export default (props) => {
           position: 'absolute',
           left: '-4vh',
           textAlign: 'center',
-          opacity: '0.8'
+          opacity: '0.8',
+          animation: ' logo-opacity 2s linear infinite',
+
         }}
       >
         收集人间美好

src/pages/MineUserAll/RefundMoney/CheckRefund/index.jsx

@@ -87,8 +87,8 @@ export default withLayout((props) => {
       refundReason: explain,
     }).then((res) => {
       Taro.hideLoading();
-        Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=0' })
-        Taro.showToast({
+      Taro.navigateTo({ url: '/pages/MineUserAll/AllOrder/index?tabJump=0' })
+      Taro.showToast({
         title: "退款成功",
         icon: "none",
         duration: 3000,
@@ -110,151 +110,154 @@ export default withLayout((props) => {
   }, [list]);
 
   return (
-    <view>      
+    <view>
       <view className='index-navbar'>
         <CustomNav title='售后退款' />
       </view>
-      <View className='box-content'>
-      <scroll-view scroll-y style='height: calc(100vh - 65px);' >
 
-        <view className='Refund-Content-box'>
+      <View className='box-content '>
+        <scroll-view scroll-y style='height: calc(100vh - 65px);' >
 
-          <view className='title-image'>
-            <image
-              mode='scaleToFill'
-              className='title-image-cup'
-              src={BlackSpot}
-            />
-            <text className='title-title-boss'>商品信息</text>
+          <view className='Refund-Content-box'>
+
+            <view className='title-image'>
+              <image
+                mode='scaleToFill'
+                className='title-image-cup'
+                src={BlackSpot}
+              />
+              <text className='title-title-boss'>商品信息</text>
+            </view>
           </view>
-        </view>
-        {/* 商品信息结束 */}
-        <view>
-          {(list || []).map((item) => {
-            return (
-              <view class='wrapper' key={item.orderId}>
-                <view class='left-complete-one'>
-                  <image className='left-image-1' src={ProCard_hot}></image>
-                  <view className='left-viewText'>
-                    返现￥{formatPrice(item.cashback)}
-                  </view>
-                  <view className='title-image'>
-                    <image
-                      className='image-1'
-                      mode='scaleToFill'
-                      src={item.poster}
-                    ></image>
-                    <image className='image-2' src={food}></image>
-                  </view>
-                  <view className='title-content'>
-                    <view className='Pro-title'>
-                      <view className='title-text'>
-                        {item.packageDescription}
+          {/* 商品信息结束 */}
+          <view>
+            {(list || []).map((item) => {
+              return (
+                <view class='wrapper' key={item.orderId}>
+                  <view class='left-complete-one'>
+                    <image className='left-image-1' src={ProCard_hot}></image>
+                    <view className='left-viewText'>
+                      返现￥{formatPrice(item.cashback)}
+                    </view>
+                    <view className='title-image'>
+                      <image
+                        className='image-1'
+                        mode='scaleToFill'
+                        src={item.poster}
+                      ></image>
+                      <image className='image-2' src={food}></image>
+                    </view>
+                    <view className='title-content'>
+                      <view className='Pro-title'>
+                        <view className='title-text'>
+                          {item.packageDescription}
+                          <text className='title-money-2'>
+                            数量：{item.amount}张
+                          </text>
+                        </view>
+                      </view>
+                      <text className='title-money'>
+                        ￥{formatPrice(item.unitPrice)}元
                         <text className='title-money-2'>
-                          数量：{item.amount}张
+                          门市价{formatPrice(item.standardPrice)}元
                         </text>
-                      </view>
-                    </view>
-                    <text className='title-money'>
-                      ￥{formatPrice(item.unitPrice)}元
-                      <text className='title-money-2'>
-                        门市价{formatPrice(item.standardPrice)}元
                       </text>
-                    </text>
-                    <view className='title-time'>
-                      有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
-                      {formatTime(item.endTime, "yyyy/MM/dd")}
+                      <view className='title-time'>
+                        有效期：{formatTime(item?.startTime, "yyyy/MM/dd")}-
+                        {formatTime(item.endTime, "yyyy/MM/dd")}
+                      </view>
                     </view>
                   </view>
+                  <view class='right-complete-two'>
+                    <view className='right-content'></view>
+                  </view>
                 </view>
-                <view class='right-complete-two'>
-                  <view className='right-content'></view>
-                </view>
-              </view>
-            );
-          })}
-        </view>
+              );
+            })}
+          </view>
 
-        {/* 卡片结束 */}
-        <view className='Refund-Content-box'>
-          <view className='title-image'>
-            <image
-              mode='scaleToFill'
-              className='title-image-cup'
-              src={BlackSpot}
-            />
-            <text className='title-title-boss'>退款原因</text>
+          {/* 卡片结束 */}
+          <view className='Refund-Content-box'>
+            <view className='title-image'>
+              <image
+                mode='scaleToFill'
+                className='title-image-cup'
+                src={BlackSpot}
+              />
+              <text className='title-title-boss'>退款原因</text>
+            </view>
+            {/* 退款结束 */}
+          </view>
+          <view className='Refund-content'>
+            {options.map((x) => {
+              return (
+                <text
+                  className={`Refund-star-view${x.key} ${checkeds.indexOf(x.key) > -1
+                    ? "bg2"
+                    : `Refund-star-view${x.key}`
+                    }`}
+                  key={x.key}
+                  onClick={() => viewOK(x)}
+                >
+                  {x.title}
+                </text>
+              );
+            })}
           </view>
-          {/* 退款结束 */}
-        </view>
-        <view className='Refund-content'>
-          {options.map((x) => {
-            return (
-              <text
-                className={`Refund-star-view${x.key} ${checkeds.indexOf(x.key) > -1
-                  ? "bg2"
-                  : `Refund-star-view${x.key}`
-                  }`}
-                key={x.key}
-                onClick={() => viewOK(x)}
-              >
-                {x.title}
-              </text>
-            );
-          })}
-        </view>
 
-        <view className='Refund-Content-box'>
-          <view className='title-image'>
-            <image
-              mode='scaleToFill'
-              className='title-image-cup'
-              src={BlackSpot}
+          <view className='Refund-Content-box'>
+            <view className='title-image'>
+              <image
+                mode='scaleToFill'
+                className='title-image-cup'
+                src={BlackSpot}
+              />
+              <text className='title-title-boss'>退款说明</text>
+            </view>
+          </view>
+          <view class='section'>
+            <Textarea
+              placeholder='请补充退款说明（选填）!'
+              onInput={(e) => setExplain(e.detail.value)}
+              confirm-type='done'
             />
-            <text className='title-title-boss'>退款说明</text>
           </view>
-        </view>
-        <view class='section'>
-          <Textarea
-            placeholder='请补充退款说明（选填）!'
-            onInput={(e) => setExplain(e.detail.value)}
-            confirm-type='done'
-          />
-        </view>
-        <view className='money-title'>
-          实付金额:{" "}
-          <text className='money-name'>{formatPrice(totalPrice.charges)}元</text>
-        </view>
-        <view className='money-title'>
-          已获返现:{" "}
-          <text className='money-name'>{formatPrice(totalPrice.cashback)}元</text>
-        </view>
-        <view className='money-title'>
-          退款金额:{" "}
-          <text className='money-name'>{formatPrice(totalPrice.refundPrice)}元</text>
-        </view>
-        <view className='ul-li-text'>
-          <view className='ul-li-view'></view>
-          <text className='ul-li-textname'>退款金额不可修改</text>
-        </view>
-        <view className='ul-li-text'>
-          <view className='ul-li-view'></view>
-          <text className='ul-li-textname'>
-            下单获得返现金额，会在退款时被扣除；
-          </text>
-        </view>
-        <view className='ul-li-text'>
-          <view className='ul-li-view'></view>
-          <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
-        </view>
+          <view className='money-title'>
+            实付金额:{" "}
+            <text className='money-name'>{formatPrice(totalPrice.charges)}元</text>
+          </view>
+          <view className='money-title'>
+            已获返现:{" "}
+            <text className='money-name'>{formatPrice(totalPrice.cashback)}元</text>
+          </view>
+          <view className='money-title'>
+            退款金额:{" "}
+            <text className='money-name'>{formatPrice(totalPrice.refundPrice)}元</text>
+          </view>
+          <view className='ul-li-text'>
+            <view className='ul-li-view'></view>
+            <text className='ul-li-textname'>退款金额不可修改；</text>
+          </view>
+          <view className='ul-li-text'>
+            <view className='ul-li-view'></view>
+            <text className='ul-li-textname'>
+              下单获得返现金额，会在退款时被扣除；
+            </text>
+          </view>
+          <view className='ul-li-text'>
+            <view className='ul-li-view'></view>
+            <text className='ul-li-textname'>退款将在七个工作日内原路退还。</text>
+          </view>
+
+          <view className='button-info'>
+            <Button className='button-box' onClick={() => onRefund()}>
+              提交申请
+            </Button>
+          </view>
+        </scroll-view>
+
+      </View>
 
-        <view className='button-info'>
-          <Button className='button-box' onClick={() => onRefund()}>
-            提交申请
-          </Button>
-        </view>
-      </scroll-view>
-</View>
     </view >
   );
 });

src/pages/MineUserAll/RefundMoney/CheckRefund/style.less

@@ -116,7 +116,7 @@
             //必须要
             -webkit-line-clamp: 1;
             -webkit-box-orient: vertical;
-             /* 多出文本省略号代替 */
+            /* 多出文本省略号代替 */
             text-align: left;
             font-size: 24px;
           }

src/pages/index/index.config.js

@@ -11,5 +11,6 @@ export default {
     "mp-cells": "weui-miniprogram/cells/cells",
     "mp-dialog": "weui-miniprogram/dialog/dialog",
     "mp-slideview": "weui-miniprogram/slideview/slideview",
+    "add-tips": "../../components/add-tips/index"
   }
 }

src/pages/index/index.jsx

@@ -1,7 +1,7 @@
 
 
 import React, { useState, useEffect } from 'react'
-import { useDidShow } from '@tarojs/taro'
+import Taro, { useDidShow } from '@tarojs/taro'
 import CustomNav from '@/components/CustomNav'
 import logo from '@/assets/icons/comm/logo_small.png'
 import { getHotelDetail } from '@/services/landlord'
@@ -49,9 +49,7 @@ export default withLayout((props) => {
     }
   }, [tab])
 
-  useEffect(() => {
 
-  }, [])
 
   useEffect(() => {
     if (roomId) {
@@ -72,9 +70,12 @@ export default withLayout((props) => {
 
   }, [roomId, hotelId])
 
-
   return (
     <view className='page-index'>
+      <add-tips
+        logo={logo}
+        custom
+        duration={-1} />
       <view className='index-navbar'>
         <CustomNav logo={titleLogo} title={titleRoom} />
       </view>