ydd_front/mer_uniapp/components/PointsPrice.vue

<template>
	<view ref="textContainer" class="price-box acea-row w-full line-heightOne align-center">
		<view class="acea-row row-middle" v-if="parseFloat(pointsPrice.redeemIntegral)" ref="redeemIntegral">
			<image :src="`${urlDomain}crmebimage/presets/points_my.png`" :style="[iconStyle]"></image>
			<text class="icon-color semiBold" :style="[priceStyle, priceColor]">{{ pointsPrice.redeemIntegral }}</text>
		</view>
		<view
			v-if="parseFloat(pointsPrice.redeemIntegral) && (parseFloat(pointsPrice.price) || parseFloat(pointsPrice.payFee))"
			ref="hao" class="ml-4"> + </view>
		<view class="acea-row row-middle" v-if="parseFloat(pointsPrice.price) || parseFloat(pointsPrice.payFee)">
			<text class="icon-color semiBold ml-4"
				:style="[priceStyle, priceColor]">{{ pointsPrice.price || pointsPrice.payFee }}</text>
			<text :style="[unitStyle]" class="ml-4">元</text>
		</view>
	</view>
</template>

<script>
	/**
	 * 字数超过样式
	 */
	export const pointsStyle = {
		iconStyle: {
			width: '22rpx',
			height: '22rpx'
		},
		priceStyle: {
			fontSize: '22rpx',
		},
		unitStyle: {
			fontSize: '18rpx',
		},
	}
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	export default {
		components: {
			easyLoadimage
		},
		props: {
			//是否展示小字样式
			value: {
				type: Boolean,
				default: false,
			},
			//商品大小样式
			pointsPrice: {
				type: Object,
				default: function() {
					return {};
				}
			},
			//商品大小样式
			pointsGoodsStyle: {
				type: Object,
				default: function() {
					return {};
				}
			},
		},
		computed: {
			isOverflow() {
				return this.pointsPrice.redeemIntegral > 9999 && this.pointsPrice.price > 9999;
			},
			// 价格
			priceStyle() {
				return this.isOverflow && this.value ? this.pointsStyle.priceStyle : this.pointsGoodsStyle.priceStyle
			},
			//单位
			unitStyle() {
				return this.isOverflow && this.value ? this.pointsStyle.unitStyle : this.pointsGoodsStyle.unitStyle
			},
			// 图标
			iconStyle() {
				return this.isOverflow && this.value ? this.pointsStyle.iconStyle : this.pointsGoodsStyle.iconStyle
			},
			// 价格颜色
			priceColor() {
				return this.pointsGoodsStyle.priceColor ? this.pointsGoodsStyle.priceColor : ''
			},
		},
		data() {
			return {
				pointsStyle: pointsStyle,
				urlDomain: this.$Cache.get("imgHost"),
			}
		},
	}
</script>

<style scoped lang="scss">
	.acea-row {
		flex-wrap: nowrap;
	}

	.price-box {
		width: auto;
		//font-size: 24rpx;
		font-weight: 500;
		color: #666;

		image {
			width: 31rpx;
			height: 31rpx;
			margin-right: 6rpx;
		}
	}

	.sales {
		color: #999999;
		margin-top: 8rpx;
	}
</style>