我的地址页面布局
配置路由
{
path: "/path",
name: "Path",
children:[
{
path: "/",
name: "pathIndex",
component: () =>
import("../views/path/Path-Index.vue"),
},
{
path: "path-list",
name: "path-list",
component: () =>
import("../views/path/Path-List.vue"),
},
],
component: () =>
import("../views/Path.vue"),
},path.vue
<template>
<div class='path'>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
path-index.vue
<template>
<div class="path-index container">
<Header></Header>
<section>
<ul v-if="list.length">
<li v-for="(item, index) in list" :key="index" @click="goList(item)">
<div>
<span>{{ item.name }}</span>
<span>{{ item.tel }}</span>
</div>
<div class="city">
<span class="active" v-if="item.isDefault == 1">[默认]</span>
<span>{{ item.province }}</span>
<span>{{ item.city }}</span>
<span>{{ item.county }}</span>
<span>{{ item.addressDetail }}</span>
</div>
</li>
</ul>
<h1 v-else>暂无数据，请添加地址</h1>
<div class="add-path" @click="goList('add')">添加地址</div>
</section>
<Tabbar></Tabbar>
</div>
</template>
<script>
import http from "@/common/api/request.js";
import Header from "@/components/path/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
import { mapState, mapMutations } from "vuex";
import bus from "@/common/bus.js";
export default {
data() {
return {
pathStatus: false,
};
},
components: {
Header,
Tabbar,
},
created() {
//从订单页面进来的
if (this.$route.query.type == "select") {
this.pathStatus = true;
}
this.getData();
},
computed: {
...mapState({
list: (state) => state.path.list,
}),
},
methods: {
...mapMutations(["initData"]),
getData() {
http
.$axios({
url: "/api/selectAddress",
method: "post",
headers: {
token: true,
},
})
.then((res) => {
this.initData(res.data);
});
},
goList(option) {
//this.pathStatus为true代表从订单页面进入的：选择状态
if (this.pathStatus) {
bus.$emit("selectPath", JSON.stringify(option));
this.$router.back();
return;
}
this.$router.push({
name: "path-list",
params: {
key: JSON.stringify(option),
},
});
},
},
};
</script>
<style lang='less' scoped>
section {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f7f7f7;
ul {
width: 100%;
li {
padding: 0.266666rem 0.4rem;
margin: 0.16rem 0;
background-color: #ffffff;
span {
padding-right: 0.4rem;
font-size: 0.426666rem;
}
.active {
color: #b0352f;
}
.city {
span {
padding-right: 0.16rem;
}
}
}
}
.add-path {
margin-top: 0.8rem;
width: 3.2rem;
line-height: 1.066666rem;
font-size: 0.48rem;
text-align: center;
color: #ffffff;
background-color: #b0352f;
border-radius: 6px;
}
}
::v-deep .tabbar {
border-top: 2px solid #ccc;
}
</style>
页面中非要的组件
<template>
<header>
<i class="iconfont icon-fanhui" @click="goBack"></i>
<slot>
<span>我的地址</span>
</slot>
<i class="iconfont icon-kefu"></i>
</header>
</template>
<script>
export default {
methods: {
goBack() {
if (this.$route.name == "path-list") {
this.$router.replace("/path");
} else {
this.$router.push("/my");
}
},
},
};
</script>
<style lang='less' scoped>
header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 1.173333rem;
color: #fff;
background-color: #b0352f;
i {
padding: 0 0.4rem;
font-size: 0.586666rem;
}
span {
font-weight: 300;
font-size: 0.48rem;
}
}
</style>添加地址页面
path-list.vue
<template>
<div class="path-index container">
<Header>
<span v-if="pathStatus">添加地址</span>
<span v-else>编辑地址</span>
</Header>
<section>
<van-address-edit
v-if="pathStatus"
:area-list="areaList"
show-set-default
@save="onAdd"
/>
<van-address-edit
v-else
:address-info="AddressInfo"
:area-list="areaList"
show-delete
show-set-default
show-search-result
@save="onUpdate"
@delete="onDelete"
/>
</section>
<Tabbar></Tabbar>
</div>
</template>
<script>
import { Toast } from "vant";
import Header from "@/components/path/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
import http from "@/common/api/request.js";
export default {
data() {
return {
pathStatus: false,
AddressInfo: {},
areaList: {
province_list: {
110000: "北京市",
120000: "天津市",
},
city_list: {
110100: "北京市",
120100: "天津市",
},
county_list: {
110101: "东城区",
110102: "西城区",
120101: "塘沽区",
},
},
};
},
components: {
Header,
Tabbar,
},
mounted() {
let key = JSON.parse(this.$route.params.key);
//是通过添加进来的
if (key == "add") {
this.pathStatus = true;
} else {
//编辑进来的
this.AddressInfo = key;
this.AddressInfo.isDefault =
this.AddressInfo.isDefault == 1 ? true : false;
}
},
methods: {
//点击保存触发 ==> 增加
onAdd(content) {
content.isDefault = content.isDefault == true ? 1 : 0;
http
.$axios({
url: "/api/addAddress",
method: "post",
headers: {
token: true,
},
data: {
...content,
},
})
.then((res) => {
if (!res.success) return;
Toast(res.msg);
this.$router.push("/path");
});
},
//点击保存触发 ==> 修改
onUpdate(content) {
content.isDefault = content.isDefault == true ? 1 : 0;
http
.$axios({
url: "/api/updateAddress",
method: "post",
headers: {
token: true,
},
data: {
...content,
},
})
.then((res) => {
if (!res.success) return;
Toast(res.msg);
this.$router.push("/path");
});
},
//删除
onDelete(content) {
http
.$axios({
url: "/api/deleteAddress",
method: "post",
headers: {
token: true,
},
data: {
id: content.id,
},
})
.then((res) => {
if (!res.success) return;
Toast(res.msg);
this.$router.push("/path");
});
},
},
};
</script>
<style lang='less' scoped>
section {
background-color: #f7f7f7;
.van-address-edit {
padding: 0;
}
::v-deep .van-address-edit__buttons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
::v-deep .van-button--danger {
width: 8rem;
height: 1.066666rem;
background-color: #b0352f;
}
::v-deep .van-button--default {
width: 8rem;
height: 1.066666rem;
}
}
::v-deep .tabbar {
border-top: 2px solid #ccc;
}
</style>
后台接口
//新增收货地址
router.post("/api/addAddress", function (req, res, next) {
//token
let token = req.headers.token;
let tokenObj = jwt.decode(token);
//拿到前端给后端传入的数据
let body = req.body;
let [name, tel, province, city, county, addressDetail, isDefault, areaCode] =
[
body.name,
body.tel,
body.province,
body.city,
body.county,
body.addressDetail,
body.isDefault,
body.areaCode,
];
//查询用户
connection.query(
`select * from user where tel = ${tokenObj.tel}`,
function (error, results) {
//用户id
let uId = results[0].id;
//增加一条收货地址
if (isDefault != 1) {
connection.query(
`insert into address (uId,name,tel,province,city,county,addressDetail,isDefault,areaCode) values (${uId},"${name}","${tel}","${province}","${city}","${county}","${addressDetail}","${isDefault}","${areaCode}")`,
function (err, result) {
res.send({
data: {
code: 200,
success: true,
msg: "收货地址添加成功",
},
});
}
);
} else {
connection.query(
`select * from address where uId = ${uId} and isDefault = ${isDefault}`,
function (err, result) {
if (result.length > 0) {
let addressId = result[0].id;
connection.query(
`update address set isDefault = replace(isDefault,'1','0') where id = ${addressId}`,
function () {
connection.query(
`insert into address (uId,name,tel,province,city,county,addressDetail,isDefault,areaCode) values (${uId},"${name}","${tel}","${province}","${city}","${county}","${addressDetail}","${isDefault}","${areaCode}")`,
function (e, r) {
res.send({
data: {
code: 200,
success: true,
msg: "收货地址添加成功",
},
});
}
);
}
);
} else {
connection.query(
`insert into address (uId,name,tel,province,city,county,addressDetail,isDefault,areaCode) values (${uId},"${name}","${tel}","${province}","${city}","${county}","${addressDetail}","${isDefault}","${areaCode}")`,
function (err, result) {
res.send({
data: {
code: 200,
success: true,
msg: "收货地址添加成功",
},
});
}
);
}
}
);
}
}
);
});
//查询收货地址
router.post("/api/selectAddress", function (req, res, next) {
//token
let token = req.headers.token;
let tokenObj = jwt.decode(token);
//查询用户
connection.query(
`select * from user where tel = ${tokenObj.tel}`,
function (error, results) {
//用户id
let uId = results[0].id;
connection.query(
`select * from address where uId = ${uId}`,
function (err, result) {
res.send({
data: {
code: 200,
success: true,
msg: "查询成功",
data: result,
},
});
}
);
}
);
});//修改收货地址
router.post("/api/updateAddress", function (req, res, next) {
//token
let token = req.headers.token;
let tokenObj = jwt.decode(token);
//拿到前端给后端传入的数据
let body = req.body;
let [
id,
name,
tel,
province,
city,
county,
addressDetail,
isDefault,
areaCode,
] = [
body.id,
body.name,
body.tel,
body.province,
body.city,
body.county,
body.addressDetail,
body.isDefault,
body.areaCode,
];
//查询用户
connection.query(
`select * from user where tel = ${tokenObj.tel}`,
function (error, results) {
//用户id
let uId = results[0].id;
//对应查询到0 或者 1 有没有默认收货地址
connection.query(
`select * from address where uId = ${uId} and isDefault = ${isDefault}`,
function (err, result) {
if (result.length > 0) {
let addressId = result[0].id;
connection.query(
`update address isDefault = replace(isDefault,'1','0') where id = ${addressId}`,
function (e, r) {
let updateSql = `update address set uId = ? , name = ? , tel = ? , province = ? , city = ? ,county = ? , addressDetail = ? , isDefault = ? , areaCode = ? where id = ${id}`;
connection.query(
updateSql,
[
uId,
name,
tel,
province,
city,
county,
addressDetail,
isDefault,
areaCode,
],
function (errors, datas) {
res.send({
data: {
code: 200,
success: true,
msg: "修改成功",
},
});
}
);
}
);
} else {
let updateSql = `update address set uId = ? , name = ? , tel = ? , province = ? , city = ? ,county = ? , addressDetail = ? , isDefault = ? , areaCode = ? where id = ${id}`;
connection.query(
updateSql,
[
uId,
name,
tel,
province,
city,
county,
addressDetail,
isDefault,
areaCode,
],
function (errors, datas) {
res.send({
data: {
code: 200,
success: true,
msg: "修改成功",
},
});
}
);
}
}
);
}
);
});
//删除收货地址
router.post("/api/deleteAddress", function (req, res, next) {
let id = req.body.id;
connection.query(
`delete from address where id = ${id}`,
function (error, results) {
res.send({
data: {
code: 200,
success: true,
msg: "删除成功",
},
});
}
);
});vuex
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
