426 lines
12 KiB
Vue
426 lines
12 KiB
Vue
<template>
|
|
<view class="u-p-30 safe-page">
|
|
<myTabs :list="tabsList" @change="tabsChange"></myTabs>
|
|
<view class="box">
|
|
<view class="basic">
|
|
<uni-forms :border="true" label-position="top" err-show-type="undertext" validateTrigger="blur"
|
|
label-width="350"
|
|
ref="Forms"
|
|
:model="FormData" :rules="rules">
|
|
<view class="block">
|
|
<uni-forms-item label="图片">
|
|
<uni-file-picker v-model="FormData.images" file-mediatype="image" mode="grid" :limit="10"
|
|
@progress="FileUploadprogress" @success="FileUploadsuccess" @fail="FileUploadail"
|
|
@select="FileUploadselect" />
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="goodsName" label="商品名称" >
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.goodsName" placeholder="请输入商品名称" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="产品编码" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.goodsCode" placeholder="请输入商品编码" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="商品描述" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" type="textarea"
|
|
v-model="FormData.goodsDesc" placeholder="请填写商品简述" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="商品详情" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" type="textarea"
|
|
v-model="FormData.goodsDetail" placeholder="请填写商品详情" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="所属分类" required>
|
|
<view style="display: none;"><uni-easyinput :inputBorder="inputBorder"
|
|
v-model="FormData.category" placeholder="请选择所属分类" /></view>
|
|
<picker @change="categoryChange" :value="category.defaultCateIndex" :range="category.list">
|
|
<view class="u-flex u-row-between lh40">
|
|
<view class="color-333">{{category.list[FormData.category]||'分类'}}</view>
|
|
<uni-icons type="right"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="规格模式" required>
|
|
<uni-data-checkbox v-model="FormData.specificationsPattern"
|
|
:localdata="specificationMode" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label=" " required>
|
|
<view class="u-flex u-row-between zuofa" @tap="go.to('PAGES_PRODUCT_GUIGE_ADD')">
|
|
<view class="color-333">{{FormData.specificationsGroup||'添加规格组'}}</view>
|
|
<uni-icons type="right"></uni-icons>
|
|
</view>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="底价（元）" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.floorPrice" placeholder="请输入底价（元）" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="售卖方式" required>
|
|
<view style="display: none;"><uni-easyinput :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">
|
|
<view class="color-333">{{salesMethod.list[FormData.salesMethod]||'售卖方式'}}</view>
|
|
<uni-icons type="right"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="" required>
|
|
<view class="u-flex u-row-between lh40">
|
|
<view class="label-title">库存</view>
|
|
<switch :color="ColorMain" :checked="FormData.stock" class="my-switch" />
|
|
</view>
|
|
</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.openDiscount" @change="openDiscountChange"></my-switch>
|
|
<!-- <switch :color="ColorMain" :checked="openDiscount" class="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 :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>
|
|
<switch :color="ColorMain" :checked="FormData.isVipDiscount" class="my-switch" />
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="会员价（元）" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.vipPrice" type="digit" placeholder="请输入会员价（元）" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="包装费（元）" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.packagingFee" type="digit" placeholder="请输入包装费（元）" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="重量（千克）" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.weight" type="digit" placeholder="请输入重量（千克）" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="赠送积分" required>
|
|
<uni-easyinput :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>
|
|
<switch :color="ColorMain" :checked="FormData.stock" class="my-switch" />
|
|
</view>
|
|
</uni-forms-item>
|
|
</view>
|
|
<uni-forms-item label="" required>
|
|
<view class="u-flex u-row-between lh40">
|
|
<view class="label-title">每单限购</view>
|
|
<switch :color="ColorMain" :checked="FormData.isVipDiscount" class="my-switch" />
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="最低起售（件）" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.vipPrice" type="digit" placeholder="请输入最低起售（件）" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="包装费（元）" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.packagingFee" type="digit" placeholder="请输入包装费（元）" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="虚拟销量" required>
|
|
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
|
v-model="FormData.virtualSales" type="digit" placeholder="虚拟销量" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="" required>
|
|
<view class="u-flex u-row-between lh40">
|
|
<view class="label-title">设为推荐</view>
|
|
<switch :color="ColorMain" :checked="FormData.isRecommend" class="my-switch" />
|
|
</view>
|
|
</uni-forms-item>
|
|
|
|
</view>
|
|
</uni-forms>
|
|
<view class="save-btn-box">
|
|
<button class="save-btn" @click="save" hover-class="btn-hover-class">保存</button>
|
|
</view>
|
|
<view class="u-text-center color-red">
|
|
<text>删除该商品</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="stock">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ColorMain
|
|
} from '@/commons/color.js'
|
|
import go from '@/commons/utils/go.js';
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app';
|
|
|
|
import {
|
|
onBeforeUnmount,
|
|
onUnmounted,
|
|
reactive,
|
|
ref,
|
|
watch
|
|
} from 'vue';
|
|
import myTabs from '@/pageProduct/components/my-tabs.vue'
|
|
import mySwitch from '@/pageProduct/components/my-switch.vue'
|
|
const rules = {
|
|
GoodsName: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入商品名称',
|
|
},
|
|
{
|
|
minLength: 1,
|
|
maxLength: 20,
|
|
errorMessage: '商品名称长度在 {minLength} 到 {maxLength} 个字符',
|
|
}
|
|
]
|
|
}
|
|
}
|
|
const tabsList = ['基础设置', '库存设置']
|
|
const Forms=ref(null)
|
|
// 表单样式
|
|
const placeholderStyle = 'font-size:28rpx;'
|
|
//规格模板类型
|
|
const specificationMode = [{
|
|
text: '普通',
|
|
value: '普通'
|
|
},
|
|
{
|
|
text: '图片式',
|
|
value: '图片式'
|
|
},
|
|
{
|
|
text: '规格模版',
|
|
value: '规格模版'
|
|
}
|
|
]
|
|
let myTest = ref(false)
|
|
//表单边框
|
|
const inputBorder = ref(false)
|
|
//表单数据
|
|
const FormData = reactive({
|
|
goodsName: '',
|
|
GoodsNum: '',
|
|
images: [],
|
|
category: '',
|
|
salesMethod: 0,
|
|
stock: false,
|
|
isVipDiscount: false,
|
|
packagingFee: 0,
|
|
weight: 0,
|
|
integral: 0,
|
|
specificationsPattern: '',
|
|
specificationsGroup: '',
|
|
|
|
openDiscount: false,
|
|
discountPrice: '',
|
|
isVipDiscount: false,
|
|
vipPrice: '',
|
|
packagingFee: '',
|
|
virtualSales: '',
|
|
isRecommend: false
|
|
})
|
|
|
|
|
|
//售卖方式
|
|
const salesMethod = reactive({
|
|
list: ['现货', '预售', '仅展示商品'],
|
|
defaultIndex: 0,
|
|
})
|
|
|
|
function salesMethodChange(e) {
|
|
FormData.salesMethod = e.detail.value
|
|
salesMethod.defaultIndex = e.detail.value
|
|
}
|
|
|
|
let option = {
|
|
type: 'add'
|
|
}
|
|
// 判断是否为一个空对象
|
|
function isEmpty(obj) {
|
|
return obj && JSON.stringify(obj) !== '{}'
|
|
}
|
|
onLoad((params) => {
|
|
if (isEmpty(params)) {
|
|
option = params.type ? params : option
|
|
}
|
|
uni.setNavigationBarTitle({
|
|
title: option.type === 'add' ? '添加商品' : '编辑商品'
|
|
})
|
|
|
|
})
|
|
|
|
function openDiscountChange() {
|
|
|
|
}
|
|
|
|
//图片上次
|
|
function FileUploadprogress() {
|
|
|
|
}
|
|
|
|
function FileUploadsuccess() {
|
|
|
|
}
|
|
|
|
function FileUploadail() {
|
|
|
|
}
|
|
|
|
function FileUploadselect() {
|
|
|
|
}
|
|
|
|
|
|
|
|
//分类
|
|
const category = reactive({
|
|
list: ['分类', '分类1', '分类2'],
|
|
defaultCateIndex: 0,
|
|
})
|
|
|
|
function categoryChange(e) {
|
|
FormData.category = e.detail.value
|
|
category.defaultCateIndex = e.detail.value
|
|
}
|
|
|
|
|
|
|
|
function tabsChange(i) {
|
|
console.log(i);
|
|
}
|
|
|
|
function save(){
|
|
Forms.value.validate().then(res=>{
|
|
console.log(res);
|
|
}).catch(err=>{
|
|
console.log(err);
|
|
})
|
|
}
|
|
|
|
|
|
/**
|
|
* 监听规格保存,拿到数据
|
|
* @param {Boolean} open //控制开启或关闭监听
|
|
*/
|
|
function watchSpecificationsSave(open = true) {
|
|
if (open) {
|
|
uni.$on('emitspecificationsSave', function(data) {
|
|
console.log(data);
|
|
})
|
|
} else {
|
|
uni.$off('emitspecificationsSave', function(data) {
|
|
console.log('emitspecificationsSave remove');
|
|
})
|
|
}
|
|
|
|
}
|
|
watchSpecificationsSave()
|
|
onBeforeUnmount(() => {
|
|
watchSpecificationsSave(false)
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
page {
|
|
background: #F9F9F9;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.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;
|
|
}
|
|
|
|
.box {
|
|
margin-top: 70rpx;
|
|
font-size: 28rpx;
|
|
|
|
.block {
|
|
background: #FFFFFF;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
padding: 12rpx 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
}
|
|
|
|
.save-btn-box {
|
|
padding: 64rpx 110rpx 64rpx 110rpx;
|
|
}
|
|
|
|
::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 .border-top-0 .uni-forms-item.is-direction-top {
|
|
border-color: transparent !important;
|
|
}
|
|
::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;
|
|
}
|
|
</style> |