微信小程序中类似后台添加商品规格的设置

类似于这样一个需求，添加一个商品规格属性的设置(增加，编辑集成一个页面)

这是以下代码所实现的商品属性规格的数组：

思路如下：

<form bindsubmit="complete" report-submit="true"><block wx:for="{{spec_arr}}" wx:key="{{index}}"><view style='margin-bottom:20rpx' wx:if="{{item!=0}}"><view class='flex align-items-center shuxing'><view class='left'><view class='flex align-items-center'><view class='leftl'>型号:</view><view style='position:relative;width:72%'><input class="shu_inp" name="version{{index}}" placeholder='商品型号' value='{{item.version}}' type="text" style='width:100%' /><view class='img' bindtap='chooseimg' id="{{index}}"><image src="{{IMG_URL}}/mod/coupon/assets/img/scenic/pic.png" style='width:100%;height:100%;'></image></view></view></view><view style='height:10rpx'></view><view class='flex align-items-center'><view class='leftl'>库存:</view><input class="shu_inp" name="istock{{index}}" placeholder='0表示不做限制' value="{{item.istock}}" type="digit" /></view><view style='height:10rpx'></view><view class='flex align-items-center'><view class='leftl'>价格:</view><input class="shu_inp" name="ismoney{{index}}" placeholder='商品价格' value='{{item.ismoney}}' type="digit" /></view></view><view class='right' bindtap='del' id="{{index}}"><image src='{{IMG_URL}}/mod/coupon/assets/img/scenic/del.png' style='width:48rpx;height:48rpx'></image></view></view><view wx:if="{{item.toggle}}" style='background:#fff;overflow:hidden;padding-right:18rpx'><!--这是一个自定义组件，在本博客小程序图片上传有介绍哦~--><!--这里设置只允许上传一张照片--><uploadpic id="logopic{{index}}" txt="上传商品图片" files="{{item.picurl}}" maxnum="1" minnum="0" title="商品" showdel="1"  ></uploadpic></view></view></block><view class='flex align-items-center add' catchtap='add'><image src="{{IMG_URL}}/mod/coupon/assets/img/add.png" style='width:48rpx;height:48rpx;margin-right:20rpx'></image>添加商品型号</view><view style='height:120rpx'></view><view class='position-fixed'><button type='primary' form-type='submit'>确定</button></view>
</form>

.shuxing{background: #fff;font-size: 32rpx;padding: 20rpx;
}
.left{width:90%;
}
.right{width: 10%;
}
.leftl{width:20%;
}
.shu_inp{width:72%;border:1rpx solid #d9d9d9;padding-left: 15rpx;font-size: 28rpx;box-sizing: border-box;height: 1.8rem;
}
.img{position:absolute;right: 1rpx;top:50%;width:36rpx;height: 40rpx;margin-top:-20rpx; padding-right: 10rpx;background: #fff;z-index: 10;
}
.position-fixed{width:100%;padding:15rpx;bottom:0;background:#fff;box-sizing:border-box;z-index: 100;
}
.add{padding: 0 20rpx;font-size: 32rpx;
}

Page({/*** 页面的初始数据*/data: {IMG_URL: constant.IMG_URL,spec_arr: [{ version: '', istock: '', ismoney: ''}]},chooseimg(e){let idx=e.currentTarget.id;this.setData({['spec_arr[' + idx + '].toggle']: true})},onLoad: function (e) {let prepage = getCurrentPages()[getCurrentPages().length - 2];let spec_arr = prepage.data.spec_arr;console.log(spec_arr)spec_arr.forEach(function(item,i){if (item.picurl) {if (item.picurl[0]) {item.toggle = true;//贵公司的图片服务器地址let isi = item.picurl[0].indexOf('http://xxxx');if (isi == -1) {item.picurl[0] = 'http://xxxx/' + item.picurl[0];}} else {item.toggle = false;}}})console.log(spec_arr)this.setData({spec_arr: spec_arr != '' ? spec_arr : this.data.spec_arr})},// 添加add() {let that=this;let spec_arr=this.data.spec_arr;let num;num = spec_arr.length;that.setData({['spec_arr[' + num +']']: {}})console.log(this.data.spec_arr)},// 删除del(e) {let that = this;let idx=e.currentTarget.id;this.setData({['spec_arr['+idx+']']: 0})console.log(this.data.spec_arr)},uppic(fun, spec_arr) {let that = this;let all_l = spec_arr.length;spec_arr.forEach(function (item, i) {if(item.toggle){//注意这里是一个图片上传的自定义组件，在本博客小程序图片上传中有介绍可以移步去看that.selectComponent("#logopic" + i).upload(function (data) {console.log(data)item.picurl = data;console.log('all_lpic', all_l)all_l = all_l - 1;if (all_l == 0) {typeof fun == "function" && fun(spec_arr);}})} else {console.log('all_l', all_l)all_l = all_l - 1;if (all_l == 0) {typeof fun == "function" && fun(spec_arr);}} })},// 提交complete(e) {let that=this;let val=e.detail.value;let spec_arr = this.data.spec_arr;let is_all = 1;let newspec_arr=[];spec_arr.forEach(function (item, i){if (item != 0){item.version = val['version' + i];item.istock = val['istock' + i];item.ismoney = val['ismoney' + i];if (is_all != 0) {if (item.version == '' || item.istock == '' || item.ismoney == '') {is_all = 0;wx.showModal({title: '提示',content: '请补全商品属性',showCancel: false,success: function (res) {}})}}newspec_arr.push(item);}})console.log(newspec_arr)if (is_all == 0) {return;}let prepage = getCurrentPages()[getCurrentPages().length - 2];if (newspec_arr.length>0){that.uppic(function (data) {console.log(data);let isdata=[];data.forEach(function(item,i){if(item!=0){isdata.push(item);}})prepage.setData({spec_arr: isdata})wx.navigateBack({delta: 1})}, spec_arr)}else{prepage.setData({spec_arr: []})wx.navigateBack({delta: 1})}}
})

微信小程序中类似后台添加商品规格的设置相关推荐

在微信小程序中动态的添加类名
在微信小程序中动态的添加类名 <view data-num="1" class="takeTaxi {{_num == 1 ? 'active' : ''}}&qu ...
微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
微信小程序中文本框添加空格
<text space="ensp">姓名:</text> 通过在text标签中引用样式space="ensp"进行空格
微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
微信在线客服 php,微信小程序中添加联系在线客服功能
这次给大家带来微信小程序中添加联系在线客服功能,微信小程序中添加联系在线客服功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自 ...
微信小程序中如何添加和删除class类名
在微信小程序开发中,不能像普通web开发一样通过JS操作DOM,因此不能通过JSDOM操作直接为一个节点添加一个类.我们可以通过微信小程序数据绑定,再加上微信小程序中支持的三元判断表达式,去更改标签类 ...
后台接收数组_微信小程序如何与后台api接口进行数据交互（微信报修小程序源码讲解七）...
完成用户授权登录逻辑后,接下来的开发工作大部分都是与后台 api 接口的交互,本节我们详细讲解一下小程序如何与 api 进行交互 . 小程序如何发送 http/https 请求到后台? 小程序请求 h ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
关于微信小程序中时间预约的简单实现
关于微信小程序中时间预约的简单实现 1. js中定义获取日期函数.日期点击事件 2. 在data中定义数组等变量 3. onLoad调用函数并保存回data 4. wxml展示 5. 页面监控函数on ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...

微信小程序中类似后台添加商品规格的设置

微信小程序中类似后台添加商品规格的设置相关推荐

最新文章

热门文章