<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>