<template>
|
<view class="product-edit">
|
|
<!-- 标签页 -->
|
<view class="tab-bar">
|
<scroll-view scroll-x="true" class="tab-scroll">
|
<view class="tab-item" :class="{ active: activeTab === 'basic' }" @click="switchTab('basic')">基础设置
|
</view>
|
<view class="tab-item" :class="{ active: activeTab === 'spec' }" @click="switchTab('spec')">规格库存</view>
|
<view class="tab-item" :class="{ active: activeTab === 'content' }" @click="switchTab('content')">商品详情
|
</view>
|
<view class="tab-item" :class="{ active: activeTab === 'buyset' }" @click="switchTab('buyset')">高级设置
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 表单内容 -->
|
<scroll-view scroll-y="true" class="form-scroll">
|
<!-- 基础设置 -->
|
<view v-show="activeTab === 'basic'" class="form-section">
|
<view class="form-item">
|
<view class="item-label">商品名称</view>
|
<input class="item-input" v-model="form.model.product_name" placeholder="请输入商品名称" />
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">商品编码</view>
|
<input class="item-input" v-model="form.model.product_no" placeholder="请输入商品编码" />
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">商品分类</view>
|
<picker class="item-picker" @change="categoryChange" :range="form.category" :range-key="'name'">
|
<view class="picker-text">{{ selectedCategory || '请选择商品分类' }}</view>
|
</picker>
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">预告商品</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.is_preview === 1 }"
|
@click="form.model.is_preview = 1">开启</view>
|
<view class="radio-item" :class="{ active: form.model.is_preview === 0 }"
|
@click="form.model.is_preview = 0">关闭</view>
|
</view>
|
</view>
|
|
<view class="form-item" v-if="form.model.is_preview === 1">
|
<view class="item-label">预告开启购买时间</view>
|
<uni-datetime-picker class="item-picker"
|
:value="previewTime"
|
@change="previewTimeChange"
|
:start="'1970-01-01'"
|
:end="'2030-12-31'">
|
<view class="picker-text">{{ previewTimeText || '请选择预告时间' }}</view>
|
</uni-datetime-picker>
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">销售状态</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.product_status === 10 }"
|
@click="form.model.product_status = 10">立即上架</view>
|
<view class="radio-item" :class="{ active: form.model.product_status === 20 }"
|
@click="form.model.product_status = 20">放入仓库</view>
|
</view>
|
<view class="form-tips">如果平台开启了商品审核，则商品审核通过后才能销售</view>
|
</view>
|
|
<view class="form-item" v-if="form.audit_setting.add_audit == 1 && form.model.scene == 'add'">
|
<view class="item-label">是否审核</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.audit_status === 0 }"
|
@click="form.model.audit_status = 0">提交审核</view>
|
<view class="radio-item" :class="{ active: form.model.audit_status === 40 }"
|
@click="form.model.audit_status = 40">保存草稿</view>
|
</view>
|
<view class="form-tips">当前平台开启了审核，审核通过后才能上架销售</view>
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">商品图片</view>
|
<view class="uploader">
|
<view class="uploader-item" v-for="(item, index) in form.model.image" :key="index">
|
<image :src="item.file_path" class="uploader-image"></image>
|
<view class="uploader-delete" @click="deleteImage(index)">×</view>
|
</view>
|
<view class="uploader-add" @click="handleUpload('image')">+</view>
|
</view>
|
<!-- 上传组件 -->
|
<Upload v-if="showUpload && uploadType === 'image'" :isupload="showUpload && uploadType === 'image'"
|
@getImgs="onUploadComplete" type='frontid'>上传图片</Upload>
|
</view>
|
|
|
<view class="form-item">
|
<view class="item-label">商品视频</view>
|
<view class="uploader">
|
<view v-if="form.model.video_id === 0" class="uploader-add" @click="handleUpload('video')">+
|
</view>
|
<view v-else class="uploader-item">
|
<video :src="form.model.video.file_path" class="uploader-video" controls></video>
|
<view class="uploader-delete" @click="deleteVideo">×</view>
|
</view>
|
</view>
|
<!-- 上传组件 -->
|
<upload v-if="showUpload && uploadType === 'video'" :num="1" file_type="video"
|
@getImgs="onUploadComplete"></upload>
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">视频封面</view>
|
<view class="uploader">
|
<view v-if="form.model.poster_id === 0" class="uploader-add" @click="handleUpload('poster')">+
|
</view>
|
<view v-else class="uploader-item">
|
<image :src="form.model.poster.file_path" class="uploader-image"></image>
|
<view class="uploader-delete" @click="deletePoster">×</view>
|
</view>
|
</view>
|
<!-- 上传组件 -->
|
<uploadOne v-if="showUploadOne && uploadType === 'poster'" @getImgs="onUploadComplete"></uploadOne>
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">商品卖点</view>
|
<textarea class="item-textarea" v-model="form.model.selling_point" placeholder="请输入商品卖点"
|
:auto-height="true"></textarea>
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">商品属性</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.is_virtual === 0 }"
|
@click="form.model.is_virtual = 0">实物商品</view>
|
<view class="radio-item" :class="{ active: form.model.is_virtual === 1 }"
|
@click="form.model.is_virtual = 1">虚拟商品</view>
|
<view class="radio-item" :class="{ active: form.model.is_virtual === 2 }"
|
@click="form.model.is_virtual = 2">券商品</view>
|
<view class="radio-item" :class="{ active: form.model.is_virtual === 3 }"
|
@click="form.model.is_virtual = 3">服务商品</view>
|
</view>
|
</view>
|
|
<view class="form-item" v-if="form.model.is_virtual === 0">
|
<view class="item-label">运费设置</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.is_delivery_free === 0 }"
|
@click="form.model.is_delivery_free = 0">包邮</view>
|
<view class="radio-item" :class="{ active: form.model.is_delivery_free === 1 }"
|
@click="form.model.is_delivery_free = 1">运费模板</view>
|
</view>
|
</view>
|
|
<view class="form-item" v-if="form.model.is_delivery_free === 1">
|
<view class="item-label">选择运费模板</view>
|
<picker class="item-picker" @change="deliveryChange" :range="form.delivery" range-key="name">
|
<view class="picker-text">{{ selectedDelivery || '请选择运费模板' }}</view>
|
</picker>
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">商品排序</view>
|
<input class="item-input" v-model="form.model.product_sort" placeholder="请输入商品排序" type="number" />
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">限购数量</view>
|
<input class="item-input" v-model="form.model.limit_num" placeholder="请输入限购数量，0为不限购"
|
type="number" />
|
</view>
|
|
<!-- 虚拟商品设置 -->
|
<view class="form-item" v-if="form.model.is_virtual === 1 || form.model.is_virtual === 3">
|
<view class="item-label">发货类型</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.virtual_auto === 1 }"
|
@click="form.model.virtual_auto = 1">自动</view>
|
<view class="radio-item" :class="{ active: form.model.virtual_auto === 0 }"
|
@click="form.model.virtual_auto = 0">手动</view>
|
</view>
|
</view>
|
|
<view class="form-item" v-if="form.model.is_virtual === 1 ">
|
<view class="item-label">虚拟内容</view>
|
<input class="item-input" v-model="form.model.virtual_content" placeholder="请输入虚拟物品内容" />
|
</view>
|
|
<view class="form-item" v-if=" form.model.is_virtual === 3">
|
<view class="item-label">服务商品内容</view>
|
<input class="item-input" v-model="form.model.service_content" placeholder="请输入服务商品内容" />
|
</view>
|
|
<view class="form-item" v-if="(form.model.is_virtual === 1 || form.model.is_virtual === 3) && form.model.virtual_auto === 0">
|
<view class="item-label">支持线下核销</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.is_verify === 1 }"
|
@click="form.model.is_verify = 1">支持</view>
|
<view class="radio-item" :class="{ active: form.model.is_verify === 0 }"
|
@click="form.model.is_verify = 0">不支持</view>
|
</view>
|
</view>
|
|
<view class="form-item"
|
v-if="(form.model.is_virtual === 1 || form.model.is_virtual === 3) && form.model.virtual_auto === 0 && form.model.is_verify === 1">
|
<view class="item-label">核销到期类型</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.verify_type === 10 }"
|
@click="form.model.verify_type = 10">按天数</view>
|
<view class="radio-item" :class="{ active: form.model.verify_type === 20 }"
|
@click="form.model.verify_type = 20">按固定时间</view>
|
</view>
|
</view>
|
|
<view class="form-item"
|
v-if="(form.model.is_virtual === 1 || form.model.is_virtual === 3) && form.model.virtual_auto === 0 && form.model.is_verify === 1 && form.model.verify_type === 10">
|
<view class="item-label">核销有效天数</view>
|
<input class="item-input" v-model="form.model.verify_day" placeholder="请输入有效天数，0或留空表示永久有效"
|
type="number" />
|
</view>
|
|
<view class="form-item"
|
v-if="(form.model.is_virtual === 1 || form.model.is_virtual === 3) && form.model.virtual_auto === 0 && form.model.is_verify === 1 && form.model.verify_type === 20">
|
<view class="item-label">核销有效时间</view>
|
<picker mode="daterange" class="item-picker" @change="verifyTimeChange" :value="verifyTimeArray">
|
<view class="picker-text">{{ verifyTimeText || '请选择核销有效时间' }}</view>
|
</picker>
|
</view>
|
|
<!-- 券商品设置 -->
|
<view class="form-item" v-if="form.model.is_virtual === 2">
|
<view class="item-label">抵扣金额</view>
|
<input class="item-input" v-model="form.model.deduction_price" placeholder="请输入抵扣金额" type="digit" />
|
<view class="form-tips">该券线下核销时，实际抵扣的金额</view>
|
</view>
|
</view>
|
|
<!-- 规格库存 -->
|
<view v-show="activeTab === 'spec'" class="form-section">
|
<view class="form-item">
|
<view class="item-label">库存计算方式</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.deduct_stock_type === 10 }"
|
@click="form.model.deduct_stock_type = 10">下单减库存</view>
|
<view class="radio-item" :class="{ active: form.model.deduct_stock_type === 20 }"
|
@click="form.model.deduct_stock_type = 20">付款减库存</view>
|
</view>
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">规格类型</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.spec_type === 10 }"
|
@click="form.model.spec_type = 10">单规格</view>
|
<view class="radio-item" :class="{ active: form.model.spec_type === 20 }"
|
@click="form.model.spec_type = 20">多规格</view>
|
</view>
|
</view>
|
|
<!-- 单规格 -->
|
<view v-if="form.model.spec_type === 10" class="spec-single">
|
<view class="form-item">
|
<view class="item-label">产品编码</view>
|
<input class="item-input" v-model="form.model.sku.product_no" placeholder="请输入产品编码" />
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">产品价格</view>
|
<input class="item-input" v-model="form.model.sku.product_price" placeholder="请输入产品价格"
|
type="digit" />
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">产品划线价</view>
|
<input class="item-input" v-model="form.model.sku.line_price" placeholder="请输入产品划线价"
|
type="digit" />
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">库存数量</view>
|
<input class="item-input" v-model="form.model.sku.stock_num" placeholder="请输入库存数量"
|
type="number" />
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">商品重量(Kg)</view>
|
<input class="item-input" v-model="form.model.sku.product_weight" placeholder="请输入商品重量(Kg)"
|
type="digit" />
|
</view>
|
|
<view class="form-item">
|
<view class="item-label">商品条码</view>
|
<input class="item-input" v-model="form.model.sku.bar_code" placeholder="请输入商品条码" />
|
</view>
|
</view>
|
|
<!-- 多规格 -->
|
<view v-else class="spec-many">
|
<view class="form-item">
|
<view class="item-label">规格属性</view>
|
<view class="spec-attrs">
|
<view class="spec-attr" v-for="(attr, index) in form.model.spec_many.spec_attr"
|
:key="index">
|
<view class="attr-header">
|
<view class="attr-name">{{ attr.name }}</view>
|
<view class="attr-delete" @click="deleteSpecAttr(index)">×</view>
|
</view>
|
<view class="attr-values">
|
<view class="attr-value" v-for="(value, vIndex) in attr.values" :key="vIndex">
|
<text>{{ value }}</text>
|
<view class="value-delete" @click="deleteSpecValue(index, vIndex)">×</view>
|
</view>
|
<view class="attr-add-value" @click="addSpecValue(index)">+ 添加值</view>
|
</view>
|
</view>
|
<view class="add-spec-attr" @click="addSpecAttr">+ 添加规格属性</view>
|
</view>
|
</view>
|
|
<view class="form-item" v-if="form.model.spec_many.spec_attr.length > 0">
|
<view class="item-label">SKU列表</view>
|
<view class="sku-list">
|
<view class="sku-item" v-for="(sku, index) in form.model.spec_many.spec_list" :key="index">
|
<view class="sku-info">
|
<text v-for="(row, rowIdx) in sku.rows" :key="rowIdx">{{ row.spec_value }}{{ rowIdx < sku.rows.length - 1 ? ' ' : '' }}</text>
|
</view>
|
<view class="form-item">
|
<view class="item-label">规格图片</view>
|
<view class="uploader">
|
<view class="uploader-item" v-if="sku.image && sku.image.length > 0">
|
<image :src="sku.image[0]" class="uploader-image"></image>
|
<view class="uploader-delete" @click="deleteSkuImage(index)">×</view>
|
</view>
|
<view class="uploader-add" @click="handleUpload('sku', index)">+</view>
|
</view>
|
<!-- 上传组件 -->
|
<uploadOne v-if="showUploadOne && uploadType === 'sku'" @getImgs="onUploadComplete">
|
</uploadOne>
|
</view>
|
<view class="sku-inputs">
|
<input class="sku-input" v-model="sku.spec_form.product_no" placeholder="产品编码" />
|
<input class="sku-input" v-model="sku.spec_form.product_price" placeholder="产品价格"
|
type="digit" />
|
<input class="sku-input" v-model="sku.spec_form.line_price" placeholder="产品划线价"
|
type="digit" />
|
<input class="sku-input" v-model="sku.spec_form.stock_num" placeholder="库存数量"
|
type="number" />
|
<input class="sku-input" v-model="sku.spec_form.product_weight"
|
placeholder="商品重量(Kg)" type="digit" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 商品详情 -->
|
<view v-show="activeTab === 'content'" class="form-section">
|
<view class="form-item">
|
<view class="item-label">详情类型</view>
|
<view class="radio-group">
|
<view class="radio-item" :class="{ active: form.model.is_picture == 0 }"
|
@click="form.model.is_picture = 0">图文</view>
|
<view class="radio-item" :class="{ active: form.model.is_picture == 1 }"
|
@click="form.model.is_picture = 1">纯图</view>
|
</view>
|
</view>
|
|
<!-- 图文类型 -->
|
<view v-if="form.model.is_picture == 0" class="form-item">
|
<view class="item-label">商品详情</view>
|
<view class="editor">
|
<!-- 富文本编辑器 -->
|
<view class='wrapper'>
|
<view class='toolbar' @tap="format" style="height: 160px;overflow-y: auto;">
|
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu"
|
data-name="bold">
|
</view>
|
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
|
data-name="italic">
|
</view>
|
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
|
data-name="underline"></view>
|
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
|
data-name="strike"></view>
|
<!-- #ifndef MP-BAIDU -->
|
<view :class="formats.align === 'left' ? 'ql-active' : ''"
|
class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
|
<!-- #endif -->
|
<view :class="formats.align === 'center' ? 'ql-active' : ''"
|
class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
|
<view :class="formats.align === 'right' ? 'ql-active' : ''"
|
class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
|
<view :class="formats.align === 'justify' ? 'ql-active' : ''"
|
class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
|
<!-- #ifndef MP-BAIDU -->
|
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
|
data-name="lineHeight" data-value="2"></view>
|
<view :class="formats.letterSpacing ? 'ql-active' : ''"
|
class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em">
|
</view>
|
<view :class="formats.marginTop ? 'ql-active' : ''"
|
class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"
|
data-value="20px"></view>
|
<view :class="formats.marginBottom ? 'ql-active' : ''"
|
class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom"
|
data-value="20px"></view>
|
<!-- #endif -->
|
|
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
|
<!-- #ifndef MP-BAIDU -->
|
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
|
data-name="fontFamily" data-value="Pacifico"></view>
|
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''"
|
class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view>
|
<!-- #endif -->
|
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''"
|
class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
|
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
|
class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00">
|
</view>
|
<view class="iconfont icon-date" @tap="insertDate"></view>
|
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
|
<view :class="formats.list === 'ordered' ? 'ql-active' : ''"
|
class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
|
<view :class="formats.list === 'bullet' ? 'ql-active' : ''"
|
class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
|
|
<view class="iconfont icon-undo" @tap="undo"></view>
|
<view class="iconfont icon-redo" @tap="redo"></view>
|
|
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
<view :class="formats.header === 1 ? 'ql-active' : ''"
|
class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
|
<view :class="formats.script === 'sub' ? 'ql-active' : ''"
|
class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
|
<view :class="formats.script === 'super' ? 'ql-active' : ''"
|
class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
|
|
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
|
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
|
class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
|
</view>
|
|
<view class="editor-wrapper">
|
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size
|
show-img-toolbar show-img-resize @statuschange="onStatusChange"
|
:read-only="readOnly" @ready="onEditorReady">
|
</editor>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 纯图类型 -->
|
<view v-else-if="form.model.is_picture == 1" class="form-item">
|
<view class="item-label">商品详情图片</view>
|
<view class="uploader">
|
<view class="uploader-item" v-for="(item, index) in form.model.contentImage" :key="index">
|
<image :src="item.file_path" class="uploader-image"></image>
|
<view class="uploader-delete" @click="deleteContentImage(index)">×</view>
|
</view>
|
<view class="uploader-add" @click="handleUpload('content')">+</view>
|
</view>
|
<view class="editor-tips">提示：最多上传20张图片</view>
|
<!-- 上传组件 -->
|
<upload v-if="showUpload && uploadType === 'content'"
|
:isupload="showUpload && uploadType === 'content'" :num="20 - form.model.contentImage.length"
|
@getImgs="onUploadComplete"></upload>
|
</view>
|
</view>
|
|
<!-- 高级设置 -->
|
<view v-show="activeTab === 'buyset'" class="form-section">
|
|
<!-- 积分设置 -->
|
<view class="form-item">
|
<view class="item-label">积分设置</view>
|
<view class="switch-item">
|
<view class="switch-label">开启积分赠送</view>
|
<switch :checked="form.model.is_points_gift" v-model="form.model.is_points_gift" />
|
</view>
|
<view class="switch-item">
|
<view class="switch-label">允许积分抵扣</view>
|
<switch v-model="form.model.is_points_discount" />
|
</view>
|
<view class="form-item-inner" v-if="form.model.is_points_discount">
|
<view class="inner-label">最大积分抵扣数量</view>
|
<input class="inner-input" v-model="form.model.max_points_discount" placeholder="请输入最大积分抵扣数量"
|
type="number" />
|
</view>
|
</view>
|
<!-- 分销设置 -->
|
<view class="form-item">
|
<view class="item-label">团队分红设置</view>
|
<view class="switch-item">
|
<view class="switch-label">是否参与团队分红</view>
|
<switch :checked="form.model.is_enable_team==1?true:false" v-model="form.model.is_enable_team" />
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
|
<!-- 底部操作栏 -->
|
<view class="bottom-bar">
|
<view class="bar-item" @click="back">返回</view>
|
<view class="bar-item save-btn" @click="save">保存</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Upload from '@/components/upload/upload.vue';
|
import UploadOne from '@/components/upload/uploadOne.vue';
|
export default {
|
components: {
|
Upload,
|
UploadOne
|
},
|
data() {
|
const now = new Date();
|
return {
|
activeTab: 'basic',
|
loading: false,
|
productId: '',
|
categoryIndex: 0,
|
deliveryIndex: 0,
|
// 预告时间相关
|
previewTimeArray: [now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes()],
|
previewTime: '',
|
previewTimeText: '',
|
// 核销时间相关
|
verifyTimeArray: [],
|
verifyTimeText: '',
|
// 富文本编辑器相关
|
editorCtx: null,
|
editorStatus: {},
|
// 上传组件控制
|
showUpload: false,
|
showUploadOne: false,
|
// 当前操作的类型和索引
|
uploadType: '', // image, video, poster, sku, content
|
currentSkuIndex: -1,
|
form: {
|
model: {
|
scene: 'edit',
|
product_name: '',
|
product_no: '',
|
category_id: null,
|
image: [],
|
is_picture: 0,
|
contentImage: [],
|
video_id: 0,
|
video: {},
|
poster_id: 0,
|
poster: {},
|
selling_point: '',
|
spec_type: 10,
|
deduct_stock_type: 20,
|
is_picture: 0,
|
sku: {
|
product_no: '',
|
product_price: '',
|
line_price: '',
|
stock_num: 0,
|
product_weight: 0,
|
bar_code: ''
|
},
|
spec_many: {
|
spec_attr: [],
|
spec_list: []
|
},
|
content: '',
|
notice: '',
|
is_delivery_free: 0,
|
delivery_id: '',
|
product_status: 10,
|
audit_status: 0,
|
product_sort: 100,
|
is_points_gift: 1,
|
is_points_discount: 1,
|
max_points_discount: 0,
|
is_agent: 0,
|
is_enable_team: 1,
|
is_ind_agent: 0,
|
agent_money_type: 10,
|
first_money: 0,
|
second_money: 0,
|
third_money: 0,
|
is_virtual: 0,
|
limit_num: 0,
|
deduction_price: 0,
|
virtual_auto: 0,
|
virtual_content: '',
|
service_content: '',
|
is_preview: 0,
|
preview_time: '',
|
is_verify: 0,
|
verify_type: 10,
|
verify_day: '',
|
verify_time: [],
|
verify_store_ids: [],
|
},
|
category: [],
|
delivery: [],
|
gradeList: [],
|
specData: null,
|
isSpecLocked: false,
|
basicSetting: {},
|
agentSetting: {},
|
audit_setting: {},
|
verifyStoreList: [],
|
},
|
selectedCategory: '',
|
selectedDelivery: ''
|
};
|
},
|
onLoad(option) {
|
this.productId = option.product_id;
|
this.getBaseData();
|
this.getProductData();
|
},
|
methods: {
|
// 返回上一页
|
back() {
|
uni.navigateBack();
|
},
|
|
// 切换标签页
|
switchTab(tab) {
|
this.activeTab = tab;
|
},
|
|
// 获取基础数据
|
getBaseData() {
|
let self = this;
|
self.loading = true;
|
self._post('supplier.product/getBaseData', {}, (res) => {
|
if (res.code === 0) {
|
Object.assign(self.form, res.data);
|
}
|
self.loading = false;
|
});
|
},
|
|
// 获取商品数据
|
getProductData() {
|
let self = this;
|
self.loading = true;
|
self._post('supplier.product/getEditData', {
|
product_id: self.productId
|
}, (res) => {
|
// 合并默认值和后端返回的数据，确保 spec_many 字段始终存在
|
Object.assign(self.form, res.data);
|
self.form.model = Object.assign({
|
spec_many: {
|
spec_attr: [],
|
spec_list: []
|
}
|
}, res.data.model);
|
|
// 处理单规格商品的 sku 字段，后端返回的是数组，前端需要对象
|
if (self.form.model.spec_type === 10 && Array.isArray(self.form.model.sku) && self.form.model.sku.length > 0) {
|
self.form.model.sku = self.form.model.sku[0];
|
}
|
self.form.model.product_status = res.data.model.product_status.value;
|
if(self.form.model.delivery_id == 0){
|
self.$set(self.form.model, 'is_delivery_free', 0);
|
}else{
|
self.$set(self.form.model, 'is_delivery_free', 1);
|
}
|
if(self.form.model.notice == null){
|
self.form.model.notice = [];
|
}
|
//修改时审核状态
|
if(self.form.audit_setting.edit_audit == 1 && self.form.scene != 'add'){
|
self.form.model.audit_status = 0;
|
}
|
if (self.form.model.content) {
|
setTimeout(function(){
|
self.editorCtx.setContents({
|
html: self.form.model.content
|
});
|
},1000)
|
}
|
// 设置分类索引
|
self.categoryIndex = self.form.category.findIndex(item => item.category_id === self.form
|
.model.category_id);
|
self.selectedCategory = self.form.category[self.categoryIndex]?.name;
|
// 设置运费模板索引
|
self.deliveryIndex = self.form.delivery.findIndex(item => item.delivery_id === self.form
|
.model.delivery_id);
|
self.selectedDelivery = self.form.delivery[self.deliveryIndex]?.name;
|
// 设置预告时间
|
if (self.form.model.is_preview === 1 && self.form.model.preview_time) {
|
const previewDate = new Date(self.form.model.preview_time * 1000);
|
self.previewTime = previewDate.toISOString().slice(0, 16);
|
self.previewTimeText = self.previewTime;
|
}
|
self.loading = false;
|
});
|
},
|
|
// 选择商品分类
|
categoryChange(e) {
|
const index = e.detail.value;
|
this.form.model.category_id = this.form.category[index].category_id;
|
this.selectedCategory = this.form.category[index].category_name;
|
},
|
|
// 选择图片
|
chooseImage() {
|
uni.chooseImage({
|
count: 9 - this.form.model.image.length,
|
success: (res) => {
|
this.form.model.image = [...this.form.model.image, ...res.tempFilePaths];
|
}
|
});
|
},
|
|
// 删除图片
|
deleteImage(index) {
|
this.form.model.image.splice(index, 1);
|
},
|
|
// 选择运费模板
|
deliveryChange(e) {
|
const index = e.detail.value;
|
this.form.model.delivery_id = this.form.delivery[index].delivery_id;
|
this.selectedDelivery = this.form.delivery[index].name;
|
this.deliveryIndex = index;
|
},
|
|
// 选择预告时间
|
previewTimeChange(e) {
|
const date = new Date(e.detail.value);
|
this.form.model.preview_time = Math.floor(date.getTime() / 1000);
|
this.previewTime = e.detail.value;
|
this.previewTimeText = e.detail.value;
|
},
|
|
// 选择视频
|
chooseVideo() {
|
uni.chooseVideo({
|
count: 1,
|
success: (res) => {
|
// 这里需要调用上传接口，暂时使用本地路径
|
this.form.model.video = {
|
file_path: res.tempFilePath
|
};
|
this.form.model.video_id = 1; // 模拟上传成功后的id
|
}
|
});
|
},
|
|
// 删除视频
|
deleteVideo() {
|
this.form.model.video = {};
|
this.form.model.video_id = 0;
|
},
|
|
// 选择视频封面
|
choosePoster() {
|
uni.chooseImage({
|
count: 1,
|
success: (res) => {
|
// 这里需要调用上传接口，暂时使用本地路径
|
this.form.model.poster = {
|
file_path: res.tempFilePaths[0]
|
};
|
this.form.model.poster_id = 1; // 模拟上传成功后的id
|
}
|
});
|
},
|
|
// 删除视频封面
|
deletePoster() {
|
this.form.model.poster = {};
|
this.form.model.poster_id = 0;
|
},
|
|
// 选择核销时间
|
verifyTimeChange(e) {
|
const startDate = new Date(e.detail.value[0]);
|
const endDate = new Date(e.detail.value[1]);
|
this.form.model.verify_time = [
|
startDate.toISOString().slice(0, 10),
|
endDate.toISOString().slice(0, 10)
|
];
|
this.verifyTimeText =
|
`${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}-${startDate.getDate().toString().padStart(2, '0')} 至 ${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')}`;
|
},
|
|
// 选择SKU图片
|
chooseSkuImage(index) {
|
uni.chooseImage({
|
count: 1,
|
success: (res) => {
|
// 这里需要调用上传接口，暂时使用本地路径
|
this.form.model.spec_many.spec_list[index].image = res.tempFilePaths;
|
}
|
});
|
},
|
|
// 删除SKU图片
|
deleteSkuImage(index) {
|
this.form.model.spec_many.spec_list[index].image = [];
|
},
|
|
// 选择详情图片
|
chooseContentImage() {
|
uni.chooseImage({
|
count: 20 - this.form.model.contentImage.length,
|
success: (res) => {
|
// 这里需要调用上传接口，暂时使用本地路径
|
this.form.model.contentImage = [...this.form.model.contentImage, ...res.tempFilePaths];
|
}
|
});
|
},
|
|
// 删除详情图片
|
deleteContentImage(index) {
|
this.form.model.contentImage.splice(index, 1);
|
},
|
|
// 富文本编辑器相关
|
onEditorReady() {
|
// #ifdef MP-BAIDU
|
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
|
// #endif
|
|
// #ifdef APP-PLUS || MP-WEIXIN || H5
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
this.editorCtx = res.context
|
}).exec()
|
// #endif
|
},
|
undo() {
|
this.editorCtx.undo()
|
},
|
redo() {
|
this.editorCtx.redo()
|
},
|
format(e) {
|
let {
|
name,
|
value
|
} = e.target.dataset
|
if (!name) return
|
this.editorCtx.format(name, value)
|
},
|
onStatusChange(e) {
|
const formats = e.detail
|
this.editorStatus = formats
|
},
|
insertDivider() {
|
this.editorCtx.insertDivider({
|
success: function() {
|
console.log('insert divider success')
|
}
|
})
|
},
|
clear() {
|
uni.showModal({
|
title: '清空编辑器',
|
content: '确定清空编辑器全部内容？',
|
success: res => {
|
if (res.confirm) {
|
this.editorCtx.clear({
|
success: function(res) {
|
console.log("clear success")
|
}
|
})
|
}
|
}
|
})
|
},
|
removeFormat() {
|
this.editorCtx.removeFormat()
|
},
|
insertDate() {
|
const date = new Date()
|
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
this.editorCtx.insertText({
|
text: formatDate
|
})
|
},
|
insertImage() {
|
uni.chooseImage({
|
count: 1,
|
success: (res) => {
|
this.editorCtx.insertImage({
|
src: res.tempFilePaths[0],
|
alt: '图像',
|
success: function() {
|
console.log('insert image success')
|
}
|
})
|
}
|
})
|
},
|
|
// 添加规格属性
|
addSpecAttr() {
|
uni.showModal({
|
title: '添加规格属性',
|
content: '请输入规格名称',
|
editable: true,
|
placeholderText: '例如：颜色',
|
success: (res) => {
|
if (res.confirm && res.content.trim()) {
|
const specName = res.content.trim();
|
// 继续输入第一个规格值
|
uni.showModal({
|
title: '添加第一个规格值',
|
content: '',
|
editable: true,
|
placeholderText: '例如：红色',
|
success: (valueRes) => {
|
if (valueRes.confirm && valueRes.content.trim()) {
|
const specValue = valueRes.content.trim();
|
// 调用API添加规格组和第一个规格值
|
this._post('supplier.product.spec/addSpec', {
|
spec_name: specName,
|
spec_value: specValue
|
}, (response) => {
|
if (response.code === 1 && response.data) {
|
this.form.model.spec_many.spec_attr.push({
|
group_id: response.data.spec_id,
|
name: specName,
|
values: [specValue],
|
items: [{
|
item_id: response.data.spec_value_id,
|
spec_value: specValue
|
}]
|
});
|
// 生成SKU列表
|
this.generateSkuList();
|
uni.showToast({
|
title: '添加成功',
|
icon: 'success'
|
});
|
} else {
|
uni.showToast({
|
title: response.msg || '添加失败',
|
icon: 'none'
|
});
|
}
|
});
|
} else if (valueRes.confirm) {
|
uni.showToast({
|
title: '请输入规格值',
|
icon: 'none'
|
});
|
}
|
}
|
});
|
}
|
}
|
});
|
},
|
|
// 删除规格属性
|
deleteSpecAttr(index) {
|
this.form.model.spec_many.spec_attr.splice(index, 1);
|
// 重新生成SKU列表
|
this.generateSkuList();
|
},
|
|
// 添加规格值
|
addSpecValue(attrIndex) {
|
uni.showModal({
|
title: '添加规格值',
|
content: '请输入规格值',
|
editable: true,
|
placeholderText: '例如：红色',
|
success: (res) => {
|
if (res.confirm && res.content.trim()) {
|
const specValue = res.content.trim();
|
const attr = this.form.model.spec_many.spec_attr[attrIndex];
|
// 调用API添加规格值
|
this._post('supplier.product.spec/addSpecValue', {
|
spec_id: attr.group_id,
|
spec_value: specValue
|
}, (response) => {
|
if (response.code === 1 && response.data) {
|
attr.values.push(specValue);
|
attr.items.push({
|
item_id: response.data.spec_value_id,
|
spec_value: specValue
|
});
|
// 重新生成SKU列表
|
this.generateSkuList();
|
uni.showToast({
|
title: '添加成功',
|
icon: 'success'
|
});
|
} else {
|
uni.showToast({
|
title: response.msg || '添加失败',
|
icon: 'none'
|
});
|
}
|
});
|
}
|
}
|
});
|
},
|
|
// 删除规格值
|
deleteSpecValue(attrIndex, valueIndex) {
|
const attr = this.form.model.spec_many.spec_attr[attrIndex];
|
attr.values.splice(valueIndex, 1);
|
if (attr.items && attr.items.length > valueIndex) {
|
|
attr.items.splice(valueIndex, 1);
|
}
|
// 重新生成SKU列表
|
this.generateSkuList();
|
},
|
|
// 生成SKU列表
|
generateSkuList() {
|
const attrs = this.form.model.spec_many.spec_attr;
|
if (attrs.length === 0) {
|
this.form.model.spec_many.spec_list = [];
|
return;
|
}
|
|
// 生成所有可能的组合
|
const combinations = this.getCombinations(attrs);
|
|
// 生成SKU列表
|
const skuList = combinations.map(comb => {
|
const rows = [];
|
const specSkuIdAttr = [];
|
|
comb.forEach((val, idx) => {
|
const attr = attrs[idx];
|
// 查找对应的 item_id
|
const itemIndex = attr.values.indexOf(val);
|
const itemId = (attr.items && attr.items[itemIndex]) ? attr.items[itemIndex].item_id : 0;
|
|
rows.push({
|
item_id: itemId,
|
spec_value: val
|
});
|
specSkuIdAttr.push(itemId);
|
});
|
|
const spec_sku_id = specSkuIdAttr.join('_');
|
|
return {
|
product_sku_id: 0,
|
spec_sku_id,
|
rows,
|
image: [],
|
spec_form: {
|
product_no: '',
|
product_price: '',
|
line_price: '',
|
stock_num: '',
|
product_weight: '',
|
bar_code: ''
|
}
|
};
|
});
|
|
this.form.model.spec_many.spec_list = skuList;
|
},
|
|
// 获取规格值组合
|
getCombinations(attrs) {
|
if (attrs.length === 0) return [
|
[]
|
];
|
|
const firstAttr = attrs[0];
|
const remainingAttrs = attrs.slice(1);
|
const remainingCombinations = this.getCombinations(remainingAttrs);
|
|
const result = [];
|
for (const value of firstAttr.values) {
|
for (const combination of remainingCombinations) {
|
result.push([value, ...combination]);
|
}
|
}
|
|
return result;
|
},
|
|
// 处理上传
|
handleUpload(type, index = -1) {
|
this.uploadType = type;
|
if (type === 'image' || type === 'content' || type === 'video') {
|
this.showUpload = true;
|
} else {
|
this.showUploadOne = true;
|
}
|
// 记录当前操作的SKU索引
|
this.currentSkuIndex = index;
|
},
|
|
// 上传完成回调
|
onUploadComplete(res) {
|
// 关闭上传组件
|
this.showUpload = false;
|
this.showUploadOne = false;
|
|
if (!res || res.length === 0) return;
|
|
// 根据上传类型处理结果
|
switch (this.uploadType) {
|
case 'image':
|
// 商品图片，多个文件
|
res.forEach(item => {
|
this.form.model.image.push(item.file_path);
|
});
|
break;
|
case 'video':
|
// 商品视频，单个文件
|
this.form.model.video = res[0];
|
this.form.model.video_id = res[0].id || 1;
|
break;
|
case 'poster':
|
// 视频封面，单个文件
|
this.form.model.poster = res[0];
|
this.form.model.poster_id = res[0].id || 1;
|
break;
|
case 'sku':
|
// SKU图片，单个文件
|
if (this.currentSkuIndex !== -1) {
|
this.form.model.spec_many.spec_list[this.currentSkuIndex].image = [res[0].file_path];
|
}
|
break;
|
case 'content':
|
// 详情图片，多个文件
|
res.forEach(item => {
|
this.form.model.contentImage.push(item.file_path);
|
});
|
break;
|
}
|
},
|
|
// 保存商品
|
save() {
|
let self = this;
|
// 先获取富文本编辑器内容
|
if (self.form.model.is_picture == 0 && self.editorCtx) {
|
// 图文类型，获取编辑器内容
|
self.editorCtx.getContents({
|
success: (res) => {
|
// 将编辑器内容赋值给表单字段
|
self.form.model.content = res.html;
|
// 继续执行保存逻辑
|
self.doSave();
|
},
|
fail: () => {
|
// 获取内容失败，继续执行保存逻辑
|
self.doSave();
|
}
|
});
|
return;
|
} else {
|
// 非图文类型或编辑器未初始化，直接执行保存逻辑
|
self.doSave();
|
}
|
},
|
|
// 实际保存逻辑
|
doSave() {
|
let self = this;
|
// 表单验证
|
if (!self.form.model.product_name) {
|
uni.showToast({
|
title: '请输入商品名称',
|
icon: 'none'
|
});
|
return;
|
}
|
|
if (!self.form.model.category_id) {
|
uni.showToast({
|
title: '请选择商品分类',
|
icon: 'none'
|
});
|
return;
|
}
|
|
if (self.form.model.image.length === 0) {
|
uni.showToast({
|
title: '请上传商品图片',
|
icon: 'none'
|
});
|
return;
|
}
|
|
// 规格库存验证
|
if (self.form.model.spec_type === 10) {
|
// 单规格验证
|
if (!self.form.model.sku.product_price || parseFloat(self.form.model.sku.product_price) <= 0) {
|
uni.showToast({
|
title: '请输入有效的商品价格',
|
icon: 'none'
|
});
|
return;
|
}
|
|
if (!self.form.model.sku.stock_num || parseInt(self.form.model.sku.stock_num) < 0) {
|
uni.showToast({
|
title: '请输入有效的库存数量',
|
icon: 'none'
|
});
|
return;
|
}
|
} else {
|
// 多规格验证
|
if (self.form.model.spec_many.spec_attr.length === 0) {
|
uni.showToast({
|
title: '请添加规格属性',
|
icon: 'none'
|
});
|
return;
|
}
|
|
for (let i = 0; i < self.form.model.spec_many.spec_list.length; i++) {
|
const sku = self.form.model.spec_many.spec_list[i];
|
if (!sku.spec_form.product_price || parseFloat(sku.spec_form.product_price) <= 0) {
|
uni.showToast({
|
title: '请输入有效的SKU价格',
|
icon: 'none'
|
});
|
return;
|
}
|
|
if (!sku.spec_form.stock_num || parseInt(sku.spec_form.stock_num) < 0) {
|
uni.showToast({
|
title: '请输入有效的SKU库存',
|
icon: 'none'
|
});
|
return;
|
}
|
}
|
}
|
|
// 根据详情类型验证内容
|
if (self.form.model.is_picture == 0) {
|
// 图文类型，验证富文本内容
|
if (!self.form.model.content || self.form.model.content.trim() === '') {
|
uni.showToast({
|
title: '请输入商品详情',
|
icon: 'none'
|
});
|
return;
|
}
|
} else if (self.form.model.is_picture == 1) {
|
// 纯图类型，验证详情图片
|
if (self.form.model.contentImage.length === 0) {
|
uni.showToast({
|
title: '请上传商品详情图片',
|
icon: 'none'
|
});
|
return;
|
}
|
}
|
|
// 转换spec_attr数据格式为后端期望的格式
|
let submitData = JSON.parse(JSON.stringify(self.form.model));
|
if (submitData.spec_type == 20 && submitData.spec_many && submitData.spec_many.spec_attr) {
|
submitData.spec_many.spec_attr = submitData.spec_many.spec_attr.map(attr => {
|
return {
|
group_id: attr.group_id || 0,
|
name: attr.name,
|
spec_items: attr.values.map((val, idx) => ({
|
item_id: (attr.items && attr.items[idx] && attr.items[idx].item_id) ? attr.items[idx].item_id : 0,
|
spec_value: val
|
}))
|
};
|
});
|
}
|
|
self.loading = true;
|
self._post('supplier.product/edit', {
|
product_id: self.productId,
|
params: JSON.stringify(submitData)
|
}, (res) => {
|
if (res.code === 1) {
|
uni.showToast({
|
title: '保存成功'
|
});
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
} else {
|
uni.showToast({
|
title: res.msg || '保存失败',
|
icon: 'none'
|
});
|
}
|
self.loading = false;
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.product-edit {
|
background-color: #f2f2f2;
|
min-height: 100vh;
|
padding-bottom: 100rpx;
|
/* 为底部操作栏留出空间 */
|
}
|
|
/* 底部操作栏 */
|
.bottom-bar {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 100rpx;
|
background-color: #fff;
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
z-index: 999;
|
}
|
|
.bar-item {
|
flex: 1;
|
height: 60rpx;
|
line-height: 60rpx;
|
text-align: center;
|
font-size: 28rpx;
|
border-radius: 30rpx;
|
margin: 0 10rpx;
|
}
|
|
.bar-item:first-child {
|
border: 1rpx solid #e0e0e0;
|
color: #666;
|
}
|
|
.save-btn {
|
background-color: #e62423;
|
color: #fff;
|
font-weight: bold;
|
}
|
|
.top-nav {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 88rpx;
|
background-color: #fff;
|
padding: 0 30rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
z-index: 999;
|
}
|
|
.nav-item {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.nav-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.tab-bar {
|
background-color: #fff;
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
z-index: 998;
|
}
|
|
.tab-scroll {
|
display: flex;
|
white-space: nowrap;
|
padding: 0 20rpx;
|
}
|
|
.tab-item {
|
display: inline-block;
|
padding: 20rpx 30rpx;
|
font-size: 28rpx;
|
color: #666;
|
position: relative;
|
height: auto;
|
}
|
|
.tab-item.active {
|
color: #e62423;
|
}
|
|
.tab-item.active::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 40rpx;
|
height: 4rpx;
|
background-color: #e62423;
|
border-radius: 2rpx;
|
}
|
|
.form-scroll {
|
padding-top: 80rpx;
|
padding-bottom: 20rpx;
|
}
|
|
.form-section {
|
background-color: #fff;
|
margin-bottom: 20rpx;
|
padding: 0 30rpx;
|
}
|
|
.form-item {
|
padding: 30rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
}
|
|
.form-item:last-child {
|
border-bottom: none;
|
}
|
|
.item-label {
|
font-size: 28rpx;
|
color: #333;
|
margin-bottom: 20rpx;
|
}
|
|
.item-input {
|
width: 100%;
|
height: 80rpx;
|
border: 1rpx solid #e0e0e0;
|
border-radius: 10rpx;
|
padding: 0 20rpx;
|
font-size: 28rpx;
|
box-sizing: border-box;
|
}
|
|
.item-textarea {
|
width: 100%;
|
border: 1rpx solid #e0e0e0;
|
border-radius: 10rpx;
|
padding: 20rpx;
|
font-size: 28rpx;
|
box-sizing: border-box;
|
min-height: 120rpx;
|
}
|
|
.item-editor {
|
width: 100%;
|
height: 500rpx;
|
border: 1rpx solid #e0e0e0;
|
border-radius: 10rpx;
|
box-sizing: border-box;
|
font-size: 28rpx;
|
}
|
|
.item-picker {
|
width: 100%;
|
height: 80rpx;
|
border: 1rpx solid #e0e0e0;
|
border-radius: 10rpx;
|
padding: 0 20rpx;
|
font-size: 28rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.picker-text {
|
color: #666;
|
}
|
|
.uploader {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20rpx;
|
}
|
|
.uploader-item {
|
position: relative;
|
width: 160rpx;
|
height: 160rpx;
|
}
|
|
.uploader-image {
|
width: 100%;
|
height: 100%;
|
border-radius: 10rpx;
|
}
|
|
.uploader-delete {
|
position: absolute;
|
top: -10rpx;
|
right: -10rpx;
|
width: 40rpx;
|
height: 40rpx;
|
background-color: rgba(0, 0, 0, 0.5);
|
color: #fff;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 32rpx;
|
}
|
|
.uploader-add {
|
width: 160rpx;
|
height: 160rpx;
|
border: 2rpx dashed #e0e0e0;
|
border-radius: 10rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 64rpx;
|
color: #999;
|
}
|
|
.radio-group {
|
display: flex;
|
gap: 15rpx;
|
flex-wrap: wrap;
|
}
|
|
.radio-item {
|
padding: 15rpx 30rpx;
|
border: 2rpx solid #e0e0e0;
|
border-radius: 50rpx;
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.radio-item.active {
|
border-color: #e62423;
|
color: #e62423;
|
background-color: rgba(230, 36, 35, 0.1);
|
}
|
|
.switch-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
}
|
|
.switch-item:last-child {
|
margin-bottom: 0;
|
}
|
|
.switch-label {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
/* 规格管理样式 */
|
.spec-attrs {
|
margin-top: 20rpx;
|
}
|
|
.spec-attr {
|
margin-bottom: 30rpx;
|
padding: 20rpx;
|
background-color: #f9f9f9;
|
border-radius: 10rpx;
|
}
|
|
.attr-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
}
|
|
.attr-name {
|
font-size: 28rpx;
|
color: #333;
|
font-weight: bold;
|
}
|
|
.attr-delete {
|
width: 40rpx;
|
height: 40rpx;
|
background-color: #ff4d4f;
|
color: #fff;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 32rpx;
|
}
|
|
.attr-values {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 15rpx;
|
}
|
|
.attr-value {
|
display: flex;
|
align-items: center;
|
padding: 10rpx 20rpx;
|
background-color: #fff;
|
border: 1rpx solid #e0e0e0;
|
border-radius: 20rpx;
|
font-size: 26rpx;
|
}
|
|
.value-delete {
|
margin-left: 10rpx;
|
color: #ff4d4f;
|
font-size: 24rpx;
|
}
|
|
.attr-add-value {
|
margin-top: 15rpx;
|
padding: 10rpx 20rpx;
|
background-color: #e6f7ff;
|
color: #1890ff;
|
border-radius: 20rpx;
|
font-size: 26rpx;
|
text-align: center;
|
width: 120rpx;
|
}
|
|
.add-spec-attr {
|
margin-top: 20rpx;
|
padding: 15rpx;
|
background-color: #f0f9eb;
|
color: #52c41a;
|
border-radius: 10rpx;
|
font-size: 26rpx;
|
text-align: center;
|
}
|
|
/* SKU列表样式 */
|
.sku-list {
|
margin-top: 20rpx;
|
}
|
|
.sku-item {
|
margin-bottom: 20rpx;
|
padding: 20rpx;
|
background-color: #f9f9f9;
|
border-radius: 10rpx;
|
}
|
|
.sku-info {
|
font-size: 26rpx;
|
color: #666;
|
margin-bottom: 15rpx;
|
}
|
|
.sku-inputs {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20rpx;
|
}
|
|
.sku-input {
|
width: calc(50% - 10rpx);
|
height: 70rpx;
|
border: 1rpx solid #e0e0e0;
|
border-radius: 8rpx;
|
padding: 0 15rpx;
|
font-size: 26rpx;
|
box-sizing: border-box;
|
}
|
|
/* 商品详情样式 */
|
.editor {
|
position: relative;
|
}
|
|
.editor-tips {
|
margin-top: 10rpx;
|
font-size: 24rpx;
|
color: #999;
|
}
|
|
/* 表单提示 */
|
.form-tips {
|
margin-top: 10rpx;
|
font-size: 24rpx;
|
color: #999;
|
}
|
|
/* 视频样式 */
|
.uploader-video {
|
width: 100%;
|
height: 200rpx;
|
border-radius: 10rpx;
|
}
|
|
/* 高级设置样式 */
|
.form-item-inner {
|
margin-top: 20rpx;
|
padding-left: 40rpx;
|
}
|
|
.inner-label {
|
font-size: 26rpx;
|
color: #666;
|
margin-bottom: 15rpx;
|
display: block;
|
}
|
|
.inner-input {
|
width: 100%;
|
height: 70rpx;
|
border: 1rpx solid #e0e0e0;
|
border-radius: 8rpx;
|
padding: 0 15rpx;
|
font-size: 26rpx;
|
box-sizing: border-box;
|
}
|
|
@font-face {
|
font-family: iconfont;
|
src: url("data:font/truetype;charset=utf-8;base64,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AAsAJgFuAAoAQwByAGUAYQB0AGUAZAAgAGIAeQAgAGkAYwBvAG4AZgBvAG4AdAAKAAAKQ3JlYXRlZCBieSBpY29uZm9udAoAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AAEdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC4AAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAGh0dHA6Ly9mb250ZWxsby5jb20AAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAAEAAgECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4BHwEgASEBIgEjASQBJQEmAScBKAEpASoBKwEsAS0BLgEvATABMQEyATMBNAE1ATYBNwE4ATkEcmVkbwlzZWxlY3RhbGwHcHJldmlldwR1bmRvBGRhdGUHY2xlYXJ1cBU3MjNiaWFuamlxaV9kdWFuaG91anUWNzIyYmlhbmppcWlfZHVhbnFpYW5qdQotY2hlY2tsaXN0DWRpcmVjdGlvbi1sdHINZGlyZWN0aW9uLXJ0bAtmb250Ymdjb2xvcg1jbGVhcmVkZm9ybWF0BGZvbnQHb3V0ZGVudAhmb250c2l6ZQp0ZXh0X2NvbG9yD2Zvcm1hdC1oZWFkZXItMg9mb3JtYXQtaGVhZGVyLTMLbGluZS1oZWlnaHQPZm9ybWF0LWhlYWRlci0xD2Zvcm1hdC1oZWFkZXItNA9mb3JtYXQtaGVhZGVyLTUPZm9ybWF0LWhlYWRlci02EUNoYXJhY3Rlci1TcGFjaW5nBmluZGVudAZiYW9jdW4IcXVhbnBpbmcFZnV6aGkHc2hhbmNodQxiaWFuamlzZWt1YWkJZmVuZ2V4aWFuB2RpYW56YW4MY2hhcnVsaWFuamllC2NoYXJ1dHVwaWFuCnd1eHVwYWlsaWUManV6aG9uZ2R1aXFpB3lpbnlvbmcLeW91eHVwYWlsaWUIeW91ZHVpcWkJeml0aWRhaW1hCHhpYW9saWFuCXppdGlqaWFjdQ96aXRpc2hhbmNodXhpYW4Neml0aXNoYW5nYmlhbwp6aXRpYmlhb3RpDnppdGl4aWFodWF4aWFuCXppdGl4aWV0aQl6aXRpeWFuc2UIenVvZHVpcWkJeml0aXl1bGFuC3ppdGl4aWFiaWFvC3p1b3lvdWR1aXFpB2R1aWdvdXgGZ3VhbmJpDnNoZW5neWluX3NoaXRpAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwA6AAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAANhk6GIAAAAA2GToYg==") format("truetype");
|
font-weight: 400;
|
font-style: normal;
|
font-display: swap
|
}
|
|
.iconfont {
|
font-family: iconfont !important;
|
font-size: 16px;
|
font-style: normal;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale
|
}
|
|
.icon-redo:before {
|
content: "\e627"
|
}
|
|
.icon-undo:before {
|
content: "\e633"
|
}
|
|
.icon-indent:before {
|
content: "\eb28"
|
}
|
|
.icon-outdent:before {
|
content: "\e6e8"
|
}
|
|
.icon-fontsize:before {
|
content: "\e6fd"
|
}
|
|
.icon-format-header-1:before {
|
content: "\e860"
|
}
|
|
.icon-format-header-4:before {
|
content: "\e863"
|
}
|
|
.icon-format-header-5:before {
|
content: "\e864"
|
}
|
|
.icon-format-header-6:before {
|
content: "\e865"
|
}
|
|
.icon-clearup:before {
|
content: "\e64d"
|
}
|
|
.icon-preview:before {
|
content: "\e631"
|
}
|
|
.icon-date:before {
|
content: "\e63e"
|
}
|
|
.icon-fontbgcolor:before {
|
content: "\e678"
|
}
|
|
.icon-clearedformat:before {
|
content: "\e67e"
|
}
|
|
.icon-font:before {
|
content: "\e684"
|
}
|
|
.icon-723bianjiqi_duanhouju:before {
|
content: "\e65f"
|
}
|
|
.icon-722bianjiqi_duanqianju:before {
|
content: "\e660"
|
}
|
|
.icon-text_color:before {
|
content: "\e72c"
|
}
|
|
.icon-format-header-2:before {
|
content: "\e75c"
|
}
|
|
.icon-format-header-3:before {
|
content: "\e75d"
|
}
|
|
.icon--checklist:before {
|
content: "\e664"
|
}
|
|
.icon-baocun:before {
|
content: "\ec09"
|
}
|
|
.icon-line-height:before {
|
content: "\e7f8"
|
}
|
|
.icon-quanping:before {
|
content: "\ec13"
|
}
|
|
.icon-direction-rtl:before {
|
content: "\e66e"
|
}
|
|
.icon-direction-ltr:before {
|
content: "\e66d"
|
}
|
|
.icon-selectall:before {
|
content: "\e62b"
|
}
|
|
.icon-fuzhi:before {
|
content: "\ec7a"
|
}
|
|
.icon-shanchu:before {
|
content: "\ec7b"
|
}
|
|
.icon-bianjisekuai:before {
|
content: "\ec7c"
|
}
|
|
.icon-fengexian:before {
|
content: "\ec7f"
|
}
|
|
.icon-dianzan:before {
|
content: "\ec80"
|
}
|
|
.icon-charulianjie:before {
|
content: "\ec81"
|
}
|
|
.icon-charutupian:before {
|
content: "\ec82"
|
}
|
|
.icon-wuxupailie:before {
|
content: "\ec83"
|
}
|
|
.icon-juzhongduiqi:before {
|
content: "\ec84"
|
}
|
|
.icon-yinyong:before {
|
content: "\ec85"
|
}
|
|
.icon-youxupailie:before {
|
content: "\ec86"
|
}
|
|
.icon-youduiqi:before {
|
content: "\ec87"
|
}
|
|
.icon-zitidaima:before {
|
content: "\ec88"
|
}
|
|
.icon-xiaolian:before {
|
content: "\ec89"
|
}
|
|
.icon-zitijiacu:before {
|
content: "\ec8a"
|
}
|
|
.icon-zitishanchuxian:before {
|
content: "\ec8b"
|
}
|
|
.icon-zitishangbiao:before {
|
content: "\ec8c"
|
}
|
|
.icon-zitibiaoti:before {
|
content: "\ec8d"
|
}
|
|
.icon-zitixiahuaxian:before {
|
content: "\ec8e"
|
}
|
|
.icon-zitixieti:before {
|
content: "\ec8f"
|
}
|
|
.icon-zitiyanse:before {
|
content: "\ec90"
|
}
|
|
.icon-zuoduiqi:before {
|
content: "\ec91"
|
}
|
|
.icon-zitiyulan:before {
|
content: "\ec92"
|
}
|
|
.icon-zitixiabiao:before {
|
content: "\ec93"
|
}
|
|
.icon-zuoyouduiqi:before {
|
content: "\ec94"
|
}
|
|
.icon-duigoux:before {
|
content: "\ec9e"
|
}
|
|
.icon-guanbi:before {
|
content: "\eca0"
|
}
|
|
.icon-shengyin_shiti:before {
|
content: "\eca5"
|
}
|
|
.icon-Character-Spacing:before {
|
content: "\e964"
|
}
|
|
.page-body {
|
height: calc(100vh - var(--window-top) - 0px)
|
}
|
|
.wrapper {
|
height: 100%
|
}
|
|
.editor-wrapper {
|
height: calc(100vh - var(--window-top) - 0px - 80px - 46px);
|
background: #fff
|
}
|
|
.iconfont {
|
display: inline-block;
|
padding: 8px 8px;
|
width: 24px;
|
height: 24px;
|
cursor: pointer;
|
font-size: 20px
|
}
|
|
.toolbar {
|
box-sizing: border-box;
|
border-bottom: 0;
|
font-family: Helvetica Neue, Helvetica, Arial, sans-serif
|
}
|
|
.ql-container {
|
box-sizing: border-box;
|
padding: 12px 15px;
|
width: 100%;
|
min-height: 30vh;
|
height: 100%;
|
/* margin-top: 20px; */
|
font-size: 16px;
|
line-height: 1.5
|
}
|
|
.ql-active {
|
color: #06c
|
}
|
|
.iconfont {
|
color: #000000;
|
}
|
</style>
|
