root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

收货地址页面优化

Browse Source
This commit is contained in:
77 2024-11-12 14:07:12 +08:00
parent 8907015c31
commit 46a7fa4e61
3 changed files with 592 additions and 512 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

518
pages/user/address/edit.vue
View File

@ -1,305 +1,271 @@
<!-- 收货地址的新增/编辑 --> <!-- 收货地址的新增/编辑 -->
<template> <template>
<s-layout :title="state.model.id ? '编辑地址' : '新增地址'"> <s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
<uni-forms <uni-forms ref="addressFormRef" v-model="state.model" :rules="rules" validateTrigger="bind" labelWidth="160"
ref="addressFormRef" labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
v-model="state.model" <view class="bg-white form-box ss-p-x-30">
:rules="rules" <uni-forms-item name="name" label="收货人" class="form-item">
validateTrigger="bind" <uni-easyinput v-model="state.model.name" placeholder="请填写收货人姓名" :inputBorder="false"
labelWidth="160" placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
labelAlign="left" </uni-forms-item>
border
:labelStyle="{ fontWeight: 'bold' }"
>
<view class="bg-white form-box ss-p-x-30">
<uni-forms-item name="name" label="收货人" class="form-item">
<uni-easyinput
v-model="state.model.name"
placeholder="请填写收货人姓名"
:inputBorder="false"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
/>
</uni-forms-item>
<uni-forms-item name="mobile" label="手机号" class="form-item"> <uni-forms-item name="mobile" label="手机号" class="form-item">
<uni-easyinput <uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
v-model="state.model.mobile" placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
type="number" </uni-easyinput>
placeholder="请输入手机号" </uni-forms-item>
:inputBorder="false" <uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" <uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
> :styles="{ disableColor: '#fff', color: '#333' }"
</uni-easyinput> placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
</uni-forms-item> placeholder="请选择省市区">
<uni-forms-item <template v-slot:right>
name="areaName" <uni-icons type="right" />
label="省市区" </template>
@tap="state.showRegion = true" </uni-easyinput>
class="form-item" </uni-forms-item>
> <uni-forms-item name="detailAddress" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
<uni-easyinput :labelStyle="{ lineHeight: '5em' }" class="textarea-item">
v-model="state.model.areaName" <uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.detailAddress"
disabled placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
:inputBorder="false" placeholder="请输入详细地址" clearable />
:styles="{ disableColor: '#fff', color: '#333' }" </uni-forms-item>
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" </view>
placeholder="请选择省市区" <view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
> <view class="default-box-title"> 设为默认地址 </view>
<template v-slot:right> <su-switch style="transform: scale(0.8)" v-model="state.model.defaultStatus" />
<uni-icons type="right" /> </view>
</template> </uni-forms>
</uni-easyinput> <su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
</uni-forms-item> <view class="footer-box ss-flex-col ss-row-between ss-p-20">
<uni-forms-item <view class="ss-m-b-20">
name="detailAddress" <button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
label="详细地址" </view>
:formItemStyle="{ alignItems: 'flex-start' }" <button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
:labelStyle="{ lineHeight: '5em' }" 删除
class="textarea-item" </button>
> </view>
<uni-easyinput </su-fixed>
:inputBorder="false"
type="textarea"
v-model="state.model.detailAddress"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请输入详细地址"
clearable
/>
</uni-forms-item>
</view>
<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
<view class="default-box-title"> 设为默认地址 </view>
<su-switch style="transform: scale(0.8)" v-model="state.model.defaultStatus" />
</view>
</uni-forms>
<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
<view class="footer-box ss-flex-col ss-row-between ss-p-20">
<view class="ss-m-b-20">
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
</view>
<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
删除
</button>
</view>
</su-fixed>
<!-- 省市区弹窗 --> <!-- 省市区弹窗 -->
<su-region-picker <su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
:show="state.showRegion" </s-layout>
@cancel="state.showRegion = false"
@confirm="onRegionConfirm"
/>
</s-layout>
</template> </template>
<script setup> <script setup>
import { ref, reactive, unref } from 'vue'; import {
import sheep from '@/sheep'; ref,
import { onLoad } from '@dcloudio/uni-app'; reactive,
import _ from 'lodash'; unref
import { mobile } from '@/sheep/validate/form'; } from 'vue';
import AreaApi from '@/sheep/api/system/area'; import sheep from '@/sheep';
import AddressApi from '@/sheep/api/member/address'; import {
onLoad
} from '@dcloudio/uni-app';
import _ from 'lodash';
import {
mobile
} from '@/sheep/validate/form';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
const addressFormRef = ref(null); const addressFormRef = ref(null);
const state = reactive({ const state = reactive({
showRegion: false, showRegion: false,
model: { model: {
name: '',
mobile: '',
detailAddress: '',
defaultStatus: false,
areaName: '',
},
rules: {},
});
const rules = { defaultStatus: false,
name: { },
rules: [ rules: {},
{ });
required: true,
errorMessage: '请输入收货人姓名',
},
],
},
mobile,
detailAddress: {
rules: [
{
required: true,
errorMessage: '请输入详细地址',
},
],
},
areaName: {
rules: [
{
required: true,
errorMessage: '请选择您的位置',
},
],
},
};
// 确认选择地区 const rules = {
const onRegionConfirm = (e) => { name: {
state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`; rules: [{
state.model.areaId = e.district_id; required: true,
state.showRegion = false; errorMessage: '请输入收货人姓名',
}; }, ],
},
mobile,
detailAddress: {
rules: [{
required: true,
errorMessage: '请输入详细地址',
}, ],
},
areaName: {
rules: [{
required: true,
errorMessage: '请选择您的位置',
}, ],
},
};
// 获得地区数据 // 确认选择地区
const getAreaData = () => { const onRegionConfirm = (e) => {
if (_.isEmpty(uni.getStorageSync('areaData'))) { state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`;
AreaApi.getAreaTree().then((res) => { state.model.areaId = e.district_id;
if (res.code === 0) { state.showRegion = false;
uni.setStorageSync('areaData', res.data); };
}
});
}
};
// 保存收货地址 // 获得地区数据
const onSave = async () => { const getAreaData = () => {
// 参数校验 if (_.isEmpty(uni.getStorageSync('areaData'))) {
const validate = await unref(addressFormRef) AreaApi.getAreaTree().then((res) => {
.validate() if (res.code === 0) {
.catch((error) => { uni.setStorageSync('areaData', res.data);
console.log('error: ', error); }
}); });
if (!validate) { }
return; };
}
// 提交请求 // 保存收货地址
const formData = { const onSave = async () => {
...state.model, // 参数校验
}; const validate = await unref(addressFormRef)
const { code } = .validate()
state.model.id > 0 .catch((error) => {
? await AddressApi.updateAddress(formData) console.log('error: ', error);
: await AddressApi.createAddress(formData); });
if (code === 0) { if (!validate) {
sheep.$router.back(); return;
} }
};
// 删除收货地址 // 提交请求
const onDelete = () => { const formData = {
uni.showModal({ ...state.model,
title: '提示', };
content: '确认删除此收货地址吗？', const {
success: async function (res) { code
if (!res.confirm) { } =
return; state.model.id > 0 ?
} await AddressApi.updateAddress(formData) :
const { code } = await AddressApi.deleteAddress(state.model.id); await AddressApi.createAddress(formData);
if (code === 0) { if (code === 0) {
sheep.$router.back(); sheep.$router.back();
} }
}, };
});
};
onLoad(async (options) => { // 删除收货地址
// 获得地区数据 const onDelete = () => {
getAreaData(); uni.showModal({
// 情况一：基于 id 获得收件地址 title: '提示',
if (options.id) { content: '确认删除此收货地址吗？',
let { code, data } = await AddressApi.getAddress(options.id); success: async function(res) {
if (code !== 0) { if (!res.confirm) {
return; return;
} }
state.model = data; const {
} code
// 情况二：微信导入 } = await AddressApi.deleteAddress(state.model.id);
if (options.data) { if (code === 0) {
let data = JSON.parse(options.data); sheep.$router.back();
const areaData = uni.getStorageSync('areaData'); }
const findAreaByName = (areas, name) => areas.find((item) => item.name === name); },
});
};
let provinceObj = findAreaByName(areaData, data.province_name); onLoad(async (options) => {
let cityObj = provinceObj ? findAreaByName(provinceObj.children, data.city_name) : undefined; // 获得地区数据
let districtObj = cityObj ? findAreaByName(cityObj.children, data.district_name) : undefined; getAreaData();
let areaId = (districtObj || cityObj || provinceObj).id; // 情况一：基于 id 获得收件地址
if (options.id) {
let {
code,
data
} = await AddressApi.getAddress(options.id);
if (code !== 0) {
return;
}
state.model = data;
}
// 情况二：微信导入
if (options.data) {
let data = JSON.parse(options.data);
const areaData = uni.getStorageSync('areaData');
const findAreaByName = (areas, name) => areas.find((item) => item.name === name);
state.model = { let provinceObj = findAreaByName(areaData, data.province_name);
...state.model, let cityObj = provinceObj ? findAreaByName(provinceObj.children, data.city_name) : undefined;
areaId, let districtObj = cityObj ? findAreaByName(cityObj.children, data.district_name) : undefined;
areaName: [data.province_name, data.city_name, data.district_name] let areaId = (districtObj || cityObj || provinceObj).id;
.filter(Boolean)
.join(' '), state.model = {
defaultStatus: false, ...state.model,
detailAddress: data.address, areaId,
mobile: data.mobile, areaName: [data.province_name, data.city_name, data.district_name]
name: data.consignee, .filter(Boolean)
}; .join(' '),
} defaultStatus: false,
}); detailAddress: data.address,
mobile: data.mobile,
name: data.consignee,
};
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep() { :deep() {
.uni-forms-item__label .label-text { .uni-forms-item__label .label-text {
font-size: 28rpx !important; font-size: 28rpx !important;
color: #333333 !important; color: #333333 !important;
line-height: normal !important; line-height: normal !important;
} }
.uni-easyinput__content-input { .uni-easyinput__content-input {
font-size: 28rpx !important; font-size: 28rpx !important;
color: #333333 !important; color: #333333 !important;
line-height: normal !important; line-height: normal !important;
padding-left: 0 !important; padding-left: 0 !important;
} }
.uni-easyinput__content-textarea { .uni-easyinput__content-textarea {
font-size: 28rpx !important; font-size: 28rpx !important;
color: #333333 !important; color: #333333 !important;
line-height: normal !important; line-height: normal !important;
margin-top: 8rpx !important; margin-top: 8rpx !important;
} }
.uni-icons { .uni-icons {
font-size: 40rpx !important; font-size: 40rpx !important;
} }
.is-textarea-icon { .is-textarea-icon {
margin-top: 22rpx; margin-top: 22rpx;
} }
.is-disabled { .is-disabled {
color: #333333; color: #333333;
} }
} }
.default-box { .default-box {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
height: 100rpx; height: 100rpx;
.default-box-title { .default-box-title {
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
line-height: normal; line-height: normal;
} }
} }
.footer-box { .footer-box {
.save-btn { .save-btn {
width: 710rpx; width: 710rpx;
height: 80rpx; height: 80rpx;
border-radius: 40rpx; border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: $white; color: $white;
} }
.cancel-btn { .cancel-btn {
width: 710rpx; width: 710rpx;
height: 80rpx; height: 80rpx;
border-radius: 40rpx; border-radius: 40rpx;
background: var(--ui-BG); background: var(--ui-BG);
} }
} }
</style> </style>

281
pages/user/address/list.vue
View File

@ -1,156 +1,155 @@
<!-- 收件地址列表 --> <!-- 收件地址列表 -->
<template> <template>
<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }"> <s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
<view v-if="state.list.length"> <view v-if="state.list.length">
<s-address-item <s-address-item hasBorderBottom v-for="item in state.list" :key="item.id" :item="item" @tap="onSelect(item)"
hasBorderBottom @cc="getList" />
v-for="item in state.list" </view>
:key="item.id"
:item="item"
@tap="onSelect(item)"
/>
</view>
<su-fixed bottom placeholder> <su-fixed bottom placeholder>
<view class="footer-box ss-flex ss-row-between ss-p-20"> <view class="footer-box ss-flex ss-row-between ss-p-20">
<!-- 微信小程序和微信H5 --> <!-- 微信小程序和微信H5 -->
<button <button v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)" @tap="importWechatAddress"
@tap="importWechatAddress" class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center">
class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center" <text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
> 导入微信地址
<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text> </button>
导入微信地址 <button class="add-btn ss-reset-button ui-Shadow-Main"
</button> @tap="sheep.$router.go('/pages/user/address/edit')">
<button 新增收货地址
class="add-btn ss-reset-button ui-Shadow-Main" </button>
@tap="sheep.$router.go('/pages/user/address/edit')" </view>
> </su-fixed>
新增收货地址 <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无收货地址" icon="/static/data-empty.png" />
</button> </s-layout>
</view>
</su-fixed>
<s-empty
v-if="state.list.length === 0 && !state.loading"
text="暂无收货地址"
icon="/static/data-empty.png"
/>
</s-layout>
</template> </template>
<script setup> <script setup>
import { reactive, onBeforeMount } from 'vue'; import {
import { onShow } from '@dcloudio/uni-app'; reactive,
import sheep from '@/sheep'; onBeforeMount
import { isEmpty } from 'lodash'; } from 'vue';
import AreaApi from '@/sheep/api/system/area'; import {
import AddressApi from '@/sheep/api/member/address'; onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
isEmpty
} from 'lodash';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
const state = reactive({ const state = reactive({
list: [], // 地址列表 list: [], // 地址列表
loading: true, loading: true,
}); });
// 选择收货地址 // 选择收货地址
const onSelect = (addressInfo) => { const onSelect = (addressInfo) => {
uni.$emit('SELECT_ADDRESS', { uni.$emit('SELECT_ADDRESS', {
addressInfo, addressInfo,
}); });
sheep.$router.back(); sheep.$router.back();
}; };
// 导入微信地址 // 导入微信地址
// TODO 芋艿：未测试 // TODO 芋艿：未测试
function importWechatAddress() { function importWechatAddress() {
let wechatAddress = {}; let wechatAddress = {};
// #ifdef MP // #ifdef MP
uni.chooseAddress({ uni.chooseAddress({
success: (res) => { success: (res) => {
wechatAddress = { wechatAddress = {
consignee: res.userName, consignee: res.userName,
mobile: res.telNumber, mobile: res.telNumber,
province_name: res.provinceName, province_name: res.provinceName,
city_name: res.cityName, city_name: res.cityName,
district_name: res.countyName, district_name: res.countyName,
address: res.detailInfo, address: res.detailInfo,
region: '', region: '',
is_default: false, is_default: false,
}; };
if (!isEmpty(wechatAddress)) { if (!isEmpty(wechatAddress)) {
sheep.$router.go('/pages/user/address/edit', { sheep.$router.go('/pages/user/address/edit', {
data: JSON.stringify(wechatAddress), data: JSON.stringify(wechatAddress),
}); });
} }
}, },
fail: (err) => { fail: (err) => {
console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow'); console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
}, },
}); });
// #endif // #endif
// #ifdef H5 // #ifdef H5
sheep.$platform.useProvider('wechat').jssdk.openAddress({ sheep.$platform.useProvider('wechat').jssdk.openAddress({
success: (res) => { success: (res) => {
wechatAddress = { wechatAddress = {
consignee: res.userName, consignee: res.userName,
mobile: res.telNumber, mobile: res.telNumber,
province_name: res.provinceName, province_name: res.provinceName,
city_name: res.cityName, city_name: res.cityName,
district_name: res.countryName, district_name: res.countryName,
address: res.detailInfo, address: res.detailInfo,
region: '', region: '',
is_default: false, is_default: false,
}; };
if (!isEmpty(wechatAddress)) { if (!isEmpty(wechatAddress)) {
sheep.$router.go('/pages/user/address/edit', { sheep.$router.go('/pages/user/address/edit', {
data: JSON.stringify(wechatAddress), data: JSON.stringify(wechatAddress),
}); });
} }
}, },
}); });
// #endif // #endif
} }
onShow(async () => { function getList(val) {
state.list = (await AddressApi.getAddressList()).data; AddressApi.getAddressList().then((res) => {
state.loading = false; state.list = res.data
}); })
}
onShow(async () => {
state.list = (await AddressApi.getAddressList()).data;
state.loading = false;
});
onBeforeMount(() => { onBeforeMount(() => {
if (!!uni.getStorageSync('areaData')) { if (!!uni.getStorageSync('areaData')) {
return; return;
} }
// 提前加载省市区数据 // 提前加载省市区数据
AreaApi.getAreaTree().then((res) => { AreaApi.getAreaTree().then((res) => {
if (res.code === 0) { if (res.code === 0) {
uni.setStorageSync('areaData', res.data); uni.setStorageSync('areaData', res.data);
} }
}); });
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer-box { .footer-box {
.add-btn { .add-btn {
flex: 1; flex: 1;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
border-radius: 80rpx; border-radius: 80rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
line-height: 80rpx; line-height: 80rpx;
color: $white; color: $white;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.sync-wxaddress { .sync-wxaddress {
flex: 1; flex: 1;
line-height: 80rpx; line-height: 80rpx;
background: $white; background: $white;
border-radius: 80rpx; border-radius: 80rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: $dark-6; color: $dark-6;
margin-right: 18rpx; margin-right: 18rpx;
} }
} }
</style> </style>

305
sheep/components/s-address-item/s-address-item.vue
View File

@ -1,110 +1,225 @@
<!-- 地址卡片 --> <!-- 地址卡片 -->
<template> <template>
<view <view class="address-item ss-flex ss-row-between ss-col-center"
class="address-item ss-flex ss-row-between ss-col-center" :class="[{ 'border-bottom': props.hasBorderBottom }]">
:class="[{ 'border-bottom': props.hasBorderBottom }]" <image class="imgs"
> src="https://zysc.fjptzykj.com:3000/shangcheng/0f01dda22fb349c40c4659d73cb346a1423fee44c9d53eb07bdae1a1e11b5299.png">
<view class="item-left" v-if="!isEmpty(props.item)"> </image>
<view class="area-text ss-flex ss-col-center"> <view class="item-left" v-if="!isEmpty(props.item)">
<uni-tag <!-- <view class="area-text ss-flex ss-col-center">
class="ss-m-r-10" <uni-tag
size="small" class="ss-m-r-10"
custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;" size="small"
v-if="props.item.defaultStatus" custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
text="默认" v-if="props.item.defaultStatus"
/> text="默认"
{{ props.item.areaName }} />
</view> {{ props.item.areaName }}
<view class="address-text"> </view> -->
{{ props.item.detailAddress }} <view class="address-text">
</view> 收货人：{{ props.item.name }} {{ props.item.mobile }}
<view class="person-text"> {{ props.item.name }} {{ props.item.mobile }} </view> </view>
</view> <view class="person-text">收货地址： {{ props.item.areaName }} {{ props.item.detailAddress }}</view>
<view v-else> </view>
<view class="address-text ss-m-b-10">请选择收货地址</view> <view v-else>
</view> <view class="address-text ss-m-b-10">请选择收货地址</view>
<slot> </view>
<button class="ss-reset-button edit-btn" @tap.stop="onEdit"> <slot>
<view class="edit-icon ss-flex ss-row-center ss-col-center"> <!-- <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
<image :src="sheep.$url.static('/static/img/shop/user/address/edit.png')" /> <view class="edit-icon ss-flex ss-row-center ss-col-center">
</view> <image
</button> :src="sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/f6c484a459e843baeb729603ae221b6d3ab384b56c2d891ae53b0ee4205477a9.png')" />
</slot> </view>
</view> </button> -->
</slot>
<view class="bottom">
<view class="left" @click.stop="auto(props.item)">
<view class="radio">
<image class="img"
v-if="props.item.defaultStatus"
src="https://zysc.fjptzykj.com:3000/shangcheng/1d07aff7a6a0a3a5f09ed68407bd4bb9c589b62dba04b23d61b7027453b2894e.png">
</image>
</view>设为默认
</view>
<view class='right'>
<view class="edit-icon" @click.stop="onEdit">
<image class="img"
src="https://zysc.fjptzykj.com:3000/shangcheng/82a9c12d309bf1a7f11e581ac31230e3847f2aaf2f31591b4d3aed7ee506ff54.png" />
编辑
</view>
<view class="edit-icon" @click.stop="onDelete(props.item.id)">
<image class="img"
src="https://zysc.fjptzykj.com:3000/shangcheng/efbc57f84ba2740666f17f3cfcd1b607af5e3c520eca27814e5cda11c9715494.png" />
删除
</view>
</view>
</view>
</view>
</template> </template>
<script setup> <script setup>
/** /**
* 基础组件 - 地址卡片 * 基础组件 - 地址卡片
* *
* @param {String} icon = _icon-edit - icon * @param {String} icon = _icon-edit - icon
* *
* @event {Function()} click - 点击 * @event {Function()} click - 点击
* @event {Function()} actionClick - 点击工具栏 * @event {Function()} actionClick - 点击工具栏
* *
* @slot - 默认插槽 * @slot - 默认插槽
*/ */
import sheep from '@/sheep'; import sheep from '@/sheep';
import { isEmpty } from 'lodash'; import AddressApi from '@/sheep/api/member/address';
const props = defineProps({ import {
item: { isEmpty
type: Object, } from 'lodash';
default() {}, const emits = defineEmits(['cc']);
}, const props = defineProps({
hasBorderBottom: { item: {
type: Boolean, type: Object,
defult: true, default () {},
}, },
}); hasBorderBottom: {
type: Boolean,
defult: true,
},
});
const onEdit = () => { // 删除收货地址
sheep.$router.go('/pages/user/address/edit', { const onDelete = (id) => {
id: props.item.id, uni.showModal({
}); title: '提示',
}; content: '确认删除此收货地址吗？',
success: async function (res) {
if (!res.confirm) {
return;
}
const { code } = await AddressApi.deleteAddress(id);
if (code === 0) {
emits("cc", "2222")
}
},
});
};
const onEdit = () => {
sheep.$router.go('/pages/user/address/edit', {
id: props.item.id,
});
};
function auto(item){
item.defaultStatus = !item.defaultStatus;
AddressApi.updateAddress(item).then((res)=>{
emits("cc", "2222")
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.address-item { .address-item {
padding: 24rpx 30rpx; background: white;
padding: 24rpx 30rpx;
position: relative;
flex-wrap: wrap;
padding-bottom: 0;
.item-left { .bottom {
width: 600rpx; width: 100%;
} display: flex;
justify-content: space-between;
margin: 10px 0;
.area-text { .img {
font-size: 26rpx; width: 20px;
font-weight: 400; height: 20px;
color: $dark-9; margin-right: 10px;
} }
.address-text { .left {
font-size: 32rpx; display: flex;
font-weight: 500; align-items: center;
color: #333333; font-size: 15px;
line-height: 48rpx; font-weight: 500;
} .radio {
border: 1px solid #dddddd;
border-radius: 50%;
width: 20px;
height: 20px;
margin-right: 10px;
}
}
.person-text { .right {
font-size: 28rpx; display: flex;
font-weight: 400; align-items: center;
color: $dark-9;
}
}
.edit-btn { .edit-icon {
width: 44rpx; display: flex;
height: 44rpx; align-items: center;
background: $gray-f; font-size: 15px;
border-radius: 50%; font-weight: 500;
.img {
margin-right: 5px;
}
.edit-icon { &:first-child {
width: 24rpx; margin-right: 20px;
height: 24rpx; }
} }
} }
image { }
width: 100%;
height: 100%; .imgs {
} position: absolute;
</style> top: 0;
left: 0;
width: 100%;
height: 2px;
}
.item-left {
width: 100%;
border-bottom: 1px solid #fafafa;
padding: 6px 0;
padding-bottom: 13px;
}
.area-text {
font-size: 26rpx;
font-weight: 400;
color: $dark-9;
}
.address-text {
font-size: 15px;
font-weight: 600;
color: #333333;
line-height: 48rpx;
margin-bottom: 8px;
}
.person-text {
font-size: 15px;
font-weight: 500;
color: $dark-9;
}
}
.edit-btn {
width: 44rpx;
height: 44rpx;
background: $gray-f;
border-radius: 50%;
.edit-icon {
width: 24rpx;
height: 24rpx;
}
}
image {
width: 100%;
height: 100%;
}
</style>