<template> <view class="content"> <view class="card"> <view class="cardHeader"> <!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> --> <block v-if="pIsoPen"> <view class="partentChecked" @click="pChange(pIsoPen)"> <span class="status correct"></span> </view> </block> <block v-else> <view class="partentCheck" @click="pChange(pIsoPen)"></view> </block> <image src="../../static/store.png" mode="aspectFill"></image> <text>非常戴镜</text> </view> <view class="cardBody"> <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> <template v-if="childIsOpen.child1"> <view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')"> <span class="status correct"></span> </view> </template> <template v-else> <view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view> </template> <view class="goodInfo"> <view class="imageWrap"> <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> </view> <view class="infoRight"> <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> <!-- <text class="icon">></text> --> </view> <view class="priceBox"> <view class="price">¥{{198}}</view> <text>(限购{{maxCount}}副)</text> <view class="counter"> <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> <text>{{count}}</text> <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> </view> </view> </view> </view> </view> <view class="cardBody"> <!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> --> <template v-if="childIsOpen.child2"> <view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')"> <span class="status correct"></span> </view> </template> <template v-else> <view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view> </template> <view class="goodInfo"> <view class="imageWrap"> <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> </view> <view class="infoRight"> <text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text> <view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text> <!-- <text class="icon">></text> --> </view> <view class="priceBox"> <view class="price">¥198</view> <text>(限购{{maxCount}}副)</text> <view class="counter"> <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> <text>{{count}}</text> <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> </view> </view> </view> </view> </view> </view> <view class="footer"> <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> <view class="footerRight"> <navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover"> <view class="paybtn">立即支付</view> </navigator> </view> </view> </view> </template> <script> export default { data() { return { totalPrice: 360, count:1, maxCount:20, pIsoPen: false, childIsOpen:{ "child1":true, "child2":true }, } }, onLoad() { } , methods: { counter(isadd){ if(isadd){ this.count >= this.maxCount? this.addDisabled = true:this.count++; }else{ this.count <= 1? this.desDisabled = true:this.count--; } }, pChange(isopen){ // console.log(isopen) this.pIsoPen=!isopen this.childIsOpen.child1=!isopen this.childIsOpen.child2=!isopen }, cChange(isopen,child){ // console.log(child) if(child==='child1'){ this.childIsOpen.child1=!isopen } if(child==='child2'){ this.childIsOpen.child2=!isopen } } } } </script> <style lang="scss"> .content { min-height: 100vh; background-color: #f2f2f2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20rpx 40rpx; box-sizing: border-box; .partentCheck{ width: 16px; height: 16px; border-radius: 18px; border: 1px solid #CFCFCF; background-color: #FFFFFF; } .partentChecked{ width: 18px; height: 18px; border-radius: 18px; background-color: #FF6B4A; .correct { display: inline-block; width: 5px; height: 1px; background: #FFFFFF; line-height: 0; font-size: 0; position: relative; top: -6px; left: 4px; -webkit-transform: rotate(45deg); } .correct:after { content: '/'; display: block; width: 8px; height: 1px; background: #FFFFFF; -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); } } .card{ background-color: #FFFFFF; border-radius: 16rpx; box-sizing: border-box; padding: 36rpx 36rpx 36rpx 18rpx; display: flex; flex-direction: column; align-items: center; justify-content: space-between; .cardHeader{ width: 100%; height: 36rpx; display: flex; align-items: center; justify-content: flex-start; image{ height: 32rpx; width: 32rpx; padding-left: 6px; padding-right: 10px; } text{ // font-family: PingFangSC-Regular; font-size: 14px; color: #333333; letter-spacing: -0.26px; } } .cardBody{ width: 100%; height: 300rpx; display: flex; align-items: center; justify-content: space-between; .goodInfo{ width: 95%; display: flex; flex-direction: row; justify-content: flex-start; padding-left: 6px; .imageWrap{ height: 188rpx; width: 188rpx; margin-right: 28rpx; image{ border-radius: 4px; height: 188rpx; width: 188rpx; } } .infoRight{ display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: 240rpx; .goodName{ font-size: 28rpx; color: #333333; } .describ{ width: 100%; height: 80rpx; box-sizing: border-box; padding: 10rpx; font-size: 20rpx; color: #999999; background: #F2F2F2; text{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } // .icon{ // transform: rotate(90deg); // } } .priceBox{ display: flex; justify-content: space-between; align-items: center; // margin-top: 26px; width: 100%; font-size: 14px; color: #999999; .price{ color: #FF6B4A; font-size: 28rpx; } .counter{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-size: 28rpx; color: #333333; width: 122rpx; .btn{ display: flex; justify-content: center; line-height: 32rpx; height: 32rpx; width: 32rpx; background-color: #F2F2F2; color: #CFCFCF; } } } } } } } .footer{ position: fixed; left: 0; bottom: 0px; height: 112rpx; width: 100%; background-color: #FFFFFF; font-size: 16px; display: flex; justify-content: space-between; align-items: center; .footerLeft{ display: flex; justify-content: center; align-items: center; width: 50%; color: #333333; text{ color: #FF6B4A; } } .footerRight{ display: flex; justify-content: flex-end; align-items: center; width: 50%; margin-right: 26rpx; .paybtn{ display: flex; justify-content: center; align-items: center; background: #FF6B4A; border-radius: 20px; border-radius: 20px; color: #FFFFFF; width: 204rpx; height: 80rpx; } } } } </style>