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>

.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%;
}

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: "正在结算......"
        });
    }
}