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.

882 lines
22 KiB

3 years ago
<template>
3 years ago
<view class="index-box">
<view class="add-goodsimg-box">
<view class="img-box acea-row">
3 years ago
<view class="upload-box" @click="uploadImgs">
3 years ago
<image src="../../../static/images/upload.png"></image>
</view>
<view class="upload-box" @click="uploadImg(0)">
3 years ago
<image src="../../../static/images/addimg.png" v-if="!slider_image[0] || slider_image[0] == ''"></image>
3 years ago
<image :src="slider_image[0]" mode="aspectFill" v-else></image>
</view>
<view class="upload-box" @click="uploadImg(1)">
3 years ago
<image src="../../../static/images/addimg.png" v-if="!slider_image[1] || slider_image[1] == ''"></image>
3 years ago
<image :src="slider_image[1]" mode="aspectFill" v-else></image>
</view>
<view class="upload-box" @click="uploadImg(2)">
3 years ago
<image src="../../../static/images/addimg.png" v-if="!slider_image[2] || slider_image[2] == ''"></image>
3 years ago
<image :src="slider_image[2]" mode="aspectFill" v-else></image>
</view>
</view>
<view class="tips acea-row row-middle">
<image src="../../../static/images/tips-icon.png"></image>
<text>最少上传一张最多只能上传三张图片哦</text>
</view>
</view>
<view class="goodsInfo-box">
<view class="goodsInfo-item">
<text>商品名称<text class="colR">*</text></text>
<input type="text" v-model="store_name" placeholder="输入商品名称" />
</view>
<view class="goodsInfo-item">
3 years ago
<text>商品单位<text class="colR">*</text></text>
3 years ago
<input type="text" v-model="unit_name" placeholder="输入商品单位" />
</view>
<view class="goodsInfo-item">
<text>商品详情<text class="colR">*</text></text>
<view class="toEdit acea-row row-middle" @click="toGoodsDetails">
<text>{{description == '' ? '去编辑' : '已编辑'}}</text>
3 years ago
<image src="../../../static/images/arror-r-s.png"></image>
</view>
</view>
</view>
3 years ago
<!-- //规格属性 -->
<view class="set-title">规格设置</view>
3 years ago
<view class="setattr-box">
<view class="attr-item colB" @click="addAttr">添加属性</view>
<view class="attr-item acea-row row-between row-middle"
v-for="(item,index) in attrArr"
:key="index"
@click="editAttr(index)"
>
3 years ago
<view class="attr-item-l">{{item.value}}({{item.detail.length}})</view>
3 years ago
<image src="../../../static/images/arror-r-s.png"></image>
<view class="del-attr" @tap.stop="delAttr(index)">×</view>
</view>
</view>
3 years ago
<!-- 批量操作 -->
<view class="batch-set-box" v-if="batchData.titleStr != ''">
3 years ago
<view class="box-top acea-row row-between-wrapper">
<view class="name">{{batchData.titleStr}}</view>
<view class="acea-row row-middle batch" @click="setAttrVal(0,1)">
<image src="../../../static/images/batch-icon.png"></image>
<text>批量修改</text>
</view>
3 years ago
</view>
3 years ago
<block v-for="(i,idx) in batchData.priceArr" :key="idx">
<view class="box-b acea-row row-between-wrapper" @click="setAttrVal(idx,0)">
<view class="box-b-l acea-row row-middle ">
<image src="../../../static/images/upload.png" class="attrImg" v-if="i.pic == ''" @tap.stop="uploadAttrImg(idx)"></image>
<image :src="i.pic" class="attrImg" mode="aspectFill" v-else @tap.stop="uploadAttrImg(idx)"></image>
<view class="name line1">{{i.sku.split(',').reverse().join('/')}}</view>
</view>
<view class="acea-row row-middle">
<view class="box-b-r">
<view>售价{{i.price}}</view>
<view>库存{{i.stock}}</view>
</view>
<image class="arrow" src="../../../static/images/arror-r-s.png"></image>
</view>
3 years ago
</view>
</block>
</view>
3 years ago
<view class="temp-box acea-row row-between-wrapper" @click="toTempList">
3 years ago
<text>运费模板</text>
<view class="acea-row row-middle">
3 years ago
<text>{{temp}}</text>
3 years ago
<image src="../../../static/images/arror-r-s.png"></image>
</view>
</view>
3 years ago
<!-- <view class="temp-box goods-state acea-row row-between-wrapper">
3 years ago
<text>商品状态</text>
<view class="acea-row row-middle">
<radio-group @change="radioChange">
<label>
<radio :value="1" :checked="isShow == 1" /><text>上架</text>
3 years ago
</label>
<label>
<radio :value="0" :checked="isShow == 0" /><text>不上架</text>
3 years ago
</label>
</radio-group>
</view>
3 years ago
</view> -->
3 years ago
<view class="btn-box">
<view class="btn" @tap="submit">提交</view>
</view>
<!-- 设置单个属性弹框 -->
<view class="set-attr-val" :class="showAttrVal ? 'isShow' : ''">
<view class="title">{{attrValTitle}}</view>
<view class="inp-box">
<text>售价()</text>
<input type="number" placeholder="0" v-model="price">
</view>
<view class="inp-box">
<text>原价()</text>
<input type="number" placeholder="0" v-model="ot_price">
</view>
<view class="inp-box">
<text>库存</text>
<input type="number" placeholder="0" v-model="stock">
</view>
<view class="btn-box">
<view class="cancel-btn" @click="cancelClick">取消</view>
<view class="submit-btn" @click="submitClick">确定</view>
</view>
</view>
3 years ago
<!-- //添加规格弹框 -->
<view class="mask-box" v-if="maskShow == true">
<view class="addattr-dialog" v-if="addOptionsDialog == true">
<view class="dialog-top acea-row row-between row-middle">
<text>规格属性</text>
<view class="close" @click="maskShow = false; addOptionsDialog = false">×</view>
</view>
<view>
3 years ago
<view class="a-name"><input type="text" v-model="attr.value" placeholder="输入属性名称,如:颜色"></view>
3 years ago
<view class="o-name-box">
3 years ago
<block v-for="(o,i) in attr.detail" :key="i">
3 years ago
<view class="o-item-box acea-row row-between row-middle">
3 years ago
<input type="text" v-model="attr.detail[i]" placeholder="输入选项,如:红色">
3 years ago
<text class="close" @click="delOption(i)">×</text>
</view>
</block>
<view class="add-option-btn" @click="addOption">+选项</view>
</view>
</view>
<view class="s-btn" @click="submitAddAttr">确定</view>
</view>
</view>
3 years ago
</view>
3 years ago
</template>
<script>
3 years ago
import { chooseImage, chooseImages } from "@/utils"
3 years ago
import { addProduct, getProductInfo, editProduct, getFormatAttr } from '@/api/store'
3 years ago
export default{
data(){
3 years ago
return {
3 years ago
id: '',
3 years ago
store_name: '',
unit_name: '',
image:'', //主图
3 years ago
slider_image: [] ,// 轮播图
3 years ago
description: '', //商品详情富文本
tempId: 1, //运费方案
3 years ago
temp: '默认免邮',
3 years ago
attrs: [ // 单规格一个,多规格多个
{
pic: '', //"规格图片 --可选",
price: '', //"价格 元",
ot_price: '', //"市场价格 --可选",
3 years ago
stock: '', //"库存",
weight: '', //"重量 --可选",
volume: '', //"体积 --可选"
}
],
price: '',
ot_price: '',
stock:'',
isShow: 0,
spec_type: 0,
items: [],
attrArr:[{
value: '规格',
detail:['默认']
}],
3 years ago
attr:{},
state: 0,
maskShow: false,
addOptionsDialog: false,
infinite: false,
batchData: {
titleStr: '规格',
priceArr: [
{
bar_code: "",
brokerage: 0,
brokerage_two: 0,
cost: 0,
integral: 0,
ot_price: 0,
pic: "",
pink_price: 0,
pink_stock: 0,
price: 0,
seckill_price: 0,
seckill_stock: 0,
sku: "默认",
stock: 0,
value1: "",
volume: 0,
weight: 0,
}
],
},
editattr: false,
idx: null,
showAttrVal: false,
attrValTitle: ''
3 years ago
}
},
onLoad() {
this.id = this.$yroute.query.id || ''
if(this.id){
uni.setNavigationBarTitle({
 title:'修改商品'
})
getProductInfo({id: this.id}).then((res)=>{
3 years ago
var info = res.data
3 years ago
this.slider_image = info.slider_image
this.image = info.slider_image[0]
this.unit_name = info.unit_name
this.description = info.description
this.store_name = info.store_name
3 years ago
this.items = info.items
this.attrArr = info.items
this.spec_type = 1
this.isShow = info.is_show
3 years ago
this.tempId = info.shippingTemplatesDto.id
this.temp = info.name
let strArr = info.items.map(item=>{
return item.value
})
this.getFormatAttr()
3 years ago
})
} else{
this.spec_type = 0
3 years ago
console.log('新增')
3 years ago
}
},
3 years ago
methods:{
3 years ago
uploadImgs(){
3 years ago
var imgurls = []
3 years ago
chooseImages((imgs)=>{
3 years ago
imgurls.push(imgs)
this.slider_image = imgurls
3 years ago
})
3 years ago
},
3 years ago
uploadImg(idx){
chooseImage((img)=>{
3 years ago
if(this.slider_image[idx]){
this.$set(this.slider_image,idx,img)
} else{
this.slider_image.push(img)
}
3 years ago
})
},
toGoodsDetails(){
uni.navigateTo({
url: '/pages/life/goodsDetails/index?desc='+encodeURIComponent(this.description)
3 years ago
});
},
3 years ago
toTempList(){
uni.navigateTo({
url: '/pages/life/tempList/index'
})
},
//添加属性按钮
addAttr(){
let j = { value: '', detail:[''] }
3 years ago
this.attr = j
this.editattr = false; //添加新属性时是否编辑attr切换成FALSE
3 years ago
this.maskShow = true;
this.addOptionsDialog = true
},
//修改属性
editAttr(i){
this.attr = this.attrArr[i]
this.editattr = true; //修改属性时是否编辑attr切换成true
3 years ago
this.maskShow = true;
this.addOptionsDialog = true
},
delAttr(i){
3 years ago
if(this.attrArr.length == 1){
return this.alertMessage('至少有一个规格')
}
3 years ago
this.attrArr.splice(i,1)
3 years ago
this.getFormatAttr()
3 years ago
},
addOption(){
3 years ago
this.attr.detail.push('')
3 years ago
},
delOption(i){
3 years ago
this.attr.detail.splice(i,1)
3 years ago
},
///添加属性提交
submitAddAttr(){
3 years ago
if(this.attr.value == ''){
3 years ago
return this.alertMessage('请填写属性名称','none')
}
try{
3 years ago
var o = this.attr.detail;
3 years ago
if(o.length == 0){
throw "请至少填写一个属性值!";
}
o.forEach(function(item,index) {
if(item == ""){
3 years ago
throw "属性值不能为空!";
}
});
3 years ago
} catch(e){
uni.showToast({
title: e,
icon: 'none'
})
return false
}
if(!this.editattr){
this.attrArr.push(this.attr)
}
3 years ago
this.items = this.attrArr
this.getFormatAttr()
3 years ago
this.addOptionsDialog = false
this.maskShow = false
3 years ago
},
3 years ago
//属性数据接口
3 years ago
getFormatAttr(){
let data = { attrs: this.items, productId: this.id || 0 }
getFormatAttr(data).then((res)=>{
if(res.success){
this.$set(this.batchData,'priceArr',res.data.value)
if(res.data.attr){
3 years ago
let strArr = res.data.attr.map(item=> item.value)
this.$set(this.batchData,'titleStr',strArr.join('/'))
} else{
this.$set(this.batchData,'titleStr','')
}
3 years ago
} else{
3 years ago
this.alertMessage(res.msg)
3 years ago
}
})
},
//数组整合
setData(attrArr){
var tmp = []
for (var i in attrArr) {
3 years ago
tmp.push(attrArr[i].detail)
}
function cartesianProductOf() {
return Array.prototype.reduce.call(arguments, function (a, b) {
var ret = [];
a.forEach(function (a) {
b.forEach(function (b) {
ret.push(a.concat([b]));
});
});
return ret;
}, [[]]);
}
let allArr = cartesianProductOf(...tmp)
return allArr
3 years ago
},
//上传规格图片
uploadAttrImg(idx){
chooseImage((img)=>{
this.batchData.priceArr[idx].pic= img
})
},
//设置规格属性值
setAttrVal(idx,type){
if(type == 0){
this.idx = idx
this.price= this.batchData.priceArr[idx].price
this.ot_price= this.batchData.priceArr[idx].ot_price
this.stock= this.batchData.priceArr[idx].stock
this.attrValTitle = this.batchData.priceArr[idx].sku.split(',').reverse().join('/')
} else{
this.attrValTitle = '批量修改规格'
}
this.showAttrVal= true
},
cancelClick(){
this.idx = null
this.showAttrVal= false
},
submitClick(){
const idx = this.idx
3 years ago
// console.log(this.price,this.ot_price,this.stock)
if(this.stock == 0){
return this.alertMessage('商品库存不能为0')
}
if(this.attrValTitle == '批量修改规格'){
this.batchData.priceArr.forEach((item)=>{
item.price = this.price
item.ot_price = this.ot_price
item.stock = this.stock
})
} else{
this.$set(this.batchData.priceArr[idx],'price',this.price)
this.$set(this.batchData.priceArr[idx],'ot_price',this.ot_price)
this.$set(this.batchData.priceArr[idx],'stock',this.stock)
}
this.showAttrVal= false
},
radioChange(e){
this.isShow= e.detail.value
3 years ago
},
submit(){
3 years ago
// console.log(this.batchData)
3 years ago
let form = {
store_name: this.store_name,
unit_name: this.unit_name,
image: this.slider_image[0], //主图
slider_image: this.slider_image , // 轮播图
description: this.description, //商品详情富文本
temp_id: this.tempId, //运费方案
attrs: this.batchData.priceArr,
isShow: this.isShow,
items: this.items
3 years ago
}
3 years ago
console.log(form.slider_image[0])
3 years ago
if(form.store_name == ''){
3 years ago
return this.alertMessage('请填写商品名称','none')
} else if(form.slider_image[0]){
return this.alertMessage('请至少上传一张商品图片','none')
3 years ago
} else if(form.description == ''){
3 years ago
return this.alertMessage('请填写商品详情','none')
3 years ago
} else if(form.description == ''){
3 years ago
return this.alertMessage('请填写商品详情','none')
3 years ago
}
form.attrs.forEach((item,index)=>{
if(item.price == '' || item.price == 0){
3 years ago
return this.alertMessage('请商品规格价格','none')
} else if(item.stock == '' || item.stock == 0){
3 years ago
return this.alertMessage('商品规格库存不能为0','none')
3 years ago
}
})
3 years ago
if(this.id != ''){
form.id = this.id
form.spec_type = this.spec_type
3 years ago
editProduct(form).then((res)=>{
if(res.success){
3 years ago
this.alertMessage(res.msg,'success')
3 years ago
setTimeout((res)=>{
uni.redirectTo({
3 years ago
url: '/pages/user/goodsManage/index?type=' + 0
});
3 years ago
},1500)
} else{
3 years ago
this.alertMessage(res.msg,'none')
3 years ago
}
})
} else{
form.spec_type = this.batchData.priceArr.length > 1 ? 1 : 0
3 years ago
addProduct(form).then((res)=>{
if(res.success){
3 years ago
this.alertMessage(res.msg,'success')
3 years ago
setTimeout((res)=>{
uni.redirectTo({
3 years ago
url: '/pages/user/goodsManage/index?type=' + 0
});
3 years ago
},1500)
} else{
3 years ago
this.alertMessage(res.msg,'none')
3 years ago
}
})
}
3 years ago
},
3 years ago
alertMessage(msg,type){
3 years ago
uni.showToast({
title: msg,
3 years ago
icon: type,
duration: 1500
3 years ago
})
}
3 years ago
}
}
</script>
3 years ago
<style lang="less">
.index-box{
3 years ago
width: 100%;
3 years ago
min-height: 100vh;
background: #F5F6F7;
padding: 20rpx 40rpx 110rpx;
position: relative;
.add-goodsimg-box{
width: 100%;
padding: 24rpx;
background: #fff;
border-radius: 8rpx;
.upload-box{
width: 140rpx;
height: 140rpx;
margin-right: 20rpx;
&:nth-last-child(1){
margin-right: 0;
}
image{
width: 100%;
height: 100%;
3 years ago
border-radius: 8rpx;
3 years ago
}
}
.tips{
color: #FF0707;
font-size: 20rpx;
margin-top: 16rpx;
image{
width: 18rpx;
height: 18rpx;
margin-right: 8rpx;
}
}
}
.goodsInfo-box{
width: 100%;
background: #fff;
border-radius: 8rpx;
font-size: 28rpx;
font-weight: 500;
margin-top: 40rpx;
.goodsInfo-item{
width: 100%;
3 years ago
height: 82rpx;
3 years ago
padding: 0 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #EEEEEE;
&:nth-last-child(1){
border: none;
}
input{
text-align: right;
}
.toEdit{
image{
width: 24rpx;
height: 24rpx;
margin-left: 6rpx;
}
}
}
}
.title2{
width: 100%;
height: 76rpx;
line-height: 76rpx;
border: 2rpx solid #B8B8B8;
background: #fff;
border-radius: 8rpx;
font-size: 28rpx;
text-align: center;
margin: 24rpx auto;
}
.add-sku-box{
width: 100%;
border-radius: 8rpx;
font-size: 28rpx;
font-weight: 500;
3 years ago
margin-top: 24rpx;
3 years ago
image{
width: 110rpx;
height: 110rpx;
}
.sku-item{
padding: 32rpx 0;
background: #fff;
margin-bottom: 12rpx;
position: relative;
.close-btn{
color: #fff;
font-size: 38rpx;
position: absolute;
right: -16rpx;
top: -22rpx;
border-radius: 50%;
line-height: 40rpx;
width: 46rpx;
height: 46rpx;
text-align: center;
background: #FF5E16;
border-radius: 50%;
}
.sku{
padding: 0 32rpx;
width: 100%;
min-height: 86rpx;
border-bottom: 2rpx solid #EEEEEE;
}
input{
text-align: right;
}
}
}
.temp-box{
width: 100%;
background: #fff;
border-radius: 8rpx;
padding: 32rpx;
font-size: 28rpx;
font-weight: 500;
margin-bottom: 12rpx;
3 years ago
image{
width: 24rpx;
height: 24rpx;
margin-left: 6rpx;
}
}
label{
margin-left: 16rpx;
}
.btn-box{
.btn{
width: 230rpx;
height: 80rpx;
background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
text-align: center;
line-height: 80rpx;
font-size: 38rpx;
font-weight: 500;
border-radius: 40rpx;
color: #fff;
margin: 32rpx auto;
}
}
.colR{
color: #FF0000;
}
3 years ago
.set-title{
font-size: 32rpx;
color: #343434;
margin: 34rpx 0 24rpx;
}
.setattr-box{
width: 100%;
background: #fff;
.attr-item{
width: 100%;
padding: 20rpx 50rpx 20rpx 32rpx;
border-bottom: 2rpx solid #eee;
font-size: 28rpx;
position: relative;
.del-attr{
font-size: 40rpx;
position: absolute;
right: 10rpx;
top: 20rpx;
width: 36rpx;
height: 36rpx;
// background: #FFA079;
line-height: 32rpx;
text-align: center;
border-radius: 50%;
color: #FFA079;
}
image{
width: 24rpx;
height: 24rpx;
}
}
}
// 批量设置库存
.batch-set-box{
width: 100%;
background: #fff;
padding: 24rpx;
color: #343434;
font-size: 28rpx;
margin: 12rpx 0;
.box-top{
padding: 0 0 12rpx;
border-bottom: 2rpx solid #EEEEEE;
color: #ABABAB;
.name{
width: 60%;
}
.w15{
width: 19%;
text-align: center;
}
.batch{
font-size: 24rpx;
color: #000;
image{
width: 24rpx;
height: 26rpx;
margin-right: 10rpx;
}
}
3 years ago
}
.box-b{
width: 100%;
height: 100rpx;
background: #FFFFFF;
border: 2rpx solid #C0C0C0;
border-radius: 8rpx;
margin-top: 22rpx;
padding: 0 20rpx;
.box-b-l{
3 years ago
width: 60%;
.name{
width: calc(100% - 90rpx);
}
.attrImg{
width: 70rpx;
height: 70rpx;
border-radius: 8rpx;
margin-right: 16rpx;
}
3 years ago
}
.box-b-r{
font-size: 24rpx;
color: #FF0000;
font-weight: 500;
margin-right: 14rpx;
}
.arrow{
width: 24rpx;
height: 24rpx;
transform: rotate(90deg);
3 years ago
}
.inp-box{
text-align: center;
height: 44rpx;
border-radius: 12rpx;
background: #DCDCDC;
input{
width: 100%;
height: 100%;
}
}
}
}
.set-attr-val{
width: 100%;
padding: 0 40rpx 90rpx;
border-radius: 60rpx 60rpx 0px 0px;
background:#fff;
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.2);
position: fixed;
left: 0;
bottom: -999rpx;
transition: bottom .2s ease ;
&.isShow{
bottom: 0;
}
.title{
font-size: 44rpx;
color: #343434;
text-align: center;
padding: 44rpx 0;
}
.inp-box{
display: flex;
align-items: center;
width: 100%;
height: 72rpx;
background: #F1F1F1;
border-radius: 8rpx;
padding: 0 40rpx;
font-size: 32rpx;
color: #000;
margin-bottom: 28rpx;
text{
width: 200rpx;
display: inline-block;
}
}
.btn-box{
display: flex;
justify-content: space-around;
view{
width: 230rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background: #E9E9E9;
border-radius: 40rpx;
font-size: 38rpx;
color: #fff;
}
.cancel-btn{
bakcground:#E9E9E9
}
.submit-btn{
background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
}
}
}
3 years ago
//弹出层
.mask-box{
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
position: fixed;
top: 0;
left: 0;
z-index: 99;
.addattr-dialog{
width: 680rpx;
min-height: 590rpx;
background: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 40rpx;
padding: 80rpx 64rpx;
.dialog-top{
margin-bottom: 26rpx;
}
.close{
font-size: 46rpx;
}
.a-name{
width: 560rpx;
// height: 104rpx;
3 years ago
background: #F7F7F7;
border-radius: 12rpx;
padding: 30rpx;
}
.o-name-box{
background: #f7f7f7;
padding: 36rpx 42rpx 0;
margin: 28rpx 0 0;
border-radius: 12rpx;
font-size: 26rpx;
input{
width: 80%;
}
.o-item-box{
height: 74rpx;
3 years ago
padding-bottom: 10rpx;
margin-bottom: 10rpx;
border-bottom: 2rpx solid #ececec;
}
}
.add-option-btn{
width: 100%;
padding: 20rpx 0;
text-align: center;
color: #BFBFBF;
background: #f7f7f7;
// border-top: 2rpx solid #ececec;
font-size: 26rpx;
}
.s-btn{
width: 230rpx;
height: 80rpx;
background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
border-radius: 40rpx;
text-align: center;
line-height: 80rpx;
color: #fff;
font-size: 26rpx;
margin: 70rpx auto 0;
}
}
}
.colB{
color: #0932FF;
}
3 years ago
}
</style>