微信小程序，电子商城中快速实现收货地址（包含前端和后台实现）

约定不等于承诺〃 2022-10-12 12:53 344阅读 0赞

# 1.需求 #

*  小程序个人中心新增“收货地址”模块
 *  小程序下单时，可以选择已新增的收货地址，或者新增收货地址
 *  后端可以对收货地址进行管理

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pscV9kaWxpZ2VuY2U_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pscV9kaWxpZ2VuY2U_size_16_color_FFFFFF_t_70 1][]

# 2.数据库设计 #

CREATE TABLE `sys_user_address` (
      `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键，自增',
      `user_id` int(11) unsigned DEFAULT NULL COMMENT '操作员ID',
      `receive_title` varchar(50) CHARACTER SET utf8 DEFAULT NULL COMMENT '标题',
      `receive_name` varchar(50) CHARACTER SET utf8 DEFAULT NULL COMMENT '收货人姓名',
      `receive_mobile` varchar(255) CHARACTER SET utf8 DEFAULT NULL COMMENT '收货人手机',
      `receive_telephone` varchar(255) CHARACTER SET utf8 DEFAULT NULL COMMENT '收货人固定电话',
      `receive_provin_city_area` varchar(255) CHARACTER SET utf8 DEFAULT NULL COMMENT '所在地区',
      `receive_address` varchar(255) CHARACTER SET utf8 DEFAULT NULL COMMENT '地址',
      `door_number` varchar(255) CHARACTER SET utf8 DEFAULT NULL COMMENT '门牌号',
      `is_default` int(1) DEFAULT '1' COMMENT '1不是默认2默认',
      `gmt_create` datetime DEFAULT NULL COMMENT '创建时间',
      `gmt_modified` datetime DEFAULT NULL COMMENT '更新时间',
      PRIMARY KEY (`id`)
    ) ENGINE=INNODB DEFAULT CHARSET=utf8mb4;

# 3.微信小程序实现 #

直接上代码

@import "../../../plugn/caomei/style.wxss";
    page{padding-bottom: 40px;}
    .bottom{margin-bottom: 10px;}
    .default{color: #fc6737;}
    
    /* 列表 */
    .list-left > view{margin-left: 0px;}
    .list-left > view .add-detail{color: #333;margin-bottom: 6px;}
    .list-left > view .tel{margin-left: 10px;}
    
    /* 添加地址 */
    .add-address{justify-content: center;color: #07c160;}
    .list-box {background: none;border-radius: 6px;overflow: hidden;}
    .list-wrap{background: #fff;margin-bottom: 10px;}
    /* .list-wrap:nth-of-type(1){margin-top: 10px;} */
    .add-btn{padding-top: 10px;font-size:12px;line-height: 12px;border-top: #f8f8f8 1px solid;text-align: right;}
    .delete{margin-left: 20px;}
    
    /* radio重置 */
    .check{float:left;display:flex;}
    .check .icon{margin-right: 8px;}
    .check icon{margin-top: -2px;margin-bottom: -11px;}
    .check > text{line-height: 16px;color: #999;}
    .check > text.color{color: #fc6737;}
    .modify,.delete{margin-top:2px;display:inline-block;}
    .modify,.delete{margin-top:2px;display:inline-block;}
    .czs-write-l,czs-trash-l{font-size:14px;margin-right: 2px;}
    .coupon-none-btn{ background-color: #07c160;color: #ffffff}
    .com-btn{ background-color: #07c160;}

#  #

前端布局

<view class='coupon-none' wx:if="{
       {address.length ==0}}">
      <text>您还没有添加地址</text>
      <view class='coupon-none-btn' bindtap='addAddress'>添加地址</view>
    </view>
    
    <view class='address-list c-side'>
      <view class='list-box'>
        <view class='list-wrap' wx:for="{
       {address}}" wx:key="{
       {index}}">
          <view class='list-left' data-index="{
       {index}}" catchtap='select'>
            <view>
              <view class='add-detail' data-id="{
       {index}}">
                <text class='default' wx:if="{
       {isOrder && item.isdefault == '2'}}">[默认地址]</text>{
       {item.receiveAddress}} {
       {item.doorNumber}}</view>
              <view class='{
       {!isOrder?"bottom":""}}' bindtap='changeAddress' data-id="{
       {index}}">
                <text class='name'>{
       {item.receiveName}}</text>
                <text class='tel'>{
       {item.receiveMobile}}</text>
              </view>
              <view class='add-btn' wx:if="{
       {!isOrder}}">
                <view class='check' bindtap="setDefault" data-id="{
       {item.addressId}}" data-isdefault="{
       {item.isDefault}}" data-index="{
       {index}}">
                  <view class='icon'>
                    <icon type="success" size="20" color='{
       {item.isDefault == "2" ? "#fc6737":"#cccccc"}}' />
                  </view>
                  <text class='{
       {item.isdefault == "2"&& "color"}}'>{
       {item.isDefault == '2' ? '默认地址':'设为默认地址'}}</text>
                </view>
    
                <text class='modify' catchtap='modify' data-itemid="{
       {item.addressId}}"
                 data-isdefault="{
       {item.isDefault}}"
                 data-name="{
       {item.receiveName}}"
                 data-tel="{
       {item.receiveMobile}}"
                 data-doornumber="{
       {item.doorNumber}}"
                 data-receiveaddress="{
       {item.receiveAddress}}"
                 
                 >修改</text>
                <text class='delete' catchtap='delect' data-id="{
       {index}}" data-itemid="{
       {item.addressId}}">删除</text>
              </view>
            </view>
          </view>
          
        </view>
      </view>
    </view>
    
    <view class='com-btn ' bindtap='addAddress' wx:if="{
       {address.length !=0}}">添加地址</view>

4.Java后端实现

实体类

public class UserAddress extends BaseEntity {
        /**
        * 用户ID
        */
        private Integer userId;
    
        /**
        * 标题
        */
        private String receiveTitle;
    
        /**
        * 收货人姓名
        */
        private String receiveName;
    
        /**
        * 收货人手机
        */
        private String receiveMobile;
    
        /**
        * 收货人固定电话
        */
        private String receiveTelephone;
    
        /**
        * 所在地区
        */
        private String receiveProvinCityArea;
    
        /**
        * 地址
        */
        private String receiveAddress;
    
        /**
        * 门牌号
        */
        private String doorNumber;
    
        /**
        * 1不是默认2默认
        */
        private Integer isDefault;
    
        public Integer getUserId() {
            return userId;
        }
    
        public void setUserId(Integer userId) {
            this.userId = userId;
        }
    
        public String getReceiveTitle() {
            return receiveTitle;
        }
    
        public void setReceiveTitle(String receiveTitle) {
            this.receiveTitle = receiveTitle;
        }
    
        public String getReceiveName() {
            return receiveName;
        }
    
        public void setReceiveName(String receiveName) {
            this.receiveName = receiveName;
        }
    
        public String getReceiveMobile() {
            return receiveMobile;
        }
    
        public void setReceiveMobile(String receiveMobile) {
            this.receiveMobile = receiveMobile;
        }
    
        public String getReceiveTelephone() {
            return receiveTelephone;
        }
    
        public void setReceiveTelephone(String receiveTelephone) {
            this.receiveTelephone = receiveTelephone;
        }
    
        public String getReceiveProvinCityArea() {
            return receiveProvinCityArea;
        }
    
        public void setReceiveProvinCityArea(String receiveProvinCityArea) {
            this.receiveProvinCityArea = receiveProvinCityArea;
        }
    
        public String getReceiveAddress() {
            return receiveAddress;
        }
    
        public void setReceiveAddress(String receiveAddress) {
            this.receiveAddress = receiveAddress;
        }
    
        public String getDoorNumber() {
            return doorNumber;
        }
    
        public void setDoorNumber(String doorNumber) {
            this.doorNumber = doorNumber;
        }
    
        public Integer getIsDefault() {
            return isDefault;
        }
    
        public void setIsDefault(Integer isDefault) {
            this.isDefault = isDefault;
        }
    
    }

Mybatis配置文件

>     <?xml version="1.0" encoding="UTF-8"?>
>     <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
>     <mapper namespace="com.**.user.UserAddressMapper">
>         <resultMap id="BaseResultMap" type="com.***.model.user.UserAddress">
>             
>             <id column="id" jdbcType="INTEGER" property="id"/>
>             <result column="user_id" jdbcType="INTEGER" property="userId"/>
>             <result column="receive_title" jdbcType="VARCHAR" property="receiveTitle"/>
>             <result column="receive_name" jdbcType="VARCHAR" property="receiveName"/>
>             <result column="receive_mobile" jdbcType="VARCHAR" property="receiveMobile"/>
>             <result column="receive_telephone" jdbcType="VARCHAR" property="receiveTelephone"/>
>             <result column="receive_provin_city_area" jdbcType="VARCHAR" property="receiveProvinCityArea"/>
>             <result column="receive_address" jdbcType="VARCHAR" property="receiveAddress"/>
>             <result column="door_number" jdbcType="VARCHAR" property="doorNumber"/>
>             <result column="is_default" jdbcType="INTEGER" property="isDefault"/>
>             <result column="gmt_create" jdbcType="TIMESTAMP" property="gmtCreate"/>
>             <result column="gmt_modified" jdbcType="TIMESTAMP" property="gmtModified"/>
>         </resultMap>
>         <sql id="Base_Column_List">
>             
>             id, user_id, receive_title, receive_name, receive_mobile, receive_telephone,
>             receive_provin_city_area, receive_address, door_number, is_default, gmt_create, gmt_modified
>         </sql>
>         <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
>             
>             select
>             <include refid="Base_Column_List"/>
>             from sys_user_member_address
>             where id = #{id,jdbcType=INTEGER}
>         </select>
>     
>         <select id="querylistPage" resultMap="BaseResultMap" parameterType="object">
>             select
>             <include refid="Base_Column_List"/>
>             from sys_user_member_address
>             <where>
>                 <if test="pd.memberId != null ">
>                     and user_id = #{pd.memberId}
>                 </if>
>             </where>
>         </select>
>     
>         <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
>             
>             delete from sys_user_member_address
>             where id = #{id,jdbcType=INTEGER}
>         </delete>
>         <insert id="insert" keyColumn="id" keyProperty="id" parameterType="com.***.model.user.UserAddress"
>                 useGeneratedKeys="true">
>             
>             insert into sys_user_member_address (user_id, receive_title, receive_name,
>             receive_mobile, receive_telephone, receive_provin_city_area,
>             receive_address, door_number, is_default,
>             gmt_create, gmt_modified)
>             values (#{userId,jdbcType=INTEGER}, #{receiveTitle,jdbcType=VARCHAR}, #{receiveName,jdbcType=VARCHAR},
>             #{receiveMobile,jdbcType=VARCHAR}, #{receiveTelephone,jdbcType=VARCHAR},
>             #{receiveProvinCityArea,jdbcType=VARCHAR},
>             #{receiveAddress,jdbcType=VARCHAR}, #{doorNumber,jdbcType=VARCHAR}, #{isDefault,jdbcType=INTEGER},
>             #{gmtCreate,jdbcType=TIMESTAMP}, #{gmtModified,jdbcType=TIMESTAMP})
>         </insert>
>         <insert id="insertSelective" keyColumn="id" keyProperty="id" parameterType="com.***.model.user.UserAddress"
>                 useGeneratedKeys="true">
>             
>             insert into sys_user_member_address
>             <trim prefix="(" suffix=")" suffixOverrides=",">
>                 <if test="userId != null">
>                     user_id,
>                 </if>
>                 <if test="receiveTitle != null">
>                     receive_title,
>                 </if>
>                 <if test="receiveName != null">
>                     receive_name,
>                 </if>
>                 <if test="receiveMobile != null">
>                     receive_mobile,
>                 </if>
>                 <if test="receiveTelephone != null">
>                     receive_telephone,
>                 </if>
>                 <if test="receiveProvinCityArea != null">
>                     receive_provin_city_area,
>                 </if>
>                 <if test="receiveAddress != null">
>                     receive_address,
>                 </if>
>                 <if test="doorNumber != null">
>                     door_number,
>                 </if>
>                 <if test="isDefault != null">
>                     is_default,
>                 </if>
>                 <if test="gmtCreate != null">
>                     gmt_create,
>                 </if>
>                 <if test="gmtModified != null">
>                     gmt_modified,
>                 </if>
>             </trim>
>             <trim prefix="values (" suffix=")" suffixOverrides=",">
>                 <if test="userId != null">
>                     #{userId,jdbcType=INTEGER},
>                 </if>
>                 <if test="receiveTitle != null">
>                     #{receiveTitle,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveName != null">
>                     #{receiveName,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveMobile != null">
>                     #{receiveMobile,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveTelephone != null">
>                     #{receiveTelephone,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveProvinCityArea != null">
>                     #{receiveProvinCityArea,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveAddress != null">
>                     #{receiveAddress,jdbcType=VARCHAR},
>                 </if>
>                 <if test="doorNumber != null">
>                     #{doorNumber,jdbcType=VARCHAR},
>                 </if>
>                 <if test="isDefault != null">
>                     #{isDefault,jdbcType=INTEGER},
>                 </if>
>                 <if test="gmtCreate != null">
>                     #{gmtCreate,jdbcType=TIMESTAMP},
>                 </if>
>                 <if test="gmtModified != null">
>                     #{gmtModified,jdbcType=TIMESTAMP},
>                 </if>
>             </trim>
>         </insert>
>         <update id="updateByPrimaryKeySelective" parameterType="com.***.model.user.UserAddress">
>             
>             update sys_user_member_address
>             <set>
>                 <if test="userId != null">
>                     user_id = #{userId,jdbcType=INTEGER},
>                 </if>
>                 <if test="receiveTitle != null">
>                     receive_title = #{receiveTitle,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveName != null">
>                     receive_name = #{receiveName,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveMobile != null">
>                     receive_mobile = #{receiveMobile,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveTelephone != null">
>                     receive_telephone = #{receiveTelephone,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveProvinCityArea != null">
>                     receive_provin_city_area = #{receiveProvinCityArea,jdbcType=VARCHAR},
>                 </if>
>                 <if test="receiveAddress != null">
>                     receive_address = #{receiveAddress,jdbcType=VARCHAR},
>                 </if>
>                 <if test="doorNumber != null">
>                     door_number = #{doorNumber,jdbcType=VARCHAR},
>                 </if>
>                 <if test="isDefault != null">
>                     is_default = #{isDefault,jdbcType=INTEGER},
>                 </if>
>                 <if test="gmtCreate != null">
>                     gmt_create = #{gmtCreate,jdbcType=TIMESTAMP},
>                 </if>
>                 <if test="gmtModified != null">
>                     gmt_modified = #{gmtModified,jdbcType=TIMESTAMP},
>                 </if>
>             </set>
>             where id = #{id,jdbcType=INTEGER}
>         </update>
>         <update id="updateByPrimaryKey" parameterType="com.***.model.user.UserAddress">
>             
>             update sys_user_member_address
>             set user_id = #{userId,jdbcType=INTEGER},
>             receive_title = #{receiveTitle,jdbcType=VARCHAR},
>             receive_name = #{receiveName,jdbcType=VARCHAR},
>             receive_mobile = #{receiveMobile,jdbcType=VARCHAR},
>             receive_telephone = #{receiveTelephone,jdbcType=VARCHAR},
>             receive_provin_city_area = #{receiveProvinCityArea,jdbcType=VARCHAR},
>             receive_address = #{receiveAddress,jdbcType=VARCHAR},
>             door_number = #{doorNumber,jdbcType=VARCHAR},
>             is_default = #{isDefault,jdbcType=INTEGER},
>             gmt_create = #{gmtCreate,jdbcType=TIMESTAMP},
>             gmt_modified = #{gmtModified,jdbcType=TIMESTAMP}
>             where id = #{id,jdbcType=INTEGER}
>         </update>
>         <update id="updateBatch" parameterType="java.util.List">
>             
>             update sys_user_member_address
>             <trim prefix="set" suffixOverrides=",">
>                 <trim prefix="user_id = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.userId,jdbcType=INTEGER}
>                     </foreach>
>                 </trim>
>                 <trim prefix="receive_title = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.receiveTitle,jdbcType=VARCHAR}
>                     </foreach>
>                 </trim>
>                 <trim prefix="receive_name = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.receiveName,jdbcType=VARCHAR}
>                     </foreach>
>                 </trim>
>                 <trim prefix="receive_mobile = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.receiveMobile,jdbcType=VARCHAR}
>                     </foreach>
>                 </trim>
>                 <trim prefix="receive_telephone = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.receiveTelephone,jdbcType=VARCHAR}
>                     </foreach>
>                 </trim>
>                 <trim prefix="receive_provin_city_area = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.receiveProvinCityArea,jdbcType=VARCHAR}
>                     </foreach>
>                 </trim>
>                 <trim prefix="receive_address = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.receiveAddress,jdbcType=VARCHAR}
>                     </foreach>
>                 </trim>
>                 <trim prefix="door_number = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.doorNumber,jdbcType=VARCHAR}
>                     </foreach>
>                 </trim>
>                 <trim prefix="is_default = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.isDefault,jdbcType=INTEGER}
>                     </foreach>
>                 </trim>
>                 <trim prefix="gmt_create = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.gmtCreate,jdbcType=TIMESTAMP}
>                     </foreach>
>                 </trim>
>                 <trim prefix="gmt_modified = case" suffix="end,">
>                     <foreach collection="list" index="index" item="item">
>                         when id = #{item.id,jdbcType=INTEGER} then #{item.gmtModified,jdbcType=TIMESTAMP}
>                     </foreach>
>                 </trim>
>             </trim>
>             where id in
>             <foreach close=")" collection="list" item="item" open="(" separator=", ">
>                 #{item.id,jdbcType=INTEGER}
>             </foreach>
>         </update>
>         <insert id="batchInsert" keyColumn="id" keyProperty="id" parameterType="map" useGeneratedKeys="true">
>             
>             insert into sys_user_member_address
>             (user_id, receive_title, receive_name, receive_mobile, receive_telephone, receive_provin_city_area,
>             receive_address, door_number, is_default, gmt_create, gmt_modified)
>             values
>             <foreach collection="list" item="item" separator=",">
>                 (#{item.userId,jdbcType=INTEGER}, #{item.receiveTitle,jdbcType=VARCHAR},
>                 #{item.receiveName,jdbcType=VARCHAR},
>                 #{item.receiveMobile,jdbcType=VARCHAR}, #{item.receiveTelephone,jdbcType=VARCHAR},
>                 #{item.receiveProvinCityArea,jdbcType=VARCHAR}, #{item.receiveAddress,jdbcType=VARCHAR},
>                 #{item.doorNumber,jdbcType=VARCHAR}, #{item.isDefault,jdbcType=INTEGER},
>                 #{item.gmtCreate,jdbcType=TIMESTAMP},
>                 #{item.gmtModified,jdbcType=TIMESTAMP})
>             </foreach>
>         </insert>
>         <select id="selectByPojo" resultMap="BaseResultMap" parameterType="com.***.model.user.UserAddress">
>             select
>             <include refid="Base_Column_List"/>
>             from sys_user_member_address
>             <where>
>                 <if test="userId != null">
>                     and user_id = #{userId,jdbcType=INTEGER}
>                 </if>
>                 <if test="isDefault != null">
>                     and is_default = #{isDefault,jdbcType=INTEGER}
>                 </if>
>             </where>
>         </select>
>         <select id="queryAddressByUser" resultType="com.***.model.miniapi.UserAddressResponse">
>             select id as addressId, receive_name as receiveName, receive_mobile as receiveMobile, receive_telephone as receiveTelephone,
>             concat(receive_provin_city_area,receive_address,door_number) as receiveAddress,is_default as isDefault
>             from sys_user_member_address
>             where
>             user_id = #{id}
>         </select>
>         <update id="resetDefault" parameterType="integer">
>             update sys_user_member_address set is_default = 1
>             where
>             user_id = #{memberId}
>         </update>
>     </mapper>

dao文件

public interface UserAddressMapper {
        /**
         * delete by primary key
         * @param id primaryKey
         * @return deleteCount
         */
        int deleteByPrimaryKey(Integer id);
    
        /**
         * insert record to table
         * @param record the record
         * @return insert count
         */
        int insert(UserAddress record);
    
        /**
         * insert record to table selective
         * @param record the record
         * @return insert count
         */
        int insertSelective(UserAddress record);
    
        /**
         * select by primary key
         * @param id primary key
         * @return object by primary key
         */
        UserAddress selectByPrimaryKey(Integer id);
    
        /**
         * update record
         * @param record the updated record
         * @return update count
         */
        int updateByPrimaryKeySelective(UserAddress record);
    
        /**
         * update record selective
         * @param record the updated record
         * @return update count
         */
        int updateByPrimaryKey(UserAddress record);
    
        int updateBatch(List<UserAddress> list);
    
        int batchInsert(@Param("list") List<UserAddress> list);
    
        List<UserAddress> querylistPage(Page page);
    
        UserAddress selectByPojo(UserAddress address);
    
        List<UserAddressResponse> queryAddressByUser(int id);
    
        void resetDefault(int memberId);
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pscV9kaWxpZ2VuY2U_size_16_color_FFFFFF_t_70]: /images/20221005/0b58f43781f3497fb0ac82983d965ae5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pscV9kaWxpZ2VuY2U_size_16_color_FFFFFF_t_70 1]: /images/20221005/f6afb3aa06b34ea49cf7b99adbce23ae.png