267 lines
7.1 KiB
Vue
267 lines
7.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="">
|
|
<u-button icon="plus" text="新增规格" @click="pushFn" class="custom-style" iconColor='#38BE41'></u-button>
|
|
</view>
|
|
<view class="card" v-for="(item,index) in attrValue">
|
|
<view class="card-head card-li">
|
|
<text style="font-size: 32rpx;font-family: PingFangFamily;">规格{{index+1}}</text>
|
|
<view class="" style="width: 300rpx;">
|
|
<u--input placeholder="请输入规格名称" inputAlign='right' v-model="formData.attr[index].value"></u--input>
|
|
</view>
|
|
</view>
|
|
<u-line direction="row" style="margin: 30rpx 0;" color="#ECECEC"></u-line>
|
|
|
|
<view class="">
|
|
<view class="" style="display: flex;align-items: center;justify-content: space-between;">
|
|
<u--input style="flex: 2; background-color: #F6F6F6;" placeholder="请输入商品单价" v-model="item.price"
|
|
type='number'></u--input>
|
|
<view class="" style="flex: 1;text-align: center;">
|
|
/
|
|
</view>
|
|
<u--input style=" flex: 2;width:100rpx;background-color: #F6F6F6;" placeholder="请输入计量单位"
|
|
v-model="item.unit_name"></u--input>
|
|
</view>
|
|
<view class="" v-if='isWholeSale'
|
|
style="display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;">
|
|
<u--input style="flex: 2; background-color: #F6F6F6;" placeholder="请输批发价格"
|
|
v-model="item.wholesale_price" type='number'></u--input>
|
|
<view class="" style="flex: 1;text-align: center;">
|
|
/
|
|
</view>
|
|
<u--input style=" flex: 2;width:100rpx;background-color: #F6F6F6;" placeholder="请输入计量单位"
|
|
v-model="item.wholesale_unit_name"></u--input>
|
|
</view>
|
|
</view>
|
|
<u-line direction="row" style="margin: 25rpx 0;" color="#ECECEC"></u-line>
|
|
<view class=" card-li">
|
|
<text style="font-size: 32rpx;">商品库存</text>
|
|
<view class="" style="width: 300rpx;">
|
|
<u--input type='number' placeholder="请填写库存数量" inputAlign='right' v-model="item.stock"></u--input>
|
|
</view>
|
|
</view>
|
|
<u-line direction="row" style="margin: 25rpx 0;" color="#ECECEC"></u-line>
|
|
<view class=" card-li">
|
|
<text style="font-size: 32rpx;">条形码</text>
|
|
<view class="" style="width: 300rpx;">
|
|
<u--input placeholder="请填写商品条形码" inputAlign='right' v-model="item.bar_code"
|
|
type='number'></u--input>
|
|
</view>
|
|
</view>
|
|
<u-line direction="row" style="margin: 25rpx 0;" color="#ECECEC"></u-line>
|
|
<view class="card-li">
|
|
<view style="display: flex;color: #777777;"
|
|
@click="attrValue.splice(index,1),formData.attr.splice(index,1)">
|
|
<u-icon name="trash" style='margin-right: 8rpx;'></u-icon> 删除
|
|
</view>
|
|
<view class="" style="display: flex;align-items: center;">
|
|
<u-switch v-model="item.is_use" type='primaryy' activeColor="#38BE41" size="19"></u-switch>
|
|
<text style="margin-left: 8rpx;color: #777777;">启用</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="submit-btn">
|
|
<u-button type="primary" shape="circle" text="保存" @click="submit"></u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
formatDate
|
|
} from '../../../libs/uniApi'
|
|
export default {
|
|
data() {
|
|
return {
|
|
mer_id: "",
|
|
isWholeSale: "",
|
|
text: "",
|
|
value: "",
|
|
formData: {},
|
|
"attrValue": [{
|
|
detail: {
|
|
规格名: 'attr[index]value',
|
|
},
|
|
"price": "",
|
|
"unit_name": "",
|
|
"wholesale_unit_name": "",
|
|
"wholesale_price": '',
|
|
"cost": "",
|
|
"stock": "",
|
|
sku: 'attr[index]value',
|
|
"ot_price": "",
|
|
"procure_price": "",
|
|
"bar_code": "",
|
|
"weight": "",
|
|
"extension_one": "",
|
|
"extension_two": "",
|
|
uuid: "",
|
|
volume: "",
|
|
"is_use": 0,
|
|
}],
|
|
rules: {
|
|
price: '单价不能为空',
|
|
unit_name: '计量单位不能为空',
|
|
wholesale_price: '批发价格不能为空',
|
|
wholesale_unit_name: '批发单位不能为空',
|
|
stock: '库存不能为空'
|
|
}
|
|
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
pushFn() {
|
|
this.attrValue.push({
|
|
detail: {
|
|
规格名: 'attr[index]value',
|
|
},
|
|
"price": "",
|
|
"unit_name": "",
|
|
"wholesale_unit_name": "",
|
|
"wholesale_price": '',
|
|
"cost": "",
|
|
"stock": "",
|
|
sku: 'attr[index]value',
|
|
"ot_price": "",
|
|
"procure_price": "",
|
|
"bar_code": "",
|
|
"weight": "",
|
|
"extension_one": "",
|
|
"extension_two": "",
|
|
uuid: "",
|
|
volume: "",
|
|
"is_use": true,
|
|
|
|
})
|
|
this.formData.attr.push({
|
|
value: '',
|
|
detail: [],
|
|
})
|
|
|
|
},
|
|
submit() {
|
|
let errList = []
|
|
if (!this.isWholeSale) {
|
|
delete this.rules.wholesale_unit_name
|
|
delete this.rules.wholesale_price
|
|
}
|
|
this.attrValue.forEach(item => {
|
|
for (let key in this.rules) {
|
|
if (!item[key]) {
|
|
errList.push(this.rules[key])
|
|
}
|
|
}
|
|
})
|
|
if (errList.length > 0) {
|
|
uni.$u.toast(errList[0])
|
|
return
|
|
}
|
|
let flag = false
|
|
if (this.formData.attr.length > 1) {
|
|
this.formData.attr.forEach(item => {
|
|
if (!item.value) {
|
|
flag = true
|
|
}
|
|
})
|
|
}
|
|
if (flag) {
|
|
uni.$u.toast('请填写规格名称')
|
|
return
|
|
}
|
|
this.formData.attrValue = this.attrValue
|
|
this.formData.attrValue.forEach(item => {
|
|
item.is_use = item.is_use ? '0' : '1'
|
|
})
|
|
let that = this
|
|
this.formData.attrValue.forEach((item, index) => {
|
|
item.detail.规格名 = this.formData.attr[index].value
|
|
item.sku = this.formData.attr[index].value
|
|
|
|
})
|
|
this.formData.spec_type = this.formData.attrValue.length > 1 ? '1' : '0'
|
|
uni.reLaunch({
|
|
url: `/pages/product/addGoodDetail/addGoodDetail?mer_id=${that.mer_id}&&formData=${JSON.stringify(that.formData) }&&showSet=${true}`
|
|
})
|
|
},
|
|
initFomrData(option) {
|
|
if (option.mer_id) {
|
|
this.mer_id = option.mer_id
|
|
}
|
|
if (option.formData) {
|
|
this.formData = JSON.parse(option.formData)
|
|
}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.isWholeSale = this.$store.state.app.userInfo?.mer_info?.wholesale == 2;
|
|
this.initFomrData(option)
|
|
this.attrValue = this.formData.attrValue
|
|
this.attrValue.forEach(item => {
|
|
item.is_use = !Boolean(Number(item.is_use))
|
|
})
|
|
if (this.formData.attr.length == 0) {
|
|
this.formData.attr.push({
|
|
value: '',
|
|
detail: [],
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
.custom-style {
|
|
color: $uni-newTheme-color;
|
|
height: 104rpx;
|
|
}
|
|
|
|
.content {
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
background-color: #F1F1F1;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
font-size: 28rpx;
|
|
font-family: PingFangRegular;
|
|
padding-bottom: 200rpx;
|
|
/* font-family: PingFangFamily; */
|
|
|
|
|
|
.card {
|
|
margin-top: 30rpx;
|
|
padding: 30rpx 46rpx;
|
|
background-color: white;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
|
position: relative;
|
|
|
|
.card-li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.card-head::after {
|
|
content: '';
|
|
position: absolute;
|
|
font-size: 32rpx;
|
|
left: 20rpx;
|
|
width: 8rpx;
|
|
height: 32rpx;
|
|
top: 50rpx;
|
|
background-color: #40AE36;
|
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
}
|
|
|
|
.submit-btn {
|
|
position: fixed;
|
|
bottom: 50rpx;
|
|
width: 670rpx;
|
|
}
|
|
}
|
|
</style> |