商品列表

zhanghua

2025-05-28 46a0c082ee5b737a7cbaa3a6b33074a25806235d

商品列表

 manifest.json

@@ -5,6 +5,7 @@
    "versionName" : "4.5.3",
    "versionCode" : 4000503,
    "transformPx" : false,
    "sassImplementationName" : "node-sass",
    "app-plus" : {
        "compatible" : {
            "ignoreVersion" : true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持  
@@ -191,7 +192,7 @@
    "mp-weixin" : {
        /* 小程序特有相关 */
        "usingComponents" : true,
        "appid" : "wx4d124729082dda27",
        "appid" : "wx9df77312a8d26670",
        "optimization" : {
            "subPackages" : true
        },

 pages.json

@@ -109,6 +109,21 @@
                "navigationBarTitleText" : "发布视频",
                "enablePullDownRefresh" : false
            }
        },
        {
            "path" : "pages/goods-manager/goodsList/goodsList",
            "style" : 
            {
                "enablePullDownRefresh" : true,
                "navigationBarTitleText" : "商品列表"
            }
        },
        {
            "path" : "pages/goods-manager/addGoods/addGoods",
            "style" : 
            {
                "navigationBarTitleText" : ""
            }
        }



 pages/goods-manager/addGoods/addGoods.vue

New file
@@ -0,0 +1,167 @@
<template>
    <view class="add-goods">
        <div class="uForm">
            <u-form :border-bottom="false" :model="form" ref="uForm" :error-type="['toast']" :rule="rules">

                <u-form-item label="商品分类" label-width="130" prop="">
                    <div @click="showPicker">
                        {{ form.___path || '请选择所在地区' }}
                    </div>
                </u-form-item>

                <u-form-item class="border" label="商品名称" label-width="130" prop="name">
                    <u-input v-model="form.name" clearable placeholder="请输入商品名称" />
                </u-form-item>

                <u-form-item label="商品价格" label-width="130" prop="mobile">
                    <u-input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入商品价格" />
                </u-form-item>
                <u-form-item class="detailgoods" label="详细地址" label-width="130" prop="detail">
                    <u-input type="textarea" v-model="form.detail" maxlength="100" height="150" placeholder="街道楼牌号等" />
                </u-form-item>
                <u-form-item label="商品卖点" label-width="130">
                    <u-input type="textarea" v-model="form.alias" placeholder="请输入商品卖点" />
                </u-form-item>

                <u-form-item label="商品品牌" label-width="130" prop="">
                    <div @click="showPicker">
                        {{ form.___path || '请选择所在地区' }}
                    </div>
                </u-form-item>

                <u-form-item label="计量单位" label-width="130" prop="___path">
                    <div @click="showPicker">
                        {{ form.___path || '请选择所在地区' }}
                    </div>
                </u-form-item>


                <view class="opt-view">
                    <view class="img-title">上传图片（最多5张）</view>
                    <view class="images-view">
                        <u-upload :header="{ accessToken: storage.getAccessToken() }" :action="action" width="150"
                            @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
                    </view>
                </view>

                <div class="saveBtn" @click="save">保存</div>
            </u-form>

            <m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue"
                pickerSize="4">
            </m-city>

            <uniMap v-if="mapFlag" @close="closeMap" @callback="callBackgoods" />
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {}
        }
    },
    methods: {
        //图片上传
        onUploaded(lists) {
            let images = [];

            lists.forEach((item) => {
                images.push(item.response.result);
            });
            this.form.images = images;
        },
    },

    onLoad(option) {
        uni.showLoading({
            title: "加载中",
        });
        this.routerVal = option;
        console.log(option);

        if (option.id) {
            getGoodsDetail(option.id).then((res) => {
                const params = res.data.result;
                params.___path = params.consigneegoodsPath;
                this.$set(this, "form", params);

                if (this.$store.state.isShowToast) { uni.hideLoading() };
            });
        }
        uni.hideLoading();
    },
}
</script>

<style scoped lang="scss">
.detailgoods {
    /deep/ .u-form-item--left {
        display: flex;
        align-items: flex-start;
    }
}

.saveBtn,
.selectgoods {
    height: 70rpx;

    line-height: 70rpx;
    text-align: center;
    font-size: 30rpx;
    background: $aider-light-color;
    color: #fff;
    width: 70%;
    margin: 40rpx auto 0 auto;
    border-radius: 20rpx;
}

.selectgoods {
    margin-top: 40rpx;
    background: #fff;

    color: $aider-light-color;
    border: 2rpx solid $aider-light-color;
}

.uForm {
    width: 94%;
    overflow: hidden;
    left: 3%;
    position: relative;
    top: 2%;
    background: #fff;
    border-radius: 20rpx;
    padding: 0 0 40rpx 0;
}

.add-goods {
    width: 100%;
    padding-top: 3%;

    /deep/ .u-form-item {
        background-color: #fff;
        padding: 24rpx 30rpx;
    }

    .u-btn {
        margin: 30rpx 30rpx 0 30rpx;
        background-color: $main-color;
    }

    /deep/.u-checkbox {
        margin: 30rpx 30rpx 0 30rpx;

        .u-label-class.u-checkbox__label {
            color: $font-color-light;
            font-size: $font-sm;
        }
    }
}

/deep/ .u-checkbox__label {
    font-size: 28rpx;
}
</style>

 pages/goods-manager/goodsList/goodsList.scss

New file
@@ -0,0 +1,120 @@

.uni-flex {
    display: flex;
}

.uni-flex-row {
    @extend .uni-flex;
    flex-direction: row;
    box-sizing: border-box;
}

.uni-flex-column {
    @extend .uni-flex;
    flex-direction: column;
}

.uni-color-gary {
    color: #3b4144;
}

/* 标题 */
.uni-title {
    display: flex;
    margin-bottom: $uni-spacing-col-base;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    color: #3b4144;
}

.uni-title-sub {
    display: flex;
    // margin-bottom: $uni-spacing-col-base;
    font-size: $uni-font-size-base;
    font-weight: 500;
    color: #3b4144;
}

/* 描述 额外文本 */
.uni-note {
    margin-top: 10px;
    color: #999;
    font-size: $uni-font-size-sm;
}

/* 列表内容 */
.uni-list-box {
    @extend .uni-flex-row;
    flex: 1;
    margin-top: 10px;
}

/* 略缩图 */
.uni-thumb {
    flex-shrink: 0;
    margin-right: $uni-spacing-row-base;
    width: 125px;
    height: 75px;
    border-radius: $uni-border-radius-lg;
    overflow: hidden;
    border: 1px #f5f5f5 solid;
    image {
        width: 100%;
        height: 100%;
    }
}

.uni-media-box {
    @extend .uni-flex-row;
    // margin-bottom: $uni-spacing-col-base;
    border-radius: $uni-border-radius-lg;
    overflow: hidden;
    .uni-thumb {
        margin: 0;
        margin-left: 4px;
        flex-shrink: 1;
        width: 33%;
        border-radius:0;
        &:first-child {
            margin: 0;
        }
    }
}

/* 内容 */
.uni-content {
    @extend .uni-flex-column;
    justify-content: space-between;
}

/* 列表footer */
.uni-footer {
    @extend .uni-flex-row;
    justify-content: space-between;
    margin-top: $uni-spacing-col-lg;
}
.uni-footer-text {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
    margin-left: 5px;
}

/* 标签 */

.uni-tag {
    flex-shrink: 0;
    padding: 0 5px;
    border: 1px $uni-border-color solid;
    margin-right: $uni-spacing-row-sm;
    border-radius: $uni-border-radius-base;
    background: $uni-bg-color-grey;
    color: $uni-text-color;
    font-size: $uni-font-size-sm;
}

/* 链接 */
.uni-link {
    margin-left: 10px;
    color: $uni-text-color;
    text-decoration: underline;
}

 pages/goods-manager/goodsList/goodsList.vue

New file
@@ -0,0 +1,288 @@
<template>
    <view class="list">
        <view class='uni-list--waterfall'>
            <view class="uni-list ">
                <!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
                <!-- to 属性携带参数跳转详情页面，当前只为参考 -->
                <view :border="!formData.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
                    v-for="item in data" :key="item.id" @click="addGoods(item.id)">
                    <!-- 通过header插槽定义列表左侧图片 -->
                    <template v-slot:header>
                        <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }">
                            <image :src="item.goods_thumb" mode="aspectFill"></image>
                        </view>
                    </template>
                    <template v-slot:body>
                        <view class="shop">
                            <view>
                                <view class="uni-title">
                                    <text class="uni-ellipsis-2">{{ item.name }}</text>
                                </view>
                                <!-- <view>
                                    <text class="uni-tag hot-tag">{{ item.goods_tip }}</text>
                                    <text v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text>
                                </view> -->
                            </view>
                            <view>
                                <view class="shop-price">
                                    <text>¥</text>
                                    <text class="shop-price-text">{{ item.goods_price }}</text>
                                    <text>.00</text>
                                </view>
                                <view class="uni-flex-row">
                                    <view class="uni-note">{{ item.comment_count||0 }}条评论 月销量 {{
                                        item.month_sell_count||0 }}
                                    </view>
                                    <view class="uni-note ellipsis">
                                        <text class="uni-link">上架</text>

                                        <text class="uni-link" style="color:red;">删除</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                    <!-- 通过body插槽定义商品布局 -->

                </view>
            </view>
        </view>

        <button type="default" class="btn" @click="addGoods('')">
            <u-icon name="plus-circle"></u-icon>
            添加商品
        </button>
        <!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
        <uni-load-more v-if="loading || formData.status === 'noMore'" :status="formData.status" />

    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            formData: {
                waterfall: false, // 布局方向切换
                status: 'loading', // 加载状态
            },
            data: [
                {
                    "id": 122,
                    "goods_thumb": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/83df593e6ba448ddbe6685d928e6fa65.jpg",
                    "name": "【爆款】Apple iPhone 11 (A2223) 64GB 深空灰色 移动联通电信4G手机",
                    "goods_price": "699.00",
                    "goods_tip": "热卖中",
                    "tag": [
                        "热卖中",
                    ]
                },
                {
                    "id": 123,
                    "goods_thumb": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/83df593e6ba448ddbe6685d928e6fa65.jpg",
                    "name": "【爆款】Apple iPhone 11 (A2223) 64GB 深空灰色 移动联通电信4G手机",
                    "goods_price": "699.00",
                    "goods_tip": "热卖中",
                    "tag": [
                        "热卖中",
                    ]
                }
            ],
            formData: {
                status: 'loading', // 加载状态
            },
            tipShow: false // 是否显示顶部提示框
        };
    },
    onLoad() { },
    methods: {
        load(data, ended) {
            if (ended) {
                this.formData.status = 'noMore'
            }
        },
        addGoods(id) {
            console.log("addGoods:" + id);

            uni.navigateTo({
                url: `/pages/goods-manager/addGoods/addGoods${id ? "?id=" + id : ""}`,
            });
        }

    },
    /**
     * 下拉刷新回调函数
     */
    onPullDownRefresh() {
        this.formData.status = 'more'

    },
    /**
     * 上拉加载回调函数
     */
    onReachBottom() {

    }
};
</script>


<style lang="scss" scoped>
@import './goodsList.scss';

page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #efeff4;
    min-height: 100%;
    height: auto;
}

.tips {
    color: #67c23a;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    background-color: #f0f9eb;
    height: 0;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.3s;
}

.tips-ani {
    transform: translateY(0);
    height: 40px;
    opacity: 1;
}

.shop {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.shop-picture {
    width: 110px;
    height: 110px;
}

.shop-picture-column {
    width: 100%;
    height: 170px;
    margin-bottom: 10px;
}

.shop-price {
    margin-top: 5px;
    font-size: 12px;
    color: #ff5a5f;
}

.shop-price-text {
    font-size: 16px;
}

.hot-tag {
    background: #ff5a5f;
    border: none;
    color: #fff;
}

.button-box {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background: #007AFF;
    color: #fff;
}

.uni-flex-row {
    display: flex;

}

.uni-link {
    flex-shrink: 0;
    margin-right: 10px;
}

.ellipsis {
    margin-left: auto;
    display: flex;
    overflow: hidden;
}

.uni-ellipsis-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.uni-ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


// 默认加入 scoped ，所以外面加一层提升权重
.list {
    .uni-list--waterfall {

        /* #ifndef H5 || APP-VUE */
        // 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
        /deep/ .uni-list {
            /* #endif */
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 5px;
            box-sizing: border-box;

            /* #ifdef H5 || APP-VUE */
            // h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
            /deep/
            /* #endif */
            .uni-list-item--waterfall {
                // width: 50%;
                display: flex;
                box-sizing: border-box;
                margin-bottom: 10px;
                background-color: white;
                padding: 10px;

                .uni-list-item__container {
                    padding: 5px;
                    flex-direction: column;
                }
            }

            /* #ifndef H5 || APP-VUE */
        }

        /* #endif */
    }
}


.btn {
    background: $light-color;
    position: fixed;
    width: 690rpx;
    bottom: 60rpx;
    height: 80rpx;
    left: 30rpx;
    font-size: 30rpx;
    line-height: 80rpx;

    .u-icon {
        margin-right: 10rpx;
    }
}
</style>

 pages/tabbar/user/utils/tool.vue

@@ -101,7 +101,11 @@
            <image src="/static/mine/setting.png" mode=""></image>
            <view>设置</view>
          </view>
        
        <view class="interact-item" @click="navigateTo('/pages/goods-manager/goodsList/goodsList')">
          <image src="/static/mine/setting.png" mode=""></image>
          <view>商品管理</view>
        </view>
                
          
        </view>
      </div>
@@ -132,7 +136,8 @@
      const ignores = [
                '/pages/mine/set/setUp',
                '/pages/mine/set/editionIntro',
                '/pages/mine/set/feedBack'
                '/pages/mine/set/feedBack',
                '/pages/goods-manager/goodsList/goodsList'
            ]
            if (!ignores.includes(url)) {
                if (this.$options.filters.tipsToLogin('normal')) {