首页 > 小程序教程 > 微信小程序个人产品添加上传样式设计制作开发教程

微信小程序个人产品添加上传样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序个人产品添加上传样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container" style="background:#f0f0f2">
 
 
   <view class="classname">
        <view class="jj">
            上传产品
        </view>
        <view class="addbrand" bindtap="addbrand">
            添加品牌
        </view>
  <form bindsubmit="addpro">
         <view class="xing">我的店铺:{{shopname}}
         </view>        
        <view class="xing">产品名称:  
         <input type="text" class="in" name="name"  />
         </view>   

         <view class="xing">广告语 :
             <input  type="text" class="in" name='intro' />
         </view>
          <picker bindchange="bindcat"   range="{{catlist}}">
              <view class="picker xing">
                 选择分类>> <text class="xuan" >{{catlist[catindex]}}</text> 
              </view>
          </picker>
             
          <picker bindchange="bindbrand"   range="{{brandlist}}">
              <view class="picker xing">
                 选择品牌>> <text>{{brandlist[brandindex]}}</text> 
              </view>
          </picker>
             
          <view class="xing">单  位:
               <input  type="text" class="in" name='company' />
          </view>
          <view class="xing">原  价:
               <input  type='number' class="in" name='price' />
           </view>
           <view class="xing">优惠价 :
               <input type='number' class="in" name='price_yh'/>
           </view>
           <view class="xing">赠送积分:
               <input type='number' class="in" name='price_jf' />
           </view>
           <view class="xing">产品编号:
               <input type='number' class="in" name='pro_number'/>
           </view>
           <view class="xing">库  存:
               <input  type='number' class="in" name='num'/>
           </view>
           <view class="xi">产品介绍:
               <textarea class="i" name='content'/>
           </view>
<!--缩略图-->
<view class="t">缩略图↓</view>
<view class="ii">(限制jpg、png、jpeg,像素:230*230)</view>
<view class="page-body-info">
    <view class="kk">
      <block wx:if="{{imagemin}}">
          <image src="{{imagemin}}" class="image" mode="aspectFit" bindtap="del" data-type="min"></image>
      </block>
      <block wx:else>
        <view class="image-plus image-plus-nb" bindtap="choosemin">
          <image src="../../images/s.png" style="width:100%;height:100%"></image>
        </view>
      </block>
    </view>
</view>
<!--end-->

<!--大图-->
<view class="t">产品大图↓</view>
<view class="ii">(限制jpg、png、jpeg,像素:600*600)</view>
<view class="page-body-info">
    <view class="kk">
      <block wx:if="{{imagebig}}">
          <image src="{{imagebig}}" class="image" mode="aspectFit" bindtap="del" data-type="max"></image>
      </block>
      <block wx:else>
        <view class="image-plus image-plus-nb" bindtap="choosebig">
          <image src="../../images/s.png" style="width:100%;height:100%"></image>
        </view>
      </block>
    </view>
</view>
<!--end-->

<!--轮播-->
<view class="t">轮播图↓</view>
<view class="ii">(限制jpg、png、jpeg,手机端最多上传9张,像素:600*600)</view>
<view class="page-body-info">
<!--one-->
  <view class="kk">
      <block wx:if="{{image1}}">
              <image src="{{image1}}" class="image" mode="aspectFit"></image>
      </block>
      <block wx:else>
        <view class="image-plus image-plus-nb" bindtap="uploadImage">
            <image src="../../images/s.png" style="width:100%;height:100%"></image>
        </view>
      </block>
  </view>
</view>
<!--预览区-->
<view wx:for="{{imgarr}}">
  <image  src="{{item}}" class="imgarr"></image>
</view>
<view class="submit">
  <button type="primary" form-type="submit" class='su'>提交</button>
  </view>
</form>   
</view>

</view> 
 
二、wxss样式文件代码如下:
html{
  background: #f4f4f4
}
radio-group {
  display:inline-block;
}

.classname {
  width: 100%;
  text-align: center;
  padding-bottom: 100rpx;

}
.jj{
  font-size: 30rpx;
  padding-top: 20rpx;
  font-family: "微软雅黑", "黑体";
  margin:0 auto;
  width: 232rpx;
  border-bottom: 1px #d9002f solid;
}
.xing {
font-family:"微软雅黑", "黑体";
height:54rpx;
width:579rpx;
border-radius:10rpx;
background:#fff;
margin:0 auto;
text-align:left;
line-height:54rpx;
font-size:28rpx;
padding:10rpx;
margin-top:38rpx;
padding-left:30rpx;

}

.xi {
font-family:"微软雅黑", "黑体";
height:500rpx;
width:579rpx;
border-radius:10rpx;
background:#fff;
margin:0 auto;
text-align:left;
line-height:54rpx;
font-size:28rpx;
padding:10rpx;
margin-top:38rpx;
padding-left:30rpx;

}
.placeholder {
    color:#ccc;
font-size: 26rpx;
}


.in {
  float: right;
  width: 75%;
  padding-top: 0rpx;
  font-size: 28rpx;
  color: #000;
}
.i{
  float: right;
  width:72%;
  height: 100%;
  padding-top: 12rpx;
  font-size: 28rpx;
  color: #000;
}
textarea{
  height: 100px;
}
.addbrand{
   font-family:"微软雅黑", "黑体";
width:64rpx;
height:81rpx;

  line-height:40rpx;
  background:#d9002f;
  border-radius:11rpx;
  color:white;
  font-size:26rpx;
  float:right;
  position: fixed;
  top:50%;
  right: 0;
}
.t{
  font-family: "微软雅黑", "黑体";
  width: 20%;
  height: 60rpx;
  margin-left: 57rpx;
  padding: 5rpx;
  line-height: 60rpx;
  margin-top: 40rpx;
  font-size: 28rpx;
  display: inline-block;
  border: 1px solid #ccc;
  float: left;
}
.ii{
margin-top:40rpx;
font-size:28rpx;
line-height:44rpx;
width:57%;
display:inline-block;
}
.png{
  width: 100%;
  height: 200rpx;
}
.png image{
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx 10rpx;
}
.ti {
  font-family: "微软雅黑", "黑体";
  width: 30%;
  height: 60rpx;
  background: #fff;
  border: 1px solid #f4f4f4;
  border-radius: 10rpx;
  margin: 0 auto;
  padding: 5rpx;
  line-height: 60rpx;
  margin-top: 60rpx;
  font-size: 28rpx;
}
.image {
width:200rpx;
height:200rpx;
margin:10rpx 10rpx;

}
.page-body-info { 
  width: 100%;
  height: 200rpx;
}
.image-plus {
  width: 100%;
  height: 100%;
  /*border: 2rpx solid #D9D9D9;*/
  position: relative;
}
.kk{
width:200rpx;
height:200rpx;
margin:20rpx 10rpx;
}
.su{
width:53%;
color:#000;
height:69rpx;
line-height:69rpx;
margin-top:108rpx;
font-size:30rpx;
font-family: "微软雅黑", "黑体";
clear: fix;
}
.submit{
  width: 100%;
  overflow: hidden;
}
button[type="primary"] {
color:#000;
background-color:#fff;


}
.app{
  width: 202px;
  height:45px;
  margin: 0 auto;
  display: block;
}
.container{
  background: #f0f0f2;
  padding: 0 0;
}
/*图片预览区*/
.imgarr{
  width:250rpx;
  height: 250rpx;
  float:left;
}
三、js页面代码如下:
var app=getApp();
const uploadFileUrl = require('../../config').uploadFileUrl;
var owerId;
var albumId;
var filePaths;
var filePath;
var imgarr;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    photomin:[],
    photobig:[],
    imgarr:[],
    uploadarr:[]
  },
  bindcat: function (e) {
    console.log('picker发送选择改变,携带值为', e.currentTarget.dataset.id)

    if (e.detail.value == 0) {

    }
    this.setData({
      catindex: e.detail.value
    })
  },
  bindbrand: function (e) {
    console.log('picker发送选择改变,携带值为', e.currentTarget.dataset.id)


    if (e.detail.value == 0) {

    }
    this.setData({
      brandindex: e.detail.value
    })
  },
  addbrand: function (e){
    wx.navigateTo({
      url: '../addbrand/addbrand',
    })
  },
  addpro: function (e) {
    console.log(e.detail.value);
    var fdata = e.detail.value;
    var that = this;
    if (!fdata.name || !fdata.intro || !fdata.content || !fdata.company || !fdata.price || !fdata.price_yh || !fdata.price_jf || !fdata.pro_number || !fdata.num){
        wx.showToast({
          title: '请将信息填完整再进行提交,谢谢!',
        });
        return false;
    }
    if(!that.data.catindex || !that.data.brandindex){
      wx.showToast({
        title: '请选择分类/品牌,谢谢!',
      });
      return false;
    }
    if (!that.data.photomin && !that.data.photobig) {
      wx.showToast({
        title: '请上传产品缩略图/大图!',
      });
      return false;
    }
    if (!that.data.uploadarr){
      wx.showToast({
        title: '至少上传一张产品轮播图!',
      });
      return false;
    }
    var brand=that.data.brandlist;
    var cat=that.data.catlist;
    var brandindex=that.data.brandindex;
    var catindex=that.data.catindex;

    wx.request({
      url: app.d.ceshiUrl + '/Api/Shangchang/addpro',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
        name: fdata.name,
        intro: fdata.intro,
        content: fdata.content,
        company: fdata.company,
        price: fdata.price,
        price_yh: fdata.price_yh,
        price_jf: fdata.price_jf,
        pro_number: fdata.pro_number,
        num: fdata.num,
        brand: brand[brandindex],
        category:cat[catindex],
        uploadarr:that.data.uploadarr,
        photomin: that.data.photomin,
        photobig: that.data.photobig
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        var status=res.data.status;
        if(status=="1"){
          wx.showToast({
            title: res.data.err,
            duration: 2000
          })
          setTimeout(function () {
            wx.navigateBack();
          }, 2000)
        }else{
          wx.showToast({
            title: res.data.err,
          })
        }
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常!',
          duration: 30000
        });
      },
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shangchang/get_addpro_info',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        if(res.data.status==1){
          that.setData({
            shopname: res.data.err.shopname,
            catlist: res.data.err.category,
            brandlist: res.data.err.brand
          })
        }else{
          wx.showToast({
            title: res.data.err,
          })
        } 
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常!',
          duration: 30000
        });
      },
    })
  },
  // 上传图片
  choosemin: function () {
    var self = this;
    // var uploadFileUrl=app.d.myUrl+'/Api/Submit/upload';
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths[0])
        var imageSrc = res.tempFilePaths[0]
        wx.showLoading({
          title: '上传中!',
        })
        wx.uploadFile({
          url: app.d.ceshiUrl + '/Api/Shangchang/uploadpro',
          filePath: imageSrc,
          name: 'data',
          header: {
            'content-type': 'multipart/form-data',
          },
          success: function (res) {
            console.log(res);
            self.setData({
              photomin: res.data,
            })
            wx.hideLoading()
            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })
            self.setData({
              imagemin: imageSrc,
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  // 上传图片
  choosebig: function () {
    var self = this;
    // var uploadFileUrl=app.d.myUrl+'/Api/Submit/upload';
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths[0])
        var imageSrc = res.tempFilePaths[0]
        wx.showLoading({
          title: '上传中!',
        })
        wx.uploadFile({
          url: app.d.ceshiUrl + '/Api/Shangchang/uploadpro',
          filePath: imageSrc,
          name: 'data',
          header: {
            'content-type': 'multipart/form-data',
          },
          success: function (res) {
            console.log(res);
            self.setData({
              photobig: res.data,
            })
            wx.hideLoading()
            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })
            self.setData({
              imagebig: imageSrc,
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  del:function(e){
    var dtype=e.currentTarget.dataset.type;
    var that=this;
    if(dtype=="min"){
      that.setData({
        imagemin:""
      })
    }else if(dtype=="max"){
      that.setData({
        imagemax:""
      })
    }
  },
  reloadbrand:function (e){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shangchang/get_brand',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        if (res.data.status == 1) {
          that.setData({
            brandlist: res.data.err.brand
          })
        } else {
          wx.showToast({
            title: res.data.err,
          })
        }
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常!',
          duration: 30000
        });
      },
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /* 函数描述:作为上传文件时递归上传的函数体体;
   * 参数描述: 
   * filePaths是文件路径数组
   * successUp是成功上传的个数
   * failUp是上传失败的个数
   * i是文件路径数组的指标
   * length是文件路径数组的长度
   */
  uploadDIY(filePaths, successUp, failUp, i, length) {
    console.log(filePaths)
    var that=this;
    wx.uploadFile({
      url: app.d.ceshiUrl + '/Api/Shangchang/uploadpro',
      filePath: filePaths[i],

      name: 'fileData',
      formData: {
        'pictureUid': owerId,
        'pictureAid': albumId
      },

      success: function (res) {
        console.log(filePaths[i]);
        console.log(res.data);
        var url=","+res.data;       
        that.setData({
          imgarr: filePaths,
          uploadarr: that.data.uploadarr.concat(url)
        })
        successUp++;
      },

      // success: (resp) => {

      // },
      fail: (res) => {
        console.log(res)
        failUp++;
      },
      complete: () => {
        i++;
        if (i == length) {

          console.log(length);
          // wx.showToast({
          //   title: 'successUp',

          // })
          console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败!');
        }
        else {
          //递归调用uploadDIY函数
          this.uploadDIY(filePaths, successUp, failUp, i, length);
        }
      },
    });
  },
  uploadImage: function (e) {
    var that=this;
    that.setData({
      imgarr:"",
      uploadarr:""
    })
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log(res.tempFilePaths)
        var successUp = 0; //成功个数
        var failUp = 0; //失败个数
        var length = res.tempFilePaths.length; //总共个数
        var i = 0; //第几个
        this.uploadDIY(res.tempFilePaths, successUp, failUp, i, length);
      },
    });
  }
})

模板简介:该模板名称为【微信小程序个人产品添加上传样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 24,052次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-03
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
自适应 微信模板 html5 微信文章 表格式简历模板 企业网站 单页式简历模板 响应式 微信公众平台 Bootstrap
您可能会喜欢的其他模板