mall4vs-bbc/src/views/modules/prod/scoreProdInfo.vue

<template>
  <div class="mod-prod-info">
    <!-- <div class="title">新增积分商品</div> -->
    <el-form :model="dataForm" ref="dataForm" label-width="100px" size="small">
      <el-form-item label="商品类别">
        <el-radio-group v-model="dataForm.mold">
          <el-radio :label="0">实物商品</el-radio>
          <el-radio :label="1">虚拟商品</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品视频">
        <video-upload v-model="dataForm.video" />
      </el-form-item>
      <el-form-item label="商品图片"
      class="productImg-label"
      >
        <!-- <mul-pic-upload v-model="dataForm.imgs" /> -->
        <imgs-upload v-model="dataForm.imgs" />
        <span>建议图片尺寸为 800*800</span>
      </el-form-item>
      <score-sku-tag ref="skuTag" @change="skuTagChangeSkuHandler" :skuList="dataForm.skuList"></score-sku-tag>
      <score-sku-table
        ref="skuTable"
        v-model="dataForm.skuList"
        :prodNameCn.sync="prodNameCn"
        :prodNameEn.sync="prodNameEn"
      ></score-sku-table>

      <prod-transport
        v-model="dataForm.deliveryTemplateId"
      ></prod-transport>
      <el-tabs type="card">
        <el-tab-pane label="中文信息">
          <el-form-item label="产品名称" prop="prodNameCn">
            <!-- :rules="[{ required: true, message: '产品名称不能为空'}]" -->
            <el-col :span="8">
              <el-input
                v-model="prodNameCn"
                placeholder="产品名称"
                maxlength="50"
              ></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="商品卖点" prop="briefCn">
            <el-col :span="8">
              <el-input
                v-model="briefCn"
                type="textarea"
                :autosize="{minRows: 2, maxRows: 4}"
                placeholder="商品卖点"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item :label="this.$i18n.t('homes.productDetails')" prop="contentCn">
            <tiny-mce v-model="contentCn" ref="content" style="width:95%"></tiny-mce>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="English Information">
          <el-form-item label="Prod name" prop="prodNameEn">
            <!-- :rules="[{ required: true, message: 'Product English name cannot be empty'}]" -->
            <el-col :span="8">
              <el-input v-model="prodNameEn" placeholder="Prod name" maxlength="50"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="Selling point" prop="briefEn">
            <el-col :span="8">
              <el-input
                v-model="briefEn"
                type="textarea"
                :autosize="{minRows: 2, maxRows: 4}"
                placeholder="Selling point"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="Product Details" prop="contentEn">
            <tiny-mce v-model="contentEn" ref="content" style="width:95%"></tiny-mce>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-form-item>
        <div class="default-btn primary-btn" @click="dataFormSubmit()">{{$t("crud.filter.submitBtn")}}</div>
      </el-form-item>
    </el-form>
    <!-- 品牌选择弹窗-->
    <brand-select
      v-if="brandSelectVisible"
      ref="brandSelect"
      :isSingle="true"
      @refreshSelectBrand="selectBrand"
    ></brand-select>
  </div>
</template>

<script>
import VideoUpload from '@/components/video-upload'
import ScoreSkuTag from './score-sku-tag'
import ScoreSkuTable from './score-sku-table'
import TinyMce from '@/components/tiny-mce'
import ImgUpload from '@/components/img-upload'
import ImgsUpload from '@/components/imgs-upload'
import BrandSelect from '@/components/brand-select'
import ProdTransport from './prod-transport'

export default {
  data () {
    return {
      brandSelectVisible: false,
      prodNameEn: '',
      prodNameCn: '',
      contentEn: '',
      contentCn: '',
      briefEn: '',
      briefCn: '',
      sameCityStatus: 0,
      // 规格列表
      dataForm: {
        prodName: '',
        brief: '',
        pic: '',
        imgs: '',
        video: '',
        categoryId: this.$route.query.categoryId ? parseInt(this.$route.query.categoryId) : null,
        shopCategoryId: null, // 店铺分类id
        prodId: 0,
        brandId: 0,
        prodScore: 0,
        scorePrice: 0,
        skuList: [],
        scoreProdType: 0,
        prodNameEn: '',
        prodNameCn: '',
        contentEn: '',
        contentCn: '',
        briefEn: '',
        briefCn: '',
        content: '',
        brandName: '',
        deliveryMode: {},
        isCheck: false,
        value: false,
        deliveryTemplateId: null,
        prodLangList: [],
        mold: 1
      },
      deliveryMode: {
        hasShopDelivery: true,
        hasUserPickUp: false,
        hasCityDelivery: false
      },
      brandName: '',
      isSubmit: false,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL
    }
  },
  watch: {
    'dataForm.imgs': {
      deep: true, // 深度监听设置为 true
      immediate: true,
      handler (newV, oldV) {
        if (newV.split(',').length > 9) {
          this.dataForm.imgs = oldV
          this.errorMsg(this.$i18n.t('product.downloadTemplateTips3'))
        }
      }
    }
  },
  components: {
    // MulPicUpload,
    BrandSelect,
    ImgUpload,
    ImgsUpload,
    VideoUpload,
    TinyMce,
    ScoreSkuTag,
    ScoreSkuTable,
    ProdTransport
  },
  computed: {
    defalutSku () {
      return this.$store.state.prod.defalutSku
    }
  },
  mounted () {
    // console.log(2222222)
    this.dataForm.prodId = this.$route.query.prodId
    // this.getCategoryList()
    // this.getCategoryTree()
    this.getDataList()
  },
  methods: {
    // 获取分类数据
    getDataList () {
      this.isSubmit = false
      if (this.dataForm.prodId) {
        // 获取产品数据
        this.$http({
          url: this.$http.adornUrl(`/shop/scoreProduct/info/${this.dataForm.prodId}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.dataForm = data
          this.dataForm.prodLangList.forEach(prodLang => {
            if (prodLang.lang === 0) {
              this.prodNameCn = prodLang.prodName
              this.briefCn = prodLang.brief
              this.contentCn = prodLang.content
            }
            if (prodLang.lang === 1) {
              this.prodNameEn = prodLang.prodName
              this.briefEn = prodLang.brief
              this.contentEn = prodLang.content
            }
          })
          this.dataForm.deliveryMode = JSON.parse(data.deliveryMode)
          this.dataForm.deliveryMode.hasShopDelivery = true
          // this.category.selected = idList(this.category.list, this.dataForm.categoryId, 'categoryId', 'children').reverse()
          if (data.brand) {
            this.dataForm.brandId = data.brand.brandId
            this.dataForm.brandName = data.brand.brandName
            this.brandName = data.brandName
          }
          this.$refs.skuTag.init(data.skuList)
          this.dataForm.skuList.forEach(sku => {
            sku.oriStock = sku.stocks
            sku.skuLangList.forEach(skulang => {
              if (skulang.lang === 0) {
                sku.prodNameCn = skulang.prodName
              } else {
                sku.prodNameEn = skulang.prodName
              }
            })
          })
          this.$refs.skuTable.init()
          this.dataForm.skuList.forEach(item => {
            item.changeStock = item.stocks
          })
        })
      } else {
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.$refs.skuTag.init()
          this.dataForm.pic = ''
          this.dataForm.imgs = ''
          this.dataForm.video = ''
        })
      }
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (!this.dataForm.imgs) {
          this.errorMsg(this.$i18n.t('product.choosePicUpload'))
          return
        }
        if (!this.dataForm.skuList.find(el => el.status)) {
        // 至少要启用一种商品规格
          this.$message({
            message: this.$i18n.t('product.enableSpec'),
            type: 'error',
            duration: 500
          })
          return
        }
        // 检验是否有选择品牌
        // if (!this.dataForm.brandName) {
        //   this.errorMsg('请选择一个所属品牌')
        //   return
        // }
        // 校验sku列表
        this.checkSkuList()
        if (this.isCheck) {
          this.errorMsg(this.value)
          return
        }
        if (!this.prodNameCn) {
          this.errorMsg(this.$i18n.t('product.pleComAndEnName'))
          return
        }
        if (!this.prodNameEn) {
          this.prodNameEn = this.prodNameCn
        }
        if (/^\s+$/g.test(this.prodNameEn)) {
          this.prodNameEn = this.prodNameCn
        }
        if (/^\s+$/g.test(this.briefEn) || /^\s+$/g.test(this.briefCn)) {
          this.errorMsg(this.$i18n.t('shopProcess.inputAllSpace'))
          return
        }
        if (!this.dataForm.deliveryTemplateId) {
          this.errorMsg(this.$i18n.t('product.pleShgTlate'))
          return
        }
        this.dataForm.prodNameCn = this.prodNameCn
        this.dataForm.briefCn = this.briefCn
        this.dataForm.contentCn = this.contentCn
        this.dataForm.prodNameEn = this.prodNameEn
        this.dataForm.briefEn = this.briefEn
        this.dataForm.contentEn = this.contentEn
        this.dataForm.prodName = this.dataForm.prodNameCn
        let param = Object.assign({}, this.dataForm)
        // 设置价格和库存
        this.paramSetPriceAndStocks(param)
        param.deliveryMode = undefined
        param.deliveryModeVo = this.deliveryMode
        this.dataForm.skuList.forEach(item => {
          item.changeStock = item.stocks - item.oriStock
        })
        // 商品主图
        let newImgs = this.dataForm.imgs.split(',')
        for(let idx in newImgs){
          newImgs[idx] = newImgs[idx].split('?')[0]
        }
        this.dataForm.imgs = newImgs.join(',')
        param.pic = this.dataForm.imgs.split(',')[1]
        param.imgs = this.dataForm.imgs

        if (this.isSubmit) {
          return false
        }
        this.isSubmit = true
        this.$http({
          url: this.$http.adornUrl(`/shop/scoreProduct`),
          method: param.prodId ? 'put' : 'post',
          data: this.$http.adornData(param)
        }).then(({ data }) => {
          this.$message({
            message: this.$i18n.t('remindPop.success'),
            type: 'success',
            duration: 800,
            onClose: () => {
              this.visible = false
              this.$store.commit('common/removeMainActiveTab')
              this.$router.push({ name: 'prod-scoreProdList' })
              this.$emit('refreshDataList')
            }
          })
        }).catch((e) => {
          this.isSubmit = false
        })
      })
    },
    /**
     * 品牌删除按钮
     */
    handleClose () {
      this.dataForm.brandId = null
      this.brandName = ''
      this.dataForm.brandName = this.brandName
    },
    /**
     * 显示添加指定品牌弹框
     */
    brandSelectHandle () {
      this.brandSelectVisible = true
      this.$nextTick(() => {
        this.$refs.brandSelect.init()
      })
    },
    /**
     * 添加指定品牌
     */
    selectBrand (brands) {
      if (brands) {
        this.brandName = brands[0].brandName
        this.dataForm.brandId = brands[0].brandId
        this.dataForm.brandName = this.brandName
        // this.$set(this.dataForm, 'brandId', this.dataForm.brandId)
        // this.$set(this.dataForm, 'brandName', this.dataForm.brandName)
      }
    },
    /**
     * 删除视频
     */
    deleteVideo () {
      this.dataForm.video = null
    },

    checkSkuList () {
      // console.log('skuList', this.dataForm.skuList)
      this.dataForm.skuList.forEach(item => {
        this.isCheck = false
        // if (!item.pic) {
        //   this.isCheck = true
        //   this.value = '请上传sku图片'
        //   return false
        // }
        if (!item.price && item.price !== 0) {
          this.isCheck = true
          this.value = this.$i18n.t('product.emptyPrice')
          return false
        }
        if (!item.oriPrice && item.oriPrice !== 0) {
          this.isCheck = true
          this.value = this.$i18n.t('product.emptyMarketValue')
          return false
        }
        if (!item.skuScore) {
          this.isCheck = true
          this.value = this.$i18n.t('product.emptyScorePrice')
          return false
        }
        if (item.stocks === null || item.stocks === undefined) {
          this.isCheck = true
          this.value = this.$i18n.t('product.emptyStocks')
          return false
        }
      })
    },
    paramSetPriceAndStocks (param) {
      // 获取规格属性信息
      // param.skuList = this.$refs.prodSpec.getTableSpecData()
      // 商品库存
      param.totalStocks = 0
      // 商品价格
      param.price = param.skuList[0].price
      // 商品原价
      param.oriPrice = 0
      // 商品积分价格
      param.scorePrice = param.skuList[0].skuScore
      // 商品实际库存
      for (let i = 0; i < param.skuList.length; i++) {
        const element = param.skuList[i]
        console.log('element.status', element.status)
        if (element.status !== 1) {
          console.log('end', param.totalStocks, element.stocks)
          continue
        }
        if (i === 0) {
          param.price = element.price ? Number.parseFloat(element.price) : 0
          param.scorePrice = element.skuScore ? Number.parseFloat(element.skuScore) : 0
          param.oriPrice = element.oriPrice ? Number.parseFloat(element.oriPrice) : 0
        }
        // 商品价格为最低价的那件商品的价格
        param.price = Math.min(param.price, element.price)
        if (param.price === element.price) {
          param.price = element.price
        }
        // 设置最低市场价
        param.oriPrice = Math.min(param.oriPrice, element.oriPrice)
        if (param.oriPrice === element.oriPrice) {
          param.oriPrice = element.oriPrice
        }
        // 设置最低积分价格
        param.scorePrice = Math.min(param.scorePrice, element.skuScore)
        if (param.scorePrice === element.skuScore) {
          param.scorePrice = element.skuScore
        }

        console.log(element.skuScore)
        console.log(param.scorePrice)
        param.totalStocks += element.stocks ? Number.parseInt(element.stocks) : 0
      }
      // 如果sku没有商品名称，则使用商品的商品名称
      if (param.skuList.length === 1 && !param.skuList[0].skuName) {
        param.skuList[0].prodNameCn = this.dataForm.prodNameCn
        param.skuList[0].prodNameEn = this.dataForm.prodNameEn
      }
    },
    skuTagChangeSkuHandler (skuList) {
      const prodNameCn = this.prodNameCn
      const prodNameEn = this.prodNameEn
      skuList.forEach(sku => {
        if (sku.properties) {
          sku.skuName = ''
          let properties = sku.properties.split(';')
          for (const propertiesKey in properties) {
            sku.skuName += properties[propertiesKey].split(':')[1] + ' '
          }
          sku.prodNameCn = prodNameCn + ' ' + sku.skuName
          sku.prodNameEn = prodNameEn + ' ' + sku.skuName
        }
      })
      this.dataForm.skuList = skuList
    },
    errorMsg (message) {
      this.$message({
        message: message,
        type: 'error',
        duration: 1500
      })
    }
  }
}
</script>
<style>
 .el-upload--picture-card{
    background: #ffffff;
  }
  .productImg-label .el-form-item__label:before{
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }
  .productImg-label .el-upload--picture-card i {
    position: absolute;
    top: 39%;
    left: 37%;
  }
</style>