Skip to content

Y
yongxinda-h5
提交 361d06ac authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

完成收货地址

上级 e76c77e7
隐藏空白字符变更
内嵌 并排
正在显示 包含 299 行增加 和 172 行删除
src/api/index.ts
浏览文件 @ 361d06ac
...@@ -21,6 +21,12 @@ export const addressList = () => request('/wx/address/list', 'GET'); ...@@ -21,6 +21,12 @@ export const addressList = () => request('/wx/address/list', 'GET');
// 设置地址 // 设置地址
export const cartCheckout = (data: any) => request('/wx/cart/checkout', 'GET', data); export const cartCheckout = (data: any) => request('/wx/cart/checkout', 'GET', data);
// 保存地址
export const saveAddress = (data: any) => request('/wx/address/save', 'POST', data);
// 删除地址
export const deleteAddress = (id: any) => request('/wx/address/delete', 'POST', { id });
// 提交订单 // 提交订单
export const orderSubmit = (data: any) => request('/wx/order/submit', 'POST', data); export const orderSubmit = (data: any) => request('/wx/order/submit', 'POST', data);
......
src/pages.json
浏览文件 @ 361d06ac
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
}, { }, {
"path": "pages/profile/addSite", "path": "pages/profile/addSite",
"style": { "style": {
"navigationBarTitleText": "添加用户地址", "navigationBarTitleText": "设置用户地址",
"navigationBarBackgroundColor": "#fff" "navigationBarBackgroundColor": "#fff"
} }
}, { }, {
......
src/pages/goods/index.vue
浏览文件 @ 361d06ac
...@@ -460,8 +460,7 @@ const initDetails = (id: number) => { ...@@ -460,8 +460,7 @@ const initDetails = (id: number) => {
} }
} }
detailData.value = res.data.data; detailData.value = res.data.data;
console.log(detailData.value?.info.detail !== '<p></p>'); console.log(detailData.value, '商品详情数据');
console.log(detailData.value, '商品详情数据', detailData.value?.info.detail);
} }
}); });
} }
......
src/pages/profile/addSite.vue
浏览文件 @ 361d06ac
...@@ -3,193 +3,307 @@ ...@@ -3,193 +3,307 @@
<view class="top"> <view class="top">
<view class="item"> <view class="item">
<view class="left">收货人</view> <view class="left">收货人</view>
<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" /> <input
type="text"
v-model="addressData.name"
placeholder-class="line"
placeholder="请填写收货人姓名"
/>
</view> </view>
<view class="item"> <view class="item">
<view class="left">手机号码</view> <view class="left">手机号码</view>
<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" /> <input
v-model="addressData.tel"
type="text"
placeholder-class="line"
placeholder="请填写收货人手机号"
/>
</view> </view>
<view class="item" @tap="showRegionPicker"> <view class="item" @tap="showRegionPicker">
<view class="left">所在地区</view> <view class="left">所在地区</view>
<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" /> <input
v-model="addressDetails"
disabled
type="text"
placeholder-class="line"
placeholder="省市区县、乡镇等"
/>
</view> </view>
<view class="item address"> <view class="item address">
<view class="left">详细地址</view> <view class="left">详细地址</view>
<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" /> <textarea
v-model="addressData.addressDetail"
type="text"
placeholder-class="line"
placeholder="街道、楼牌等"
/>
</view> </view>
<!-- <view class="site-clipboard">
<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
<view class="clipboard">
地址粘贴板
<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
</view>
</view> -->
</view> </view>
<view class="bottom"> <view class="bottom">
<view class="tag">
<view class="left">标签</view>
<view class="right">
<text class="tags">家</text>
<text class="tags">公司</text>
<text class="tags">学校</text>
<view class="tags plus">
<u-icon size="22" name="plus"></u-icon>
</view>
</view>
</view>
<view class="default"> <view class="default">
<view class="left"> <view class="left">
<view class="set">设置默认地址</view> <view class="set">设置默认地址</view>
<view class="tips">提醒：每次下单会默认推荐该地址</view> <view class="tips">提醒：每次下单会默认推荐该地址</view>
</view> </view>
<view class="right"> <view class="right">
<switch color="red" @change="setDefault" /> <u-switch v-model="addressData.isDefault" active-color="red" size="40" />
</view> </view>
</view> </view>
</view> </view>
<u-picker mode="region" ref="uPicker" v-model="show" />
<view style="padding: 6%;">
<u-button type="error" shape="circle" @click="addressSave">保存</u-button>
<u-button v-show="editId" shape="circle" @click="addressDel" style="margin-top: 20rpx;">
删除
</u-button>
</view>
<u-picker mode="region" ref="uPicker" v-model="show" @confirm="confirm" />
<u-modal
v-model="showModel"
:content="content"
show-cancel-button
@confirm="confirmModel"
></u-modal>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { import { ref, computed } from 'vue';
ref import { onLoad } from '@dcloudio/uni-app';
} from 'vue' import { deleteAddress, saveAddress } from '@/api/index';
import { cartCheckout } from '@/api/index' let show = ref(false);
let showModel = ref(false);
let content = ref('确认删除地址?');
const show = ref(false) let addressData = ref({
addressDetail: '',
areaCode: '',
city: '',
country: '',
county: '',
isDefault: false,
name: '',
postalCode: '',
province: '',
tel: '',
} as any);
const setDefault = () => {} // 显示地区
let addressDetails = computed(() => {
return addressData.value.province + addressData.value.city + addressData.value.county;
});
const showRegionPicker = () => { let editId = ref()
show.value = true; onLoad((options?: any) => {
if (JSON.stringify(options) !== '{}') {
addressData.value = JSON.parse(options.data);
// 判断是否显示删除
editId.value = addressData.value?.id
} }
});
// 打开地区选择
let showRegionPicker = () => {
show.value = true;
};
// 设置地区
let confirm = (data: any) => {
addressData.value.areaCode = data.area.code;
addressData.value.province = data.province.name;
addressData.value.city = data.city.name;
addressData.value.county = data.area.name;
};
// 确认删除地址
let confirmModel = () => {
deleteAddress(editId.value).then((res: any) => {
if(res.data.code === 200) {
setTimeout(() => {
let pages = getCurrentPages(); // 当前页面
let beforePage: any = pages[pages.length - 2]; // 上一页
beforePage.$vm.refreshIfNeeded = true
uni.showToast({
title: '删除地址成功',
icon: 'none'
})
uni.navigateBack({
delta: 1,
});
}, 50);
}
});
}
// 保存地址
let addressSave = () => {
if (!addressData.value.name)
return uni.showToast({
title: '请输入收货人',
icon: 'none',
});
let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
if (!reg.test(addressData.value.tel))
return uni.showToast({
title: '电话号码为空或格式不对',
icon: 'none',
});
if (!addressData.value.province)
return uni.showToast({
title: '请选择地址',
icon: 'none',
});
if (!addressData.value.addressDetail)
return uni.showToast({
title: '请输入详细地址',
icon: 'none',
});
saveAddress(addressData.value).then((res: any) => {
if (res.data.code === 200) {
setTimeout(() => {
let pages = getCurrentPages(); // 当前页面
let beforePage: any = pages[pages.length - 2]; // 上一页
beforePage.$vm.refreshIfNeeded = true
uni.navigateBack({
delta: 1,
});
}, 50);
}
});
};
// 打开删除地址模态框
let addressDel = () => {
showModel.value = true
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .line { ::v-deep .line {
color: $u-light-color; color: $u-light-color;
font-size: 28rpx; font-size: 28rpx;
} }
.wrap { .wrap {
background-color: #f2f2f2; background-color: #f2f2f2;
.top { .top {
background-color: #ffffff; background-color: #ffffff;
border-top: solid 2rpx $u-border-color; border-top: solid 2rpx $u-border-color;
padding: 22rpx; padding: 22rpx;
.item { .item {
display: flex; display: flex;
font-size: 32rpx; font-size: 32rpx;
line-height: 100rpx; line-height: 100rpx;
align-items: center; align-items: center;
border-bottom: solid 2rpx $u-border-color; border-bottom: solid 2rpx $u-border-color;
.left { .left {
width: 180rpx; width: 180rpx;
} }
input { input {
text-align: left; text-align: left;
}
} }
}
.address { .address {
padding: 20rpx 0; padding: 20rpx 0;
textarea { textarea {
// width: 100%; // width: 100%;
height: 150rpx; height: 150rpx;
background-color: #f7f7f7; background-color: #f7f7f7;
line-height: 60rpx; line-height: 60rpx;
margin: 40rpx auto; margin: 40rpx auto;
padding: 20rpx; padding: 20rpx;
}
} }
}
.site-clipboard { .site-clipboard {
padding-right: 40rpx; padding-right: 40rpx;
textarea { textarea {
// width: 100%; // width: 100%;
height: 150rpx; height: 150rpx;
background-color: #f7f7f7; background-color: #f7f7f7;
line-height: 60rpx; line-height: 60rpx;
margin: 40rpx auto; margin: 40rpx auto;
padding: 20rpx; padding: 20rpx;
} }
.clipboard { .clipboard {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 26rpx; font-size: 26rpx;
color: $u-tips-color; color: $u-tips-color;
height: 80rpx; height: 80rpx;
.icon { .icon {
margin-top: 6rpx; margin-top: 6rpx;
margin-left: 10rpx; margin-left: 10rpx;
}
} }
} }
} }
}
.bottom { .bottom {
margin-top: 20rpx; margin-top: 20rpx;
padding: 40rpx; padding: 22rpx;
padding-right: 0; background-color: #ffffff;
background-color: #ffffff; font-size: 28rpx;
font-size: 28rpx;
.tag { .tag {
display: flex;
.left {
width: 160rpx;
}
.right {
display: flex; display: flex;
flex-wrap: wrap;
.left { .tags {
width: 160rpx; width: 140rpx;
padding: 16rpx 8rpx;
border: solid 2rpx $u-border-color;
text-align: center;
border-radius: 50rpx;
margin: 0 10rpx 20rpx;
display: flex;
font-size: 28rpx;
align-items: center;
justify-content: center;
color: $u-content-color;
line-height: 1;
} }
.right { .plus {
display: flex; //padding: 10rpx 0;
flex-wrap: wrap;
.tags {
width: 140rpx;
padding: 16rpx 8rpx;
border: solid 2rpx $u-border-color;
text-align: center;
border-radius: 50rpx;
margin: 0 10rpx 20rpx;
display: flex;
font-size: 28rpx;
align-items: center;
justify-content: center;
color: $u-content-color;
line-height: 1;
}
.plus {
//padding: 10rpx 0;
}
} }
} }
}
.default { .default {
margin-top: 50rpx; margin-top: 50rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: solid 2rpx $u-border-color; border-bottom: solid 2rpx $u-border-color;
line-height: 64rpx; line-height: 64rpx;
.tips { .tips {
font-size: 24rpx; font-size: 24rpx;
} }
.right {} .right {
} }
} }
} }
}
</style> </style>
src/pages/profile/address.vue
浏览文件 @ 361d06ac
<template> <template>
<view> <view>
<view class="item" v-for="(res, index) in siteList" :key="res.id" @tap="setAddress(res.id)"> <view class="address" v-for="(res, index) in siteList" :key="res.id">
<view class="top"> <view class="item" @tap="setAddress(res.id)">
<view class="name">{{ res.name }}</view> <view class="top">
<view class="phone">{{ res.tel }}</view> <view class="name">{{ res.name }}</view>
<!-- <view class="tag"> <view class="phone">{{ res.tel }}</view>
<text v-for="(item, index) in res.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text> <u-tag
</view> --> v-show="res.isDefault"
</view> text="默认"
<view class="bottom"> type="error"
{{ res.province + res.city + res.county + res.addressDetail }} size="mini"
<!-- <u-icon name="edit-pen" :size="40" color="#999999"></u-icon> --> style="margin-left: 20rpx;"
/>
</view>
<view class="bottom">
{{ res.province + res.city + res.county + res.addressDetail }}
</view>
</view> </view>
<u-icon name="edit-pen" color="#3b3b3b" :size="40" @tap="addressEdit(res)" />
</view> </view>
<view class="addSite" @tap="toAddSite"> <view class="addSite" @tap="toAddSite">
<view class="add"> <view class="add">
<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon> <u-icon name="plus" color="#ffffff" class="icon" :size="35"></u-icon>
新建收货地址 新建收货地址
</view> </view>
</view> </view>
...@@ -24,8 +31,10 @@ ...@@ -24,8 +31,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { addressList } from '@/api/index'; import { addressList } from '@/api/index';
const refreshIfNeeded = ref(false);
const siteList = ref([] as any); const siteList = ref([] as any);
// const cartId = ref(); // const cartId = ref();
...@@ -34,45 +43,37 @@ const siteList = ref([] as any); ...@@ -34,45 +43,37 @@ const siteList = ref([] as any);
// console.log(cartId.value); // console.log(cartId.value);
// }); // });
// 新增地址 // 新增地址
const toAddSite = () => { const toAddSite = () => {
uni.navigateTo({ uni.navigateTo({
url: './addSite', url: './addSite',
}); });
}; };
onShow(() => {
if (refreshIfNeeded.value) {
initAddressLit();
refreshIfNeeded.value = false;
}
});
// 设置地址 // 设置地址
const setAddress = (id: any) => { const setAddress = (id: any) => {
if (uni.getStorageSync('123')) {
console.log('有');
} else {
console.log('无');
}
setTimeout(() => { setTimeout(() => {
uni.setStorage({ uni.setStorage({
key: 'addressId', key: 'addressId',
data: id, data: id,
}); success() {
uni.navigateBack({ uni.navigateBack();
delta: 1, },
}); });
}, 50); }, 50);
}; };
const getData = () => { const addressEdit = (res: any) => {
siteList.value = [ uni.navigateTo({
{ url: `./addSite?data=${JSON.stringify(res)}&editId=1 `,
id: 1, });
tag: [
{
tagText: '默认',
},
{
tagText: '家',
},
],
site: '广东省深圳市宝安区 自由路66号',
},
];
}; };
const initAddressLit = () => { const initAddressLit = () => {
...@@ -82,6 +83,10 @@ const initAddressLit = () => { ...@@ -82,6 +83,10 @@ const initAddressLit = () => {
}; };
initAddressLit(); initAddressLit();
defineExpose({
refreshIfNeeded,
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -90,9 +95,14 @@ page { ...@@ -90,9 +95,14 @@ page {
padding: 0 20rpx; padding: 0 20rpx;
} }
.item { .address {
padding: 40rpx 20rpx; padding: 40rpx 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.item {
.top { .top {
display: flex; display: flex;
font-weight: bold; font-weight: bold;
...@@ -144,7 +154,7 @@ page { ...@@ -144,7 +154,7 @@ page {
width: 600rpx; width: 600rpx;
line-height: 100rpx; line-height: 100rpx;
// position: absolute; // position: absolute;
background-color: red; background-color: #fa3534;
border-radius: 60rpx; border-radius: 60rpx;
font-size: 30rpx; font-size: 30rpx;
......
src/utils/request.ts
浏览文件 @ 361d06ac
...@@ -66,10 +66,8 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: ...@@ -66,10 +66,8 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
uni.showToast({ uni.showToast({
title: '连接服务器失败', title: '连接服务器失败',
icon: 'none', icon: 'none',
success() {
uni.clearStorage();
},
}); });
uni.clearStorage();
reject(err); reject(err);
}, },
}); });
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论