YXGJ/cloud/commodityAdjustment/index.vue

<template>
    <view class="product">
        <view style="padding: 10px;background: #ffffff;">
            <My_search placeholder="搜索名称" @onSearch="onSearch"></My_search>
            <view class="tabs-box" v-if="typeList.length">
                <v-tabs ref="tabs" v-model="tabsActive" field="remarks" :pills="true" height="24px" pillsBorderRadius="12px"
                    pillsColor="#C30D23" pillsUnColor="#eee" bgColor="none" itemMargin="0 4px 0 0" color="#333333"
                    activeColor="#FFFFFF" :tabs="typeList" @change="changeClass" />
            </view>
        </view>
        <view class="header-line">
            <text>商品</text>
            <text>共{{total}}个</text>
        </view>
        <view class="list">
            <My_listbox ref="List" @getlist="getList" :bottomHeight="70">
                <view v-for="item in list" :key="item.sa_fadid" class="box">
                    <navigator @click="goDetail" :url="'/cloud/commodityAdjustment/detail?id='+item.sa_fadid" class="product-item">
                        <u-image :src="item.attinfos.length ? item.attinfos[0].url:''" :width="tovw(86)" :height="tovw(80)" :lazy-load="true" radius="5"></u-image>
                        <view class="product-info">
                            <text class="title u-line-1">{{ item.name }}</text>
                            <text class="price"><text style="margin-right: 2px;">￥</text>{{ CNY(item.pricetype != '阶梯价' ? item.price : item.price_deposit,'') }}<text style="margin-left: 2px;">元</text></text>
                        </view>
                    </navigator>
                    <view class="bottom">
                        <view :style="{'--color1':item.isonsale ? '#E3041F' : '#E3041F'}" class="status">{{ item.isonsale ? '上架' : '下架' }}</view>
                        <view class="change-date">{{ item.changedate }}</view>
                    </view>
                </view>
                
            </My_listbox>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            list:[],
            content: {
                "sys_enterpriseid": uni.getStorageSync('shop').sys_enterpriseid, //门店信息中获取
                "pageNumber": 1,
                "pageSize": 20,
                "where": {
                    "condition": "",
                    "class": ""
                }
            },
            typeList:[],
            tabsActive: 0,
            total:0
        }
    },
    methods: {
        goDetail () {
            this.$Http.editProduct = function (id){
                this.getList (true)
                delete this.$Http.editProduct
            }.bind(this)
        },
        onSearch (condition) {
            this.content.where.condition = condition
            this.getList(true)
        },
        changeClass(index) {
            this.tabsActive = index;
            this.content.where.class = this.typeList[index].value;
            this.getList(true);
        },
        getList(init = false) {
            return new Promise((resolve, reject) => {
                if (this.paging(this.content, init)) return resolve();
                this.$Http.basic({
                    "id": "20240515153202",
                    content: this.content
                }).then(res => {
                    this.total = res.total
                    this.$refs.List.setHeight()
                    this.$refs.List.RefreshToComplete()
                    resolve();
                    if (this.cutoff(res.msg)) return;
                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                    console.log("获取商品列表", this.list)
                    this.content = this.$refs.List.paging(this.content, res)
                })
            })
        },
        async getType () {
            this.getCustomClass("goodstype").then(list => {
                console.log("分类列表", list)
                this.typeList = list;
                this.typeList.unshift({remarks:'全部',value:''})
                this.getList()
            })
        },
        onLoad () {
            uni.setNavigationBarTitle({
                title:'商品调整',
            })
            this.getType()
        }
    },
}
</script>

<style lang="scss">
.product {
    box-sizing: border-box;
    font-family: Source Han Sans SC, Source Han Sans SC;
    .tabs-box {
        margin-top: 10px;
    }
    .header-line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        padding: 10px;
        font-weight: 400;
        font-size: 12px;
        color: #666666;
    }
    .list {
        .product-item {
            padding: 12px 10px 12px 0;
            margin-left: 10px;
            display: flex;
            align-items: center;
            align-content: center;
            background: #ffffff;
            border-bottom: 1px solid #DDDDDD;
            .product-info {
                flex: 1;
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                .title {
                    margin-bottom: 10px;
                    font-weight: bold;
                    font-size: 16px;
                    color: #333333;
                }
                .price {
                    font-weight: bold;
                    font-size: 18px;
                    color: #E3041F;
                    text {
                        font-weight: none;
                        font-size: 12px;
                    }
                }
            }
        }
        .box {
            background: #ffffff;
            margin-bottom: 10px;
            .bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                .status {
                    font-weight: bolder;
                    font-size: 12px;
                    position: relative;
                    padding-left: 7px;
                    color: var(--color1);
                    &::after {
                        content: '';
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: var(--color1);
                        position: absolute;
                        left: 0;
                        top: 6px;
                    }
                }
                .change-date {
                    font-weight: 400;
                    font-size: 12px;
                    color: #999999;
                }
            }
        }
    }
}
</style>