js开发蔬菜选购app

HUAWEI_Engineer

发布于 2021-6-4 15:07

958浏览

2收藏

js开发蔬菜选购app-鸿蒙开发者社区

<div class="container">


    <div class="container" id="target" show="{{flag === oneFlag}}">
        <div>
        <swiper id="swiperImage" class="swiper-style">
            <image src="{{$item}}" class="image-mode" focusable="true" for="{{imageList}}"></image>
        </swiper>
    </div>
        <search hint="{{pageWord.v}}" value="{{pageWord.b}}" focusable="true"
                @submit="submitColumn">
        </search>
            <tabs class="tabs" index="0" vertical="false" onchange="change">
            <tab-bar class="tab-bar" mode="fixed">
                <text class="tab-text" for="{{ item in titileList}}">{{ item }}
                </text>
            </tab-bar>



                <tab-content class="tabcontent" scrollable="true">
                    <div class="item-content" for="{{ item in contentList}}">
                        <list class="todo-wraper">
                            <list-item for="{{allList}}">
                                <div class="margin-comm" @click="detailPage">
                                    <div class="todo-total">
                                        <text class="todo-title">
                                            {{$item.title}}
                                        </text>
                                        <text class="todo-content">
                                            {{$item.content}}
                                        </text>
                                        <text class="todo-price">
                                            <span>
                                                ￥
                                            </span>
                                            <span>
                                                {{$item.price}}
                                            </span>
                                        </text>
                                    </div>
                                    <div class="width-comm">
                                        <image src="{{$item.imgSrc}}" class="container-home-image">
                                        </image>
                                    </div>
                                </div>
                            </list-item>
                        </list>
                    </div>
                </tab-content>
            </tabs>
        
    </div>
</div>
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.

.container {
    flex-direction: column;
    align-items: center;
}
.swiper-style {
    height: 300px;
    width: 100%;
    indicator-color: #4682b4;
    indicator-selected-color: #f0e68c;
    indicator-size: 10px;
    margin-left: 50px;
}
.container-my-more {
    flex-direction: column;
    margin-bottom: 65px;
}

.container-my-more-div {
    height: 40px;
    width: 100%;
}

.container-my-more-div-text {
    font-size: 30px;
    font-weight: 600;
    margin-left: 10px;
}

.container-my-more-divs {
    justify-content: space-around;
}

.container-my-more-divs-div {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 110px;
}

.container-bottom-div-image {
    width: 50px;
    height: 50px;
}
.title {
    font-size: 30px;
    text-align: left;
}

.titles {
    font-size: 30px;
    text-align: left;
    color: red;
}

.tabs {
    width: 100%;
    margin-bottom: 65px;
}

.tabcontent {
    width: 100%;
    height: 85%;
    justify-content: center;
}

.item-content {
    height: 100%;
    justify-content: center;
}

.item-title {
    font-size: 60px;
}

.tab-bar {
    height: 60px;
    border-color: #30a9e4f0;
    background-color: gold;
}

.tab-text {
    width: 100%;
    text-align: center;
    font-size: 24px;
}

.tab-text:active {
    color: red;
}

.todo-wraper {
    width: 100%;
    height: 100%;
}

.todo-title {
    width: 100%;
    font-size: 18px;
}

.todo-total {
    width: 80%;
    flex-direction: column;
}

.todo-title {
    width: 100%;
    font-size: 30px;
}

.todo-content {
    width: 100%;
    font-size: 26px;
    color: gray;
}

.todo-price {
    width: 100%;
    font-size: 40px;
    color: red;
}

.margin-comm {
    margin: 10px;
}

.width-comm {
    width: 50%;
}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.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.

import router from '@system.router';
import prompt from '@system.prompt';

export default {
    data: {
        imageList: ['/common/1.JPG', '/common/2.JPG', '/common/3.JPG', '/common/4.JPG','/common/5.jpg'],
        pageWord: {
            v: '搜索你喜欢的蔬菜吧',
            b: '西红柿',

        },
        priceTotal: 0,
        flag: 1,
        zeroFlag: 0,
        oneFlag: 1,
        twoFlag: 2,
        threeFlag: 3,
        fourFlag: 4,
        titileList: ['首页', '蔬菜','鸡蛋', '海鲜', '水果','酒水','零食'],
        contentList: ['First', 'Second', 'Third', 'Four'],
        latestList: [],
        hotList: [
                {
                    title: '大头菜 ',
                    content: '绿色食品',
                    price: '3元',
                    imgSrc: "/common/6.jpg"
                }, {
                       title: '土豆',
                       content: '绿色食品  ',
                       price: '2元',
                       imgSrc: "/common/8.jpg"
                   }, {
                          title: '芹菜',
                          content: '绿色食品 ',
                          price: '3元',
                          imgSrc: "/common/9.jpg"
                      }, {
                             title: '黄瓜',
                             content: '绿色食品 ',
                             price: '1499',
                             imgSrc: "/common/10.jpg"
                         }, {
                                title: '西兰花',
                                content: '绿色食品',
                                price: '769',
                                imgSrc: "/common/11.jpg"
                            }
        ],
        swipeToIndex(index) {
            this.$element('swiperImage').swipeTo({index: index});
        },
        fineProductList: [
                {
                    title: '茄子',
                    content: '绿色食品  ',
                    price: '3.5',
                    imgSrc: "/common/12.jpg"
                }, {
                       title: '秋葵',
                       content: '绿色食品 ',
                       price: '5.5',
                       imgSrc: "/common/13.jpg"
                   }, {
                          title: '长丝瓜 约500克',
                          content: '绿色食品',
                          price: '5',
                          imgSrc: "/common/14.jpg"
                      },
        ],
        wisdomList: [
                {
                    title: '鲜活大头虾 约500克',
                    content: '供养箱配送   ',
                    price: '36.9',
                    imgSrc: "/common/15.jpg"
                }, {
                       title: '鲜活大头虾 约500克',
                                       content: '供养箱配送   ',
                                       price: '36.9',
                       imgSrc: "/common/15.jpg"
                   }, {
                          title: '鲜活大头虾 约500克',
                                                             content: '供养箱配送   ',
                                                             price: '36.9',
                          imgSrc: "/common/15.jpg"
                      }, {
                             title: '鲜活大头虾 约500克',
                                                                                      content: '供养箱配送   ',
                                                                                      price: '36.9',
                             imgSrc: "/common/15.jpg"
                         }, {
                                title: '鲜活大头虾 约500克',
                                                                                                                  content: '供养箱配送   ',
                                                                                                                  price: '36.9',
                                imgSrc: "/common/15.jpg"
                            }],
        allList: [],
        icon: {

        },
        iconImageFlag: 1,
    clickAction() {
        router.replace({
            uri: 'pages/index/index',
            params: {}
        });
    },
    change(e) {
        this.allList = [];
        if (e.index === this.zeroFlag) {
            this.allList = [...this.hotList, ...this.fineProductList, ...this.wisdomList];
        } else if (e.index === this.oneFlag) {
            this.allList = this.hotList;
        } else if (e.index === this.twoFlag) {
            this.allList = this.fineProductList;
        } else if (e.index === this.threeFlag) {
            this.allList = this.wisdomList;
        }
    },
    onInit() {
        this.latestList = [...this.hotList, ...this.fineProductList, ...this.wisdomList]
        this.allList = [...this.hotList, ...this.fineProductList, ...this.wisdomList]
    },
    submitColumn(e) {
        prompt.showToast({
            message: e.text + '   正在搜索中...'
        });
    },
    detailPage() {
        router.push({
            uri: "pages/shoppingDetailsPage/shoppingDetailsPage"
        });
    },
    stickFloat() {
    },
    clickBuy() {
        this.iconImageFlag = this.oneFlag;
        this.flag = this.oneFlag;
        this.ifFlag();
    },
    clickShoppingCart() {
        this.iconImageFlag = this.threeFlag;
        this.flag = this.threeFlag;
        this.priceTotal = parseInt(this.zeroFlag);
        this.ifFlag();
    },
    clickMy() {
        this.iconImageFlag = this.fourFlag;
        this.flag = this.fourFlag;
        this.ifFlag();
    },
    ifFlag() {
        if (this.iconImageFlag === this.oneFlag) {
            this.icon.buys = this.icon.buy;
            this.icon.messages = this.icon.message;
            this.icon.shoppingCarts = this.icon.shoppingCart;
            this.icon.mys = this.icon.my;
        } else if (this.iconImageFlag === this.twoFlag) {
            this.icon.buys = this.icon.home;
            this.icon.messages = this.icon.messageSelect;
            this.icon.shoppingCarts = this.icon.shoppingCart;
            this.icon.mys = this.icon.my;
        } else if (this.iconImageFlag === this.threeFlag) {
            this.icon.buys = this.icon.home;
            this.icon.messages = this.icon.message;
            this.icon.shoppingCarts = this.icon.shoppingCartSelect;
            this.icon.mys = this.icon.my;
        } else if (this.iconImageFlag === this.fourFlag) {
            this.icon.buys = this.icon.home;
            this.icon.messages = this.icon.message;
            this.icon.shoppingCarts = this.icon.shoppingCart;
            this.icon.mys = this.icon.mySelect;
        }
    },
    addShopping(e) {
        if (e.checked) {
            this.priceTotal += parseInt(e.target.attr.value);
        } else {
            this.priceTotal -= parseInt(e.target.attr.value);
        }
    },
    clickSettlement() {
        prompt.showToast({
            message: "正在结算......"
        });
    }
}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.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.