<template>
<view class="" style="background: #F3F6FA;height: 100vh;overflow: auto;">
<view class="box">
<view class="boxxiao">
<view class="">
<view class="name">
商品名称
</view>
<input v-model="name" class="input" type="text" placeholder="请输入商品名称" />
</view>
<view class="">
<view class="name">
商品编码
</view>
<input v-model="productNo" class="input" type="text" placeholder="请输入商品编码" />
</view>
<view class="">
<view class="name">
商品分类
</view>
<input v-model="categoryName" @click="openPicker(1)" class="input" type="text"
placeholder="请输入商品分类" />
</view>
<view class="">
<view class="name">
品牌
</view>
<input v-model="brandName" @click="openPicker(2)" class="input" type="text" placeholder="请输入商品分类" />
</view>
<view class="">
<view class="name">
排序
</view>
<input v-model="sort" class="input" type="text" placeholder="请输入排序" />
</view>
<view class="">
<view class="name">
单价
</view>
<input v-model="price" class="input" type="text" placeholder="请输入单价" />
</view>
<view class="">
<view class="name">
重量
</view>
<input v-model="weight" class="input" type="text" placeholder="请输入重量" />
</view>
<view class="">
<view class="name">
单位
</view>
<input v-model="unit" class="input" type="text" placeholder="请输入单位" />
</view>
</view>
<view class="boxxiao1">
<view class="statc">
<view class="">
状态
</view>
<view class="statcright">
<view :class="{'xiaj':true,'shang':publishStatus=='1'}" @click="zhuangtai('1')">
上架
</view>
<view :class="{'xiaj':true,'shang':publishStatus=='0'}" @click="zhuangtai('0')">
下架
</view>
</view>
</view>
</view>
<view class="">
<view class="updtitle">
产品图片
</view>
<view class="updoimg">
<view class="upindex">
<view class="unindexleft">
主图
</view>
<view class="">
<view class="">
<view class="uplbt">
<view class="imgbox" v-for="(item, index) in fileList" :key="index">
<image @click="dianj($event,index)" class="imgsdel"
src="/static/Merchantindex/删除.png"></image>
<image @click="chooseImage" class="imgs" :src="item"></image>
</view>
<image @click="chooseImage" v-if="fileList.length<1"
style="width: 156rpx;height: 156rpx;padding: 0 10rpx 10rpx 10rpx;"
src="/static/Merchantindex/Frame_17@2x.png" mode=""></image>
</view>
</view>
</view>
<view class="text13">
请上传 大小不超过 5MB 格式为 pngipgjpeg 的文件
</view>
</view>
<view class="upindex">
<view class="unindexleft" @click="chooseImage">
轮播图
</view>
<view class="">
<view class="uplbt">
<view class="imgbox" v-for="(item, index) in fileList2" :key="index">
<image @click="dianj2($event,index)" class="imgsdel"
src="/static/Merchantindex/删除.png"></image>
<image class="imgs" :src="item"></image>
</view>
<image @click="chooseImage2"
style="width: 156rpx;height: 156rpx;padding: 0 10rpx 10rpx 10rpx;"
src="/static/Merchantindex/Frame_17@2x.png" mode=""></image>
</view>
<view class="text13">
请上传 大小不超过 5MB 格式为 pngipgjpeg 的文件
</view>
</view>
</view>
</view>
<view class="guige">
<view class="">
规格类型
</view>
<view class="" @click="tianjia">
添加
</view>
</view>
<view class="gglxbxo" v-for="(item,index) in skuList" :key="index">
<uni-data-select :localdata="range[index].options" v-model="range[index].value"
@change="change($event, index)"></uni-data-select>
<view class="xuanuzne" v-for="(items,jndex) in item.productAttr" :key="jndex">
<input v-model="items.value" class="sdasdinput" type="text" />
<view class="xiengz" @click="xiengfa(index)">
新增
</view>
<view class="xiengz" @click="shanchu(index,jndex)">
删除
</view>
</view>
</view>
<view class="guige">
<view class="">
规格信息
</view>
<view class="">
刷新
</view>
</view>
<view class="gglxbxo" v-for="(ites,inde) in combinations" :key="inde">
<view class="dlasxlfle" v-for="(item,index) in skuList" :key="index">
<view class="dlasxlfle" v-if="item.range!=0">
<view class="name w130">
{{item.range}}
</view>
<input v-if="index==0" v-model="ites.spData.value" class="tesinput input" type="text"
:placeholder="`请输入${item.range}`" />
<input v-if="index==1" v-model="ites.spData.value1" class="tesinput input" type="text"
:placeholder="`请输入${item.range}`" />
</view>
</view>
<view class="dlasxlfle">
<view class=" name w130">
销售价格
</view>
<input v-model="ites.price" class="tesinput input" type="text" placeholder="请输入销售价格" />
</view>
<view class="dlasxlfle">
<view class=" name w130">
库存
</view>
<input v-model="ites.stock" class="tesinput input" type="text" placeholder="请输入销售价格" />
</view>
<view class="" style="height: 40rpx;">
</view>
<view class="upindex">
<view class="unindexleft">
展示图片
</view>
<view class="">
<view class="uplbt">
<view v-if="ites.pic!=''&&ites.pic!=null&&ites.pic!=undefined" class="imgbox">
<image @click="dianj3($event,inde)" class="imgsdel"
src="/static/Merchantindex/删除.png">
</image>
<image class="imgs" :src="BASE_URL+ites.pic"></image>
</view>
<image @click="chooseImage3(inde)"
style="width: 156rpx;height: 156rpx;padding: 0 10rpx 10rpx 10rpx;"
src="/static/Merchantindex/Frame_17@2x.png" mode=""></image>
</view>
<view class="text13">
请上传 大小不超过 5MB 格式为 pngipgjpeg 的文件
</view>
</view>
</view>
</view>
<view class="tetx">
详细描述
</view>
<view class="container">
<!-- <button @click="insertImage">插入图片</button> -->
<editor v-if="isReadOnly1" id="editor" class="rech" :read-only="isReadOnly" placeholder="请输入内容"
@input="onInput" @statusbar="statusbar" @ready="onEditorReady">
</editor>
</view>
</view>
</view>
<view class="tail" @click="dianchang()">
<view class="taill">
上传
</view>
</view>
</view>
<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
<uv-picker ref="picker1" :columns="columns1" @confirm="confirm1"></uv-picker>
</template>
<script>
import {
request,
BASE_URL
} from '@/utils/request.js';
export default {
data() {
return {
inid: 0,
isReadOnly: true,
isReadOnly1: true,
publishStatus: "1",
combinations: [{
id: "",
outSkuNo: null,
pic: "",
price: "",
spData: {
value: '',
value2: ''
},
stock: "",
}],
list: [{
name: "",
option: []
}],
data: [{
name: "",
option: []
}],
skuList: [{
productAttr: [{
value: ''
}],
range: 0,
}],
range: [{
value: -1, // 当前选中的值
options: [{
value: 0,
text: '材质'
},
{
value: 1,
text: '颜色'
},
{
value: 2,
text: '尺寸'
},
{
value: 3,
text: '其他'
}
]
},
{
value: -1, // 当前选中的值
options: [{
value: 0,
text: '材质'
},
{
value: 1,
text: '颜色'
},
{
value: 2,
text: '尺寸'
},
{
value: 3,
text: '其他'
}
]
}
],
id:"",
BASE_URL: BASE_URL,
name: "",
productNo: "",
sort: '',
price: "",
weight: "",
unit: "",
categoryName: "",
brandName: "",
shopIds: "",
pic: "",
albumPics: "",
categoryId: "",
detailMobileHtml: "",
fileList: [],
fileList2: [],
fileList3: [],
placeholder: '请输入内容',
editorCtx: null,
columns: [
[]
],
columns1: [
[]
],
category: [],
brand: []
}
},
watch: {
editorCtx: {
immediate: true, // 立即执行一次
handler(newVal) {
if (newVal) { // 首次拿到实例
console.log('editorCtx 已就绪', newVal);
}
}
},
// 深度监听 skuList
skuList: {
deep: true,
handler(newVal, oldVal) {
console.log('新值:', newVal);
for (var i = 0; i < newVal.length; i++) {
if (newVal[i].range == 0) {
return
}
}
this.combinations = []
if (newVal.length == 1) {
for (var i = 0; i < newVal[0].productAttr.length; i++) {
if (this.inid == 1) {
this.combinations.push({
id: this.daskuList[i].id,
outSkuNo: this.daskuList[i].outSkuNo,
pic: this.daskuList[i].pic,
price: this.daskuList[i].price,
spData: {
value: '',
value2: ''
},
stock: this.daskuList[i].stock
})
} else {
this.combinations.push({
id: "",
outSkuNo: null,
pic: "",
price: "",
spData: {
value: '',
value2: ''
},
stock: ""
})
}
}
for (var i = 0; i < newVal[0].productAttr.length; i++) {
this.combinations[i].spData.value = newVal[0].productAttr[i].value
}
}
if (newVal.length == 2) {
for (var i = 0; i < newVal[0].productAttr.length; i++) {
for (var j = 0; j < newVal[1].productAttr.length; j++) {
if (this.inid == 1) {
this.combinations.push({
id: this.daskuList[j].id,
outSkuNo: this.daskuList[j].outSkuNo,
pic: this.daskuList[j].pic,
price: this.daskuList[j].price,
spData: {
value: '',
value2: ''
},
stock: this.daskuList[j].stock
})
} else {
this.combinations.push({
id: "",
outSkuNo: null,
pic: "",
price: "",
spData: {
value: '',
value2: ''
},
stock: ""
})
}
}
}
console.log("数据", this.combinations)
let z = 0
for (var i = 0; i < newVal[0].productAttr.length; i++) {
for (var j = 0; j < newVal[1].productAttr.length; j++) {
this.combinations[z].spData.value = newVal[0].productAttr[i].value
this.combinations[z].spData.value1 = newVal[1].productAttr[j].value
++z
}
}
}
console.log("组合数据", this.combinations)
},
},
},
onLoad(option) {
this.inid = option.id
if (option.id == 1) {
console.log(option.id)
let shangpxiangq = uni.getStorageSync("shangpxiangq")
console.log("商品数据是", shangpxiangq)
const data = shangpxiangq || {};
this.publishStatus = data.publishStatus || "1";
this.name = data.name || "";
this.productNo = data.productNo || "";
this.sort = data.sort || "";
this.price = data.price || "";
this.weight = data.weight || "";
this.unit = data.unit || "";
this.categoryName = data.categoryName || "";
this.brandName = data.brandName || "";
this.shopIds = data.shopIds || "";
this.pic = data.pic || "";
this.albumPics = data.albumPics || "";
this.categoryId = data.categoryId || "";
this.detailMobileHtml = data.detailMobileHtml || "";
this.list = JSON.parse(data.productAttr)
this.daskuList = data.skuList
this.id=data.id
let skuList = data.skuList
console.log(this.list)
console.log("撒低级", this.list[0].options)
this.skuList = []
for (var i = 0; i < this.list.length; i++) {
this.skuList.push({
productAttr: [],
range: this.list[i].name,
})
for (var j = 0; j < this.range[i].options.length; j++) {
if (this.range[i].options[j].text == this.list[i].name) {
this.range[i].value = this.range[i].options[j].value
console.log("默认值为", this.range)
break
}
}
for (var j = 0; j < this.list[i].options.length; j++) {
this.skuList[i].productAttr.push({
value: this.list[i].options[j].name
})
}
}
console.log("回家撒比", this.combinations)
// skuList: [{
// productAttr: [{
// value: ''
// }],
// range: 0,
// }],
// this.skuList=skuList
// id: ""
// outSkuNo: null
// pic: ""
// price: ""
// spData: {value: "白色", value2: ""}
// stock: ""
// 1:
// id: ""
// outSkuNo: null
// pic: ""
// price: ""
// spData: {value: "黑色", value2: ""}
// stock: ""
// console.log(skuList)
// this.skuList=skuList
if (this.pic != '') {
this.fileList.push(BASE_URL + this.pic)
}
if (this.albumPics != '') {
let ims = this.albumPics.split(",")
for (var i = 0; i < ims.length; i++) {
this.fileList2.push(BASE_URL + ims[i])
}
}
this.isReadOnly1 = false
const timer = setTimeout(() => {
// this.insertContents(this.detailMobileHtml)
this.isReadOnly1 = true
}, 1);
// const timer1 = setTimeout(() => {
// this.isReadOnly=false
// }, 4000);
} else {
// this.isReadOnly1 = true
this.isReadOnly = false
}
},
mounted() {
this.getInfo()
this.getcategory()
this.getbrand()
},
methods: {
dianj3(event, index) {
console.log(index)
this.combinations[index].pic = ""
},
dianj(event, index) {
console.log(index)
this.fileList = []
console.log(this.fileList)
event.stopPropagation();
},
dianj2(event, index) {
console.log(index)
this.albumPics=""
this.fileList2.splice(index, 1);
console.log(this.fileList2)
for (var i = 0; i < this.fileList2.length; i++) {
if(this.albumPics==""||this.albumPics==null||this.albumPics==undefined){
this.albumPics=this.fileList2[i].replace(BASE_URL, '');
}else{
this.albumPics=this.albumPics+","+this.fileList2[i].replace(BASE_URL, '');
}
}
console.log(this.albumPics)
// this.albumPics=this.fileList2
event.stopPropagation();
},
zhuangtai(iss) {
this.publishStatus = iss
},
onInput(e) {
// 获取编辑器的当前内容
this.detailMobileHtml = e.detail.html;
},
async dianchang() {
console.log("数据啊22", this.skuList)
console.log("数据啊21", this.combinations)
if (this.name == "") {
uni.showToast({
title: '商品名称不能为空',
icon: 'none', // 可选值：'success'、'loading'、'none'
duration: 1000 // 显示时长，单位 ms
});
return
}
if (this.categoryName == "") {
uni.showToast({
title: '商品分类不能为空',
icon: 'none', // 可选值：'success'、'loading'、'none'
duration: 1000 // 显示时长，单位 ms
});
return
}
let skuList = []
// let spData={}
for (var i = 0; i < this.skuList.length; i++) {
if (this.skuList[i].range == 0 || this.skuList[i].range == "") {
uni.showToast({
title: '规格不能为空',
icon: 'none', // 可选值：'success'、'loading'、'none'
duration: 1000 // 显示时长，单位 ms
});
return
}
for (var j = 0; j < this.skuList[i].productAttr.length; j++) {
if (this.skuList == 1) {
if (this.skuList[i].productAttr[j].value == "") {
uni.showToast({
title: '规格不能为空',
icon: 'none', // 可选值：'success'、'loading'、'none'
duration: 1000 // 显示时长，单位 ms
});
return
}
} else {
if (this.skuList[i].productAttr[j].value == "" || this.skuList[i].productAttr[j].value1 ==
"") {
uni.showToast({
title: '规格不能为空',
icon: 'none', // 可选值：'success'、'loading'、'none'
duration: 1000 // 显示时长，单位 ms
});
return
}
}
}
}
for (var i = 0; i < this.combinations.length; i++) {
if (this.skuList.length == 1) {
skuList.push({
id: this.combinations[i].id,
outSkuNo: null,
pic: this.combinations[i].pic,
price: this.combinations[i].price,
spData: JSON.stringify({
[this.skuList[0].range]: this.combinations[i].spData.value
}),
stock: this.combinations[i].stock,
[this.skuList[0].range]: this.combinations[i].spData.value
})
} else {
skuList.push({
id: this.combinations[i].id,
outSkuNo: null,
pic: this.combinations[i].pic,
price: this.combinations[i].price,
spData: JSON.stringify({
[this.skuList[0].range]: this.combinations[i].spData.value,
[this.skuList[1].range]: this.combinations[i].spData.value1,
}),
stock: this.combinations[i].stock,
[this.skuList[0].range]: this.combinations[i].spData.value,
[this.skuList[1].range]: this.combinations[i].spData.value1
})
}
}
console.log("数据啊会受到覅", skuList)
let productAttr = []
for (var i = 0; i < this.skuList.length; i++) {
productAttr.push({
name: '',
options: []
})
productAttr[i].name = this.skuList[i].range
for (var j = 0; j < this.skuList[i].productAttr.length; j++) {
productAttr[i].options.push({
name: ""
})
productAttr[i].options[j] = {
name: this.skuList[i].productAttr[j].value
}
}
}
const formData = {
name: this.name,
productNo: this.productNo,
sort: this.sort,
price: this.price,
weight: this.weight,
unit: this.unit,
categoryName: this.categoryName,
brandName: this.brandName,
shopIds: this.shopIds,
pic: this.pic,
albumPics: this.albumPics,
publishStatus: this.publishStatus,
detailMobileHtml: this.detailMobileHtml,
productAttr: JSON.stringify(productAttr),
skuList: skuList,
categoryId:this.categoryId,
id:this.id
};
console.log("上传的数据", formData)
if (this.inid == 1) {
const res = await request({
url: 'pms/product',
method: 'put',
data: formData
});
uni.showToast({
title: '修改成功',
icon: 'success',
duration: 2000 // 提示框显示2秒
});
// 延迟2秒后返回上一页
setTimeout(() => {
uni.navigateBack({
delta: 1 // 返回上一页
});
}, 2000); // 延迟2秒
} else {
const res = await request({
url: 'pms/product',
method: 'post',
data: formData
});
uni.showToast({
title: '上传成功',
icon: 'success',
duration: 2000 // 提示框显示2秒
});
// 延迟2秒后返回上一页
setTimeout(() => {
uni.navigateBack({
delta: 1 // 返回上一页
});
}, 2000); // 延迟2秒
}
},
shanchu(index, jndex) {
if (this.skuList[index].productAttr.length == 1) {
this.skuList.splice(index, 1)
return
}
this.skuList[index].productAttr.splice(jndex, 1)
},
tianjia() {
this.skuList.push({
productAttr: [{
value: ''
} // 初始一个空对象
],
range: 0,
})
},
xiengfa(index) {
this.skuList[index].productAttr.push({
value: ''
});
},
change(e, index) {
console.log("e:", e);
console.log("index:", index);
this.skuList[index].range = this.range[0].options[e].text
},
openPicker(ins) {
if (ins == 1) {
this.$refs.picker.open();
}
if (ins == 2) {
this.$refs.picker1.open();
}
},
confirm(e) {
console.log('confirm', e);
this.categoryName = e.value[0]
this.categoryId = this.category[e.indexs[0]].id
},
confirm1(e) {
console.log('confirm', e);
this.brandName = e.value[0]
},
async getInfo() {
const res = await request({
url: 'wechat/getInfo',
method: 'get'
});
this.shopIds = res.shopIds[0]
console.log("个人信息", res.shopIds[0])
// this.isReadOnly = false
},
async getcategory() {
console.log(this.shopIds)
const res = await request({
url: 'pms/category/page?pageNum=1&pageSize=999999',
method: 'get'
});
console.log("商品分类", res)
for (var i = 0; i < res.rows.length; i++) {
this.columns[0].push(res.rows[i].name)
}
this.category = res.rows
},
async getbrand() {
console.log(this.shopIds)
const res = await request({
url: 'pms/brand/page?pageNum=1&pageSize=99999',
method: 'get'
});
console.log("品牌分类", res)
for (var i = 0; i < res.rows.length; i++) {
this.columns1[0].push(res.rows[i].name)
}
this.brand = res.rows
},
async chooseImage() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePaths = res.tempFilePaths;
this.fileList[0] = tempFilePaths[0]
uni.uploadFile({
url: `${this.BASE_URL}/common/upload`, // 替换为你的上传地址
filePath: tempFilePaths[0],
name: 'file', // 对应后端接收的字段名
header: {
'Authorization': `Bearer ${uni.getStorageSync('user_token')}` // 设置 token
},
formData: {
// 这里可以添加额外的表单数据
},
success: (uploadRes) => {
console.log(uploadRes);
this.pic = JSON.parse(uploadRes.data).fileName
console.log(JSON.parse(uploadRes.data).fileName);
},
fail: (error) => {
console.error('上传失败:', error);
}
});
}
});
},
chooseImage3(index) {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
// this.fileList2.push(res.tempFilePaths[0])
// this.uploadFile(res.tempFilePaths[0]);
uni.uploadFile({
url: `${this.BASE_URL}/common/upload`, // 替换为你的上传地址
filePath: res.tempFilePaths[0],
name: 'file', // 对应后端接收的字段名
header: {
'Authorization': `Bearer ${uni.getStorageSync('user_token')}` // 设置 token
},
formData: {
// 这里可以添加额外的表单数据
},
success: (uploadRes) => {
console.log(uploadRes);
this.combinations[index].pic = JSON.parse(uploadRes
.data).fileName
console.log("图片的地址是", this.combinations[index].pic)
// this.fileList3[index]=BASE_URL+uploadRes
},
fail: (error) => {
console.error('上传失败:', error);
}
});
}
});
},
chooseImage2() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
this.fileList2.push(res.tempFilePaths[0])
// this.uploadFile(res.tempFilePaths[0]);
uni.uploadFile({
url: `${this.BASE_URL}/common/upload`, // 替换为你的上传地址
filePath: res.tempFilePaths[0],
name: 'file', // 对应后端接收的字段名
header: {
'Authorization': `Bearer ${uni.getStorageSync('user_token')}` // 设置 token
},
formData: {
// 这里可以添加额外的表单数据
},
success: (uploadRes) => {
console.log(uploadRes);
if (this.albumPics == "") {
this.albumPics = JSON.parse(uploadRes.data).fileName
} else {
this.albumPics = this.albumPics + ',' + JSON.parse(uploadRes
.data).fileName
}
console.log(this.albumPics);
},
fail: (error) => {
console.error('上传失败:', error);
}
});
}
});
},
onEditorReady() {
uni.createSelectorQuery().in(this).select('#editor').context((res) => {
if (res) {
this.editorCtx = res.context;
console.log("执行")
if(this.detailMobileHtml!=""){
this.insertContents(this.detailMobileHtml)
}
}
}).exec();
},
insertContents(html) {
if (!this.editorCtx) {
uni.showToast({
title: '编辑器未就绪',
icon: 'none'
});
return;
}
if (!this.editorCtx) return;
const set = () => this.editorCtx.setContents({
html
});
// #ifdef H5
this.editorCtx.blur && this.editorCtx.blur(set);
this.editorCtx.blur({
success: set
});
const timer1 = setTimeout(() => {
this.isReadOnly = false
}, 2000);
},
insertImage() {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const filePath = res.tempFilePaths[0];
this.editorCtx.insertImage({
src: filePath,
alt: '图片',
width: '100%',
height: 'auto',
success: () => {
console.log('图片插入成功');
}
});
}
});
}
}
}
</script>
<style>
@import url("Uploadproduct.css")
</style>
往下滑动一段距离后
点击输入框 输入框的内容会跑到其他位置
uniapp开发的微信小程序
最新发布
扫一扫
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
