微调组件显示

sfmind
1 parent 64df5ce5
Showing 2 changed files with 26 additions and 7 deletions
yudao-ui-app/components/yd-text-price/yd-text-price.vue
yudao-ui-app/pages/index/index.vue
 <template>
   <view>
-    <text v-for="(item, index) in textArray" :key="index" :style="{ 'font-size': (index === 1 ? integerSize : size) + 'px', 'color': color }">
+    <text v-for="(item, index) in textArray" :key="index" :style="{ fontSize: (index === 1 ? integerSize : size) + 'px', color, textDecoration }">
       {{ item }}
     </text>
   </view>
@@ -8,15 +8,20 @@
  
 <script>
 /**
- * 此组件简单的显示特定样式的(人名币)价格数字
+ * 此组件简单的显示（驼峰式）的价格
  */
 export default {
   name: 'yd-text-price',
   components: {},
   props: {
+    //货币符号
+    symbol: {
+      type: String,
+      default: '￥'
+    },
     price: {
       type: [String, Number],
-      default: '0.00'
+      default: ''
     },
     color: {
       type: String,
@@ -30,14 +35,28 @@ export default {
     //整形部分字体大小可单独定义
     intSize: {
       type: [String, Number],
-      default: 15
+      default: ''
+    },
+    //文字装饰，下划线，中划线等
+    decoration: {
+      type: String,
+      default: 'none'
+    }
+  },
+  data() {
+    return {
+      textDecoration: this.decoration
     }
   },
   computed: {
     textArray() {
-      let array = ['￥']
+      let array = []
+      if (this.price === '' || this.price === undefined) {
+        return []
+      }
+      array.push(this.symbol)
       if (!/^\d+(\.\d+)?$/.test(this.price)) {
-        console.error('组件<custom-text-price :text="???" 此处参数应为金额数字')
+        console.error('组件<yd-text-price :text="???" 此处参数应为金额数字')
       } else {
         let arr = parseFloat(this.price).toFixed(2).split('.')
         array.push(arr[0])
@@ -28,7 +28,7 @@
     <!--商品展示栏-->
     <yd-product-box :product-list="productList" :title="'每日上新'" show-type="normal"></yd-product-box>
     <yd-product-box :product-list="productList" :title="'热卖商品'" show-type="half"></yd-product-box>
-    <yd-product-more :product-list="productList" more-status="moreStatus"></yd-product-more>
+    <yd-product-more :product-list="productList" :more-status="moreStatus"></yd-product-more>
  
     <u-gap height="5px"></u-gap>
   </view>