UNION_NSI/target/classes/views/mobile/benefiting/goods.html

<!--#
layout("/mobile/platform.html"){
#-->
<style>
    .list-card {
        position: relative;
        margin: 10px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 8px 12px #ebedf0;
        width: auto;
    }

    .list-card > .content {
        padding: 16px 10px;
        display: flex;
        max-height: 100px;
    }

    .content-right {
        width: calc(100% - 150px);
        max-width: calc(100% - 150px);
        padding-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;
    }

    .cr-title {
        /*max-height: 40px;*/
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: bold;
    }

    .concat, .mobile, .union {
        font-size: 13px;
        line-height: 18px;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .operateDiv {
        text-align: right;
        padding-right: 10px;
        padding-bottom: 6px;
    }

    .operateDiv .van-button {
        height: 28px;
        border-radius: 8px;
        margin-left: 4px;
    }

    .desc_info div {
        font-size: 12px;
    }

    .tag {
        position: absolute;
        display: inline-block;
        background-color: #1867b0;
        color: #fff;
        font-size: 14px;
        top: 0px;
        border-radius: 6px;
        right: -3px;
        padding: 0px 6px;
        transform: rotate(16deg);
    }

</style>
<div id="app" v-cloak>
    <m-page-loading v-if="mLoading"></m-page-loading>
    <van-nav-bar title="货物展示" left-arrow placeholder fixed
                 @click-left="history.back()"></van-nav-bar>
    <!--<van-dropdown-menu>
        <van-dropdown-item v-model="pageForm.typeId" :options="typeList"></van-dropdown-item>
    </van-dropdown-menu>-->

    <van-tabs v-model="pageForm.typeId" @change="doSearch">
        <van-tab v-for="item in typeList" :title="item.typeName" :name="item.id"></van-tab>
    </van-tabs>

    <template>
        <van-list :finished="finished" :finished-text="tableData.length>0?'没有更多了':''"
                  v-if="tableData && tableData.length>0"
                  v-model="mLoading"
                  @load="pageData">
            <template v-for="o in tableData">
                <div class="list-card">
                    <div @click="showGoods(o)" class="content">
                        <van-image
                                height="100px"
                                width="100px"
                                radius="8"
                                :src="CREATE_PREVIEW_URL(o.imgUrl)"
                                class="van-image__img">
                        </van-image>
                        <div class="content-right">
                            <div class="cr-title">
                                <span>{{o.goodsName}}</span>
                            </div>
                            <div class="desc_info">
                                <div class="concat">
                                    <span>货物价格：</span>
                                    {{o.goodsPrice}}
                                </div>
                                <div class="mobile">
                                    <span>厂商：</span>
                                    {{o.manufacturer}}
                                </div>
                                <div class="mobile" style="display: flex">
                                    <span v-html="o.description"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </van-list>
    </template>
    <van-empty
            v-if="mLoading==false&&tableData.length==0"
            class="custom-image"
            image="/none.svg"
            description="暂无数据"
    ></van-empty>

</div>
<script>
    var vue = new Vue({
        el: '#app',
        mixins: [mobileMixins],
        data() {
            return {
                pageForm:{
                    projectId:null,
                    goodsNAme:null,
                    typeId:null,
                },
                typeList:[],
            }
        },
        methods: {
            doSearch(){
                this.pageForm.pageNumber=1
                this.pageData();
            },
            async pageData() {
                this.mLoading = true
                const resp = await $.post('/mobile/benefiting/onLoad', this.pageForm)
                if (resp.code === 0) {
                    this.tableData = resp.data.list
                    if (this.tableData.length === resp.data.totalCount) {
                        this.finished = true
                    } else {
                        this.pageForm.pageNumber++
                    }
                }
                this.mLoading = false
            },
            async getAllType() {
                const resp = await $.get('/platform/benefiting/type/findAllType')
                if (resp.code === 0) {
                    this.typeList = resp.data;
                    this.pageForm.typeId = this.typeList[0].id
                }
                await this.pageData();
            },
            showGoods(o){

            }
        },
        async created(){
            this.pageForm.projectId = GetQueryString("projectId")
            await this.getAllType();
        },
    });
</script>
<!--#
}
#-->