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

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

@ -1,70 +1,34 @@
<!-- 收货地址的新增/编辑 -->
<template>
<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
<uni-forms
ref="addressFormRef"
v-model="state.model"
:rules="rules"
validateTrigger="bind"
labelWidth="160"
labelAlign="left"
border
:labelStyle="{ fontWeight: 'bold' }"
>
<uni-forms ref="addressFormRef" v-model="state.model" :rules="rules" validateTrigger="bind" labelWidth="160"
labelAlign="left" 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-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-easyinput
v-model="state.model.mobile"
type="number"
placeholder="请输入手机号"
:inputBorder="false"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
>
<uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
</uni-easyinput>
</uni-forms-item>
<uni-forms-item
name="areaName"
label="省市区"
@tap="state.showRegion = true"
class="form-item"
>
<uni-easyinput
v-model="state.model.areaName"
disabled
:inputBorder="false"
<uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
<uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
:styles="{ disableColor: '#fff', color: '#333' }"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请选择省市区"
>
placeholder="请选择省市区">
<template v-slot:right>
<uni-icons type="right" />
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item
name="detailAddress"
label="详细地址"
:formItemStyle="{ alignItems: 'flex-start' }"
:labelStyle="{ lineHeight: '5em' }"
class="textarea-item"
>
<uni-easyinput
:inputBorder="false"
type="textarea"
v-model="state.model.detailAddress"
<uni-forms-item name="detailAddress" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.detailAddress"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请输入详细地址"
clearable
/>
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">
@ -84,20 +48,24 @@
</su-fixed>
<!-- 省市区弹窗 -->
<su-region-picker
:show="state.showRegion"
@cancel="state.showRegion = false"
@confirm="onRegionConfirm"
/>
<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
</s-layout>
</template>
<script setup>
import { ref, reactive, unref } from 'vue';
import {
ref,
reactive,
unref
} from 'vue';
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import {
onLoad
} from '@dcloudio/uni-app';
import _ from 'lodash';
import { mobile } from '@/sheep/validate/form';
import {
mobile
} from '@/sheep/validate/form';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
@ -105,40 +73,31 @@
const state = reactive({
showRegion: false,
model: {
name: '',
mobile: '',
detailAddress: '',
defaultStatus: false,
areaName: '',
},
rules: {},
});
const rules = {
name: {
rules: [
{
rules: [{
required: true,
errorMessage: '请输入收货人姓名',
},
],
}, ],
},
mobile,
detailAddress: {
rules: [
{
rules: [{
required: true,
errorMessage: '请输入详细地址',
},
],
}, ],
},
areaName: {
rules: [
{
rules: [{
required: true,
errorMessage: '请选择您的位置',
},
],
}, ],
},
};
@ -176,10 +135,12 @@
const formData = {
...state.model,
};
const { code } =
state.model.id > 0
? await AddressApi.updateAddress(formData)
: await AddressApi.createAddress(formData);
const {
code
} =
state.model.id > 0 ?
await AddressApi.updateAddress(formData) :
await AddressApi.createAddress(formData);
if (code === 0) {
sheep.$router.back();
}
@ -190,11 +151,13 @@
uni.showModal({
title: '提示',
content: '确认删除此收货地址吗？',
success: async function (res) {
success: async function(res) {
if (!res.confirm) {
return;
}
const { code } = await AddressApi.deleteAddress(state.model.id);
const {
code
} = await AddressApi.deleteAddress(state.model.id);
if (code === 0) {
sheep.$router.back();
}
@ -207,7 +170,10 @@
getAreaData();
// 情况一：基于 id 获得收件地址
if (options.id) {
let { code, data } = await AddressApi.getAddress(options.id);
let {
code,
data
} = await AddressApi.getAddress(options.id);
if (code !== 0) {
return;
}

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

@ -2,47 +2,41 @@
<template>
<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
<view v-if="state.list.length">
<s-address-item
hasBorderBottom
v-for="item in state.list"
:key="item.id"
:item="item"
@tap="onSelect(item)"
/>
<s-address-item hasBorderBottom v-for="item in state.list" :key="item.id" :item="item" @tap="onSelect(item)"
@cc="getList" />
</view>
<su-fixed bottom placeholder>
<view class="footer-box ss-flex ss-row-between ss-p-20">
<!-- 微信小程序和微信H5 -->
<button
v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
<button v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
@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>
导入微信地址
</button>
<button
class="add-btn ss-reset-button ui-Shadow-Main"
@tap="sheep.$router.go('/pages/user/address/edit')"
>
<button class="add-btn ss-reset-button ui-Shadow-Main"
@tap="sheep.$router.go('/pages/user/address/edit')">
新增收货地址
</button>
</view>
</su-fixed>
<s-empty
v-if="state.list.length === 0 && !state.loading"
text="暂无收货地址"
icon="/static/data-empty.png"
/>
<s-empty v-if="state.list.length === 0 && !state.loading" text="暂无收货地址" icon="/static/data-empty.png" />
</s-layout>
</template>
<script setup>
import { reactive, onBeforeMount } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import {
reactive,
onBeforeMount
} from 'vue';
import {
onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
import {
isEmpty
} from 'lodash';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
@ -110,6 +104,11 @@
// #endif
}
function getList(val) {
AddressApi.getAddressList().then((res) => {
state.list = res.data
})
}
onShow(async () => {
state.list = (await AddressApi.getAddressList()).data;
state.loading = false;

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

@ -1,11 +1,12 @@
<!-- 地址卡片 -->
<template>
<view
class="address-item ss-flex ss-row-between ss-col-center"
:class="[{ 'border-bottom': props.hasBorderBottom }]"
>
<view class="address-item ss-flex ss-row-between ss-col-center"
:class="[{ 'border-bottom': props.hasBorderBottom }]">
<image class="imgs"
src="https://zysc.fjptzykj.com:3000/shangcheng/0f01dda22fb349c40c4659d73cb346a1423fee44c9d53eb07bdae1a1e11b5299.png">
</image>
<view class="item-left" v-if="!isEmpty(props.item)">
<view class="area-text ss-flex ss-col-center">
<!-- <view class="area-text ss-flex ss-col-center">
<uni-tag
class="ss-m-r-10"
size="small"
@ -14,22 +15,45 @@
text="默认"
/>
{{ props.item.areaName }}
</view>
</view> -->
<view class="address-text">
{{ props.item.detailAddress }}
收货人：{{ props.item.name }} {{ props.item.mobile }}
</view>
<view class="person-text"> {{ props.item.name }} {{ props.item.mobile }} </view>
<view class="person-text">收货地址： {{ props.item.areaName }} {{ props.item.detailAddress }}</view>
</view>
<view v-else>
<view class="address-text ss-m-b-10">请选择收货地址</view>
</view>
<slot>
<button class="ss-reset-button edit-btn" @tap.stop="onEdit">
<!-- <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
<view class="edit-icon ss-flex ss-row-center ss-col-center">
<image :src="sheep.$url.static('/static/img/shop/user/address/edit.png')" />
<image
:src="sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/f6c484a459e843baeb729603ae221b6d3ab384b56c2d891ae53b0ee4205477a9.png')" />
</view>
</button>
</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>
@ -45,11 +69,15 @@
* @slot - 默认插槽
*/
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
import AddressApi from '@/sheep/api/member/address';
import {
isEmpty
} from 'lodash';
const emits = defineEmits(['cc']);
const props = defineProps({
item: {
type: Object,
default() {},
default () {},
},
hasBorderBottom: {
type: Boolean,
@ -57,19 +85,104 @@
},
});
// 删除收货地址
const onDelete = (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>
<style lang="scss" scoped>
.address-item {
background: white;
padding: 24rpx 30rpx;
position: relative;
flex-wrap: wrap;
padding-bottom: 0;
.bottom {
width: 100%;
display: flex;
justify-content: space-between;
margin: 10px 0;
.img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.left {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 500;
.radio {
border: 1px solid #dddddd;
border-radius: 50%;
width: 20px;
height: 20px;
margin-right: 10px;
}
}
.right {
display: flex;
align-items: center;
.edit-icon {
display: flex;
align-items: center;
font-size: 15px;
font-weight: 500;
.img {
margin-right: 5px;
}
&:first-child {
margin-right: 20px;
}
}
}
}
.imgs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
.item-left {
width: 600rpx;
width: 100%;
border-bottom: 1px solid #fafafa;
padding: 6px 0;
padding-bottom: 13px;
}
.area-text {
@ -79,15 +192,16 @@
}
.address-text {
font-size: 32rpx;
font-weight: 500;
font-size: 15px;
font-weight: 600;
color: #333333;
line-height: 48rpx;
margin-bottom: 8px;
}
.person-text {
font-size: 28rpx;
font-weight: 400;
font-size: 15px;
font-weight: 500;
color: $dark-9;
}
}
@ -103,6 +217,7 @@
height: 24rpx;
}
}
image {
width: 100%;
height: 100%;