From b2c8c8ed9e26e2e8552c250550b457a447ab9694 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Thu, 10 Nov 2022 15:56:48 +0800
Subject: [PATCH] up

---
 .../productService/components/addProduct.vue  | 1099 +++++++++--------
 1 file changed, 556 insertions(+), 543 deletions(-)

diff --git a/src/views/productService/components/addProduct.vue b/src/views/productService/components/addProduct.vue
index b8f868b..13e515c 100644
--- a/src/views/productService/components/addProduct.vue
+++ b/src/views/productService/components/addProduct.vue
@@ -1,544 +1,557 @@
-<template>
-  <div>
-    <xy-dialog :width="66" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增商品' : '编辑商品'" :form="form" :rules="rules" @submit="submit">
-      <template v-slot:name>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>名称：
-          </div>
-          <div class="xy-table-item-content">
-            <el-input v-model="form.name" placeholder="请输入商品名称" clearable style="width: 300px;"></el-input>
-          </div>
-        </div>
-      </template>
-      <template v-slot:poster>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            海报图：
-          </div>
-          <div class="xy-table-item-content">
-            <div v-if="form.poster" style="position: relative;">
-              <img :src="form.poster" class="avatar">
-              <Button
-                shape="circle"
-                icon="md-close"
-                type="error"
-                size="small"
-                class="img__delete"
-                @click="form.poster = ''"></Button>
-            </div>
-            <el-upload
-              v-else
-              accept="picture"
-              :limit="1"
-              class="avatar-uploader"
-              list-type="picture-card"
-              :action="action"
-              :show-file-list="true"
-              :on-error="uploadFail"
-              :on-success="uploadSuccess"
-              :before-upload="uploadBefore">
-              <i  class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
-          </div>
-        </div>
-      </template>
-      <template v-slot:merchantId>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户：
-          </div>
-          <div class="xy-table-item-content">
-            <el-input suffix-icon="el-icon-arrow-down" readonly :value="form.merchantId.label" placeholder="请选择所属商户" clearable style="width: 300px;" @focus="isShowMerchantSelect = true,getMerchants()"></el-input>
-          </div>
-        </div>
-      </template>
-      <template v-slot:shopIds>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            限制门店：
-          </div>
-          <div class="xy-table-item-content">
-            <el-input v-model="form.shopIds" placeholder="请选择限制门店" clearable style="width: 300px;"></el-input>
-          </div>
-        </div>
-      </template>
-      <template v-slot:productTypePid>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属板块：
-          </div>
-          <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择所属板块" style="width: 300px" v-model="form.productTypePid" @change="typeChange">
-              <el-option v-for="item in types" :key="item.id" :value="item.id" :label="item.name">
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-      </template>
-      <template v-slot:productTypeId>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>产品类别：
-          </div>
-          <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择产品类别" style="width: 300px" v-model="form.productTypeId">
-              <el-option v-for="item in products" :key="item.id" :value="item.id" :label="item.name">
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-      </template>
-      <template v-slot:originalPrice>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>原价：
-          </div>
-          <div class="xy-table-item-content number-input">
-            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入原价" clearable v-model="form.originalPrice" style="width: 300px;"></el-input-number>
-          </div>
-        </div>
-      </template>
-      <template v-slot:price>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>价格：
-          </div>
-          <div class="xy-table-item-content number-input">
-            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入价格" clearable v-model="form.price" style="width: 300px;"></el-input-number>
-          </div>
-        </div>
-      </template>
-      <template v-slot:fee>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>平台佣金：
-          </div>
-          <div class="xy-table-item-content number-input">
-            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入平台佣金" clearable v-model="form.fee" style="width: 300px;"></el-input-number>
-          </div>
-        </div>
-      </template>
-      <template v-slot:sharing>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>分享金：
-          </div>
-          <div class="xy-table-item-content number-input">
-            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入分享金" clearable v-model="form.sharing" style="width: 300px;"></el-input-number>
-          </div>
-        </div>
-      </template>
-      <template v-slot:maxQuantity>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总份数：
-          </div>
-          <div class="xy-table-item-content">
-            <el-input-number :min="0" placeholder="请输入总份数" clearable v-model="form.maxQuantity" style="width: 200px;"></el-input-number>
-          </div>
-        </div>
-      </template>
-      <template v-slot:limitQuantity>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>每用户限购：
-          </div>
-          <div class="xy-table-item-content">
-            <el-input-number :min="0" placeholder="请输入每用户限购数" clearable v-model="form.limitQuantity" style="width: 200px;"></el-input-number>
-          </div>
-        </div>
-      </template>
-      <template v-slot:pretendQuantity>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>虚拟购买次数：
-          </div>
-          <div class="xy-table-item-content">
-            <el-input-number :min="0" placeholder="请输入虚拟购买次数" clearable v-model="form.pretendQuantity" style="width: 200px;"></el-input-number>
-          </div>
-        </div>
-      </template>
-      <template v-slot:time>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>上架/下架时间：
-          </div>
-          <div class="xy-table-item-content">
-            <el-date-picker
-              clearable
-              style="width: 440px;"
-              v-model="form.time"
-              type="datetimerange"
-              :picker-options="pickerOptions"
-              range-separator="至"
-              start-placeholder="上架日期"
-              end-placeholder="下架日期"
-              align="right"
-              value-format="yyyy-MM-dd hh:mm:ss">
-            </el-date-picker>
-          </div>
-        </div>
-      </template>
-      <template v-slot:sortnumber>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序<span style="font-size: 12px;padding-left: 2px;color: rgb(140,140,140)">（大到小）</span> ：
-          </div>
-          <div class="xy-table-item-content">
-            <el-input-number v-model="form.sortnumber" :controls="false" style="width: 200px;"></el-input-number>
-          </div>
-        </div>
-      </template>
-      <template v-slot:content>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            内容:
-          </div>
-          <div class="xy-table-item-content">
-            <tinymce ref="tinymce" :height="200" v-model="form.content" id='tinymce'></tinymce>
-          </div>
-        </div>
-      </template>
-    </xy-dialog>
-
-    <Modal v-model="isShowMerchantSelect" title="所属商户选择">
-      <Table
-        size="small"
-        highlight-row
-        ref="currentRowTable"
-        :columns="merchantTable"
-        :data="merchants"
-        @on-current-change="merchantSelect" />
-      <Page :current="merchantIndex" :total="merchantTotal" simple style="padding-top: 14px;display: flex;justify-content: center;" @on-change="merchantPageChange"/>
-    </Modal>
-
-
-  </div>
-</template>
-
-<script>
-import {store,show,save} from '@/api/product'
-import {index as merchantIndex} from '@/api/merchant'
-import { Message } from 'element-ui'
-
-import tinymce from "@/components/Tinymce"
-export default {
-  components:{
-    tinymce
-  },
-  props:{
-    types:Array
-  },
-  data() {
-    return {
-      id:'',
-      isShow:false,
-      type:'add',
-      action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
-      pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
-      },
-
-      form:{
-        name:'',
-        poster:'',
-        merchantId:'',
-        shopIds:'',
-        productTypePid:'',
-        productTypeId:'',
-        originalPrice:'',
-        price:'',
-        fee:'',
-        sharing:'',
-        maxQuantity:'',
-        limitQuantity:'1',
-        pretendQuantity:0,
-        time:[],
-        sortnumber:0,
-        content:''
-      },
-      rules:{
-        name:[
-          {required:true,message:'请填写商品名称'}
-        ],
-        merchantId:[
-          {required:true,message:'请选择所属商家'}
-        ],
-        productTypePid:[
-          {required:true,message:'请选择所属模块'}
-        ],
-        productTypeId:[
-          {required:true,message:'请选择产品类别'}
-        ],
-        originalPrice:[
-          {required:true,message:'请输入原价'}
-        ],
-        price:[
-          {required:true,message:'请输入价格'}
-        ],
-        fee:[
-          {required:true,message:'请输入平台佣金'}
-        ],
-        sharing:[
-          {required:true,message:'请输入分享金'}
-        ],
-        maxQuantity:[
-          {required:true,message:'请输入总分数'}
-        ],
-        limitQuantity:[
-          {required:true,message:'请输入用户限购'}
-        ],
-        time:[
-          {required:true,message:'请选择上架/下架时间'}
-        ]
-      },
-
-      products:[],//板块下商品
-
-      isShowMerchantSelect:false,
-      merchants:[],
-      merchantTable:[
-        {
-          title:'简称',
-          key:'username',
-          width:130
-        },
-        {
-          title:'全称',
-          key:'name',
-          align:'left',
-          width:220
-        },
-        {
-          title:'状态',
-          key:'state',
-          sortable:true
-        }
-      ],
-      merchantIndex:1,
-      merchantTotal:0,
-    }
-  },
-  methods: {
-    async getDetail(){
-      const res = await show({id:this.id})
-      this.typeChange(res?.product_type_pid)
-      this.form = {
-        name:res?.name,
-        poster:res?.poster,
-        merchantId:{
-          label:res.merchant.name,
-          value:res.merchant.id
-        },
-        shopIds:res?.shop_ids,
-        productTypePid:res?.product_type_pid,
-        productTypeId:res?.product_type_id,
-        originalPrice:res?.original_price,
-        price:res?.price,
-        fee:res?.fee,
-        sharing:res?.sharing,
-        maxQuantity:res?.max_quantity,
-        limitQuantity:res?.limit_quantity,
-        pretendQuantity:res?.pretend_quantity,
-        time:[res?.start_time,res?.end_time],
-        sortnumber:res?.sortnumber,
-        content:res?.content
-      }
-      this.$refs['tinymce'].setContent(this.form.content ||' ')
-    },
-
-    //上传
-    uploadFail(err){
-      console.log(err)
-    },
-    uploadSuccess(response){
-      console.log(response)
-      this.form.poster = response.url
-    },
-    uploadBefore(file){
-      if((file.size/1000) > 2024){
-        Message({
-          type:'warning',
-          message:'上传图片大小超过2M！'
-        })
-        return false
-      }
-    },
-
-    typeChange(val){
-      if(!val){
-        this.products = []
-        return
-      }
-      let res = this.types.filter(item => {
-        return item.id === val
-      })
-      this.products = res[0].children
-    },
-
-    async getMerchants(){
-      const res = await merchantIndex({
-        page_size:10,
-        page:this.merchantIndex
-      })
-      this.merchantTotal = res.total
-      this.merchants = res.data
-    },
-    merchantPageChange(e){
-      this.merchantIndex = e
-      this.getMerchants()
-    },
-    merchantSelect(row){
-      this.form.merchantId = {
-        label:row.username,
-        value:row.id
-      }
-    },
-
-
-    submit(){
-      if(this.type === 'add'){
-        store({
-          name:this.form.name,
-          poster:this.form.poster,
-          merchant_id:this.form.merchantId?.value,
-          shop_ids:this.form.shopIds,
-          product_type_pid:this.form.productTypePid,
-          product_type_id:this.form.productTypeId,
-          original_price:this.form.originalPrice.toString(),
-          price:this.form.price.toString(),
-          fee:this.form.fee.toString(),
-          sharing:this.form.sharing.toString(),
-          max_quantity:this.form.maxQuantity.toString(),
-          limit_quantity:this.form.limitQuantity.toString(),
-          pretend_quantity:this.form.pretendQuantity.toString(),
-          start_time:this.form.time[0],
-          sortnumber:this.form.sortnumber,
-          end_time:this.form.time[1],
-          content:this.form.content
-        }).then(res => {
-          Message({
-            type:'success',
-            message:'新增成功'
-          })
-          this.isShow = false
-          this.$emit('refresh')
-        })
-        return
-      }
-      if(this.type === 'editor'){
-        save({
-          id:this.id,
-          name:this.form.name,
-          poster:this.form.poster,
-          merchant_id:this.form.merchantId?.value,
-          shop_ids:this.form.shopIds,
-          product_type_pid:this.form.productTypePid,
-          product_type_id:this.form.productTypeId,
-          original_price:this.form.originalPrice.toString(),
-          price:this.form.price.toString(),
-          fee:this.form.fee.toString(),
-          sharing:this.form.sharing.toString(),
-          max_quantity:this.form.maxQuantity.toString(),
-          limit_quantity:this.form.limitQuantity.toString(),
-          pretend_quantity:this.form.pretendQuantity.toString(),
-          start_time:this.form.time[0],
-          sortnumber:this.form.sortnumber,
-          end_time:this.form.time[1],
-          content:this.form.content
-        }).then(res => {
-          Message({
-            type:'success',
-            message:'编辑商品成功'
-          })
-            this.isShow = false
-          this.$emit('refresh')
-        })
-      }
-    }
-  },
-  watch:{
-    isShow(newVal){
-      if(newVal){
-
-        if(this.type === 'editor'){
-          this.getDetail()
-        }
-      }else{
-        this.$refs['tinymce'].setContent(' ')
-        this.$refs['dialog'].reset()
-        this.id = ''
-        this.type = ''
-      }
-    }
-  }
-
-}
-</script>
-
-<style scoped lang="scss">
-.xy-table-item-label{
-  width: 164px;
-}
-
-.number-input{
-  ::v-deep .el-input-number .el-input__inner{
-    text-align: left !important;
-  }
-}
-</style>
-
-<style>
-.avatar-uploader .el-upload {
-  width: 110px;
-  height: 110px;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #BF617C;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 110px;
-  height: 110px;
-  line-height: 110px;
-  text-align: center;
-}
-.avatar {
-  width: 110px;
-  display: block;
-  border-radius: 6px;
-}
-.img__delete{
-  transform: scale(0.7,0.7);
-
-  position: absolute;
-  top: 1px;
-  left: 4%;
-}
+<template>
+  <div>
+    <xy-dialog :width="66" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增商品' : '编辑商品'"
+      :form="form" :rules="rules" @submit="submit">
+      <template v-slot:name>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>名称：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input v-model="form.name" placeholder="请输入商品名称" clearable style="width: 300px;"></el-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot:poster>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            海报图：
+          </div>
+          <div class="xy-table-item-content">
+            <div v-if="form.poster_url" style="position: relative;">
+              <img :src="form.poster_url" class="avatar">
+              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
+                @click="form.poster_url = ''"></Button>
+            </div>
+            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
+              :action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
+              :before-upload="uploadBefore">
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </div>
+        </div>
+      </template>
+      <template v-slot:merchantId>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input suffix-icon="el-icon-arrow-down" readonly :value="form.merchantId.label" placeholder="请选择所属商户"
+              clearable style="width: 300px;" @focus="isShowMerchantSelect = true,getMerchants()"></el-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot:shopIds>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            限制门店：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input v-model="form.shopIds" placeholder="请选择限制门店" clearable style="width: 300px;"></el-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot:productTypePid>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属板块：
+          </div>
+          <div class="xy-table-item-content">
+            <el-select clearable placeholder="请选择所属板块" style="width: 300px" v-model="form.productTypePid"
+              @change="typeChange">
+              <el-option v-for="item in types" :key="item.id" :value="item.id" :label="item.name">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
+      <template v-slot:productTypeId>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>产品类别：
+          </div>
+          <div class="xy-table-item-content">
+            <el-select clearable placeholder="请选择产品类别" style="width: 300px" v-model="form.productTypeId">
+              <el-option v-for="item in products" :key="item.id" :value="item.id" :label="item.name">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
+      <template v-slot:originalPrice>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>原价：
+          </div>
+          <div class="xy-table-item-content number-input">
+            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入原价" clearable
+              v-model="form.originalPrice" style="width: 300px;"></el-input-number>
+          </div>
+        </div>
+      </template>
+      <template v-slot:price>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>价格：
+          </div>
+          <div class="xy-table-item-content number-input">
+            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入价格" clearable
+              v-model="form.price" style="width: 300px;"></el-input-number>
+          </div>
+        </div>
+      </template>
+      <template v-slot:fee>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>平台佣金：
+          </div>
+          <div class="xy-table-item-content number-input">
+            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入平台佣金" clearable
+              v-model="form.fee" style="width: 300px;"></el-input-number>
+          </div>
+        </div>
+      </template>
+      <template v-slot:sharing>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>分享金：
+          </div>
+          <div class="xy-table-item-content number-input">
+            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入分享金" clearable
+              v-model="form.sharing" style="width: 300px;"></el-input-number>
+          </div>
+        </div>
+      </template>
+      <template v-slot:maxQuantity>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总份数：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input-number :min="0" placeholder="请输入总份数" clearable v-model="form.maxQuantity" style="width: 200px;">
+            </el-input-number>
+          </div>
+        </div>
+      </template>
+      <template v-slot:limitQuantity>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>每用户限购：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input-number :min="0" placeholder="请输入每用户限购数" clearable v-model="form.limitQuantity"
+              style="width: 200px;"></el-input-number>
+          </div>
+        </div>
+      </template>
+      <template v-slot:pretendQuantity>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>虚拟购买次数：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input-number :min="0" placeholder="请输入虚拟购买次数" clearable v-model="form.pretendQuantity"
+              style="width: 200px;"></el-input-number>
+          </div>
+        </div>
+      </template>
+      <template v-slot:time>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>上架/下架时间：
+          </div>
+          <div class="xy-table-item-content">
+            <el-date-picker clearable style="width: 440px;" v-model="form.time" type="datetimerange"
+              :picker-options="pickerOptions" range-separator="至" start-placeholder="上架日期" end-placeholder="下架日期"
+              align="right" value-format="yyyy-MM-dd hh:mm:ss">
+            </el-date-picker>
+          </div>
+        </div>
+      </template>
+      <template v-slot:sortnumber>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序<span
+              style="font-size: 12px;padding-left: 2px;color: rgb(140,140,140)">（大到小）</span> ：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input-number v-model="form.sortnumber" :controls="false" style="width: 200px;"></el-input-number>
+          </div>
+        </div>
+      </template>
+      <template v-slot:content>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            内容:
+          </div>
+          <div class="xy-table-item-content">
+            <tinymce ref="tinymce" :height="200" v-model="form.content" id='tinymce'></tinymce>
+          </div>
+        </div>
+      </template>
+    </xy-dialog>
+
+    <Modal v-model="isShowMerchantSelect" title="所属商户选择">
+      <Table size="small" highlight-row ref="currentRowTable" :columns="merchantTable" :data="merchants"
+        @on-current-change="merchantSelect" />
+      <Page :current="merchantIndex" :total="merchantTotal" simple
+        style="padding-top: 14px;display: flex;justify-content: center;" @on-change="merchantPageChange" />
+    </Modal>
+
+
+  </div>
+</template>
+
+<script>
+  import {
+    store,
+    show,
+    save
+  } from '@/api/product'
+  import {
+    index as merchantIndex
+  } from '@/api/merchant'
+  import {
+    Message
+  } from 'element-ui'
+
+  import tinymce from "@/components/Tinymce"
+  export default {
+    components: {
+      tinymce
+    },
+    props: {
+      types: Array
+    },
+    data() {
+      return {
+        id: '',
+        isShow: false,
+        type: 'add',
+        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
+        pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+
+        form: {
+          name: '',
+          poster: '',
+          merchantId: '',
+          shopIds: '',
+          productTypePid: '',
+          productTypeId: '',
+          originalPrice: '',
+          price: '',
+          fee: '',
+          sharing: '',
+          maxQuantity: '',
+          limitQuantity: '1',
+          pretendQuantity: 0,
+          time: [],
+          sortnumber: 0,
+          content: '',
+          poster_url: ""
+        },
+        rules: {
+          name: [{
+            required: true,
+            message: '请填写商品名称'
+          }],
+          merchantId: [{
+            required: true,
+            message: '请选择所属商家'
+          }],
+          productTypePid: [{
+            required: true,
+            message: '请选择所属模块'
+          }],
+          productTypeId: [{
+            required: true,
+            message: '请选择产品类别'
+          }],
+          originalPrice: [{
+            required: true,
+            message: '请输入原价'
+          }],
+          price: [{
+            required: true,
+            message: '请输入价格'
+          }],
+          fee: [{
+            required: true,
+            message: '请输入平台佣金'
+          }],
+          sharing: [{
+            required: true,
+            message: '请输入分享金'
+          }],
+          maxQuantity: [{
+            required: true,
+            message: '请输入总分数'
+          }],
+          limitQuantity: [{
+            required: true,
+            message: '请输入用户限购'
+          }],
+          time: [{
+            required: true,
+            message: '请选择上架/下架时间'
+          }]
+        },
+
+        products: [], //板块下商品
+
+        isShowMerchantSelect: false,
+        merchants: [],
+        merchantTable: [{
+            title: '简称',
+            key: 'username',
+            width: 130
+          },
+          {
+            title: '全称',
+            key: 'name',
+            align: 'left',
+            width: 220
+          },
+          {
+            title: '状态',
+            key: 'state',
+            sortable: true
+          }
+        ],
+        merchantIndex: 1,
+        merchantTotal: 0,
+      }
+    },
+    methods: {
+      async getDetail() {
+        const res = await show({
+          id: this.id
+        })
+        this.typeChange(res?.product_type_pid)
+        this.form = {
+          name: res?.name,
+          poster: res?.poster,
+          poster_url: res?.poster_url,
+          merchantId: {
+            label: res.merchant.name,
+            value: res.merchant.id
+          },
+          shopIds: res?.shop_ids,
+          productTypePid: res?.product_type_pid,
+          productTypeId: res?.product_type_id,
+          originalPrice: res?.original_price,
+          price: res?.price,
+          fee: res?.fee,
+          sharing: res?.sharing,
+          maxQuantity: res?.max_quantity,
+          limitQuantity: res?.limit_quantity,
+          pretendQuantity: res?.pretend_quantity,
+          time: [res?.start_time, res?.end_time],
+          sortnumber: res?.sortnumber,
+          content: res?.content
+        }
+        this.$refs['tinymce'].setContent(this.form.content || ' ')
+      },
+
+      //上传
+      uploadFail(err) {
+        console.log(err)
+      },
+      uploadSuccess(response) {
+        console.log(response)
+        this.form.poster = "/" + response.folder + "/" + response.name
+        this.form.poster_url = response.url;
+      },
+      uploadBefore(file) {
+        if ((file.size / 1000) > 2024) {
+          Message({
+            type: 'warning',
+            message: '上传图片大小超过2M！'
+          })
+          return false
+        }
+      },
+
+      typeChange(val) {
+        if (!val) {
+          this.products = []
+          return
+        }
+        let res = this.types.filter(item => {
+          return item.id === val
+        })
+        this.products = res[0].children
+      },
+
+      async getMerchants() {
+        const res = await merchantIndex({
+          page_size: 10,
+          page: this.merchantIndex
+        })
+        this.merchantTotal = res.total
+        this.merchants = res.data
+      },
+      merchantPageChange(e) {
+        this.merchantIndex = e
+        this.getMerchants()
+      },
+      merchantSelect(row) {
+        this.form.merchantId = {
+          label: row.username,
+          value: row.id
+        }
+      },
+
+
+      submit() {
+        if (this.type === 'add') {
+          store({
+            name: this.form.name,
+            poster: this.form.poster,
+            merchant_id: this.form.merchantId?.value,
+            shop_ids: this.form.shopIds,
+            product_type_pid: this.form.productTypePid,
+            product_type_id: this.form.productTypeId,
+            original_price: this.form.originalPrice.toString(),
+            price: this.form.price.toString(),
+            fee: this.form.fee.toString(),
+            sharing: this.form.sharing.toString(),
+            max_quantity: this.form.maxQuantity.toString(),
+            limit_quantity: this.form.limitQuantity.toString(),
+            pretend_quantity: this.form.pretendQuantity.toString(),
+            start_time: this.form.time[0],
+            sortnumber: this.form.sortnumber,
+            end_time: this.form.time[1],
+            content: this.form.content
+          }).then(res => {
+            Message({
+              type: 'success',
+              message: '新增成功'
+            })
+            this.isShow = false
+            this.$emit('refresh')
+          })
+          return
+        }
+        if (this.type === 'editor') {
+          save({
+            id: this.id,
+            name: this.form.name,
+            poster: this.form.poster,
+            merchant_id: this.form.merchantId?.value,
+            shop_ids: this.form.shopIds,
+            product_type_pid: this.form.productTypePid,
+            product_type_id: this.form.productTypeId,
+            original_price: this.form.originalPrice.toString(),
+            price: this.form.price.toString(),
+            fee: this.form.fee.toString(),
+            sharing: this.form.sharing.toString(),
+            max_quantity: this.form.maxQuantity.toString(),
+            limit_quantity: this.form.limitQuantity.toString(),
+            pretend_quantity: this.form.pretendQuantity.toString(),
+            start_time: this.form.time[0],
+            sortnumber: this.form.sortnumber,
+            end_time: this.form.time[1],
+            content: this.form.content
+          }).then(res => {
+            Message({
+              type: 'success',
+              message: '编辑商品成功'
+            })
+            this.isShow = false
+            this.$emit('refresh')
+          })
+        }
+      }
+    },
+    watch: {
+      isShow(newVal) {
+        if (newVal) {
+
+          if (this.type === 'editor') {
+            this.getDetail()
+          }
+        } else {
+          this.$refs['tinymce'].setContent(' ')
+          this.$refs['dialog'].reset()
+          this.id = ''
+          this.type = ''
+        }
+      }
+    }
+
+  }
+</script>
+
+<style scoped lang="scss">
+  .xy-table-item-label {
+    width: 164px;
+  }
+
+  .number-input {
+    ::v-deep .el-input-number .el-input__inner {
+      text-align: left !important;
+    }
+  }
+</style>
+
+<style>
+  .avatar-uploader .el-upload {
+    width: 110px;
+    height: 110px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #BF617C;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 110px;
+    height: 110px;
+    line-height: 110px;
+    text-align: center;
+  }
+
+  .avatar {
+    width: 110px;
+    display: block;
+    border-radius: 6px;
+  }
+
+  .img__delete {
+    transform: scale(0.7, 0.7);
+
+    position: absolute;
+    top: 1px;
+    left: 4%;
+  }
 </style>