记录vue3
<template>
<div>
<div class="content">
<!-- 面包屑 -->
<div class="breadcrumbs">
<span>
<span @click="goGoodsList">数字商品管理</span>
<span class="active-span"
>/ 新建数字商品</span
></span
>
</div>
<!-- 新建数字商品 -->
<div class="creatbox">
<div class="title">新建数字商品</div>
<n-form
ref="formRef"
label-placement="left"
label-width="auto"
:model="model"
:rules="rules"
require-mark-placement="left"
>
<div class="disflex">
<div class="disflex-left">
<n-form-item label="上传封面" path="cover">
<div>
<div v-show="model.cover === ''">
<div class="inputbox" @click="coverfileChange">
<n-icon size="40">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
/>
</svg> </n-icon
></div>
<input
id="uploadInput"
ref="uploadInput"
type="file"
class="input-file"
@change="fileChange_cover"
/>
</div>
<div v-show="model.cover !== ''" class="disflexupload">
<div class="cover_img">
<img :src="haveCoverurl" alt="" />
</div>
<div class="uploadnew">
<span @click="againUpload('cover')">重新上传</span
><span class="delspan" @click="deleteUpload('cover')"
>删除</span
>
</div>
</div>
<div class="tiptext">支持jpg/jpeg/png格式 5M以内</div>
</div>
</n-form-item>
<n-form-item label="商品名称" path="name">
<n-input
v-model:value="model.name"
:clearable="true"
maxlength="200"
:style="{ width: '384px' }"
placeholder="请输入"
/>
</n-form-item>
<n-form-item label="图文说明书">
<div>
<div v-show="model.pic === ''">
<div class="inputbox-video-book" @click="picfileChange">
<n-icon size="40">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
/>
</svg> </n-icon
></div>
<input
id="uploadInputbook"
ref="uploadInputbook"
type="file"
class="input-file"
@change="fileChange_pic"
/>
</div>
<div v-show="model.pic !== ''" class="disflexupload">
<div class="pic_img">
<img :src="havePicurl" alt="" />
</div>
<div class="uploadnew">
<span @click="againUpload('pic')">重新上传</span>
<span class="delspan" @click="deleteUpload('pic')"
>删除</span
>
</div>
</div>
<div class="tiptext">支持jpg/jpeg/png格式 5M以内</div>
</div>
</n-form-item>
<n-form-item label="视频说明书">
<div>
<div v-show="model.video === ''">
<div class="inputbox-video-book" @click="videofileChange">
<n-icon size="40">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
/>
</svg> </n-icon
></div>
<input
id="uploadInputvideo"
ref="uploadInputvideo"
type="file"
class="input-file"
@change="fileChange_video"
/>
</div>
<div v-show="model.video !== ''" class="disflexupload">
<div class="pic_img">
<video
ref="video"
controls
:src="haveVideourl"
controlsList="nodownload"
/>
</div>
<div class="uploadnew">
<span @click="againUpload('video')">重新上传</span>
<span class="delspan" @click="deleteUpload('video')"
>删除</span
>
</div>
</div>
<div class="videotiptext">支持MP4格式 100M以内</div>
</div>
</n-form-item>
</div>
<div class="disflex-right">
<n-form-item label="商品品类" path="product_type1">
<n-select
v-model:value="model.product_type1"
:style="{ width: '200px' }"
:options="goodsOptions_one"
:on-update:value="changeOne"
/>
<n-select
v-model:value="model.product_type2"
:style="{ width: '200px', 'margin-left': '16px' }"
:options="goodsOptions_two"
:on-update:value="changeTwo"
/>
</n-form-item>
<n-form-item label="商品外链">
<n-input
v-model:value="model.url"
:clearable="true"
maxlength="200"
:style="{ width: '384px' }"
placeholder="请输入"
/>
</n-form-item>
<!-- 模型上传 -->
<div>
<input
id="uploadInputmodel"
ref="uploadInputmodel"
type="file"
class="input-file"
@change="fileChange_fbx"
/>
</div>
<!-- 规格上传 -->
<div>
<input
id="specuploadInput"
ref="specuploadInput"
type="file"
class="input-file"
@change="spec_fileChange_cover"
/>
</div>
<n-scrollbar
trigger="none"
:style="{ 'max-height': '430px' }"
y-scrollable
>
<div class="specinfo">
<div
v-for="(item, index) in specificationList"
:key="index"
class="spec"
>
<div
class="specbox"
:class="
submitClick === true &&
(item.specifications_name === '' ||
item.obj_url === '' ||
item.specifications_pic === '')
? 'activeSpecbox'
: ''
"
>
<div class="topbox">
<div v-if="index === 0" class="text"
><span>*</span>规格一</div
>
<div v-if="index === 1" class="text"
><span>*</span>规格二</div
>
<div v-if="index === 2" class="text"
><span>*</span>规格三</div
>
<div v-if="index === 3" class="text"
><span>*</span>规格四</div
>
<div v-if="index === 4" class="text"
><span>*</span>规格五</div
>
<div v-if="index === 5" class="text"
><span>*</span>规格六</div
>
<div v-if="index === 6" class="text"
><span>*</span>规格七</div
>
<div v-if="index === 7" class="text"
><span>*</span>规格八</div
>
<div v-if="index === 8" class="text"
><span>*</span>规格九</div
>
<div v-if="index === 9" class="text"
><span>*</span>规格十</div
>
<n-dialog-provider>
<div @click="deletespec(index)"
><img
src="@/assets/images/shop/deleteradius.png"
alt=""
/></div>
</n-dialog-provider>
</div>
<div class="selectbox">
<div class="disBox">
<span>*</span>
<n-form-item label="规格名称">
<n-input
v-model:value="item.specifications_name"
:clearable="true"
maxlength="200"
:style="{ width: '384px' }"
placeholder="请输入"
/>
</n-form-item>
</div>
<div class="disBox">
<span>*</span>
<n-form-item
label="规格图上传"
style="margin-left: 14px"
>
<div>
<div v-show="item.specifications_pic === ''">
<div
class="spec-inputbox"
@click="speccoverfileChange(index)"
>
<n-icon size="40">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
/>
</svg> </n-icon
></div>
</div>
<div
v-show="item.specifications_pic !== ''"
class="disflexupload"
>
<div class="spec-cover_img">
<img :src="item.specifications_pic" alt="" />
</div>
<div class="spec-uploadnew">
<span @click="specagainUpload(index)"
>重新上传</span
><span
class="delspan"
@click="specdeleteUpload(index)"
>删除</span
>
</div>
</div>
<div class="spec-tiptext"
>支持jpg/jpeg/png格式 5M以内</div
>
</div>
</n-form-item>
</div>
<div class="disBox" style="height: 80px">
<span>*</span>
<n-form-item label="模型上传">
<div
v-show="item.uploadfbxState"
class="disflexupload"
>
<div>
<div
class="inputbox-model"
@click="specfbxfileChange(index)"
>
上传模型
</div>
</div>
<div class="model-tiptext">
支持扩展名：.fbx
</div>
</div>
<div
v-show="!item.uploadfbxState"
class="progressbox"
>
<div v-if="item.percentageNum !== 100">
<div class="modelnamebox">
<div> {{ item.obj_name }}</div>
</div>
<n-progress
type="line"
:style="{ width: '256px' }"
:percentage="item.percentageNum"
processing
>
</n-progress>
</div>
<div v-else class="fbxbox">
{{ item.obj_name }}
<img
src="@/assets/images/shop/success.png"
alt=""
/>
<span @click="specfbxagainUpload(index)"
>重新上传</span
></div
>
</div>
</n-form-item>
</div>
</div>
</div>
<div
v-if="
submitClick === true &&
(item.specifications_name === '' ||
item.obj_url === '' ||
item.specifications_pic === '')
"
class="warningtext"
>
此规格有数据为空
</div>
</div>
</div>
</n-scrollbar>
<div
v-if="specificationList.length > 9"
class="addspecbox puplic-btn-disable"
>新增规格</div
>
<div v-else class="addspecbox" @click="addspec">新增规格</div>
</div>
</div>
</n-form>
</div>
<div class="footerbtn">
<n-spin :show="showspin" size="small">
<div class="btn submit-btn" @click="handleValidateClick">提交</div>
</n-spin>
<div class="btn cancle-btn" @click="goGoodsList">取消</div>
</div>
</div>
<Dialog v-model:show="showDelAll" @enter="handleDelAll"></Dialog>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { FormInst, useMessage, useDialog, FormItemRule } from 'naive-ui';
import { useUpload } from '@/hooks/useAxios';
import Dialog from '@/components/Dialog.vue';
import { usePost } from '@/hooks/useAxios';
import {
HttpAdminGoodsGetCategoryListParameter,
HttpAdminGoodsGetCategoryListParameterInitial,
HttpAdminGoodsGetCategoryListRsult,
imgUploadResult,
videoUploadResult,
modelUploadResult,
specification,
goodsStore,
goodsInfo,
} from '@/types/httpGoods';
const haveCoverurl = ref();
const havePicurl = ref();
const haveVideourl = ref();
const message = useMessage();
const router = useRouter();
const formRef = ref<FormInst | null>(null);
const uploadInput = ref<HTMLElement | null>(null);
const specuploadInput = ref<HTMLElement | null>(null);
const uploadInputvideo = ref<HTMLElement | null>(null);
const uploadInputbook = ref<HTMLElement | null>(null);
const uploadInputmodel = ref<HTMLElement | null>(null);
const allspecOptions = ref();
const goodsOptions_one = ref();
const goodsOptions_two = ref();
const uploadfbxState = ref(true);
const showDelAll = ref(false);
const submitClick = ref(false);
const delNum = ref();
const percentageNum = ref(0);
const clickState = ref(false);
const showspin = ref(false);
const dialog = useDialog();
const initState = ref(true);
const saveIndexnum = ref(); //循环上传存的索引值
const specificationList = ref([
{
specifications_name: '',
obj_name: '',
obj_url: '',
obj_url_nodomainname: '',
uploadfbxState: true,
percentageNum: 0,
specifications_pic: '',
},
]);
const queryInfo = router.currentRoute.value.query;
const model = ref({
cover: '', //商品封面图
name: '', //商品封面图, //商品名称
pic: '', //商品封面图, //商品名称
video: '',
product_type1: null, //一级分类
product_type2: null, //二级分类
url: '', //商品外链
// obj: '', //模型文件地址
// obj_name: '',
specifications: '', //规格
});
const submitState = ref(false);
const rules = {
cover: {
required: true,
trigger: ['change'],
message: '请上传封面',
},
name: {
required: true,
trigger: ['blur', 'input'],
message: '请填写商品名称',
},
obj: {
required: true,
trigger: ['change'],
message: '请上传模型',
},
product_type1: {
required: true,
validator(rule: FormItemRule, value: string) {
if (
submitState.value &&
(!model.value.product_type2 || !model.value.product_type1)
) {
return new Error('请选择商品品类');
}
return true;
},
trigger: ['blur', 'change'],
},
};
const parameterGoodsGetCategoryList =
ref<HttpAdminGoodsGetCategoryListParameter>(
HttpAdminGoodsGetCategoryListParameterInitial(),
);
parameterGoodsGetCategoryList.value.pid = 0;
const {
data: dataGoodsGetCategoryList,
// isLoading: isLoadingGoodsGetCategoryList,
execute: executeGoodsGetCategoryList,
onResult: onResultGoodsGetCategoryList,
} = usePost<HttpAdminGoodsGetCategoryListRsult[]>(
'/admin/goods/getCategoryList',
parameterGoodsGetCategoryList,
false,
);
onResultGoodsGetCategoryList((result) => {
const options: { label: string; value: number }[] = [];
if (result.value === undefined) {
} else {
result.value.forEach((item) => {
options.push({
label: item.name,
value: item.id,
});
});
}
if (parameterGoodsGetCategoryList.value.pid === 0) {
goodsOptions_one.value = options;
} else {
goodsOptions_two.value = options;
}
// console.log(goodsOptions_one.value);
});
// 上传模型
// const {
// fileData: fileDataUploadFbx,
// // progress: percentageNum,
// execute: executeUploadFbx,
// // controller: controllerUploadFbx,
// onResult: onmodelUploadResult,
// } = useUpload<modelUploadResult[]>('/admin/goods/uploadFbx');
// onmodelUploadResult((result) => {
// let uploadinfo = JSON.parse(JSON.stringify(result.value));
// specificationList.value[saveIndexnum.value].obj_url = uploadinfo.url;
// specificationList.value[saveIndexnum.value].percentageNum = 100;
// message.success('上传成功');
// });
function cancelUpload() {
percentageNum.value = 0;
uploadfbxState.value = true;
// model.value.obj = '';
// controllerUploadFbx.value.abort();
}
function changeTwo(value: null) {
submitState.value = false;
model.value.product_type2 = value;
}
function changeOne(value: null) {
submitState.value = false;
model.value.product_type1 = value;
model.value.product_type2 = null;
parameterGoodsGetCategoryList.value.pid = Number(value);
executeGoodsGetCategoryList();
}
function goGoodsList() {
router.push({
path: '/goods',
});
}
function handleValidateClick(e: MouseEvent) {
if (initState.value === true) {
return;
}
submitState.value = true;
let jsonSpec = JSON.parse(JSON.stringify(specificationList.value));
console.log(jsonSpec);
// let obj_nameArray: string[] = [];
let jsonSpecState = false;
jsonSpec.forEach(
(item: {
obj_url: string;
specifications_pic: string;
specifications_name: string;
}) => {
if (
item.obj_url === '' ||
item.specifications_pic === '' ||
item.specifications_name === ''
) {
jsonSpecState = true;
}
},
);
submitClick.value = true;
// let obj_nameString = obj_nameArray.join(',');
e.preventDefault();
if (formRef.value === null) {
} else {
formRef.value.validate((errors: unknown) => {
if (!errors) {
// if (obj_nameArray.length === 0) {
// message.warning('每个商品至少一个规格有值');
// return;
// }
if (jsonSpecState === true) {
return;
}
showspin.value = true;
if (queryInfo.type === 'edit') {
const params = {
name: model.value.name,
cover: model.value.cover,
pic: model.value.pic,
video: model.value.video,
url: model.value.url,
product_type1: model.value.product_type1,
product_type2: model.value.product_type2,
obj: specificationList.value[0].obj_url_nodomainname,
// obj: model.value.obj,
// obj_name: model.value.obj_name,
// specifications: obj_nameString,
specifications: specificationList.value,
id: queryInfo.id,
};
const { onResult: ongoodsStore, onError: onError } = usePost<
goodsStore[]
>('/admin/goods/update', params);
ongoodsStore(() => {
message.success('编辑成功');
showspin.value = false;
goGoodsList();
});
onError(() => {
showspin.value = false;
});
} else {
const params = {
name: model.value.name,
cover: model.value.cover,
pic: model.value.pic,
video: model.value.video,
url: model.value.url,
product_type1: model.value.product_type1,
product_type2: model.value.product_type2,
obj: specificationList.value[0].obj_url_nodomainname,
// obj_name: model.value.obj_name,
specifications: specificationList.value,
};
const { onResult: ongoodsStore, onError: onError } = usePost<
goodsStore[]
>('/admin/goods/store', params);
ongoodsStore(() => {
message.success('新建成功');
showspin.value = false;
goGoodsList();
});
onError(() => {
showspin.value = false;
});
}
} else {
clickState.value = true;
}
});
}
}
function formRefrules() {
// console.log(clickState.value);
if (clickState.value === false) {
return;
}
if (formRef.value === null) {
} else {
formRef.value.validate((errors: unknown) => {
if (!errors) {
} else {
// message.error('Invalid');
}
});
}
}
function coverfileChange() {
let oBtn = uploadInput.value as HTMLInputElement;
oBtn.click();
}
function videofileChange() {
let oBtn = uploadInputvideo.value as HTMLInputElement;
oBtn.click();
}
function picfileChange() {
let oBtn = uploadInputbook.value as HTMLInputElement;
oBtn.click();
}
function specfbxfileChange(index: any) {
saveIndexnum.value = index;
let oBtn = uploadInputmodel.value as HTMLInputElement;
oBtn.click();
}
//
function speccoverfileChange(index: any) {
saveIndexnum.value = index;
let oBtn = specuploadInput.value as HTMLInputElement;
oBtn.click();
}
function againUpload(item: string) {
if (item === 'cover') {
coverfileChange();
return;
}
if (item === 'pic') {
picfileChange();
return;
}
if (item === 'video') {
videofileChange();
return;
}
// if (item === 'fbx') {
// // fbxfileChange();
// return;
// }
}
function deleteUpload(item: string) {
if (item === 'cover') {
haveCoverurl.value = '';
model.value.cover = '';
return;
}
if (item === 'pic') {
havePicurl.value = '';
model.value.pic = '';
return;
}
if (item === 'video') {
haveVideourl.value = '';
model.value.video = '';
return;
}
}
function uploadfileimg(e: any, files: any, typename: string) {
if (
files[0].type !== 'image/png' &&
files[0].type !== 'image/jpg' &&
files[0].type !== 'image/jpeg'
) {
message.warning('文件格式错误');
e.target.value = '';
return;
}
if (files[0].size > 5 * 1024 * 1024) {
message.warning('图片大小不能超过5M');
e.target.value = '';
return;
}
const fileData = ref<FormData>(new FormData());
fileData.value.append('file', files[0]);
const { onResult: onimgUploadResult } = usePost<imgUploadResult[]>(
'/admin/goods/uploadPic',
fileData,
);
onimgUploadResult((result) => {
let uploadinfo = JSON.parse(JSON.stringify(result.value));
if (typename === 'cover') {
model.value.cover = uploadinfo.url;
haveCoverurl.value = `${process.env.VUE_APP_BASE_URL}${uploadinfo.url}`;
formRefrules();
} else {
model.value.pic = uploadinfo.url;
havePicurl.value = `${process.env.VUE_APP_BASE_URL}${uploadinfo.url}`;
}
message.success('上传成功');
});
e.target.value = '';
}
function fileChange_cover(e: any) {
const input = e.target as HTMLInputElement;
let files = input.files;
if (files) {
uploadfileimg(e, files, 'cover');
}
}
function spec_fileChange_cover(e: any) {
const input = e.target as HTMLInputElement;
let files = input.files;
if (files) {
if (
files[0].type !== 'image/png' &&
files[0].type !== 'image/jpg' &&
files[0].type !== 'image/jpeg'
) {
message.warning('文件格式错误');
e.target.value = '';
return;
}
if (files[0].size > 5 * 1024 * 1024) {
message.warning('图片大小不能超过5M');
e.target.value = '';
return;
}
const fileData = ref<FormData>(new FormData());
fileData.value.append('file', files[0]);
const { onResult: onimgUploadResult } = usePost<imgUploadResult[]>(
'/admin/goods/uploadPic',
fileData,
);
onimgUploadResult((result) => {
let uploadinfo = JSON.parse(JSON.stringify(result.value));
specificationList.value[
saveIndexnum.value
].specifications_pic = `${process.env.VUE_APP_BASE_URL}${uploadinfo.url}`;
message.success('上传成功');
});
e.target.value = '';
}
}
function specagainUpload(index: any) {
speccoverfileChange(index);
}
function specfbxagainUpload(index: any) {
specfbxfileChange(index);
}
function fileChange_video(e: any) {
const input = e.target as HTMLInputElement;
let files = input.files;
if (files) {
// console.log(files[0].type);
if (files[0].type !== 'video/mp4') {
message.warning('文件格式错误');
e.target.value = '';
return;
}
if (files[0].size > 100 * 1024 * 1024) {
message.warning('视频大小不能超过100M');
e.target.value = '';
return;
}
const fileData = ref<FormData>(new FormData());
fileData.value.append('file', files[0]);
const { onResult: onvideoUploadResult } = usePost<videoUploadResult[]>(
'/admin/goods/uploadVideo',
fileData,
);
onvideoUploadResult((result) => {
let uploadinfo = JSON.parse(JSON.stringify(result.value));
model.value.video = uploadinfo.url;
haveVideourl.value = `${process.env.VUE_APP_BASE_URL}${uploadinfo.url}`;
message.success('上传成功');
});
e.target.value = '';
}
}
function specdeleteUpload(index: any) {
specificationList.value[index].specifications_pic = '';
}
function fileChange_pic(e: Event) {
const input = e.target as HTMLInputElement;
let files = input.files;
if (files) {
uploadfileimg(e, files, 'pic');
}
}
function fileChange_fbx(e: any) {
const input = e.target as HTMLInputElement;
let files = input.files;
if (files) {
// model.value.obj_name = files[0].name;
var index = files[0].name.lastIndexOf('.');
//获取后缀
var ext = files[0].name.substr(index + 1);
if (ext !== 'fbx' && ext !== 'FBX') {
message.warning('文件格式错误');
e.target.value = '';
return;
}
const fileData = ref<FormData>(new FormData());
fileData.value.append('file', files[0]);
// executeUploadFbx();
specificationList.value[saveIndexnum.value].uploadfbxState = false;
specificationList.value[saveIndexnum.value].obj_name = files[0].name;
percentageNum.value = 0;
// uploadfbxState.value = false;
let timer = setInterval(function () {
percentageNum.value++;
Number(percentageNum.value) > 98
? (percentageNum.value = 99)
: percentageNum.value;
console.log(percentageNum.value);
specificationList.value[saveIndexnum.value].percentageNum =
percentageNum.value;
}, 1000);
const {
onResult: onmodelUploadResult,
onError: onmodelUploadResultError,
} = usePost<modelUploadResult[]>('/admin/goods/uploadFbx', fileData);
onmodelUploadResult((result) => {
let uploadinfo = JSON.parse(JSON.stringify(result.value));
specificationList.value[
saveIndexnum.value
].obj_url_nodomainname = `${uploadinfo.url}`;
specificationList.value[
saveIndexnum.value
].obj_url = `${process.env.VUE_APP_BASE_URL}${uploadinfo.url}`;
specificationList.value[saveIndexnum.value].percentageNum = 100;
clearInterval(timer);
message.success('上传成功');
});
onmodelUploadResultError((result) => {
clearInterval(timer);
specificationList.value[saveIndexnum.value].percentageNum = 0;
specificationList.value[saveIndexnum.value].uploadfbxState = true;
// if (result !== 'Network Error') {
// message.error('模型上传失败请重新上传');
// }
});
e.target.value = '';
}
}
function addspec() {
specificationList.value.push({
specifications_name: '',
obj_name: '',
obj_url: '',
obj_url_nodomainname: '',
uploadfbxState: true,
percentageNum: 0,
specifications_pic: '',
});
}
// 规格列表
function getspecificationList() {
const params = {};
const { onResult: onspecification } = usePost<specification[]>(
'/admin/goods/getSpecificationList',
params,
);
onspecification((result) => {
const options: { label: string; value: string }[] = [];
if (result.value === undefined) {
} else {
result.value.forEach((item) => {
options.push({
label: item.name,
value: String(item.id),
});
});
}
allspecOptions.value = options;
});
}
// 商品详情
function getgoodsInfo() {
const params = {
id: queryInfo.id,
};
const { onResult: ongoodsInfo } = usePost<goodsInfo[]>(
'/admin/goods/getInfo',
params,
);
ongoodsInfo((result) => {
let goodsinfo = JSON.parse(JSON.stringify(result.value));
// console.log(goodsinfo);
model.value = {
cover: goodsinfo.cover, //商品封面图
name: goodsinfo.name, //商品封面图, //商品名称
pic: goodsinfo.pic, //商品封面图, //商品名称
video: goodsinfo.video,
product_type1: goodsinfo.product_type1, //一级分类
product_type2: goodsinfo.product_type2, //二级分类
url: goodsinfo.url, //商品外链
// obj: goodsinfo.obj, //模型文件地址
// obj_name: goodsinfo.obj_name, //模型文件地址
specifications: goodsinfo.specifications, //规格
};
specificationList.value = goodsinfo.specifications;
parameterGoodsGetCategoryList.value.pid = Number(goodsinfo.product_type1);
executeGoodsGetCategoryList();
haveCoverurl.value = goodsinfo.cover_url;
havePicurl.value = goodsinfo.pic_url;
haveVideourl.value = goodsinfo.video_url;
initState.value = false;
});
}
function handleDelAll() {
specificationList.value.splice(delNum.value, 1);
}
function deletespec(index: number) {
if (specificationList.value.length === 1) {
message.warning('每个商品至少一个规格');
return;
}
showDelAll.value = true;
delNum.value = index;
// dialog.warning({
// title: '提示',
// content: '确定删除此规格吗',
// positiveText: '确定',
// negativeText: '取消',
// maskClosable: false,
// closeOnEsc: false,
// onPositiveClick: () => {
// specificationList.value.splice(index, 1);
// },
// onNegativeClick: () => {
// // message.error('取消');
// },
// });
}
onMounted(() => {
// console.log(queryInfo);
executeGoodsGetCategoryList();
// getspecificationList();
if (queryInfo.type === 'edit') {
setTimeout(function () {
getgoodsInfo();
}, 100);
} else {
initState.value = false;
}
});
</script>
<style scoped lang="scss">
.breadcrumbs {
span {
color: #939eaf;
}
.active-span {
color: #334767;
}
}
.tiptext {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #606266;
margin-top: 15px;
margin-left: 15px;
}
.videotiptext {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #606266;
margin-top: 15px;
margin-left: 32px;
}
// .uploadbox {
// }
.disflexupload {
display: flex;
align-items: flex-end;
}
.cover_img {
width: 199px;
height: 199px;
border-radius: 4px;
border: 1px solid #dcdfe6;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
img {
max-width: 199px;
max-height: 199px;
}
}
.pic_img {
width: 199px;
height: 101px;
background: #f2f6fc;
border-radius: 4px;
border: 1px solid #dcdfe6;
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
img {
max-width: 199px;
max-height: 101px;
}
video {
max-width: 199px;
max-height: 101px;
}
}
.uploadnew {
cursor: pointer;
margin-left: 19px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #2f88eb;
.delspan {
color: #e0798a;
margin-left: 15px;
}
}
.inputbox {
width: 199px;
height: 199px;
background: #f2f6fc;
border-radius: 4px;
border: 1px dashed #dcdfe6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #606266;
cursor: pointer;
}
.spec-inputbox {
width: 120px;
height: 120px;
background: #f2f6fc;
border-radius: 4px;
border: 1px dashed #dcdfe6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #606266;
cursor: pointer;
}
.spec-cover_img {
width: 120px;
height: 120px;
border-radius: 4px;
border: 1px solid #dcdfe6;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
img {
max-width: 120px;
max-height: 120px;
}
}
.spec-tiptext {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #606266;
margin-top: 15px;
margin-left: -24px;
}
.spec-uploadnew {
width: 200px;
cursor: pointer;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
margin-left: 19px;
span {
color: #2f88eb !important;
margin-right: 0px !important;
margin-left: 0px !important;
}
.delspan {
color: #e0798a !important;
margin-left: 15px !important;
}
}
.inputbox-video-book {
width: 199px;
height: 101px;
background: #f2f6fc;
border-radius: 4px;
border: 1px dashed #dcdfe6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #606266;
cursor: pointer;
}
.inputbox-model {
width: 198px;
height: 37px;
border-radius: 3px;
border: 1px solid #2c84ea;
font-size: 18px;
font-family: AlibabaPuHuiTiR;
color: #2881ea;
line-height: 37px;
text-align: center;
cursor: pointer;
}
.inputbox-model:hover {
background: linear-gradient(180deg, #227ae9 0%, #3d97ee 100%);
color: #ffffff;
}
.model-tiptext {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #606266;
margin-left: 14px;
}
.progressbox {
position: relative;
.modelnamebox {
position: absolute;
top: -8px;
left: 0;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
width: 228px;
.uploadcancle {
font-size: 12px;
color: RGBA(185, 185, 185, 1);
cursor: pointer;
}
}
.fbxbox {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #606266;
display: flex;
flex-direction: row;
align-items: center;
img {
width: 14px;
height: 14px;
margin-left: 6px;
}
span {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1965ff;
margin-left: 20px;
cursor: pointer;
}
}
}
.creatbox {
margin-top: 24px;
width: 1230px;
height: 735px;
background: #ffffff;
box-shadow: 0px 2px 3px 0px #e9ebf2;
.title {
font-size: 16px;
font-family: AlibabaPuHuiTiM;
color: #000000;
padding: 33px 0 9px 47px;
}
.disflex {
display: flex;
margin-left: 72px;
margin-right: 94px;
.disflex-left {
margin-right: 104px;
width: 572px;
}
.disflex-right {
width: 495px;
.specinfo {
width: 495px;
}
// .specinfo::-webkit-scrollbar {
// display: none; /* Chrome Safari */
// }
.addspecbox {
user-select: none;
width: 120px;
height: 37px;
border-radius: 8px;
border: 1px solid #318aec;
text-align: center;
font-size: 18px;
font-family: AlibabaPuHuiTiR;
color: #348eec;
line-height: 37px;
margin-top: 30px;
cursor: pointer;
}
.spec {
margin-bottom: 30px;
}
// .spec:last-child {
// // margin-bottom: 0;
// }
.specbox {
width: 483px;
border: 1px solid #e4e5e7;
.topbox {
height: 40px;
background: #f6f9fc;
display: flex;
align-items: center;
justify-content: space-between;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(96, 98, 102, 1);
margin-left: 14px;
span {
color: rgb(239, 68, 68);
margin-right: 3px;
}
}
img {
width: 22px;
height: 22px;
margin-right: 14px;
cursor: pointer;
}
}
.selectbox {
margin-top: 32px;
align-items: baseline;
}
}
.activeSpecbox {
border: 1px solid #de576d;
}
.spec:last-child {
margin-bottom: 0px;
}
}
}
}
.disBox {
display: flex;
align-items: baseline;
span {
color: rgb(239, 68, 68);
margin-right: -10px;
margin-left: 18px;
}
}
.warningtext {
color: rgb(239, 68, 68);
margin-left: 1px;
}
:deep(.n-progress.n-progress--line
.n-progress-icon.n-progress-icon--as-text) {
color: var(--n-text-color-line-outer);
text-align: center;
width: 40px;
font-size: var(--n-font-size);
padding-left: 15px;
transition: color 0.3s var(--n-bezier);
}
:deep(.n-progress
.n-progress-graph
.n-progress-graph-line
.n-progress-graph-line-rail) {
position: relative;
overflow: hidden;
height: var(--n-rail-height);
border-radius: 5px;
background-color: RGBA(213, 231, 251, 1);
transition: background-color 0.3s var(--n-bezier);
height: 4px;
}
:deep(.n-progress.n-progress--line .n-progress-content) {
display: flex;
align-items: center;
margin-top: 10px;
}
.puplic-btn-disable {
cursor: default !important;
}
</style>
不求大富大贵，但求一生平凡
浙公网安备 33010602011771号