微信小程序，电子商城中快速实现收货地址（包含前端和后台实现）
Posted 秋9
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序，电子商城中快速实现收货地址（包含前端和后台实现）相关的知识，希望对你有一定的参考价值。
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>
<!-- <text class='czs-angle-right-l'></text> -->
</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);
}以上是关于微信小程序，电子商城中快速实现收货地址（包含前端和后台实现）的主要内容，如果未能解决你的问题，请参考以下文章
5分钟快速了解微信小程序如何获取收货地址,耶稣也拦不住,我说的！！！
5分钟快速了解微信小程序如何获取收货地址,耶稣也拦不住,我说的！！！