微信小程序海鸥淘商品扫码首页设计制作开发教程 立即下载
首页 > 小程序教程 > 微信小程序海鸥淘商品扫码首页设计制作开发教程

微信小程序海鸥淘商品扫码首页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序海鸥淘商品扫码首页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--index.wxml-->
<view class="container">

<!--mask-->  
<view class="toast_mask" animation="{{count}}" wx:if="{{isShowToast}}"></view>  
<!--以下为toast显示的内容-->  
<view class="toast_content_box" wx:if="{{isShowToast}}">  
  <view class="toast_content">  
    <view class="toast_content_text">  
      {{toastText}}  
    </view>  
  </view>  
</view>  
<image  class="indexbanner"  src="../../image/index.png"></image>
<image  wx:if="{{saoyisao}}"  class="huojia" bindtap="scanCode2" src="../../image/huojia.png"></image>
<image wx:else class="indexsao" bindtap="scanCode2" src="../../image/indexsao.png"></image>
<view class="Iname" wx:if="{{saoyisao}}">
{{name}}
</view>
<view wx:else  class="I">
   <image  class="" src="../../image/I.png"></image>
   先扫描货架二维码,才可以扫描商品条形码
</view>

<image wx:if="{{saoyisao}}"  class="indexsao" bindtap="scanCode3" src="../../image/saoyisao.png"></image>
  <image wx:else  class="indexsao" src="../../image/huisaoyisao.png"></image>
  <view class="I btn-area">
   <image  class=""  src="../../image/I.png"></image>
   扫描商品条形码，即可把商品添加到购物车
  </view>
</view>
 
二、wxss样式文件代码如下：
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.indexbanner{
float: left;
   width: 100vw;
   height: 48.66666vw;

}
.indexsao{
 margin-top:50px;
 width: 290.5px;
 height: 44.5px;
}
.I{ font-size: 36rpx;margin-top:20px; color: #9A9A9A; line-height: }
.I image{
  margin-top:10px;
  width: 15.5px;
  height: 15.5px;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

/*mask*/  
.toast_mask {  
  opacity: 0;  
  width: 100%;  
  height: 100%;  
  overflow: hidden;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 888;  
}  
/*toast*/  
.toast_content_box {  
  display: flex;  
  width: 100%;  
  height: 100%;  
  justify-content: center;  
  align-items: center;  
  position: fixed;  
  z-index: 999;  
}  
.toast_content {  
  width: 50%;  
  padding: 20rpx;  
  background: rgba(0, 0, 0, 0.5);  
  border-radius: 20rpx;  
}  
.toast_content_text {  
  height: 100%;  
  width: 100%;  
  color: #fff;  
  font-size: 28rpx;  
  text-align: center;  
}  
.sys{
  justify-content: space-around;
}
.Iname{
  margin-top: -100px;
  margin-bottom: 64px;
  font-size: 48rpx; 
  color: #fff; 
}
.huojia{
width: 290.5px;
 height: 125px;
 margin-top:20px;
}
三、js页面代码如下：
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: getApp().data.openId,
    toastText: '',
    userInfo: {},
    saoyisao: false,//控制显示
    name: '',//网点名字
    company: '',     //网点企业
    wd:'',
    hasUserInfo: false,
    isShowToast: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

  onShow() {
    // 登录
    wx.login({
      success: res => {
        var that = this
        var appid = 'wx6d0679b11da9a628'; //填写微信小程序appid  
        var secret = '9fe4d75c618996538852cd0500c6ebe9'; //填写微信小程序secret  
        //调用request请求api转换登录凭证  
        wx.request({
          url: "https://erp.mod-softs.com/wxapi.php",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          method: "POST",
          data: { fun: "Openid", code: res.code },
          complete: function (res) {
            getApp().data.openId = res.data
          }
        })
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    var that = this
    if (that.data.wd!=''){
      //保存网点编码，全局变量

      wx.request({
        url: "https://erp.mod-softs.com/wxapi.php",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: "POST",
        data: { fun: "findCustomerByNo", customerNo: that.data.wd },
        complete: function (res) {
          if (res == null || res.data == null) {
            console.error('网络请求失败');
            that.setData({
              count: 1500,
              toastText: '网络请求失败',
              isShowToast: true
            });
            that.showToast();
            return;
          }
          if (res.data.success == 0) {
            return;
          }
          if (getApp().data.customerNo != res.data.customerNo) {
            getApp().data.carts = []
            getApp().data.hasList = false
          }
          getApp().data.customerNo = res.data.customerNo,
            getApp().data.cartsao = true;
          that.setData({
            name: res.data.name,
            company: res.data.company,
            saoyisao: true
          });
        }
      })
    }
    
    
  },
  showToast: function () {  
    var _this = this;  
    // toast时间  
    _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;  
    // 显示toast  
    _this.setData({  
      isShowToast: true,  
    });  
    // 定时器关闭  
    setTimeout(function () {  
      _this.setData({  
        isShowToast: false  
      });  
    }, _this.data.count);  
  },
  scanCode2: function () {
    var that = this
    wx.showModal({
      title: '',
      content: '请扫描货架上方二维码',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          wx.scanCode({
            success: function (res) {

              //保存网点编码，全局变量

              wx.request({
                url:"https://erp.mod-softs.com/wxapi.php",
                header: {
                  "Content-Type": "application/x-www-form-urlencoded"
                },
                method: "POST", 
                data: { fun: "findCustomerByNo", customerNo: res.result },
                complete: function (res) {
                
                  if (res == null || res.data == null) {
                    console.error('网络请求失败');
                    that.setData({
                      count: 1500,
                      toastText: '网络请求失败',
                      isShowToast: true
                    });
                    that.showToast(); 
                    return;
                  }
                  if (res.data.success==0){
                    that.setData({
                      count: 1500, 
                      toastText: '没有找到该网点',
                      isShowToast: true
                    });
                    that.showToast(); 
                    return;
                  }
                  if (getApp().data.customerNo != res.data.customerNo){
                    getApp().data.carts = []
                    getApp().data.hasList=false
                  }
                  getApp().data.customerNo = res.data.customerNo,
                  getApp().data.cartsao = true;
                  that.setData({
                    name: res.data.name,
                    company: res.data.company,
                    saoyisao: true
                  });
                }
              })  
            },
            fail: function (res) {
            }
          })
        }
      }
    })
  },
  scanCode3: function () {
    var that = this
    wx.scanCode({
      success: function (res) {


        wx.request({
          url: "https://erp.mod-softs.com/wxapi.php",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          method: "POST",
          data: { fun: "findGoodsByNo", customerNo: getApp().data.customerNo, goodsNo: res.result },
          complete: function (res) {

            if (res == null || res.data == null) {
              console.error('网络请求失败');
              that.setData({
                count: 1500,
                toastText: '网络请求失败',
                isShowToast: true
              });
              that.showToast();
              return;
            }
            if (res.data.success == 0) {
              that.setData({
                count: 1500,
                toastText: '没有找到该商品',
                isShowToast: true
              });
              that.showToast();
              return;
            }
            getApp().data.goodsNo = res.data.goodsNo
            
            for (var i = 0; i < getApp().data.carts.length; i++) {
              if (getApp().data.carts[i].id == res.data.goodsNo){
                getApp().data.carts[i].num = getApp().data.carts[i].num+1;
                wx.showToast({
                  title: '已添加购物车',
                  icon: 'success',
                  duration: 2000
                })
                return;
              }
            }

            //保存商品编码，全局变量
            var newarray = [
              {
                id: res.data.goodsNo, title: res.data.name, image: res.data.img, num: 1, price: res.data.price, selected: true, customerNo: res.data.customerNo, goodsNo: res.data.goodsNo
              }
            ]
            getApp().data.carts = getApp().data.carts.concat(newarray);
            getApp().data.hasList = true
            wx.showToast({
              title: '已添加购物车',
              icon: 'success',
              duration: 2000
            })



          }
        })

        
      },
      fail: function (res) {
      }
    })


  },
    scanCode: function () {
    var that = this
    wx.showModal({
      title: '',
      content: '请扫描货架上方二维码',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          wx.scanCode({
            success: function (res) {
              that.addCart();
              wx.showToast({
                title: '已添加购物车',
                icon: 'success',
                duration: 2000
              })
            },
            fail: function (res) {
            }
          })
        }
      }
    })


  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  onLoad: function (options) {
    var that = this
    var wd = options['wd'];
    that.setData({
      wd: wd
    })

  }, 
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

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

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 18,753次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-17
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 微信文章 自适应 微信模板 微信图片 企业网站 单页式简历模板 html5 响应式 微信素材
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 632
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 709
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,950
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,307
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,748
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,532
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备42011302000988号 懒人模板-Copyright © 2023 版权所有