微信小步伐完整项目实战(前端+后端)

基于微信小步伐的在线商城点单系统
   前言：闲来无事，制作一个微信小步伐商城。系统采用Java语言作为后端实现与小步伐的交互，给用来学习或者想自己开个小店的朋侪当个参考。
  
  
前言

项目功能及技术

1. 小程序主要有首页、商品详情、商品分类、商品评价、购物车、个人中心等模块。
2. 管理端主要有人员管理、权限管理、商品管理、订单管理等模块。
4. html+css+js：微信小程序界面。
5. SpringBoot框架+Java程序语言：小程序及后台管理系统API的实现。
6. Layui前端框架：web后台管理界面样式及数据渲染框架。
7. MySQL数据库：数据支持。

复制代码

效果图

小步伐

   

  

  

  

   

  

  

  

  管理端

   

  

   

  

  API

SpringBoot框架搭建

   1.创建maven project，先创建一个名为SpringBootDemo的项目，选择【New Project】
  

   然后在弹出的下图窗口中，选择左侧菜单的【New Project】
  

   在project下创建module，点击右键选择【new】—【Module…】
  

   左侧选择【Spring initializr】，通过idea中集成的Spring initializr工具举行spring boot项目的快速创建。窗口右侧：name可根据自己喜好设置，group和artifact和上面一样的规则，其他选项保持默认值即可，【next】
  

   Developer Tools模块勾选【Spring Boot DevTools】，web模块勾选【Spring Web】，此时，一个Springboot项目已经搭建完成，可开辟后续功能
  

实体映射创建Mapper

   创建一个entity实体类文件夹，并在该文件夹下创建项目用到的实体类
  

1. package com.example.demo.entity;
3. import com.baomidou.mybatisplus.annotation.IdType;
4. import com.baomidou.mybatisplus.annotation.TableField;
5. import com.baomidou.mybatisplus.annotation.TableId;
6. import lombok.Data;
8. import java.time.LocalDateTime;
9. import java.util.ArrayList;
10. import java.util.List;
12. @Data
13. public class User {
14.     @TableId(type = IdType.AUTO)
15.     private Long id;
17.     private String account;
19.     private String pwd;
21.     private String userDesc;
23.     private String userHead;
25.     private LocalDateTime createTime;
27.     private Long role;
29.     private String nickname;
31.     private String email;
33.     private String tags;
34. }

复制代码

接口封装

   由于我们使用mybatis-plus，所以简单的增编削查不用自己写，框架自带了，只需要实现或者继续他的Mapper、Service
  

   创建控制器Controller
  

整合Swagger

添加依赖
   先导入spring boot的web包

1. <!--swagger依赖-->
2. <dependency>
3.     <groupId>io.springfox</groupId>
4.     <artifactId>springfox-swagger2</artifactId>
5.     <version>2.9.2</version>
6. </dependency>
7. <dependency>
8.     <groupId>io.springfox</groupId>
9.     <artifactId>springfox-swagger-ui</artifactId>
10.     <version>2.9.2</version>
11. </dependency>

复制代码

配置Swagger
   创建一个swagger的配置类，命名为SwaggerConfig.java

1. /*
2.      *用于定义API主界面的信息，比如可以声明所有的API的总标题、描述、版本
3.      */
4.     private ApiInfo apiDemo() {
5.         return new ApiInfoBuilder()
6.                 //用来自定义API的标题
7.                 .title("SpringBoot项目SwaggerAPIAPI标题测试")
8.                 //用来描述整体的API
9.                 .description("SpringBoot项目SwaggerAPI描述测试")
10.                 //创建人信息
11.                 .contact(new Contact("测试员张三","http://localhost:8080/springboot/swagger-ui.html","xxxxxxxx@163.com"))
12.                 //用于定义服务的域名
13.                 //.termsOfServiceUrl("")
14.                 .version("1.0") //可以用来定义版本
15.                 .build();
16.     }

复制代码

接口测试
   运行Spring Boot项目，默认端口8080，通过地址栏访问url
  

接口组界说
   根据差别的业务区分差别的接口组，使用@API来划分

1. @Api(tags = "用户管理") //  tags：组名称
2. @RestController
3. public class RoleController {
4. }

复制代码

接口界说
   使用@ApiModel来标注实体类，同时在接口中界说入参为实体类作为参数。
  

• @ApiModel：用来标类
  
• 常用配置项：value：实体类简称；description：实体类阐明
  
• @ApiModelProperty：用来形貌类的字段的含义。
  

常用字段范例

字段范例所占字节存储范围最大存储值使用场景TINYINT1-128~127127存储小整数INT4-2147483648~21474836472147483647存储大整数BIGINT8-9223372036854775808~92233720368547758079223372036854775807存储极大整数DECIMAL可变长度存储精度要求高的数值CHAR固定长度最多255字节255个字符存储长度固定的字符串VARCHAR可变长度最多65535字节65535个字符存储长度不固定的字符串DATETIME8‘1000-01-01 00:00:00’~‘9999-12-31 23:59:59’‘9999-12-31 23:59:59’存储日期和时间 参考代码块

1. <!-- 自定义顶部 start -->
2. <view class="yx-custom" style="padding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);">
3.   <view class="headerBox">
4.     <view class="leftAddress">
5.       <image class="leftAddressIcon" src="{{imgUrl}}/upload/20220608/addressIcon.png" lazy-load="true"></image>
6.       <view class="leftAddressText little">橘猫餐厅</view>
7.       <image class="rightJtIcon" src="{{imgUrl}}/upload/20220608/jtBottom.png" lazy-load="true"></image>
8.     </view>
9.     <view class="appletsTitle"></view>
10.   </view>
11. </view>
12. <!-- 自定义顶部 占位标签 -->
13. <view class="yx-empty_custom" style="padding-top:{{statusBarHeight}}px;"></view>
14. <!-- banner图 -->
15. <view style="background: url({{imgUrl}}/upload/20220608/topBackImg.png);background-size: 100% 100%;width:750rpx;height:324rpx;">
16.   <view class="bannerBottom"></view>
17. </view>
18. <!-- 分类及商品 -->
19. <view class="containerBox" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
20.   <scroll-view class="menu-left" scroll-y="true" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
21.     <view wx:for="{{menuList}}" class="little {{menuIndex==index?'menu-item-check':'menu-item'}}  {{item.prevClass}} {{item.nextClass}}"
22.     bindtap="clickMenu" data-index="{{index}}">{{item.title}}</view>
23.     <view class="bottomHeightBox"></view>
24.   </scroll-view>
25.   <scroll-view class="menu-right" scroll-y="true" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
26.     <view class="menuTitleBox">
27.       <text>热门推荐</text>
28.     </view>
29.     <view class="productContainer">
30.       <view class="productItem" wx:for="{{20}}" bindtap="goDetail">
31.         <view class="productImage" style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;"></view>
32.         <view class="productName little">超级无敌好吃美味烤鸭</view>
33.         <view class="productPriceBox">
34.           <view class="salePrice">
35.             <text style="font-size:22rpx;">￥</text>
36.             <text>58.88</text>
37.             <text style="font-weight:400;">/g</text>
38.           </view>
39.           <view class="oldPrice middleLine">￥98</view>
40.         </view>
41.       </view>
42.     </view>
43.     <view class="bottomHeightBox"></view>
44.   </scroll-view>
45. </view>
46. <!-- <image class="scanIcon" src="{{imgUrl}}/Areas/dfapi/Content/images/cp.png" lazy-load="true"></image> -->
47. <image class="scanIcon" src="{{imgUrl}}{{scanUrl}}" lazy-load="true" bindtap="scanTableCode"></image>

复制代码

1. <!--pages/productDetail/index.wxml-->
2. <!-- 商品轮播图 -->
3. <view class="product-banner">
4.   <swiper class="product-banner" bindchange='onSlideChange' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
5.     interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
6.     <block wx:for="{{productBanner}}" wx:key="id">
7.       <swiper-item>
8.         <view>
9.           <image src="{{item}}" class="product-banner" alt="" lazy-load="true" />
10.         </view>
11.       </swiper-item>
12.     </block>
13.   </swiper>
14. </view>
15. <!-- 秒杀商品展示 -->
16. <view wx:if="{{productActiviType==0}}" class="activeBox"
17.   style="background: url({{imgUrl}}/upload/20220608/kill-pro-back.png);background-size: 100% 100%;">
18.   <view class="kill-leftBox">
19.     <view class="product-priceBox">
20.       <view style="height:35rpx;line-height: 35rpx;">
21.         <text class="symbol-kill">￥</text>
22.         <text class="price-kill">58.8</text>
23.         <text class="throuth-kill">￥98</text>
24.       </view>
25.       <view class="num-kill displayBox">限量200份</view>
26.     </view>
27.     <view class="justNum-kill">
28.       <text>已售198份</text><text
29.         class="just-rightText">每人限购1份</text>
30.     </view>
31.   </view>
32.   <view class="kill-rightBox">
33.     <view class="just-text">距秒杀结束仅剩</view>
34.     <view class="kill-timeBox">
35.       <view class="clockBox margin-one displayBox">{{hour}}</view>
36.       <view class="littleClock">:</view>
37.       <view class="clockBox displayBox">{{min}}</view>
38.       <view class="littleClock">:</view>
39.       <view class="clockBox displayBox">{{second}}</view>
40.     </view>
41.   </view>
42. </view>
43. <!-- 商品名称 -->
44. <view class="productName-box littleTwo">
45.   超级无敌好吃美味烤鸭
46. </view>
47. <!-- 商品描述 -->
48. <view class="productDesc-box littleTwo">
49.   色泽红艳，肉质细嫩，味道醇厚，肥而不腻
50. </view>
51. <!-- 分享奖励 -->
52. <view class="productShare-money" bindtap="shareProduct">
53.   <view class="left-Share">
54.     <text>该商品分享可得奖励￥10</text>
55.   </view>
56.   <view class="right-Share">
57.     <image src="{{imgUrl}}/upload/20220608/share.png" lazy-load="true"></image>
58.     <text>立即分享</text>
59.   </view>
60. </view>
61. <!-- 商品配置规格 -->
62. <!-- <view class="productInfoBox">
63.   <view class="heightInfo"></view>
64.   <view class="Distribution" bindtap="chouseAddress">
65.     <view class="title-info">配送</view>
66.     <view class="chouseSpe">请选择收货地址</view>
67.     <image src="{{imgUrl}}/upload/20220608/rightJt.png" lazy-load="true"></image>
68.   </view>
69. </view> -->
71. <!-- 服务 -->
72. <view class="services-box">
73.   <view class="services-left">服务</view>
74.   <view class="services-right">新鲜品质 配送到家 售后无忧</view>
75. </view>
77. <!-- 商品评价 -->
78. <view class="product-reply" >
79.   <view class="reply-title">
80.     <view class="leftReolyCount">
81.       评价(2824)
82.     </view>
83.     <view class="middleSeeMore">
84.       <view>查看全部评价</view>
85.     </view>
86.     <image class="grayRight" src="{{imgUrl}}/upload/20220608/rightJt.png" lazy-load="true"></image>
87.   </view>
88.   <view class="replyUserInfo">
90.     <image  class="replyUserHead" src="{{imgUrl}}/upload/20220608/jocker.jpg" lazy-load="true"></image>
91.     <view class="rightUserName">
92.       <view class="userName little">橘猫大侠</view>
93.       <view class="starBox">
94.         <image src="{{imgUrl}}/upload/20220608/star5.png" class="starImg">
95.         </image>
96.       </view>
97.     </view>
98.   </view>
99.   <view class="replyContet littleTwo">
100.     味道好，配送快，值得信赖！
101.   </view>
102. </view>
104. <!-- 商品详情 -->
105. <image class="proImgDetail" src="{{imgUrl}}/upload/20220608/prodetailImg.png" lazy-load="true"></image>
107. <view style="height:56rpx;"></view>
109. <view class="productDetailTable" wx:if="{{spuList.length>0}}">
111.   <view wx:if="{{!isShowDetail}}">
112.     <view class="productTableTr">
113.       <view class="leftTr">
114.         <view class="little leftTrText">{{spuList[0].name}}</view>
115.       </view>
116.       <view class="rightTr little">{{spuList[0].content}}</view>
117.     </view>
118.   </view>
120.   <view wx:if="{{isShowDetail}}" class="productTableTr" wx:for="{{spuList}}">
121.     <view class="leftTr">
122.       <view class="little leftTrText">{{item.name}}</view>
123.     </view>
124.     <view class="rightTr little">{{item.content}}</view>
125.   </view>
127. </view>
129. <view class="DetailArrow displayBox" wx:if="{{spuList.length>0}}">
130.   <image wx:if="{{!isShowDetail}}" bindtap="clickArrow" class="arrowImg"
131.     src="{{imgUrl}}/upload/20220608/nextJt.png" lazy-load="true"></image>
132.   <text wx:if="{{!isShowDetail}}" bindtap="clickArrow" style="margin-left:10rpx;">展开</text>
134.   <image wx:if="{{isShowDetail}}" bindtap="clickArrow" class="arrowImg"
135.     src="{{imgUrl}}/upload/20220608/topJt.png" lazy-load="true"></image>
136.   <text wx:if="{{isShowDetail}}" bindtap="clickArrow" style="margin-left:10rpx;">收起</text>
137. </view>
138. <view style="height:56rpx;"></view>
139. <image src="{{imgUrl}}/upload/20220608/explain.png" class="explain"></image>
140. <!-- 你可能还喜欢 -->
141. <view class="maybeLike">
142.   <image src="{{imgUrl}}/upload/20220608/2323-2.png" class="maybeLikePng"></image>
144.   <!-- 配置商品 -->
145.   <view class="indexProductList">
146.     <view class="productItemBottom" wx:for="{{4}}">
147.       <view style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;" class="productImgBottom"></view>
148.       <view class="bottom-productName little">北京烤鸭</view>
149.       <view class="iconBox little">
150.         干净又卫生
151.       </view>
152.       <view class="buyBox-bottom">
153.         <view class="leftPrice-bottom">
154.           <text class="priceFh">￥</text>
155.           <text class="bottom-price">58</text>
156.           <text class="bottom-oldPrice">￥98</text>
157.         </view>
158.         <view class="rightAdd-bottom"  data-index="{{index}}" >
159.           <image class="rightAdd-bottom" src="{{imgUrl}}/upload/20220608/addcart.png" lazy-load="true">
160.           </image>
161.         </view>
162.       </view>
163.     </view>
164.   </view>
165. </view>
166. <view style="height:162rpx;"></view>
167. <view class="footer">
168.   <view class="leftFooter">
169.     <view bindtap="GoHome">
170.       <view style="background: url({{imgUrl}}/upload/20220608/6-1.png);background-size: 100% 100%;"
171.         class="footImg"></view>
172.       <view class="footText">首页</view>
173.     </view>
174.     <view bindtap="GoShopping">
175.       <view style="background: url({{imgUrl}}/upload/20220608/6-5.png);background-size: 100% 100%;"
176.         class="footImg2"></view>
177.       <view class="footText2">购物车</view>
178.     </view>
179.   </view>
180.   <view class="rightFooter">
181.     <view class="displayShow" >
182.       <view class="addCart-btn displayBox" catchtap="btnAddCart_footer">加入购物车</view>
183.       <view class="purchase-btn displayBox" bindtap="rightNowBuy">立即购买</view>
184.     </view>
185.   </view>
186. </view>

复制代码

1. <!--pages/shoppingCart/index.wxml-->
2. <!--pages/login/index.wxml-->
3. <view class="yx-custom" style="padding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);">
4.   <view class="headerBox">
5.     <view class="leftAddress">
6.     </view>
7.     <view class="appletsTitle">购物车</view>
8.   </view>
9. </view>
10. <!-- 自定义顶部 占位标签 -->
11. <view class="yx-empty_custom" style="padding-top:{{statusBarHeight}}px;"></view>
12. <!-- 可下单的购物车商品 -->
13. <view class="go-product">
14.   <view class="product-num">
15.     <view class="left-productNum">共有5件商品</view>
16.     <view class="right-delProduct" bindtap="deleteProduct">
17.       <text>删除</text>
18.     </view>
19.   </view>
20.   <view wx:for="{{2}}" wx:for-index="idx" wx:for-item="item">
21.     <view class="discount">
22.       <view class="left-discount little">热门推荐</view>
23.       <view class="discount-jt">
24.         <image src="{{imgUrl}}/upload/20220608/cartJt.png" lazy-load="true"></image>
25.       </view>
26.     </view>
27.     <view wx:for="2" wx:for-index="indexProduct" wx:for-item="ProItem">
28.       <view class="list">
29.         <view class="product-item  height{{indexProduct}}">
30.           <movable-area>
31.             <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}" inertia="true" data-productIndex="{{indexProduct}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindchange="handleMovableChange">
32.               <view class="productItem_new ">
33.                 <view class="checkedIconBox">
34.                   <view class="cart-con-item-icon">
35.                     <icon wx:if="{{ProItem.selected}}" type="success" color="#FFBD20" bindtap="selectList_yx" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" />
36.                     <icon wx:else type="circle" bindtap="selectList_yx" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" />
37.                   </view>
38.                 </view>
39.                 <view class="rightProductInfo">
40.                   <image src="{{imgUrl}}/upload/20220608/ky.jpg" class="cart-productImg"></image>
41.                   <view class="productInfoBox">
42.                     <view class="cart-productName littleTwo">超级无敌好吃美味烤鸭</view>
43.                     <view class="cart-productSku little">500g</view>
44.                     <view class="cart-productPrice">
45.                       <text class="priceSymbol">￥</text>
46.                       <text class="cart-price">58.8</text>
47.                       <text class="cart-oldPrice">￥98</text>
48.                     </view>
49.                   </view>
50.                   <view class="cart-rightNumBox">
51.                     <view class="cart-con-item-num">
52.                       <text class="cart-con-item-num-left" catchtap="bindMinus" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}">-</text>
53.                       <input type="cart-con-item-num-mid" bindinput="bindIptCartNum" data-index='{{indexProduct}}' value="1" disabled="{{true}}" />
54.                       <text class="cart-con-item-num-right" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" catchtap="bindPlus">+</text>
55.                     </view>
56.                   </view>
57.                 </view>
58.               </view>
59.             </movable-view>
60.           </movable-area>
61.           <view class="delete-btn" data-id="{{item.id}}" bindtap="handleDeleteProduct" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}">删除</view>
62.         </view>
63.       </view>
64.     </view>
65.   </view>
66. </view>
67. <view class="cant-product">
68.   <view class="cantTitle displayBox">因配送范围，库存原因等导致失效的商品</view>
69.   <view class="productItem_new height{{index}}" wx:for="{{2}}">
70.     <view class="cantProductLeft displayBox">
71.       失效
72.     </view>
73.     <view class="rightProductInfo">
74.       <view class="cart-productImg" style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;">
75.         <image src="{{imgUrl}}/upload/20220608/yyyy.png" class="cart-productImg" lazy-load="true"></image>
76.       </view>
77.       <view class="productInfoBox">
78.         <view class="cart-productNameYY littleTwo">曾经好吃的烤鸭</view>
79.         <view class="cart-productYyy little">抱歉，该商品已售罄或下架</view>
80.         <view class="cart-productPrice">
81.           <text class="priceSymbolYY">￥</text>
82.           <text class="cart-priceYY">0</text>
83.         </view>
84.       </view>
85.       <view class="cart-rightNumBox">
86.       </view>
87.     </view>
88.   </view>
89.   <view class="clearBox">
90.     <view class="clear displayBox" bindtap="clearProduct">清空失效宝贝</view>
91.     <view class="switchAddress displayBox" bindtap="switchAdd">切换地址</view>
92.   </view>
93. </view>
94. <view class="maybeLike" wx:if="{{recommendProduct.length>0}}">
95.   <image src="{{imgUrl}}/upload/20220608/2323-2.png" class="maybeLikePng"></image>
97.   <view class="indexProductList">
98.     <view class="productItemBottom" wx:for="{{recommendProduct}}">
99.       <view style="background: url({{item.productPic}});background-size: 100% 100%;" class="productImgBottom"></view>
100.       <view class="bottom-productName little">{{item.productName}}</view>
101.       <view class="iconBox little">
102.         {{item.remark}}
103.       </view>
104.       <view class="buyBox-bottom">
105.         <view class="leftPrice-bottom">
106.           <text class="priceFh">￥</text>
107.           <text class="bottom-price">{{item.price}}</text>
108.           <text class="bottom-oldPrice">￥{{item.proSalePrice}}</text>
109.         </view>
110.         <view class="rightAdd-bottom" catchtap="btnAddCart" data-index="{{index}}" data-goodsid="{{item.productId}}">
111.           <image class="rightAdd-bottom" src="{{imgUrl}}/Areas/dfapi/Content/images/addcart.png" lazy-load="true">
112.           </image>
113.         </view>
114.       </view>
115.     </view>
116.   </view>
117. </view>
118. <view class="seeDetailPriceBox" wx:if="{{isShowDetailPrice}}" catchtap="btnHideDetail">
119.   <view class="shareb2">
120.     <view class="shareb2-con">
121.       <viwe class="detailTitle displayBox">优惠明细</viwe>
122.       <view class="orderAllPrice">
123.         <view class="leftTitle">
124.           <text>商品总额</text>
125.         </view>
126.         <view class="rightTitle">
127.           <text>￥{{totalPrice}}</text>
128.         </view>
129.       </view>
130.       <view class="orderAllPrice">
131.         <view class="leftTitle">
132.           <text>运费</text>
133.         </view>
134.         <view class="rightTitle">
135.           <text>+￥{{freight}}</text>
136.         </view>
137.       </view>
138.       <view class="orderAllPrice">
139.         <view class="leftTitle">
140.           <text>优惠券</text>
141.         </view>
142.         <view class="rightTitle">
143.           <text style="color:#FF4C0E;">-￥{{couponAmount}}</text>
144.         </view>
145.       </view>
146.       <view class="orderAllPrice">
147.         <view class="leftTitle">
148.           <text>折扣</text>
149.         </view>
150.         <view class="rightTitle">
151.           <text style="color:#FF4C0E;">-￥{{discountMoney}}</text>
152.         </view>
153.       </view>
154.       <view class="orderAllPriceFinal">
155.         <view class="leftTitle">
156.           <text>合计</text>
157.         </view>
158.         <view class="rightTitle">
159.           <text>￥{{amountPayable}}</text>
160.         </view>
161.       </view>
162.     </view>
163.   </view>
164. </view>
166. <view class="cart-foter">
167.   <view class="allChecked">
168.     <image wx:if="{{!isCheckAll}}" src="{{imgUrl}}/upload/20220608/uncheck.png" bindtap="selectAll" lazy-load="true" class="checkImg"></image>
169.     <image wx:else src="{{imgUrl}}/upload/20220608/checked.png" lazy-load="true" bindtap="selectAll" class="checkImg"></image>
170.     <view class="allCheckText">全选</view>
171.   </view>
173.   <view class="middlePrice">
175.     <view class="priceBox">
176.       <text class="hjTitle">合计:</text>
177.       <text class="symbol">￥</text>
178.       <text class="priceAll">￥198</text>
179.     </view>
181.     <view class="coupon">
182.       <text>优惠:</text>
183.       <text>￥</text>
184.       <text>{{finalCou}}</text>
185.       <text class="seeDetail">查看明细</text>
187.       <image wx:if="{{isShowDetailPrice}}" src="{{imgUrl}}/upload/20220608/orangeOn.png" lazy-load="true" class="orangeJt" bindtap="seeDetailPrice"></image>
189.       <image wx:else src="{{imgUrl}}/upload/20220608/orangeBo.png" lazy-load="true" class="orangeJt" bindtap="seeDetailPrice"></image>
190.     </view>
192.   </view>
194.   <view class="right-btnJs">
195.     <view class="addOrder displayBox" bindtap="goBuy">结算</view>
196.   </view>
199. </view>
201. <view class="bottomHeightBox"></view>

复制代码

1. <!--pages/myCenter/index.wxml-->
2. <!-- 头部背景 收益容器 -->
3. <view class="center-Top">
4.   <view class="center-TopBack">
5.     <view class="userInfo-box">
6.       <view class="leftInfo">
7.         <view class="cnter-user">
8.           <image  src="{{imgUrl}}/upload/20220608/noUser.png" class="cnter-user" lazy-load="true">
9.           </image>
10.         </view>
11.         <view class="userNameBox">
12.           <view class="uNameText">
13.             <!-- <open-data  type="userNickName"></open-data> -->
14.             <!-- <view wx:else bindtap="login">注册/登录</view> -->
15.             <view >
16.               <text>摔跤猫子</text>
17.               <!-- <button class="kefu-btn" type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo"
18.                 style="width:100%"></button> -->
19.                 <button  class="kefu-btn" style="width:100%"></button>
20.             </view>
21.           </view>
22.           <view class="shop">
23.             <text>用户</text>
24.           </view>
25.         </view>
26.       </view>
27.     </view>
28. <!-- 我的订单入口 -->
29. <view class="myOrder-menu">
30.   <view class="order-title">
31.     <view class="leftTitle">我的订单</view>
32.     <view class="rightSeeMore" bindtap="goToOrder" data-id="0">
33.       <image src="{{imgUrl}}/upload/20220608/black-jt.png" lazy-load="true"></image>
34.       <text style="float:right;padding-right:10rpx;">查看更多</text>
35.     </view>
36.   </view>
37.   <view class="orderMenu-img">
38.     <view class="ordermenu-detail" bindtap="goToOrder" data-id="1">
39.       <image src="{{imgUrl}}/upload/20220608/dfk.png" lazy-load="true"></image>
40.       <view class="num-mark" wx:if="{{toBePaid>0}}">{{toBePaid}}</view>
41.       <view class="order-text-staus">待付款</view>
42.     </view>
43.     <view class="ordermenu-detail" bindtap="goToOrder" data-id="2">
44.       <image src="{{imgUrl}}/upload/20220608/dfh.png" lazy-load="true"></image>
45.       <view class="num-mark" wx:if="{{toBeDelivered>0}}">{{toBeDelivered}}</view>
46.       <view class="order-text-staus">待发货</view>
47.     </view>
48.     <view class="ordermenu-detail" bindtap="goToOrder" data-id="3">
49.       <image src="{{imgUrl}}/upload/20220608/dsh.png" lazy-load="true"></image>
50.       <view class="num-mark" wx:if="{{toBeReceived>0}}">{{toBeReceived}}</view>
51.       <view class="order-text-staus">待收货</view>
52.     </view>
53.     <view class="ordermenu-detail" bindtap="goReplyList">
54.       <image src="{{imgUrl}}/upload/20220608/dpj.png" lazy-load="true"></image>
55.       <view class="num-mark" wx:if="{{toBeReply>0}}">{{toBeReply}}</view>
56.       <view class="order-text-staus">评价</view>
57.     </view>
58.     <view class="ordermenu-detail" bindtap="afterSale">
59.       <image src="{{imgUrl}}/upload/20220608/dtk.png" lazy-load="true"></image>
60.       <view class="num-mark" wx:if="{{cancel>0}}">{{cancel}}</view>
61.       <view class="order-text-staus">售后/退款</view>
62.     </view>
63.   </view>
64. </view>
65.   </view>
66. </view>
67. <!-- 常用工具入口 -->
68. <view class="tool-box">
69.   <view class="often-tool-title">常用工具</view>
70.   <view class="tool-menu-one" >
71.     <view class="tool-menu-detail" bindtap="GotomyEarnings">
72.       <view style="background: url({{imgUrl}}/upload/20220608/profit.png);background-size: 100% 100%;"
73.         class="toolImgBack"></view>
74.       <view class="tool-title">我的收益</view>
75.     </view>
76.     <view class="tool-menu-detail" bindtap="GotoMyTeam">
77.       <view style="background: url({{imgUrl}}/upload/20220608/myteam.png);background-size: 100% 100%;"
78.         class="toolImgBack"></view>
79.       <view class="tool-title">我的团队</view>
80.     </view>
81.     <view class="tool-menu-detail" bindtap="goCouponList">
82.       <view style="background: url({{imgUrl}}/upload/20220608/myCou.png);background-size: 100% 100%;"
83.         class="toolImgBack"></view>
84.       <view class="tool-title">我的优惠券</view>
85.     </view>
86.     <view class="tool-menu-detail" bindtap="goAddressList">
87.       <view style="background: url({{imgUrl}}/upload/20220608/myAdd.png);background-size: 100% 100%;"
88.         class="toolImgBack"></view>
89.       <view class="tool-title">收货地址</view>
90.     </view>
91.   </view>
92.   <view class="tool-menu-two">
93.     <view class="tool-menu-detail" style="position: relative;">
94.       <view style="background: url({{imgUrl}}/upload/20220608/customService.png);background-size: 100% 100%;"
95.         class="toolImgBack"></view>
96.       <view class="tool-title">联系客服</view>
97.       <button class="kefu-btn" open-type="contact" style="width:100%"></button>
98.     </view>
99.     <view class="tool-menu-detail" bindtap="setUp">
100.       <view style="background: url({{imgUrl}}/upload/20220608/set.png);background-size: 100% 100%;"
101.         class="toolImgBack"></view>
102.       <view class="tool-title">设置</view>
103.     </view>
104.   </view>
105. </view>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。