| | |
| | | </div> |
| | | <h4>商品规格及图片</h4> |
| | | <div class="form-item-view"> |
| | | <FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles"> |
| | | <FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles" v-if=" baseInfoForm.goodsVideo ==null || baseInfoForm.goodsVideo ===''"> |
| | | <div style="display: flex; flex-wrap: wrap;"> |
| | | <vuedraggable :animation="200" :list="baseInfoForm.goodsGalleryFiles"> |
| | | <div v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index" |
| | | <vuedraggable :animation="200" :list="showListImages"> |
| | | <div v-for="(item, __index) in showListImages" :key="__index" |
| | | class="demo-upload-list"> |
| | | <template> |
| | | <img :src="item"/> |
| | |
| | | </div> |
| | | </vuedraggable> |
| | | <!--<Upload ref="upload"--> |
| | | <!--:action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"--> |
| | | <!--:format="['jpg', 'jpeg', 'png', 'webp']"--> |
| | | <!--:headers="{ ...accessToken }"--> |
| | | <!--:max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"--> |
| | | <!--:on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"--> |
| | | <!--:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple--> |
| | | <!--style="margin-left: 10px"--> |
| | | <!--type="drag">--> |
| | | <!--<div style="width: 148px; height: 148px; line-height: 148px">--> |
| | | <!--<Icon size="20" type="md-add"></Icon>--> |
| | | <!--</div>--> |
| | | <!--:action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"--> |
| | | <!--:format="['jpg', 'jpeg', 'png', 'webp']"--> |
| | | <!--:headers="{ ...accessToken }"--> |
| | | <!--:max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"--> |
| | | <!--:on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"--> |
| | | <!--:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple--> |
| | | <!--style="margin-left: 10px"--> |
| | | <!--type="drag">--> |
| | | <!--<div style="width: 148px; height: 148px; line-height: 148px">--> |
| | | <!--<Icon size="20" type="md-add"></Icon>--> |
| | | <!--</div>--> |
| | | <!--</Upload>--> |
| | | </div> |
| | | <div style="width: 100%;display: flex;justify-content: start;margin-top: 10px;"> |
| | |
| | | </Modal> |
| | | </FormItem> |
| | | <FormItem> |
| | | <div style="color: grey">主图仅支持png,jpg,jpeg格式,宽高至少600*600px,大小2M内,可拖拽调整主图顺序</div> |
| | | |
| | | <!-- <div class="demo-upload-list" v-for="(item,index) in showListImages">--> |
| | | <!-- <template style="display: flex">--> |
| | | <!-- <img :src="item">--> |
| | | <!-- <div class="demo-upload-list-cover">--> |
| | | <!-- <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>--> |
| | | <!-- <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | <!-- </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"> |
| | | <FormItem class="form-item-view-el" label="视频" prop="goodsVideo" v-if="!(baseInfoForm.goodsGalleryFiles !=null &&baseInfoForm.goodsGalleryFiles.length>0)"> |
| | | <div class="goods-video"> |
| | | <div v-if="baseInfoForm.goodsVideo"> |
| | | <div> |
| | | <video :src="baseInfoForm.goodsVideo" class="video" controls style="max-width: 300px;"/> |
| | | <video :src="baseInfoForm.showGoodsVideo" class="video" controls style="max-width: 300px;"/> |
| | | </div> |
| | | </div> |
| | | <Upload ref="upload" :action="uploadFileUrl" :format="['avi', 'wmv', 'mpeg', 'mp4', 'mov']" |
| | | <Upload ref="upload" action="-" :format="['avi', 'wmv', 'mpeg', 'mp4', 'mov']" |
| | | :headers="{ ...accessToken }" |
| | | :max-size="10240" :on-error="() => { loadingVideo = false }" |
| | | :on-exceeded-size="handleVideoMaxSize" |
| | | :on-format-error="handleFormatError" :on-progress="() => { loadingVideo = true }" |
| | | :on-success="handleSuccessGoodsVideo" :show-upload-list="false" |
| | | multiple |
| | | :before-upload="upLoadVideo" |
| | | accept="video/*" |
| | | style="margin-left: 10px" type="drag"> |
| | | <Button :loading="loadingVideo" icon="ios-cloud-upload-outline" type="text"> |
| | | <span v-if="!loadingVideo"> |
| | |
| | | </span> |
| | | </Button> |
| | | </Upload> |
| | | <Button :loading="loadingVideo" v-if="baseInfoForm.goodsVideo" icon="delete" @click="removeVideo" type="text"> |
| | | <span>删除视频</span> |
| | | </Button> |
| | | </div> |
| | | </FormItem> |
| | | <div class="layout" style="width: 100%"> |
| | |
| | | <div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content"> |
| | | <Card :bordered="true" class="ivu-card-body"> |
| | | <a slot="extra" style="margin-left: 6px"> |
| | | <Icon size="20" type="md-trash" @click="handleCloseSkuItem($index, item)"></Icon> |
| | | <Icon size="20" type="md-trash" @click="handleCloseSkuItem($index, item)"></Icon> |
| | | </a> |
| | | <div> |
| | | <div style="display: flex;margin-bottom: 10px;font-weight: bold">规格项</div> |
| | |
| | | <div> |
| | | <AutoComplete v-model="item.name" :filter-method="filterMethod" |
| | | :maxlength="30" placeholder="请输入规格项名称" style="width: 150px" |
| | | @on-focus="changeSkuItem(item.name)" @on-change="editSkuItem(item.name, $index, item)"> |
| | | @on-focus="changeSkuItem(item.name)" |
| | | @on-change="editSkuItem(item.name, $index, item)"> |
| | | </AutoComplete> |
| | | |
| | | <iSwitch v-if="$index === 0" style="margin-left: 10px" size="small" @on-change="changeSkuOpenImage" v-model="openImage" /><span v-if="$index === 0" style="margin-left: 5px">添加规格图片</span> |
| | | <!-- <iSwitch v-if="$index === 0" style="margin-left: 10px" size="small"--> |
| | | <!-- @on-change="changeSkuOpenImage" v-model="openImage"/>--> |
| | | <!-- <span v-if="$index === 0" style="margin-left: 5px">添加规格图片</span>--> |
| | | </div> |
| | | </FormItem> |
| | | |
| | |
| | | @on-change="skuValueChange(val, index, item)"> |
| | | </AutoComplete> |
| | | <a style="margin-left: 6px" v-if="val.value && val.value !== ''"> |
| | | <Icon size="15" type="md-trash" @click="handleCloseSkuValue(val, index, item)"></Icon> |
| | | <Icon size="15" type="md-trash" |
| | | @click="handleCloseSkuValue(val, index, item)"></Icon> |
| | | </a> |
| | | </div> |
| | | <div v-if="$index === 0 && openImage" style="margin-top: 10px"> |
| | |
| | | style="width: 180px;height: 140px" |
| | | /> |
| | | <div class="sku-upload-list-cover"> |
| | | <div style="margin-top: 50px" > |
| | | <div style="margin-top: 50px"> |
| | | <Icon size="25" type="md-search" @click="handleView(img)"></Icon> |
| | | <Icon size="25" type="md-trash" @click="handleRemove(val.images, __index)"></Icon> |
| | | <Icon size="25" type="md-trash" |
| | | @click="handleRemove(val.images, __index)"></Icon> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </div> |
| | | </vuedraggable> |
| | | <Upload ref="uploadSku" :action="uploadFileUrl" |
| | | <!-- todo 3--> |
| | | <Upload ref="uploadSku" action="-" |
| | | v-if="val.images < 1" |
| | | :before-upload="handleBeforeUpload" |
| | | :format="['jpg', 'jpeg', 'png', 'webp']" |
| | | :headers="{ ...accessToken }" |
| | | :max-size="2048" |
| | | :on-error="() => { $Spin.hide(); }" |
| | | :on-exceeded-size="handleMaxSize" |
| | |
| | | </div> |
| | | </FormItem> |
| | | |
| | | <FormItem v-if="item.spec_values.length < 10 && item.spec_values.length >= 1 && item.spec_values[0].value !== ''" class="sku-item-content-val flex" label="" style="line-height: 32px;"> |
| | | <FormItem |
| | | v-if="item.spec_values.length < 10 && item.spec_values.length >= 1 && item.spec_values[0].value !== ''" |
| | | class="sku-item-content-val flex" label="" style="line-height: 32px;"> |
| | | <AutoComplete ref="input" v-model="newSkuValues[$index]" |
| | | :filter-method="filterMethod" |
| | | :maxlength="30" placeholder="自定义规格值" style="width: 180px" |
| | |
| | | <!--<Modal width="1200px" v-model="picModelFlag">--> |
| | | <!--<ossManage @callback="callbackSelected" ref="ossManage" />--> |
| | | <!--</Modal>--> |
| | | <Modal v-model="picModelFlag" width="1200px" @on-ok="confirmUrls"> |
| | | <ossManage ref="ossManage" :isComponent="true" :initialize="picModelFlag" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/> |
| | | <!-- todo web--> |
| | | <Modal v-model="picModelFlag" width="1200px"> |
| | | <!-- <ossManage ref="ossManage" :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"> |
| | | <div class="demo-upload-list-cover"> |
| | | <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon> |
| | | <Icon type="ios-trash-outline" @click.native="handleRemove(null,index)"></Icon> |
| | | </div> |
| | | </template> |
| | | </div> |
| | | <div class="demo-upload-list"> |
| | | <Upload |
| | | :before-upload="upLoadImg" |
| | | accept="image/*" |
| | | action="-" |
| | | type="drag" |
| | | style=" display: inline-block;width: 58px" |
| | | > |
| | | <div style="width: 58px;height:58px;line-height: 58px;"> |
| | | <Icon type="ios-camera" size="20"></Icon> |
| | | </div> |
| | | </Upload> |
| | | </div> |
| | | |
| | | </Modal> |
| | | |
| | | </div> |
| | |
| | | import DPlayer from 'dplayer'; |
| | | // import ossManage from "@/views/sys/oss-manage/ossManage"; |
| | | import ossManage from "@/views/shop/ossManages"; |
| | | import COS from 'cos-js-sdk-v5'; |
| | | import {getFileKey} from "@/utils/file.js"; |
| | | import {getFilePreview, getSts} from "@/api/file"; |
| | | |
| | | |
| | | export default { |
| | |
| | | }, 1000); |
| | | }; |
| | | return { |
| | | showListImages: [], |
| | | regular, |
| | | openImage: false, |
| | | needToloadSku: false, |
| | |
| | | /** 商品分类中文名 */ |
| | | categoryName: [], |
| | | goodsVideo: "", |
| | | showGoodsVideo: "", |
| | | }, |
| | | /** 表格头 */ |
| | | skuTableColumn: [], |
| | |
| | | methods: { |
| | | // 选择图片modal |
| | | handleCLickImg(val, index) { |
| | | this.$refs.ossManage.selectImage = true; |
| | | console.log('测试输入的值----------------》', val) |
| | | // 废弃原有的图片上传 |
| | | // this.$refs.ossManage.selectImage = true; |
| | | this.picModelFlag = true; |
| | | this.selectedFormBtnName = val; |
| | | // this.picIndex = index; |
| | |
| | | }, |
| | | // 移除已选图片 |
| | | handleRemove(item, index) { |
| | | item.splice(index, 1) |
| | | if (!item) { |
| | | this.listImages.splice(index, 1); |
| | | this.showListImages.splice(index, 1); |
| | | this.baseInfoForm.goodsGalleryFiles.splice(index, 1); |
| | | this.baseInfoForm.goodsGalleryList.splice(index, 1); |
| | | } else { |
| | | console.log('移除测试',item, index); |
| | | item.splice(index, 1) |
| | | } |
| | | this.previewPicture = ""; |
| | | }, |
| | | // 查看商品大图 |
| | |
| | | } |
| | | }, |
| | | // sku图片上传前钩子 |
| | | handleBeforeUpload(file) { |
| | | async handleBeforeUpload(file) { |
| | | const check = |
| | | this.selectedSku.images !== undefined && |
| | | this.selectedSku.images.length > 5; |
| | | if (check) { |
| | | this.$Notice.warning({title: "图片数量不能大于五张"}); |
| | | return false; |
| | | } |
| | | try { |
| | | // this.upLoadVideoLoading = true; |
| | | // 获取文件上传临时密钥 |
| | | const sts = await getSts(); |
| | | const cos = new COS({ |
| | | getAuthorization: async function (options, callback) { |
| | | callback({ |
| | | TmpSecretId: sts.data.tmpSecretId, |
| | | TmpSecretKey: sts.data.tmpSecretKey, |
| | | SecurityToken: sts.data.sessionToken, |
| | | // 建议返回服务器时间作为签名的开始时间,避免客户端本地时间偏差过大导致签名错误 |
| | | StartTime: sts.data.stsStartTime, // 时间戳,单位秒,如:1580000000 |
| | | ExpiredTime: sts.data.stsEndTime,// 时间戳,单位秒,如:1580000000 |
| | | ScopeLimit: true, // 细粒度控制权限需要设为 true,会限制密钥只在相同请求时重复使用 |
| | | }); |
| | | } |
| | | }) |
| | | const fileKey = getFileKey(file.name) |
| | | const upData = await cos.uploadFile({ |
| | | Bucket: sts.data.bucket, |
| | | Region: sts.data.region, |
| | | Key: fileKey, |
| | | Body: file, // 要上传的文件对象。 |
| | | SliceSize: 1024 * 1024 * 5, |
| | | onProgress: function (progressData) { |
| | | console.log('上传进度:', progressData); |
| | | }, |
| | | }); |
| | | console.log("上传成功", upData) |
| | | this.$nextTick(() => { |
| | | this.listImages.push(fileKey); |
| | | this.showListImages.push(sts.data.endpoint + "/" + fileKey); |
| | | this.baseInfoForm.goodsGalleryFiles.push(fileKey); |
| | | }) |
| | | |
| | | } catch (e) { |
| | | console.log("上传失败", upData) |
| | | return false; |
| | | } finally { |
| | | // this.upLoadVideoLoading = false; |
| | | |
| | | } |
| | | return false; |
| | | |
| | | }, |
| | | |
| | | /** 查询商品品牌列表 */ |
| | |
| | | this.baseInfoForm.goodsGalleryFiles = |
| | | response.result.goodsGalleryList.map((i) => { |
| | | return i; |
| | | }); |
| | | }) |
| | | try { |
| | | const stsInfo = await getSts(); |
| | | const endpoint = stsInfo.data.endpoint; |
| | | this.showListImages = response.result.goodsGalleryList.map((i) => { |
| | | if (i!=null&&i.indexOf('http')===-1) |
| | | return endpoint+'/'+i; |
| | | else return i; |
| | | }) |
| | | if (response.result.goodsVideo){ |
| | | |
| | | } |
| | | } catch (e) { |
| | | console.log('组装路径出问题',e); |
| | | } |
| | | |
| | | } |
| | | if (response.result.goodsVideo){ |
| | | try { |
| | | const stsInfo = await getSts(); |
| | | const endpoint = stsInfo.data.endpoint; |
| | | this.baseInfoForm.goodsVideo = response.result.goodsVideo; |
| | | this.baseInfoForm.showGoodsVideo = endpoint + '/' + response.result.goodsVideo; |
| | | console.log('显示商品视频------------------->', this.baseInfoForm.showGoodsVideo); |
| | | } catch (e) { |
| | | console.log('组装视频地址出错了') |
| | | } |
| | | } |
| | | |
| | | if ( |
| | | response.result.wholesaleList && |
| | |
| | | }, |
| | | /** 添加商品 **/ |
| | | save() { |
| | | this.submitLoading = true; |
| | | this.$refs["baseInfoForm"].validate((valid) => { |
| | | if (valid) { |
| | | if (this.baseInfoForm.salesModel === "WHOLESALE") { |
| | | for (let i = 0; i < this.wholesaleData.length; i++) { |
| | | this.checkWholesaleNum(i); |
| | | this.checkWholesalePrice(i); |
| | | this.wholesaleData[i].goodsId = this.goodsId; |
| | | } |
| | | this.baseInfoForm.wholesaleList = this.wholesaleData; |
| | | } |
| | | this.baseInfoForm.goodsId = this.goodsId; |
| | | let submit = JSON.parse(JSON.stringify(this.baseInfoForm)); |
| | | if ( |
| | | submit.goodsGalleryFiles && |
| | | submit.goodsGalleryFiles.length <= 0 |
| | | ) { |
| | | this.submitLoading = false; |
| | | this.$Message.error("请上传商品图片"); |
| | | return; |
| | | } |
| | | if (submit.templateId === "") submit.templateId = 0; |
| | | let flag = false; |
| | | let paramValue = ""; |
| | | |
| | | if (flag) { |
| | | this.$Message.error(paramValue + " 参数值不能为空"); |
| | | this.submitLoading = false; |
| | | return; |
| | | } |
| | | |
| | | if (this.goodsUnitList && !this.goodsUnitList.find(i => i === this.baseInfoForm.goodsUnit)) { |
| | | submit.goodsUnit = "" |
| | | this.$Message.error("商品单位不存在"); |
| | | this.submitLoading = false; |
| | | return; |
| | | } |
| | | let skuInfoNames = this.skuInfo.map((n) => n.name); |
| | | submit.skuList = []; |
| | | let containEmptyImage = false; |
| | | this.skuTableData.map((sku) => { |
| | | let skuCopy = { |
| | | cost: 1, |
| | | price: sku.price, |
| | | quantity: sku.quantity, |
| | | // alertQuantity: sku.alertQuantity, |
| | | sn: sku.sn, |
| | | images: [], |
| | | }; |
| | | if (this.openImage) { |
| | | this.skuInfo[0].spec_values.forEach(item => { |
| | | if (!item.images || item.images.length === 0) { |
| | | containEmptyImage = true; |
| | | return; |
| | | } |
| | | if (item.value === sku[this.skuInfo[0].name]) { |
| | | skuCopy.images = item.images |
| | | } |
| | | }) |
| | | |
| | | } |
| | | if (sku.weight) { |
| | | skuCopy.weight = sku.weight; |
| | | } |
| | | if (this.baseInfoForm.weight) { |
| | | skuCopy.weight = this.baseInfoForm.weight; |
| | | } |
| | | if (sku.id) { |
| | | skuCopy.id = sku.id; |
| | | } |
| | | for (let skuInfoName of skuInfoNames) { |
| | | skuCopy[skuInfoName] = sku[skuInfoName]; |
| | | } |
| | | submit.skuList.push(skuCopy); |
| | | }); |
| | | if (containEmptyImage) { |
| | | this.$Message.error("开启规格图片,所有规格图片不能为空!"); |
| | | this.submitLoading = false; |
| | | return; |
| | | } |
| | | if (submit.goodsGalleryFiles.length > 0) { |
| | | submit.goodsGalleryList = submit.goodsGalleryFiles.map( |
| | | (i) => i |
| | | ); |
| | | } |
| | | /** 参数校验 **/ |
| | | /* Object.keys(submit.goodsParamsList).forEach((item) => { |
| | | });*/ |
| | | submit.release ? (submit.release = true) : (submit.release = false); |
| | | submit.recommend |
| | | ? (submit.recommend = true) |
| | | : (submit.recommend = false); |
| | | if (this.goodsId) { |
| | | API_GOODS.editGoods(this.goodsId, submit).then((res) => { |
| | | if (res.success) { |
| | | this.submitLoading = false; |
| | | this.$router.go(-1); |
| | | } else { |
| | | this.submitLoading = false; |
| | | try { |
| | | this.submitLoading = true; |
| | | this.$refs["baseInfoForm"].validate((valid) => { |
| | | if (valid) { |
| | | if (this.baseInfoForm.salesModel === "WHOLESALE") { |
| | | for (let i = 0; i < this.wholesaleData.length; i++) { |
| | | this.checkWholesaleNum(i); |
| | | this.checkWholesalePrice(i); |
| | | this.wholesaleData[i].goodsId = this.goodsId; |
| | | } |
| | | this.baseInfoForm.wholesaleList = this.wholesaleData; |
| | | } |
| | | 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.templateId === "") submit.templateId = 0; |
| | | let flag = false; |
| | | let paramValue = ""; |
| | | |
| | | if (flag) { |
| | | this.$Message.error(paramValue + " 参数值不能为空"); |
| | | this.submitLoading = false; |
| | | return; |
| | | } |
| | | |
| | | if (this.goodsUnitList && !this.goodsUnitList.find(i => i === this.baseInfoForm.goodsUnit)) { |
| | | submit.goodsUnit = "" |
| | | this.$Message.error("商品单位不存在"); |
| | | this.submitLoading = false; |
| | | return; |
| | | } |
| | | let skuInfoNames = this.skuInfo.map((n) => n.name); |
| | | submit.skuList = []; |
| | | let containEmptyImage = false; |
| | | this.skuTableData.map((sku) => { |
| | | let skuCopy = { |
| | | cost: 1, |
| | | price: sku.price, |
| | | quantity: sku.quantity, |
| | | // alertQuantity: sku.alertQuantity, |
| | | sn: sku.sn, |
| | | images: [], |
| | | }; |
| | | if (this.openImage) { |
| | | this.skuInfo[0].spec_values.forEach(item => { |
| | | if (!item.images || item.images.length === 0) { |
| | | containEmptyImage = true; |
| | | return; |
| | | } |
| | | if (item.value === sku[this.skuInfo[0].name]) { |
| | | skuCopy.images = item.images |
| | | } |
| | | }) |
| | | |
| | | } |
| | | if (sku.weight) { |
| | | skuCopy.weight = sku.weight; |
| | | } |
| | | if (this.baseInfoForm.weight) { |
| | | skuCopy.weight = this.baseInfoForm.weight; |
| | | } |
| | | if (sku.id) { |
| | | skuCopy.id = sku.id; |
| | | } |
| | | for (let skuInfoName of skuInfoNames) { |
| | | skuCopy[skuInfoName] = sku[skuInfoName]; |
| | | } |
| | | submit.skuList.push(skuCopy); |
| | | }); |
| | | if (containEmptyImage) { |
| | | this.$Message.error("开启规格图片,所有规格图片不能为空!"); |
| | | this.submitLoading = false; |
| | | return; |
| | | } |
| | | if (submit.goodsGalleryFiles.length > 0) { |
| | | submit.goodsGalleryList = submit.goodsGalleryFiles.map( |
| | | (i) => i |
| | | ); |
| | | } |
| | | /** 参数校验 **/ |
| | | /* Object.keys(submit.goodsParamsList).forEach((item) => { |
| | | });*/ |
| | | submit.release ? (submit.release = true) : (submit.release = false); |
| | | submit.recommend |
| | | ? (submit.recommend = true) |
| | | : (submit.recommend = false); |
| | | if (this.goodsId) { |
| | | API_GOODS.editGoods(this.goodsId, submit).then((res) => { |
| | | if (res.success) { |
| | | this.submitLoading = false; |
| | | this.$router.go(-1); |
| | | } else { |
| | | this.submitLoading = false; |
| | | } |
| | | }); |
| | | } else { |
| | | API_GOODS.createGoods(submit).then((res) => { |
| | | if (res.success) { |
| | | this.submitLoading = false; |
| | | this.$parent.activestep = 2; |
| | | window.scrollTo(0, 0); |
| | | } else { |
| | | this.submitLoading = false; |
| | | } |
| | | }); |
| | | } |
| | | } else { |
| | | API_GOODS.createGoods(submit).then((res) => { |
| | | if (res.success) { |
| | | this.submitLoading = false; |
| | | this.$parent.activestep = 2; |
| | | window.scrollTo(0, 0); |
| | | } else { |
| | | this.submitLoading = false; |
| | | } |
| | | }); |
| | | } |
| | | } else { |
| | | this.submitLoading = false; |
| | | this.submitLoading = false; |
| | | |
| | | this.$Message.error("还有必填项未做处理,请检查表单"); |
| | | } |
| | | }); |
| | | this.$Message.error("还有必填项未做处理,请检查表单"); |
| | | } |
| | | }); |
| | | } finally { |
| | | this.submitLoading = false; |
| | | } |
| | | }, |
| | | /** 保存为模板 */ |
| | | saveToDraft() { |
| | |
| | | } else if (type === 'localRefresh') { |
| | | this.$Message.error("刷新失败,请重试"); |
| | | } |
| | | }).catch(reason => { |
| | | console.log("获取模板失败",reason) |
| | | }); |
| | | } |
| | | }, |
| | | removeVideo(){ |
| | | this.baseInfoForm.showGoodsVideo = null; |
| | | this.baseInfoForm.goodsVideo = null; |
| | | }, |
| | | // todo 文件上传 |
| | | async upLoadImg(file) { |
| | | console.log(file,this.count++); |
| | | if (this.listImages.length >= 5) { |
| | | this.$Message.error("图片上传不能超过5个"); |
| | | return; |
| | | } |
| | | try { |
| | | // this.upLoadVideoLoading = true; |
| | | // 获取文件上传临时密钥 |
| | | const sts = await getSts(); |
| | | const cos = new COS({ |
| | | getAuthorization: async function (options, callback) { |
| | | callback({ |
| | | TmpSecretId: sts.data.tmpSecretId, |
| | | TmpSecretKey: sts.data.tmpSecretKey, |
| | | SecurityToken: sts.data.sessionToken, |
| | | // 建议返回服务器时间作为签名的开始时间,避免客户端本地时间偏差过大导致签名错误 |
| | | StartTime: sts.data.stsStartTime, // 时间戳,单位秒,如:1580000000 |
| | | ExpiredTime: sts.data.stsEndTime,// 时间戳,单位秒,如:1580000000 |
| | | ScopeLimit: true, // 细粒度控制权限需要设为 true,会限制密钥只在相同请求时重复使用 |
| | | }); |
| | | } |
| | | }) |
| | | const fileKey = getFileKey(file.name) |
| | | const upData = await cos.uploadFile({ |
| | | Bucket: sts.data.bucket, |
| | | Region: sts.data.region, |
| | | Key: fileKey, |
| | | Body: file, // 要上传的文件对象。 |
| | | SliceSize: 1024 * 1024 * 5, |
| | | onProgress: function (progressData) { |
| | | console.log('上传进度:', progressData); |
| | | }, |
| | | }); |
| | | console.log("上传成功", upData) |
| | | this.$nextTick(() => { |
| | | this.listImages.push(fileKey); |
| | | this.showListImages.push(sts.data.endpoint + "/" + fileKey); |
| | | this.baseInfoForm.goodsGalleryFiles.push(fileKey); |
| | | }) |
| | | |
| | | } catch (e) { |
| | | console.log("上传失败", upData) |
| | | return false; |
| | | } finally { |
| | | // this.upLoadVideoLoading = false; |
| | | |
| | | } |
| | | return false; |
| | | }, |
| | | async upLoadVideo(file) { |
| | | try { |
| | | // this.upLoadVideoLoading = true; |
| | | // 获取文件上传临时密钥 |
| | | const sts = await getSts(); |
| | | const cos = new COS({ |
| | | getAuthorization: async function (options, callback) { |
| | | callback({ |
| | | TmpSecretId: sts.data.tmpSecretId, |
| | | TmpSecretKey: sts.data.tmpSecretKey, |
| | | SecurityToken: sts.data.sessionToken, |
| | | // 建议返回服务器时间作为签名的开始时间,避免客户端本地时间偏差过大导致签名错误 |
| | | StartTime: sts.data.stsStartTime, // 时间戳,单位秒,如:1580000000 |
| | | ExpiredTime: sts.data.stsEndTime,// 时间戳,单位秒,如:1580000000 |
| | | ScopeLimit: true, // 细粒度控制权限需要设为 true,会限制密钥只在相同请求时重复使用 |
| | | }); |
| | | } |
| | | }) |
| | | const fileKey = getFileKey(file.name) |
| | | const upData = await cos.uploadFile({ |
| | | Bucket: sts.data.bucket, |
| | | Region: sts.data.region, |
| | | Key: fileKey, |
| | | Body: file, // 要上传的文件对象。 |
| | | SliceSize: 1024 * 1024 * 5, |
| | | onProgress: function (progressData) { |
| | | console.log('上传进度:', progressData); |
| | | }, |
| | | }); |
| | | console.log("上传成功", upData) |
| | | this.$nextTick(() => { |
| | | this.baseInfoForm.goodsVideo = fileKey; |
| | | this.baseInfoForm.showGoodsVideo = sts.data.endpoint + "/" + fileKey; |
| | | this.baseInfoForm.goodsVideo = fileKey; |
| | | }) |
| | | |
| | | } catch (e) { |
| | | console.log("上传失败", upData) |
| | | return false; |
| | | } finally { |
| | | // this.upLoadVideoLoading = false; |
| | | |
| | | } |
| | | return false; |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.accessToken = { |
| | |
| | | .refresh-icon { |
| | | margin-left: 10px; |
| | | } |
| | | |
| | | .demo-upload-list { |
| | | display: inline-block; |
| | | width: 60px; |
| | | height: 60px; |
| | | text-align: center; |
| | | line-height: 60px; |
| | | border: 1px solid transparent; |
| | | border-radius: 4px; |
| | | overflow: hidden; |
| | | background: #fff; |
| | | position: relative; |
| | | box-shadow: 0 1px 1px rgba(0, 0, 0, .2); |
| | | margin-right: 4px; |
| | | } |
| | | |
| | | .demo-upload-list img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .demo-upload-list-cover { |
| | | display: none; |
| | | position: absolute; |
| | | top: 0; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | background: rgba(0, 0, 0, .6); |
| | | } |
| | | |
| | | .demo-upload-list:hover .demo-upload-list-cover { |
| | | display: block; |
| | | } |
| | | |
| | | .demo-upload-list-cover i { |
| | | color: #fff; |
| | | font-size: 20px; |
| | | cursor: pointer; |
| | | margin: 0 2px; |
| | | } |
| | | </style> |