cashier_admin_app/pageProduct/add-Product/add-Product.vue

2287 lines
59 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="u-p-30 safe-page min-page">
<up-sticky v-if="option.type==='edit'" offset-top="20" zIndex="99">
<my-tabs :list="tabsList" v-model="tabsCurrent"></my-tabs>
</up-sticky>
<view class="box">
<template v-if="tabsCurrent===0">
<view class="basic">
<uni-forms :model="FormData" :rules="rules" :border="true" label-position="top"
err-show-type="toast" validateTrigger="submit" label-width="350" ref="Forms">
<view class="block">
<view class="border-top-0 typeEnum">
<uni-forms-item label="商品类型" required showRequired>
<up-radio-group v-model="FormData.type" placement="row">
<up-radio v-for="(item, index) in pageData.types" :key="index"
:label="item.name" :name="item.value">
</up-radio>
</up-radio-group>
</uni-forms-item>
</view>
<view class="" v-if="FormData.type!='package'">
<uni-forms-item label="商品规格" required showRequired>
<up-radio-group v-model="FormData.typeEnum" placement="row">
<up-radio :custom-style="{marginRight:'30px'}"
v-for="(item, index) in pageData.typeEnums" :key="index" :label="item.name"
:name="item.value">
</up-radio>
</up-radio-group>
</uni-forms-item>
</view>
<view class="" v-if="FormData.type==='package'">
<uni-forms-item label="套餐商品">
<up-radio-group v-model="FormData.groupType" placement="row">
<up-radio :custom-style="{marginRight:'30px'}"
v-for="(item, index) in packageType.list" :key="index" :label="item.name"
:name="item.value">
</up-radio>
</up-radio-group>
</uni-forms-item>
</view>
<uni-forms-item required name="name" label="商品名称" showRequired>
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.name" placeholder="请输入商品名称" />
</uni-forms-item>
<uni-forms-item ref="fileItem" label="图片" required showRequired>
<my-upload-file ref="refFile" :images="FormData.images"
:imageStyles="imageStyles"></my-upload-file>
<view class="u-m-t-16 color-999 u-font-24">
注:第一张图为商品封面图图片尺寸为750x750
</view>
</uni-forms-item>
<view class=" typeEnum">
<uni-forms-item label="显示/隐藏" required showRequired>
<up-checkbox-group v-model="FormData.showType" placement="row">
<up-checkbox v-for="(item, index) in pageData.showTypes" :key="index"
:label="item.name" :name="item.value">
</up-checkbox>
</up-checkbox-group>
</uni-forms-item>
</view>
<view class="u-relative">
<uni-forms-item label="商品分类" required showRequired name="categoryId">
<uni-data-picker :clear-icon="false" :map="{text:'name',value:'id'}"
placeholder="请选择商品分类" popup-title="请选择商品分类" :localdata="pageData.category"
v-model="FormData.categoryId">
</uni-data-picker>
</uni-forms-item>
<view class="zhezhao u-absolute position-all" @click="canEditGoodsCategory(true)"
v-if="option.type=='edit'&&disabledChangeCategory">
</view>
</view>
<view class="">
<uni-forms-item label="单位" required showRequired name="units">
<uni-data-picker :clear-icon="false" @change="unitIdChange"
:map="{text:'name',value:'id'}" placeholder="请选择单位" popup-title="请选择单位"
:localdata="pageData.units" v-model="FormData.unitId">
</uni-data-picker>
</uni-forms-item>
</view>
<template v-if="FormData.type==='package'">
<!-- <view class="block border-top-0">
<uni-forms-item label="选择规格" required name="categoryId">
<uni-data-picker :clear-icon="false" @change="specIdChange"
:map="{text:'name',value:'id'}" placeholder="请选择规格" popup-title="请选择规格"
:localdata="pageData.specList" v-model="FormData.specId">
</uni-data-picker>
</uni-forms-item>
</view> -->
<view class="border-top" v-if="FormData.proGroupVo">
<view class=""
v-if=" (FormData.groupType==1&&FormData.proGroupVo.length)||(FormData.groupType==0&&FormData.proGroupVo.length&&FormData.proGroupVo[0].goods.length) ">
<view class="border-bottom u-p-b-32"
v-for="(item,index) in FormData.proGroupVo" :key="index">
<view class=" u-p-t-24" v-if="FormData.groupType==1">
<view class="u-flex u-row-between">
<view class="u-flex">
<text class="color-red">*</text>
<text class="font-bold">套餐名称</text>
</view>
<view class="u-flex color-999 " @tap="delproGroupVo(index)">
<uni-icons type="minus-filled" :size="16"
:color="color.ColorRed"></uni-icons>
<view class="u-m-l-10">删除套餐组</view>
</view>
</view>
<view class="u-flex u-m-t-16">
<up-input v-model="item.title" placeholder="请输入套餐名称"></up-input>
<view class="u-flex color-main u-font-24 u-m-l-24"
@click="proGroupVoAddGoods(index,item.goods)">
<up-icon name="plus" :size="12"
:color="color.ColorMain"></up-icon>
<view class="font-bold">添加商品</view>
</view>
</view>
</view>
<view class="u-m-t-24" v-if="item.goods.length>0">
<!-- <view class="font-bold">商品信息</view> -->
<view class=" u-font-24 table">
<view class="u-flex title">
<view class="u-flex-1 ">名称</view>
<view class="u-flex-1 u-text-center">规格</view>
<view class="u-flex-1 u-text-center">价格</view>
<view class=" u-flex-1 u-text-right">
<view class="u-p-r-40">数量</view>
</view>
</view>
<view class="u-flex row u-p-24 u-row-between"
v-for="(product,goodsIndex) in item.goods" :key="goodsIndex">
<view class=" u-flex u-flex-1">
<view class=" ">
{{product.name||product.proName}}
</view>
</view>
<view class=" u-flex u-row-center u-flex-1">
<view
@click="refChooseGuigeOpen(product.skuList,index,goodsIndex)"
class="">
<template
v-if="!product.skuName&&product.typeEnum=='多规格'">
<up-button type="primary"
size="mini">设置规格</up-button>
</template>
<template v-else>
<text class="color-main">{{product.skuName}}</text>
</template>
</view>
</view>
<view class=" u-flex u-flex-1 u-row-center">
<view class=" u-text-center ">
{{product.lowPrice||product.price}}
</view>
</view>
<view class=" u-flex u-text-right u-flex-1 u-row-right">
<view class="u-flex u-p-r-30">
<up-number-box :button-size="14" integer
v-model="product.number">
<template #minus>
<view class="minus">
<up-icon name="minus" size="12"></up-icon>
</view>
</template>
<template #plus>
<view class="plus">
<up-icon name="plus" size="12"></up-icon>
</view>
</template>
</up-number-box>
</view>
<up-icon @click="proGroupVoGoodsDel(index,goodsIndex)"
size="14" name="trash"
:color="color.ColorMain"></up-icon>
</view>
</view>
</view>
</view>
<template v-if="FormData.groupType==1">
<view class="u-m-t-24">
<text class="color-red">*</text>
<text class="font-bold">几选几</text>
</view>
<view class="u-flex u-m-t-16">
<uni-number-box :min="1" :max="item.goods.length" :width="200"
v-model="item.number" placeholder="几选几"></uni-number-box>
</view>
</template>
</view>
</view>
<template v-if="FormData.groupType==1">
<view class="bg-fff u-flex u-p-t-24 u-p-b-24 border-r-12 "
@tap="proGroupVoPush">
<uni-icons type="plus-filled" :color="color.ColorMain"
:size="20"></uni-icons>
<view class="u-m-l-16">添加套餐组</view>
</view>
</template>
<template v-else>
<view class="bg-fff u-flex u-p-t-24 u-p-b-24 border-r-12 "
@tap="proGroupVoAddGoods()">
<uni-icons type="plus-filled" :color="color.ColorMain"
:size="20"></uni-icons>
<view class="u-m-l-16">添加商品</view>
</view>
</template>
</view>
</template>
<view class="">
<uni-forms-item label="商品描述">
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
type="textarea" v-model="FormData.shortTitle" placeholder="请填写商品简述" />
</uni-forms-item>
</view>
<template v-if="FormData.typeEnum==='group'">
<view class="border-top-0">
<uni-forms-item label="团购券分类" required showRequired name="categoryId">
<view class="u-p-30 bg-gray u-m-b-20" v-if="FormData.groupCategoryId.length">
<view class="u-flex">
<view class="u-flex-1 u-p-r-30">名称</view>
<view class=" u-flex-1 u-p-l-30">操作</view>
</view>
<view class="u-flex u-m-t-20 u-row-between"
v-for="(item,index) in FormData.groupCategoryId" :key="index"
@tap="groupCategoryIdDel(index)">
<view class="u-flex-1 u-flex u-p-r-30">
<view class="bg-fff u-flex-1 u-p-10">
{{item.name}}
</view>
</view>
<view class="u-flex u-flex-1 u-p-l-30">
<uni-icons type="minus-filled" :size="26"
:color="color.ColorRed"></uni-icons>
</view>
</view>
</view>
<view class=" u-flex " @tap="refChooseGroupCategoryOpen">
<uni-icons type="plus-filled" :color="color.ColorMain"
:size="26"></uni-icons>
<view class="u-m-l-16">添加团购券分类</view>
</view>
</uni-forms-item>
</view>
<!-- 选择团购券分类 -->
<choose-group-category @confirm="refChooseCouponCategoryConfirm"
ref="refChooseGroupCategory"></choose-group-category>
</template>
</view>
<template v-if="FormData.typeEnum=='sku' ">
<view class="block border-top-0 u-p-t-32 u-p-b-32">
<view class="u-flex u-row-between ">
<view class="color-333 font-bold">
<text v-if="!skuList.list.length">选择规格</text>
<text v-else>编辑规格</text>
</view>
<view class="u-flex u-col-center" @tap="toGuige">
<view>
<text v-if="FormData.specsInfoName">{{FormData.specsInfoName}}</text>
<text class="color-999" v-else>请选择</text>
</view>
<view class="u-flex u-p-t-2">
<uni-icons type="right" :size="14" color="#999"></uni-icons>
</view>
</view>
</view>
<!-- <template >
<view class="u-text-left">
<view class="u-flex font-bold u-m-b-12">
<view class="u-flex-1 ">组合名称</view>
<view class="u-flex-1 ">售价</view>
</view>
<view class="u-flex u-p-b-12 u-p-t-12" v-for="(item,index) in skuList.list"
:key="index">
<view class="u-flex-1 ">{{item.specSnap}}</view>
<view class="u-flex-1 ">¥{{item.salePrice}}</view>
</view>
</view>
</template> -->
</view>
</template>
<template v-if="FormData.typeEnum!='sku'">
<view class="block u-p-t-32 u-p-b-32" v-for="(sku,index) in skuList.list" :key="index">
<view class=" font-bold u-m-b-32 u-text-center">规格属性</view>
<view class="u-flex w-full gap-26 u-row-between">
<view class="u-flex-1">
<view>
<text class="color-red">*</text>
<text>售价</text>
</view>
<view class="u-m-t-16">
<price-number-box placeholder="请输入售价"
v-model="sku.salePrice"></price-number-box>
</view>
</view>
<view class="u-flex-1">
<view>
<text>会员价</text>
</view>
<view class="u-m-t-16">
<price-number-box placeholder="请输入会员价(元)"
v-model="sku.memberPrice"></price-number-box>
</view>
</view>
</view>
<view class="u-flex w-full gap-26 u-row-between u-m-t-24">
<view class="u-flex-1">
<view>
<text class="color-red">*</text>
<text>起售数量</text>
</view>
<view class="u-m-t-16">
<price-number-box inputType="number" placeholder="请输入起售数量"
v-model="sku.suit"></price-number-box>
</view>
</view>
<view class="u-flex-1">
<view>
<text>分销金额</text>
</view>
<view class="u-m-t-16">
<price-number-box placeholder="请输入分销金额"
v-model="sku.firstShared"></price-number-box>
</view>
</view>
</view>
<view class="u-m-t-24">
<view class="">
商品条形码
</view>
<view class="u-m-t-16 barCode color-999">
{{sku.barCode}}
</view>
</view>
</view>
<!-- <view class="block" v-for="(sku,index) in skuList.list" :key="index">
<view class="u-m-t-20 font-bold u-m-b-20 u-text-center">规格属性</view>
<view class="border-top-0">
<uni-forms-item label="售价" required showRequired>
<uni-easyinput :paddingNone="inputPaddingNone"
@blur="priceFormat(sku,'salePrice')" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="sku.salePrice" type="digit"
placeholder="请输入售价(元)" />
</uni-forms-item>
</view>
<uni-forms-item label="会员价(元)">
<uni-easyinput @blur="priceFormat(sku,'memberPrice')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="sku.memberPrice" type="digit"
placeholder="请输入会员价(元)" />
</uni-forms-item>
<uni-forms-item label="起售数量" required showRequired>
<uni-easyinput @blur="priceFormat(sku,'suit')" :paddingNone="inputPaddingNone"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="sku.suit" type="digit" placeholder="请输入起售数量" />
</uni-forms-item>
<uni-forms-item label="分销金额">
<uni-easyinput :paddingNone="inputPaddingNone"
@blur="priceFormat(sku,'firstShared')" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="sku.firstShared" type="digit"
placeholder="请输入分销金额" />
</uni-forms-item>
<uni-forms-item label="商品条码">
<uni-easyinput disabled :paddingNone="inputPaddingNone"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="sku.barCode" placeholder="请输入起售数量" />
</uni-forms-item>
</view> -->
</template>
<template v-if="FormData.typeEnum==='group'">
<view class="block">
<view class="border-top-0">
<uni-forms-item label="使用日期说明" required showRequired>
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.dateUsed"
placeholder="请输入使用日期说明" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="可用时间说明" required showRequired>
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.availableTime"
placeholder="请输入可用时间说明" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="预约方式" required showRequired>
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.bookingType"
placeholder="请输入预约方式" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="退款说明" required showRequired>
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.refundPolicy"
placeholder="请输入退款说明" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="团购价说明">
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.groupPurInfo"
placeholder="请输入团购价说明" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="门市价/划线价说明">
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.marketPriceInfo"
placeholder="请输入门市价/划线价说明" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="折扣说明">
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.discountInfo"
placeholder="请输入折扣说明" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="发票说明">
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.invoiceInfo"
placeholder="请输入发票说明" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="使用规则">
<view class="bg-gray">
<uni-easyinput type="textarea"
:styles="{backgroundColor:'rgb(246,246,246)'}"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.notices.usageRules"
placeholder="请输入使用规则" />
</view>
</uni-forms-item>
</view>
<view class="border-top-0">
<uni-forms-item label="排序">
<uni-easyinput @blur="priceFormat(FormData,'sort')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.sort" type="digit"
placeholder="请输入排序" />
</uni-forms-item>
</view>
</view>
</template>
<template v-if="FormData.type=='weigh'">
<view class="block u-p-t-32 u-p-b-32">
<view class="font-bold">
<text class="color-red">*</text>
<text>重量</text>
</view>
<view class=" u-m-t-16">
<up-input v-model="FormData.weight">
<template #suffix>
<view class="bg-gray">千克</view>
</template>
</up-input>
<view class="u-m-t-16 color-999 u-font-24">用于快递或配送运费计重</view>
</view>
</view>
</template>
<template v-if="FormData.typeEnum!='group'">
<view class="block ">
<!-- <view class="border-top-0">
<uni-forms-item label="上架区域">
<view class="u-flex">
<view class="u-m-r-30">
<my-radio text="收银台" v-model="FormData.isShowCash"></my-radio>
</view>
<my-radio text="小程序商城" v-model="FormData.isShowMall"></my-radio>
</view>
</uni-forms-item>
</view> -->
<view class="border-top-0">
<view class="u-flex u-row-between u-p-b-24 u-p-t-20">
<view class="label-title">是否允许临时改价</view>
<my-switch
v-model="FormData.isTempPrice"></my-switch>
</view>
</view>
<view class="u-p-t-24 u-p-b-24 border-top u-flex u-row-between">
<view>
<text class="font-bold">每日销量上限</text>
</view>
<view class="">
<price-number-box placeholder="请输入每日销量上限"
v-model="FormData.dayLimit"></price-number-box>
</view>
</view>
<view class="u-p-t-24 u-p-b-24 border-top u-flex u-row-between">
<view>
<text class="font-bold">每单限购</text>
</view>
<view class="">
<price-number-box placeholder="请输入每单限购"
v-model="FormData.singleOrderLimit"></price-number-box>
</view>
</view>
<view class="u-p-t-24 u-p-b-24 border-top u-flex u-row-between">
<view>
<text class="font-bold">每人限购</text>
</view>
<view class="">
<price-number-box placeholder="请输入每人限购"
v-model="FormData.singlePeopleLimit"></price-number-box>
</view>
</view>
<view>
<uni-forms-item label="">
<view class="u-flex u-row-between" @tap="toTimerPage">
<view>
<view class="label-title">定时上下架</view>
</view>
<view class="u-flex u-font-24">
<view>
<view class="color-666">{{returnTimerDayText()}}</view>
<view class="color-666 u-m-t-4" v-if="FormData.days">
{{returnTimerTimeText()}}</view>
</view>
<uni-icons type="right"></uni-icons>
</view>
</view>
</uni-forms-item>
</view>
<view class="">
<uni-forms-item label="">
<view class="u-flex u-row-between">
<view class="label-title">上架</view>
<my-switch disabled :openDisabledClass="false" @click="isGroundingChange"
v-model="FormData.isGrounding"></my-switch>
</view>
</uni-forms-item>
</view>
<uni-forms-item label="">
<view class="u-flex u-row-between">
<view class="label-title">库存开关</view>
<my-switch v-model="FormData.isStock"></my-switch>
</view>
<view class="color-999 u-m-t-16 u-font-24">注:关闭则不计算出入库数据</view>
</uni-forms-item>
<template v-if="FormData.isStock">
<view class="u-relative">
<uni-forms-item label="库存数量">
<uni-easyinput @blur="priceFormat(FormData,'stockNumber')"
:paddingNone="inputPaddingNone" :disabled="disabledStock"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="FormData.stockNumber" type="digit" placeholder="请输入库存数量" />
</uni-forms-item>
<view class="u-absolute position-all" v-if="disabledStock"
@click="canEditGoodsStock(true)">
</view>
</view>
</template>
<uni-forms-item label="">
<view class="u-flex u-row-between">
<view class="label-title">设为推荐</view>
<my-switch v-model="FormData.isHot"></my-switch>
</view>
</uni-forms-item>
<!-- <uni-forms-item label="">
<view class="u-flex u-row-between">
<view class="label-title">标签打印</view>
<my-switch v-model="FormData.enableLabel"></my-switch>
</view>
<view class="color-999 u-m-t-16 u-font-24">开启后: 收银完成后会自动打印对应数量的标签数</view>
</uni-forms-item> -->
<uni-forms-item label="打包费">
<uni-easyinput @blur="priceFormat(FormData,'packFee')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.packFee" type="digit"
placeholder="请输入打包费" />
</uni-forms-item>
<!-- <uni-forms-item label="虚拟销量">
<uni-easyinput @blur="priceFormat(FormData,'baseSalesNumber')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.baseSalesNumber" type="digit"
placeholder="请输入虚拟销量" />
</uni-forms-item> -->
<template v-if="option.type==='edit'">
<uni-forms-item label="排序">
<uni-easyinput @blur="priceFormat(FormData,'sort')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="FormData.sort" type="digit"
placeholder="请输入排序" />
</uni-forms-item>
</template>
</view>
</template>
</uni-forms>
<view style="height: 100rpx;"></view>
<view style="padding-left: 110rpx;padding-right: 110rpx;" class="u-m-t-20"
v-if="option.type==='edit'" @click="delModelShow">
<my-button bgColor="#F9F9F9" shape="circle" type="cancel">
<view class="color-red">删除该商品</view>
</my-button>
</view>
<view class="bootom">
<view class="save-btn-box">
<my-button fontWeight="700" shape="circle" @tap="save">保存</my-button>
</view>
</view>
</view>
</template>
<template v-if="tabsCurrent===1">
<edit-haocai @updateGoods="updateGoodsDetail" :goods="FormData"
@cancel="changeTabsCurrent(0)"></edit-haocai>
</template>
</view>
<my-model @confirm="modelConfirm" :showIcon="modelProps.showIcon" ref="model" :desc="modelProps.desc">
<template #btn>
<slot name="btn">
<view class="u-flex u-row-center u-p-b-40">
<my-button @click="closeModel" :width="500">确定</my-button>
</view>
</slot>
</template>
</my-model>
<!-- 删除弹窗 -->
<my-model @confirm="delmodelConfirm" ref="delModel" desc="确认删除">
</my-model>
<!-- 选择商品 -->
<choose-goods ref="refChooseGoods" @confirm="refChooseGoodsConfirm"
:category="pageData.category"></choose-goods>
<!-- 选择规格 -->
<choose-guige ref="refChooseGuige" @confirm="refChooseGuigeConfirm"></choose-guige>
<!-- 更多操作 -->
<my-action-sheet @itemClick="actionSheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
</view>
</template>
<script setup>
import {
ColorMain
} from '@/commons/color.js'
import dayjs from "dayjs";
import {
formatPrice
} from "@/commons/utils/format.js";
import go from '@/commons/utils/go.js';
import color from '@/commons/color.js';
import chooseGoods from './components/choose-goods'
import chooseGuige from './components/choose-guige'
import editHaocai from './components/edit-haocai.vue'
import chooseGroupCategory from './components/choose-coupon-category'
import priceNumberBox from './components/price-number-box'
import infoBox from "@/commons/utils/infoBox.js"
import {
hasPermission
} from '@/commons/utils/hasPermission.js';
import {
$types,
$defaultSku
} from '@/commons/goodsData.js'
import {
$getProductDetail,
$tbShopCategory,
$tbShopUnit,
$addProduct,
$updateProduct,
$delProduct,
$productSpec,
$updateProductStatus,
$updateGrounding,
$goodsIsHot,
$tbProskuConV2,
$updateProductData
} from '@/http/yskApi/goods.js'
import {
$getProductSku
} from '@/http/yskApi/sku.js'
import {
onLoad,
onShow,
onReady
} from '@dcloudio/uni-app';
import {
computed,
onBeforeUnmount,
onUnmounted,
reactive,
ref,
watch,
nextTick
} from 'vue';
const imageStyles = reactive({
width: 82,
height: 82,
border: {
radius: '4px'
}
})
async function upDateGoods(par) {
const res = await $updateProductData([{
id: FormData.id,
isSku: 0,
shopId: uni.getStorageSync('shopId'),
...par
}])
uni.showToast({
title: '修改成功',
icon: 'none'
})
}
async function isPauseSaleChange(e) {
if (option.type == 'add') {
FormData.isPauseSale = FormData.isPauseSale ? 0 : 1
return
}
const res = await hasPermission('允许售罄商品')
if (!res) {
return
}
// await upDateGoods({
// key: 'pauseSale',
// value: FormData.isPauseSale ? 0 : 1
// })
FormData.isPauseSale = FormData.isPauseSale ? 0 : 1
}
async function isGroundingChange(e) {
if (option.type == 'add') {
FormData.isGrounding = FormData.isGrounding ? 0 : 1
return
}
const res = await hasPermission('允许上下架商品')
if (!res) {
return
}
// await upDateGoods({
// key: 'grounding',
// value: FormData.isGrounding ? 0 : 1
// })
FormData.isGrounding = FormData.isGrounding ? 0 : 1
}
function toRecoders() {
go.to('PAGES_PRODUCT_INVOICING_LIST', {
productId: FormData.id
})
}
function toCheck() {
go.to('PAGES_PRODUCT_INVOICING_CHECK', {
productId: $goodsData.id,
name: $goodsData.name,
skuId: $goodsData.skuList[0].id
})
}
function skuToCheck(item) {
go.to('PAGES_PRODUCT_INVOICING_CHECK', {
productId: $goodsData.id,
name: $goodsData.name,
skuId: $goodsData.skuList[0].id,
stock: item.stockNumber,
price: item.salePrice
})
}
// 更新库存设置
function updateProductStatus(id, key) {
if (key === 'isGrounding') {
return $updateGrounding({
skuId: id,
isGrounding: FormData[key] === 1
}).then(res => {
infoBox.showSuccessToast('更新成功')
})
}
const updateKey = key.replace('is', '')
$updateProductStatus({
updateKey: updateKey.substr(0, 1).toLowerCase() + updateKey.substr(1, updateKey.length),
updateValue: FormData[key],
targetId: id
}).then(res => {
infoBox.showSuccessToast('更新成功')
})
}
// 选择团购券分类
const refChooseGroupCategory = ref(null)
function refChooseCouponCategoryConfirm(arr) {
arr = arr.map(v => {
return {
name: v.name,
id: v.id
}
})
refChooseGroupCategoryClose()
FormData.groupCategoryId = arr
}
function groupCategoryIdDel(index) {
FormData.groupCategoryId.splice(index, 1)
}
function refChooseGroupCategoryOpen() {
refChooseGroupCategory.value.open()
}
function refChooseGroupCategoryClose() {
refChooseGroupCategory.value.close()
}
//规格选择
const refChooseGuige = ref(null)
let proGroupVoGoodsIndex = undefined
function refChooseGuigeOpen(skuList, groupIndex, goodsIndex) {
proGroupVoIndex = groupIndex
proGroupVoGoodsIndex = goodsIndex
refChooseGuige.value.open(skuList)
}
function refChooseGuigeConfirm(sku) {
console.log(sku);
FormData.proGroupVo[proGroupVoIndex].goods[proGroupVoGoodsIndex].skuName = sku.specSnap || sku.name
FormData.proGroupVo[proGroupVoIndex].goods[proGroupVoGoodsIndex].skuId = sku.id
proGroupVoIndex = undefined
proGroupVoGoodsIndex = undefined
}
//套餐商品选择
const refChooseGoods = ref(null)
let proGroupVoIndex = undefined
function proGroupVoAddGoods(index, arr) {
proGroupVoIndex = index
if(!FormData.proGroupVo){
initDefaultProGroupVo()
}
if (FormData.groupType == 0) {
const goods = FormData.proGroupVo[0].goods
refChooseGoods.value.open(goods)
} else {
refChooseGoods.value.open(arr)
}
}
function refChooseGoodsOpen() {
proGroupVoIndex = undefined
refChooseGoods.value.open()
}
function refChooseGoodsClose() {
refChooseGoods.value.close()
}
function proGroupVoPush() {
FormData.proGroupVo.push({
title: '',
number: 1,
goods: []
})
}
function refChooseGoodsConfirm(arr) {
console.log(arr);
refChooseGoodsClose()
arr = arr.map(v => {
const {
proId,
id,
name,
unitName,
lowPrice,
type,
typeEnum,
skuList
} = v
if (proId) {
return v
}
return {
proId: id,
proName: name,
unitName,
price: lowPrice,
number: 1,
type,
typeEnum,
skuList,
skuId: '',
skuName: ''
}
})
console.log(arr);
console.log(FormData.groupType);
if (FormData.groupType == 0) {
console.log(FormData.proGroupVo[0]);
return FormData.proGroupVo[0].goods = arr
}
if (FormData.groupType == 1 && proGroupVoIndex !== undefined) {
return FormData.proGroupVo[proGroupVoIndex].goods = arr
}
FormData.proGroupVo.push({
title: '',
number: 1,
goods: arr
})
}
function proGroupVoGoodsDel(index, goodsIndex) {
FormData.proGroupVo[index].goods.splice(goodsIndex, 1)
}
function delproGroupVo(index) {
FormData.proGroupVo.splice(index, 1)
}
function back() {
uni.navigateBack()
}
// 商品图片组件
const refFile = ref(null)
//表单相关事件
function changeFormData(key, val) {
FormData[key] = val
}
function unitIdChange(e) {
console.log(e);
FormData.unitName = e.detail.value[0].text
}
function specIdChange(e) {
}
//number类型数据限制
function priceFormat(item, key) {
nextTick(() => {
const min = 0;
const max = 100000000;
console.log(item[key]);
if (item[key] === '') {
return
}
const newval = formatPrice(item[key], min, max, true)
console.log(newval)
if (typeof newval !== 'number') {
item[key] = newval.value
uni.showToast({
title: `请输入${min}${max}范围内的数字`,
icon: 'none'
})
} else {
item[key] = newval
}
console.log(item);
})
}
//套餐商品类型
const packageType = reactive({
list: [{
name: '固定套餐',
value: 0
}, {
name: '可选套餐',
value: 1
}],
sel: 0
})
// 库存模式
const InventoryModeData = [{
text: '传统模式',
value: 0
},
{
text: '进销存模式',
value: 1
}
]
const InventoryReset = [{
text: '不重置',
value: 0
},
{
text: '每天重置',
value: 1
}
]
const model = ref(null)
const delModel = ref(null)
const rules = {
images: {
rules: [{
validateFunction: function(rule, value, data, callback) {
console.log(value);
if (value.length < 1) {
callback('请上传商品图片')
}
return true
}
}]
},
name: {
rules: [{
required: true,
errorMessage: '请输入商品名称',
},
{
minLength: 1,
maxLength: 40,
errorMessage: '商品名称长度在 {minLength} 到 {maxLength} 个字符',
}
]
},
categoryId: {
rules: [{
required: true,
errorMessage: '请选择商品分类',
}]
},
floorPrice: {
rules: [{
required: true,
errorMessage: '请填写商品底价',
}]
}
}
let modelProps = {
desc: '1为只能预约当天大于1为今天及往后几天最多15天',
showIcon: false
}
function delmodelConfirm() {
console.log('delmodelConfirm');
$delProduct([option.productId]).then(res => {
uni.showToast({
icon: 'none',
title: '删除成功'
})
setTimeout(() => {
uni.$emit('del:productIndex', option.productId)
go.back()
}, 500)
})
}
function delModelShow() {
delModel.value.open()
}
function showModel(type) {
if (type === 'help') {
modelProps = {
desc: '1为只能预约当天大于1为今天及往后几天最多15天',
showIcon: false
}
model.value.open()
}
if (type === 'stockTips') {
modelProps = {
desc: '请先保存商品基础信息',
showIcon: false
}
model.value.open()
}
}
function modelConfirm() {
console.log('modelConfirm');
}
function closeModel() {
model.value.close()
if (tabsCurrent.value === 1) {
go.back()
}
}
// 售卖方式时间
const DeliveryTime = [{
value: '1',
name: '时间'
}, {
value: '2',
name: '付款'
}]
//返回当前时间多少天后的时间戳
function nowDateAfterDayTemp(day) {
const daytem = 1000 * 60 * 60 * 24
return Date.now() + daytem * day
}
const limitDay = 90
const limitDayTime = nowDateAfterDayTemp(limitDay)
let DeliveryTimeCurrent = ref(0)
function DeliveryTimeChange(e) {
console.log(e.detail.value);
}
const tabsList = ['基础设置', '耗材绑定']
let tabsCurrent = ref(0)
function changeTabsCurrent(newval) {
tabsCurrent.value = newval
}
const Forms = ref(null)
// 表单样式
//可以不使用ref但是小程序一堆wraning 改为了ref
const placeholderStyle = ref('font-size:28rpx;')
const inputPaddingNone = ref(true)
//规格模板类型
const specificationMode = [{
text: '普通',
value: '普通'
},
{
text: '图片式',
value: '图片式'
},
{
text: '规格模版',
value: '规格模版'
}
]
let myTest = ref(false)
//表单边框
const inputBorder = ref(false)
const FormData = reactive({
days: '',
startTime: '',
endTime: '',
//每日销量上限,
dayLimit: 0,
singleOrderLimit:0,
singlePeopleLimit:0,
type: 'normal',
showType: ['table'],
specsInfoName: '',
id: "",
typeEnum: "normal",
specificationsGroup: '',
name: "",
shortTitle: "", //商品介绍
unitId: "",
unitName: "",
categoryId: "", // 商品分类id
coverImg: "",
images: [],
shopId: uni.getStorageSync('shopId'),
groupType: 0,
weight: '',
//套餐组合
proGroupVo: [],
lowPrice: "",
skuList: [],
isShowMall: 1,
isShowCash: 1,
isStock: 0,
isStock: 0,
//是否允许临时改价
isTempPrice: 1,
isHot: 0,
packFee: 0,
specId: "",
// baseSalesNumber: 0,
sort: 0,
proGroupVo: [],
specInfo: [],
selectSpec: [],
specTableHeaders: [],
skuSnap: "",
groupCategoryId: [],
isGrounding: 1,
stockNumber: 0,
notices: {
availableTime: "",
bookingType: "",
dateUsed: "",
discountInfo: "",
groupPurInfo: "",
invoiceInfo: "",
marketPriceInfo: "",
platformTips: "",
refundPolicy: "",
usageRules: ""
}
})
//添加套餐组
function addProGroupVo() {
FormData.addProGroupVo.push({
title: '',
goods: [],
number: 0,
count: 0
})
}
const skuList = reactive({
list: [{
...$defaultSku,
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
}]
})
watch(() => skuList.list, (newval) => {
console.log(newval);
})
//库存表单数据
const stockData = reactive({
inventoryMode: 0,
isStock: false,
stockNumbers: 0,
inventoryReset: 0
})
//售卖方式
const salesMethod = reactive({
list: ['现货', '预售', '仅展示商品'],
defaultIndex: 0,
})
function salesMethodChange(e) {
FormData.salesMethod = e.detail.value
salesMethod.defaultIndex = e.detail.value
}
// 判断是否为一个空对象
function isEmpty(obj) {
return obj && JSON.stringify(obj) !== '{}'
}
let option = reactive({
type: 'add',
productId: ''
})
let $goodsData = {}
function getGoodsDetail() {
$getProductDetail(option.productId).then(res => {
res.images = res.images.map(v => {
return {
url: v
}
})
for (let i in res.conInfos) {
const con = res.conInfos[i]
const item = res.skuList.find(v => v.id == con.productSkuId)
if (item) {
if (item.hasOwnProperty('haoCaiList')) {
item.haoCaiList.push(con)
} else {
item.haoCaiList = [con]
}
}
}
res.skuList = (res.skuList.length ? res.skuList : [])
let specsInfoName = ''
for (let i in res.specsInfo) {
specsInfoName = i
}
res.specsInfoName = specsInfoName
$goodsData = res
skuList.list = res.skuList
res.showType=res.showType.split(',')
Object.assign(FormData, res)
//多规格
if (res.typeEnum === 'sku') {
const selectSpec = JSON.parse(res.selectSpec)
// const specInfo=JSON.parse(res.specInfo)
console.log(selectSpec);
// console.log(specInfo);
const specMap = selectSpec.reduce((prve, cur) => {
cur.value.map(v => {
prve[typeof v === 'string' ? v : v.text] = cur.name
})
return prve
}, {})
console.log(specMap);
FormData.specificationsGroup = {
specId: res.specId,
selectSpec: selectSpec.map(s => {
return {
...s,
value: s.value.map(v => {
return typeof v === 'string' ? {
text: v,
value: v
} : v
})
}
}),
result: res.skuList.map(v => {
const names = v.specSnap.split(',').reduce((prve, cur) => {
const key = specMap[cur]
prve[key] = cur
return prve
}, {})
return {
skus: {
...v
},
names,
specSnap: v.specSnap,
coverImg: v.coverImg
}
}),
specList: [],
}
} else {
// 单规格
}
})
}
//获取分类
function getCategory() {
$tbShopCategory({
page: 0,
size: 200
}).then(res => {
pageData.category = res.content.reduce((prve, cur) => {
prve.push(...[{
...cur,
name: '' + cur.name
}, ...cur.childrenList.map(v => {
return {
...v,
name: '' + v.name
}
})])
return prve
}, [])
// pageData.category = res.content.map(v => {
// return {
// ...v,
// children: v.childrenList,
// childrenList: undefined,
// }
// })
})
}
//默认值表单初始化
function defaultValueInit() {
if (option.productId === '') {
// FormData.typeEnum = pageData.types[0].value
FormData.barCode = `${uni.getStorageSync('shopId')}${dayjs().valueOf()}`
}
}
//获取单位数据
function getTbShopUnit() {
$tbShopUnit({
page: 0,
size: 200,
sort: "id"
}).then(res => {
pageData.units = res.content.map(v => {
return {
...v,
children: v.childrenList,
childrenList: undefined,
}
})
})
}
//获取规格数据
function getTbProductSpec() {
$productSpec.get({
page: 0,
size: 200,
sort: "id"
}).then(res => {
pageData.specList = res.content.map(v => {
return {
...v,
children: v.childrenList,
childrenList: undefined,
}
})
})
}
//页面全部数据
const pageData = reactive({
// 商品类型
// types: $types,
types: [{
name: '普通商品',
value: 'normal'
},
{
name: '套餐商品',
value: 'package'
},
{
name: '称重商品',
value: 'weigh'
}
],
typeEnums: [{
name: '单规格',
value: 'normal'
},
{
name: '多规格',
value: 'sku'
}
],
// 单位
units: [],
// 分类
category: [],
// 规格
specList: [],
//库存
skuList: [],
//显示
showTypes: [{
name: '堂食',
value: 'table'
},
{
name: '自取',
value: 'dine'
},
{
name: '配送',
value: 'delivery'
},
{
name: '快递',
value: 'express'
}
]
})
//查询商品库存
function getProductSku() {
$getProductSku(option.productId).then(res => {
pageData.skuList = res
})
}
function updateGoodsDetail() {
getGoodsDetail()
// getProductSku()
}
onLoad((params) => {
if (isEmpty(params)) {
option.type = params.type ? params.type : 'add'
option.productId = params.productId
// getGoodsDetail()
// getProductSku()
}
canEditGoodsCategory()
uni.setNavigationBarTitle({
title: option.type === 'add' ? '添加商品' : '编辑商品'
})
if (option.type === 'edit') {
getGoodsDetail()
// getProductSku()
}
defaultValueInit()
getCategory()
getTbShopUnit()
getTbProductSpec()
})
onShow(() => {
// if (option.type === 'edit') {
// getGoodsDetail()
// getProductSku()
// }
})
function openDiscountChange() {
}
let timer = null
function settimeoutBack(time) {
clearTimeout(timer)
timer = setTimeout(() => {
uni.$emit('update:productIndex')
uni.navigateBack()
}, time)
}
//保存
async function save() {
const bol = await hasPermission('允许修改商品')
if (!bol) {
return
}
Forms.value.validate().then(res => {
const {
typeEnum,
groupType,
groupCategoryId,
type
} = FormData
if (typeEnum === 'group' && !groupCategoryId.length) {
return infoBox.showToast('请选择团购券分类')
}
// if(typeEnum==='sku'){
// return infoBox.showErrorToast('请选择规格')
// }
const images = refFile.value.getFileList()
if (images.length <= 0) {
return infoBox.showToast('请上传商品图片')
}
const skuSnap = []
let submitSkuList = skuList.list || []
if (option.type == 'edit') {
submitSkuList = submitSkuList.map(v => {
return {
...v,
productId: FormData.id,
shopId: uni.getStorageSync('shopId')
}
})
}
// if(typeEnum!=$goodsData.typeEnum){
// if(typeEnum=='normal'){
// submitSkuList = skuList.list;
// }else{
// submitSkuList = skuList.list;
// }
// }else{
// submitSkuList = skuList.list;
// }
if (FormData.specificationsGroup) {
for (let i of FormData.specificationsGroup.selectSpec) {
if (i.selectSpecResult.length) {
skuSnap.push({
name: i.name,
value: i.selectSpecResult.join(',')
})
}
}
}
console.log(FormData.specificationsGroup);
const selectSpec = FormData.typeEnum != 'sku' ? '[]' : JSON.stringify((FormData.specificationsGroup
.selectSpec || []).map(spe => {
return {
...spe,
value: spe.value.map(v => {
return typeof v === 'string' ? v : v.text || v.value
})
}
}))
const lowPrice = submitSkuList[0] ? submitSkuList[0].salePrice : FormData.salePrice
// const lowPrice = submitSkuList[0] ? submitSkuList[0].salePrice : FormData.salePrice
const suit = submitSkuList[0] ? submitSkuList[0].suit : 0
const stockNumber = FormData.stockNumber
if (typeEnum == 'normal') {
if (lowPrice === '') {
return infoBox.showToast('请输入售价')
}
if (lowPrice === '') {
return infoBox.showToast('请输入售价')
}
if (suit <= 0) {
return infoBox.showToast('起售数量不能小于0')
}
if (stockNumber === '') {
return infoBox.showToast('请输入库存数量!')
}
}
if (type == 'package') {
if (groupType == 0&& FormData.proGroupVo[0].goods.length<=0) {
// 固定套餐
return infoBox.showToast('套餐组合至少需要包含一种商品,请添加商品')
}
if (groupType == 1) {
let ispase = FormData.proGroupVo.length > 0 ? true : false
let tips = ispase ? '' : '请添加至少一种套餐'
for (let i in FormData.proGroupVo) {
const item = FormData.proGroupVo[i]
if (item.goods.length <= 0) {
ispase = false
tips = '套餐组合至少需要包含一种商品,请添加商品'
break
}
if (!item.title) {
ispase = false
tips = '请输入套餐名称'
break
}
}
if (!ispase) {
return infoBox.showToast(tips)
}
// 可选套餐
}
}
if (type == 'weigh') {
if (!FormData.weight) {
return infoBox.showToast('请输入重量')
}
}
const submitData = {
...FormData,
showType:FormData.showType.join(','),
proGroupVo: type != 'package' ? '' : FormData.proGroupVo,
images: images,
coverImg: images[0] || '',
skuList: submitSkuList,
specInfo: JSON.stringify(submitSkuList),
lowPrice,
specificationsGroup: undefined,
selectSpec,
skuSnap: JSON.stringify(skuSnap)
}
//编辑
if (option.type === 'edit') {
return $updateProduct(submitData).then(res => {
$updateProductData([{
id: FormData.id,
isSku: 0,
shopId: uni.getStorageSync('shopId'),
key: 'grounding',
value: FormData.isGrounding
}]).then(() => {
infoBox.showSuccessToast('更新成功')
settimeoutBack(1500)
})
})
}
submitData.selectSpec =
$addProduct(submitData).then(res => {
infoBox.showSuccessToast('添加成功')
settimeoutBack(1500)
})
}).catch(err => {
console.log(err);
})
}
const returnSpecificationsGroup = computed(() => {
if (!FormData.specificationsGroup.length) {
return '添加规格组'
}
if (FormData.specificationsGroup.length) {
let result = FormData.specificationsGroup.reduce((prve, cur) => {
return prve + cur.GroupName + '、'
}, '')
return result.replace(/.$/, "")
}
})
/**
* 监听规格保存,拿到数据
*/
const newSkuList = reactive({
list: []
})
function watchSpecificationsSave() {
uni.$off('emitspecificationsSave')
uni.$on('emitspecificationsSave', function(data) {
FormData.specificationsGroup = data
FormData.specId = data.specId
FormData.specsInfoName = data.specsInfoName
skuList.list = data.result.map(v => {
return {
...v.skus,
...v.names,
specSnap: v.specSnap,
coverImg: v.coverImg || ''
}
})
newSkuList.list = data.result.map(v => {
return {
...v.skus,
...v.names,
specSnap: v.specSnap,
coverImg: v.coverImg || ''
}
})
console.log(skuList.list);
})
}
function toGroup() {
// go.to('PAGES_PRODUCT_GUIGE_CHOOSE', {
// productId: option.productId
// })
}
function toGuige() {
uni.setStorageSync('guige', FormData.specificationsGroup)
go.to('PAGES_PRODUCT_GUIGE_CHOOSE', {
emitName: 'emitspecificationsSave',
type: option.type,
productId: option.productId
})
// go.to('PAGES_PRODUCT_GUIGE_ADD', {
// emitName: 'emitspecificationsSave',
// })
}
/**
* 监听定时器保存,拿到数据
* @param {Boolean} open //控制开启或关闭监听
*/
function watchTimerSave(open = true) {
uni.$off('timerSave')
uni.$on('timerSave', function(timer) {
Object.assign(FormData, timer)
})
}
function toTimerPage() {
go.to('PAGES_PRODUCT_TIMER', {
productId: option.productId
})
}
const ListDataconstructor = {
cycleChecked: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
}
const $week = {
Monday: '周一',
Tuesday: '周二',
Wednesday: '周三',
Thursday: '周四',
Friday: '周无',
Saturday: '周六',
Sunday: '周日',
}
function returnTimerDayText() {
if (!FormData.days) {
return ''
}
return FormData.days.split(',').filter(v => v).map(v => $week[v]).join(',')
// return FormData.timer.length ? `当前有${FormData.timer.length}个定时器` : '没有定时器'
}
function returnTimerTimeText() {
if (!FormData.startTime || !FormData.endTime) {
return ''
}
return FormData.startTime + '-' + FormData.endTime
// return FormData.timer.length ? `当前有${FormData.timer.length}个定时器` : '没有定时器'
}
// 更多操作
const refMoreSheet = ref(null)
let selItem = {
data: '',
index: ''
}
const actionSheet = reactive({
list: ['库存记录', '库存盘点']
})
function moreShow(item, index) {
refMoreSheet.value.open()
selItem.data = item
selItem.index = index
}
function actionSheetClick(index) {
console.log(index);
if (index === 0) {
return go.to('PAGES_PRODUCT_INVOICING_LIST', {
productId: FormData.id
})
}
if (index === 1) {
return
}
}
watch(() => FormData.typeEnum, (newval) => {
if (option.type == 'edit') {
FormData.specId = newval == 'normal' ? '' : ($goodsData.specId || '')
if (newval == $goodsData.typeEnum) {
skuList.list = $goodsData.skuList
} else {
if (newval == 'normal') {
skuList.list = [{
...$defaultSku,
productId: FormData.id,
shopId: uni.getStorageSync('shopId'),
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
}]
} else {
skuList.list = []
}
}
} else {
FormData.specId = ''
if (newval == 'normal') {
skuList.list = [{
...$defaultSku,
shopId: uni.getStorageSync('shopId'),
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
}]
} else {
skuList.list = []
}
}
})
watch(() => FormData.type, (newval) => {
if (option.type == 'edit') {
if (newval == $goodsData.type) {
if($goodsData.proGroupVo){
FormData.proGroupVo = $goodsData.proGroupVo||[]
}else{
initDefaultProGroupVo()
}
}
if(FormData.groupType==null){
FormData.groupType=0
}
} else {
if (newval == 'package') {
initDefaultProGroupVo()
}
}
})
function initDefaultProGroupVo() {
FormData.proGroupVo = [{
title: '',
count: '',
number: 1,
goods: []
}]
console.log(FormData.proGroupVo);
}
watch(() => FormData.groupType, (newval) => {
if (newval == 0) {
return initDefaultProGroupVo()
}
if (option.type == 'edit') {
if (newval == $goodsData.groupType) {
FormData.proGroupVo = $goodsData.proGroupVo
} else {
}
return
}
initDefaultProGroupVo()
})
/**
* 权限start
*/
// 允许修改商品库存
let disabledStock = ref(false)
async function canEditGoodsStock(tips = false) {
console.log(tips);
if (option.type === 'edit') {
const res = await hasPermission({
text: '允许修改商品库存',
tips: tips
})
disabledStock.value = !res
}
}
watch(() => FormData.isStock, (newval) => {
if (newval) {
canEditGoodsStock()
}
})
// 允许修改商品分类
let disabledChangeCategory = ref(false)
async function canEditGoodsCategory(tips = false) {
if (option.type === 'edit') {
const res = await hasPermission({
text: '允许修改分类',
tips
})
disabledChangeCategory.value = !res
}
}
/**
* 权限end
*/
watch(() => pageData.types, (newval) => {
Forms.value.setRules(rules)
})
onShow(() => {
watchSpecificationsSave()
watchTimerSave()
})
onReady(() => {
Forms.value && Forms.value.setRules(rules)
})
onBeforeUnmount(() => {
clearTimeout(timer)
})
</script>
<style scoped>
page {
background: #F9F9F9;
}
</style>
<style lang="scss" scoped>
.barCode {
border: 1px solid #E5E5E5;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 22rpx 24rpx;
background: #FCFCFC;
}
.top {
position: fixed;
// left: 28rpx;
// right: 28rpx;
// /* #ifdef H5 */
// top: calc(44px + 24rpx);
// /* #endif */
// /* #ifndef H5 */
// top: calc(var(--status-bar-height) + 24rpx);
// /* #endif */
// z-index: 999;
}
::v-deep .uni-forms-item--border {
padding-top: 12px;
padding-bottom: 12px;
}
.stick-bottom {
top: 0;
z-index: 10;
}
::v-deep .stock .uni-data-checklist .checklist-group .checklist-box {
margin-right: 30rpx;
}
.stock .btns {
position: fixed;
bottom: 100rpx;
left: 110rpx;
right: 110rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
}
.u-p-l-100 {
padding-left: 100rpx;
}
.bg-gray {
background: #F9F9F9;
padding: 0 20rpx;
}
.safe-page {
background: #F9F9F9;
}
.my-switch {
transform: scale(0.7);
}
.label-title {
font-size: 28rpx;
font-weight: bold;
font-family: Source Han Sans CN, Source Han Sans CN;
}
.lh40 {
line-height: 40rpx;
}
.bootom {
position: fixed;
left: 110rpx;
right: 110rpx;
bottom: 60px;
}
.minus {}
.plus {}
.box {
margin-top: 32rpx;
font-size: 28rpx;
.block {
background: #FFFFFF;
border-radius: 8rpx 18rpx 8rpx 18rpx;
padding: 12rpx 24rpx;
margin-bottom: 32rpx;
}
}
::v-deep.uni-forms-item {
align-items: inherit;
}
::v-deep .typeEnum .u-radio-group--row {
flex-wrap: nowrap;
justify-content: space-between;
}
::v-deep .typeEnum .u-checkbox-group--row{
flex-wrap: nowrap;
justify-content: space-between;
}
::v-deep .uni-forms-item .uni-forms-item__label {
text-indent: 0;
font-size: 28rpx !important;
font-weight: bold;
color: #333;
}
::v-deep .stock .uni-forms-item {
min-height: initial !important;
}
.gap-26 {
gap: 26rpx;
}
::v-deep .bg-gray .uni-forms-item {
background-color: transparent !important;
}
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
border-color: transparent !important;
}
::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
font-size: 28rpx;
color: #333;
}
::v-deep .none-label .uni-forms-item.is-direction-top {
padding: 0 !important;
min-height: initial !important;
}
::v-deep .uni-easyinput__content-input {
height: inherit;
}
::v-deep .none-label .uni-forms-item .uni-forms-item__label {
padding: 0 !important;
}
.save-btn {
background-color: $my-main-color;
color: #fff;
border-radius: 100rpx;
font-size: 28rpx;
}
.btn-hover-class {
opacity: .6;
}
.zuofa {
padding: 28rpx 0;
background: #F9F9F9;
padding-left: 42rpx;
border-radius: 14rpx 14rpx 14rpx 14rpx;
}
::v-deep .uni-input-placeholder {
font-size: 28rpx;
}
.table {
background: #F9F9F9;
border-radius: 8rpx;
overflow: hidden;
.title {
padding: 12rpx 24rpx 12rpx 24rpx;
background: #AEBAD2;
border-radius: 8rpx 8rpx 0rpx 0rpx;
color: #fff;
}
.row:nth-of-type(2n+1) {
background: #F0F0F0;
}
}
.types {
.item {
padding: 6rpx 20rpx;
border: 1px solid #bbb;
border-radius: 8rpx;
margin-right: 30rpx;
margin-bottom: 20rpx;
text-align: center;
position: relative;
.gou {
display: none;
position: absolute;
right: 0;
top: 0;
background-color: $my-main-color;
width: 32rpx;
height: 32rpx;
clip-path: polygon(100% 0, 0 0, 100% 100%);
}
}
.active {
border-color: $my-main-color;
.gou {
display: flex;
}
.title {
color: $my-main-color;
}
}
&.disabled {
position: relative;
&::after {
position: absolute;
content: '';
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.item {
background-color: #f9f9f9;
border-color: #eee;
&.active {
border-color: rgba(49, 138, 254, .3);
}
.gou {
opacity: .5;
}
.title {
color: #999;
}
}
}
}
</style>