一、效果图
图片来源于网络
二、代码
javascript
<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>