[新增] 封装价格组件

colorui/main.css

@@ -3881,8 +3881,10 @@ scroll-view.cu-steps .cu-item {
 
 .text-price::before {
 	content: "¥";
-	font-size: 24rpx!important;
-	margin-right: 4upx;
+	font-size: 28rpx!important;
+	margin-right: 4rpx;
+	font-weight: bold;
+	color: #FF0000;
 }
 
 .text-cut {

common/styles/common.css

@@ -322,6 +322,9 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 .lf-bg-gray {
 	background: #777777 !important;
 }
+.lf-color-price {
+	color: #FF0000 !important;
+}
 
 .lf-color-999{
 	color: #999999 !important;

components/lf-price/lf-price.vue

@@ -0,0 +1,46 @@
+<template>
+	<view>
+		<block v-if="isPoint">
+			<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice(1) }}</text>
+			<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text>
+		</block>
+		<block v-else>
+			<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }}</text>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			price: {
+				type: [Number, String],
+				default: ''
+			}
+		},
+		computed: {
+			// 是否存在小数点
+			isPoint(){
+				let price = parseFloat(this.$props.price).toString();
+				return price.indexOf('.') >= 0;
+			},
+			showPrice(){
+				let price = parseFloat(this.$props.price).toString(); // 过滤价格出现.00的情况
+				return function(type){
+					let price_arr = price.split('.');
+					if(type == 1){
+						return price_arr[0];
+					}else if(type == 2){
+						return price_arr[1];
+					}else{
+						return price_arr[0];
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	
+</style>

main.js

@@ -24,6 +24,10 @@ Vue.use(uView);
 import { $http } from '@/common/http.js';
 Vue.prototype.$http = $http;
 
+// 价格组件
+import lfPrice from './components/lf-price/lf-price.vue';
+Vue.component('lf-price', lfPrice);
+
 //骨架屏
 import Skeleton from './components/my-uni-skeleton/index.vue'
 Vue.component('skeleton', Skeleton);

pages/goodsDetail/index.vue

@@ -14,11 +14,8 @@
 					<view class="lf-font-40">{{ goods_detail.name }}</view>
 					<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
 						<view class="lf-flex price">
-							<view class="lf-font-bold">
-								<text class="lf-font-24">¥</text>
-								<text class="lf-font-42">{{ goods_detail.specs[0].selling_price }}</text>
-							</view>
-							<view>¥{{ goods_detail.specs[0].original_price }}</view>
+							<lf-price :price="goods_detail.specs[0].selling_price"></lf-price>
+							<view class="lf-m-l-20">¥{{ goods_detail.specs[0].original_price }}</view>
 							<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
 						</view>
 						<view class="lf-font-24">
@@ -204,17 +201,17 @@
 		padding: 0 32rpx;
 		padding-top: 20rpx;
 		background-color: #FFFFFF;
+		// .price>view:nth-of-type(1){
+		// 	color: #FF0000;
+		// 	margin-right: 22rpx;
+		// 	font-weight: bold;
+		// }
 		.price>view:nth-of-type(1){
-			color: #FF0000;
-			margin-right: 22rpx;
-			font-weight: bold;
-		}
-		.price>view:nth-of-type(2){
 			text-decoration: line-through;
 			color: #777777;
 			margin-right: 22rpx;
 		}
-		.price>view:nth-of-type(3){
+		.price>view:nth-of-type(2){
 			width: max-content;
 			padding: 0 18rpx;
 			height: 46rpx;

pages/index/index.vue

@@ -18,10 +18,7 @@
 						<text class="bought">{{ item.specs[0].sold_stock_text }}</text>
 					</view>
 					<view class="lf-row-between price">
-						<text class="lf-font-bold" v-if="item.specs[0]">
-							<text class="lf-font-24">￥</text>
-							<text class="lf-font-42">{{ item.specs[0].selling_price }}</text>
-						</text>
+						<lf-price :price="item.specs[0].selling_price" v-if="item.specs[0]"></lf-price>
 						<text class="lf-font-24 original-price" v-if="item.specs[0]">￥{{ item.specs[0].original_price }}</text>
 						<text v-else></text>
 						<button>立即抢购</button>