Files
tcwm-uniapp-shop/my/publish/goods.vue
2024-06-06 11:49:50 +08:00

958 lines
25 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="padding">
<view class="text-white padding bg radius">
<u-form :model="shop" label-position="top">
<u-form-item label="商品标题">
<u-input v-model="shop.goodsName" placeholder="请填写商品标题" />
</u-form-item>
<u-form-item label="商品分类">
<u-input v-model="shop.classifyName" placeholder="请选择" :disabled="true" @click="getflshow()" />
</u-form-item>
<u-form-item label="商品标签">
<!-- <u-input v-model="" placeholder="请填写" /> -->
<view class="flex align-center flex-wrap margin-bottom-sm">
<view v-for="(item,index) in goodsLabel" :key="index" class="btn flex align-center margin-top">
<view>{{item}}</view>
<view class="margin-left-sm" @tap.stop="bindupdata(index)">x</view>
</view>
<view class="btns margin-top" @click="addtype1()">+添加</view>
</view>
</u-form-item>
<u-form-item label="商品原价">
<u-input v-model="shop.originalMoney" @input="ZheKouInput" placeholder="请填写" />
</u-form-item>
<u-form-item label="打包费">
<u-input v-model="shop.packMoney" placeholder="请填写" />
</u-form-item>
<u-form-item label="商品售价">
<u-input v-model="shop.goodsMoney" @input="ZheKouInput" placeholder="请填写" />
</u-form-item>
<view class="padding bg radius margin-tb" style="padding: 10px 0;">
<view>
<view class="text-lg" style="color: #333;">商品描述</view>
<view class="margin-tb-sm">
<u-input v-model="shop.goodsDescribe" type="textarea" height="200" placeholde="请描述一下您的特长"
maxlengt="200" :clearable="false" style="background:#F5F5F5;" />
</view>
</view>
<view>
<view class="text-lg margin-top-sm text-black">商品封面图</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="shop.goodsCover.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;">
<image :src="shop.goodsCover" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImgs()">
<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImage(1)" v-if="shop.goodsCover.length<=0">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center text-black">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="text-lg margin-top-sm text-black">商品轮播图可多张</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="goodsPicture.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
v-for="(image,index) in goodsPicture" :key="index">
<image :src="image" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImg(index,'lb')">
<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImages(1)" v-if="goodsPicture.length<=5">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center text-black">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view class="text-lg margin-top-sm text-black">商品详情图可多张</view>
<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
<view v-if="goodsParticularsPicture.length">
<view class="margin-top flex margin-right-sm flex-wrap">
<view class="flex"
style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
v-for="(image,index) in goodsParticularsPicture" :key="index">
<image :src="image" style="width: 100%;height: 100%;"></image>
<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
@click="removeImg(index,'sq')">
<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="margin-top" @click="addImages(2)" v-if="goodsParticularsPicture.length<=5">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center text-black">添加图片</view>
</view>
</view>
</view>
</view>
</view>
<!-- <view>
<view class="text-lg margin-top-sm text-black">商品详情图可多张</view>
<editor id="editor"
style="height:350rpx;color: #000000;font-size: 28rpx;width: 100%;border: 2rpx solid #F0F0F0;padding: 16rpx;"
placeholder="请输入商品详情" @ready="onEditorReady" @input="getText"></editor>
</view>
<view>
<view class="margin-top" @click="addImages(2)" v-if="goodsParticularsPicture.length<=1">
<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
class="flex justify-center align-center">
<view>
<view class="text-center">
<image src="../static/addimg.png" style="width: 65rpx;height: 55rpx;">
</image>
</view>
<view class="text-center text-black">添加图片</view>
</view>
</view>
</view>
</view> -->
</view>
<u-form-item label="规格类型">
<u-input v-model="attrsType" placeholder="请选择" :disabled="true" @click="ggShow()" />
</u-form-item>
<u-form-item label="商品规格" v-if="attrsid==2">
<view style="width: 100%;">
<view style="display: flex;width: 100%;">
<u-input style="width: 80%;" v-model="attrs" placeholder="请选择" :disabled="true"
@click="openguige()" />
<view style="width: 20%;text-align: right;color: #FF4701;" v-if="attrs"
@click="goGuiGeItem()">
修改价格</view>
</view>
<view style="color: #FF4701;font-size: 24upx;">*修改商品商品售价后商品规格将重置请谨慎操作</view>
</view>
</u-form-item>
</u-form>
</view>
<u-button @click="submit" class="margin-top" :custom-style="customStyle" shape="square" :hair-line="false">提交
</u-button>
<!-- 规格弹框 -->
<u-popup v-model="Guigeshow" mode="bottom" border-radius="14" :closeable="closeable">
<view>
<scroll-view scroll-y="true">
<view class="padding" style="margin-bottom: 70px;">
<view>规格类型</view>
<view class="flex align-center margin-top-sm flex-wrap">
<view class="" v-for="(item,indexs) in list" :key="indexs">
<view class="btn margin-top-sm flex align-center flex-wrap"
:class="listIndex == indexs?'boxH':''" @click="bindguige(indexs,1,item.ruleName)">
{{item.ruleName}}
</view>
<!-- <view class="btns margin-top-sm" @click="addtype(1)">+添加</view> -->
</view>
</view>
<view v-for="(name,index) in attrList.ruleValue" :key="index">
<view class="margin-top-sm">{{name.value}}</view>
<view class="flex align-center flex-wrap margin-top-sm">
<!-- :class="typeIndex1 == index&&typeIndex == ind?'active':''" -->
<view class="btn margin-top-sm" v-for="(ite,ind) in name.detail1" :key='ind'
@click="bindguige(ind,2,name.detail,index)" v-if="name.detail1">
{{ite}}
</view>
<!-- <view class="btns margin-top-sm">+添加</view> -->
</view>
</view>
</view>
</scroll-view>
<view class="addguige" @click="bindget()">确定</view>
</view>
</u-popup>
<u-select v-model="flshow" :list="ClassifyList" valueName='classifyId' labelName="classifyName"
@confirm="confirm">
</u-select>
<!-- 规格类型 -->
<u-select v-model="ggshow" :list="attrList1" valueName='id' labelName="name" @confirm="ggconfirm">
</u-select>
<!-- 添加规格弹框 -->
<u-popup v-model="show2" mode="center" border-radius="14" width="500rpx" height="300rpx" :closeable="closeable">
<view>
<view class="padding">
<view>添加标签</view>
<view>
<u-input v-model="typeName" placeholder="请填写" />
</view>
</view>
<view class="addguiges" @click="bindclose1()">确定</view>
</view>
</u-popup>
</view>
</template>
<script>
import configdata from '@/common/config.js';
export default {
data() {
return {
shop: {
goodsName: '',
classifyId: '',
classifyName: '',
goodsLabel: [],
attr: [],
sku: [],
originalMoney: '',
packMoney: 0,
goodsMoney: '',
goodsDescribe: '',
//详情图
goodsCover: '',
goodsPicture: [],
goodsParticularsPicture: [],
shopId: uni.getStorageSync('shopId')
},
shops: {
goodsName: '',
classifyId: '',
classifyName: '',
goodsLabel: [],
attr: [],
sku: [],
originalMoney: '',
packMoney: 0,
goodsMoney: '',
goodsDescribe: '',
//详情图
goodsCover: '',
goodsPicture: [],
goodsParticularsPicture: [],
shopId: uni.getStorageSync('shopId')
},
attrs: '',
goodsLabel: [],
goodsPicture: [],
goodsParticularsPicture: [],
customStyle: {
backgroundColor: '#FFCC00',
color: '#000000',
border: 0
},
status: 1,
customStyle1: {
color: '#000000',
position: "fixed",
bottom: "15rpx",
left: "0rpx",
right: "0rpx",
margin: "0rpx 50rpx",
backgroundColor: '#FFCC00',
},
Guigeshow: false,
//详情图
goodsCover: [],
shopId: '',
page: 1,
limit: 100,
list: [],
listIndex: 0,
typeIndex: 0,
typeIndex1: 0,
wdIndex: 0,
show: false,
typeName: '',
shows: false,
typeperature: '',
flshow: false,
ggshow: false,
ClassifyList: [],
attrList: {},
attrLists: [],
shopId: '',
show2: false,
update: 0,
count: 6,
editorCtx: '',
htmlMessage: '',
closeable: true,
attrsType: '多规格',
attrsid: 2,
attrList1: [{
'name': '单规格',
'id': 1
},
{
'name': '多规格',
'id': 2
}
],
}
},
onLoad(option) {
console.log('option', option)
if (option.goodsId) {
this.update = 1
uni.setNavigationBarTitle({
title: '修改商品'
})
this.goodsDet(option.goodsId)
} else {
this.update = 0
}
// console.log(option, '店铺id')
// this.shopId = option.shopId
this.shopId = this.$queue.getData("shopId")
this.getguige()
// this.onEditorReady();
},
onShow() {
let list = this.$queue.getData('guigeSelectItemList');
if (list) {
this.shop.sku = list;
this.$queue.remove('guigeSelectItemList');
}
this.getClassifyList()
},
methods: {
ZheKouInput(e) {
console.log(e)
this.attrs = '';
this.shop.attr = []
if (this.attrsid == 1) {
this.guigeclect()
} else {
this.getgoodslist()
}
},
goGuiGeItem() {
this.$queue.setData('guigeSelectItemList', this.shop.sku)
uni.navigateTo({
url: '/my/publish/guigeitem'
});
},
//获取分类
getflshow() {
console.log(this.ClassifyList.length)
if (this.ClassifyList.length == 0) {
uni.navigateTo({
url: '/my/store/fenlei'
})
} else {
this.flshow = true
}
},
// 规格类型
ggShow() {
this.ggshow = true
},
//获取商品规格列表
getgoodslist() {
let ruleValues = this.attrList.ruleValue
for (var j = 0; j < ruleValues.length; j++) {
let details = ruleValues[j].detail;
ruleValues[j].detail = ruleValues[j].detail.toString();
}
let data = {
attrName: this.attrList.ruleName,
attrValue: ruleValues,
ruleId: this.attrList.id,
}
this.$Request.postJsonA("/admin/goods/isFormatAttr?coverImg=" + this.shop.goodsCover + '&originalPrice=' +
this.shop.originalMoney + '&price=' + this.shop.goodsMoney, data).then(res => {
if (res.code == 0) {
// this.shop.sku.push(res.data.value)
this.shop.sku = res.data.value
console.log(res.data.value, '111', this.shop.sku)
}
});
},
//获取规格
bindget() {
this.getgoodslist()
this.attrs = this.attrList.ruleName
var obj = {}
obj.attrName = this.attrList.ruleName
obj.attrValue = this.attrList.ruleValue
obj.ruleId = this.attrList.id
this.shop.attr.push(obj)
this.Guigeshow = false
},
//商品分类
confirm(e) {
// console.log(e)
this.shop.classifyName = e[0].label
this.shop.classifyId = e[0].value
},
//规格分类
ggconfirm(e) {
// console.log(e)
this.attrsType = e[0].label
this.attrsid = e[0].value
if (e[0].value == 1) {
this.shop.attr = []
this.guigeclect()
}
},
// 单规格
guigeclect() {
this.$Request.getA("/admin/goods/onlyFormatAttr?coverImg=" + this.shop.goodsCover + '&originalPrice=' +
this.shop.originalMoney + '&price=' + this.shop.goodsMoney).then(res => {
if (res.code == 0) {
// this.shop.sku.push(res.data.value)
this.shop.sku = res.data.value
console.log(res.data.value, '111', this.shop.sku)
}
});
},
addtype(index) {
if (index == 1) {
this.show = true
} else if (index == 2) {
this.shows = true
}
},
bindclose() {
if (index == 1) {
this.show = false
} else if (index == 2) {
this.shows = false
}
},
//弹框规格切换
bindguige(index, e, name, index1) {
// console.log(index, e, name)
if (e == 1) {
this.listIndex = index
this.attrList = this.list[index]
} else if (e == 2) {
this.typeIndex = index
this.typeIndex1 = index1
} else if (e == 3) {
this.wdIndex = index
}
},
//规格弹框
openguige() {
if (!this.attrList.ruleValue) {
uni.showToast({
title: '暂无规格',
icon: 'none',
duration: 1000
})
return
}
// 打开规格选项弹框
this.Guigeshow = true
},
//获取商品规格
getguige() {
let data = {
// page: this.page,
// limit: this.limit,
shopId: this.shopId,
}
this.$Request.getA("/selfGoodsRule/list", data).then(res => {
if (res.code == 0) {
// this.shop.sku = res.data
if (res.data.length > 0) {
this.list = res.data
this.list.forEach(res => {
res.ruleValue.forEach(ret => {
ret.detail = ret.detail.split(',')
ret.detail1 = ret.detail
})
})
console.log('this.attrList', this.list)
this.attrList = this.list[0]
if (this.shop.attr && this.shop.attr.length > 0) {
for (var i in res.data) {
if (this.shop.attr[0].ruleId == res.data[i].id) {
this.attrs = res.data[i].ruleName
}
}
}
}
}
});
},
// 商品类型
getClassifyList() {
this.$Request.getA("/admin/goods/selectAllClassify?shopId=" + this.shopId).then(res => {
if (res.code == 0) {
this.ClassifyList = res.data
this.counts = this.ClassifyList[0].classifyId
if (this.shop.classifyId != '') {
for (var i in res.data) {
if (this.shop.classifyId == res.data[i].classifyId) {
this.shop.classifyName = res.data[i].classifyName
}
}
}
}
});
},
getStarttime(e) {
console.log(e)
console.log(this.shop)
this.shop.openTime = e.hour + ':' + e.minute
},
getEndtime(e) {
console.log(e)
this.shop.closeTime = e.hour + ':' + e.minute
},
// 详情图删除
removeImg(index, texts) {
if (texts == 'lb') {
this.goodsPicture.splice(index, 1)
} else if (texts == 'sq') {
this.goodsParticularsPicture.splice(index, 1)
}
},
// 身份证 资格证删除
removeImgs() {
// if (index == 1) {
this.shop.goodsCover = ''
// }
},
bindOpen(e) {
console.log(e)
let that = this
uni.chooseLocation({
success: function(res) {
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
that.shop.detailedAddress = res.address
that.shop.shopLat = res.latitude
that.shop.shopLng = res.longitude
}
});
},
// 图片上传
addImages(e) {
if (e == 1) {
var num = this.goodsPicture.length
this.count = 6 - num
}
if (e == 2) {
var num = this.goodsParticularsPicture.length
this.count = 6 - num
}
let that = this
uni.chooseImage({
count: this.count,
sourceType: ['album', 'camera'],
success: res => {
for (let i = 0; i < res.tempFilePaths.length; i++) {
that.$queue.showLoading("上传中...");
uni.uploadFile({ // 上传接口
url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
// url: 'https://tcwm.xianmaxiong.com/sqx_fast/alioss/upload',
filePath: res.tempFilePaths[i],
name: 'file',
success: (uploadFileRes) => {
if (e == 1) {
if (that.goodsPicture.length < 6) {
that.goodsPicture.push(JSON.parse(uploadFileRes.data)
.data)
}
} else if (e == 2) {
if (that.goodsParticularsPicture.length < 6) {
that.goodsParticularsPicture.push(JSON.parse(
uploadFileRes.data).data)
}
console.log(that.goodsParticularsPicture)
}
uni.hideLoading();
}
});
}
}
})
},
// 图片上传
addImage(e) {
let that = this
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
success: res => {
for (let i = 0; i < res.tempFilePaths.length; i++) {
that.$queue.showLoading("上传中...");
uni.uploadFile({ // 上传接口
// url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
url: 'https://tcwm.xianmaxiong.com/sqx_fast/alioss/upload',
filePath: res.tempFilePaths[i],
name: 'file',
success: (uploadFileRes) => {
if (e == 1) {
that.shop.goodsCover = JSON.parse(uploadFileRes.data).data
}
uni.hideLoading();
}
});
}
}
})
},
config: function(name) {
var info = null;
if (name) {
var name2 = name.split("."); //字符分割
if (name2.length > 1) {
info = configdata[name2[0]][name2[1]] || null;
} else {
info = configdata[name] || null;
}
if (info == null) {
let web_config = cache.get("web_config");
if (web_config) {
if (name2.length > 1) {
info = web_config[name2[0]][name2[1]] || null;
} else {
info = web_config[name] || null;
}
}
}
}
return info;
},
// 发布
submit() {
this.shop.goodsPicture = this.goodsPicture
this.shop.goodsPicture = this.goodsPicture.toString();
this.shop.goodsParticularsPicture = this.goodsParticularsPicture.toString();
this.shop.goodsLabel = this.goodsLabel.toString();
if (!this.shop.goodsName) {
uni.showToast({
title: '请填写商品标题',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.classifyName) {
uni.showToast({
title: '请选择商品分类',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.goodsLabel) {
uni.showToast({
title: '请填写商品标签',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.originalMoney) {
uni.showToast({
title: '请填写商品原价',
icon: 'none',
duration: 1000
})
return
}
// console.log(this.shop.packMoney,'------------')
// if (this.shop.packMoney*1 != '') {
// uni.showToast({
// title: '请填写商品打包费',
// icon: 'none',
// duration: 1000
// })
// return
// }
if (!this.shop.goodsMoney) {
uni.showToast({
title: '请填写商品售价',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.goodsDescribe) {
uni.showToast({
title: '请填写商品描述',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.goodsCover) {
uni.showToast({
title: '请上传商品封面图',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.goodsPicture) {
uni.showToast({
title: '请上传商品轮播图',
icon: 'none',
duration: 1000
})
return
}
if (!this.shop.goodsParticularsPicture) {
uni.showToast({
title: '请上传商品详情图',
icon: 'none',
duration: 1000
})
return
}
if (this.attrsid == 2) {
if (this.shop.attr.length == 0) {
uni.showToast({
title: '请选择商品规格',
icon: 'none',
duration: 1000
})
return
}
}
let shops = this.shop;
for (var i = 0; i < shops.attr.length; i++) {
let attrValues = shops.attr[i].attrValue;
for (var j = 0; j < attrValues.length; j++) {
let details = attrValues[j].detail;
let detailss = '';
for (var z = 0; z < details.length; z++) {
detailss = detailss + details[z];
}
shops.attr[i].attrValue[j].detail = detailss
}
}
if (this.update == 0) {
var url = '/admin/goods/insertGoods'
}
if (this.update == 1) {
var url = '/admin/goods/update'
}
this.$Request.postJsonA(url, shops).then(res => {
if (res.code == 0) {
uni.showToast({
title: '操作成功',
icon: 'none'
})
setTimeout(function() {
uni.navigateBack()
}, 1000)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
});
},
//删除规格
bindupdata(index) {
console.log('this.shop.goodsLabel', typeof this.goodsLabel)
this.goodsLabel.splice(index, 1)
},
addtype1() {
this.typeName = ''
this.show2 = true
},
bindclose1() {
if (!this.typeName) {
uni.showToast({
title: '请填写规格',
icon: 'none',
duration: 1000
})
return
}
this.goodsLabel.push(this.typeName)
this.show2 = false
},
// 获取商铺详情
goodsDet(goodsId) {
this.$Request.getA("/admin/goods/selectGoodsById?goodsId=" + goodsId).then(res => {
if (res.code == 0) {
this.dataCentre = res.data;
this.shop = res.data;
this.getClassifyList()
if (this.shop.goodsLabel) {
this.goodsLabel = this.shop.goodsLabel.split(',')
}
if (this.shop.goodsPicture) {
this.goodsPicture = this.shop.goodsPicture.split(',')
}
if (this.shop.goodsParticularsPicture) {
this.goodsParticularsPicture = this.shop.goodsParticularsPicture.split(',')
}
if (res.data.attr.length == 0) {
this.attrsid = 1
this.attrsType = '单规格'
} else {
this.attrsid = 2
this.attrsType = '多规格'
}
this.getguige()
}
});
}
}
}
</script>
<style>
page {
background-color: #F5F5F5;
}
.bg {
background-color: #FFFFFF;
}
.btn {
border: 1upx solid #CCCCCC;
border-radius: 10px;
padding: 0rpx 30rpx;
margin-right: 25rpx;
height: 30px;
line-height: 30px;
}
.boxH {
background: #FCD202;
border: none;
}
.btns {
border: 1upx dashed #333333;
border-radius: 28px;
padding: 0rpx 35rpx;
margin-right: 25rpx;
height: 30px;
line-height: 30px;
}
.active {
background: #FCD202;
border: none;
}
.actives {
background: #FCD202;
border: none;
}
.addguige {
width: 90%;
margin: 0 auto;
background: #FCD202;
box-shadow: 0px 10upx 20upx 0px #FFD9B3;
border-radius: 16upx;
text-align: center;
height: 88upx;
line-height: 88upx;
position: fixed;
bottom: 25upx;
left: 0;
right: 0;
}
.addguiges {
width: 90%;
margin: 0 auto;
background: #FCD202;
box-shadow: 0px 10upx 20upx 0px #FFD9B3;
border-radius: 16upx;
text-align: center;
height: 88upx;
line-height: 88upx;
/* position: fixed;
bottom: 25upx;
left: 0;
right: 0; */
}
.u-input__textarea {
background-color: #f5f5f5 !important;
padding: 10rpx !important;
}
</style>