New file |
| | |
| | | <template> |
| | | <view class="container"> |
| | | <scroll-view scroll-y="true" style="height: 70vh"> |
| | | <view class="categeryContainer"> |
| | | <view class="categeryItem" v-for="item in categeryList" :key="item.id" @click="chooseCategery(item.id,item.name)"> |
| | | <view class="cateGeryName" :class="{chooseCategeryStyle:chooseCategeryId==item.id}"> |
| | | {{item.name}} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | <view class="">您当前选择的商品类别是:{{categeryName}}</view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getMyActivityList |
| | | } from '@/api/supplier.js' |
| | | export default { |
| | | data() { |
| | | return { |
| | | categeryName:'', |
| | | chooseCategeryId: '', |
| | | categeryList: [], |
| | | |
| | | } |
| | | }, |
| | | methods:{ |
| | | // 父组件获取选择的分类 |
| | | getCategery() { |
| | | return this.chooseCategeryId |
| | | }, |
| | | chooseCategery(id,name){ |
| | | this.chooseCategeryId =id |
| | | this.categeryName = name |
| | | this.$emit("choose", this.chooseCategeryId) |
| | | } |
| | | }, |
| | | async mounted() { |
| | | const categeryList = await getMyActivityList(); |
| | | this.categeryList = categeryList.data.result; |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .categeryContainer { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | .categeryItem { |
| | | height: 120rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | .chooseCategeryStyle{ |
| | | color: #e06c75; |
| | | font-weight: bold; |
| | | font-size: 1.2em; |
| | | } |
| | | </style> |