112 lines
2.6 KiB
Vue
112 lines
2.6 KiB
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> |