商城

src/App.vue

@@ -74,18 +74,18 @@
         if (to.meta.keepAlive) {
           !this.include.includes(to.name) && this.include.push(to.name);
         }
-        if (to.meta.parentNode && to.meta.parentNode.indexOf(from.name) > -1) {
-          !this.include.includes(from.name) && this.include.push(from.name);
-        } else if (from.meta.parentNode && from.meta.parentNode.indexOf(to.name) > -1) {} else {
-          if (from.meta.parentNode) {
-            var index = this.include.indexOf(from.meta.parentNode);
-            index !== -1 && this.include.splice(index, 1);
-          }
-          if (!from.meta.parentNode) {
-            var index = this.include.indexOf(from.name);
-            index !== -1 && this.include.splice(index, 1);
-          }
-        }
+        // if (to.meta.parentNode && to.meta.parentNode.indexOf(from.name) > -1) {
+        //   !this.include.includes(from.name) && this.include.push(from.name);
+        // } else if (from.meta.parentNode && from.meta.parentNode.indexOf(to.name) > -1) {} else {
+        //   if (from.meta.parentNode) {
+        //     var index = this.include.indexOf(from.meta.parentNode);
+        //     index !== -1 && this.include.splice(index, 1);
+        //   }
+        //   if (!from.meta.parentNode) {
+        //     var index = this.include.indexOf(from.name);
+        //     index !== -1 && this.include.splice(index, 1);
+        //   }
+        // }
         // 标签页
         if (to.name != 'login') {
           this.menuDatas.forEach(element => {

src/api/goods.js

@@ -9,3 +9,60 @@ export function list(params) {
   })
 }
 
+// 新增
+export function add(data) {
+  return request({
+    url: '/commodity/add',
+    method: 'post',
+    data
+  })
+}
+
+
+// 商品详情
+export function detail(params) {
+  return request({
+    url: '/commodity/detail',
+    method: 'get',
+    params
+  })
+}
+
+// 商品提交新审核的编辑详情
+export function editDetail(params) {
+  return request({
+    url: '/commodity/editDetail',
+    method: 'get',
+    params
+  })
+}
+
+
+// 修改
+export function edit(data) {
+  return request({
+    url: '/commodity/edit',
+    method: 'put',
+    data
+  })
+}
+
+// 上下架
+export function changeStatus(params) {
+  return request({
+    url: '/commodity/changeStatus',
+    method: 'get',
+    params
+  })
+}
+
+// 商品分页列表统计各类型的数量
+export function getCountByType() {
+  return request({
+    url: '/commodity/getCountByType',
+    method: 'get',
+  })
+}
+
+
+

src/components/tabbar.vue

@@ -109,8 +109,10 @@
                 background:white;
               }
             }
+            &:hover{
+                color: #328DFF;
+            }
         }
-
         .chooseitem {
             .content{
                 border-radius: 5px;
@@ -160,6 +162,5 @@
             }
         }
 
-        .close {}
     }
 </style>

src/components/upload.vue

@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <div class="flex">
+      <!-- <div v-if="acceptType =='.jpg, .jpeg, .png'">
+        <div v-for="(item, index) in fileList" :key="index" class="file-list">
+          <img :src="item.url"/>
+          <div class="mask" v-if="!disabled">
+            <i class="el-icon-zoom-in" @click="view(index)"></i>
+            <i class="el-icon-delete" @click="del(index)"></i>
+          </div>
+        </div>
+      </div> -->
+      <el-upload
+        class="avatar-uploader"
+        list-type="picture-card"
+        :action="action"
+        :on-remove="handleRemove"
+        :accept="acceptType"
+        :headers="myHeaders"
+        :multiple="limitNum == 1?false:true"
+        :limit='limitNum'
+        :on-exceed="handleExceed"
+        :on-change='handleChangeUpload'
+        :on-success="handleSuccess"
+        :on-preview="handlePictureCardPreview"
+        :file-list="fileList"
+        :show-file-list="acceptType =='.jpg, .jpeg, .png'?false:true"
+        :disabled="disabled"
+        :auto-upload="autoUpload" 
+      >
+        <i class="el-icon-plus avatar-uploader-icon"></i>
+      </el-upload>
+    </div>
+    <span class="tip" v-if="warning">{{warning}}</span>
+    <el-dialog
+      title="查看"
+      :visible.sync="dialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+    > 
+      <img :src="dialogImageUrl" style="width:100%;"/>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="info" @click="dialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+  export default {
+    name: "index",
+    components: {
+    },
+    props: {
+      warning: {
+        type: String,
+        default: ''
+      },
+      file: {
+        type: Array,
+        default: () => []
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      acceptType: {
+        type: String,
+        default: ''
+      },
+      limitNum: {
+        type: Number,
+        default: 3
+      },
+      uploadUrl: {
+        type: String,
+        default: '/file/img/upload'
+      },
+      autoUpload: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        fileList: [],
+        dialogVisible: false,
+        imgUrl: '',
+        baseUrl: '',
+        dialogImageUrl:''
+      };
+    },
+    computed: {
+      action(){
+        return global_config.BASE_URL + this.uploadUrl;
+      },
+      myHeaders(){
+        return {Authorization: 'Bearer ' + store.getters.getToken, 'X-Token':store.getters.getToken};
+      }
+    },
+    created() {
+      this.fileList = this.file;
+    },
+    methods: {
+      // 手动上传
+      handleChangeUpload(fileData){
+        if(!this.autoUpload){
+          let event = event || window.event;
+          let file = event.target.files[0];
+          let reader = new FileReader();
+          let that = this;
+          reader.onload = function(e) {
+            that.baseUrl = e.target.result;
+            that.$emit('changeUpload', fileData, that.baseUrl);
+          }
+          reader.readAsDataURL(file);
+        }
+      },
+      // 上传成功
+      handleSuccess(response, file, fileList){
+        this.fileList.push({
+          name: response.fileName,
+          url: response.message
+        });
+      },
+      // 删除
+      handleRemove(file, fileList) {
+        this.fileList = fileList;
+      },
+      // 上传超过限制
+      handleExceed(files, fileList) {
+        if(fileList.length >= this.limitNum){
+          this.$message.closeAll();
+          this.$message.warning(`当前限制选择${this.limitNum}个文件`);
+        }
+      },
+      handlePictureCardPreview(file){
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      view(index){
+        this.dialogVisible = true;
+        this.imgUrl = this.fileList[index].url;
+      },
+      del(index){
+        this.fileList.splice(index, 1);
+      }
+    }
+  };
+</script>
+<style lang="less" scoped>
+  .file-list{
+    margin-right: 5px;
+    position: relative;
+    width: 150px;
+    height: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    &:hover{
+      .mask{
+        opacity: 1;
+      }
+    }
+    .mask{
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 6px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      i{
+        cursor:pointer;
+        margin: 0 10px;
+      }
+    }
+    img{
+      max-width: 150px;
+      max-height: 150px;
+      display: block;
+    }
+  }
+  // .avatar-uploader{
+  //   line-height: initial;
+  //   width: 150px;
+  // }
+  .avatar-uploader /deep/.el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader /deep/.el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 148px;
+    height: 148px;
+    line-height: 148px;
+    text-align: center;
+  }
+  .avatar {
+    width: 148px;
+    height: 148px;
+    display: block;
+  }
+  .tip{
+    color:#f56c6c;
+    font-size:14px;
+  }
+</style>

src/main.js

@@ -7,7 +7,7 @@ import '../static/iconfont/iconfont.css'
 import pubFun from '@/utils/pubFun';
 import store from './store'
 import md5 from 'js-md5'
-import { getDicts } from "@/api/system/dict/data";
+// import { getDicts } from "@/api/system/dict/data";
 
 Vue.use(ElementUI)
 Vue.use(router)
@@ -16,7 +16,7 @@ Vue.prototype.GLOBAL = global
 
 Vue.config.productionTip = false;
 Vue.prototype.$pubFun = pubFun;
-Vue.prototype.getDicts = getDicts
+// Vue.prototype.getDicts = getDicts
 Vue.prototype.$md5 = md5
 new Vue({
   render: h => h(App),

src/pages/goods/addGoods/index.vue

@@ -46,27 +46,15 @@
                 <el-input placeholder="请输入" maxlength="25">
                 </el-input>
             </el-form-item>
-            <el-form-item label="三级类目:" v-if="form.has_brand=='0'" label-width="100px">
+            <el-form-item label="三级类目:" v-if="form.third_cat_audit=='0'" label-width="100px">
                 <el-input placeholder="请输入" maxlength="25" v-model="form.third_cat_id">
                 </el-input>
             </el-form-item>
             <el-form-item class="single" label="商品图片:" label-width="100px">
-                <el-upload :action="uploadUrl" list-type="picture-card" :on-preview="handlePictureCardPreview"
-                    :on-remove="handleRemove">
-                    <i class="el-icon-plus"></i>
-                </el-upload>
-                <el-dialog :visible.sync="dialogVisible">
-                    <img width="100%" :src="dialogImageUrl" alt="">
-                </el-dialog>
+                <upload ref="upload_goods" :file="goodsList" limitNum="1"></upload>
             </el-form-item>
             <el-form-item class="single" label="商品资质图片:" label-width="100px">
-                <el-upload :action="uploadUrl" list-type="picture-card" :on-preview="handlePictureCardPreview"
-                    :on-remove="handleRemove">
-                    <i class="el-icon-plus"></i>
-                </el-upload>
-                <el-dialog :visible.sync="dialogVisible">
-                    <img width="100%" :src="dialogImageUrl" alt="">
-                </el-dialog>
+                <upload ref="upload_zizhi" :file="goodszizhiList" limitNum="10"></upload>
             </el-form-item>
             <el-form-item class="commit">
                 <el-button class="blackbtn" :loading="loading" @click.native.prevent="commit">提交
@@ -79,12 +67,23 @@
 
 <script>
     import store from '@/store/index'
+    import upload from '@/components/upload'
+    import {
+        add,
+        editDetail,edit
+    } from "@/api/goods";
     export default {
-        components: {},
+        name: 'addGoods',
+        components: {
+            upload
+        },
         props: {},
         data() {
             return {
-                uploadUrl: global_config.BASE_URL + 'file/img/upload',
+                goodsList: [],
+                goodszizhiList: [],
+                outProductId: 0,
+                commodity_id:0,
                 form: {
                     title: '',
                     third_cat_audit: '',
@@ -102,17 +101,88 @@
         watch: {},
         computed: {},
         methods: {
-            commit(){
-                store.commit('REMOVETAB','新增商品')
-                this.$router.go(-1)
+            commit() {
+                if (this.goodsList.length == 0) {
+                    this.$message.error('请选择至少一张商品图片');
+                    return
+                }
+                 let zizhiarray=[]
+                 this.goodszizhiList.forEach(element => {
+                    zizhiarray.push(element.url)
+                 });
+                let params = {
+                    brand_id: '2100000000',
+                    has_brand: this.form.has_brand,
+                    market_price: this.form.market_price,
+                    out_product_id: this.form.out_product_id,
+                    path: this.form.path,
+                    qualificationImgs:zizhiarray.join(","),
+                    sale_price: this.form.sale_price,
+                    stock_num: this.form.stock_num,
+                    third_cat_audit: this.form.third_cat_audit,
+                    third_cat_id: this.form.third_cat_id,
+                    thumb_img: this.goodsList[0].url,
+                    title: this.form.title
+                }
+                if(this.outProductId==0){ //新增
+                    add(params).then(() => {
+                        this.$message.success('添加成功');
+                        store.commit('REMOVETAB', '新增商品')
+                        this.$router.go(-1)
+                    })
+                }else{ //修改
+                    params.commodity_id=this.commodity_id
+                    edit(params).then(() => {
+                        this.$message.success('修改成功');
+                        store.commit('REMOVETAB', '新增商品')
+                        this.$router.go(-1)
+                    })
+                }
+                
             },
             handlePictureCardPreview(file) {
                 this.dialogImageUrl = file.url;
                 this.dialogVisible = true
+            },
+            getDetail() {
+                if (this.outProductId != 0) {
+                    editDetail({
+                        outProductId: this.outProductId
+                    }).then(res => {
+                        this.form.title = res.data.title
+                        this.form.third_cat_audit = res.data.third_cat_audit
+                        this.form.out_product_id = res.data.out_product_id
+                        this.form.has_brand = res.data.has_brand
+                        this.form.stock_num = res.data.stock_num
+                        this.form.sale_price = res.data.sale_price
+                        this.form.market_price = res.data.market_price
+                        this.form.path = res.data.path
+                        this.form.third_cat_id = res.data.third_cat_id
+                        this.commodity_id=res.data.commodity_id
+                        this.goodsList.push({
+                            url: res.data.thumb_img
+                        })
+                        if (res.data.qualificationImgs.length > 0) {
+                            res.data.qualificationImgs.forEach(element => {
+                                this.goodszizhiList.push({
+                                    url: element
+                                })
+                            });
+                        }
+                    })
+                }
             }
         },
         created() {},
-        mounted() {}    
+        mounted() {
+            if (this.$route.params.outProductId) {
+                this.outProductId = this.$route.params.outProductId
+                store.commit('SER_ADDOUTPRODUCTID', this.outProductId)
+            } else {
+                this.outProductId = store.getters.getAddOutProductId
+            }
+            this.getDetail()
+        }
     };
 </script>
 <style lang="less" scoped>
@@ -159,7 +229,8 @@
                     width: 875px;
                 }
             }
-            .commit{
+
+            .commit {
                 width: 100%;
                 text-align: center;
             }

src/pages/goods/goodsDetail/index.vue

@@ -0,0 +1,287 @@
+<template>
+    <div class="wrapper">
+        <div class="title">商品详情</div>
+        <div class="status">
+            <div class="line"><div class="label">申请状态:</div><span :class="status==3?'statustext':''">{{statusName}}</span></div>
+            <div class="line" v-if="status==3"><div class="label">原因:</div><span class="reason">{{reject_reason}}</span></div>
+            <div class="line" v-if="status!=4"><div class="label">审核内容:</div><el-button type="text" @click="update">查看审核内容</el-button></div>
+            <div class="line" v-if="status==4"><el-button class="commitnew blackbtn" @click="commitNew">提交新审核</el-button></div>
+        </div>
+
+        <el-divider></el-divider>
+
+        <div class="empty" v-if="status==1||status==2">
+            <span class="emptytitle">暂无过审数据</span>
+            <img class="emptyimg" src="../../../../static/images/empty.png" />
+        </div>
+
+        <el-form class="form" ref="form" :model="form" label-width="80px" v-if="status==3||status==4">
+            <el-form-item class="single" label="商品名:" label-width="100px" >
+                <el-input class="pr-50" placeholder="请输入" v-model="form.title" maxlength="60" disabled show-word-limit>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="类目:" label-width="100px">
+                <el-select v-model="form.third_cat_audit" placeholder="请选择" clearable disabled filterable>
+                    <el-option label="申请通过的类目" value="1"></el-option>
+                    <el-option label="无需审核类目" value="0"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="商品ID:" label-width="100px">
+                <el-input placeholder="请输入" v-model="form.out_product_id" disabled maxlength="25">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="品牌:" label-width="100px">
+                <el-select v-model="form.has_brand" placeholder="请选择" clearable disabled filterable>
+                    <el-option label="申请通过的品牌" value="1"></el-option>
+                    <el-option label="无品牌" value="0"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="商品库存:" label-width="100px">
+                <el-input placeholder="请输入" type='number' maxlength="25" disabled v-model="form.stock_num">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="售卖价格:" label-width="100px">
+                <el-input placeholder="请输入" type='number' maxlength="25" disabled v-model="form.sale_price">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="市场价格:" label-width="100px">
+                <el-input placeholder="请输入" type='number' maxlength="25" disabled v-model="form.market_price">
+                </el-input>
+            </el-form-item>
+            <el-form-item class="single" label="小程序链接:" label-width="100px">
+                <el-input class="pr-50" placeholder="请输入" v-model="form.path" disabled maxlength="100">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="一级类目:" v-if="false" label-width="100px">
+                <el-input placeholder="请输入" disabled maxlength="25">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="二级类目:" v-if="false" label-width="100px">
+                <el-input placeholder="请输入" disabled maxlength="25">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="三级类目:" v-if="form.third_cat_audit=='0'" label-width="100px">
+                <el-input placeholder="请输入" disabled maxlength="25" v-model="form.third_cat_id">
+                </el-input>
+            </el-form-item>
+            <el-form-item class="single" label="商品图片:" label-width="100px">
+                <upload ref="upload_goods" :file="goodsList" limitNum="1" :disabled="true" ></upload>
+            </el-form-item>
+            <el-form-item class="single" label="商品资质图片:" label-width="100px">
+                 <upload ref="upload_zizhi" :file="goodszizhiList" limitNum="1" :disabled="true"></upload>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    import store from '@/store/index'
+    import upload from '@/components/upload'
+    import {
+    add,detail
+    } from "@/api/goods";
+    export default {
+        name:'goodsDetail',
+        components: {
+            upload
+        },
+        props: {},
+        data() {
+            return {
+                goodsList:[],
+                goodszizhiList:[],
+                outProductId:'',
+                status:1,
+                statusName:'',
+                reject_reason:'',
+                form: {
+                    title: '',
+                    third_cat_audit: '',
+                    out_product_id: '',
+                    has_brand: '',
+                    stock_num: '',
+                    sale_price: '',
+                    market_price: '',
+                    path: '',
+                    third_cat_id: '',
+                },
+                loading: false
+            };
+        },
+        watch: {},
+        computed: {},
+        methods: {
+            commit(){
+                if(this.goodsList.length==0){
+                    this.$message.error('请选择至少一张商品图片');
+                    return
+                }
+                let params={
+                    brand_id:'2100000000',
+                    has_brand:this.form.has_brand,
+                    market_price:this.form.market_price,
+                    out_product_id:this.form.out_product_id,
+                    path:this.form.path,
+                    qualificationImgs:this.goodszizhiList.join(","),
+                    sale_price:this.form.sale_price,
+                    stock_num:this.form.stock_num,
+                    third_cat_audit:this.form.third_cat_audit,
+                    third_cat_id:this.form.third_cat_id,
+                    thumb_img:this.goodsList[0],
+                    title:this.form.title
+                }
+                add(params).then(()=>{
+                    store.commit('REMOVETAB','新增商品')
+                    this.$router.go(-1)
+                })
+            },
+            handlePictureCardPreview(file) {
+                this.dialogImageUrl = file.url;
+                this.dialogVisible = true
+            },
+            getDetail(){
+                detail({outProductId:this.outProductId}).then(res=>{
+                    if(res.data.auditInfo.status){
+                        this.status=res.data.auditInfo.status
+                    }
+                    this.statusName=res.data.auditInfo.statusName
+                    this.reject_reason=res.data.auditInfo.reject_reason
+                    this.form.title=res.data.title
+                    this.form.third_cat_audit=res.data.third_cat_audit
+                    this.form.out_product_id=res.data.out_product_id
+                    this.form.has_brand=res.data.has_brand
+                    this.form.stock_num=res.data.stock_num
+                    this.form.sale_price=res.data.sale_price
+                    this.form.market_price=res.data.market_price
+                    this.form.path=res.data.path
+                    this.form.third_cat_id=res.data.third_cat_id
+                    this.goodsList=[{url:res.data.thumb_img}]
+                    this.goodszizhiList=[]
+                    if(res.data.qualificationImgs.length>0){
+                        res.data.qualificationImgs.forEach(element => {
+                            this.goodszizhiList.push({url:element})
+                        });
+                    }                    
+                })
+            },
+            commitNew(){ // 提交新审核
+                store.commit('SER_ADDOUTPRODUCTID',0)
+                this.$router.push("/goods/addGoods");
+            },
+            update(){ //更新审核
+                this.$router.push({name:"addGoods",params:{outProductId:this.outProductId}});
+            }
+
+        },
+        created() {},
+        mounted() {
+            if(this.$route.params.outProductId){
+                 this.outProductId=this.$route.params.outProductId
+                 store.commit('SER_OUTPRODUCTID',this.outProductId)
+            }else{
+                this.outProductId=store.getters.getOutProductId
+            }
+            this.getDetail()
+        }    
+    };
+</script>
+<style lang="less" scoped>
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+            font-weight: bold;
+            width: 100%;
+            text-align: left;
+            margin-left: 100px;
+        }
+        .status{
+            width: 75%;
+            display: flex;
+            margin-top: 20px;
+            flex-direction: column;
+            font-size: 14px;
+            color: #232323;
+            font-weight: bolder;
+            font-family: PingFangSC-Regular, PingFang SC;
+            .line{
+                display: flex;
+                margin-top: 20px;
+                align-items: center;
+            }
+            .commitnew{
+                margin-left: 40px;
+            }
+            .label{
+                width: 100px;
+                text-align: right;
+                margin-right:30px;
+            }
+            .reason{
+                    width: 80%;
+            }
+            .statustext{
+                color: #E02020;
+            }
+        }
+        .empty{
+            width: 75%;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 30px;
+            margin-bottom: 30px;
+            .emptytitle{
+                text-align: center;
+                color: #999999;      
+                font-size: 15px;          
+            }
+            .emptyimg{
+                width: 400px;
+                height: auto;
+            }
+        }
+
+        .form {
+            margin-top: 20px;
+            width: 75%;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+
+            .el-form-item {
+                color: #232323;
+                font-weight: bold;
+            }
+
+            .el-select {
+                width: 300px;
+            }
+
+            .el-input {
+                width: 300px;
+            }
+
+            .single {
+                width: 100%;
+
+                .el-input {
+                    width: 875px;
+                }
+
+                .el-select {
+                    width: 875px;
+                }
+            }
+            .commit{
+                width: 100%;
+                text-align: center;
+            }
+        }
+
+
+    }
+</style>

src/pages/goods/index.vue

@@ -1,24 +1,25 @@
 <template>
   <div class="index flex column">
     <el-tabs v-model="searchForm.type" @tab-click="handleClick">
-      <el-tab-pane label="上架" name="1"></el-tab-pane>
-      <el-tab-pane label="下架" name="2"></el-tab-pane>
-      <el-tab-pane label="首次申请" name="3"></el-tab-pane>
+      <el-tab-pane :label="'上架('+type1Count+')'" name="1"></el-tab-pane>
+      <el-tab-pane :label="'下架('+type2Count+')'" name="2"></el-tab-pane>
+      <el-tab-pane :label="'首次申请('+type3Count+')'" name="3"></el-tab-pane>
     </el-tabs>
     <div class="serach flex row space-between">
       <el-button class="blackbtn" icon="el-icon-plus" @click="addGoods">新增商品</el-button>
       <div class="flex row">
         <el-input v-model="searchForm.searchName" placeholder="请输入商品名称/ID" clearable></el-input>
-        <el-button class="btn_search blackbtn" icon="el-icon-search" @click="handleLogin">查询</el-button>
+        <el-button class="btn_search blackbtn" icon="el-icon-search" @click="search">查询</el-button>
       </div>
     </div>
     <e-table class="table" ref="eTable" :tableHeadConfig="tableHeadConfig" :tableLoadData="tableLoadData"
-      :pageShow="true" :total="searchForm.total" :currentPage="searchForm.pageNum" :pageSize="searchForm.pageSize"
-      @getPageList="getPageList">
+      :pageShow="true" :total="searchForm.total" :currentPage="searchForm.page" :pageSize="searchForm.pageSize"
+      @getPageList="getPageList" @changeSort="changeSort">
       <template v-slot:operation="slotData">
         <div class="operationDiv">
-            <el-button type="text"  @click="toView(slotData.row)">下架</el-button>
-            <el-button type="text"  @click="toView(slotData.row)">编辑</el-button>
+          <el-button type="text" @click="toEdit(slotData.data.row)" v-if="searchForm.type!='3'">
+            {{searchForm.type=='1'?'下架':'上架'}}</el-button>
+          <el-button type="text" @click="toView(slotData.data.row)">查看</el-button>
         </div>
       </template>
     </e-table>
@@ -28,55 +29,68 @@
 
 <script>
   import eTable from '@/components/base-table'
-  import{list} from '@/api/goods'
+  import {
+    list,
+    changeStatus,
+    getCountByType
+  } from '@/api/goods'
+  import store from '@/store/index'
   export default {
-    name: "index",
+    name: "goods",
     components: {
       eTable
     },
     data() {
       return {
+        type1Count: 0,
+        type2Count: 0,
+        type3Count: 0,
         searchForm: {
           searchName: '',
           total: 0,
           page: 1,
           pageSize: 10,
-          type:'1'
+          type: '1',
+          sortField: '',
+          sortOrder: ''
         },
         tableHeadConfig: [{
             label: '商品名称',
-            prop: 'name',
+            prop: 'title',
             isShow: true,
           },
 
           {
             label: '商品ID',
-            prop: 'name',
+            prop: 'out_product_id',
             isShow: true,
           },
           {
             label: '价格',
-            prop: 'name',
+            prop: 'sale_price',
             isShow: true,
+            sortable: true
           },
           {
             label: '库存',
-            prop: 'name',
+            prop: 'stock_num',
             isShow: true,
+            sortable: true
           },
           {
             label: '审核状态',
-            prop: 'name',
+            prop: 'status_name',
             isShow: true,
           },
           {
             label: '创建时间',
-            prop: 'name',
+            prop: 'create_time',
             isShow: true,
+            sortable: true
           },
           {
             label: '上架时间',
-            prop: 'name',
+            prop: 'stand_down_time',
             isShow: true,
           },
           {
@@ -87,7 +101,7 @@
             isShow: true,
           }
         ],
-        tableLoadData: [{name:"111"}],
+        tableLoadData: [],
       };
     },
     created() {},
@@ -96,16 +110,65 @@
         if (pageRequest) {
           this.searchForm.pageNum = pageRequest.pageIndex;
           this.searchForm.pageSize = pageRequest.pageSize;
+          this.searchForm.sortField = pageRequest.sort;
+          this.searchForm.sortOrder = pageRequest.order
         }
-        list(this.searchForm).then(res=>{
-
+        list(this.searchForm).then(res => {
+          this.searchForm.total = res.data.total
+          this.tableLoadData = res.data.list
         })
+        this.getCount()
       },
-      addGoods(){// 新增商品
+      addGoods() { // 新增商品
+        store.commit('SER_ADDOUTPRODUCTID', 0) //新增商品不获取详情
         this.$router.push("/goods/addGoods");
+      },
+      handleClick(tab, event) {
+        this.searchForm.searchName = ''
+        this.searchForm.page = 1
+        this.getPageList()
+      },
+      toView(row) {
+        this.$router.push({
+          name: "goodsDetail",
+          params: {
+            outProductId: row.out_product_id
+          }
+        });
+      },
+      toEdit(row) {
+        changeStatus({
+          commodityId: row.commodity_id,
+          editStatus: this.searchForm.type=='1'?11:5
+        }).then(res => {
+          this.$message.success('更新成功');
+          this.searchForm.searchName = ''
+          this.searchForm.page = 1
+          this.getPageList()
+        })
+      },
+      search(){
+        this.searchForm.page = 1
+        this.getPageList()
+      },
+      getCount() {
+        getCountByType().then(res => {
+          res.data.forEach(element => {
+            if (element.type == 1) {
+              this.type1Count = element.count
+            }
+            if (element.type == 2) {
+              this.type2Count = element.count
+            }
+            if (element.type == 3) {
+              this.type4Count = element.count
+            }
+
+          });
+        })
       }
     },
-    mounted(){
+    mounted() {
       this.getPageList()
     }
   };
@@ -114,8 +177,8 @@
   .btn_search {
     margin-left: 10px;
   }
-  .serach{
+
+  .serach {
     margin-bottom: 10px;
   }
-  
 </style>

src/router/routes.js

@@ -17,7 +17,7 @@ export  const menuRouter =[
     id: 1,
     name: 'qualification',
     path: '/qualification',
-    meta: { title: '资质管理', icon: 'icon-zizhiguanli', },
+    meta: { title: '资质管理', icon: 'icon-zizhiguanli', keepAlive:true},
     component: () => import('@/pages/qualification/index.vue'),
   },
 
@@ -25,7 +25,7 @@ export  const menuRouter =[
     id: 2,
     name: 'brand',
     path: '/brand',
-    meta: { title: '品牌管理', icon: 'icon-pinpai', },
+    meta: { title: '品牌管理', icon: 'icon-pinpai', keepAlive:true},
     component: () => import('@/pages/brand/index.vue'),
   },
 ]
@@ -41,7 +41,13 @@ export const otherRouter = [
   {
     name: 'addGoods',
     path: '/goods/addGoods',
-    meta: { title: '新增商品' },
+    meta: { title: '新增商品' , keepAlive:false},
     component: () => import('@/pages/goods/addGoods/index.vue'),
   },
+  {
+    name: 'goodsDetail',
+    path: '/goods/goodsDetail',
+    meta: { title: '商品详情' ,keepAlive:false},
+    component: () => import('@/pages/goods/goodsDetail/index.vue'),
+  },
 ]

src/store/modules/user.js

@@ -1,16 +1,20 @@
 const state = {
   token: '',
   info: {},
-  menuInfo: {},
-  tabList:[],
-  tabIndex:0,
+  menuInfo: {},//菜单点击数据
+  tabList:[], //tab页存储
+  tabIndex:0, //tab页的坐标
+  outProductId:0, //当前商品详情页id
+  addoutProductId:0//新增时商品详情
 }
 const getters = {
   getToken: state => state.token,
   getUserInfo: state => state.info,
   getMenuInfo: state => state.menuInfo,
   getTabList:state=>state.tabList,
-  getTabIndex:state=>state.tabIndex
+  getTabIndex:state=>state.tabIndex,
+  getOutProductId:state=>state.outProductId,
+  getAddOutProductId:state=>state.addoutProductId
 }
 const mutations = {
   SET_USER_TOKEN(state, token) {
@@ -34,6 +38,12 @@ const mutations = {
   SET_TABINDEX(state,index){
     state.tabIndex=index
   },
+  SER_OUTPRODUCTID(state,outProductId){
+    state.outProductId=outProductId
+  },
+  SER_ADDOUTPRODUCTID(state,outProductId){
+    state.addoutProductId=outProductId
+  },
   REMOVETAB(state,tabname){
     state.tabList.forEach((element,index) => {
       if(element.name==tabname){
@@ -47,7 +57,8 @@ const mutations = {
     state.menuInfo={},
     state.info={},
     state.token = '',
-    state.tabIndex=0
+    state.tabIndex=0,
+    state.outProductId=0
   }
 }
 export default {

src/utils/request.js

@@ -10,7 +10,7 @@ const service = axios.create({
 
 // 请求拦截器
 service.interceptors.request.use(config => {
-  config.headers['s-token'] = store.getters.getToken;
+  config.headers['X-Token'] = store.getters.getToken;
   config.headers['Authorization'] = 'Bearer ' + store.getters.getToken
   return config
 },