2028 lines
59 KiB
Vue
2028 lines
59 KiB
Vue
<template>
|
||
<view class="u-p-30 safe-page">
|
||
<up-sticky v-if="option.type==='edit'" offset-top="20">
|
||
<myTabs :list="tabsList" @change="tabsChange"></myTabs>
|
||
</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">
|
||
<uni-forms-item label="商品类型" required showRequired>
|
||
<view class="u-flex u-flex-wrap types " :class="{disabled:option.productId!==''}">
|
||
<view class="item" @tap="changeFormData('typeEnum',item.value)"
|
||
:class="{active:FormData.typeEnum===item.value}"
|
||
v-for="(item,index) in pageData.types" :key="index">
|
||
<!-- <view class="gou u-flex u-row-right u-col-top u-p-t-4 u-p-r-4">
|
||
<uni-icons type="checkmarkempty" :size="8" color="#fff"></uni-icons>
|
||
</view> -->
|
||
<view class="title">{{item.title}}</view>
|
||
<view class="u-font-24 color-999 u-m-t-10">
|
||
{{item.desc}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</uni-forms-item>
|
||
<uni-forms-item ref="fileItem" label="图片">
|
||
<my-upload-file ref="refFile" :images="FormData.images"></my-upload-file>
|
||
<view class="u-m-t-16 color-999 u-font-24">
|
||
注:第一张图为商品封面图，图片尺寸为750x750
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item required name="name" label="商品名称" showRequired>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.name" placeholder="请输入商品名称" />
|
||
</uni-forms-item>
|
||
<template v-if="FormData.typeEnum!='group'">
|
||
<uni-forms-item label="所属分类" required showRequired name="categoryId">
|
||
<!-- <picker @change="bindPickerChange"
|
||
range-key="name"
|
||
:value="pageData.category" :range="pageData.category">
|
||
<view class="uni-input">请选择分类</view>
|
||
</picker> -->
|
||
<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>
|
||
</template>
|
||
|
||
<!-- <uni-forms-item label="产品编码">
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.goodsCode" placeholder="请输入商品编码" />
|
||
</uni-forms-item> -->
|
||
<view class="border-top-0">
|
||
<uni-forms-item label="商品描述">
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
type="textarea" v-model="FormData.shortTitle" placeholder="请填写商品简述" />
|
||
</uni-forms-item>
|
||
</view>
|
||
|
||
<!-- <uni-forms-item label="商品详情" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
type="textarea" v-model="FormData.goodsDetail" placeholder="请填写商品详情" />
|
||
</uni-forms-item> -->
|
||
|
||
<!-- <view class="">
|
||
<uni-forms-item label="规格模式" required>
|
||
<uni-data-checkbox v-model="FormData.specificationsPattern"
|
||
:localdata="specificationMode" />
|
||
</uni-forms-item>
|
||
</view> -->
|
||
<view class="border-top-0">
|
||
<uni-forms-item label="单位" required showRequired name="categoryId">
|
||
|
||
<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 class="" 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 class="">
|
||
<uni-forms-item label=" " required>
|
||
<view class="u-flex u-row-between zuofa" @tap="toGuige ">
|
||
<view class="color-333">{{returnSpecificationsGroup }}</view>
|
||
<uni-icons type="right"></uni-icons>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view> -->
|
||
|
||
|
||
<!-- <uni-forms-item label="底价（元）" name="floorPrice" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.floorPrice" placeholder="请输入底价（元）" />
|
||
</uni-forms-item> -->
|
||
<!-- <uni-forms-item label="售卖方式" required>
|
||
<view style="display: none;"><uni-easyinput :paddingNone="inputPaddingNone"
|
||
:inputBorder="inputBorder" v-model="FormData.salesMethod"
|
||
placeholder="请选择售卖方式" />
|
||
</view>
|
||
<picker @change="salesMethodChange" :value="salesMethod.defaultIndex"
|
||
:range="salesMethod.list">
|
||
<view class="u-flex u-row-between lh40" v-if="FormData.salesMethod===0">
|
||
<view class="color-333">{{salesMethod.list[FormData.salesMethod]||'售卖方式'}}
|
||
</view>
|
||
<uni-icons type="right"></uni-icons>
|
||
</view>
|
||
<view class="u-flex u-row-between lh40" v-if="FormData.salesMethod===1">
|
||
<view class="u-flex">
|
||
<text
|
||
class="color-333">{{salesMethod.list[FormData.salesMethod]||'售卖方式'}}</text>
|
||
<view class="u-flex color-999">
|
||
<text>(</text>
|
||
<text class="color-red">*</text>
|
||
<text class="u-font-24">注意:预售商品不支持堂食</text>
|
||
<text>)</text>
|
||
</view>
|
||
</view>
|
||
<uni-icons type="right"></uni-icons>
|
||
</view>
|
||
<view class="u-flex u-row-between lh40" v-if="FormData.salesMethod===2">
|
||
<view class="u-flex">
|
||
<text
|
||
class="color-333">{{salesMethod.list[FormData.salesMethod]||'售卖方式'}}</text>
|
||
<view class="u-flex color-999">
|
||
<text>(</text>
|
||
<text class="color-red">*</text>
|
||
<text class="u-font-24">注意:该商品仅作展示，无法进行下单</text>
|
||
<text>)</text>
|
||
</view>
|
||
</view>
|
||
<uni-icons type="right"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</uni-forms-item> -->
|
||
<!-- <template v-if="FormData.salesMethod==1">
|
||
<view class="bg-gray border-top-0">
|
||
<uni-forms-item label="交货时间" required>
|
||
<radio-group @change="DeliveryTimeChange">
|
||
<label class="u-flex " :class="{
|
||
'u-m-b-40':index===0
|
||
}" v-for="(item, index) in DeliveryTime" :key="item.value">
|
||
<view>
|
||
<radio :color="ColorMain" :value="item.value"
|
||
:checked="index === DeliveryTimeCurrent" />
|
||
</view>
|
||
<view class="u-flex-1">
|
||
<template v-if="index===0">
|
||
<uni-datetime-picker v-model="FormData.startTime"
|
||
:hide-second="true" :end="limitDayTime">
|
||
<view class="u-flex u-row-between">
|
||
<view>
|
||
<text></text>
|
||
<text
|
||
class="color-999">{{FormData.startTime||'选择开始时间'}}</text>
|
||
</view>
|
||
<uni-icons type="right" color="#999"></uni-icons>
|
||
</view>
|
||
</uni-datetime-picker>
|
||
|
||
</template>
|
||
<template v-if="index===1">
|
||
<view class="u-flex ">
|
||
<view>
|
||
付款成功
|
||
</view>
|
||
<uni-easyinput :paddingNone="inputPaddingNone"
|
||
:placeholderStyle="placeholderStyle"
|
||
:inputBorder="false"
|
||
v-model="FormData.paySuccessAfterDay" type="number"
|
||
placeholder="请填写天数" />
|
||
|
||
|
||
<view>
|
||
天后交货
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
</label>
|
||
</radio-group>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="color-999 u-font-24 u-m-t-20 u-p-b-30">
|
||
<text class="color-red">*</text> 注意: 只允许设置{{limitDay}}天内的发货时间，请务必按照约定时间发货以免引起客户投诉
|
||
</view>
|
||
<view class="">
|
||
<uni-forms-item label="" required>
|
||
<slot name="label">
|
||
<view class="class">
|
||
<text class="label-title u-m-r-6">预售可预约天数</text>
|
||
<uni-icons @click="showModel('help')" color="#999"
|
||
type="help"></uni-icons>
|
||
</view>
|
||
</slot>
|
||
<view class="u-flex">
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :min="1" :max="15"
|
||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||
v-model="FormData.discountPrice" type="number" placeholder="填写天数" />
|
||
<text>天</text>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
</template> -->
|
||
<!-- <uni-forms-item label="" required>
|
||
<view class="u-flex u-row-between lh40">
|
||
<view class="label-title">库存</view>
|
||
<my-switch v-model="FormData.isStock"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
<view class="border-top-0 none-label" v-if="FormData.isStock">
|
||
<uni-forms-item label="" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.stockNumber" type="number"
|
||
placeholder="请填写库存" />
|
||
</uni-forms-item>
|
||
</view> -->
|
||
|
||
</view>
|
||
|
||
<template v-if="FormData.typeEnum==='sku' ">
|
||
<!-- <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="block border-top-0">
|
||
<uni-forms-item label=" ">
|
||
<view class="u-flex u-row-between " @tap="toGuige">
|
||
<view class="color-333 font-bold">
|
||
<text v-if="!skuList.length">选择规格</text>
|
||
<text v-else>编辑规格</text>
|
||
</view>
|
||
<uni-icons type="right"></uni-icons>
|
||
</view>
|
||
</uni-forms-item>
|
||
<template v-if="skuList.length">
|
||
<view class="u-text-center">
|
||
<view class="u-flex font-bold u-m-b-12">
|
||
<view class="u-flex-1">组合名称</view>
|
||
<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"
|
||
:key="index">
|
||
<view class="u-flex-1">{{item.specSnap}}</view>
|
||
<view class="u-flex-1">{{item.salePrice}}</view>
|
||
<view class="u-flex-1">{{item.stockNumber}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<template v-if="FormData.typeEnum==='group' ">
|
||
<!-- <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="font-bold u-m-t-32 u-m-b-32">套餐商品 </view>
|
||
<view class=" " v-if="FormData.groupSnap.length">
|
||
<view class="u-m-t-30 block border-top-0" v-for="(item,index) in FormData.groupSnap"
|
||
:key="index">
|
||
|
||
<uni-forms-item label="套餐名称" showRequired required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone"
|
||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||
v-model="item.title" placeholder="请输入套餐名称" />
|
||
</uni-forms-item>
|
||
<view>
|
||
<view class="font-bold">商品信息</view>
|
||
<view class="u-p-30 bg-gray u-m-t-20">
|
||
<view class="u-flex">
|
||
<view class="u-flex-1">名称</view>
|
||
<view class="u-flex-1 ">数量</view>
|
||
<view class=" ">操作</view>
|
||
</view>
|
||
<view class="u-flex u-m-t-20 u-row-between"
|
||
v-for="(product,goodsIndex) in item.goods" :key="goodsIndex"
|
||
@tap="groupSnapGoodsDel(index,goodsIndex)">
|
||
<view class="u-flex-1 u-flex u-p-r-60">
|
||
<view class="bg-fff u-flex-1 u-p-10">
|
||
{{product.name}}
|
||
</view>
|
||
</view>
|
||
<view class="u-flex-1 u-flex u-p-r-60">
|
||
<view class="bg-fff u-flex-1 u-p-10">
|
||
x1
|
||
</view>
|
||
</view>
|
||
<view class="u-flex">
|
||
<uni-icons type="minus-filled" :size="26"
|
||
:color="color.ColorRed"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="u-flex u-m-t-30" @tap="groupSnapAddGoods(index,item.goods)">
|
||
<uni-icons type="plus-filled" :color="color.ColorMain"
|
||
:size="26"></uni-icons>
|
||
<view class="u-m-l-16">添加商品</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<uni-forms-item label="几选几" showRequired required>
|
||
<uni-number-box :max="item.goods.length" :width="200" v-model="item.number"
|
||
placeholder="几选几"></uni-number-box>
|
||
</uni-forms-item>
|
||
|
||
<view class="u-flex u-m-t-30 u-m-b-20" @tap="delGroupSnap(index)">
|
||
<uni-icons type="minus-filled" :size="26" :color="color.ColorRed"></uni-icons>
|
||
<view class="u-m-l-16">删除分组</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-fff u-flex u-m-t-32 border-r-12 default-box-padding"
|
||
@tap="refChooseGoodsOpen">
|
||
<uni-icons type="plus-filled" :color="color.ColorMain" :size="26"></uni-icons>
|
||
<view class="u-m-l-16">添加分组</view>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-if="FormData.typeEnum!=='sku'">
|
||
<view class="u-m-t-32 u-font-32 u-m-l-10 u-m-b-32">规格属性</view>
|
||
<view class="block" v-for="(sku,index) in skuList" :key="index">
|
||
<view class="border-top-0">
|
||
<uni-forms-item label="售价">
|
||
<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="成本价（元）">
|
||
<uni-easyinput @blur="priceFormat(sku,'costPrice')" :paddingNone="inputPaddingNone"
|
||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||
v-model="sku.costPrice" type="digit" placeholder="请输入成本价（元）" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="原价（元）">
|
||
<uni-easyinput @blur="priceFormat(sku,'originPrice')"
|
||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="sku.originPrice" type="digit"
|
||
placeholder="请输入原价（元）" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="起售数量">
|
||
<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 @blur="priceFormat(sku,'stockNumber')"
|
||
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="sku.stockNumber" 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.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>
|
||
<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>
|
||
<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>
|
||
|
||
|
||
|
||
|
||
<!-- <view class="block">
|
||
<view class="border-top-0">
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex u-row-between lh40">
|
||
<view class="label-title">打折设置</view>
|
||
<my-switch v-model="FormData.openDiscount"
|
||
@change="openDiscountChange"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="border-top-0 none-label" v-if="FormData.openDiscount">
|
||
<uni-forms-item label="" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.discountPrice" type="digit"
|
||
placeholder="请填写折后价" />
|
||
</uni-forms-item>
|
||
</view>
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex u-row-between lh40">
|
||
<view class="label-title">不参与会员折扣</view>
|
||
<my-switch v-model="FormData.isVipDiscount"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="会员价（元）" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.vipPrice" type="digit"
|
||
placeholder="请输入会员价（元）" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="包装费（元）" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.packagingFee" type="digit"
|
||
placeholder="请输入包装费（元）" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="重量（千克）" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.weight" type="digit"
|
||
placeholder="请输入重量（千克）" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="赠送积分" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.integral" type="digit"
|
||
placeholder="请输入赠送积分" />
|
||
</uni-forms-item>
|
||
|
||
</view> -->
|
||
|
||
<!-- <view class="block">
|
||
<view class="border-top-0 ">
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex u-row-between lh40">
|
||
<view class="label-title">每日销量上限</view>
|
||
<my-switch v-model="FormData.openDailySalesLimit"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="border-top-0 none-label" v-if="FormData.openDailySalesLimit">
|
||
<uni-forms-item label="" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.dailySalesLimit" type="digit"
|
||
placeholder="请填写每日销量上限" />
|
||
</uni-forms-item>
|
||
</view>
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex u-row-between lh40">
|
||
<view class="label-title">每单限购</view>
|
||
<my-switch v-model="FormData.openOrderBuyLimit"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
<view class="border-top-0 none-label" v-if="FormData.openOrderBuyLimit">
|
||
<uni-forms-item label="" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.orderBuyLimit" type="digit"
|
||
placeholder="请填写每单限购" />
|
||
</uni-forms-item>
|
||
</view>
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex u-row-between lh40">
|
||
<view class="label-title">每人限购</view>
|
||
<my-switch v-model="FormData.openEveryoneBuyLimit"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
<view class="border-top-0 none-label" v-if="FormData.openEveryoneBuyLimit">
|
||
<uni-forms-item label="" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.everyoneBuyLimit" type="digit"
|
||
placeholder="请填写每人限购" />
|
||
</uni-forms-item>
|
||
</view>
|
||
<uni-forms-item label="最低起售（件）" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.minBuyLimit" type="number"
|
||
placeholder="请输入最低起售（件）" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="包装费（元）" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.packagingFee" type="digit"
|
||
placeholder="请输入包装费（元）" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="">
|
||
<view class="u-flex u-row-between" @tap="toTimerPage">
|
||
<view>
|
||
<view class="label-title">定时上下架</view>
|
||
</view>
|
||
<view class="u-flex">
|
||
<view class="color-666">{{returnTimerText()}}</view>
|
||
<uni-icons type="right"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item label="虚拟销量" required>
|
||
<uni-easyinput :paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
|
||
:inputBorder="inputBorder" v-model="FormData.virtualSales" type="number"
|
||
placeholder="虚拟销量" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex u-row-between lh40">
|
||
<view class="label-title">设为推荐</view>
|
||
<my-switch v-model="FormData.isRecommend"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
|
||
</view> -->
|
||
|
||
</uni-forms>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="bootom">
|
||
<view class="save-btn-box">
|
||
<my-button shape="circle" @tap="save">保存</my-button>
|
||
</view>
|
||
|
||
<view class="u-m-t-20" v-if="option.type==='edit'" @click="delModelShow">
|
||
<my-button shape="circle" type="cancel" bgColor="#fff">
|
||
<view class="color-red">删除该商品</view>
|
||
</my-button>
|
||
<!-- <text>删除该商品</text> -->
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<template v-if="tabsCurrent===1">
|
||
<view class="stock">
|
||
<uni-forms :border="false" err-show-type="toast" validateTrigger="submit" ref="Forms1">
|
||
<!-- <view class="block ">
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex">
|
||
<view class="label-title">库存模式</view>
|
||
<view class="u-flex-1 u-p-l-100">
|
||
<uni-data-checkbox v-model="stockData.inventoryMode"
|
||
:localdata="InventoryModeData"></uni-data-checkbox>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view> -->
|
||
<view class="block ">
|
||
<uni-forms-item label="">
|
||
<view class="u-flex u-row-between">
|
||
<view class="label-title">库存开关</view>
|
||
<my-switch v-model="FormData.isStock"
|
||
@change="updateProductStatus(FormData.id,'isStock')"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="block ">
|
||
<uni-forms-item label="">
|
||
<view class="u-flex u-row-between">
|
||
<view class="label-title">共享库存</view>
|
||
<my-switch v-model="FormData.isDistribute"
|
||
@change="updateProductStatus(FormData.id,'isDistribute')"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="block ">
|
||
<uni-forms-item label="">
|
||
<view class="u-flex u-row-between">
|
||
<view class="label-title">售罄</view>
|
||
<my-switch v-model="FormData.isPauseSale"
|
||
@change="updateProductStatus(FormData.id,'isPauseSale')"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
|
||
<template v-if="FormData.typeEnum!=='sku'">
|
||
<view class="block ">
|
||
<uni-forms-item label="">
|
||
<view class="u-flex u-row-between">
|
||
<view class="label-title">上架</view>
|
||
<my-switch v-model="FormData.isGrounding"
|
||
@change="updateProductStatus(FormData.id,'isGrounding')"></my-switch>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="block default-box-padding">
|
||
<view class="u-flex">
|
||
<view class="">
|
||
<my-button @tap="toRecoders" :height="60">库存记录</my-button>
|
||
</view>
|
||
<view class="u-m-l-40">
|
||
<my-button :height="60" @tap="toCheck">库存盘点</my-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<template v-else>
|
||
<view class="block default-box-padding">
|
||
<view class="u-flex">
|
||
<view class="">
|
||
<my-button @tap="toRecoders" :height="60">库存记录</my-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-text-center block">
|
||
<view class="u-flex font-bold u-m-t-30 u-m-b-20">
|
||
<!-- <view class="u-flex-1">商品信息</view> -->
|
||
<view class="u-flex-1">规格</view>
|
||
<view class="u-flex-1">库存</view>
|
||
<view class="u-flex-1">售罄</view>
|
||
<view class="u-flex-1">上架</view>
|
||
<view class="u-flex-1">操作</view>
|
||
</view>
|
||
<view class="" v-for="(item,index) in pageData.skuList" :key="index">
|
||
<view class="u-flex u-p-b-12 u-p-t-12 ">
|
||
<view class="u-flex-1">{{item.specSnap}}</view>
|
||
<!-- <view class="u-flex-1">{{item.salePrice}}</view> -->
|
||
<view class="u-flex-1">{{item.stockNumber}}{{item.unitName}}</view>
|
||
<view class="u-flex-1 u-flex u-row-center"><my-switch v-model="item.isPauseSale"
|
||
@change="updateProductStatus(item.skuId,'isPauseSale')"></my-switch>
|
||
</view>
|
||
<view class="u-flex-1 u-flex u-row-center"><my-switch v-model="item.isGrounding"
|
||
@change="updateProductStatus(item.skuId,'isGrounding')"></my-switch>
|
||
</view>
|
||
<view class="u-flex u-row-center">
|
||
<my-button @tap="skuToCheck(item)" :width="120" :height="40">
|
||
<view class="u-font-24 no-wrap">库存盘点</view>
|
||
</my-button>
|
||
<!-- <my-button @tap="moreShow(item,index)" :width="100" :height="40">
|
||
<view class="u-font-24 no-wrap">更多</view>
|
||
</my-button> -->
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<!-- <view class="block ">
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex">
|
||
<view class="label-title">剩余库存数量</view>
|
||
<view class="u-flex-1 u-p-l-40">
|
||
<uni-easyinput :paddingNone="inputPaddingNone"
|
||
:placeholderStyle="placeholderStyle" type="number"
|
||
:inputBorder="inputBorder" v-model="FormData.stockNumber"
|
||
placeholder="填写库存" />
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view> -->
|
||
<!-- <view class="block ">
|
||
<uni-forms-item label="" required>
|
||
<view class="u-flex">
|
||
<view class="label-title">库存模式</view>
|
||
<view class="u-flex-1 u-p-l-100">
|
||
<uni-data-checkbox v-model="stockData.inventoryReset"
|
||
:localdata="InventoryReset"></uni-data-checkbox>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</view> -->
|
||
</uni-forms>
|
||
|
||
<view class="btns">
|
||
<my-button shape="circle">保存</my-button>
|
||
<my-button shape="circle" type="default" @tap="back">取消</my-button>
|
||
</view>
|
||
</view>
|
||
</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>
|
||
|
||
|
||
|
||
|
||
</view>
|
||
|
||
<!-- 删除弹窗 -->
|
||
<my-model @confirm="delmodelConfirm" ref="delModel" desc="确认删除">
|
||
</my-model>
|
||
<!-- 选择商品 -->
|
||
<choose-goods ref="refChooseGoods" @confirm="refChooseGoodsConfirm" :category="pageData.category"></choose-goods>
|
||
<!-- 更多操作 -->
|
||
<my-action-sheet @itemClick="actionSheetClick" ref="refMoreSheet" :list="actionSheet.list"></my-action-sheet>
|
||
</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 myModel from '@/components/my-components/my-model'
|
||
import chooseGoods from './components/choose-goods'
|
||
import chooseGroupCategory from './components/choose-coupon-category'
|
||
import myRadio from '@/components/my-components/my-radio'
|
||
import myUploadFile from '@/components/my-components/my-upload-file'
|
||
import myTabs from '@/components/my-components/my-tabs'
|
||
import myButton from '@/components/my-components/my-button'
|
||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||
import infoBox from "@/commons/utils/infoBox.js"
|
||
import {
|
||
$types,
|
||
$defaultSku
|
||
} from '../goodsData.js'
|
||
import {
|
||
$getProductDetail,
|
||
$tbShopCategory,
|
||
$tbShopUnit,
|
||
$addProduct,
|
||
$updateProduct,
|
||
$delProduct,
|
||
$productSpec,
|
||
$updateProductStatus,
|
||
$updateGrounding
|
||
} 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';
|
||
|
||
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 refChooseGoods = ref(null)
|
||
let groupSnapIndex = undefined
|
||
|
||
function groupSnapAddGoods(index, arr) {
|
||
console.log(arr);
|
||
groupSnapIndex = index
|
||
refChooseGoods.value.open(arr.map(v => v.id))
|
||
}
|
||
|
||
function refChooseGoodsOpen() {
|
||
groupSnapIndex = undefined
|
||
refChooseGoods.value.open()
|
||
}
|
||
|
||
function refChooseGoodsClose() {
|
||
refChooseGoods.value.close()
|
||
}
|
||
|
||
function refChooseGoodsConfirm(arr) {
|
||
console.log(arr);
|
||
refChooseGoodsClose()
|
||
arr = arr.map(v => {
|
||
const {
|
||
id,
|
||
name,
|
||
groupNum,
|
||
unitName,
|
||
categoryId
|
||
} = v
|
||
return {
|
||
id,
|
||
name,
|
||
groupNum,
|
||
unitName,
|
||
categoryId
|
||
}
|
||
})
|
||
if (groupSnapIndex !== undefined) {
|
||
return FormData.groupSnap[groupSnapIndex].goods = arr
|
||
}
|
||
FormData.groupSnap.push({
|
||
title: '',
|
||
number: 1,
|
||
goods: arr
|
||
})
|
||
}
|
||
|
||
function groupSnapGoodsDel(index, goodsIndex) {
|
||
FormData.groupSnap[index].goods.splice(goodsIndex, 1)
|
||
}
|
||
|
||
function delGroupSnap(index) {
|
||
FormData.groupSnap.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]);
|
||
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 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: 20,
|
||
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(() => {
|
||
go.back()
|
||
}, 1000)
|
||
})
|
||
}
|
||
|
||
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 = ['基础设置', '库存设置']
|
||
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({
|
||
// images: [],
|
||
// name: '',
|
||
// goodsCode: '',
|
||
// shortTitle: '',
|
||
// goodsDetail: '',
|
||
// goodsDetail: '',
|
||
// categoryId: '',
|
||
// salesMethod: 0,
|
||
// startTime: '',
|
||
// isStock: false,
|
||
// isVipDiscount: false,
|
||
// packagingFee: 0,
|
||
// weight: 0,
|
||
// integral: 0,
|
||
// openDailySalesLimit: false,
|
||
// dailySalesLimit: '',
|
||
// openOrderBuyLimit: false,
|
||
// orderBuyLimit: 0,
|
||
// openEveryoneBuyLimit: false,
|
||
// everyoneBuyLimit: 0,
|
||
// minBuyLimit: 0,
|
||
// specificationsPattern: '',
|
||
// specificationsGroup: '',
|
||
// paySuccessAfterDay: '',
|
||
// openDiscount: false,
|
||
// discountPrice: 0,
|
||
// isVipDiscount: false,
|
||
// vipPrice: 0,
|
||
// packagingFee: 0,
|
||
// virtualSales: 0,
|
||
// isRecommend: false,
|
||
// timer: [],
|
||
// isShowCash: 1,
|
||
// isShowMall: 1,
|
||
// })
|
||
const FormData = reactive({
|
||
id: "",
|
||
typeEnum: "normal",
|
||
specificationsGroup: '',
|
||
name: "",
|
||
shortTitle: "", //商品介绍
|
||
unitId: "",
|
||
unitName: "",
|
||
categoryId: "", // 商品分类id
|
||
coverImg: "",
|
||
images: [],
|
||
shopId: uni.getStorageSync('shopId'),
|
||
lowPrice: "",
|
||
skuList: [],
|
||
isShowMall: 1,
|
||
isShowCash: 1,
|
||
isStock: 0,
|
||
packFee: 0,
|
||
specId: "",
|
||
baseSalesNumber: 0,
|
||
sort: 0,
|
||
groupSnap: [],
|
||
specInfo: [],
|
||
selectSpec: [],
|
||
specTableHeaders: [],
|
||
skuSnap: "",
|
||
groupCategoryId: [],
|
||
notices: {
|
||
availableTime: "",
|
||
bookingType: "",
|
||
dateUsed: "",
|
||
discountInfo: "",
|
||
groupPurInfo: "",
|
||
invoiceInfo: "",
|
||
marketPriceInfo: "",
|
||
platformTips: "",
|
||
refundPolicy: "",
|
||
usageRules: ""
|
||
}
|
||
})
|
||
const skuList = reactive([{
|
||
...$defaultSku,
|
||
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
|
||
}])
|
||
//库存表单数据
|
||
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
|
||
}
|
||
})
|
||
$goodsData = res
|
||
Object.assign(FormData, res)
|
||
if (res.skuList.length) {
|
||
for (let i in res.skuList) {
|
||
skuList[i] = res.skuList[i]
|
||
}
|
||
}
|
||
//多规格
|
||
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 {
|
||
// text: v,
|
||
// value: 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
|
||
}
|
||
}),
|
||
specList: [],
|
||
}
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
//获取分类
|
||
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,
|
||
// 单位
|
||
units: [],
|
||
// 分类
|
||
category: [],
|
||
// 规格
|
||
specList: [],
|
||
//库存
|
||
skuList: []
|
||
})
|
||
//查询商品库存
|
||
function getProductSku() {
|
||
$getProductSku(option.productId).then(res => {
|
||
pageData.skuList = res
|
||
})
|
||
}
|
||
onLoad((params) => {
|
||
if (isEmpty(params)) {
|
||
option.type = params.type ? params.type : 'add'
|
||
option.productId = params.productId
|
||
|
||
// getGoodsDetail()
|
||
// getProductSku()
|
||
}
|
||
|
||
console.log(option.type);
|
||
uni.setNavigationBarTitle({
|
||
title: option.type === 'add' ? '添加商品' : '编辑商品'
|
||
})
|
||
defaultValueInit()
|
||
getCategory()
|
||
getTbShopUnit()
|
||
getTbProductSpec()
|
||
})
|
||
|
||
onShow(() => {
|
||
if (option.type === 'edit') {
|
||
getGoodsDetail()
|
||
getProductSku()
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
function openDiscountChange() {
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
let tabsCurrent = ref(0)
|
||
|
||
function tabsChange(i) {
|
||
tabsCurrent.value = i
|
||
// if (tabsCurrent.value === 1 && option.type === 'add') {
|
||
// showModel('stockTips')
|
||
// }
|
||
}
|
||
|
||
let timer = null
|
||
|
||
function settimeoutBack(time) {
|
||
clearTimeout(timer)
|
||
timer = setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, time)
|
||
}
|
||
|
||
//保存
|
||
function save() {
|
||
Forms.value.validate().then(res => {
|
||
const {
|
||
typeEnum,
|
||
groupCategoryId
|
||
} = FormData
|
||
if (typeEnum === 'group' && !groupCategoryId.length) {
|
||
return infoBox.showToast('请选择团购券分类')
|
||
}
|
||
// if(typeEnum==='sku'){
|
||
// return infoBox.showErrorToast('请选择规格')
|
||
// }
|
||
const images = refFile.value.getFileList()
|
||
const skuSnap = []
|
||
const submitSkuList = FormData.specificationsGroup ? skuList : [{
|
||
...$defaultSku,
|
||
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
|
||
}]
|
||
if (FormData.specificationsGroup) {
|
||
for (let i of FormData.specificationsGroup.selectSpec) {
|
||
if (i.selectSpecResult.length) {
|
||
skuSnap.push({
|
||
label: i.name,
|
||
value: i.selectSpecResult.join(',')
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
const submitData = {
|
||
...FormData,
|
||
images: images,
|
||
coverImg: images[0] || '',
|
||
skuList: submitSkuList,
|
||
specInfo: JSON.stringify(submitSkuList),
|
||
lowPrice: submitSkuList[0].salePrice,
|
||
specificationsGroup: undefined,
|
||
selectSpec: JSON.stringify(FormData.specificationsGroup.selectSpec),
|
||
skuSnap: JSON.stringify(skuSnap)
|
||
}
|
||
//编辑
|
||
if (option.type === 'edit') {
|
||
return $updateProduct(submitData).then(res => {
|
||
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(/.$/, "")
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 监听规格保存,拿到数据
|
||
* @param {Boolean} open //控制开启或关闭监听
|
||
*/
|
||
function watchSpecificationsSave(open = true) {
|
||
if (open) {
|
||
uni.$on('emitspecificationsSave', function(data) {
|
||
FormData.specificationsGroup = data
|
||
skuList.length = data.result.length
|
||
for (let i in data.result) {
|
||
const v = data.result[i]
|
||
skuList[i] = {
|
||
...v.skus,
|
||
...v.names,
|
||
specSnap: v.specSnap,
|
||
}
|
||
}
|
||
console.log(skuList);
|
||
})
|
||
} else {
|
||
uni.$off('emitspecificationsSave', function(data) {
|
||
console.log('emitspecificationsSave remove');
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
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',
|
||
productId: option.productId
|
||
})
|
||
// go.to('PAGES_PRODUCT_GUIGE_ADD', {
|
||
// emitName: 'emitspecificationsSave',
|
||
// })
|
||
}
|
||
|
||
/**
|
||
* 监听定时器保存,拿到数据
|
||
* @param {Boolean} open //控制开启或关闭监听
|
||
*/
|
||
function watchTimerSave(open = true) {
|
||
if (open) {
|
||
uni.$on('timerSave', function(timer) {
|
||
console.log('timerSave get');
|
||
console.log(timer);
|
||
FormData.timer = timer
|
||
})
|
||
} else {
|
||
uni.$off('timerSave', function(data) {
|
||
console.log('timerSave remove');
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
function toTimerPage() {
|
||
uni.setStorageSync('timer', FormData.timer)
|
||
go.to('PAGES_PRODUCT_TIMER')
|
||
}
|
||
|
||
function returnTimerText() {
|
||
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 === 'add') {
|
||
if (newval === 'sku') {
|
||
skuList.length = 0
|
||
} else {
|
||
skuList[0] = {
|
||
...$defaultSku,
|
||
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
|
||
}
|
||
}
|
||
}
|
||
})
|
||
watchSpecificationsSave()
|
||
watchTimerSave()
|
||
onBeforeUnmount(() => {
|
||
watchSpecificationsSave(false)
|
||
watchTimerSave(false)
|
||
})
|
||
onReady(() => {
|
||
Forms.value.setRules(rules)
|
||
})
|
||
watch(() => pageData.types, (newval) => {
|
||
Forms.value.setRules(rules)
|
||
})
|
||
</script>
|
||
<style scoped>
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.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;
|
||
}
|
||
|
||
.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: 110rpx;
|
||
}
|
||
|
||
.box {
|
||
margin-top: 70rpx;
|
||
font-size: 28rpx;
|
||
|
||
.block {
|
||
background: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
padding: 12rpx 24rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
}
|
||
|
||
|
||
::v-deep.uni-forms-item {
|
||
align-items: inherit;
|
||
}
|
||
|
||
::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;
|
||
}
|
||
|
||
::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 .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;
|
||
}
|
||
|
||
.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> |