添加藏品列表以及藏品详情

src/api/business/sale.js

@@ -45,3 +45,4 @@ export function findSaleDetail(data) {
     data
   })
 }
+

src/router/index.js

@@ -461,6 +461,31 @@ export const asyncRouterMap = [
           keepAlive: true
         }
       },
+      {
+        path: 'itemList',
+        component: () => import('@/views/sale/itemList'),
+        name: 'itemList',
+        meta: {
+          perms: [],
+          title: '用户藏品',
+          icon: 'list',
+          noCache: true,
+          keepAlive: true
+        }
+      },
+      {
+        path: 'itemDetail',
+        component: () => import('@/views/sale/itemDetail'),
+        name: 'itemDetail',
+        meta: {
+          perms: [],
+          title: '藏品详情',
+          icon: 'list',
+          noCache: true,
+          keepAlive: true
+        },
+        hidden: true
+      },
       {
         path: 'saleAdd',
         component: () => import('@/views/sale/saleAdd'),

src/views/sale/itemDetail.vue

+<template>
+  <div class="page_itemDetail">
+    <el-card class="box-card" style="margin: 16px">
+      <h3>用户信息</h3>
+      <div class="user_info flex" >
+        <el-form ref="addInviteRef" label-width="120px">
+          <el-form-item label="商品名称：">
+            <div>{{ itemContent && itemContent.name || '-' }}</div>
+          </el-form-item>
+          <el-form-item label="价格：">
+            <div>{{ `¥${itemContent && itemContent.distributionPrice || '-'}` }}</div>
+          </el-form-item>
+          <el-form-item label="商品详情：">
+            <div>{{ itemContent && itemContent.name || '-' }}</div>
+          </el-form-item>
+          <el-form-item label="商品图片/视频：">
+            <div v-if="itemContent && itemContent.imagelist && (typeof itemContent.imagelist === 'object')" class="image">
+              <div v-for="item in itemContent.imagelist" :key="item.url" class="image_item" @click="handleShowLargeDialog(item.type, item.url, item.videoUrl)">
+                <img :src="item.url" class="image_item_content" >
+                <img v-if="item.type === 1" class="image_content_video_icon" src="https://cdn.wanwudezhi.com/static/web-static/image/10651432d8c28651da81753c260d81b3_120x120.png">
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="发布者：">
+            <div>{{ itemContent && itemContent.creatorName || '-' }}</div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+    </el-card>
+    <el-card class="box-card" style="margin: 16px">
+      <h3>其他信息</h3>
+      <div class="user_info flex" >
+        <el-form ref="addInviteRef" label-width="120px">
+          <el-form-item label="是否售卖：">
+            <div>{{ itemContent && itemContent.isAnabSale ? '是' : '否' }}</div>
+          </el-form-item>
+          <el-form-item label="库存：">
+            <div>{{ itemContent && itemContent.stock || '-' }}</div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+    </el-card>
+    <CheckLargeImageDialog
+      :show-large-dialog="showLargeDialog"
+      :image-url="imageUrl"
+      @closeLargeDialog="showLargeDialog = false"
+    />
+    <CheckVideoDialog
+      :show-video-dialog="showVideoDialog"
+      :video-url="videosUrl"
+      @closeLargeDialog="showVideoDialog = false" />
+  </div>
+
+</template>
+
+<script>
+import { findSaleDetail } from '../../api/business/sale'
+import CheckLargeImageDialog from '../goods/components/CheckLargeImageDialog'
+import CheckVideoDialog from '../goods/components/CheckVideoDialog'
+
+export default {
+  name: 'ItemDetail',
+  components: { CheckVideoDialog, CheckLargeImageDialog },
+  data() {
+    return {
+      id: '',
+      itemContent: {},
+      imageUrl: '',
+      showLargeDialog: false,
+      showVideoDialog: false,
+      videosUrl: ''
+    }
+  },
+  created() {
+    if (this.$route.query.id == null) {
+      return
+    }
+    this.id = this.$route.query.id
+    const loading = this.$loading({
+      lock: true,
+      text: 'Loading',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+    this.handleGetDetail(loading)
+  },
+  methods: {
+    /**
+     * 获取详情
+     * @param loading
+     */
+    handleGetDetail(loading) {
+      findSaleDetail({ id: this.id })
+        .then(response => {
+          if (loading) {
+            loading.close()
+          }
+          console.log('====', response.data.data)
+          if (response.data.data) {
+            this.itemContent = response.data.data
+            this.itemContent.images = response.data.data.images ? response.data.data.images.split(';') : []
+            const imageList = []
+            if (this.itemContent.videos) {
+              const videoList = this.itemContent.videos.split(',')
+              if (videoList.length === 2) {
+                imageList.push({
+                  url: videoList[1],
+                  type: 1,
+                  videoUrl: videoList[0]
+                })
+              }
+            }
+            if (this.itemContent.images && this.itemContent.images.length > 0) {
+              for (var i = 0; i < this.itemContent.images.length; i++) {
+                imageList.push({
+                  url: this.itemContent.images[i],
+                  videoUrl: '',
+                  type: 2
+                })
+              }
+            }
+            this.itemContent.imagelist = imageList
+          }
+        })
+        .catch(response => {
+          console.log('====erro', response)
+          if (loading) {
+            loading.close()
+          }
+        })
+    },
+
+    /**
+     * 展示大图
+     * @param imageUrl
+     */
+    handleShowLargeDialog(type, imageUrl, videoUrl) {
+      if (type === 1) {
+        this.videosUrl = videoUrl
+        this.showVideoDialog = true
+      } else {
+        this.imageUrl = imageUrl
+        this.showLargeDialog = true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page_itemDetail {
+  padding: 20px;
+  .image {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+  }
+  .image_item {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
+    margin-top: 16px;
+    position: relative;
+    .image_item_content {
+      width: 100px;
+      height: 100px;
+    }
+    .image_content_video_icon {
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      top: 10px;
+      left: 10px;
+    }
+  }
+}
+/deep/ .el-form-item {
+  margin-bottom: 0
+}
+</style>

src/views/sale/itemList.vue

+<template>
+  <div class="page_consignList">
+    <div class="filter-container">
+      <div class="button_left">
+        <el-input v-model="listQuery.itemName" clearable class="filter-item" style="width: 200px;" placeholder="请输入标题"/>
+        <el-select v-model="listQuery.isOnSale" placeholder="请选择是否出售" class="filter-item" style="width: 200px;">
+          <el-option
+            v-for="item in options"
+            :key="item.label"
+            :label="item.label"
+            :value="item.value"
+            size="mini"/>
+        </el-select>
+        <el-select v-model="listQuery.status" placeholder="请选择藏品状态" class="filter-item" style="width: 200px;">
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.label"
+            :label="item.label"
+            :value="item.value"
+            size="mini"/>
+        </el-select>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 12px" @click="handleFilter">查找</el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      size="small"
+      element-loading-text="正在查询中..."
+      border
+      fit
+      highlight-current-row>
+      <!--      <el-table-column align="center" label="排行" width="100px" type="index" />-->
+      <el-table-column align="center" min-width="100px" prop="id" label="商品ID" />
+      <el-table-column align="center" label="封面图" prop="itemImg">
+        <template slot-scope="scope">
+          <img v-if="scope.row.images" :src="scope.row.images.split(';')[0]" width="60px" height="60px">
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="藏品名称" min-width="150px" prop="name">
+        <template slot-scope="scope">
+          <Line2Hidden :text="scope.row.name" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="藏品价格" prop="distributionPrice">
+        <template slot-scope="scope">
+          <span class="tooltip-span">{{ `¥ ${scope.row.distributionPrice}` }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="是否出售" prop="isAbleSale" min-width="100px">
+        <template slot-scope="scope" style="height: 100px">
+          <el-switch
+            v-model="scope.row.isAbleSale"
+            :active-text="scope.row.isAbleSale === true ? '是' : '否'"
+            style="display: block"
+            @change="handleSaleSwitch($event, scope.row)" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" min-width="100px" prop="stock" label="库存" />
+      <el-table-column align="center" min-width="100px" prop="creatorName" label="作者" />
+      <el-table-column align="center" min-width="100px" prop="updateTime" label="更新时间" />
+      <el-table-column align="center" min-width="100px" prop="statusName" label="状态" >
+        <template slot-scope="scope">
+          <span class="tooltip-span">{{ `${scope.row.statusName || '-'}` }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" width="100">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleToDetail(scope.row)">详情
+          </el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <Pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.size"
+      @pagination="getList" />
+
+  </div>
+</template>
+
+<script>
+import Line2Hidden from '@/components/line2Hidden'
+import Pagination from '@/components/Pagination'
+import { getSaleList, updateOnSale, deleteSaleItem } from '@/api/business/sale'
+import { MessageBox } from 'element-ui'
+
+export default {
+  name: 'SaleList',
+  components: {
+    Pagination,
+    Line2Hidden
+  },
+  data() {
+    return {
+      itemKey: 0,
+      options: [{
+        value: 1,
+        label: '是'
+      }, {
+        value: 0,
+        label: '否'
+      }],
+      statusOptions: [{
+        value: 0,
+        label: '正常'
+      }, {
+        value: 1,
+        label: '违规'
+      }],
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        size: 20,
+        type: 3
+      },
+      list: [],
+      total: 0,
+      // 图文估价
+      imageValueDialogShow: false,
+      // 建议寄售价
+      identifyValueDialogShow: false,
+      // 货品售出
+      finishDialogShow: false,
+      // 寄售凭证
+      finishSettlementDialogShow: false,
+      // 取消
+      cancelConsignDialogShow: false,
+      currentSaleId: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  destroyed() {
+    this.clearAll()
+  },
+  methods: {
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleSaleSwitch(e, item) {
+      const params = { id: item.id, isOnSale: e }
+      updateOnSale(params)
+        .then(response => {
+          this.$notify.success({
+            message: e ? '上架成功' : '下架成功'
+          })
+        })
+        .catch(response => {
+          item.isOnSale = !e
+          MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
+            confirmButtonText: '确定',
+            type: 'error'
+          })
+        })
+    },
+    handleCreate() {
+      this.$router.push({ path: '/sale/saleAdd' })
+    },
+    // 清除所有定时器
+    clearAll() {
+      if (this.list) {
+        this.list.forEach((el) => {
+          clearInterval(el.countDown)
+        })
+      }
+    },
+    handlerGetList() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleClick(tab, event) {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    getList() {
+      localStorage.setItem('systemState', '')
+      this.listLoading = true
+      getSaleList(this.listQuery).then(response => {
+        this.clearAll()
+        this.list = response.data.data.dataList
+        this.total = response.data.data.total
+        this.listLoading = false
+      }).catch((e) => {
+        this.list = []
+        this.total = 0
+        this.listLoading = false
+      })
+    },
+    /**
+     * 详情
+     */
+    handleToDetail(item) {
+      this.$router.push({ path: '/sale/itemDetail', query: { id: item.id }})
+    },
+    /**
+     * 删除
+     */
+    handleDelete(item) {
+      this.$confirm('你确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const data = {
+          id: item.id
+        }
+        deleteSaleItem(data).then((res) => {
+          this.$notify.success({
+            title: '成功',
+            message: '删除成功'
+          })
+          this.getList()
+        }).catch(err => {
+          this.$notify.error({
+            title: '失败',
+            message: err.data.errmsg
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-switch {
+  height: 30px;
+}
+
+/deep/ .cell {
+  display: flex;
+  justify-content: center;
+}
+
+.page_consignList {
+  padding: 20px;
+  .filter-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+</style>

src/views/sale/saleList.vue

 <template>
   <div class="page_consignList">
     <div class="filter-container">
-      <div class="filter-container">
-        <el-input v-model="listQuery.isOnSale" clearable size="mini" class="filter-item" style="width: 200px;" placeholder="请输入标题"/>
-        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
+      <div class="button_left">
+        <el-input v-model="listQuery.itemName" clearable class="filter-item" style="width: 200px;" placeholder="请输入标题"/>
+        <el-select v-model="listQuery.isOnSale" placeholder="请选择" class="filter-item" style="width: 200px;">
+          <el-option
+            v-for="item in options"
+            :key="item.label"
+            :label="item.label"
+            :value="item.value"
+            size="mini"/>
+        </el-select>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 12px" @click="handleFilter">查找</el-button>
       </div>
       <el-button size="mini" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
     </div>
@@ -17,7 +25,7 @@
       highlight-current-row>
       <!--      <el-table-column align="center" label="排行" width="100px" type="index" />-->
       <el-table-column align="center" min-width="100px" prop="id" label="商品ID" />
-      <el-table-column align="center" label="图片" prop="itemImg">
+      <el-table-column align="center" label="封面图" prop="itemImg">
         <template slot-scope="scope">
           <img v-if="scope.row.images" :src="scope.row.images.split(';')[0]" width="60px" height="60px">
         </template>
@@ -101,7 +109,13 @@ export default {
   data() {
     return {
       itemKey: 0,
-
+      options: [{
+        value: 1,
+        label: '上架'
+      }, {
+        value: 0,
+        label: '下架'
+      }],
       listLoading: true,
       listQuery: {
         page: 1,
@@ -130,7 +144,8 @@ export default {
   },
   methods: {
     handleFilter() {
-
+      this.listQuery.page = 1
+      this.getList()
     },
     handleSaleSwitch(e, item) {
       const params = { id: item.id, isOnSale: e }
@@ -217,7 +232,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 /deep/ .el-switch {
   height: 30px;
 }
@@ -229,6 +244,11 @@ export default {
 
 .page_consignList {
   padding: 20px;
+  .filter-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 }
 
 </style>