微信小程序完整项目实战记录(前端+SpringBoot后端)_Java

前言

项目功能及技术

小程序主要有首页、商品详情、商品分类、商品评价、购物车、个人中心等模块。
管理端主要有人员管理、权限管理、商品管理、订单管理等模块。

html+css+js：微信小程序界面。
springboot框架+java程序语言：小程序及后台管理系统api的实现。
layui前端框架：web后台管理界面样式及数据渲染框架。
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实体类文件夹，并在该文件夹下创建项目用到的实体类

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.idtype;
import com.baomidou.mybatisplus.annotation.tablefield;
import com.baomidou.mybatisplus.annotation.tableid;
import lombok.data;

import java.time.localdatetime;
import java.util.arraylist;
import java.util.list;

@data
public class user {
    @tableid(type = idtype.auto)
    private long id;

    private string account;

    private string pwd;

    private string userdesc;

    private string userhead;

    private localdatetime createtime;

    private long role;

    private string nickname;

    private string email;

    private string tags;
}

接口封装

由于我们使用mybatis-plus，所以简单的增删改查不用自己写，框架自带了，只需要实现或者继承他的mapper、service

创建控制器controller

整合swagger

添加依赖

先导入spring boot的web包

<!--swagger依赖-->
<dependency>
    <groupid>io.springfox</groupid>
    <artifactid>springfox-swagger2</artifactid>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupid>io.springfox</groupid>
    <artifactid>springfox-swagger-ui</artifactid>
    <version>2.9.2</version>
</dependency>

配置swagger

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

/*
     *用于定义api主界面的信息，比如可以声明所有的api的总标题、描述、版本
     */
    private apiinfo apidemo() {
        return new apiinfobuilder()
                //用来自定义api的标题
                .title("springboot项目swaggerapiapi标题测试")
                //用来描述整体的api
                .description("springboot项目swaggerapi描述测试")
                //创建人信息
                .contact(new contact("测试员张三","http://localhost:8080/springboot/swagger-ui.html","xxxxxxxx@163.com"))
                //用于定义服务的域名
                //.termsofserviceurl("")
                .version("1.0") //可以用来定义版本
                .build();
    }

接口测试

运行spring boot项目，默认端口8080，通过地址栏访问url

接口组定义

根据不同的业务区分不同的接口组，使用@api来划分

@api(tags = "用户管理") //  tags：组名称
@restcontroller
public class rolecontroller {
}

接口定义

使用@apimodel来标注实体类，同时在接口中定义入参为实体类作为参数。

@apimodel：用来标类
常用配置项：value：实体类简称；description：实体类说明
@apimodelproperty：用来描述类的字段的含义。

常用字段类型

字段类型	所占字节	存储范围	最大存储值	使用场景
tinyint	1	-128~127	127	存储小整数
int	4	-2147483648~2147483647	2147483647	存储大整数
bigint	8	-9223372036854775808~9223372036854775807	9223372036854775807	存储极大整数
decimal	可变长度			存储精度要求高的数值
char	固定长度	最多255字节	255个字符	存储长度固定的字符串
varchar	可变长度	最多65535字节	65535个字符	存储长度不固定的字符串
datetime	8	‘1000-01-01 00:00:00’~‘9999-12-31 23:59:59’	‘9999-12-31 23:59:59’	存储日期和时间

参考代码块

<!-- 自定义顶部 start -->
<view class="yx-custom" style="padding-top:{{statusbarheight}}px;background-image: linear-gradient(43deg, #12c206,#00c90f);">
  <view class="headerbox">
    <view class="leftaddress">
      <image class="leftaddressicon" src="{{imgurl}}/upload/20220608/addressicon.png" lazy-load="true"></image>
      <view class="leftaddresstext little">橘猫餐厅</view>
      <image class="rightjticon" src="{{imgurl}}/upload/20220608/jtbottom.png" lazy-load="true"></image>
    </view>
    <view class="appletstitle"></view>
  </view>
</view>
<!-- 自定义顶部 占位标签 -->
<view class="yx-empty_custom" style="padding-top:{{statusbarheight}}px;"></view>
<!-- banner图 -->
<view style="background: url({{imgurl}}/upload/20220608/topbackimg.png);background-size: 100% 100%;width:750rpx;height:324rpx;">
  <view class="bannerbottom"></view>
</view>
<!-- 分类及商品 -->
<view class="containerbox" style="height:{{nowequipmentheight-((statusbarheight*2)+162)}}px;">
  <scroll-view class="menu-left" scroll-y="true" style="height:{{nowequipmentheight-((statusbarheight*2)+162)}}px;">
    <view wx:for="{{menulist}}" class="little {{menuindex==index?'menu-item-check':'menu-item'}}  {{item.prevclass}} {{item.nextclass}}" 
    bindtap="clickmenu" data-index="{{index}}">{{item.title}}</view>
    <view class="bottomheightbox"></view>
  </scroll-view>
  <scroll-view class="menu-right" scroll-y="true" style="height:{{nowequipmentheight-((statusbarheight*2)+162)}}px;">
    <view class="menutitlebox">
      <text>热门推荐</text>
    </view>
    <view class="productcontainer">
      <view class="productitem" wx:for="{{20}}" bindtap="godetail">
        <view class="productimage" style="background: url({{imgurl}}/upload/20220608/ky.jpg);background-size: 100% 100%;"></view>
        <view class="productname little">超级无敌好吃美味烤鸭</view>
        <view class="productpricebox">
          <view class="saleprice">
            <text style="font-size:22rpx;">￥</text>
            <text>58.88</text>
            <text style="font-weight:400;">/g</text>
          </view>
          <view class="oldprice middleline">￥98</view>
        </view>
      </view>
    </view>
    <view class="bottomheightbox"></view>
  </scroll-view>
</view>
<!-- <image class="scanicon" src="{{imgurl}}/areas/dfapi/content/images/cp.png" lazy-load="true"></image> -->
<image class="scanicon" src="{{imgurl}}{{scanurl}}" lazy-load="true" bindtap="scantablecode"></image>

<!--pages/productdetail/index.wxml-->
<!-- 商品轮播图 -->
<view class="product-banner">
  <swiper class="product-banner" bindchange='onslidechange' indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}"
    interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
    <block wx:for="{{productbanner}}" wx:key="id">
      <swiper-item>
        <view>
          <image src="{{item}}" class="product-banner" alt="" lazy-load="true" />
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>
<!-- 秒杀商品展示 -->
<view wx:if="{{productactivitype==0}}" class="activebox"
  style="background: url({{imgurl}}/upload/20220608/kill-pro-back.png);background-size: 100% 100%;">
  <view class="kill-leftbox">
    <view class="product-pricebox">
      <view style="height:35rpx;line-height: 35rpx;">
        <text class="symbol-kill">￥</text>
        <text class="price-kill">58.8</text>
        <text class="throuth-kill">￥98</text>
      </view>
      <view class="num-kill displaybox">限量200份</view>
    </view>
    <view class="justnum-kill">
      <text>已售198份</text><text
        class="just-righttext">每人限购1份</text>
    </view>
  </view>
  <view class="kill-rightbox">
    <view class="just-text">距秒杀结束仅剩</view>
    <view class="kill-timebox">
      <view class="clockbox margin-one displaybox">{{hour}}</view>
      <view class="littleclock">:</view>
      <view class="clockbox displaybox">{{min}}</view>
      <view class="littleclock">:</view>
      <view class="clockbox displaybox">{{second}}</view>
    </view>
  </view>
</view>
<!-- 商品名称 -->
<view class="productname-box littletwo">
  超级无敌好吃美味烤鸭
</view>
<!-- 商品描述 -->
<view class="productdesc-box littletwo">
  色泽红艳，肉质细嫩，味道醇厚，肥而不腻
</view>
<!-- 分享奖励 -->
<view class="productshare-money" bindtap="shareproduct">
  <view class="left-share">
    <text>该商品分享可得奖励￥10</text>
  </view>
  <view class="right-share">
    <image src="{{imgurl}}/upload/20220608/share.png" lazy-load="true"></image>
    <text>立即分享</text>
  </view>
</view>
<!-- 商品配置规格 -->
<!-- <view class="productinfobox">
  <view class="heightinfo"></view>
  <view class="distribution" bindtap="chouseaddress">
    <view class="title-info">配送</view>
    <view class="chousespe">请选择收货地址</view>
    <image src="{{imgurl}}/upload/20220608/rightjt.png" lazy-load="true"></image>
  </view>
</view> -->

<!-- 服务 -->
<view class="services-box">
  <view class="services-left">服务</view>
  <view class="services-right">新鲜品质 配送到家 售后无忧</view>
</view>

<!-- 商品评价 -->
<view class="product-reply" >
  <view class="reply-title">
    <view class="leftreolycount">
      评价(2824)
    </view>
    <view class="middleseemore">
      <view>查看全部评价</view>
    </view>
    <image class="grayright" src="{{imgurl}}/upload/20220608/rightjt.png" lazy-load="true"></image>
  </view>
  <view class="replyuserinfo">

    <image  class="replyuserhead" src="{{imgurl}}/upload/20220608/jocker.jpg" lazy-load="true"></image>
    <view class="rightusername">
      <view class="username little">橘猫大侠</view>
      <view class="starbox">
        <image src="{{imgurl}}/upload/20220608/star5.png" class="starimg">
        </image>
      </view>
    </view>
  </view>
  <view class="replycontet littletwo">
    味道好，配送快，值得信赖！
  </view>
</view> 

<!-- 商品详情 -->
<image class="proimgdetail" src="{{imgurl}}/upload/20220608/prodetailimg.png" lazy-load="true"></image>

<view style="height:56rpx;"></view>

<view class="productdetailtable" wx:if="{{spulist.length>0}}">

  <view wx:if="{{!isshowdetail}}">
    <view class="producttabletr">
      <view class="lefttr">
        <view class="little lefttrtext">{{spulist[0].name}}</view>
      </view>
      <view class="righttr little">{{spulist[0].content}}</view>
    </view>
  </view>

  <view wx:if="{{isshowdetail}}" class="producttabletr" wx:for="{{spulist}}">
    <view class="lefttr">
      <view class="little lefttrtext">{{item.name}}</view>
    </view>
    <view class="righttr little">{{item.content}}</view>
  </view>

</view>

<view class="detailarrow displaybox" wx:if="{{spulist.length>0}}">
  <image wx:if="{{!isshowdetail}}" bindtap="clickarrow" class="arrowimg"
    src="{{imgurl}}/upload/20220608/nextjt.png" lazy-load="true"></image>
  <text wx:if="{{!isshowdetail}}" bindtap="clickarrow" style="margin-left:10rpx;">展开</text>

  <image wx:if="{{isshowdetail}}" bindtap="clickarrow" class="arrowimg"
    src="{{imgurl}}/upload/20220608/topjt.png" lazy-load="true"></image>
  <text wx:if="{{isshowdetail}}" bindtap="clickarrow" style="margin-left:10rpx;">收起</text>
</view>
<view style="height:56rpx;"></view>
<image src="{{imgurl}}/upload/20220608/explain.png" class="explain"></image>
<!-- 你可能还喜欢 -->
<view class="maybelike">
  <image src="{{imgurl}}/upload/20220608/2323-2.png" class="maybelikepng"></image>

  <!-- 配置商品 -->
  <view class="indexproductlist">
    <view class="productitembottom" wx:for="{{4}}">
      <view style="background: url({{imgurl}}/upload/20220608/ky.jpg);background-size: 100% 100%;" class="productimgbottom"></view>
      <view class="bottom-productname little">北京烤鸭</view>
      <view class="iconbox little">
        干净又卫生
      </view>
      <view class="buybox-bottom">
        <view class="leftprice-bottom">
          <text class="pricefh">￥</text>
          <text class="bottom-price">58</text>
          <text class="bottom-oldprice">￥98</text>
        </view>
        <view class="rightadd-bottom"  data-index="{{index}}" >
          <image class="rightadd-bottom" src="{{imgurl}}/upload/20220608/addcart.png" lazy-load="true">
          </image>
        </view>
      </view>
    </view>
  </view>
</view>
<view style="height:162rpx;"></view>
<view class="footer">
  <view class="leftfooter">
    <view bindtap="gohome">
      <view style="background: url({{imgurl}}/upload/20220608/6-1.png);background-size: 100% 100%;"
        class="footimg"></view>
      <view class="foottext">首页</view>
    </view>
    <view bindtap="goshopping">
      <view style="background: url({{imgurl}}/upload/20220608/6-5.png);background-size: 100% 100%;"
        class="footimg2"></view>
      <view class="foottext2">购物车</view>
    </view>
  </view>
  <view class="rightfooter">
    <view class="displayshow" >
      <view class="addcart-btn displaybox" catchtap="btnaddcart_footer">加入购物车</view>
      <view class="purchase-btn displaybox" bindtap="rightnowbuy">立即购买</view>
    </view>
  </view>
</view>

<!--pages/shoppingcart/index.wxml-->
<!--pages/login/index.wxml-->
<view class="yx-custom" style="padding-top:{{statusbarheight}}px;background-image: linear-gradient(43deg, #12c206,#00c90f);">
  <view class="headerbox">
    <view class="leftaddress">
    </view>
    <view class="appletstitle">购物车</view>
  </view>
</view>
<!-- 自定义顶部 占位标签 -->
<view class="yx-empty_custom" style="padding-top:{{statusbarheight}}px;"></view>
<!-- 可下单的购物车商品 -->
<view class="go-product">
  <view class="product-num">
    <view class="left-productnum">共有5件商品</view>
    <view class="right-delproduct" bindtap="deleteproduct">
      <text>删除</text>
    </view>
  </view>
  <view wx:for="{{2}}" wx:for-index="idx" wx:for-item="item">
    <view class="discount">
      <view class="left-discount little">热门推荐</view>
      <view class="discount-jt">
        <image src="{{imgurl}}/upload/20220608/cartjt.png" lazy-load="true"></image>
      </view>
    </view>
    <view wx:for="2" wx:for-index="indexproduct" wx:for-item="proitem">
      <view class="list">
        <view class="product-item  height{{indexproduct}}">
          <movable-area>
            <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}" inertia="true" data-productindex="{{indexproduct}}" bindtouchstart="handletouchstart" bindtouchend="handletouchend" bindchange="handlemovablechange">
              <view class="productitem_new ">
                <view class="checkediconbox">
                  <view class="cart-con-item-icon">
                    <icon wx:if="{{proitem.selected}}" type="success" color="#ffbd20" bindtap="selectlist_yx" data-other="{{idx}}" data-index="{{indexproduct}}" data-cartid="{{proitem.cartid}}" />
                    <icon wx:else type="circle" bindtap="selectlist_yx" data-other="{{idx}}" data-index="{{indexproduct}}" data-cartid="{{proitem.cartid}}" />
                  </view>
                </view>
                <view class="rightproductinfo">
                  <image src="{{imgurl}}/upload/20220608/ky.jpg" class="cart-productimg"></image>
                  <view class="productinfobox">
                    <view class="cart-productname littletwo">超级无敌好吃美味烤鸭</view>
                    <view class="cart-productsku little">500g</view>
                    <view class="cart-productprice">
                      <text class="pricesymbol">￥</text>
                      <text class="cart-price">58.8</text>
                      <text class="cart-oldprice">￥98</text>
                    </view>
                  </view>
                  <view class="cart-rightnumbox">
                    <view class="cart-con-item-num">
                      <text class="cart-con-item-num-left" catchtap="bindminus" data-other="{{idx}}" data-index="{{indexproduct}}" data-cartid="{{proitem.cartid}}">-</text>
                      <input type="cart-con-item-num-mid" bindinput="bindiptcartnum" data-index='{{indexproduct}}' value="1" disabled="{{true}}" />
                      <text class="cart-con-item-num-right" data-other="{{idx}}" data-index="{{indexproduct}}" data-cartid="{{proitem.cartid}}" catchtap="bindplus">+</text>
                    </view>
                  </view>
                </view>
              </view>
            </movable-view>
          </movable-area>
          <view class="delete-btn" data-id="{{item.id}}" bindtap="handledeleteproduct" data-other="{{idx}}" data-index="{{indexproduct}}" data-cartid="{{proitem.cartid}}">删除</view>
        </view>
      </view>
    </view>
  </view>
</view>
<view class="cant-product">
  <view class="canttitle displaybox">因配送范围，库存原因等导致失效的商品</view>
  <view class="productitem_new height{{index}}" wx:for="{{2}}">
    <view class="cantproductleft displaybox">
      失效
    </view>
    <view class="rightproductinfo">
      <view class="cart-productimg" style="background: url({{imgurl}}/upload/20220608/ky.jpg);background-size: 100% 100%;">
        <image src="{{imgurl}}/upload/20220608/yyyy.png" class="cart-productimg" lazy-load="true"></image>
      </view>
      <view class="productinfobox">
        <view class="cart-productnameyy littletwo">曾经好吃的烤鸭</view>
        <view class="cart-productyyy little">抱歉，该商品已售罄或下架</view>
        <view class="cart-productprice">
          <text class="pricesymbolyy">￥</text>
          <text class="cart-priceyy">0</text>
        </view>
      </view>
      <view class="cart-rightnumbox">
      </view>
    </view>
  </view>
  <view class="clearbox">
    <view class="clear displaybox" bindtap="clearproduct">清空失效宝贝</view>
    <view class="switchaddress displaybox" bindtap="switchadd">切换地址</view>
  </view>
</view>
<view class="maybelike" wx:if="{{recommendproduct.length>0}}">
  <image src="{{imgurl}}/upload/20220608/2323-2.png" class="maybelikepng"></image>

  <view class="indexproductlist">
    <view class="productitembottom" wx:for="{{recommendproduct}}">
      <view style="background: url({{item.productpic}});background-size: 100% 100%;" class="productimgbottom"></view>
      <view class="bottom-productname little">{{item.productname}}</view>
      <view class="iconbox little">
        {{item.remark}}
      </view>
      <view class="buybox-bottom">
        <view class="leftprice-bottom">
          <text class="pricefh">￥</text>
          <text class="bottom-price">{{item.price}}</text>
          <text class="bottom-oldprice">￥{{item.prosaleprice}}</text>
        </view>
        <view class="rightadd-bottom" catchtap="btnaddcart" data-index="{{index}}" data-goodsid="{{item.productid}}">
          <image class="rightadd-bottom" src="{{imgurl}}/areas/dfapi/content/images/addcart.png" lazy-load="true">
          </image>
        </view>
      </view>
    </view>
  </view>
</view>
<view class="seedetailpricebox" wx:if="{{isshowdetailprice}}" catchtap="btnhidedetail">
  <view class="shareb2">
    <view class="shareb2-con">
      <viwe class="detailtitle displaybox">优惠明细</viwe>
      <view class="orderallprice">
        <view class="lefttitle">
          <text>商品总额</text>
        </view>
        <view class="righttitle">
          <text>￥{{totalprice}}</text>
        </view>
      </view>
      <view class="orderallprice">
        <view class="lefttitle">
          <text>运费</text>
        </view>
        <view class="righttitle">
          <text>+￥{{freight}}</text>
        </view>
      </view>
      <view class="orderallprice">
        <view class="lefttitle">
          <text>优惠券</text>
        </view>
        <view class="righttitle">
          <text style="color:#ff4c0e;">-￥{{couponamount}}</text>
        </view>
      </view>
      <view class="orderallprice">
        <view class="lefttitle">
          <text>折扣</text>
        </view>
        <view class="righttitle">
          <text style="color:#ff4c0e;">-￥{{discountmoney}}</text>
        </view>
      </view>
      <view class="orderallpricefinal">
        <view class="lefttitle">
          <text>合计</text>
        </view>
        <view class="righttitle">
          <text>￥{{amountpayable}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

<view class="cart-foter">
  <view class="allchecked">
    <image wx:if="{{!ischeckall}}" src="{{imgurl}}/upload/20220608/uncheck.png" bindtap="selectall" lazy-load="true" class="checkimg"></image>
    <image wx:else src="{{imgurl}}/upload/20220608/checked.png" lazy-load="true" bindtap="selectall" class="checkimg"></image>
    <view class="allchecktext">全选</view>
  </view>

  <view class="middleprice">

    <view class="pricebox">
      <text class="hjtitle">合计:</text>
      <text class="symbol">￥</text>
      <text class="priceall">￥198</text>
    </view>

    <view class="coupon">
      <text>优惠:</text>
      <text>￥</text>
      <text>{{finalcou}}</text>
      <text class="seedetail">查看明细</text>

      <image wx:if="{{isshowdetailprice}}" src="{{imgurl}}/upload/20220608/orangeon.png" lazy-load="true" class="orangejt" bindtap="seedetailprice"></image>

      <image wx:else src="{{imgurl}}/upload/20220608/orangebo.png" lazy-load="true" class="orangejt" bindtap="seedetailprice"></image>
    </view>

  </view>

  <view class="right-btnjs">
    <view class="addorder displaybox" bindtap="gobuy">结算</view>
  </view>


</view>

<view class="bottomheightbox"></view>

<!--pages/mycenter/index.wxml-->
<!-- 头部背景 收益容器 -->
<view class="center-top">
  <view class="center-topback">
    <view class="userinfo-box">
      <view class="leftinfo">
        <view class="cnter-user">
          <image  src="{{imgurl}}/upload/20220608/nouser.png" class="cnter-user" lazy-load="true">
          </image>
        </view>
        <view class="usernamebox">
          <view class="unametext">
            <!-- <open-data  type="usernickname"></open-data> -->
            <!-- <view wx:else bindtap="login">注册/登录</view> -->
            <view >
              <text>摔跤猫子</text>
              <!-- <button class="kefu-btn" type="primary" open-type="getuserinfo" bindgetuserinfo="getuserinfo"
                style="width:100%"></button> -->
                <button  class="kefu-btn" style="width:100%"></button>
            </view>
          </view>
          <view class="shop">
            <text>用户</text>
          </view>
        </view>
      </view>
    </view>
<!-- 我的订单入口 -->
<view class="myorder-menu">
  <view class="order-title">
    <view class="lefttitle">我的订单</view>
    <view class="rightseemore" bindtap="gotoorder" data-id="0">
      <image src="{{imgurl}}/upload/20220608/black-jt.png" lazy-load="true"></image>
      <text style="float:right;padding-right:10rpx;">查看更多</text>
    </view>
  </view>
  <view class="ordermenu-img">
    <view class="ordermenu-detail" bindtap="gotoorder" data-id="1">
      <image src="{{imgurl}}/upload/20220608/dfk.png" lazy-load="true"></image>
      <view class="num-mark" wx:if="{{tobepaid>0}}">{{tobepaid}}</view>
      <view class="order-text-staus">待付款</view>
    </view>
    <view class="ordermenu-detail" bindtap="gotoorder" data-id="2">
      <image src="{{imgurl}}/upload/20220608/dfh.png" lazy-load="true"></image>
      <view class="num-mark" wx:if="{{tobedelivered>0}}">{{tobedelivered}}</view>
      <view class="order-text-staus">待发货</view>
    </view>
    <view class="ordermenu-detail" bindtap="gotoorder" data-id="3">
      <image src="{{imgurl}}/upload/20220608/dsh.png" lazy-load="true"></image>
      <view class="num-mark" wx:if="{{tobereceived>0}}">{{tobereceived}}</view>
      <view class="order-text-staus">待收货</view>
    </view>
    <view class="ordermenu-detail" bindtap="goreplylist">
      <image src="{{imgurl}}/upload/20220608/dpj.png" lazy-load="true"></image>
      <view class="num-mark" wx:if="{{tobereply>0}}">{{tobereply}}</view>
      <view class="order-text-staus">评价</view>
    </view>
    <view class="ordermenu-detail" bindtap="aftersale">
      <image src="{{imgurl}}/upload/20220608/dtk.png" lazy-load="true"></image>
      <view class="num-mark" wx:if="{{cancel>0}}">{{cancel}}</view>
      <view class="order-text-staus">售后/退款</view>
    </view>
  </view>
</view>
  </view>
</view>
<!-- 常用工具入口 -->
<view class="tool-box">
  <view class="often-tool-title">常用工具</view>
  <view class="tool-menu-one" >
    <view class="tool-menu-detail" bindtap="gotomyearnings">
      <view style="background: url({{imgurl}}/upload/20220608/profit.png);background-size: 100% 100%;"
        class="toolimgback"></view>
      <view class="tool-title">我的收益</view>
    </view>
    <view class="tool-menu-detail" bindtap="gotomyteam">
      <view style="background: url({{imgurl}}/upload/20220608/myteam.png);background-size: 100% 100%;"
        class="toolimgback"></view>
      <view class="tool-title">我的团队</view>
    </view>
    <view class="tool-menu-detail" bindtap="gocouponlist">
      <view style="background: url({{imgurl}}/upload/20220608/mycou.png);background-size: 100% 100%;"
        class="toolimgback"></view>
      <view class="tool-title">我的优惠券</view>
    </view>
    <view class="tool-menu-detail" bindtap="goaddresslist">
      <view style="background: url({{imgurl}}/upload/20220608/myadd.png);background-size: 100% 100%;"
        class="toolimgback"></view>
      <view class="tool-title">收货地址</view>
    </view>
  </view>
  <view class="tool-menu-two">
    <view class="tool-menu-detail" style="position: relative;">
      <view style="background: url({{imgurl}}/upload/20220608/customservice.png);background-size: 100% 100%;"
        class="toolimgback"></view>
      <view class="tool-title">联系客服</view>
      <button class="kefu-btn" open-type="contact" style="width:100%"></button>
    </view>
    <view class="tool-menu-detail" bindtap="setup">
      <view style="background: url({{imgurl}}/upload/20220608/set.png);background-size: 100% 100%;"
        class="toolimgback"></view>
      <view class="tool-title">设置</view>
    </view>
  </view>
</view>