202206-17|微信小程序-分页插件及二维码生成

举报
写程序的小王叔叔 发表于 2022/06/16 09:57:48 2022/06/16
【摘要】 主页:小王叔叔的博客支持:点赞👍关注✔️收藏💖​​​​一、分页效果二、小程序代码1)app.json配置或者所需要配置的页面出添加 "window": { "backgroundTextStyle": " ", "navigationBarBackgroundColor": "# ", "navigationBarTitleText": " ", "naviga...

主页小王叔叔的博客

支持:点赞👍关注✔️收藏💖


​​​​

一、分页效果

二、小程序代码

1)app.json配置或者所需要配置的页面出添加

  "window": {
    "backgroundTextStyle": " ",
    "navigationBarBackgroundColor": "# ",
    "navigationBarTitleText": " ",
    "navigationBarTextStyle": " ",
    "navigationStyle":" ",
    "enablePullDownRefresh": true//---------------------------------
  },

2)wxml

 <!--全部-->
    <swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'  style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <swiper-item>
      <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot">
        <view class="ordif" url="../../user/user" open-type="switchTab" data-poid="{{p.orderId}}" bindtap="toDetail" wx:for="{{wxOrderList0}}" wx:key="orderId" wx:for-item="p">
          <!-- <view  class="null" wx:if="{{wxOrderList.length == 0}}" >暂无订单</view> -->
          <view class="w94">
            <view class="ordst fl-bt w92">
              <view class="ordnum">取货码:
                <label class="{{p.orderId}}">{{p.wx_order_pickup_nocode}}</label>
              </view>
              <view wx:if="{{p.orderStatus == 1}}" class="ordnum fl-end jiaoy">待支付</view>
              
              
            </view>
            <view class="fl-bt tbline">
              <view class="item">
                <view class="img" wx:for="{{p.wxOrderdetailList}}" wx:for-item="cell" wx:key="index" wx:if="{{index<3}}">
                  <image src="{{cell.wx_original}}"></image>
                </view>
                <view class="img" wx:if="{{p.wxOrderdetailList.length > 3}}">
                  <image class="more" src="../../../icon/more.png"></image>
                </view>
                <!-- <view class="fontsize">
                  <view class="pcake">{{cell.productName}}</view>
                </view> -->
                <!-- <view class="monr">
                  <view class="font-10">¥{{cell.productCost}}</view>
                  <view class="buynum fl-end">x{{cell.buyNum}}</view>
                </view> -->
              </view>
              <view class="heji font-12">
                <view class=" font-14">¥{{p.wx_orderAmount}}</view>
                <view>共{{p.wxOrderdetailList.length}}件商品</view>
              </view>
            </view>
            <view wx:if="{{p.orderStatus == 1}}" class="rebtn font-14">
              <view catchtap='toCanel' data-status="1" data-id="{{p.orderId}}">取消订单</view>
              <view catchtap='toDetail' data-id="{{p.orderId}}">查看详情</view>
              <view catchtap='wechatpay' data-status="8" data-id="{{p.orderId}}">去支付</view>
            </view>
                                                            
            <view wx:if="{{p.orderStatus == 8}}" class="rebtn font-14">
              <view catchtap='toDetail' data-id="{{p.orderId}}">查看详情</view>
            </view>
          </view>
        </view>
        <view class="fl-bt dixian">
    <view class="lines"></view>
    <view class="w-txt font-11" >没有更多订单了</view>
    <view class="lines"></view>
  </view>

      </scroll-view>
      </swiper-item>

3)wjs-主要文件

三、Springboot java代码


@SysLogAspectValue(
					describtion = "管理端 - 获取订单列表信息",
					logType = "2",
					type="GET",
					url="/WxOrder/WxSelectOrder",
					table="super_wx_order",
					params = "WxProduct",
					method = "POST"
			)
			@ResponseBody
			@ApiOperation(value = "微信小程序端 - 添加商品基本信息", notes = "/WxOrder/WxSelectOrder")
			@PostMapping(value = "/WxSelectOrder")
			public Result WxSelectOrder(@RequestBody Map<String,String> reqbody){											 				
				Result resultMemberSet = new Result();
				Map<String,Object> mapList = new HashMap<String, Object>();
				String strPage = reqbody.get("page");
				String strSize = reqbody.get("size");
				String wxAreaId = reqbody.get("wxAreaId");
				try {
					    List<WxOrder> listPages = wxOrderService.selectAllWxOrders(PagesConfig.getPage(SysConfigModel.page,Integer.parseInt(strPage)),PagesConfig.getSize(SysConfigModel.size,Integer.parseInt(strSize)),wxAreaId);
					    mapList.put("wxOrderList", listPages);
						resultMemberSet.setState(0);
						resultMemberSet.setData( mapList  );
						resultMemberSet.setMsg("获取列表成功!");
						return resultMemberSet;
				} catch (Exception e) {
					resultMemberSet.setState(1);
					resultMemberSet.setData(OperationCode.OPERATION_NO);
					resultMemberSet.setMsg(e.getMessage());
					e.printStackTrace();
					return resultMemberSet;
				}
				
			}	
@Override
    public List<WxOrder> selectAllWxOrders(Integer page, Integer size,String wxAreaId) {
        Sort sort = new Sort(Sort.Direction.DESC, "createTime");
        Pageable pageable = PageRequest.of(page, size, sort);
        Page<WxOrder> orderList = wxOrderRepository.findAll (new Specification<WxOrder>() {
            @Override
            public Predicate toPredicate(Root<WxOrder> root, CriteriaQuery<?> query, CriteriaBuilder criteriaBuilder) {
                List<Predicate> list = new ArrayList<Predicate>();
                //list.add(criteriaBuilder.equal(root.get("wx_agentAddressId").as(String.class), wxAreaId));
                 CriteriaBuilder.In<Object> in = criteriaBuilder.in(root.get("wx_agentAddressId").as(String.class));
                 List<WxAgentAddress> wxAreaAgentList = wxAgentAddressService.SelectAllWxAreaAgentAddrList(wxAreaId);
                 for(WxAgentAddress  wxAreaAgent :wxAreaAgentList) {
                         in.value(wxAreaAgent.getWx_agentAddressId());//存入值
                 }
                list.add(criteriaBuilder.and(criteriaBuilder.and(in)));//存入条件集合里
                Predicate[] p = new Predicate[list.size()];
                return criteriaBuilder.and(list.toArray(p));
            }
        }, pageable);
        List<WxOrder> list = orderList.getContent();
        for (int i = 0; i < list.size(); i++) {
            //list.get(i).setWxOrderdetailList(wxOrderDetailService.findWxOrderDetailByOrderId(list.get(i).getOrderId()));
            WxUsers wxUser  = new WxUsers();
            String wxOrderMemberId = list.get(i).getWx_memberId();
            wxUser = wxUsersService.getOneUserInfoByMemberId(wxOrderMemberId);
            if(wxUser!=null) {    
            list.get(i).setWx_memberName(wxUser.getWx_userNickname());
            String wxAgentId = list.get(i).getWx_agentId();
            wxUser = wxUsersService.getOneUserInfoByMemberId(wxAgentId);
            list.get(i).setWxAgentName(wxUser.getWx_userNickname());
            }
        }
        return list;    
    } 

四、字符串生成图片二维码

1、效果

2、工具类

二维码转换的工具类

文件链接: 【 weapp-qrcode.js新建文件夹.rar_微信二维码一串代码如果变成图片-Javascript其他资源-CSDN下载

3、代码 

.wjs

var QRCode = require('../../utils/weapp-qrcode.js');
import rpx2px from '../../utils/rpx2px.js'
const qrcodeWidth = rpx2px(400)
var qrcode;
data: {
    idx:'',  
    erwCodeImg : '',//二维码图片
    qrcodeWidth:qrcodeWidth,
    classNo : '',
    className : '',
  },
  onLoad: function (options) {
    let that = this;
    let A--- = options. A---;
    let B--- = options. B---;
    that.setData({
        A: A---,
        B: B---
    });
      let token = wx.getStorageSync('token');
      wx.request({
        url: base.path.www + "/*****/***/***/getEwmLink?classNo="+A, 
        method: "GET",
        header: { 'content-type': 'application/json;charset=UTF-8' ,  'token' : token},
        success: function (res) {                  
          if (res.data.code == 0) {//接口调用成功
            //地址转图片二维码
                qrcode = new QRCode('canvas', {
                      text: res.data.data,
                      width: that.data.qrcodeWidth,
                      height: that.data.qrcodeWidth,
                      colorDark: "#000000",
                      colorLight: "#ffffff",
                      correctLevel: QRCode.CorrectLevel.H,
                });               
          } else {  //接口调用失败
              wx.showToast({
                  title: '获取失败,请重新获取!',
                  icon:'none'
              })
          }
        }
      })

  },

.wxml

<navigation id='Navigation' show-icon='{{!showIcon}}' title="添加人员" ></navigation>
<view class=" top_m">
	<view class=" w73">		
    <view class='code2' >
        <view wx:if="{{A!=''}}" class="cl_title ft_36 ft_w5"> {{A}} </view> 
				 <view wx:else="{{A==''}}" class="cl_title ft_36 ft_w5"> AAAA </view> 
				<view class="cl_pic">
        <image wx:if="{{A==''}}" src="../../icon/oldCode.png" ></image> 					
				<canvas canvas-id='canvas' wx:else="{{A!=''}}" style="width:400rpx;height:400rpx;margin:10rpx;"></canvas>
				</view>
				<view class="cl_in ft_22">扫码加入</view>
    </view>
	</view>
	<view class="w89">
			<view class="sel_low ft_26 main_bg_col">
				<view class="sel_add out_shadow">
					<button class="inbtn main_bg_col main_col ft_26" open-type="share"  hover-class="ot">分享至微信群</button>
				</view>
			</view>
	</view>
</view>

.wcss

/* pages/selClass/selClass.wxss */

.code2{
  width: 100%;
  height:760rpx;
  border-radius: 2vw;
  border:1px solid #686b70;
  margin-top: 86rpx;
}
.cl_title{
  height: 140rpx;
  line-height: 140rpx;
  text-align: center;
  color: #eaeaea;
  background-color: #292b2e;
  border-top-left-radius: 2vw;
  border-top-right-radius: 2vw;
  border-bottom: 1px solid #686b70;
}
.cl_pic{
  width: 420rpx;
  height: 420rpx;
  border-radius: 2vw;
  border:1px solid #676a6f;
  margin:64rpx auto 0 auto;
}
.cl_pic image{
  width: 400rpx;
  height: 400rpx;
  margin:10rpx;
}
.cl_in{
  text-align: center;
  color: #828588;
  margin-top: 48rpx;
}

.sel_low{
  position: fixed;
  bottom: 80rpx;
}
.sel_add{
  height: 13.6vw;
  width: 89.6vw;
}
.sel_add button{
  height: 13vw;
  width: 89vw!important;
  line-height: 13vw;
  font-weight: 500!important;
  padding:0!important;
}



⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出

如有疑问❓可以在评论区留言💬或私信留言💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。