caoliancun/MP_XOIL_company_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

星油企业版更新

Browse Source
This commit is contained in:
caolc
2023-02-13 15:43:06 +08:00
parent 41c2629561
commit d6e55390f3
51 changed files with 5176 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
Financial/components/assessCard.vue Normal file
View File

@@ -0,0 +1,257 @@
<template>
<view class="assess_card_container">
<view @click="isShowDetailsFn(item,index)" v-for="(item,index) in interiorCardData" :key='index' class="'assess_card">
<view class="flex assess_card_content" :class="item.isShowDetails? 'assess_card_content_select' : ''">
<image v-if="item.isShowDetails" class="assess_card_content_select_img" :src="hotImg"></image>
<view class="assess_card_content_left flex">
<view class="assess_card_content_left_icon">
<image style="width: 70rpx;height: 70rpx;" :src="imgURL+item.icon" ></image>
</view>
<view class="assess_card_content_left_content">
<view class="assess_card_content_left_content_label">{{item.label}}</view>
<view class="assess_card_content_left_content_tip">{{item.tip}}</view>
</view>
</view>
<view class="assess_card_content_right">
<view class="assess_card_content_right_price">
￥{{Number(item.price).toFixed(2)}}
</view>
<view class="assess_card_content_right_oldPrice">
￥{{Number(item.oldPrice).toFixed(2)}}
</view>
</view>
</view>
<view :style="{maxHeight:item.isShowDetails?'100vh':'0px'}" class="assess_card_details">
<view class="assess_card_details_item" v-for="(detailsItem,detailsIndex) in item.details" :key='detailsIndex'>
{{detailsItem}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
assessCardData:{
type:Array,
default:()=>[]
}
},
data() {
return {
setTimeouts:null,
imgURL:this.global.newImgURL,
hotImg:require('../static/img/hot.png'),
interiorCardData: [
// {
// label: '评分 + 改善建议',
// tip: '组合评估',
// icon: '',
// price: '8.88',
// oldPrice: '12.88',
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'],
// isShowDetails: true
// },
// {
// label: '评分',
// tip: '单独评估',
// icon: '',
// price: '8.88',
// oldPrice: '12.88',
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'],
// isShowDetails: false
// },
// {
// label: '改善建议',
// tip: '单独评估',
// icon: '',
// price: '8.88',
// oldPrice: '12.88',
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'],
// isShowDetails: false
// }
]
}
},
created() {
this.initData();
this.$emit('productSelect',this.interiorCardData[0]);
console.log(this.interiorCardData,'this.interiorCardData')
},
methods: {
initData(){
if(this.assessCardData){
const productTypefilter = function(e){
switch(e){
case 'SA':
return {
label:'评分+改善建议',
tip:'组合评估',
icon:'zjplay1.png'
}
case 'S':
return {
label:'综合分数',
tip:'单独评估',
icon:'zjplay2.png'
}
case 'A':
return {
label:'改善建议',
tip:'单独评估',
icon:'zjplay3.png'
}
default :
return '----'
}
}
this.assessCardData.forEach((item,index)=>{
const productType = productTypefilter(item.productType)
this.interiorCardData.push({
isShowDetails: index==0?true:false,
...productType,
price:item.productRealPrice||'--',
oldPrice:item.productOldPrice||'--',
details:item.productIntroduces||[],
...item
})
})
}
},
isShowDetailsFn(item,index){
console.log(this.setTimeouts)
if(!this.setTimeouts){
this.interiorCardData.forEach((assessCardDataItem,assessCardDataIndex)=>{
if(index!==assessCardDataIndex){
assessCardDataItem.isShowDetails = false;
}else{
this.setTimeouts = setTimeout(()=>{
this.$emit('productSelect',this.interiorCardData[index]);
this.interiorCardData[index].isShowDetails = true;
this.setTimeouts = null
},500)
}
});
}
}
}
}
</script>
<style>
.assess_card_content_left_icon{
height: 100%;
display: flex;
align-items: center;
margin-right: 20rpx;
}
.assess_card_details_item:last-child{
margin-bottom: 20rpx;
}
.assess_card_details_item:first-child{
margin-top: 20rpx;
}
.assess_card_details_item{
font-size: 32rpx;
line-height: 50rpx;
}
.assess_card_content_right_price{
font-size: 40rpx;
font-weight: 600;
margin-bottom: 5rpx;
color: #EC4545;
}
.assess_card_content_right_oldPrice{
color: #BBBBBB;
font-size: 32rpx;
text-decoration: line-through;
}
.assess_card_content_left_content_tip{
font-size: 32rpx;
}
.assess_card_content_left_content_label{
font-size: 40rpx;
font-weight: 600;
margin-bottom: 5rpx;
}
.assess_card_content_select_img{
position: absolute;
width: 68rpx;
height: 76rpx;
left: -34rpx;
top: -38rpx;
}
.assess_card_content_left{
/* background-color: #007AFF; */
}
.flexShrink{
flex-shrink: 1;
}
/* .flexGrow{
flex: 1;
} */
.assess_card_details{
/* box-sizing: border-box; */
margin: 0 68rpx;
max-height: 0px;
transition: max-height .5s;
overflow: hidden !important;
}
.assess_card_content_right{
width: 30%;
height: 100%;
text-align: right;
}
.assess_card_content_left{
width: 70%;
height: 100%;
}
.assess_card_content_select{
border: 10rpx solid rgba(255, 103, 0, 0.5);
padding: 30rpx 30rpx !important;
}
.assess_card_content{
width: 100%;
height: 190rpx;
border-radius: 20px;
top: 0;
left: 0;
right: 0;
padding: 40rpx 40rpx;
box-sizing: border-box;
background-color: #FFFFFF;
position: relative;
}
.assess_card_container{
width: 100%;
}
.assess_card:last-child{
margin-bottom: 0px;
}
.select_assess_card{
max-height: 100vh;
min-height: 190rpx;
border-radius: 20px;
background: #FFFFFF;
margin-bottom: 40rpx;
position: relative;
color: #FF6700;
/* transition: max-height 2s; */
/* overflow: hidden; */
}
.assess_card {
min-height: 190rpx;
/* max-height: 190rpx; */
width: 100%;
border-radius: 20px;
background: #FFFFFF;
margin-bottom: 40rpx;
position: relative;
transition: min-height .5s;
color: #FF6700;
}
</style>