<template>
<view class="pages">
<form @submit="formSubmit" @reset="formReset">
<view class="form-item-type nomal-top">
<view class="form-item required">
<view class="form-item-til">类目</view>
<view class="form-item-con">
<input type="text" disabled placeholder="商品类目" v-model="params.type" value="" />
</view>
</view>
<!-- <view class="form-item arrow">
<view class="form-item-til">地理位置</view>
<view class="form-item-con" @click="chooseaddr">
<input type="text" placeholder="请选择地理位置" v-model="params.myposition" value="" />
</view>
</view> -->
</view>
<view class="form-item-type">
<view class="form-item required">
<view class="form-item-til">名称</view>
<view class="form-item-con">
<input type="text" placeholder="请输入发布产品名称" v-model="params.name" value="" />
</view>
</view>
<view class="form-item required arrow" @click="openbrand">
<view class="form-item-til">品牌</view>
<view class="form-item-con">
<input type="text" placeholder="请输入品牌" v-model="params.brandName" value="" />
</view>
</view>
<view class="form-item required">
<view class="form-item-til">供应商</view>
<view class="form-item-con">
<input type="text" disabled placeholder="" v-model="params.compName" value="" />
</view>
</view>
<view class="form-item required arrow" @click="openplaceoforigin">
<view class="form-item-til">生产地</view>
<view class="form-item-con">
<input type="text" disabled="disabled" placeholder="" v-model="params.placeOfProduction" value="" />
</view>
</view>
<!-- <view class="form-item arrow" @click="openspec"> -->
<view class="form-item required">
<view class="form-item-til">规格</view>
<view class="form-item-con">
<!-- <text v-for="(item,index) in params.spec">{{item}},</text> -->
<input type="text" placeholder="" v-model="params.spec" value="" />
</view>
</view>
<view class="form-item">
<view class="form-item-til">零售价</view>
<view class="form-item-con">
<input type="text" placeholder="请输入零售价" v-model="params.price" value="" />
</view>
</view>
<view class="form-item">
<view class="form-item-til">市场价</view>
<view class="form-item-con">
<input type="text" placeholder="请输入市场价" v-model="params.originalPrice" value="" />
</view>
</view>
<view class="form-item">
<view class="form-item-til">保质期</view>
<view class="form-item-con">
<input type="text" placeholder="请输入保质期" v-model="params.qualityGuaranteePeriod" value="" />
</view>
</view>
<view class="form-item">
<view class="form-item-til">生产日期</view>
<view class="form-item-con">
<picker mode="date" :value="params.dateOfManufacture" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{{params.dateOfManufacture}}</view>
</picker>
<!-- <input type="text" placeholder="请输入生产日期" v-model="params.productiondate" value="" /> -->
</view>
</view>
<view class="form-item">
<view class="form-item-til">商品介绍</view>
<view class="form-item-con" style="text-align: left;">
<!-- <editor id="editor" class="ql-container" v-model="params.description" placeholder="请输入商品介绍" ></editor> -->
<textarea placeholder="请输入商品介绍" v-model="params.description" auto-height />
<!-- <input type="text" placeholder="请输入商品介绍" v-model="params.description" value="" /> -->
</view>
</view>
<view class="form-item">
<view class="form-item-til">商品货号</view>
<view class="form-item-con">
<input type="text" placeholder="请输入商品货号" v-model="params.productSn" value="" />
</view>
</view>
<view class="form-item">
<view class="form-item-til">计量单位</view>
<view class="form-item-con">
<input type="text" placeholder="请输入计量单位" v-model="params.unit" value="" />
</view>
</view>
<!-- <view class="form-item">
<view class="form-item-til">标签</view>
<view class="form-item-con">
<input type="text" placeholder="请输入标签，用逗号隔开" v-model="params.productlabel" value="" />
</view>
</view> -->
<view class="form-item">
<view class="form-item-til">排序</view>
<view class="form-item-con">
<input type="text" placeholder="排序数字" v-model="params.sort" value="" />
</view>
</view>
</view>
<view class="form-item upfile">
<view class="form-item-til">上传图片</view>
<view class="form-item-con">
<view class="form-item-chooseIMGs-wrap">
<view class="img-item" v-for="(item,index) in pics" :key="index" >
<icon type="cancel" @click="delImg(index)" size="26"/>
<image :src="item" @click="previewPic(index)" class="choosedIMG" ></image>
</view>
</view>
<view class="chooseIMG-btn">
<image class="chooseIMG-btn-img" @click="chooseimg" src="/static/img/icon-upload.png"></image>
</view>
</view>
</view>
</form>
<view class="bottom-btn-wrap">
<button class="bottom-btn" @click="publish" type="primary">发布</button>
</view>
<!-- 页面显示结束 下面是隐藏内容 -->
<!-- 供应商开始 -->
<!-- <view class="supplier-page fix-content translate" :class="{ 'open': supplieropen }" >
<view class="search-wrap search-left-color">
<view class="search">
<view class="searchTxt">
<uni-search-bar placeholder="搜索供应商关键词" @confirm="searchsupplier" @input="searchsupplier" ></uni-search-bar>
</view>
</view>
</view>
<view class="simplepage-wrap">
<mescroll-body ref="mescrollRef0" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
<view>
<view v-for="(item,index) in supplierlist" :key="index" @click="supplierclick(item)" class="simplepage-item">{{item}}</view>
</view>
</mescroll-body>
</view>
</view> -->
<!-- 供应商结束 -->
<!-- 产地开始 -->
<view class="placeoforigin-page fix-content translate" :class="{ 'open': placeoforiginopen }" >
<view class="search-wrap search-left-color">
<view class="search">
<view class="searchTxt">
<uni-search-bar placeholder="搜索产地关键词" @confirm="searchplace" @input="searchplace" ></uni-search-bar>
</view>
</view>
</view>
<!-- 搜索 结束 -->
<scroll-view class="simplepage-wrap" scroll-y="true">
<view v-for="(item,index) in placeoforiginlist" :key="index" @click="placeoforiginclick(item)" class="simplepage-item">{{item.detailAddress}}</view>
</scroll-view>
</view>
<!-- 产地结束 -->
<!-- 品牌开始 -->
<view class="placeoforigin-page fix-content translate" :class="{ 'open':brandopen }" >
<view class="search-wrap search-left-color">
<view class="search">
<view class="searchTxt">
<uni-search-bar placeholder="搜索品牌关键词" @confirm="searchbrand" @input="searchbrand" ></uni-search-bar>
</view>
</view>
</view>
<!-- 搜索 结束 -->
<scroll-view class="simplepage-wrap" scroll-y="true">
<view v-for="(item,index) in brandlist" :key="index" @click="brandclick(item)" class="simplepage-item">{{item.brandName}}</view>
</scroll-view>
</view>
<!-- 牌结束 -->
<!-- 规格开始 -->
<view class="spec-page fix-content translate" :class="{ 'open': specopen }" >
<view class="spec-wrap wrap">
<checkbox-group @change="checkboxChange">
<label v-for="(item,index) in speclist" :key="index" class="checkbox-style" >
<checkbox :value="item.value" :checked="item.checked" />{{item.name}}
</label>
</checkbox-group>
<view class="pecifications-btn-wrap">
<button type="default" class="big-btn big-btn-hollow" @click="resetcheckbox">重置</button>
<button type="default" class="big-btn primary" @click="specclick">确定</button>
</view>
</view>
</view>
<!-- 规格结束 -->
</view>
</template>
<script>
// 引入mescroll-mixins.js
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
// 引入mescroll-body组件 (如已在main.js注册全局组件,则省略此步骤)
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 注意.vue后缀不能省
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
import { bus } from '../../utils/bus.js';
export default {
mixins: [MescrollMixin], // 使用mixin
components: {
MescrollBody,
uniSearchBar,
},
data() {
const currentDate = this.getDate({
format: true
})
return {
mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
downOption: {
// ...
},
// 上拉加载的配置(可选, 绝大部分情况无需配置)
upOption: {
page: {
size: 10 // 每页数据的数量,默认10
},
noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: '暂无相关数据'
}
},
thetoken:'',
params: {
token: '',
type:'',
myposition:'',
name:'',
brandName:'',
brandId:'',
price:'',
originalPrice:'',//市场价
compName:'默认的供应商',//供应商
compId:'',
placeOfProduction:'',//产地
spec:'',//规格
qualityGuaranteePeriod:'',//保质期
dateOfManufacture: currentDate,//生产日期 // productiondate:'',//生产日期
unit:'',//包装
productlabel:'',//标签
albumPics:'',//图片视频
pic:'',
productBigCategoryId:'',//大类ID
productCategoryId:'',//类别id
productCategoryName:'',//类别名称
productBigCategoryName:'',//大类名称
placeOfProductionId:0,
publishStatus:"0",
productSn:'',//商品货号
sort:'',//排序
description:'',
},
pics:[],
//表单检查结果
checkStatus:false,
//供应商
supplieropen:false,
supplierlist:[],
// 产地
placeoforiginopen:false,
placeoforiginlist:[],
brandopen:false,
brandlist:[],
places:[],//临时暂存
brands:[],
// 规格
specopen:false,
speclist:[
{value: '500g/提(250g/盒*2)',name: '500g/提(250g/盒*2)',checked: false},
{value: '10g/罐',name: '10g/罐',checked: false},
{value: '30g/盒',name: '30g/盒',checked: false},
{value: '150g/盒',name: '150g/盒',checked: false},
{value: '30g/盒(1.5g*20瓶)',name: '30g/盒(1.5g*20瓶)',checked: false},
],
backtyep:1,
}
},
onShow() {
uni.hideTabBar();
let serf = this;
//检查登录,获取token
// let loginRes = this.checkLogin('/pages/publish/publish', '2');
// if (!loginRes) {
// return false;
// }
// serf.params.token = loginRes[0];
},
onHide() {
uni.showTabBar()
},
onLoad(option) {
let self = this;
if(Object.keys(bus.data).length>0){
console.log('bus.data',bus.data)
this.params.type = bus.data.name;
this.params.productBigCategoryId = bus.data.parentId;
this.params.productCategoryId = bus.data.id;
this.params.productBigCategoryName = bus.data.productBigCategoryName;
this.params.productCategoryName = bus.data.name;
// console.log(this.params.type);
};
// console.log(option);
// this.params.type = option.type;
uni.getStorage({
key:'token',
success: function (res) {
self.params.token = res.data;
// console.log(res.data);
}
});
uni.getStorage({
key:'tokenhead',
success: function (res) {
self.params.tokenhead = res.data;
// console.log(res.data);
}
});
//供应商详情
this.thetoken = this.params.tokenhead+this.params.token;
uni.getStorage({
key:'userInfo',
success: function (res) {
self.params.compId = res.data.company.compId;
self.params.compName = res.data.company.compName;
// console.log(res.data);
}
});
this.$api.http.get(this.config.apiBaseurl+'/company/cp/detail',{header: {Authorization:this.thetoken},params:{compId:this.params.compId}}).then(res =>{
console.log('res',JSON.parse(JSON.stringify(res)));
this.placeoforiginlist = res.data.data.origines;
this.brandlist = res.data.data.brands;
this.brands = res.data.data.brands;
this.places = res.data.data.origines;
this.params.compName= res.data.data.compName;
}).catch( err => {
console.log(err)
});
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
methods: {
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
bindDateChange: function(e) {
this.params.dateOfManufacture = e.target.value
// console.log(this.params.dateOfManufacture);
},
/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
downCallback(){
this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
},
/*上拉加载的回调*/
upCallback(page) {
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
this.params = Object.assign(this.params,{page:pageNum,rows:pageSize});
this.$api.http.post(this.config.apiBaseurl+'hotel/reserve/data',this.params,{
header: {
Accept:'application/json',
Authorization: 'Bearer '+ this.params.token, //注意Bearer后面有一空格
}
}).then(data => {
if(data.data.code=='1001'){
// uni.redirectTo({
// url:'/pages/login/login?backpage=/pages/index/index'+'&backtype='+2,
// });
};
console.log(data);
// 接口返回的当前页数据列表 (数组)
let curPageData = data.data.rows;
console.log('curPageData',curPageData);
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
let curPageLen = curPageData.length;
// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
// let totalPage = data.xxx;
// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
let totalSize = data.data.total;
// 接口返回的是否有下一页 (true/false)
// let hasNext = data.xxx;
//设置列表数据
if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
this.dataList = this.dataList.concat(curPageData); //追加新数据
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
this.mescroll.endBySize(curPageLen, totalSize);
// setTimeout(()=>{
// this.mescroll.endSuccess(curPageLen)
// },20)
}).catch(err => {
this.mescroll.endErr()
console.log(err)
});
},
//选择图片
chooseimg() {
let _self = this;
uni.chooseImage({
// count: 3,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: function(res) {
console.log('res111',res);
const tempFilePaths = res.tempFilePaths;
_self.image = tempFilePaths[0];
console.log("tempFilePaths[0]", tempFilePaths[0]) //能够打印出选中的图片
_self.iconcheck = 1; //点击后图片更改状态由0变成1
console.log('111', JSON.stringify(res.tempFilePaths));
// _self.pics = res.tempFilePaths;
// console.log(_self.pics);
const isLt10M = res.tempFiles[0].size / 1024 / 1024 < 10;
if(!isLt10M) {
uni.showToast({
title: "上传文件大小不能超过 10MB!",
icon:'none'
})
return false;
};
const imgNumber = _self.pics.length<5;
if(!imgNumber) {
uni.showToast({
title: "图片不能超过5张!",
icon:'none'
})
return false;
};
//上传图片
let obj = new Object();
let file=[];
obj.name = "file";
obj.uri = res.tempFiles[0].path;
file.push(obj);
_self.uploadTheImg(file);
},
error: function(e) {
console.log(e);
}
});
},
uploadTheImg(imgFiles){
let _self = this;
//上传图片
uni.uploadFile({
url: _self.config.apiBaseurl + '/upload/fileImg', // 后端api接口
fileType: "image",
files:imgFiles,
// filePath: imgFiles[0], // uni.chooseImage函数调用后获取的本地文件路劲
name: 'file', //后端通过'file'获取上传的文件对象(字段)
formData: {
// file:_self.image,
// openid:_self.openid, //剩下的字段
},
header: {
// "Content-Type":"multipart/form-data",
// Accept:'application/json',
Accept:'*/*',
Authorization: 'Bearer '+ _self.params.token, //注意Bearer后面有一空格
},
success: (res) => {
console.log(JSON.parse(res.data))
let data = JSON.parse(res.data);
_self.pics.push(data.data);
if (res.statusCode == 200) {
uni.showToast({
icon: 'success',
title: "添加成功...",
})
}
},
error(error) {
uni.showToast({
title: "添加失败...",
})
}
});
},
previewPic(index){
// 预览图片
uni.previewImage({
urls: this.pics,
current:index,
longPressActions: {//长按图片显示操作菜单，如不填默认为保存相册
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
},
//删除图片
delImg(index){
console.log('index',index);
console.log('t',this.pics);
this.pics.splice(index,1);
console.log('t',this.pics);
},
//发布
publish() {
this.params.albumPics = this.pics.toString();
this.params.pic = this.pics[0];
this.checkStatus = this.check_form();
if(this.checkStatus){
let _self = this;
uni.showLoading({
title: '请稍等'
});
this.$api.http.post(this.config.apiBaseurl+'/prod/pub/add',this.params,{
header: {
Accept:'application/json',
Authorization: 'Bearer '+ this.params.token, //注意Bearer后面有一空格
}
}).then(res => {
uni.hideLoading();
console.log('res',res);
if(res.data.message =='暂未登录或token已经过期'){
// let loginurl = `${this.config.apiBaseurl}/wechat/h5/authorize?returnUrl=/pages/publish/publish`
// console.log('loginurl',loginurl);
uni.showToast({
title:res.data.message,
duration: 2000
});
setTimeout(() => {
window.location.replace(this.config.loginUrl);
}, 2000);
};
if(res.data.code!=200){
uni.showToast({
icon:"none",
title:res.data.message,
duration: 2000
});
return false;
};
uni.showToast({
icon:'success',
title:`发布成功,请等待审核!`,
duration: 2000
});
setTimeout(() => {
uni.redirectTo({
url:'/pages/publish/publishsuccess/publishsuccess'
})
}, 2000);
}).catch(err => {
uni.hideLoading();
console.log(err)
});
// setTimeout(function () {
// uni.hideLoading();
// }, 2000);
// setTimeout(()=>{
// uni.showToast({
// icon:'success',
// title:`发布成功,请等待审核!`,
// duration: 2000
// });
// },2000);
// setTimeout(() => {
// uni.redirectTo({
// url:'/pages/publish/publishsuccess/publishsuccess'
// })
// }, 2000);
}
},
//表单验证
check_form() {
console.log('this.params',this.params);
if(this.params.type.length <= 0) {
uni.showToast({icon:'none',title:`请到'我要发布页'选择类别!`,duration: 2000});
return false;
}
// if(this.params.myposition.length <= 0) {
// console.log(this.params.myposition);
// uni.showToast({icon:'none',title:`请填写地理位置!`,duration: 2000});
// return false;
// }
if(this.params.name.length <= 0) {
uni.showToast({icon:'none',title:`请填写商品名称!`,duration: 2000});
return false;
}
if(this.params.brandName.length <= 0) {
uni.showToast({icon:'none',title:`请填写品牌!`,duration: 2000});
return false;
}
// if(this.params.price.length <= 0) {
// uni.showToast({icon:'none',title:`请填写零售价!`,duration: 2000});
// return false;
// }
if(this.params.compName.length <= 0) {
uni.showToast({icon:'none',title:`请填写供应商!`,duration: 2000});
return false;
}
if(this.params.placeOfProduction.length <= 0) {
uni.showToast({icon:'none',title:`请填写生产地!`,duration: 2000});
return false;
}
if(this.params.spec.length <= 0) {
uni.showToast({icon:'none',title:`请填写规格!`,duration: 2000});
return false;
}
// if(this.params.qualityGuaranteePeriod.length <= 0) {
// uni.showToast({icon:'none',title:`请填写保质期!`,duration: 2000});
// return false;
// }
// if(this.params.dateOfManufacture.length <= 0) {
// uni.showToast({icon:'none',title:`请填写生产日期!`,duration: 2000});
// return false;
// }
// if(this.params.unit.length <= 0) {
// uni.showToast({icon:'none',title:`请填写计量单位!`,duration: 2000});
// return false;
// }
// if(this.params.productlabel.length <= 0) {
// uni.showToast({icon:'none',title:`请填写标签!`,duration: 2000});
// return false;
// }
if(this.params.albumPics.length <= 0) {
uni.showToast({icon:'none',title:`请上传图片!`,duration: 2000});
return false;
}
return true;
},
//选择供应商
// supplierclick(name){
// this.params.compName = name;
// this.supplieropen = false;
// this.showback();
// },
//打开供应商弹出框
// opensupplier(){
// this.supplieropen = true;
// this.hideback();
// },
// 搜索供应商
// searchsupplier(e){
// console.log(e);
// },
//选择生产地
placeoforiginclick(item){
console.log('placeoforiginclick',item);
this.params.placeOfProduction = item.detailAddress;
this.params.placeOfProductionId = item.id;
this.placeoforiginopen = false;
this.showback();
},
//打开生产地弹出框
openplaceoforigin(){
this.placeoforiginopen = true;
this.hideback();
},
//选择品牌
brandclick(brand){
// console.log('brand',brand);
this.params.brandName = brand.brandName;
this.params.brandId = brand.brandId;
this.brandopen = false;
this.showback();
},
//打开品牌弹出框
openbrand(){
this.brandopen = true;
this.hideback();
},
//选择规格
specclick(e){
// this.params.spec = name;
this.specopen = false;
this.showback();
},
//打开规格弹出框
openspec(){
this.specopen = true;
this.hideback();
},
// 规格checkbox
checkboxChange: function (e) {
var items = this.speclist,
values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
const item = items[i]
if(values.includes(item.value)){
this.$set(item,'checked',true)
}else{
this.$set(item,'checked',false)
}
}
this.params.spec = e.detail.value;
console.log(this.params.spec);
},
resetcheckbox(){
var items = this.speclist;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
const item = items[i];
this.$set(item,'checked',false)
}
this.params.spec = [];
// console.log(this.params.spec);
},
//隐藏返回按钮
hideback(){
// let backbtn = document.getElementsByClassName('uni-page-head-hd')[0];
// backbtn.style.display = 'none';
this.backtyep = 2;
console.log(this.backtyep)
},
// 显示返回按钮
showback(){
// let backbtn = document.getElementsByClassName('uni-page-head-hd')[0];
// backbtn.style.display = 'block';
this.backtyep = 1;
// console.log(this.backtyep)
},
// 导航返回按钮
onBackPress(e){
// console.log(this.backtyep)
if(this.backtyep == 2){
this.placeoforiginopen = false;
this.backtyep = 1;
return true;
};
},
// 选择位置
chooseaddr(){
let self = this;
uni.chooseLocation({
success: function (res) {
self.params.myposition = res.address;
console.log('位置名称：' + res.name);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
console.log('经度：' + res.longitude);
}
});
},
// 搜索产地
searchplace(e){
if(e.value){
let place = this.placeoforiginlist.filter(function (value) {
console.log(value.detailAddress);
return value.detailAddress.includes(e.value);
});
console.log('place',place);
this.placeoforiginlist = place;
}else{
this.placeoforiginlist = this.places;
}
},
// 搜索品牌
searchbrand(e){
console.log('品牌',e);
if(e.value){
let brand = this.brandlist.filter(function (value) {
console.log(value);
return value.brandName.includes(e.value);
});
console.log('brand',brand);
this.brandlist = brand;
}else{
this.brandlist = this.brands;
}
}
}
}
</script>
<style >
@import url("./publish.css");
</style>