|
|
@@ -0,0 +1,1524 @@
|
|
|
+<template>
|
|
|
+ <div class="page-wrap">
|
|
|
+ <div class="crumbs">
|
|
|
+ <el-breadcrumb separator="/">
|
|
|
+ <i class="el-icon-eleme"></i>商品列表
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ <div class="background">
|
|
|
+ <div class="leftbox">
|
|
|
+ <ul class="storelist">
|
|
|
+ <li v-for="(item,index) in goodsTypeList" :class="item.selected ? 'selected' : ''"@click="debouncedClickType(item)" @mouseenter="showIcon(item,index)"@mouseleave="hideIcon(item,index)">
|
|
|
+ <span class="store_name">{{item.goodsTypeName}}
|
|
|
+ <span class="goods-count">{{item.goodsCounts || 0}}</span>
|
|
|
+ <span class="" v-if="item.newFlag">上新</span>
|
|
|
+ </span>
|
|
|
+ <i class="el-icon-top" v-show="item.showIcon" @click="debouncedChangOrderKey(item.goodsTypeId,1)"></i>
|
|
|
+ <i class="el-icon-edit" v-show="item.showIcon" @click="updateType(item)"></i>
|
|
|
+ <i class="el-icon-delete" v-show="item.showIcon" @click="deleteType(item)"></i>
|
|
|
+ <i class="el-icon-upload2" v-show="item.showIcon" @click="debouncedChangOrderKey(item.goodsTypeId,2)"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul>
|
|
|
+ <li class="mr-t-10" style="display: flex;">
|
|
|
+ <div class="newkind" style="width: 70px;color: #666" @click="addType">新建分类</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="topbox">
|
|
|
+ <el-col :span="20" :xs="24">
|
|
|
+ <el-row :gutter="10" v-show="!isSort">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addGoods"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button plain icon="el-icon-edit" size="mini" :disabled="!allGoodsList.length > 0" @click="sortGoods"
|
|
|
+ >排序管理</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10" v-show="isSort">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button plain icon="el-icon-plus" size="mini" @click="closeSortGoods"
|
|
|
+ >取消排序</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="debouncedUpdateSort"
|
|
|
+ >保存排序</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rightbox">
|
|
|
+ <div style="flex: 1; overflow-y: auto; min-height: 0;">
|
|
|
+ <el-table
|
|
|
+ v-if="!isSort"
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="goodsList"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
|
|
|
+ style="width: 100%; margin-top: 10px"
|
|
|
+ @cell-mouse-enter="mouseEnter"
|
|
|
+ @cell-mouse-leave="mouseLeave"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-table-column label="商品" width="500">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell">
|
|
|
+ <div class="left-nav">
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ trigger="hover">
|
|
|
+ <div slot="reference">
|
|
|
+ <div class="goods-img text-align">
|
|
|
+ <div class="search-icon">
|
|
|
+ <span class="el-icon-zoom-in" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></span>
|
|
|
+ <span class="goods-status">{{scope.row.status === 1 || (showGoodsIcon && rowId === scope.row.__ob__.dep.id) ? '' : '已下架'}}</span>
|
|
|
+ </div>
|
|
|
+ <span v-if="scope.row.status !== 1">
|
|
|
+ <div class="transparent-layer block-model el-popover__reference"></div>
|
|
|
+ </span>
|
|
|
+ <span v-if="scope.row.status === 1">
|
|
|
+ <div class="transparent-layer el-popover__reference" tabindex="0"></div>
|
|
|
+ </span>
|
|
|
+ <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 60px;height: 60px">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popover-modal">
|
|
|
+ <img :src="scope.row.pictureUrl" alt class="width-150">
|
|
|
+ <div>
|
|
|
+ <div class="text-align width-150 mr-t-10">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :action="updatePicUrl"
|
|
|
+ :file-list="fileList"
|
|
|
+ :limit="1"
|
|
|
+ :multiple="false"
|
|
|
+ list-type="picture"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :on-success="successUpload"
|
|
|
+ :data="uploadData">
|
|
|
+ <el-button size="small" type="primary" @click="changePic(scope.row.goodsId)">更换</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ {{scope.row.goodsName}}
|
|
|
+ <span class="has-new-g" v-if="scope.row.newGoodsFlg === 1">新品</span>
|
|
|
+ <el-popover
|
|
|
+ placement="left"
|
|
|
+ width="300"
|
|
|
+ trigger="click"
|
|
|
+ ref="updateNameRef"
|
|
|
+ @show="showName(scope.row)"
|
|
|
+ @hide="hideName(scope.row)"
|
|
|
+ :append-to-body="false">
|
|
|
+ <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
|
|
|
+ <div class="popover-modal">
|
|
|
+ <p>修改商品名称</p>
|
|
|
+ <br>
|
|
|
+ <el-input placeholder="请输入内容" v-model="scope.row.goodsName"></el-input>
|
|
|
+ <div class="comfirm">
|
|
|
+ <el-button round @click="canceUpdateName(scope.row)">取消</el-button>
|
|
|
+ <el-button type="primary" round @click="debouncedUpdateGoodsName(scope.row.goodsId,scope.row.goodsName)">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>月售{{scope.row.salesCount}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="价格" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell">
|
|
|
+ <span class="pd-r-10" v-if="scope.row.skuList.length === 1">￥{{ scope.row.skuList[0].costPrice || 0
|
|
|
+ }}</span>
|
|
|
+ <span class="pd-r-10" v-if="scope.row.skuList.length > 1">￥{{ scope.row.skuList[0].costPrice }}起</span>
|
|
|
+ <el-popover
|
|
|
+ placement="left"
|
|
|
+ width="300"
|
|
|
+ :key="`price-${scope.row.goodsId}`"
|
|
|
+ trigger="click"
|
|
|
+ @hide="hidePrice()"
|
|
|
+ :append-to-body="false">
|
|
|
+ <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
|
|
|
+ <form class="popover-modal">
|
|
|
+ <p>修改价格</p>
|
|
|
+ <input type="text" name="shop_id" style="display: none">
|
|
|
+ <div class="mutiple-specifications">
|
|
|
+ <div v-for="(item,index) in scope.row.skuList">
|
|
|
+ <span>{{item.modelName}}</span>
|
|
|
+ <el-input placeholder="请输入价格" v-model="item.costPrice">
|
|
|
+ <template slot="append">元</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="comfirm">
|
|
|
+ <el-button round @click="canceUpdatePrice">取消</el-button>
|
|
|
+ <el-button type="primary" round @click="debouncedUpdateGoodsPrice(scope.row.goodsId,scope.row.skuList)">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="库存" min-width="170px" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell" v-if="scope.row.skuList.length === 1">
|
|
|
+ <div class="stock-list" >
|
|
|
+ <span style="width: 70px;">{{scope.row.skuList[0].inventory}}</span>
|
|
|
+ <el-popover
|
|
|
+ placement="left"
|
|
|
+ :key="`count-${scope.row.goodsId}`"
|
|
|
+ width="400"
|
|
|
+ trigger="click"
|
|
|
+ @hide="hidePrice()"
|
|
|
+ :append-to-body="false"
|
|
|
+ style="margin-left: 5px">
|
|
|
+ <i class="el-icon-edit-outline" slot="reference" style="color: #5cb6ff;font-size: 18px" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></i>
|
|
|
+
|
|
|
+ <div class="popover-modal">
|
|
|
+ <p style="text-align: center">修改库存</p>
|
|
|
+ <div>
|
|
|
+ <div class="sku-mutiple-input" v-for="(item,index) in scope.row.skuList">
|
|
|
+ <span class="item-name">{{item.modelName}}</span>
|
|
|
+ <div class="list-item">
|
|
|
+ <el-input v-model="item.inventory" style="width: 140px"></el-input>
|
|
|
+ </div>
|
|
|
+ <el-link :underline="false" style="width: 40px;font-size: 12px" @click="resetedOne(item)">沽清</el-link>
|
|
|
+ <el-link :underline="false" style="width: 40px;font-size: 12px" @click="addOne(item)">置满</el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="comfirm">
|
|
|
+ <el-button round @click="canceUpdateCount">取消</el-button>
|
|
|
+ <el-button type="primary" round @click="debouncedUpdateGoodsInventory(scope.row.skuList)">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <span>
|
|
|
+ <el-link :underline="false" style="width: 40px;font-size: 12px" @click="debouncedResetAll(scope.row.skuList)">沽清</el-link>
|
|
|
+ <el-link :underline="false" style="width: 40px;font-size: 12px" @click="debouncedAddAll(scope.row.skuList)">置满</el-link>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="cell" v-if="scope.row.skuList.length > 1">
|
|
|
+ <div class="stock-list" >
|
|
|
+ <span style="width: 70px;">多库存</span>
|
|
|
+ <el-popover
|
|
|
+ width="400"
|
|
|
+ trigger="click"
|
|
|
+ placement="left"
|
|
|
+ @hide="hidePrice()"
|
|
|
+ :key="`moreCount-${scope.row.goodsId}`"
|
|
|
+ :append-to-body="false"
|
|
|
+ style="margin-left: 5px">
|
|
|
+ <el-link :underline="false" slot="reference" style="font-size: 12px">库存管理</el-link>
|
|
|
+ <div class="popover-modal">
|
|
|
+ <p style="text-align: center">修改库存</p>
|
|
|
+ <div>
|
|
|
+ <div class="sku-mutiple-input" v-for="(item,index) in scope.row.skuList">
|
|
|
+ <span class="item-name">{{item.modelName}}</span>
|
|
|
+ <div class="list-item">
|
|
|
+ <el-input v-model="item.inventory" style="width: 140px"></el-input>
|
|
|
+ </div>
|
|
|
+ <el-link :underline="false" style="width: 40px;font-size: 12px" @click="resetedOne(item)">沽清</el-link>
|
|
|
+ <el-link :underline="false" style="width: 40px;font-size: 12px" @click="addOne(item)">置满</el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="comfirm">
|
|
|
+ <el-button round @click="canceUpdateCount">取消</el-button>
|
|
|
+ <el-button type="primary" round @click="debouncedUpdateGoodsInventory(scope.row.skuList)">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell">
|
|
|
+ <div>
|
|
|
+ <el-link :underline="false" v-if="scope.row.newGoodsFlg === 0" style="width: 60px;font-size: 12px;padding-right: 10px" @click="debouncedSetNewGoods(scope.row)">设置新品</el-link>
|
|
|
+ <el-link :underline="false" v-if="scope.row.newGoodsFlg === 1" style="width: 60px;font-size: 12px;padding-right: 10px" @click="debouncedSetNewGoods(scope.row)">取消新品</el-link>
|
|
|
+ <el-link :underline="false" style="width: 40px;font-size: 12px;padding-right: 10px" @click="updateGoods(scope.row)">编辑</el-link>
|
|
|
+ <el-link :underline="false" v-if="scope.row.status === 0" style="width: 40px;font-size: 12px;padding-right: 10px" @click="debouncedUpdateStatus(scope.row.status,scope.row.goodsId)">上架</el-link>
|
|
|
+ <el-link :underline="false" v-if="scope.row.status === 1" style="width: 40px;font-size: 12px;padding-right: 10px" @click="debouncedUpdateStatus(scope.row.status,scope.row.goodsId)">下架</el-link>
|
|
|
+ <el-link :underline="false" v-if="scope.row.status === 0" style="width: 40px;font-size: 12px;padding-right: 10px" @click="debouncedDeleteGoods(scope.row.goodsId)">删除</el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table
|
|
|
+ v-if="isSort"
|
|
|
+ ref="DragTable"
|
|
|
+ class="t1"
|
|
|
+ :data="sortGoodsList"
|
|
|
+ row-key="goodsId"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ >
|
|
|
+ <el-table-column label="商品" width="500">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell">
|
|
|
+ <div class="left-nav">
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ trigger="hover">
|
|
|
+ <div slot="reference">
|
|
|
+ <div class="goods-img text-align">
|
|
|
+ <div class="search-icon">
|
|
|
+ <span class="el-icon-zoom-in" :style="{ visibility: showGoodsIcon && rowId === scope.row.__ob__.dep.id ? 'visible' : 'hidden' }"></span>
|
|
|
+ <span class="goods-status">{{scope.row.status === 1 || (showGoodsIcon && rowId === scope.row.__ob__.dep.id) ? '' : '已下架'}}</span>
|
|
|
+ </div>
|
|
|
+ <span v-if="scope.row.status !== 1">
|
|
|
+ <div class="transparent-layer block-model el-popover__reference"></div>
|
|
|
+ </span>
|
|
|
+ <span v-if="scope.row.status === 1">
|
|
|
+ <div class="transparent-layer el-popover__reference" tabindex="0"></div>
|
|
|
+ </span>
|
|
|
+ <img :src="scope.row.pictureUrl" alt draggable="false" style="width: 60px;height: 60px">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popover-modal">
|
|
|
+ <img :src="scope.row.pictureUrl" alt class="width-150">
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ {{scope.row.goodsName}}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>月售</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="价格" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell">
|
|
|
+ <span class="pd-r-10" v-if="scope.row.skuList.length === 1">￥{{ scope.row.skuList[0].costPrice || 0
|
|
|
+ }}</span>
|
|
|
+ <span class="pd-r-10" v-if="scope.row.skuList.length > 1">￥{{ scope.row.skuList[0].costPrice}}起</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="库存" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell" v-if="scope.row.skuList.length === 1">
|
|
|
+ <div class="stock-list" >
|
|
|
+ <span>{{scope.row.skuList[0].inventory}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cell" v-if="scope.row.skuList.length > 1">
|
|
|
+ <div class="stock-list" >
|
|
|
+ <span style="width: 70px;">多库存</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell">
|
|
|
+ <div>
|
|
|
+ <el-link :underline="false" style="width: 60px;font-size: 12px;padding-right: 10px" @click="btnUp(scope.$index)">置顶</el-link>
|
|
|
+ <span class="pd-r-10" style="color: rgb(192, 196, 204);">拖动可排序</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div v-if="!isSort" style="flex-shrink: 0; display: flex; justify-content: flex-end; padding-top: 10px;">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ :current-page="pageNum"
|
|
|
+ :page-sizes="[4, 10, 20, 50]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :title="editTypeTitle" :class="isMobile ? 'el-dialog' : ''" :fullscreen="isMobile" :visible.sync="typeDialogVisible" :before-close="closeDia" width="600px">
|
|
|
+ <div class="container" >
|
|
|
+ <div class="form-box">
|
|
|
+ <el-form ref="form" :model="editTypeForm" label-width="100px" style="width: 500px">
|
|
|
+ <el-form-item label="分类名称">
|
|
|
+ <el-input v-model="editTypeForm.goodsTypeName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <br>
|
|
|
+ <div style="color:red;font-size:12px;width:600px">注：为避免显示不美观，分类名称不能超过14个字符。推荐4个字符。新建的分类排在最上面。</div>
|
|
|
+ <br>
|
|
|
+ <el-form-item label="类型" required>
|
|
|
+ <el-select v-model="editTypeForm.type" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in typeList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="debouncedSubmit">保存</el-button>
|
|
|
+ <el-button @click="closeDia">关闭</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog :class="isMobile ? 'el-dialog' : ''" :fullscreen="isMobile" :title="editTitle" :visible.sync="dialogVisible" :before-close="closeDialog">
|
|
|
+ <div class="form-box">
|
|
|
+ <el-form ref="form" :model="goodsInfo" label-width="120px" style="width: 100%">
|
|
|
+ <el-form-item label="基本信息" style="text-align:left">
|
|
|
+ <el-form-item label="商品名称" :required="true" style="text-align:left">
|
|
|
+ <el-input v-model="goodsInfo.goodsName" style="width:360px" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品图片">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div class="add" v-if="isShow">
|
|
|
+ <input type="file" id="saveImage" name="upath" accept="image/png,image/jpg,image/jpeg"
|
|
|
+ ref="new_image" @change="addImage" style="width: 178px;height: 178px;opacity: 0;">
|
|
|
+ </div>
|
|
|
+ <div style="position: relative;" v-if="!isShow" class="add1">
|
|
|
+ <input type="file" id="saveImage" name="upath" accept="image/png,image/jpg,image/jpeg"
|
|
|
+ ref="new_image" @change="addImage" style="width: 178px;height: 178px;opacity: 0;position: absolute;top: 0;left: 0;z-index: 99;">
|
|
|
+ <img v-if="!goodsInfo.pictureUrl" style="width:178px;height:178px;border-radius: 6px;" id="img" src alt />
|
|
|
+ <img v-if="goodsInfo.pictureUrl" style="width:178px;height:178px;border-radius: 6px;" id="img" :src="goodsInfo.pictureUrl" alt/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品分类" :required="true" style="text-align:left">
|
|
|
+ <el-select v-model="goodsInfo.goodsTypeId" filterable placeholder="请选择商品分类" style="width: 178px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in storeGoodsTypeList"
|
|
|
+ :key="item.goodsTypeId"
|
|
|
+ :label="item.goodsTypeName"
|
|
|
+ :value="item.goodsTypeId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="商品描述" style="text-align:left">
|
|
|
+ <el-input type="textarea" autosize v-model="goodsInfo.rmk" placeholder="请输入内容"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户每单最低购买数量" :required="true" style="text-align:left">
|
|
|
+ <el-input autosize v-model="goodsInfo.miniNum" placeholder="请输入内容" style="margin-top: 15px"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="color: red; font-size: 12px; padding-left: 120px; padding-top: 5px;">
|
|
|
+ 如：设为"2"，用户下单会最少买两份此商品。
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-form-item label="商品规格" style="text-align:left">
|
|
|
+ <el-form-item :required="true" style="text-align:left">
|
|
|
+ <div>为您的商品添加不同的规格，如：大杯、小杯等</div>
|
|
|
+ <div class="goods-sku" v-for="(item,index) in modelBeanList" :key="item.id">
|
|
|
+ <div style="display: flex; align-items: center; width: 720px; flex-wrap: wrap;">
|
|
|
+ <div class="mr-r-20">
|
|
|
+ <div>
|
|
|
+ <span class="require-icon"></span>
|
|
|
+ 规格名
|
|
|
+ </div>
|
|
|
+ <div class="el-input" style="width: 100px;">
|
|
|
+ <el-input placeholder="规格名" v-model="item.modelName">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mr-r-20">
|
|
|
+ <div>
|
|
|
+ <span class="require-icon"></span>
|
|
|
+ 价格
|
|
|
+ </div>
|
|
|
+ <div class="el-input" style="width: 150px;">
|
|
|
+ <el-input v-model="item.costPrice">
|
|
|
+ <template slot="append">元</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mr-r-20">
|
|
|
+ <div>
|
|
|
+ <span class="require-icon"></span>
|
|
|
+ 餐盒费
|
|
|
+ </div>
|
|
|
+ <div class="el-input" style="width: 150px;">
|
|
|
+ <el-input v-model="item.packingFee">
|
|
|
+ <template slot="append">元</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mr-r-20">
|
|
|
+ <div>
|
|
|
+ <span class="require-icon"></span>
|
|
|
+ 库存
|
|
|
+ </div>
|
|
|
+ <div class="el-input" style="width: 100px;">
|
|
|
+ <el-input v-model="item.inventory"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hover" style="margin-top: 10px;">
|
|
|
+ <el-link :underline="false" style="font-size: 14px" @click="addModel">
|
|
|
+ <span class="el-icon-circle-plus-outline"></span>
|
|
|
+ <span>添加规格, 最多8个, 保存之后不可删除</span>
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-form-item label="商品属性" style="text-align:left">
|
|
|
+ <el-form-item :required="true" style="text-align:left">
|
|
|
+ <div>为您的商品添加不同的属性，如：辣度,甜度等(多个属性用逗号隔开)</div>
|
|
|
+ <div class="goods-sku" v-for="(item,index) in propertyBeanList" :key="item.id">
|
|
|
+ <div style="display: flex; align-items: center; width: 720px; flex-wrap: wrap;">
|
|
|
+ <div class="mr-r-20">
|
|
|
+ <div>
|
|
|
+ <span class="require-icon"></span>
|
|
|
+ 属性名称
|
|
|
+ </div>
|
|
|
+ <div class="el-input" style="width: 100px;">
|
|
|
+ <el-input placeholder="如：辣度" v-model="item.propertyName">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mr-r-20">
|
|
|
+ <div>
|
|
|
+ <span class="require-icon"></span>
|
|
|
+ 属性细分(至少填写两个)
|
|
|
+ </div>
|
|
|
+ <div class="el-input" style="width: 400px;">
|
|
|
+ <el-input v-model="item.propertyList">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <br>
|
|
|
+ <div class="hover">
|
|
|
+ <el-link :underline="false" style="font-size: 14px" @click="deleteProperty(item)">
|
|
|
+ <span class="el-icon-remove-outline"></span>
|
|
|
+ <span>移除</span>
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hover" style="margin-top: 10px;">
|
|
|
+ <el-link :underline="false" style="font-size: 14px" @click="addProperty">
|
|
|
+ <span class="el-icon-circle-plus-outline"></span>
|
|
|
+ <span>添加属性, 最多5个</span>
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="debouncedSave">保存</el-button>
|
|
|
+ <el-button @click="closeDialog">关闭</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import moneyConverter from "../../../common/tool";
|
|
|
+import Sortable from 'sortablejs'
|
|
|
+const querystring = require("querystring");
|
|
|
+
|
|
|
+// 防抖工具函数
|
|
|
+function debounce(fn, delay = 300) {
|
|
|
+ let timer = null;
|
|
|
+ return function (...args) {
|
|
|
+ if (timer) clearTimeout(timer);
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ fn.apply(this, args);
|
|
|
+ }, delay);
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "ConsulManager",
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ url: '/thirdStoreGoodsManage/getStoreGoodsTypeList',
|
|
|
+ getTypeUrl: '/thirdStoreGoodsManage/getTypeList',
|
|
|
+ goodsUrl: '/thirdStoreGoodsManage/getStoreGoodsListForThird',
|
|
|
+ updatePicUrl: '/thirdStoreGoodsManage/updateGoodsPicForThird',
|
|
|
+ updateNameUrl: '/thirdStoreGoodsManage/updateGoodsNameForThird',
|
|
|
+ updatePriceUrl: '/thirdStoreGoodsManage/updateGoodsPriceForThird',
|
|
|
+ updateInventoryUrl: '/thirdStoreGoodsManage/updateGoodsInventoryForThird',
|
|
|
+ updateGoodsUrl: '/thirdStoreGoodsManage/update',
|
|
|
+ changeStatusUrl: '/thirdStoreGoodsManage/changeStatus',
|
|
|
+ setNewFlagUrl: '/thirdStoreGoodsManage/setNewFlag',
|
|
|
+ updateSortUrl: '/thirdStoreGoodsManage/updateSort',
|
|
|
+ updateTypeUrl: '/thirdStoreGoodsManage/updateType',
|
|
|
+ deleteTypeUrl: '/thirdStoreGoodsManage/deleteType',
|
|
|
+ checkSpecialUrl: '/thirdStoreGoodsManage/checkSpecial',
|
|
|
+ changeOrderKeyUrl: '/thirdStoreGoodsManage/changeOrderKey',
|
|
|
+ deleteUrl: '/thirdStoreGoodsManage/deleteGoods',
|
|
|
+ goodsTypeList: [],
|
|
|
+ storeGoodsTypeList: [],
|
|
|
+ typeList: [{
|
|
|
+ value: 0,
|
|
|
+ label: '普通分类'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ label: '必点分类(每个菜单最多只能设置一个)'
|
|
|
+ }],
|
|
|
+ goodsList: [],
|
|
|
+ allGoodsList: [],
|
|
|
+ store: {},
|
|
|
+ editTypeForm: {
|
|
|
+ goodsTypeName: '',
|
|
|
+ goodsTypeId: '',
|
|
|
+ type: 0
|
|
|
+ },
|
|
|
+ editTypeTitle: '',
|
|
|
+ typeDialogVisible: false,
|
|
|
+ uploadData: {},
|
|
|
+ goodsId: '',
|
|
|
+ rowId: '',
|
|
|
+ showGoodsIcon: false,
|
|
|
+ fileList: [],
|
|
|
+ goodsName: '',
|
|
|
+ goodsTypeId: '',
|
|
|
+ skuList: [],
|
|
|
+ editTitle: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ goodsInfo: {
|
|
|
+ goodsId: '',
|
|
|
+ pictureUrl: '',
|
|
|
+ goodsName: '',
|
|
|
+ miniNum: 1,
|
|
|
+ utils: '份',
|
|
|
+ goodsTypeId: '',
|
|
|
+ goodsTypeName: '',
|
|
|
+ rmk: '',
|
|
|
+ modelBeanList: [],
|
|
|
+ propertyBeanList: [],
|
|
|
+ },
|
|
|
+ isShow: true,
|
|
|
+ modelBeanList: [{
|
|
|
+ id: 1,
|
|
|
+ modelId: '',
|
|
|
+ modelName: '',
|
|
|
+ packingFee: '',
|
|
|
+ salePrice: '',
|
|
|
+ costPrice: '',
|
|
|
+ inventory: ''
|
|
|
+ }],
|
|
|
+ propertyBeanList: [],
|
|
|
+ isSpecial: false,
|
|
|
+ isSort: false,
|
|
|
+ sortGoodsList: [],
|
|
|
+ stepsIds: [],
|
|
|
+ isMobile: false,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ total: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ if (this.$isMobile()){
|
|
|
+ // 移动端
|
|
|
+ this.isMobile = true
|
|
|
+ } else {
|
|
|
+ // PC端
|
|
|
+ this.isMobile = false
|
|
|
+ }
|
|
|
+ let areaId = localStorage.getItem("areaId");
|
|
|
+
|
|
|
+ if (areaId) {
|
|
|
+ this.updatePicUrl = "/a" + areaId + this.updatePicUrl
|
|
|
+ }
|
|
|
+ this.store = JSON.parse(localStorage.getItem("storeInfo"));
|
|
|
+ this.getDataList()
|
|
|
+
|
|
|
+ // 防抖处理：避免快速重复点击导致的重复请求
|
|
|
+ this.debouncedClickType = debounce(this.clickType, 300)
|
|
|
+ this.debouncedUpdateStatus = debounce(this.updateStatus, 500)
|
|
|
+ this.debouncedDeleteGoods = debounce(this.deleteGoods, 500)
|
|
|
+ this.debouncedSetNewGoods = debounce(this.setNewGoods, 500)
|
|
|
+ this.debouncedChangOrderKey = debounce(this.changOrderKey, 300)
|
|
|
+ this.debouncedResetAll = debounce(this.resetAll, 500)
|
|
|
+ this.debouncedAddAll = debounce(this.addAll, 500)
|
|
|
+ this.debouncedSubmit = debounce(this.submit, 800)
|
|
|
+ this.debouncedUpdateSort = debounce(this.updateSort, 800)
|
|
|
+ this.debouncedUpdateGoodsName = debounce(this.updateGoodsName, 500)
|
|
|
+ this.debouncedUpdateGoodsPrice = debounce(this.updateGoodsPrice, 500)
|
|
|
+ this.debouncedUpdateGoodsInventory = debounce(this.updateGoodsInventory, 500)
|
|
|
+ this.debouncedSave = debounce(this.save, 800)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //行拖拽,排序方法
|
|
|
+ //表格拖动排序
|
|
|
+ dragSort() {
|
|
|
+ const el = this.$refs.DragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
|
|
+ this.sortable = Sortable.create(el, {
|
|
|
+ ghostClass: 'sortable-ghost',
|
|
|
+ setData: function (dataTransfer) {
|
|
|
+ dataTransfer.setData('Text', '')
|
|
|
+ },
|
|
|
+ onEnd: e => {
|
|
|
+ const targetRow = this.sortGoodsList.splice(e.oldIndex, 1)[0];
|
|
|
+ this.sortGoodsList.splice(e.newIndex, 0, targetRow);
|
|
|
+ this.rebuildStepsIds();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rebuildStepsIds() {
|
|
|
+ this.stepsIds = this.sortGoodsList.map(x => x.goodsId);
|
|
|
+ },
|
|
|
+ btnUp(index) {
|
|
|
+ let item = this.sortGoodsList[index]
|
|
|
+ this.sortGoodsList.splice(index,1)
|
|
|
+ this.sortGoodsList.unshift(item)
|
|
|
+ this.rebuildStepsIds();
|
|
|
+ },
|
|
|
+ updateSort() {
|
|
|
+ if (!this.stepsIds || this.stepsIds.length === 0) {
|
|
|
+ this.$message.error("排序商品不能为空");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+this.$axios.post(this.updateSortUrl,querystring.stringify({
|
|
|
+ storeId: this.store.storeId,
|
|
|
+ stepsIds: JSON.parse(JSON.stringify(this.stepsIds))
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.$message.success("更新成功！");
|
|
|
+ this.closeSortGoods()
|
|
|
+ this.getGoodsList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ sortGoods() {
|
|
|
+ this.isSort = true
|
|
|
+ this.sortGoodsList = JSON.parse(JSON.stringify(this.allGoodsList))
|
|
|
+ this.rebuildStepsIds();
|
|
|
+ this.$nextTick(() =>{
|
|
|
+ this.dragSort()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closeSortGoods() {
|
|
|
+ if (this.sortable) {
|
|
|
+ this.sortable.destroy();
|
|
|
+ this.sortable = null;
|
|
|
+ }
|
|
|
+ this.isSort = false;
|
|
|
+ this.sortGoodsList = []
|
|
|
+ },
|
|
|
+ addGoods() {
|
|
|
+ this.editTitle = '新增商品'
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.getGoodsTypeList()
|
|
|
+ },
|
|
|
+ updateGoods(row) {
|
|
|
+ this.goodsInfo = JSON.parse(JSON.stringify(row))
|
|
|
+ if(row.pictureUrl != null && row.pictureUrl !== '' && row.pictureUrl !== 'null'){
|
|
|
+ this.isShow = false;
|
|
|
+ }
|
|
|
+ this.modelBeanList = JSON.parse(JSON.stringify(row.skuList))
|
|
|
+ this.propertyBeanList = row.params || []
|
|
|
+ this.editTitle = '编辑商品'
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.check(row.goodsId);
|
|
|
+ this.getGoodsTypeList()
|
|
|
+ },
|
|
|
+ getGoodsTypeList() {
|
|
|
+this.$axios.post(this.getTypeUrl,querystring.stringify({
|
|
|
+ storeId: this.store.storeId
|
|
|
+ })).then(res => {
|
|
|
+ this.storeGoodsTypeList = res.data.list;
|
|
|
+ }).catch(error => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDataList() {
|
|
|
+this.$axios.post(this.url,querystring.stringify({
|
|
|
+ storeId: this.store.storeId
|
|
|
+ })).then(res => {
|
|
|
+ this.goodsTypeList = res.data.list;
|
|
|
+ this.goodsTypeList.forEach((item,index) => {
|
|
|
+ if (item.goodsTypeId !== this.goodsTypeId){
|
|
|
+ item.selected = false
|
|
|
+ }
|
|
|
+ item.showIcon = false
|
|
|
+ item.id = index + 1
|
|
|
+ })
|
|
|
+ }).catch(error => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getGoodsList() {
|
|
|
+ if (this.goodsTypeId === '' || this.goodsTypeId === null || this.goodsTypeId === undefined){
|
|
|
+ return
|
|
|
+ }
|
|
|
+this.$axios.post(this.goodsUrl,querystring.stringify({
|
|
|
+ storeId: this.store.storeId,
|
|
|
+ goodsTypeId: this.goodsTypeId
|
|
|
+ })).then(res => {
|
|
|
+ this.allGoodsList = (res.data.list || []).map(item => {
|
|
|
+ item.showIcon = false;
|
|
|
+ item.skuList.forEach(i => {
|
|
|
+ i.costPrice = this.moneyConverter(i.costPrice);
|
|
|
+ i.packingFee = this.moneyConverter(i.packingFee);
|
|
|
+ });
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ this.total = this.allGoodsList.length;
|
|
|
+ this.updatePageData();
|
|
|
+ }).catch(error => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updatePageData() {
|
|
|
+ // 当前页无数据且非第一页时自动回退一页
|
|
|
+ if (this.pageNum > 1 && this.allGoodsList.length <= (this.pageNum - 1) * this.pageSize) {
|
|
|
+ this.pageNum--;
|
|
|
+ }
|
|
|
+ const start = (this.pageNum - 1) * this.pageSize;
|
|
|
+ const end = start + this.pageSize;
|
|
|
+ this.goodsList = this.allGoodsList.slice(start, end);
|
|
|
+ },
|
|
|
+ handlePageChange(page) {
|
|
|
+ this.pageNum = page;
|
|
|
+ this.updatePageData();
|
|
|
+ },
|
|
|
+ handleSizeChange(size) {
|
|
|
+ this.pageSize = size;
|
|
|
+ this.pageNum = 1;
|
|
|
+ this.updatePageData();
|
|
|
+ },
|
|
|
+ updateGoodsName(id,name) {
|
|
|
+ if (name == null || name === '') {
|
|
|
+ this.$message.error("商品名称不能为空");
|
|
|
+ return;
|
|
|
+ } else if (name.length > 30) {
|
|
|
+ this.$message.error("商品名称不能超过30个字符");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+this.$axios.post(this.updateNameUrl, querystring.stringify({
|
|
|
+ goodsId: id,
|
|
|
+ goodsName: name
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.$message.success("更新成功！");
|
|
|
+ document.body.click();
|
|
|
+ this.updateNameVisible = false;
|
|
|
+ this.getGoodsList();
|
|
|
+ } else {
|
|
|
+ document.body.click();
|
|
|
+ this.updateNameVisible = false;
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error("数据处理异常，请与管理员联系！");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateGoodsPrice(id,list) {
|
|
|
+this.$axios.post(this.updatePriceUrl, querystring.stringify({
|
|
|
+ goodsId: id,
|
|
|
+ modelBeanListJson: JSON.stringify(list),
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.$message.success("更新成功！");
|
|
|
+ document.body.click();
|
|
|
+ this.getGoodsList();
|
|
|
+ } else {
|
|
|
+ document.body.click();
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error("数据处理异常，请与管理员联系！");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateGoodsInventory(list) {
|
|
|
+this.$axios.post(this.updateInventoryUrl, querystring.stringify({
|
|
|
+ modelBeanListJson: JSON.stringify(list),
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.$message.success("更新成功！");
|
|
|
+ this.getGoodsList();
|
|
|
+ document.body.click();
|
|
|
+ } else {
|
|
|
+ document.body.click();
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error("数据处理异常，请与管理员联系！");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateStatus (status,goodsId) {
|
|
|
+ if (status === 0){
|
|
|
+ status = 1;
|
|
|
+ } else {
|
|
|
+ status = 0
|
|
|
+ }
|
|
|
+this.$axios.post(this.changeStatusUrl, querystring.stringify({
|
|
|
+ storeId: this.store.storeId,
|
|
|
+ goodsId: goodsId,
|
|
|
+ status: status
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.$message.success("更新成功！");
|
|
|
+ this.getGoodsList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error("数据处理异常，请与管理员联系！");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteGoods(goodsId) {
|
|
|
+ this.$axios.post(this.deleteUrl, querystring.stringify({
|
|
|
+ goodsId: goodsId
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.$message.success("删除成功！");
|
|
|
+ this.getGoodsList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error("数据处理异常，请与管理员联系！");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ check(goodsId) {
|
|
|
+this.$axios.post(this.checkSpecialUrl, querystring.stringify({
|
|
|
+ storeId: this.store.storeId,
|
|
|
+ goodsId: goodsId
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.isSpecial = res.data.obj
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error("数据处理异常，请与管理员联系！");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showName (row) {
|
|
|
+ this.goodsName = JSON.parse(JSON.stringify(row.goodsName))
|
|
|
+ },
|
|
|
+ hideName (row) {
|
|
|
+ row.goodsName = this.goodsName
|
|
|
+ this.goodsName = ''
|
|
|
+ },
|
|
|
+ hidePrice (row) {
|
|
|
+ this.getGoodsList()
|
|
|
+ },
|
|
|
+ canceUpdateName(row) {
|
|
|
+ row.goodsName = this.goodsName
|
|
|
+ document.body.click()
|
|
|
+ },
|
|
|
+ canceUpdatePrice() {
|
|
|
+ this.skuList = []
|
|
|
+ this.updatePriceVisible = false
|
|
|
+ this.getGoodsList()
|
|
|
+ document.body.click()
|
|
|
+ },
|
|
|
+ canceUpdateCount() {
|
|
|
+ this.skuList = []
|
|
|
+ document.body.click()
|
|
|
+ },
|
|
|
+ //鼠标移入单元格事件
|
|
|
+ mouseEnter(row) {
|
|
|
+ this.showGoodsIcon = true;
|
|
|
+ this.rowId = row.__ob__.dep.id; //赋值行id，便于页面判断
|
|
|
+ },
|
|
|
+ //鼠标移出单元格事件
|
|
|
+ mouseLeave(row) {
|
|
|
+ this.showGoodsIcon = false;
|
|
|
+ this.rowId = '';
|
|
|
+ },
|
|
|
+
|
|
|
+ // 文件上传 - 上传前
|
|
|
+ beforeUpload(file, fileList) {
|
|
|
+ this.uploadData = { goodsId: this.goodsId }; //上传携带的参数名
|
|
|
+
|
|
|
+ let promise = new Promise((resolve) => {
|
|
|
+ this.$nextTick(function () {
|
|
|
+ resolve(true);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return promise;
|
|
|
+ },
|
|
|
+ successUpload () {
|
|
|
+ this.fileList = []
|
|
|
+ this.getGoodsList()
|
|
|
+ },
|
|
|
+ changOrderKey (id,type) {
|
|
|
+ if (this.isSort){
|
|
|
+ this.$message.info('请先保存/取消排序');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+this.$axios.post(this.changeOrderKeyUrl,querystring.stringify({
|
|
|
+ type: type,
|
|
|
+ id: id,
|
|
|
+ storeId: this.store.storeId
|
|
|
+ })).then(res => {
|
|
|
+ this.goodsList = []
|
|
|
+ this.getDataList();
|
|
|
+ }).catch(error => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ updateType(item) {
|
|
|
+ if (this.isSort){
|
|
|
+ this.$message.info('请先保存/取消排序');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.typeDialogVisible = true
|
|
|
+ this.editTypeForm.goodsTypeId = item.goodsTypeId
|
|
|
+ this.editTypeForm.goodsTypeName = item.goodsTypeName
|
|
|
+ this.editTypeForm.type = item.type
|
|
|
+ },
|
|
|
+ deleteType(item) {
|
|
|
+ if (this.isSort){
|
|
|
+ this.$message.info('请先保存/取消排序');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$confirm('确定要删除该商品分类吗？', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$axios.post(this.deleteTypeUrl, querystring.stringify({
|
|
|
+ goodsTypeId: item.goodsTypeId,
|
|
|
+ storeId: this.store.storeId
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.$message.success(res.data.rtnBean.rtnMsg);
|
|
|
+ this.getDataList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error('删除失败了！')
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.info('已取消删除');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addType() {
|
|
|
+ if (this.isSort){
|
|
|
+ this.$message.info('请先保存/取消排序');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.editTypeForm = {
|
|
|
+ goodsTypeName: '',
|
|
|
+ goodsTypeId: '',
|
|
|
+ type: 0
|
|
|
+ }
|
|
|
+ this.typeDialogVisible = true
|
|
|
+ },
|
|
|
+ initData () {
|
|
|
+ this.getTypeList();
|
|
|
+ },
|
|
|
+ getTypeList() {
|
|
|
+this.$axios.post(this.url,querystring.stringify({
|
|
|
+ storeId: this.store.storeId
|
|
|
+ })).then(res => {
|
|
|
+ this.goodsTypeList = res.data.list;
|
|
|
+ this.goodsTypeList.forEach((item,index) => {
|
|
|
+ item.selected = item.goodsTypeId === this.goodsTypeId;
|
|
|
+ item.showIcon = false
|
|
|
+ item.id = index + 1
|
|
|
+ })
|
|
|
+
|
|
|
+ this.pageNum = 1
|
|
|
+ this.getGoodsList()
|
|
|
+ }).catch(error => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickType(item) {
|
|
|
+ if (this.isSort){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.updateNameVisible = false
|
|
|
+ this.goodsTypeList.forEach(item => {
|
|
|
+ item.selected = false
|
|
|
+ })
|
|
|
+ item.selected = true
|
|
|
+ this.goodsTypeId = item.goodsTypeId
|
|
|
+ this.pageNum = 1
|
|
|
+ this.getGoodsList()
|
|
|
+ },
|
|
|
+ showIcon(item,index) {
|
|
|
+ this.$set(this.goodsTypeList,index,{...item,showIcon:true})
|
|
|
+ },
|
|
|
+ hideIcon(item,index) {
|
|
|
+ this.$set(this.goodsTypeList,index,{...item,showIcon:false})
|
|
|
+ },
|
|
|
+ closeDia(){
|
|
|
+ this.typeDialogVisible = false;
|
|
|
+ this.editTypeForm = {
|
|
|
+ goodsTypeName: '',
|
|
|
+ goodsTypeId: '',
|
|
|
+ type: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+
|
|
|
+ if (this.editTypeForm.goodsTypeName === null || this.editTypeForm.goodsTypeName === undefined || this.editTypeForm.goodsTypeName === "") {
|
|
|
+ this.$message.error("请输入分类名称");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.editTypeForm.goodsTypeName.length > 14){
|
|
|
+ this.$message.error("分类名称不能超过14个字符");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.editTypeForm.type === '' || this.editTypeForm.type === null){
|
|
|
+ this.$message.error("请选择分类类型");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+this.$axios.post(this.updateTypeUrl,querystring.stringify({
|
|
|
+ storeId: this.store.storeId,
|
|
|
+ goodsTypeName: this.editTypeForm.goodsTypeName,
|
|
|
+ goodsTypeId: this.editTypeForm.goodsTypeId,
|
|
|
+ type: this.editTypeForm.type
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.$message.success("更新成功！");
|
|
|
+ this.initForm()
|
|
|
+ this.getDataList();
|
|
|
+ this.typeDialogVisible = false
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ changePic(id) {
|
|
|
+ this.goodsId = id
|
|
|
+ },
|
|
|
+ resetAll(list) {
|
|
|
+ this.skuList = list
|
|
|
+ this.skuList.forEach(item => {
|
|
|
+ item.inventory = 0
|
|
|
+ })
|
|
|
+ this.updateGoodsInventory(this.skuList)
|
|
|
+ },
|
|
|
+ addAll(list) {
|
|
|
+ this.skuList = list
|
|
|
+ this.skuList.forEach(item => {
|
|
|
+ item.inventory = 9999
|
|
|
+ })
|
|
|
+ this.updateGoodsInventory(this.skuList)
|
|
|
+ },
|
|
|
+ resetedOne(item) {
|
|
|
+ item.inventory = 0;
|
|
|
+ },
|
|
|
+ addOne(item) {
|
|
|
+ item.inventory = 9999;
|
|
|
+ },
|
|
|
+ closeDialog(){
|
|
|
+ if(this.upath !== '' && this.upath != null){
|
|
|
+ if(this.$refs.new_image !== '' && this.$refs.new_image != null){
|
|
|
+ this.$refs.new_image.value = '';
|
|
|
+ this.upath = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.initForm();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.isShow = true;
|
|
|
+ this.isSpecial = false
|
|
|
+ },
|
|
|
+ initForm() {
|
|
|
+ this.goodsInfo = {
|
|
|
+ goodsId: '',
|
|
|
+ pictureUrl: '',
|
|
|
+ goodsName: '',
|
|
|
+ miniNum: 1,
|
|
|
+ utils: '份',
|
|
|
+ goodsTypeId: '',
|
|
|
+ goodsTypeName: '',
|
|
|
+ rmk: '',
|
|
|
+ modelBeanList: [],
|
|
|
+ propertyBeanList: [],
|
|
|
+ }
|
|
|
+ this.editTypeForm = {
|
|
|
+ goodsTypeName: '',
|
|
|
+ goodsTypeId: '',
|
|
|
+ type: 0
|
|
|
+ }
|
|
|
+ this.modelBeanList = [{
|
|
|
+ id: 1,
|
|
|
+ modelId: '',
|
|
|
+ modelName: '',
|
|
|
+ packingFee: '',
|
|
|
+ salePrice: '',
|
|
|
+ costPrice: '',
|
|
|
+ inventory: ''
|
|
|
+ }]
|
|
|
+ this.propertyBeanList = []
|
|
|
+ this.isShow = true
|
|
|
+
|
|
|
+ },
|
|
|
+ addImage(e){
|
|
|
+ const file = e.target.files[0];
|
|
|
+ if (!file.type.includes("image/png") && !file.type.includes("image/jpg") && !file.type.includes("image/jpeg")) {
|
|
|
+ this.$message.error("图片格式错误");
|
|
|
+ this.upath = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const isLt2M = file.size < 204800;
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 200KB,请调整清晰度之后再试');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.isShow = false;
|
|
|
+ this.upath = file;
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.onload = function(e) {
|
|
|
+ document.getElementById("img").src = reader.result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ addModel() {
|
|
|
+ if (this.isSpecial) {
|
|
|
+ this.$message.error("该商品已参加特价菜活动,只有一个规格");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (this.modelBeanList.length ===8){
|
|
|
+ this.$message.error("商品规格最多添加8个");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let model = {
|
|
|
+ id: this.modelBeanList.length + 1,
|
|
|
+ modelId: '',
|
|
|
+ modelName: '',
|
|
|
+ packingFee: '',
|
|
|
+ salePrice: '',
|
|
|
+ costPrice: '',
|
|
|
+ inventory: ''
|
|
|
+ }
|
|
|
+ this.modelBeanList.push(model)
|
|
|
+ },
|
|
|
+
|
|
|
+ addProperty() {
|
|
|
+ if ( this.propertyBeanList && this.propertyBeanList.length === 5) {
|
|
|
+ this.$message.error("商品属性最多有5个");
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let model = {
|
|
|
+ id: this.propertyBeanList.length + 1,
|
|
|
+ propertyId: '',
|
|
|
+ propertyName: '',
|
|
|
+ propertyList: '',
|
|
|
+ goodsId: ''
|
|
|
+ }
|
|
|
+ this.propertyBeanList.push(model)
|
|
|
+ },
|
|
|
+
|
|
|
+ deleteProperty(item) {
|
|
|
+ let index = this.propertyBeanList.indexOf(item)
|
|
|
+ if (index !== -1) {
|
|
|
+ this.propertyBeanList.splice(index, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ save(){
|
|
|
+ this.goodsInfo.modelBeanList = this.modelBeanList;
|
|
|
+ this.goodsInfo.propertyBeanList= this.propertyBeanList;
|
|
|
+ if ((this.goodsInfo.pictureUrl === null || this.goodsInfo.pictureUrl === undefined || this.goodsInfo.pictureUrl === '') &&
|
|
|
+ (this.upath === null || this.upath === undefined || this.upath === '')) {
|
|
|
+ this.$message.error("请上传商品图片");
|
|
|
+ return;
|
|
|
+ } else if (this.goodsInfo.goodsName == null || this.goodsInfo.goodsName === '') {
|
|
|
+ this.$message.error("请输入商品名称");
|
|
|
+ return;
|
|
|
+ } else if (this.goodsInfo.goodsName.length > 30) {
|
|
|
+ this.$message.error("商品名称不能超过30个字符");
|
|
|
+ return;
|
|
|
+ } else if (this.goodsInfo.goodsTypeId == null || this.goodsInfo.goodsTypeId === '') {
|
|
|
+ this.$message.error("请选择商品分类");
|
|
|
+ return;
|
|
|
+ }else if (this.isSpecial && (this.goodsInfo.goodsTypeId !== null || this.goodsInfo.goodsTypeId !== '')
|
|
|
+ && this.goodsTypeList.filter((item) =>{return item.goodsTypeId === this.goodsInfo.goodsTypeId})[0].type === 1) {
|
|
|
+ this.$message.error("特价菜不能修改为必选商品");
|
|
|
+ return;
|
|
|
+ } else if (this.modelBeanList.length === 0 || this.modelBeanList === '') {
|
|
|
+ this.$message.error("请添加商品规格");
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ let that = this
|
|
|
+ let aoo = true
|
|
|
+ if(that.propertyBeanList != null && that.propertyBeanList.length > 0) {
|
|
|
+ let num = false
|
|
|
+ if (that.propertyBeanList.length > 0 || that.propertyBeanList[0].propertyName || that.propertyBeanList[0].propertyList) {
|
|
|
+ num = true
|
|
|
+ }
|
|
|
+ for (let i = 0; i < that.propertyBeanList.length; i++) {
|
|
|
+ if (num){
|
|
|
+ if (that.propertyBeanList[i].propertyName == null || that.propertyBeanList[i].propertyName === '') {
|
|
|
+ this.$message.error("请输入属性名称");
|
|
|
+ aoo = false;
|
|
|
+ return;
|
|
|
+ } else if (that.propertyBeanList[i].propertyList == null || that.propertyBeanList[i].propertyList === '') {
|
|
|
+ this.$message.error("请输入属性描述");
|
|
|
+ aoo = false;
|
|
|
+ return;
|
|
|
+ } else if (that.propertyBeanList[i].propertyList.indexOf(',') === -1 && that.propertyBeanList[i].propertyList.indexOf('，') === -1) {
|
|
|
+ this.$message.error("属性描述必须大于等于两个");
|
|
|
+ aoo = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(that.propertyBeanList[i].propertyList != null && that.propertyBeanList[i].propertyList !== ''){
|
|
|
+ that.propertyBeanList[i].propertyList = that.propertyBeanList[i].propertyList.replace(/，/g, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let boo = true;
|
|
|
+ let regPrice = (/^[0-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/);
|
|
|
+ if (that.modelBeanList.length > 0) {
|
|
|
+ for (let i = 0; i < that.modelBeanList.length; i++) {
|
|
|
+ if (that.modelBeanList[i].modelName == null || that.modelBeanList[i].modelName === '') {
|
|
|
+ this.$message.error("请输入规格名称");
|
|
|
+ boo = false;
|
|
|
+ return;
|
|
|
+ } else if (that.modelBeanList[i].costPrice === null || that.modelBeanList[i].costPrice === '') {
|
|
|
+ this.$message.error("请输入价格");
|
|
|
+ boo = false;
|
|
|
+ return;
|
|
|
+ } else if (!regPrice.test(that.modelBeanList[i].costPrice)) {
|
|
|
+ this.$message.error("价格只能是整数或小数点后两位");
|
|
|
+ boo = false;
|
|
|
+ return;
|
|
|
+ } else if (that.modelBeanList[i].packingFee === null || that.modelBeanList[i].packingFee ===
|
|
|
+ undefined || that.modelBeanList[i].packingFee === '') {
|
|
|
+ this.$message.error("请输入餐盒费");
|
|
|
+ boo = false;
|
|
|
+ return;
|
|
|
+ } else if (that.modelBeanList[i].inventory === null || that.modelBeanList[i].inventory === '') {
|
|
|
+ this.$message.error("请输入库存");
|
|
|
+ boo = false;
|
|
|
+ return;
|
|
|
+ } else if (that.modelBeanList[i].inventory > Number(9999)) {
|
|
|
+ this.$message.error("库存不能超过最大库存数");
|
|
|
+ boo = false;
|
|
|
+ return;
|
|
|
+ } else if (that.isSpecial && Number(that.modelBeanList[i].costPrice * 100) < Number(that.modelBeanList[i].salePrice)) {
|
|
|
+ this.$message.error("商品价格不能小于售价");
|
|
|
+ boo = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (aoo && boo) {
|
|
|
+
|
|
|
+ var formdata = new FormData();
|
|
|
+ formdata.append("file", that.upath);
|
|
|
+ formdata.append("goodsId", that.goodsInfo.goodsId || '');
|
|
|
+ formdata.append("storeId", that.store.storeId || '');
|
|
|
+ formdata.append("goodsName", that.goodsInfo.goodsName || '');
|
|
|
+ formdata.append("miniNum", that.goodsInfo.miniNum || '');
|
|
|
+ formdata.append("utils", that.goodsInfo.utils || '份');
|
|
|
+ formdata.append("goodsTypeId", that.goodsInfo.goodsTypeId || '');
|
|
|
+ formdata.append("rmk", that.goodsInfo.rmk || '');
|
|
|
+ formdata.append("modelBeanListJson", JSON.stringify(that.goodsInfo.modelBeanList) || '');
|
|
|
+ formdata.append("propertyBeanListJson", JSON.stringify(that.goodsInfo.propertyBeanList) || '');
|
|
|
+
|
|
|
+ if (that.goodsInfo.pictureUrl != null && that.goodsInfo.pictureUrl !== '' ){
|
|
|
+ formdata.append("pictureUrl", that.goodsInfo.pictureUrl);
|
|
|
+ }
|
|
|
+
|
|
|
+ let config = { headers: { "Content-Type": "multipart/form-data" } };
|
|
|
+ that.$axios.post(that.updateGoodsUrl, formdata, config).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.initForm()
|
|
|
+ this.initData();
|
|
|
+ that.dialogVisible = false;
|
|
|
+ that.$message.success("保存成功");
|
|
|
+ } else {
|
|
|
+ that.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ that.$message.error('更新失败')
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setNewGoods (goods) {
|
|
|
+ let dayCount = 7
|
|
|
+ if (goods.newGoodsFlg !== undefined && goods.newGoodsFlg === 1){
|
|
|
+ dayCount = ''
|
|
|
+ }
|
|
|
+this.$axios.post(this.setNewFlagUrl, querystring.stringify({
|
|
|
+ storeId: this.store.storeId,
|
|
|
+ goodsId: goods.goodsId,
|
|
|
+ dayCount: dayCount
|
|
|
+ })).then(res => {
|
|
|
+ if (res.data.rtnBean.rtnCode === 0) {
|
|
|
+ this.getDataList()
|
|
|
+ this.getGoodsList()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.rtnBean.rtnMsg);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error("数据处理异常，请与管理员联系！");
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.page-wrap{
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.background{
|
|
|
+ background:#dfdede;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 250px 1fr;
|
|
|
+ grid-template-rows: auto 1fr;
|
|
|
+ border-radius: 10px;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+}
|
|
|
+.crumbs{
|
|
|
+ color: #666;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.leftbox{
|
|
|
+ background: white;
|
|
|
+ grid-column: 1;
|
|
|
+ grid-row: 1 / 3;
|
|
|
+ box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+.rightbox{
|
|
|
+ background: white;
|
|
|
+ grid-column: 2;
|
|
|
+ grid-row: 2;
|
|
|
+ box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 16px 16px;
|
|
|
+}
|
|
|
+.topbox{
|
|
|
+ background: white;
|
|
|
+ grid-column: 2;
|
|
|
+ grid-row: 1;
|
|
|
+ box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ min-height: 52px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 16px;
|
|
|
+}
|
|
|
+.newkind{
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: auto;
|
|
|
+ padding: 0 16px;
|
|
|
+ height: 28px;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px dashed #b9d8f9;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #1989fa;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+.storelist li{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ border-left: 3px solid transparent;
|
|
|
+ padding-right: 8px;
|
|
|
+ transition: background-color 0.2s, border-color 0.2s;
|
|
|
+}
|
|
|
+.storelist li:hover{
|
|
|
+ background-color: #f0f7ff;
|
|
|
+ border-left: 3px solid #409EFF;
|
|
|
+}
|
|
|
+.storelist li:active{
|
|
|
+ background-color: #d9eafb;
|
|
|
+}
|
|
|
+.storelist li span{
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.storelist li i{
|
|
|
+ margin-left: 6px;
|
|
|
+ margin-right: 4px;
|
|
|
+ color: #409EFF;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.store_name {
|
|
|
+ padding-left: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 15px;
|
|
|
+ line-height: 2;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ color: #2c3e50;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.goods-count {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 8px;
|
|
|
+ min-width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ padding: 0 3px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #409EFF;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+</style>
|
