主页:写程序的小王叔叔的博客欢迎来访👀
支持:点赞
收藏
关注
一、分页效果
二、小程序代码
1）app.json配置或者所需要配置的页面出添加
"window": { "backgroundTextStyle": " ", "navigationBarBackgroundColor": "# ", "navigationBarTitleText": " ", "navigationBarTextStyle": " ", "navigationStyle":" ", "enablePullDownRefresh": true//--------------------------------- },
2)wxml
<!--全部--><swiperclass='swiper'bindchange='pagechange'current='{{currentIndex}}'style="height: {{clientHeight?clientHeight+'px':'auto'}}"><swiper-item><scroll-viewscroll-y="{{true}}"style="height: {{clientHeight?clientHeight+'px':'auto'}}"bindscrolltolower="scrollbot"><viewclass="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> --><viewclass="w94"><viewclass="ordst fl-bt w92"><viewclass="ordnum">取货码: <labelclass="{{p.orderId}}">{{p.wx_order_pickup_nocode}}</label></view><viewwx:if="{{p.orderStatus == 1}}"class="ordnum fl-end jiaoy">待支付</view></view><viewclass="fl-bt tbline"><viewclass="item"><viewclass="img"wx:for="{{p.wxOrderdetailList}}"wx:for-item="cell"wx:key="index"wx:if="{{index<3}}"><imagesrc="{{cell.wx_original}}"></image></view><viewclass="img"wx:if="{{p.wxOrderdetailList.length > 3}}"><imageclass="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><viewclass="heji font-12"><viewclass=" font-14">￥{{p.wx_orderAmount}}</view><view>共{{p.wxOrderdetailList.length}}件商品</view></view></view><viewwx:if="{{p.orderStatus == 1}}"class="rebtn font-14"><viewcatchtap='toCanel'data-status="1"data-id="{{p.orderId}}">取消订单</view><viewcatchtap='toDetail'data-id="{{p.orderId}}">查看详情</view><viewcatchtap='wechatpay'data-status="8"data-id="{{p.orderId}}">去支付</view></view><viewwx:if="{{p.orderStatus == 8}}"class="rebtn font-14"><viewcatchtap='toDetail'data-id="{{p.orderId}}">查看详情</view></view></view></view><viewclass="fl-bt dixian"><viewclass="lines"></view><viewclass="w-txt font-11">没有更多订单了</view><viewclass="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") publicResultWxSelectOrder(@RequestBodyMap<String,String>reqbody){ ResultresultMemberSet=newResult(); Map<String,Object>mapList=newHashMap<String, Object>(); StringstrPage=reqbody.get("page"); StringstrSize=reqbody.get("size"); StringwxAreaId=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("获取列表成功！"); returnresultMemberSet; } catch (Exceptione) { resultMemberSet.setState(1); resultMemberSet.setData(OperationCode.OPERATION_NO); resultMemberSet.setMsg(e.getMessage()); e.printStackTrace(); returnresultMemberSet; } }
publicList<WxOrder>selectAllWxOrders(Integerpage, Integersize,StringwxAreaId) { Sortsort=newSort(Sort.Direction.DESC, "createTime"); Pageablepageable=PageRequest.of(page, size, sort); Page<WxOrder>orderList=wxOrderRepository.findAll (newSpecification<WxOrder>() { publicPredicatetoPredicate(Root<WxOrder>root, CriteriaQuery<?>query, CriteriaBuildercriteriaBuilder) { List<Predicate>list=newArrayList<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(WxAgentAddresswxAreaAgent :wxAreaAgentList) { in.value(wxAreaAgent.getWx_agentAddressId());//存入值 } list.add(criteriaBuilder.and(criteriaBuilder.and(in)));//存入条件集合里Predicate[] p=newPredicate[list.size()]; returncriteriaBuilder.and(list.toArray(p)); } }, pageable); List<WxOrder>list=orderList.getContent(); for (inti=0; i<list.size(); i++) { //list.get(i).setWxOrderdetailList(wxOrderDetailService.findWxOrderDetailByOrderId(list.get(i).getOrderId()));WxUserswxUser=newWxUsers(); StringwxOrderMemberId=list.get(i).getWx_memberId(); wxUser=wxUsersService.getOneUserInfoByMemberId(wxOrderMemberId); if(wxUser!=null) { list.get(i).setWx_memberName(wxUser.getWx_userNickname()); StringwxAgentId=list.get(i).getWx_agentId(); wxUser=wxUsersService.getOneUserInfoByMemberId(wxAgentId); list.get(i).setWxAgentName(wxUser.getWx_userNickname()); } } returnlist; }
四、字符串生成图片二维码
1、效果
2、工具类
二维码转换的工具类
文件链接： 【 weapp-qrcode.js新建文件夹.rar_微信二维码一串代码如果变成图片-Javascript其他资源-CSDN下载】
3、代码
.wjs
varQRCode=require('../../utils/weapp-qrcode.js'); importrpx2pxfrom'../../utils/rpx2px.js'constqrcodeWidth=rpx2px(400) varqrcode; data: { idx:'', erwCodeImg : '',//二维码图片qrcodeWidth:qrcodeWidth, classNo : '', className : '', }, onLoad: function (options) { letthat=this; letA---=options. A---; letB---=options. B---; that.setData({ A: A---, B: B--- }); lettoken=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=newQRCode('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
<navigationid='Navigation'show-icon='{{!showIcon}}'title="添加人员"></navigation><viewclass=" top_m"><viewclass=" w73"><viewclass='code2'><viewwx:if="{{A!=''}}"class="cl_title ft_36 ft_w5"> {{A}} </view><viewwx:else="{{A==''}}"class="cl_title ft_36 ft_w5"> AAAA </view><viewclass="cl_pic"><imagewx:if="{{A==''}}"src="../../icon/oldCode.png"></image><canvascanvas-id='canvas'wx:else="{{A!=''}}"style="width:400rpx;height:400rpx;margin:10rpx;"></canvas></view><viewclass="cl_in ft_22">扫码加入</view></view></view><viewclass="w89"><viewclass="sel_low ft_26 main_bg_col"><viewclass="sel_add out_shadow"><buttonclass="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:1pxsolid#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: 1pxsolid#686b70; } .cl_pic{ width: 420rpx; height: 420rpx; border-radius: 2vw; border:1pxsolid#676a6f; margin:64rpxauto0auto; } .cl_picimage{ 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_addbutton{ height: 13vw; width: 89vw!important; line-height: 13vw; font-weight: 500!important; padding:0!important; }
⚠️注意 ~
💯本期内容就结束了，如果内容有误，麻烦大家评论区指出！
如有疑问❓可以在评论区留言💬或私信留言💬，尽我最大能力🏃♀️帮大家解决👨🏫！
如果我的文章有帮助到您，欢迎点赞+关注✔️鼓励博主🏃，您的鼓励是我分享的动力🏃🏃🏃~
