一、效果图

图片来源于网络

二、代码

<template><view class="container"><view class="top"><image src="../../static/img/home.png" class="home"></image></view><view class="content"><view class="scroll"><scroll-view scroll-y="auto"><ul class="ul"><li v-for="(item, index) in cakes" :key="index" :class="{ li: true, active_li: index == checkedIndex }" @click="checkedLI(index)">{{ item.name }}</li></ul></scroll-view></view><view class="cake"><view v-for="(item, index) in current_cakes" :key="index"><view v-for="(item2, index2) in item.detail" :key="index2"><view class="item"><view style="display: flex"><image :src="item2.src" class="img_cake"></image><view class="flex_center" style="flex-direction: column; margin-left: 20px"><view>{{ item2.name }}</view><view style="color: #ff5722; font-weight: bold; font-size: 16px">￥{{ item2.money }}</view></view></view><view class="flex_center number"><u-icon name="minus-circle" @click="reduce(index, index2)" size="50" style="margin-right: 10px"></u-icon><span style="font-size: 18px">{{ item2.number }}</span><u-icon name="plus-circle" @click="add(index, index2)" size="50" style="margin-left: 10px"></u-icon></view></view><u-gap height="10" bg-color="#e2e2e2" style="width: 100%"></u-gap></view></view></view></view><view class="bottom"><image src="/static/img/gwc.png" class="gwc_img"></image><view style="display: flex; align-items: center; margin-left: 30px; width: 75%; justify-content: space-between"><view>总计：{{ money }}元，共：{{ number }}件</view><u-button style="margin-right: 10px" type="primary">选好了</u-button></view></view></view>
</template><script>
export default {data() {return {cakes: [{ name: '蛋糕分类', id: '' },{name: '生日蛋糕',id: 'srdg',detail: [{ src: '/static/img/1.png', name: '动物乐园', money: '126', number: 0 },{ src: '/static/img/2.png', name: '森林莓莓', money: '160', number: 0 },{ src: '/static/img/3.png', name: '北海道', money: '178', number: 0 }]},{name: '休闲一刻',id: 'xxyk',detail: [{ src: '/static/img/2.png', name: '森林莓莓', money: '160', number: 0 },{ src: '/static/img/3.png', name: '北海道', money: '178', number: 0 }]}],money: 0,number: 0,checkedIndex: 1,current_cakes: []};},onLoad() {this.current_cakes = [];this.current_cakes.push(this.cakes[this.checkedIndex]);console.log(JSON.stringify(this.current_cakes));},onshow() {console.log('onshow');},methods: {checkedLI(index) {this.checkedIndex = index;this.current_cakes = [];this.current_cakes.push(this.cakes[this.checkedIndex]);},reduce(index, index2) {if (this.cakes[index+1].detail[index2].number > 0) {this.cakes[index+1].detail[index2].number--;this.money -= parseFloat(this.cakes[index+1].detail[index2].money);this.number--;}},add(index, index2) {this.cakes[index+1].detail[index2].number++;this.money += parseFloat(this.cakes[index+1].detail[index2].money);this.number++;}}
};
</script><style lang="less">
.container {display: flex;flex-direction: column;height: 100vh;width: 100%;.top {height: 30%;width: 100%;.home {width: 100%;height: 100%;}}.content {height: 60%;width: 100%;display: grid;grid-template-columns: 1fr 3fr;.scroll {background: #ece9e9;.ul {padding: 10rpx 10rpx;.li {text-align: center;height: 50px;line-height: 50px;}.li:first-child {font-size: 18px;}.active_li {background: #fff;}}}.cake {// display: grid;// grid-template-columns: 2fr 1fr;.item {margin: 10px 5px;display: flex;align-items: center;display: grid;grid-template-columns: 2fr 1fr;}.img_cake {width: 80px;height: 80px;}.flex_center {justify-content: center;display: flex;align-items: center;}.number {}}}.bottom {height: 10%;width: 100%;display: flex;align-items: center;border-top: 1px dashed #ff9800;.gwc_img {width: 80px;height: 80px;}}
}
</style>