1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <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>
|
|
