<!-- 新增--> <template> <view class="content"> <view style="width: 100%; height: 44px;"></view> <view class="top-heder"> <view class="t-left" @click="getback()"> <uni-icons type="left" size="18"></uni-icons> </view> <view class="t-title"> <text>添加商品</text> </view> <view class="t-you"></view> </view> <view class="mub"> <view class="top-ail"> <view class="box-ltopt"> <u-upload :fileList="fileList6" @afterRead="afterRead1" @delete="deletePic1" name="6" multiple :maxCount="1" width="345px" height="126px" > <image src="../../static/detection/tjspfmt.png" style="width: 345px;height: 126px;"></image> </u-upload> </view> <!-- 上传 --> <view class="box-list"> <!-- <view class="list-box"> <view class="l-left">商品类别</view> <view class="l-right" @click="fenlei()"> <text v-if="!ftitle">选择商品分类</text> <text v-if="ftitle">{{ftitle}}</text> </view> </view> --> <!-- <view class="list-box"> <view class="l-left">价格(单位)元</view> <view class="l-right"> <input type="text" v-model="releasebox.price" placeholder="请输入价格"> </view> </view> --> <view class="list-box"> <view class="l-left">序号</view> <view class="l-right"> <input type="number" v-model="releasebox.orderNum" placeholder="请输入排序的序号"> </view> </view> <!-- <view class="list-box"> <view class="l-left">安检价格:</view> <view class="l-right"> <input type="number" v-model="releasebox.skuList[0].price" placeholder="请输入安检价格"> </view> </view> <view class="list-box"> <view class="l-left">环检价格:</view> <view class="l-right"> <input type="number" v-model="releasebox.skuList[1].price" placeholder="请输入环检价格"> </view> </view> <view class="list-box"> <view class="l-left">环检+安检:</view> <view class="l-right"> <input type="number" v-model="releasebox.skuList[2].price" placeholder="请输入总和的价格"> </view> </view> --> <view class="thui">商品图片</view> <view class="imgs"> <u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple :maxCount="5" ></u-upload> </view> </view> <!-- 是否上架 --> <!-- <view class="bottom-di"> <view class="b-left">是否上架</view> <view class="b-right"> <switch @change="getone()" :checked="one" color="#FFCC33" style="transform:scale(0.7)"/> </view> </view> --> <!-- 是否特价 --> <!-- <view class="bottom-di"> <view class="b-left">是否特价</view> <view class="b-right"> <switch @change="gettwo()" :checked="two" color="#FFCC33" style="transform:scale(0.7)"/> </view> </view> --> <!-- 是否特价 --> <!-- <view class="bottom-di"> <view class="b-left">是否参与优惠</view> <view class="b-right"> <switch @change="getthree()" :checked="three" color="#FFCC33" style="transform:scale(0.7)"/> </view> </view> --> <view class="box-list"> <!-- <view class=""> <u--textarea v-model="releasebox.goodsDesc" placeholder="请输入内容" border="none"></u--textarea> </view> --> <Rboy-editor ref="RboyEditor" @uploadFile="uploadFile" :newsContent="releasebox.goodsDesc" :count="6"></Rboy-editor> </view> <view class="dlanniu" @click="getgoods()" > <text>提交</text> </view> </view> </view> <u-picker @change="getxz" @confirm="getyes()" @cancel="getyes()" :show="show" :columns="fenlist" keyName="categoryName"></u-picker> <!-- 底部 --> </view> </template> <script> import RboyEditor from "@/components/Rboy-editor/Rboy-editor" import config from '@/config'; import request from '../../utils/request'; import upload from '@/utils/upload.js' import code from '../../uni_modules/uview-ui/libs/config/props/code'; export default { data() { return { baseUrl:this.$baseUrl, one:false, two:false, three:false, show:false, guige:false, msg:'3', newsContent:'', tapnum:0, value5:'', tian:{ skuName:'',//规格名称 price:''//规格价格 }, fileList4:[], fileList6:[], taplist:[ {Text:'已发布'}, {Text:'待上架'}, ], fenlist:[], ftitle:null, releasebox:{ title:'', //标题 goodsCategoryId:'',//商品分类id partnerId:'',//合作商id price:'',//价格,单位为:分 image:'',//封面图 imageList:[], //商品图片 isListing:'0',//01上架下架 isSpecial:'0',//01是否特价 isAttend:"0",//是否参与优惠0不参与1参与 goodsDesc:'',//详细描述 orderNum:'', //排序 skuList:[ {skuName:'安检',price:''}, {skuName:'环检',price:''}, {skuName:'安检+环检',price:''}, ] } } }, onLoad(e) { this.releasebox.goodsCategoryId = e.id }, onShow() { this.releasebox.partnerId = uni.getStorageSync('partnerId') }, methods: { fenlei(){ this.show = true }, // 上传图片 async uploadFile(event) { let that = this // event 选择的图片 for (var item in event.tempFilePaths) { // uploadFileApi 为上传到服务端的接口 count大于1 使用 await upload({ url:'/common/upload', filePath: event.tempFilePaths[item], }).then((res)=>{ that.$refs.RboyEditor.editor_insertImage({ src: this.baseUrl + res.fileName, alt: "图像", }) }) } }, // async getindex(){ // // 获取分类信息 // let res = await request({ // url:'/system/shopInspectionCategory/list', // method: 'get', // }) // let arr = res.rows // this.ftitle = res.rows[0].categoryName // // this.releasebox.goodsCategoryId = res.rows[0].id // this.fenlist.push(arr) // console.log('获取分类信息',this.fenlist); // }, async getgoods(){ if(this.releasebox.partnerId == "" ||this.releasebox.image == "" ||this.releasebox.imageList == "" ){ uni.showToast({ title:"以上均为必填项!!!", icon:"none" }) return } this.releasebox.skuList[0].price = this.releasebox.skuList[0].price * 100 this.releasebox.skuList[1].price = this.releasebox.skuList[1].price * 100 this.releasebox.skuList[2].price = this.releasebox.skuList[2].price * 100 this.releasebox.goodsDesc = await this.$refs.RboyEditor.editor_getcontents() this.releasebox.images = this.releasebox.imageList.join(",") let res = await request({ url:'/partnerOwn/partner/addGoods', method: 'post', data : this.releasebox }) if(res.code == 200){ uni.showToast({ title:"发布成功", duration: 2000 }) this.releasebox = { title:'', //标题 goodsCategoryId:'',//商品分类id partnerId:'',//合作商id price:'',//价格,单位为:分 image:'',//封面图 imageList:[], //商品图片 isListing:'0',//01上架下架 isSpecial:'0',//01是否特价 isAttend:"0",//是否参与优惠0不参与1参与 goodsDesc:'',//详细描述 orderNum:'', //排序 skuList:[ {skuName:'aj',price:''}, {skuName:'hj',price:''}, {skuName:'ahj',price:''}, ] } setTimeout(() => { uni.redirectTo({ url: '/pages/index/index' }); }, 1000); } }, getxz(e){ this.releasebox.goodsCategoryId = e.value[0].id this.ftitle = e.value[0].categoryName }, // 添加规格 guigeadd(){ let obj = { skuname:this.tian.skuname, price:this.tian.price } this.releasebox.skuList.push(obj) }, // 删除 getdeletesku(index){ this.releasebox.skuList.splice(index,1) }, getone(){ this.one =! this.one if(this.one == false){ this.releasebox.isListing = 0 } if(this.one == true){ this.releasebox.isListing = 1 } }, gettwo(){ this.two =! this.two if(this.two == false){ this.releasebox.isSpecial = 0 } if(this.two == true){ this.releasebox.isSpecial = 1 } }, getthree(){ this.three =! this.three if(this.three == false){ this.releasebox.isAttend = 0 } if(this.three == true){ this.releasebox.isAttend = 1 } }, gettapindex(index){ this.tapnum = index }, getback(){ uni.navigateBack() }, getyes(){ this.show = false }, open() { // this.guige = true }, close() { this.guige = false // console.log('close'); }, // 以下均为图片方法---------------------- // 删除图片 deletePic(event) { this[`fileList${event.name}`].splice(event.index, 1) }, // 新增图片 async afterRead(event) { // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式 let lists = [].concat(event.file) let fileListLen = this[`fileList${event.name}`].length lists.map((item) => { this[`fileList${event.name}`].push({ ...item, }) }) for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise(lists[i].url) let item = this[`fileList${event.name}`][fileListLen] this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result })) fileListLen++ } }, uploadFilePromise(url) { upload({ url:'/common/upload', filePath: url, }).then((res)=>{ this.releasebox.imageList.push(res.data.url) }) }, // 第二遍 deletePic1(event) { this[`fileList${event.name}`].splice(event.index, 1) }, // 新增图片 async afterRead1(event) { // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式 let lists = [].concat(event.file) let fileListLen = this[`fileList${event.name}`].length lists.map((item) => { this[`fileList${event.name}`].push({ ...item, }) }) for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise1(lists[i].url) let item = this[`fileList${event.name}`][fileListLen] this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result })) fileListLen++ } }, uploadFilePromise1(url) { upload({ url:'/common/upload', filePath: url, }).then((res)=>{ this.releasebox.image = res.data.url }) }, } } </script> <style scoped lang="scss"> /deep/uni-view uni-scroll-view uni-swiper-item { width: 100% !important; } .content { box-sizing: border-box; width: 100%; height: calc(100vh); background: white; } .top-heder{ width: 100%; height: 46px; background: white; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 5px 15px; } .t-title{ font-size: 17px; font-weight: bold; color: #333333; } .t-left{ width: 10%; } .t-you{ height: 100%; width: 20%; } .t-input{ width: 80%; height: 36px; background: #F0F0F0; border-radius: 50px; box-sizing: border-box; padding: 0 15px; display: flex; align-items: center; } .top-ail{ width: 100%; box-sizing: border-box; padding: 15px; background-color: #F4F4F4; // height: calc(100vh); } .mub{ background-color: #F4F4F4; height: calc(100vh); } .dix{ display: flex; align-items: center; } .upimg{ width: 100%; height: 126px; border-radius: 8px; box-sizing: border-box; background-color: white; image{ width: 100%; height: 100%; } } .box-ltopt{ width: 100%; border-radius: 8px; box-sizing: border-box; // padding: 10px; margin: 10px auto; } .box-list{ width: 100%; border-radius: 8px; box-sizing: border-box; padding: 10px; background-color: white; margin: 10px auto; } .list-box{ display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 15px 5px; border-bottom: 1px solid #EEEEEE; } .l-left{ font-size: 16px; font-weight: 400; color: #333333; } .l-right{ font-size: 16px; font-weight: 400; color: #999999; text-align: right; } .xiaolan{ // width: 109px; // height: 30px; background: #E2EAFF; border-radius: 50px; display: flex; align-content: center; justify-self: center; box-sizing: border-box; padding: 5px; font-size: 14px; font-weight: 400; color: #0D2E8D; } .xiaohui{ // width: 141px; // height: 30px; box-sizing: border-box; padding: 0px 10px; background: #F7F7F7; border-radius: 50px ; display: flex; align-items: center; justify-content: center; margin: 10px ; } .hui-right{ border-left:1px solid #DDDDDD; padding: 5px; margin-left: 5px; } .wrap-box{ width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; } .bottom-di{ width: 100%; height: 56px; background: #FFFFFF; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0px 20px; margin-bottom: 10px; } .thui{ font-size: 16px; font-weight: 400; color: #666666; margin-top: 10px; margin-left: 8px; } .imgs{ box-sizing: border-box; margin-top: 20px; } .p-box{ border-radius: 10px; overflow: hidden; box-sizing: border-box; padding: 20px; width: 100%; background-color: white; } .p-top{ width: 100%; text-align: center; font-size: 17px; font-weight: bold; color: #000000; margin-bottom: 20px; } .on-input{ width: 100%; display: flex; align-items: center; box-sizing: border-box; } .ipt-kuang{ width: 70%; height: 30px; background: #FFFFFF; border-radius: 8px 8px 8px 8px; opacity: 1; border: 1px solid #DDDDDD; display: flex; align-items: center; margin: 10px auto; box-sizing: border-box; padding: 0px 10px; } .t-left{ width: 20%; font-size: 14px; font-weight: 400; color: #000000; } .dlanniu{ width: 80%; height: 45px; background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%); border-radius: 50px; display: flex; align-items: center; justify-content: center; margin: 20px auto; color: white; } .da{ font-size: 16px; } </style>