⼩程序之商品发布+编辑功能（多图⽚上传功能）
⼩程序的商品发布页⾯：功能有多图⽚上传
遇到的问题记录⼀下：
1.uploadFile成功之后返回的参数是json字符串，⼀定要⽤JSON.parse转换为object格式
2.因为商品发布和编辑都是在同⼀个页⾯，因为异步的问题，在编辑页获取商品类别经常失败，所以这⾥在获取类别成功之后再获取商品详情
3.判断两位⼩数正则：/^\d+(.\d{1,2})?$/
4.使⽤picker⼀些注意的地⽅：
<picker name="category" mode="selector" range="{{category}}" range-key="title" value="{{categoryInd}}" bindchange="category">
<input data-id='{{category[categoryInd].categoryID}}' name="category" type='text' value='{{category[categoryInd].title}}' disabled='true'></input>
</picker>
range: 指定数组
range-key：显⽰指定数组中的某个key
value: 下标
5.这⾥重点说⼀下编辑页⾯下图⽚的添加和删除问题
有以下⼏种情况存在
点击添加和删除的时候都会调⽤后台接⼝来返回当前图⽚的⽂件夹路径⽤来存⼊新的图⽚
只是纯删除图⽚，可以直接调后台将图⽚从服务器中删除并返回
详情图⽚没动只改变了轮播的情况下
轮播没变详情改变了
两个都改变了
做添加的时候考虑到的问题，将添加的放到⼀个新数组中，上传时也⽤新数组上传，推翻了以前的添加时把原有图⽚全部删除重新上传（不能添加⼀张图⽚以前的还没了吧）
做删除的时候考虑到的问题，没有办法判断删除的时候是删的原来的还是新加的，这就有了以下的两个数组⽐对，相同的放到第三个数组中并上传，
添加时分别放到两个数组A,B中，A中包含有以前的图⽚和新加的，B中只有新加的图⽚，删除只删除A中
最后上传时，将A,B⽐对，相同的放到C中，将C上传（这样上传的就只有新添加的图⽚了，如果只有页⾯只有单张图⽚做编辑的话，就不⽤这么⿇烦，添加的时候直接放到新数组中，删除也是新数组，最后上传依旧⽤新数组就⾏了。）
<!--pages/productReleased/productReleased.wxml-->
<!--商品发布-->
<form bindsubmit="formSubmit">
<!--商品名称-->
<view class='title'>
<view class='title_text'>
<text>商品名称:</text>
<input name="title" type='text' value='{{title}}' bindblur='titleBlur'></input>
</view>
</view>
<!--商品价格-->
<view class='title'>
<view class='title_text'>
<text>商品价格:</text>
<input name="price" type='number' value='{{price}}' bindblur='priceBlur'></input>
</view>
</view>
<!--商品信息-->
<view class='info-point'>
<view class='title_text'>
<text>商品信息:</text>
<textarea name="info" class='textarea' value='{{info}}' bindblur='infoBlur'></textarea>
</view>
</view>
<!--商品卖点-->
<view class='info-point'>
<view class='title_text'>
<text>商品卖点:</text>
<textarea name="point" class='textarea' value='{{point}}' bindblur='pointBlur'></textarea>
</view>
</view>
<!--商品类别-->
<view class='title'>
<view class='title_text'>
<text>商品类别:</text>
<picker name="category" mode="selector" range="{{category}}" range-key="title" value="{{categoryInd}}" bindchange="category">
<input data-id='{{category[categoryInd].categoryID}}' name="category" type='text' value='{{category[categoryInd].title}}' disabled='true'></input> </picker>
<span class='icon iconfont icon-weibiaoti34'></span>
</view>
</view>
<view class='title'>
<view class='title_text'>
<text>商品类型:</text>
<picker name="type" mode="selector" range="{{type}}" range-key="name" value="{{typeInd}}" bindchange="type">
<input id='{{type[typeInd].id}}' name="type" type='text' value='{{type[typeInd].name}}'disabled='true'></input>
</picker>
<span class='icon iconfont icon-weibiaoti34'></span>
</view>
</view>
<!--商品状态-->
<view class='title'>
<view class='title_text'>
<text>商品状态:</text>
<picker name="state" mode="selector" range="{{state}}" range-key="name" value="{{stateInd}}" bindchange="state">
<input id='{{state[stateInd].id}}' name="state" type='text' value='{{state[stateInd].name}}'disabled='true'></input>
</picker>
<span class='icon iconfont icon-weibiaoti34'></span>
</view>
</view>
<!--上传图⽚-->
<view class='upImv'>
<view class='upImv_text'>轮播图⽚上传</view>
<view class="addImv">
<!--这个是已经选好的图⽚-->
<view wx:for="{{banner}}" wx:key="key" class="upFile" bindtap="showImageBanner" data-id="{{index}}">
<image class="itemImv" src="{{item}}"></image>
<image class="closeImv" src="../../resources/images/delect.png" mode="scaleToFill" catchtap="deleteImvBanner" data-id="{{index}}"></image> </view>
<!--这个是选择图⽚-->
<view class="chooseView" bindtap="chooseBanner" wx:if="{{chooseViewShowBanner}}">
<image class="chooseImv" src="../../resources/images/add.png"></image>
</view>
</view>
<view class='upImv_text'>详情图⽚上传</view>
<view class="addImv">
<!--这个是已经选好的图⽚-->
<view wx:for="{{detail}}" wx:key="key" class="upFile" bindtap="showImageDetail" style="border-radius:
5px" data-id="{{index}}">
<image class="itemImv" src="{{item}}"></image>
<image class="closeImv" src="../../resources/images/delect.png" mode="scaleToFill" catchtap="deleteImvDetail" data-id="{{index}}"></image> </view>
<!--这个是选择图⽚-->
<view class="chooseView" bindtap="chooseDetail" wx:if="{{chooseViewShowDetail}}">
<image class="chooseImv" src="../../resources/images/add.png"></image>
</view>
</view>
</view>
<button form-type='submit' class='sureRelease'>确认发布</button>
</form>
// pages/productReleased/productReleased.js
var app = getApp();
Page({
/**
* 页⾯的初始数据
*/
data: {
title: "",
info: "",
point: "",
price: "",
type: [{
name: "实物",
id: 0
}, {
name: "虚拟",
id: 1
}],
state: [{
name: "下架",
id: 0
}, {
name: "上架",
id: 1
}],
productID: 0,
categoryInd: -1, //类别
typeInd: 0, //类型
stateInd: 1, //状态
banner: [], //轮播图⽚
bannerNew: [],
bannerAll: [],
detail: [], //详情图⽚
detailNew: [],
detailAll: [],
checkUp: true, //判断从编辑页⾯进来是否需要上传图⽚ chooseViewShowDetail: true,
chooseViewShowBanner: true,
params: {
productID: 0,
contentFile: "",
bannerFile: "",
check: false,
},
dis: false,
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function(options) {
小程序 字符串转数组this.setData({
productID: options.productID
})
},
/**
* 获取标题
*/
titleBlur(e) {
this.setData({
title: e.detail.value
})
},
/**
* 获取商品价格
*/
priceBlur(e) {
this.setData({
price: e.detail.value
})
},
/**
* 获取商品信息
*/
infoBlur(e) {
this.setData({
info: e.detail.value
})
},
/**
* 获取商品卖点
*/
pointBlur(e) {
this.setData({
point: e.detail.value
})
},
/**
* 商品价格
*/
price(e) {
this.setData({
price: e.detail.value
})
},
/**
* 商品类型
*/
type(e) {
this.setData({
typeInd: e.detail.value
})
},
/**
* 商品状态
*/
state(e) {
this.setData({
stateInd: e.detail.value
})
},
/
**
* 商品类别
*/
category(e) {
this.setData({
categoryInd: e.detail.value
})
},
/**
* 获取商品类别
*/
getCategory() {
let params = {}
var good = []
var g_type = res.data.categories[0].children //从接⼝中获取商品类别
for (var i = 1; i < g_type.length; i++) { //从下标为1开始循环，不显⽰全部 good[i - 1] = g_type[i] //将循环出来的数组，循环放⼊good中
}
this.setData({
category: good
})
if (this.data.productID != 0) { //防⽌先调⽤详情⽅法⽽不显⽰类别
if (res.state === 1) {
}
}
})
},
/**获取商品详情 */
getProductDetail() {
let params = {
userID: app.globalData.userID,
productID: this.data.productID
}
let product = res.data.productDetail[0]
if (product.state) {
this.setData({
stateInd: 1
})
} else {
this.setData({
stateInd: 0
})
}
let categoryInd = -1;
for (var i = 0; i < this.data.category.length; i++) {
if (this.data.category[i].categoryID === product.categoryID) {
categoryInd = i
break;
} else {
categoryInd: -1;
}
}
if (product.bannerImages.length >= 2) {
this.setData({
chooseViewShowBanner: false
})
} else {
this.setData({
chooseViewShowBanner: true
})
}
if (product.detailImages.length >= 3) {
this.setData({
chooseViewShowDetail: false
})
} else {
this.setData({
chooseViewShowDetail: true
})
}
this.setData({
title: product.title,
info: product.info,
point: product.point,
typeInd: product.productType,
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论