| | |
| | | <FormItem label="商品价格" prop="price"> |
| | | <Input v-model="baseInfoForm.price" clearable placeholder="商品价格" style="width: 260px" type="text"/> |
| | | </FormItem> |
| | | |
| | | <FormItem label="抽成比例" prop="commission"> |
| | | <!-- <Input v-model="baseInfoForm.commission" max="100" min="0" clearable placeholder="抽成比例" style="width: 260px" type="number"/>--> |
| | | <InputNumber v-model="baseInfoForm.commission" :formatter="value => `${value}%`" |
| | | :parser="value => value.replace('%', '')" :max="100" :min="0" clearable |
| | | :active-change="false" |
| | | placeholder="抽成比例" style="width: 260px" type="number"/> |
| | | </FormItem> |
| | | |
| | | <FormItem label="商品卖点" prop="sellingPoint"> |
| | | <Input v-model="baseInfoForm.sellingPoint" :rows="4" style="width: 260px" type="textarea"/> |
| | | </FormItem> |
| | | <FormItem label="商品品牌" prop="brandId"> |
| | | <Select v-model="baseInfoForm.brandId" filterable style="width: 200px"> |
| | | <Option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></Option> |
| | | </Select> |
| | | <Button class="refresh-icon" icon="md-refresh" shape="circle" type="text" |
| | | @click="refresh('brand')"></Button> |
| | | </FormItem> |
| | | <!-- <FormItem label="商品品牌" prop="brandId">--> |
| | | <!-- <Select v-model="baseInfoForm.brandId" filterable style="width: 200px">--> |
| | | <!-- <Option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></Option>--> |
| | | <!-- </Select>--> |
| | | <!-- <Button class="refresh-icon" icon="md-refresh" shape="circle" type="text"--> |
| | | <!-- @click="refresh('brand')"></Button>--> |
| | | <!-- </FormItem>--> |
| | | </div> |
| | | <h4>商品交易信息</h4> |
| | | <div class="form-item-view"> |
| | |
| | | <RadioGroup v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'" v-model="baseInfoForm.salesModel" |
| | | button-style="solid" type="button" @on-change="renderTableData(skuTableData)"> |
| | | <Radio label="RETAIL" title="零售型">零售型</Radio> |
| | | <Radio label="WHOLESALE" title="批发型">批发型</Radio> |
| | | <!-- <Radio label="WHOLESALE" title="批发型">批发型</Radio>--> |
| | | <Radio label="PRESALE" title="预售">预售</Radio> |
| | | </RadioGroup> |
| | | <RadioGroup v-else v-model="baseInfoForm.salesModel" button-style="solid" type="button"> |
| | | <Radio label="RETAIL" title="零售型"> |
| | | <span>虚拟型</span> |
| | | </Radio> |
| | | </RadioGroup> |
| | | </FormItem> |
| | | <FormItem v-if="baseInfoForm.salesModel == 'PRESALE'"> |
| | | <div> |
| | | 预售时间: |
| | | <DatePicker type="daterange" v-model="baseInfoForm.preSaleTime" |
| | | format="yyyy-MM-dd" placement="bottom-end" placeholder="请选择预售时间" style="width: 200px" |
| | | @on-change="choosePreTime"></DatePicker> |
| | | </div> |
| | | </FormItem> |
| | | <FormItem v-if="baseInfoForm.salesModel == 'WHOLESALE'" class="form-item-view-el" label="销售规则" |
| | | prop="wholesaleRule"> |
| | |
| | | </div> |
| | | <h4>商品规格及图片</h4> |
| | | <div class="form-item-view"> |
| | | <FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles" v-if=" baseInfoForm.goodsVideo ==null || baseInfoForm.goodsVideo ===''"> |
| | | <FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles" > |
| | | <div style="display: flex; flex-wrap: wrap;"> |
| | | <vuedraggable :animation="200" :list="showListImages"> |
| | | <div v-for="(item, __index) in showListImages" :key="__index" |
| | |
| | | <!-- </div>--> |
| | | <div style="color: grey" v-if="!baseInfoForm.goodsVideo">主图仅支持png,jpg,jpeg格式,宽高至少600*600px,大小2M内</div> |
| | | </FormItem> |
| | | <FormItem class="form-item-view-el" label="视频" prop="goodsVideo" v-if="!(baseInfoForm.goodsGalleryFiles !=null &&baseInfoForm.goodsGalleryFiles.length>0)"> |
| | | <FormItem class="form-item-view-el" label="视频" prop="goodsVideo" > |
| | | <div class="goods-video"> |
| | | <div v-if="baseInfoForm.goodsVideo"> |
| | | <div> |
| | | <video :src="baseInfoForm.showGoodsVideo" class="video" controls style="max-width: 300px;"/> |
| | | <video :src="baseInfoForm.showGoodsVideo" class="video" controls style="max-width: 300px;max-height: 400px"/> |
| | | </div> |
| | | </div> |
| | | <Upload ref="upload" action="-" :format="['avi', 'wmv', 'mpeg', 'mp4', 'mov']" |
| | |
| | | </div> |
| | | <FormItem class="form-item-view-el" label="PC商品描述" prop="intro" style="width: 100%"> |
| | | <editor |
| | | :show-upload="true" |
| | | ref="editor" |
| | | v-model="baseInfoForm.intro" |
| | | height="800px" |
| | |
| | | |
| | | <FormItem class="form-item-view-el" label="移动端描述" prop="skuList" style="width: 100%"> |
| | | <editor |
| | | :show-upload="true" |
| | | ref="introEditor" |
| | | v-model="baseInfoForm.mobileIntro" |
| | | height="800px" |
| | |
| | | <!--</Modal>--> |
| | | <!-- todo web--> |
| | | <Modal v-model="picModelFlag" width="1200px"> |
| | | <!-- <ossManage ref="ossManage" :isComponent="true" :initialize="picModelFlag" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>--> |
| | | <!-- <ossManage ref="ossManRage" :isComponent="true" :initialize="picModelFlag" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>--> |
| | | <div class="demo-upload-list" v-for="(item,index) in showListImages"> |
| | | <template> |
| | | <img :src="item"> |
| | |
| | | import COS from 'cos-js-sdk-v5'; |
| | | import {getFileKey} from "@/utils/file.js"; |
| | | import {getFilePreview, getSts} from "@/api/file"; |
| | | import {formatDate} from "@/utils/filters"; |
| | | |
| | | |
| | | export default { |
| | |
| | | categoryName: [], |
| | | goodsVideo: "", |
| | | showGoodsVideo: "", |
| | | // 预售时间 |
| | | preSaleTime:[], |
| | | preSaleBeginDate:'', |
| | | preSaleEndDate:'', |
| | | commission:5 |
| | | }, |
| | | /** 表格头 */ |
| | | skuTableColumn: [], |
| | |
| | | if (val) { |
| | | this.initVideo(); |
| | | } |
| | | }, |
| | | showListImages(newValue){ |
| | | this.baseInfoForm.goodsGalleryFiles = newValue.map(item => { |
| | | return item.split('/').slice(-2).join('/') |
| | | }) |
| | | } |
| | | }, |
| | | methods: { |
| | | // 格式化显示值 |
| | | formatter(date) { |
| | | return this.formatDate(date, 'yyyy-MM-dd'); |
| | | }, |
| | | |
| | | // 日期格式化工具 |
| | | formatDate(date, format) { |
| | | const year = date.getFullYear(); |
| | | const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
| | | const day = date.getDate().toString().padStart(2, '0'); |
| | | |
| | | return format |
| | | .replace('yyyy', year) |
| | | .replace('MM', month) |
| | | .replace('dd', day); |
| | | }, |
| | | choosePreTime(e){ |
| | | if (this.baseInfoForm.preSaleTime){ |
| | | const[begin,end] = this.baseInfoForm.preSaleTime; |
| | | this.baseInfoForm.preSaleBeginDate = this.formatDate(begin,'yyyy-MM-dd'); |
| | | this.baseInfoForm.preSaleEndDate = this.formatDate(end,'yyyy-MM-dd'); |
| | | console.log('------------------>选择时间',this.baseInfoForm.preSaleBeginDate,this.baseInfoForm.preSaleEndDate) |
| | | |
| | | } |
| | | console.log('时间选择------------------》',e) |
| | | }, |
| | | // 选择图片modal |
| | | handleCLickImg(val, index) { |
| | | console.log('测试输入的值----------------》', val) |
| | |
| | | }, |
| | | // ship大小不正确 |
| | | handleVideoMaxSize(file) { |
| | | this.$Notice.warning({ |
| | | title: "超过文件大小限制", |
| | | desc: "视频大小不能超过10MB", |
| | | }); |
| | | // this.$Notice.warning({ |
| | | // title: "超过文件大小限制", |
| | | // desc: "视频大小不能超过10MB", |
| | | // }); |
| | | }, |
| | | onAddSku(index) { |
| | | if (!this.newSkuValues[index]) { |
| | |
| | | response.result.recommend |
| | | ? (response.result.recommend = 1) |
| | | : (response.result.recommend = 0); |
| | | response.result.preSaleTime = [response.result.preSaleBeginDate, response.result.preSaleEndDate]; |
| | | this.baseInfoForm = {...this.baseInfoForm, ...response.result}; |
| | | this.baseInfoForm.release = 1; //即使是被放入仓库,修改的时候也会显示会立即发布 |
| | | this.categoryId = response.result.categoryPath.split(",")[2]; |
| | |
| | | this.renderGoodsDetailSku(response.result.skuList); |
| | | |
| | | /** 查询品牌列表 */ |
| | | this.getGoodsBrandList(); |
| | | //todo 移除品牌概念 |
| | | // this.getGoodsBrandList(); |
| | | |
| | | /** 查询店铺商品分类 */ |
| | | this.GET_ShopGoodsLabel(); |
| | |
| | | this.firstData.goodsType && |
| | | (this.baseInfoForm.goodsType = this.firstData.goodsType); |
| | | /** 查询商品参数 */ |
| | | this.GET_GoodsParams(); |
| | | // this.GET_GoodsParams(); |
| | | }, |
| | | // 渲染sku数据 |
| | | renderGoodsDetailSku(skuList) { |
| | |
| | | * 渲染table所需要的column 和 data |
| | | */ |
| | | renderTableData(skus) { |
| | | console.log('-------------->销售类型',skus) |
| | | this.skuTableColumn = []; |
| | | let pushData = []; |
| | | // 渲染头部 |
| | |
| | | } |
| | | ); |
| | | } |
| | | |
| | | // 预售模式 |
| | | if (this.baseInfoForm.salesModel !== "PRESALE") { |
| | | pushData.push( |
| | | { |
| | | title: "预售时间", |
| | | slot: "price", |
| | | } |
| | | ); |
| | | } |
| | | if (this.baseInfoForm.salesModel === "WHOLESALE" && this.wholesaleData) { |
| | | this.wholesaleData.forEach((item, index) => { |
| | | pushData.push({ |
| | |
| | | this.baseInfoForm.goodsId = this.goodsId; |
| | | let submit = JSON.parse(JSON.stringify(this.baseInfoForm)); |
| | | console.log('----------------->提交',submit); |
| | | // if ( |
| | | // (submit.goodsGalleryFiles && |
| | | // submit.goodsGalleryFiles.length <= 0) && !submit.goodsVideo |
| | | // ) { |
| | | // this.submitLoading = false; |
| | | // this.$Message.error("请上传商品图片或者视频"); |
| | | // return; |
| | | // } |
| | | if ( |
| | | submit.goodsGalleryFiles && |
| | | submit.goodsGalleryFiles.length <= 0 |
| | | ) { |
| | | this.submitLoading = false; |
| | | this.$Message.error("请上传商品图片"); |
| | | return; |
| | | } |
| | | if (!submit.goodsVideo){ |
| | | this.submitLoading = false; |
| | | this.$Message.error("请上传商品视频"); |
| | | return; |
| | | } |
| | | if (submit.templateId === "") submit.templateId = 0; |
| | | let flag = false; |
| | | let paramValue = ""; |
| | |
| | | this.baseInfoForm.goodsType = this.firstData.goodsType; |
| | | |
| | | |
| | | /** 获取该商城分类下 商品参数信息 */ |
| | | this.GET_GoodsParams(); |
| | | /** 查询品牌列表 */ |
| | | this.getGoodsBrandList(); |
| | | /** 查询分类绑定的规格信息 */ |
| | | this.Get_SkuInfoByCategory(this.categoryId); |
| | | |
| | | |
| | | if (this.categoryId!=null && this.categoryId!=='') { |
| | | /** 获取该商城分类下 商品参数信息 */ |
| | | this.GET_GoodsParams(); |
| | | console.log('分类id------------------>',this.categoryId); |
| | | /** 查询分类绑定的规格信息 */ |
| | | this.Get_SkuInfoByCategory(this.categoryId); |
| | | /** 查询品牌列表 */ |
| | | this.getGoodsBrandList(); |
| | | } |
| | | // 获取商品单位 |
| | | this.GET_GoodsUnit(); |
| | | // 获取当前店铺分类 |