panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
dy-hu 1 year ago
parent
23f8445e56
commit
28f8f81773
4 changed files with 88 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      components/canvasShow/basics/classifyHeader/app/index.vue
  2. 82
      components/canvasShow/basics/product/app/index.vue
  3. 6
      main.js
  4. 27
      utils/priceFilter.js

8
components/canvasShow/basics/classifyHeader/app/index.vue
View File

@ -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;
}

82
components/canvasShow/basics/product/app/index.vue
View File

@ -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 {

6
main.js
View File

@ -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

27
utils/priceFilter.js
View File

@ -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";
}
}
}
Write Preview
Loading…
Cancel
Save