392 lines
11 KiB
Vue
392 lines
11 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;">规格{{index+1}}</text>
|
|
<view class="" style="width: 300rpx;">
|
|
<!-- {{formData.attr}} -->
|
|
<!-- <u--input placeholder="请输入规格名称" inputAlign='right' v-model="formData.attr[index].value"></u--input> -->
|
|
<u--input placeholder="请输入规格名称" inputAlign='right' v-model="item.sku"></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>
|
|
<view class="" @click="unitIptClick(index,false)" style="width: 100rpx;flex: 2.4">
|
|
<u--input readonly style=" background-color: #F6F6F6;pointer-events: none;"
|
|
placeholder="请输入计量单位" v-model="item.unit_name"></u--input>
|
|
</view>
|
|
|
|
</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>
|
|
<view class="" @click="unitIptClick(index,true)" style="width: 100rpx;flex: 2.4">
|
|
<u--input style="background-color: #F6F6F6;pointer-events: none;" readonly placeholder="请输入计量单位"
|
|
v-model="item.wholesale_unit_name"></u--input>
|
|
</view>
|
|
|
|
</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>
|
|
|
|
<u-popup :show="showPouple" @close="showPouple=false" @open="showPouple=true" :round="10">
|
|
<view class="RegularFont" style="padding: 42rpx 40rpx">
|
|
<view class="pop-head">
|
|
<text v-if='!showCustom' @click='showPouple=false'>取消</text>
|
|
<text v-else @click='showCustom=false'>
|
|
<u-icon name="arrow-left" size="20"></u-icon>
|
|
</text>
|
|
<text style="font-size:32rpx ;color:#333333 ;">计量单位</text>
|
|
<text v-if='showCustom' @click='addAttr'>确定</text>
|
|
<text v-else></text>
|
|
</view>
|
|
<view style="height: 500rpx;">
|
|
<u-transition :show="!showCustom" mode="slide-right">
|
|
<view class="goods-leval">
|
|
<view class="goods-leval-li" v-for='(item,index) in attrList' :key='index'
|
|
@click='choseAttr(item)'>
|
|
{{item}}
|
|
</view>
|
|
<view class="goods-leval-li " style="display: flex;color:#38BE41 ;"
|
|
@click="showCustom=true">
|
|
<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'></u-icon> 自定义
|
|
</view>
|
|
</view>
|
|
</u-transition>
|
|
<u-transition :show="showCustom" mode="slide-left">
|
|
<view class="transition">
|
|
<u--textarea v-model="selfAttr" placeholder="请输入计量单位"></u--textarea>
|
|
</view>
|
|
</u-transition>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
formatDate
|
|
} from '../../../libs/uniApi'
|
|
export default {
|
|
data() {
|
|
return {
|
|
selfAttr: "",
|
|
attrList: ['斤',
|
|
"公斤",
|
|
"吨",
|
|
"升",
|
|
"个",
|
|
"台",
|
|
"瓶",
|
|
"桶",
|
|
"箱",
|
|
"袋",
|
|
"包",
|
|
"盒",
|
|
"件",
|
|
"罐"
|
|
],
|
|
showCustom: false, //计量单位自定义
|
|
showPouple: false,
|
|
unitIndex: 0,
|
|
mer_id: "",
|
|
isWholeSale: "",
|
|
isWhose: false,
|
|
text: "",
|
|
value: "",
|
|
formData: {},
|
|
"attrValue": [{
|
|
detail: {
|
|
' ': '',
|
|
},
|
|
"price": "",
|
|
"unit_name": "",
|
|
"wholesale_unit_name": "",
|
|
"wholesale_price": '',
|
|
"cost": "",
|
|
"stock": "",
|
|
sku: '',
|
|
"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: {
|
|
choseAttr(name) {
|
|
this.isWhose ?
|
|
this.attrValue[this.unitIndex].wholesale_unit_name = name :
|
|
this.attrValue[this.unitIndex].unit_name = name;
|
|
this.showPouple = false
|
|
},
|
|
addAttr() {
|
|
if (!this.selfAttr) return;
|
|
this.attrList.push(this.selfAttr)
|
|
this.isWhose ?
|
|
this.attrValue[this.unitIndex].wholesale_unit_name = this.attrList[this.attrList.length - 1] :
|
|
this.attrValue[this.unitIndex].unit_name = this.attrList[this.attrList.length - 1];
|
|
// this.attrValue[this.unitIndex].unit_name = this.attrList[this.attrList.length - 1]
|
|
// this.attrValue[this.unitIndex].wholesale_unit_name = this.attrList[this.attrList.length - 1]
|
|
this.selfAttr = ''
|
|
this.showCustom = false
|
|
this.showPouple = false
|
|
},
|
|
// hide() {
|
|
// uni.hideKeyboard()
|
|
// },
|
|
unitIptClick(index, type) {
|
|
this.isWhose = type
|
|
this.unitIndex = index
|
|
this.showPouple = true
|
|
uni.hideKeyboard()
|
|
},
|
|
pushFn() {
|
|
this.attrValue.push({
|
|
detail: {
|
|
' ': '',
|
|
},
|
|
"price": "",
|
|
"unit_name": "",
|
|
"wholesale_unit_name": "",
|
|
"wholesale_price": '',
|
|
"cost": "",
|
|
"stock": "",
|
|
sku: '',
|
|
"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 (this.attrValue.length > 1) {
|
|
if (!item['sku']) {
|
|
errList.push('规格名称不能为空')
|
|
}
|
|
}
|
|
})
|
|
if (errList.length > 0) {
|
|
console.log(errList)
|
|
uni.$u.toast(errList[0])
|
|
return
|
|
}
|
|
console.log(this.attrValue)
|
|
// 校验结束
|
|
this.formData.attr[0].detail = []
|
|
this.attrValue.forEach(item => {
|
|
typeof(item.detail) == 'object' ?
|
|
item.detail[' '] = item.sku: (item.detail = {}, item.detail[' '] = item.sku)
|
|
console.log(this.formData.attr)
|
|
this.formData.attr[0].detail.push(item.sku)
|
|
})
|
|
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.redirectTo({
|
|
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: [],
|
|
})
|
|
}
|
|
console.log(this.formData)
|
|
}
|
|
|
|
}
|
|
</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;
|
|
padding-bottom: 200rpx;
|
|
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.pop-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #20B128;
|
|
margin-bottom: 42rpx;
|
|
}
|
|
|
|
.goods-leval {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
|
|
.goods-leval-li {
|
|
margin-right: 20rpx;
|
|
padding: 10rpx 40rpx;
|
|
height: 60rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
|
background-color: #F1F1F1;
|
|
}
|
|
|
|
.act {
|
|
color: #20B128;
|
|
background-color: #E8F7E9;
|
|
border: 1px solid #20B128;
|
|
|
|
|
|
}
|
|
}
|
|
</style> |