<template> <!-- 折叠框 --> <view class="myCollapse"> <view class="head"> <view>{{title}}</view> <view v-if="title==='折射率'" class="headMid">注:折射率越高,镜片越薄,看着更美观。</view> <view class="headRighted" v-if="isOpen" @click="myCollapseChange(isOpen)"></view> <view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view> </view> <view class="body"> <block v-if="isOpen"> <view style="background-color: #FFFFFF;" class="funBox"> <block v-if="title==='镜片种类'"> <view class="noRange"> <block v-for="(item) in funList" :key="item.key"> <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" @click="choice(item.key-1,item.isChioce)">{{item.name}}</view> </block> </view> <view class="noRange"> <block v-for="(item,index) in funList2" :key="item.key"> <view v-bind:class="item.isChioce?'boxChoiced-C':'boxChoice-C'" :style="colorList[index]" @click="choice2(index,item.isChioce)"></view> </block> </view> </block> <block v-else> <view class="range" v-for="(item) in funList" :key="item.key">{{item.range}}</view> <view class="noRange"> <block v-for="(item) in funList" :key="item.key"> <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" @click="choice(item.key ? item.key - 1 : item.mid, item.isChioce || item.checked)" >{{item.name}}</view> </block> </view> <view v-if="funList2.length !== 0" class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view> <view class="noRange" style="max-width: 624rpx"> <block v-for="(item,index) in funList2" :key="item.key"> <view v-bind:class="item.isChioce?'boxChoiced':'boxChoice'" @click="choice2(index,item.isChioce)">{{item.name}}</view> </block> </view> </block> </view> </block> <block v-else> *<block v-for="(item,index) in funContent" :key="index"> <text v-if="item!==null">{{item}}</text> </block> </block> </view> </view> </template> <script> export default { props:{ isOpenProps:{ // 是否展开,默认 true type: Boolean, default: true }, funListProp:{ "name":String, "isChioce": Number, "key":Number }, funList2Prop:{ type:Array, } , funContentProp: { type: Array }, title:{ type: String, default: '' } }, data() { return { isOpen:this.isOpenProps, // 颜色数组要与传入的值手动相同 colorList:[ "background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);", "background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);", "background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);", "background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);", "background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);" ], funList: this.funListProp.attr || this.funListProp, funList2: this.funList2Prop || [], funContent: this.funContentProp }; }, methods:{ myCollapseChange(isopen){ this.isOpen = !isopen }, choice(index,isChoice) { if(this.funList[index].type==="fun") { this.funList[index].isChioce = !isChoice if(!isChoice) { this.funContent[index] = this.funList[index].name } else { this.funContent[index] = '' } } else if(this.funList[index].type==="kind") { for(let i=0;i<this.funList.length;i++){ this.funList[i].isChioce = false } this.funList[index].isChioce = !isChoice this.funContent[0]=this.funList[index].name } else { for(let i=0;i<this.funList.length;i++){ this.funList[i].isChioce = false } for(let i=0;i<this.funList2.length;i++){ this.funList2[i].isChioce = false } this.funList[index].isChioce = !isChoice this.funContent[0]=this.funList[index].name } }, choice2(index,isChoice){ if(this.funList2[index].type==="kind"){ for(let i=0;i<this.funList2.length;i++){ this.funList2[i].isChioce = false } this.funList2[index].isChioce = !isChoice this.funContent[1] = this.funList2[index].name } else { for(let i=0;i<this.funList.length;i++){ this.funList[i].isChioce = false } for(let i=0;i<this.funList2.length;i++){ this.funList2[i].isChioce = false } this.funList2[index].isChioce = !isChoice this.funContent[0]=this.funList2[index].name } } } } </script> <style lang="scss"> .myCollapse{ width: 100%; padding-bottom: 28rpx; margin-top: 7px; border-bottom: 1px solid #E9E9E9; .head{ display: flex; justify-content: space-between; height: 24px; // font-family: PingFangSC-Medium; font-size: 16px; color: #333333; letter-spacing: -0.3px; text-align: justify; line-height: 24px; margin-bottom: 18rpx; .headRighted{ width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #CFCFCF; transform: scaleY(-1); margin-top: 10px; } .headMid{ // font-family: PingFangSC-Regular; font-size: 10px; color: #999999; letter-spacing: -0.19px; margin-left: -120rpx; } .headRight{ width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #CFCFCF; margin-top: 10px; } } .body{ // font-family: PingFangSC-Regular; font-size: 12px; color: #666666; letter-spacing: 0; display: flex; flex-wrap: wrap; text{ padding-left: 4px; } } } .funBox { // display: flex; width: 100%; // flex-wrap: wrap; // max-width: 624rpx; .range{ // font-family: PingFangSC-Regular; font-size: 10px; color: #999999; letter-spacing: -0.19px; margin-bottom: 5px; } .noRange{ display: flex; flex-wrap: wrap; // max-width: 624rpx; // margin-bottom: 28rpx; .boxChoiced,.boxChoice{ height: 60rpx; border-radius: 4rpx; // font-family: PingFangSC-Regular; font-size: 12px; letter-spacing: 0; line-height: 60rpx; box-sizing: border-box; padding: 0 20rpx; margin-right: 20rpx; margin-bottom: 13rpx; } .boxChoiced{ background: rgba(255,107,74,0.15); color: #FF6B4A; } .boxChoice{ background: #F2F2F2; color: #666666; } .boxChoiced-C,.boxChoice-C{ width: 64rpx; height: 64rpx; border-radius: 32rpx; margin-right: 8px; } .boxChoiced-C{ opacity: 0.7; border: 1px solid #FF6B4A; } .boxChoice-C{ opacity: 0.7; border: 1px solid #FFFFFF; } } } </style>