You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
663 lines
18 KiB
663 lines
18 KiB
<template> |
|
<view class="container"> |
|
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
|
<block slot="backText">返回</block> |
|
<block slot="content">新增商品</block> |
|
</cu-custom> |
|
<view id="chooseType" :class="currentBoxId == 'chooseType' ? 'show' : 'hidden'"> |
|
<uni-forms ref="productForm" :modelValue="productDate" :rules="rules" label-width="200rpx"> |
|
<uni-forms-item label="商品分类:" name="name"> |
|
<mulpicker |
|
v-model="productDate.demandRegion" |
|
:list="productList" |
|
rangekey="categoryName" |
|
code="id" |
|
pidkey="id" |
|
childkey="classificationTwoList" |
|
:emitPath="true" |
|
:level="2" |
|
:placeholder="'选择商品分类'" |
|
/> |
|
<uni-icons color="#666666" type="right" size="22" style="position: absolute;right: 0;top: 10rpx;"></uni-icons> |
|
</uni-forms-item> |
|
<uni-forms-item label="商品名称:" name="productName"> |
|
<input type="text" v-model="productDate.productName" placeholder="请输入商品名称" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="关键词:" name="keyword"> |
|
<input type="text" v-model="productDate.keyword" placeholder="请输入关键词(空格分隔)" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="商品品牌:" name="brandId"> |
|
<!-- <input type="text" v-model="productDate.brandId" placeholder="请输入商品品牌" /> --> |
|
<uni-data-select |
|
v-model="productDate.brandId" |
|
:localdata="brandIdList" |
|
placeholder="请选择商品品牌" |
|
></uni-data-select> |
|
</uni-forms-item> |
|
<uni-forms-item label="商品售价:" name="price"> |
|
<input type="text" v-model="productDate.price" placeholder="请输入商品售价" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="商品上架:" name="productStatus"> |
|
<switch v-model="productDate.productStatus" :checked="productDate.productStatus=='1'" color="#FE0606" @change="switchChange" style="transform:scale(0.7)" /> |
|
</uni-forms-item> |
|
<uni-forms-item label="商品推荐:" name="age"> |
|
<view class='checkbox-con'> |
|
<radio-group> |
|
<label :class="item.checked?'checkbox checked':'checkbox'" @click="checkbox(index)" v-for="(item, index) in radioItem" :key="item.value"> |
|
<checkbox :value="item.value" :checked="item.checked"/>{{item.name}} |
|
</label> |
|
</radio-group> |
|
</view> |
|
</uni-forms-item> |
|
</uni-forms> |
|
<view class="buttons"> |
|
<view @click="closed">取消</view> |
|
<view id="next" @click="changeBox">下一步</view> |
|
</view> |
|
</view> |
|
|
|
|
|
<view id="instruction" :class="currentBoxId == 'instruction' ? 'show' : 'hidden'"> |
|
<uni-forms :modelValue="productDate" label-width="200rpx"> |
|
<uni-forms-item label="属性类别:" > |
|
<uni-data-select |
|
v-model="productDate.attributesTypeId" |
|
:localdata="attributesTypeList" |
|
placeholder="请选择商品品牌" |
|
@change="attributesData" |
|
></uni-data-select> |
|
</uni-forms-item> |
|
<view class="content" v-show="productDate.attributesTypeId"> |
|
<view style="margin: 10rpx 0;">商品类型：</view> |
|
<view> |
|
<uni-section type="line"> |
|
<view class="uni-px-5" v-for="(item,index) in attributesList"> |
|
<view style="display: inline-block;">{{item.attributeName}}：</view> |
|
<view style="display: inline-block;"> |
|
<uni-data-checkbox v-if="index==0" mode="tag" v-model="radioAttributes" :localdata="item.attributesList"></uni-data-checkbox> |
|
<uni-data-checkbox v-else-if="index!=0" mode="tag" multiple v-model="checkboxAttributes" :localdata="hobby"></uni-data-checkbox> |
|
</view> |
|
|
|
</view> |
|
</uni-section> |
|
</view> |
|
</view> |
|
<view> |
|
<view>批量填充：<text style="color: #999999;margin: 10rpx 0;">批量填充填入信息后，可以批量将内容填写到SKU 信息里</text></view> |
|
<view class="tagButton" @tap="changeChecked(item)" v-for="item in bottonList">{{item.label}}</view> |
|
<view class="redButton" @tap="addStockList">确定</view> |
|
</view> |
|
<view v-for="(items,index) in stockList"> |
|
<view style="margin: 10rpx 0;"> |
|
<text style="color: red;">*</text> |
|
<text>规格：</text> |
|
<text v-if="index==0">{{radioAttributes}}</text> |
|
<text v-if="index!=0">{{radioAttributes}}+{{checkboxAttributes[index]}}</text> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="items.marketPrice" placeholder="市场价格" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="items.sellPrice" placeholder="销售价格" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="items.stock" placeholder="库存数量" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="items.integral" placeholder="积分价值" /> |
|
</view> |
|
<view style="display: inline-block;vertical-align: top;margin-top: 10rpx;" @click="deleteCheckAll(index)">删除</view> |
|
</view> |
|
<view> |
|
<view style="margin: 10rpx 0;"> |
|
<text style="color: red;">*</text> |
|
商品图片： |
|
<text style="color: #999999;">最多可上传10张图片</text> |
|
</view> |
|
<view class="imageList" v-for="(items,index) in productDate.images"> |
|
<view class="imageBlack" v-if="items.mainMark==1"> |
|
<image :src="items.url"></image> |
|
<view class="cameraText">商品主图</view> |
|
<uni-icons class="cameraClear" type="clear" size="20" @tap="clearImage(index)"></uni-icons> |
|
</view> |
|
<view class="imageBlack" v-else-if="items.mainMark!=1"> |
|
<image :src="items.url"></image> |
|
<view class="cameraText" @click="setMainImage(index)">设为主图</view> |
|
<uni-icons class="cameraClear" type="clear" size="20" @tap="clearImage(index)"></uni-icons> |
|
</view> |
|
</view> |
|
<view class="imageBlack" style="background-color: #fafafa;" @tap="srcFileImage"> |
|
<view style="margin-top: 46rpx;"> |
|
<uni-icons type="camera-filled" size="30"></uni-icons> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
<!-- <view> |
|
<view>详情图片：<text style="color: #999999;">最多可上传10张图片</text></view> |
|
<view></view> |
|
</view> --> |
|
</uni-forms> |
|
<view class="buttons"> |
|
<view id="previous" @click="changeBox">上一步</view> |
|
<view @click="addCompleted">完成</view> |
|
</view> |
|
</view> |
|
|
|
|
|
|
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import utils from '@/utils/encode' |
|
import serve from '@/api/packageIntegral/productList.js' |
|
import mulpicker from '@/packageIntegral/components/mulpicker.vue' |
|
export default { |
|
components: { |
|
mulpicker |
|
}, |
|
data() { |
|
return { |
|
currentBoxId: 'chooseType', //当前显示的view的id |
|
isBoxShow: false, |
|
productDate:{ |
|
images:[] |
|
}, |
|
productList:[], |
|
brandIdList:[], |
|
radioItem:[{ |
|
name: '新品', |
|
checked: true |
|
}, { |
|
name: '推荐', |
|
checked: false |
|
}], |
|
rules:{ |
|
name:{rules:[{required: true,errorMessage: '请选择商品分类'}]}, |
|
productName:{rules:[{required: true,errorMessage: '请输入商品名称'}]}, |
|
brandId:{rules:[{required: true,errorMessage: '请输入商品品牌'}]}, |
|
price:{rules:[{required: true,errorMessage: '请输入商品售价'}]}, |
|
}, |
|
attributesTypeList:[], |
|
attributesList:[], |
|
bottonList:[ |
|
{label:'市场价格',value:'marketPrice',checked:false}, |
|
{label:'销售价格',value:'sellPrice',checked:false}, |
|
{label:'商品库存',value:'stock',checked:false}, |
|
{label:'兑换积分',value:'integral',checked:false} |
|
], |
|
radioAttributes:'', |
|
checkboxAttributes:[], |
|
stockList:[] |
|
} |
|
}, |
|
|
|
onLoad() { |
|
this.classfication() |
|
this.getProductBrands() |
|
this.getAttributesType() |
|
}, |
|
watch:{ |
|
'productDate.demandRegion'(val){ |
|
if(val){ |
|
this.productDate.categoryOneId = val.split(',')[0] |
|
this.productDate.categoryTwoId = val.split(',')[1] |
|
} |
|
} |
|
}, |
|
methods: { |
|
switchChange(e){ |
|
if(e.detail.value == true){ |
|
this.productDate.productStatus = '1' |
|
}else if(e.detail.value == false){ |
|
this.productDate.productStatus = '2' |
|
} |
|
}, |
|
classfication(){ |
|
serve.classification().then(res=>{ |
|
this.productList = res.data |
|
}) |
|
}, |
|
getProductBrands(){ |
|
this.brandIdList = [] |
|
serve.getProductBrands().then(res=>{ |
|
console.log(res) |
|
res.data.forEach(tab=>{ |
|
this.brandIdList.push({value:tab.id,text:tab.brandName}) |
|
}) |
|
|
|
}) |
|
}, |
|
checkbox (e) { |
|
var index = e;//获取当前点击的下标 |
|
var checkboxArr = this.radioItem;//选项集合 |
|
// if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回 |
|
// checkboxArr.forEach(item => { |
|
// item.checked = false |
|
// }) |
|
if(checkboxArr[index].checked ==false){ |
|
checkboxArr[index].checked = true; //改变当前选中的checked值 |
|
|
|
}else { |
|
checkboxArr[index].checked = false; //改变当前选中的checked值 |
|
} |
|
if(checkboxArr[0].checked ==true){ |
|
this.productDate.newMark = 1 |
|
}else{ |
|
this.productDate.newMark = 2 |
|
} |
|
if(checkboxArr[1].checked ==true){ |
|
this.productDate.recommend = 1 |
|
}else{ |
|
this.productDate.recommend = 2 |
|
} |
|
|
|
}, |
|
changeBox(e){ |
|
let currentFlag = e.currentTarget.id; |
|
switch(currentFlag){ |
|
case 'next': |
|
this.currentBoxId = 'instruction' |
|
break; |
|
case 'previous': |
|
this.currentBoxId = 'chooseType' |
|
break; |
|
default: |
|
this.currentBoxId = 'viewInstruction' |
|
break; |
|
} |
|
if(currentFlag == 'next'){ |
|
this.getAttributesType() |
|
} |
|
}, |
|
getAttributesType(){ |
|
this.attributesTypeList = [] |
|
serve.getAttributesType().then(res=>{ |
|
res.data.forEach(tab=>{ |
|
this.attributesTypeList.push({ |
|
value:tab.id, |
|
text:tab.name, |
|
number:tab.number, |
|
attributesList:tab.attributesList |
|
}) |
|
}) |
|
}) |
|
}, |
|
attributesData(){ |
|
if(this.productDate.attributesTypeId){ |
|
this.attributesTypeList.forEach(tab=>{ |
|
if(tab.id = this.productDate.attributesTypeId){ |
|
this.attributesList = tab.attributesList |
|
this.attributesList.forEach(tab=>{ |
|
tab.attributesList = [] |
|
tab.attributeContent.split(',').forEach(item=>{ |
|
tab.attributesList.push({value:item,text:item}) |
|
}) |
|
}) |
|
|
|
} |
|
}) |
|
}else{ |
|
this.attributesList = [] |
|
} |
|
|
|
}, |
|
deleteCheckAll(i){ |
|
if(this.checkboxAttributes.length>1){ |
|
this.checkboxAttributes.splice(i,1) |
|
}else{ |
|
this.checkboxAttributes.splice(i,1) |
|
this.radioAttributes = '' |
|
} |
|
this.stockList.splice(i,1) |
|
}, |
|
deleteRadio(){ |
|
this.radioAttributes = '' |
|
}, |
|
changeChecked(item){ |
|
item.checked = !item.checked |
|
}, |
|
addStockList(){ |
|
this.stockList = [] |
|
let obj = { |
|
marketPrice:'', |
|
sellPrice:'', |
|
stock:'', |
|
integral:'' |
|
} |
|
if(this.attributesList.length ==1){ |
|
let data = {} |
|
let name = this.attributesList[0].attributeName |
|
let value = this.radioAttributes |
|
data[name] = value |
|
obj.attributeJson = JSON.stringify(data) |
|
this.stockList.push(obj) |
|
}else{ |
|
this.checkboxAttributes.forEach((tab,index)=>{ |
|
let name = this.attributesList[0].attributeName |
|
let value = this.radioAttributes |
|
let tabName = this.attributesList[index+1].attributeName |
|
let tabValue = tab |
|
data[name] = value |
|
data[tabName] = tabValue |
|
obj.attributeJson = JSON.stringify(data) |
|
this.stockList.push(obj) |
|
}) |
|
|
|
} |
|
}, |
|
//调起上传图片 |
|
srcFileImage() { |
|
let _that = this |
|
let imageUrl = '' |
|
uni.chooseImage({ |
|
count: 10, //默认9 |
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
|
sourceType: ['album'], //从相册选择 |
|
success: function(res) { |
|
console.log(res) |
|
console.log('进入1') |
|
const JSESSIONID = utils.uuid() |
|
uni.uploadFile({ |
|
url: 'http://uat.xingoil.com/adminapi/oil-oss/obejct/uploadFile', |
|
filePath: res.tempFilePaths[0], |
|
formData: { |
|
ossKey: 'xingyou', |
|
pathKey: 'publicxingyou', |
|
encrypt: 'PUBLIC', |
|
}, |
|
name: 'file', |
|
header: { |
|
"Content-Type": "multipart/form-data", |
|
"Authorization": uni.getStorageSync('Authorization'), |
|
'dataSources': 'MP', |
|
"imei": uni.getStorageSync('unionid'), |
|
"openId": uni.getStorageSync('openid'), |
|
'JSESSIONID': JSESSIONID, |
|
'token': utils.md5Salt(JSESSIONID) |
|
}, |
|
success(e) { |
|
console.log('进入2') |
|
console.log(e) |
|
let obj = JSON.parse(e.data), |
|
imageUrl = obj.data.publicUrl |
|
_that.getImage(imageUrl) |
|
}, |
|
fail(err) { |
|
console.log(err) |
|
} |
|
}) |
|
},fail() { |
|
console.log('相机调用失败') |
|
} |
|
}) |
|
}, |
|
getImage(imageUrl){ |
|
if(JSON.stringify(this.productDate.images) == '[]'){ |
|
this.productDate.images.push({ |
|
url:imageUrl, |
|
mainMark:1 |
|
}) |
|
}else{ |
|
this.productDate.images.push({ |
|
url:imageUrl, |
|
mainMark:'' |
|
}) |
|
} |
|
}, |
|
setMainImage(index){ |
|
this.productDate.images.forEach((tab,i)=>{ |
|
if(i == index){ |
|
tab.mainMark = 1 |
|
}else{ |
|
tab.mainMark = '' |
|
} |
|
}) |
|
}, |
|
clearImage(index){ |
|
if(this.productDate.images[index].mainMark == 1){ |
|
this.productDate.images.splice(index,1) |
|
this.productDate.images[0].mainMark = 1 |
|
}else{ |
|
this.productDate.images.splice(index,1) |
|
} |
|
}, |
|
closed(){ |
|
uni.navigateTo({ |
|
url: '/pages/index/index' |
|
}) |
|
}, |
|
addCompleted(){ |
|
if(this.radioItem[0].checked =true){ |
|
this.productDate.newMark == '1' |
|
}else{ |
|
this.productDate.newMark == '2' |
|
} |
|
if(this.radioItem[1].checked =true){ |
|
this.productDate.recommend == '1' |
|
}else{ |
|
this.productDate.recommend == '2' |
|
} |
|
this.productDate.stockList = this.stockList |
|
serve.saveProduct(this.productDate).then(res=>{ |
|
console.log(res) |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.fadeBox{ |
|
width: 100%; |
|
margin-bottom: 20rpx; |
|
} |
|
#chooseType{ |
|
padding: 30rpx; |
|
|
|
mulpicker{ |
|
height: 72rpx; |
|
line-height: 72rpx; |
|
} |
|
/deep/ .uni-forms{ |
|
width: 100%; |
|
} |
|
.content{ |
|
font-size: 28rpx; |
|
font-weight: bold; |
|
} |
|
|
|
|
|
/deep/ .uni-forms-item{ |
|
width: 100%; |
|
} |
|
|
|
/deep/ .uni-forms-item__label{ |
|
color: #333 !important; |
|
font-size: 30rpx; |
|
font-weight: 700; |
|
} |
|
/deep/ .uni-forms-item__content{ |
|
width: 100%; |
|
input{ |
|
height: 72rpx; |
|
line-height: 72rpx; |
|
} |
|
} |
|
|
|
switch{ |
|
margin-top: 9rpx; |
|
} |
|
switch::before{ |
|
content: ''; |
|
} |
|
switch::after{ |
|
content: ''; |
|
} |
|
} |
|
#instruction{ |
|
padding: 30rpx; |
|
|
|
mulpicker{ |
|
height: 72rpx; |
|
line-height: 72rpx; |
|
} |
|
/deep/ .uni-forms{ |
|
width: 100%; |
|
} |
|
/deep/ .uni-forms-item{ |
|
width: 100%; |
|
} |
|
|
|
/deep/ .uni-forms-item__label{ |
|
color: #333 !important; |
|
font-size: 30rpx; |
|
font-weight: 700; |
|
} |
|
/deep/ .uni-forms-item__content{ |
|
width: 100%; |
|
input{ |
|
height: 72rpx; |
|
line-height: 72rpx; |
|
} |
|
} |
|
.tagButton{ |
|
display: inline-block; |
|
width: 133rpx; |
|
background: #f5f5f5; |
|
color: #666666; |
|
border-radius: 8rpx; |
|
line-height: 58rpx; |
|
text-align: center; |
|
margin: 8rpx; |
|
} |
|
.checkedTag{ |
|
background-color: #2979ff; |
|
color: #FFFFFF; |
|
} |
|
.redButton{ |
|
display: inline-block; |
|
width: 84rpx; |
|
height: 58rpx; |
|
background: red; |
|
color: #fff; |
|
border-radius: 10rpx; |
|
line-height: 58rpx; |
|
text-align: center; |
|
} |
|
.commodityImage{ |
|
display: inline-block; |
|
max-width: calc(100%-150rpx); |
|
} |
|
.imageList{ |
|
display: inline-block; |
|
width: 140rpx; |
|
margin: 0 10rpx; |
|
} |
|
.imageBlack{ |
|
display: inline-block; |
|
width: 140rpx; |
|
height: 140rpx; |
|
vertical-align: middle; |
|
text-align: center; |
|
position: relative; |
|
>image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.cameraText{ |
|
width: 140rpx; |
|
height: 30rpx; |
|
text-align: center; |
|
line-height: 30rpx; |
|
position: absolute; |
|
background-color: #333; |
|
opacity: 0.3; |
|
color: #FFFFFF; |
|
left: 0rpx; |
|
top: 110rpx; |
|
} |
|
.cameraClear{ |
|
position: absolute; |
|
left: 120rpx; |
|
top: -10rpx; |
|
z-index: 20; |
|
} |
|
} |
|
|
|
} |
|
|
|
.checkbox-con{ |
|
margin-top: 40rpx; |
|
text-align: center; |
|
position: relative; |
|
} |
|
.checkbox{ |
|
width: 180rpx; |
|
height: 76rpx; |
|
line-height: 76rpx; |
|
font-size: 30rpx; |
|
color: #666666; |
|
border: 1rpx solid #B6B6B6; |
|
border-radius: 5rpx; |
|
display: inline-block; |
|
margin: 0 10rpx 20rpx 0; |
|
position: absolute; |
|
top: 50rpx; |
|
&:nth-of-type(1){ |
|
left: -190rpx; |
|
} |
|
&:nth-of-type(2){ |
|
left: 50rpx; |
|
} |
|
} |
|
|
|
.checked{ |
|
color: #FFFFFF; |
|
background: #FE0606; |
|
border: 1rpx solid #FE0606; |
|
} |
|
.checkbox checkbox{ |
|
display: none |
|
} |
|
|
|
|
|
|
|
|
|
.buttons { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-evenly; |
|
margin-top: 180rpx; |
|
|
|
>view { |
|
width: 250rpx; |
|
height: 76rpx; |
|
text-align: center; |
|
line-height: 76rpx; |
|
border-radius: 10rpx; |
|
font-size: 28rpx; |
|
|
|
&:nth-of-type(1) { |
|
background: #FFFFFF; |
|
border: 1rpx solid #B6B6B6; |
|
color: #333; |
|
} |
|
|
|
&:nth-of-type(2) { |
|
background: #FE0505; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
.show{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
.hidden{ |
|
display: none; |
|
} |
|
</style>
|
|
|