424 lines
8.9 KiB
Vue
424 lines
8.9 KiB
Vue
<script setup>
|
|
// 收货地址
|
|
import {
|
|
ref,
|
|
getCurrentInstance,
|
|
reactive,
|
|
computed,
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onPullDownRefresh,
|
|
onReachBottom
|
|
} from '@dcloudio/uni-app';
|
|
//
|
|
import {
|
|
useStore
|
|
} from 'vuex'
|
|
//
|
|
import api from '@/api/index.js'
|
|
// 省市区联动
|
|
import regionSelection from '@/components/public/regionSelection/regionSelection.vue'
|
|
//
|
|
import util from '@/common/js/util.js'
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
const store = useStore()
|
|
// 列表
|
|
const list = reactive({
|
|
data: [],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
})
|
|
//收货地址主键
|
|
const formData = reactive({
|
|
id: '',
|
|
//用户id
|
|
uid: '',
|
|
//收货人姓名
|
|
name: '',
|
|
//收货人电话
|
|
mobile: '',
|
|
//是否默认地址
|
|
isDefault: true,
|
|
//省
|
|
province: '',
|
|
//市
|
|
city: '',
|
|
//区
|
|
country: '',
|
|
//详细地址
|
|
detail: '',
|
|
})
|
|
// 是否选择
|
|
const select = ref('')
|
|
// 已选的地址id
|
|
const selectAddressId = ref('')
|
|
// 用户信息
|
|
const userinfo = computed(() => store.state.userinfo)
|
|
|
|
onLoad((option) => {
|
|
// 是否选择
|
|
if (option.select) select.value = option.select
|
|
// 已选择的地址
|
|
if (option.addressId) selectAddressId.value = option.addressId
|
|
// 获取地址列表
|
|
getList()
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
// 重载收货地址
|
|
refreshList()
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
// 加载更多收货地址
|
|
getMoreList()
|
|
})
|
|
|
|
// 重载列表
|
|
function refreshList() {
|
|
list.pageNum = 1
|
|
getList()
|
|
}
|
|
|
|
// 加载更多列表
|
|
function getMoreList() {
|
|
if (list.data.length >= list.total) return
|
|
list.pageNum++
|
|
getList()
|
|
}
|
|
|
|
// 获取收货地址
|
|
function getList() {
|
|
// 获取收货地址
|
|
api.shop.getAddressList({
|
|
query: {
|
|
pageNum: list.pageNum,
|
|
pageSize: list.pageSize,
|
|
},
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
if (list.pageNum == 1) list.data.length = 0
|
|
list.data.push(...rs.rows)
|
|
list.total = rs.total
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
}).finally(() => {
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 选择地址
|
|
* @param {Object} item
|
|
*/
|
|
function handleChoose(item) {
|
|
if (select.value == 1) {
|
|
uni.$emit('selectAddress', item)
|
|
uni.navigateBack()
|
|
return
|
|
}
|
|
}
|
|
|
|
// 提交
|
|
function handleSubmit() {
|
|
//
|
|
const data = {
|
|
...formData
|
|
}
|
|
console.log('data', data)
|
|
|
|
// 验证必填项
|
|
if (!data.name) {
|
|
util.alert('收货人姓名不能为空')
|
|
return
|
|
}
|
|
if (!data.mobile) {
|
|
util.alert('收货人电话不能为空')
|
|
return
|
|
}
|
|
if (!data.province) {
|
|
util.alert('请选择省')
|
|
return
|
|
}
|
|
if (!data.detail) {
|
|
util.alert('详细地址不能为空')
|
|
return
|
|
}
|
|
|
|
// 用户id
|
|
data.uid = userinfo.value.id
|
|
|
|
//
|
|
api.shop.saveOrUpdate({
|
|
data,
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
uni.$emit('selectAddress', rs.data)
|
|
// 关闭弹窗
|
|
proxy.$refs.add.close()
|
|
// 重载收货地址
|
|
refreshList()
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 复制收货地址
|
|
* @param {Object} item
|
|
*/
|
|
function copyText(item) {
|
|
util.copyText(`${item.name} ${item.mobile} ${item.province}${item.city}${item.country} ${item.detail}`)
|
|
}
|
|
|
|
// 收货地址切换
|
|
function handleAddChange(ev) {
|
|
if (ev.show) return
|
|
|
|
formData.id = ''
|
|
//用户id
|
|
formData.uid = ''
|
|
//收货人姓名
|
|
formData.name = ''
|
|
//收货人电话
|
|
formData.mobile = ''
|
|
//是否默认地址
|
|
formData.isDefault = false
|
|
//省
|
|
formData.province = ''
|
|
//市
|
|
formData.city = ''
|
|
//区
|
|
formData.country = ''
|
|
//详细地址
|
|
formData.detail = ''
|
|
}
|
|
|
|
/**
|
|
* 设为默认
|
|
* @param {Object} item 点击的列表项
|
|
*/
|
|
function handleDefault(item) {
|
|
//
|
|
api.shop.saveOrUpdate({
|
|
data: {
|
|
id: item.id,
|
|
isDefault: true,
|
|
},
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
uni.$emit('selectAddress', item)
|
|
// 重载收货地址
|
|
refreshList()
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 更新收货地址信息
|
|
* @param {Object} item 点击的列表项
|
|
*/
|
|
function handleUpdate(item) {
|
|
//
|
|
formData.id = item.id
|
|
//用户id
|
|
formData.uid = item.uid
|
|
//收货人姓名
|
|
formData.name = item.name
|
|
//收货人电话
|
|
formData.mobile = item.mobile
|
|
//省
|
|
formData.province = item.province
|
|
//市
|
|
formData.city = item.city
|
|
//区
|
|
formData.country = item.country
|
|
//详细地址
|
|
formData.detail = item.detail
|
|
// 打开省市区弹窗
|
|
proxy.$refs.add.open()
|
|
}
|
|
|
|
/**
|
|
* 选择省市区
|
|
* @param {Object} ev 选择地区
|
|
*/
|
|
function handleRegion(ev) {
|
|
formData.province = ev.province.regionName
|
|
formData.city = ev.city.regionName
|
|
formData.country = ev.area.regionName
|
|
}
|
|
|
|
/**
|
|
* 删除收货地址
|
|
* @param {Object} item 点击的列表项
|
|
* @param {Object} index 点击的列表下标
|
|
*/
|
|
function handleRemove(item, index) {
|
|
util.alert({
|
|
title: '确认删除？',
|
|
content: '删除后不可恢复，确定删除该收货地址吗？',
|
|
success: (res) => {
|
|
if (!res.confirm) return
|
|
api.shop.removeAddressById({
|
|
query: {
|
|
id: item.id
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
list.data.splice(index, 1)
|
|
|
|
// 删除已选择的id
|
|
if (selectAddressId.value === item.id) {
|
|
uni.$emit('selectAddress', {})
|
|
return
|
|
}
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
<view class="listBox oh c333">
|
|
<view v-for="(item,index) in list.data" :key="item.id" class="item pr mb20 ptb20 plr20 bfff"
|
|
@click="handleChoose(item)" :class="{'active': item.isDefault}">
|
|
|
|
<view class="top-area f30 mtb10">
|
|
<text class="name">{{ item.name }}</text>
|
|
<text class="phone">{{ item.mobile }}</text>
|
|
</view>
|
|
|
|
<view class="address-text f30 mtb10">
|
|
<text>{{item.province}}</text>
|
|
<text>{{item.city}}</text>
|
|
<text>{{item.country}}</text>
|
|
<text>{{item.detail}}</text>
|
|
</view>
|
|
|
|
<view class="rows mt20 c999 f28">
|
|
<label class="rows" @click.stop="handleDefault(item)">
|
|
<uni-icons type="circle" color="#999" size="40rpx" v-if="!item.isDefault" />
|
|
<uni-icons type="checkbox-filled" color="#F8BA4D" size="40rpx" v-else />
|
|
<text class="ml10">设为默认</text>
|
|
</label>
|
|
|
|
<view class="btns df aic">
|
|
<view class="btn ti warmHollow plr10" @click.stop="copyText(item)">复制</view>
|
|
<view class="btn ti warmHollow plr10" @click.stop="handleUpdate(item)">修改</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="pa t0 r0 pt30 pr30" @click.stop="handleRemove(item,index)">
|
|
<uni-icons type="closeempty" color="#999" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fill" style="height: 210rpx;"></view>
|
|
|
|
<view class="footer plr30 shadow bfff">
|
|
<view class="btn lg primary" @click="$refs.add.open()">添加地址</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 新增收货地址 -->
|
|
<uni-popup ref="add" type="center" @change="handleAddChange">
|
|
<view class="addAddressAlt popMid bfff">
|
|
<view class="header rows ptb30 plr30">
|
|
<view class="c333 f30">收货地址</view>
|
|
<uni-icons type="closeempty" @click="$refs.add.close()" />
|
|
</view>
|
|
|
|
<view class="plr25">
|
|
<uni-forms :modelValue="formData" label-position="top">
|
|
<uni-forms-item label="收货人" name="name">
|
|
<input type="text" v-model="formData.name" placeholder="请输入收货人姓名"
|
|
placeholder-class="placeholderStyle" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="手机号" name="mobile">
|
|
<input type="text" v-model="formData.mobile" placeholder="请输入手机号"
|
|
placeholder-class="placeholderStyle" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="地区" name="areas">
|
|
<regionSelection :province="formData.province" :city="formData.city" :area="formData.country"
|
|
@change="handleRegion">
|
|
</regionSelection>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="详细地址" name="addressDetail">
|
|
<uni-easyinput type="textarea" autoHeight v-model="formData.detail"
|
|
placeholder="如街道，门牌号，小区，乡镇，村等"></uni-easyinput>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
|
|
<view class="btn primary mtb30 mlr30" @click="handleSubmit">保存</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
$text-color1: #333333;
|
|
$text-color2: #666;
|
|
|
|
.page-wrapper {
|
|
overflow-y: scroll;
|
|
height: calc(100vh - 200rpx - 110rpx);
|
|
|
|
.address-item {
|
|
position: relative;
|
|
|
|
.top-area {
|
|
font-size: 28rpx;
|
|
margin: 10rpx 0;
|
|
|
|
.name {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
text {
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.address-text {
|
|
padding: 0 0 15rpx 0;
|
|
width: 90vw;
|
|
color: $text-color1;
|
|
white-space: nowrap;
|
|
/* 禁止换行 */
|
|
overflow: hidden;
|
|
/* 隐藏溢出部分 */
|
|
text-overflow: ellipsis;
|
|
/* 使用省略号替代溢出部分 */
|
|
}
|
|
}
|
|
}
|
|
</style> |