主页布局价格处理价格小数点大小显示

components/canvasShow/basics/classifyHeader/app/index.vue

@@ -73,7 +73,8 @@
 											</image>
 											<!-- #endif -->
 											<div class="price">
-												¥ {{item.price}}
+                        ¥<span style="margin-left: 5rpx">{{item.price | radixPointBefore}}</span>
+                        <span style="font-size: 20rpx">{{item.price | radixPointAfter}}</span>
 											</div>
 											<!--                <div class="original-price">-->
 											<!--                  ¥ {{item.originalPrice}}-->
@@ -240,6 +241,7 @@ const API = require('../../../../../config/api')
 			height: auto;
 			overflow: hidden;
 			margin: 5upx 34upx;
+      background-color: #FAFAFA;
 
 			&+.btn-more {
 				margin-top: 20upx;
@@ -268,8 +270,8 @@ const API = require('../../../../../config/api')
 			}
 
 			&-warp {
-				height: 540upx;
-				width: 386upx !important;
+				height: 575rpx;
+				width: 386rpx !important;
 				margin-left: 18upx;
 				margin-right: 18upx;
 			}

components/canvasShow/basics/product/app/index.vue

@@ -96,13 +96,14 @@
 						</div>
 
 						<div class="item3" v-if="componentContent.productStyleValue == '3'">
-							<div class="item3_name">{{ item.productName }}</div>
+<!--							<div class="item3_name">{{ item.productName }}</div>-->
 							<div class="item3_image">
 								<img :src="item.image" fit="contain"></img>
 							</div>
-							<div class="item3_btn_row">
-								<div class="item3_btn">点击</div>
-							</div>
+              <div class="item3_name">{{ item.productName }}</div>
+<!--							<div class="item3_btn_row">
+
+							</div>-->
 						</div>
 
 						<div class="item4" v-if="componentContent.productStyleValue == '4'">
@@ -117,7 +118,7 @@
 								</div>
 
 								<div class="item4_arrow">
-									<img src="../../../static/images/product/icon_right_arrow.png">
+									<img src="http://36.138.125.206:8081/ceres-local-file/image/home_item_forward.png">
 								</div>
 							</div>
 
@@ -239,13 +240,14 @@
 
 					<div class="item3" @click="jumpProductDetail(item)"
 						v-if="componentContent.productStyleValue == '3'">
-						<div class="item3_name">{{ item.productName }}</div>
+<!--						<div class="item3_name">{{ item.productName }}</div>-->
 						<div class="item3_image">
 							<img :src="item.image" fit="contain"></img>
 						</div>
-						<div class="item3_btn_row">
+<!--						<div class="item3_btn_row">
 							<div class="item3_btn">点击</div>
-						</div>
+						</div>-->
+            <div class="item3_name">{{ item.productName }}</div>
 					</div>
 
 					<div class="item4" @click="jumpProductDetail(item)"
@@ -257,11 +259,15 @@
 							</div>
 							<div class="item4_info">
 								<div class="item4_name">{{ item.productName }}</div>
-								<div class="item4_price">¥{{ item.price }}</div>
+<!--								<div class="item4_price">¥{{ item.price }}</div>-->
+								<div class="item4_price">
+                  ¥<span style="margin-left: 5rpx">{{item.price | radixPointBefore}}</span>
+                  <span style="font-size: 20rpx">{{item.price | radixPointAfter}}</span>
+                </div>
 							</div>
 
 							<div class="item4_arrow">
-								<img src="../../../static/images/product/icon_right_arrow.png">
+								<img src="http://36.138.125.206:8081/ceres-local-file/image/home_item_forward.png">
 							</div>
 						</div>
 
@@ -299,7 +305,14 @@
 		methods: {
 			swiperChange(e) {
 				this.swiperCurrent = e.detail.current;
-			}
+			},
+
+      handlePrice(price) {
+			  //分割
+        let splitPrice = price.splice('.')
+        //使用
+        return `${splitPrice[0]}.<span style="font-size:12px;">${splitPrice[1]}</span>`
+      }
 		}
 	}
 </script>
@@ -327,7 +340,7 @@
 				flex-direction: row;
 
 				&.swiper {
-					height: 470upx;
+					height: 415rpx;
 				}
 			}
 
@@ -608,31 +621,36 @@
 					align-content: center;
 					justify-content: center;
 					align-items: center;
-					background: #F6F6F8;
-					box-shadow: 0upx 12upx 24upx 0upx #EDEDED;
-					border-radius: 24upx;
-					border: 1upx solid #FFFFFF;
-					width: 280upx;
-					height: 430upx;
-					margin: 10upx 20upx;
+					background: #ffffff;
+					box-shadow: 0rpx 12rpx 24rpx 0rpx #EDEDED;
+					border-radius: 24rpx;
+					border: 1rpx solid #FFFFFF;
+					width: 280rpx;
+					height: 380rpx;
+					margin: 10rpx 20rpx;
 
 					.item3_name {
+            height: 90rpx;
 						font-family: Source Han Sans CN;
 						font-weight: 400;
-						font-size: 24upx;
+						font-size: 24rpx;
 						color: #252744;
-						margin-top: 15upx;
+            //text-align: center;
+						margin-top:20rpx;
+            padding-left: 10rpx;
+            padding-right: 10rpx;
 					}
 
 					.item3_image {
-						margin: 15upx;
+						//margin: 15rpx;
 						width: 100%;
-
-						padding: 10upx;
+						//padding: 10rpx;
 						box-sizing:border-box;
 
 						img {
-							width: 100%;
+							width: 99.5%;
+              border-top-left-radius: 24rpx;
+              border-top-right-radius: 24rpx;
 						}
 					}
 
@@ -700,8 +718,8 @@
 
 						.item4_info {
 							height: 100%;
-							padding-top: 46upx;
-							padding-bottom: 46upx;
+							padding-top: 30rpx;
+							padding-bottom: 30rpx;
 							flex: 1;
 							display: flex;
 							flex-direction: column;
@@ -714,21 +732,21 @@
 							.item4_name {
 								font-family: Microsoft YaHei;
 								font-weight: bold;
-								font-size: 28upx;
+								font-size: 32rpx;
 								color: #252744;
 							}
 
 							.item4_price {
 								font-family: Source Han Sans CN;
-								font-weight: 400;
-								font-size: 28upx;
+								font-weight: bold;
+								font-size: 32rpx;
 								color: #252744;
 							}
 						}
 
 						.item4_arrow {
-							width: 20upx;
-							height: 20upx;
+							width: 21rpx;
+							height: 36rpx;
 							margin: 24upx;
 
 							img {

main.js

@@ -16,6 +16,12 @@ Vue.config.productionTip = false
 import store from './store'
 import _ from 'lodash'
 
+import { PriceFilter } from './utils/priceFilter.js'
+// 遍历文件中的所有方法注册为一个个的过滤器
+Object.keys(PriceFilter).forEach(key => {
+  Vue.filter(key, PriceFilter[key])
+})
+
 import {jump,jumpToTabbar,goBack,getJumpParam} from './utils/jumpUtil'
 
 Vue.prototype.$store = store

utils/priceFilter.js

@@ -0,0 +1,27 @@
+// 分别截取 价格小数点前后的数字
+export const PriceFilter = {
+  // 小数点前
+  radixPointBefore: price => {
+    if (price == undefined) {
+      return
+    }
+    price = price.toString()
+    if (price && price.indexOf(".") != -1) {
+      return price.substring(0, price.indexOf("."))
+    } else {
+      return price;
+    }
+  },
+  // 小数点后
+  radixPointAfter: price => {
+    if (price == undefined) {
+      return
+    }
+    price = price.toString()
+    if (price && price.indexOf(".") != -1) {
+      return price.substring(price.indexOf("."), price.length)
+    } else {
+      return ".00";
+    }
+  }
+}