From 171c2bbdaf9e5ec62fa13fad1079b86daca85d54 Mon Sep 17 00:00:00 2001
From: xuqingkai <xuqingkai@hd123.com>
Date: Sun, 7 Apr 2024 14:14:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20StatusTip=E7=BC=BA=E7=9C=81?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=9B=BE=E7=89=87mode=E5=92=8C=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=9B=BE=E7=89=87=E5=AE=BD=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/status-tip.md                  | 45 +++++++++-----
 src/pages/statusTip/Index.vue                 |  9 ++-
 .../components/wd-status-tip/index.scss       |  3 +-
 .../components/wd-status-tip/types.ts         | 32 ++++++++--
 .../wd-status-tip/wd-status-tip.vue           | 58 +++++++++----------
 5 files changed, 91 insertions(+), 56 deletions(-)

diff --git a/docs/component/status-tip.md b/docs/component/status-tip.md
index 0fe00342..f39803f8 100644
--- a/docs/component/status-tip.md
+++ b/docs/component/status-tip.md
@@ -1,24 +1,23 @@
 <frame/>
 
-#  StatusTip 缺省提示
+# StatusTip 缺省提示
 
 一般用于兜底占位展示。
 
 > 本组件使用图片均为外链，推荐将图片下载到开发者的服务器后通过自定义图片`URL`使用。
 
-
 ## 基本用法
 
 设置 `image` 修改展示缺省图片类型，默认为 `network`，可选值 `search`, `network`, `content`, `collect`, `comment`, `halo`, `message`。可设置 `tip` 来控制展示提示文案。
 
 ```html
-<wd-status-tip image="search" tip="当前搜索无结果"/>
-<wd-status-tip image="network" tip="该页面暂时无法访问"/>
-<wd-status-tip image="content" tip="暂无内容"/>
-<wd-status-tip image="collect" tip="暂无收藏"/>
-<wd-status-tip image="comment" tip="当前没有联系人名单哦～"/>
-<wd-status-tip image="halo" tip="支付失败，请重新订购"/>
-<wd-status-tip image="message" tip="已订阅全部消息"/>
+<wd-status-tip image="search" tip="当前搜索无结果" />
+<wd-status-tip image="network" tip="该页面暂时无法访问" />
+<wd-status-tip image="content" tip="暂无内容" />
+<wd-status-tip image="collect" tip="暂无收藏" />
+<wd-status-tip image="comment" tip="当前没有联系人名单哦～" />
+<wd-status-tip image="halo" tip="支付失败，请重新订购" />
+<wd-status-tip image="message" tip="已订阅全部消息" />
 ```
 
 ## 自定义大小
@@ -26,22 +25,36 @@
 通过 `image-size` 属性图片的大小。
 
 ```html
-<wd-status-tip image-size="100" image="search" tip="当前搜索无结果" />
+<wd-status-tip
+  :image-size="{
+          height: 200,
+          width: 300
+  }"
+  image="search"
+  tip="当前搜索无结果"
+/>
 ```
 
 ## 自定义图片
 
 需要自定义图片时，可以在 `image` 属性中传入任意图片 URL。
 
-
 ```html
 <wd-status-tip image="https://img.wot-design-uni.cn/static/1.jpg" tip="查看我的头像" />
 ```
 
 ## Attributes
 
-| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
-|-----|------|-----|-------|-------|---------|
-| image | 缺省图片类型，支持传入图片 URL | string | search / network / content / collect / comment / halo / message | network | - |
-| image-size	 | 图片大小，默认单位为 `px`	 | `string`/`number` | - | - | - |
-| tip | 提示文案 | string | - | - | - |
+| 参数       | 说明                           | 类型                          | 可选值                                                          | 默认值    | 最低版本 |
+| ---------- | ------------------------------ | ----------------------------- | --------------------------------------------------------------- | --------- | -------- |
+| image      | 缺省图片类型，支持传入图片 URL | string                        | search / network / content / collect / comment / halo / message | network   | -        |
+| image-size | 图片大小，默认单位为 `px`      | `string`/`number`/`ImageSize` | -                                                               | -         | -        |
+| tip        | 提示文案                       | string                        | -                                                               | -         | -        |
+| image-mode | 预览图片的 mode 属性           | `ImageMode`                   | -                                                               | aspectFit | 1.2.12   |
+
+### ImageSize
+
+| 参数   | 说明                      | 类型             | 可选值 | 默认值 | 最低版本 |
+| ------ | ------------------------- | ---------------- | ------ | ------ | -------- |
+| height | 图片高度，默认单位为 `px` | string \| number | -      | -      | 1.2.12   |
+| width  | 图片宽度，默认单位为 `px` | string \| number | -      | -      | 1.2.12   |
diff --git a/src/pages/statusTip/Index.vue b/src/pages/statusTip/Index.vue
index 8f1e3185..6596094b 100644
--- a/src/pages/statusTip/Index.vue
+++ b/src/pages/statusTip/Index.vue
@@ -29,7 +29,14 @@
     </demo-block>
 
     <demo-block title="自定义大小">
-      <wd-status-tip image-size="100" image="search" tip="当前搜索无结果" />
+      <wd-status-tip
+        :image-size="{
+          height: 200,
+          width: 300
+        }"
+        image="search"
+        tip="当前搜索无结果"
+      />
     </demo-block>
 
     <demo-block title="自定义图片">
diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss b/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
index e69ead25..d2a36b2d 100644
--- a/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
@@ -21,9 +21,8 @@
   flex-direction: column;
   align-items: center;
 
-  @include e(image) {
+  @include edeep(image) {
     margin: 0 auto;
-    display: block;
     width: 160px;
     height: 160px;
   }
diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts b/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts
index 20be84ad..74703a45 100644
--- a/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts
@@ -1,14 +1,26 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 13:49:00
- * @LastEditTime: 2024-03-18 17:19:32
+ * @LastEditTime: 2024-04-07 13:32:22
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\types.ts
  * 记得注释
  */
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeStringProp } from '../common/props'
+import type { ImageMode } from '../wd-img/types'
+
+export type ImageSize = {
+  /**
+   * 宽度
+   */
+  width: number | string
+  /**
+   * 高度
+   */
+  height: number | string
+}
 
 export const statusTipProps = {
   ...baseProps,
@@ -23,17 +35,25 @@ export const statusTipProps = {
 
   /**
    * 图片大小，默认单位为 `px`。
-   * 类型: string 或 number
+   * 类型: string 或 number 或 ImageSize
    * 默认值: 空字符串
    */
-  imageSize: makeStringProp(''),
-
+  imageSize: {
+    type: [String, Number, Object] as PropType<string | number | ImageSize>,
+    default: ''
+  },
   /**
    * 提示文案。
    * 类型: string
    * 默认值: 空字符串
    */
-  tip: makeStringProp('')
+  tip: makeStringProp(''),
+  /**
+   * 图片裁剪、缩放的模式
+   * 类型：string
+   * 默认值：'aspectFill'
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFill')
 }
 
 export type StatusTipProps = ExtractPropTypes<typeof statusTipProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue b/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
index f6a18e66..28bc2f4d 100644
--- a/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-06-12 10:04:19
- * @LastEditTime: 2024-01-26 12:42:13
+ * @LastEditTime: 2024-04-07 14:01:12
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
@@ -9,7 +9,7 @@
 -->
 <template>
   <view :class="`wd-status-tip  ${customClass}`" :style="customStyle">
-    <image v-if="imgUrl" class="wd-status-tip__image" :src="imgUrl" :style="imgStyle"></image>
+    <wd-img v-if="imgUrl" :mode="imageMode" :src="imgUrl" custom-class="wd-status-tip__image" :custom-style="imgStyle"></wd-img>
     <view v-if="tip" class="wd-status-tip__text">{{ tip }}</view>
   </view>
 </template>
@@ -26,37 +26,14 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, objToStyle } from '../common/util'
+import { computed, type CSSProperties } from 'vue'
+import { addUnit, isDef, isObj, objToStyle } from '../common/util'
 import { statusTipProps } from './types'
 
 const props = defineProps(statusTipProps)
 
-const imgUrl = ref<string>('') // 图片地址
-
-watch(
-  () => props.image,
-  () => {
-    checkType()
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
-const imgStyle = computed(() => {
-  let style: CSSProperties = {}
-  if (props.imageSize) {
-    style = {
-      height: addUnit(props.imageSize),
-      width: addUnit(props.imageSize)
-    }
-  }
-  return `${objToStyle(style)}`
-})
-
-function checkType() {
+// 图片地址
+const imgUrl = computed(() => {
   // 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
   let img: string = ''
   switch (props.image) {
@@ -84,8 +61,27 @@ function checkType() {
     default:
       img = props.image
   }
-  imgUrl.value = img
-}
+  return img
+})
+
+/**
+ * 图片样式
+ */
+const imgStyle = computed(() => {
+  let style: CSSProperties = {}
+  if (props.imageSize) {
+    if (isObj(props.imageSize)) {
+      isDef(props.imageSize.height) && (style.height = addUnit(props.imageSize.height))
+      isDef(props.imageSize.width) && (style.width = addUnit(props.imageSize.width))
+    } else {
+      style = {
+        height: addUnit(props.imageSize),
+        width: addUnit(props.imageSize)
+      }
+    }
+  }
+  return `${objToStyle(style)}`
+})
 </script>
 <style lang="scss" scoped>
 @import './index.scss';