308 lines
7.4 KiB
Vue
308 lines
7.4 KiB
Vue
<template>
|
|
<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
|
|
<view class="flex-col group">
|
|
<view class="flex-col self-stretch section mt-15">
|
|
<view class="flex-row items-center group_2">
|
|
<text class="font_2">收货人</text>
|
|
<input class="text-wrapper ml-27" v-model="addressParam.name" placeholder="请输入姓名" />
|
|
</view>
|
|
<view class="flex-row items-center group_3">
|
|
<text class="font_2 text_3">手机号码</text>
|
|
<input class="text-wrapper_2 ml-12" v-model="addressParam.phone" placeholder="请输入手机号码" />
|
|
</view>
|
|
<view class="flex-row items-center group_4">
|
|
<text class="font_2 text_5">所在地区</text>
|
|
<view class="flex-col justify-start flex-1 relative group_5 ml-13">
|
|
<picker mode="region" @change="bindTimeChange" style="width: 400rpx;">
|
|
<input
|
|
border="bottom"
|
|
placeholder="请选择省市区"
|
|
type="text" v-model="addressParam.region"
|
|
:disabled="true"/>
|
|
</picker>
|
|
<image
|
|
class="pos tag"
|
|
:src="shoppingCartUrl + '/newaddress_info/dw.png'"
|
|
@click="chooseLocation()"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row items-center group_6">
|
|
<text class="font_2 text_7">详细地址</text>
|
|
<textarea class="section_2 ml-12" v-model="addressParam.detailAddress" placeholder="输入详细地址" auto-height="true"/>
|
|
</view>
|
|
<view class="flex-row justify-between items-center group_7">
|
|
<radio-group @change="defaultAddress">
|
|
<text class="font_2" style="margin-right: 400rpx;">设为默认收货地址</text>
|
|
<!-- <image
|
|
class="image_2"
|
|
:src="selected"
|
|
/> -->
|
|
<radio @click="changeState" class="radius" color="#C35C5D" value="1" :checked="isSelected"/>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col justify-start items-center section_3 mt-462">
|
|
<view class="flex-col justify-start items-center text-wrapper_4" @click="newAddress"><text class="text_8">保存并使用</text></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref , onMounted, onUnmounted} from 'vue'
|
|
import { testUrl , baseUrl , suiUrl } from '../../../api/request';
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
import { getFonts } from '../../../common/globalFont';
|
|
import { shoppingCartUrl } from '../../../common/globalImagesUrl';
|
|
import emitter from '../../../utils/emitter';
|
|
const bkgUrl = ref(shoppingCartUrl + '/newaddress_info/bkg.png')
|
|
const isSelected = ref(false)
|
|
const addressParam = ref({
|
|
name: "",
|
|
phone: "",
|
|
region: "",
|
|
detailAddress: "",
|
|
isDefault: 0
|
|
})
|
|
const isAdd = ref(false)
|
|
|
|
const changeState = () => {
|
|
isSelected.value = !isSelected.value
|
|
addressParam.value.isDefault = isSelected.value ? 1 : 0
|
|
}
|
|
//接受编辑按钮传来的地址信息
|
|
onLoad((options)=>{
|
|
getFonts()
|
|
if(JSON.stringify(options) != '{}') {
|
|
addressParam.value = JSON.parse(options.editInfo) //将原来的地址信息赋值给原来的addressParam
|
|
isSelected.value = addressParam.value.isDefault == 1
|
|
} else {
|
|
isAdd.value = true
|
|
}
|
|
// console.log(options);
|
|
})
|
|
|
|
const regionHandler = (val) => {
|
|
addressParam.value.region = val
|
|
}
|
|
|
|
onMounted(()=>{
|
|
emitter.on('region', regionHandler)
|
|
if(!isAdd.value) emitter.emit('addRegion', addressParam.value.region)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
emitter.off('region', regionHandler)
|
|
})
|
|
|
|
//勾选默认地址的选项
|
|
const defaultAddress =(event)=>{
|
|
event.detail.value[0] ? addressParam.value.isDefault = 1 : addressParam.value.isDefault = 0
|
|
}
|
|
//发送添加新增地址的请求
|
|
const newAddress = async () =>{
|
|
const values = Object.values(addressParam.value);
|
|
// 使用some()方法来检查是否有任何值为空
|
|
if (values.some(value => value === null || value === undefined || value === '')) {
|
|
await uni.showToast({
|
|
icon: 'error',
|
|
title: "字段不能为空"
|
|
})
|
|
return;
|
|
}
|
|
console.log(addressParam.value);
|
|
if(addressParam.value.id != undefined) {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/address/update',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
},
|
|
data: { ...addressParam.value }
|
|
})
|
|
console.log('res1==>',res.data);
|
|
sucRes(res.data.code)
|
|
} else {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/address/add',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
},
|
|
data: {...addressParam.value}
|
|
})
|
|
console.log('res2==>',res.data);
|
|
sucRes(res.data.code)
|
|
}
|
|
}
|
|
const sucRes =(res)=>{ //请求成功执行的方法
|
|
if(res === 1) {
|
|
emitter.emit('updateAddressList')
|
|
uni.navigateBack({ //返回上一页
|
|
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '新增地址失败'
|
|
})
|
|
return;
|
|
}
|
|
}
|
|
const chooseLocation = () => { //定位获取地址
|
|
uni.chooseLocation({
|
|
success: (res) => {
|
|
// console.log('详细地址:' + res.address);
|
|
// console.log('位置名称:' + res.name);
|
|
addressParam.value.region = res.address
|
|
addressParam.value.detailAddress = res.name
|
|
}
|
|
})
|
|
}
|
|
const bindTimeChange = (e) => { //picker省市区选择
|
|
addressParam.value.region = e.detail.value[0] + e.detail.value[1] + e.detail.value[2]
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mt-15 {
|
|
margin-top: 28.13rpx;
|
|
}
|
|
.ml-27 {
|
|
margin-left: 50.63rpx;
|
|
}
|
|
.ml-13 {
|
|
margin-left: 24.38rpx;
|
|
}
|
|
.mt-462 {
|
|
margin-top: 866.25rpx;
|
|
}
|
|
.page {
|
|
padding-top: 26.44rpx;
|
|
// background-color: #fffaf0;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
.group {
|
|
padding: 0 23.4rpx;
|
|
}
|
|
.font_2 {
|
|
font-size: 26.25rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 24.34rpx;
|
|
color: #323232;
|
|
}
|
|
.text {
|
|
line-height: 24.49rpx;
|
|
}
|
|
.section {
|
|
margin-left: 2.85rpx;
|
|
margin-right: 14.1rpx;
|
|
padding: 10rpx 15.13rpx 10rpx 20.49rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 9.38rpx;
|
|
}
|
|
.group_2 {
|
|
padding: 14.24rpx 4.65rpx 12.19rpx;
|
|
border-bottom: solid 1.88rpx #efefef;
|
|
}
|
|
.text-wrapper {
|
|
flex: 1 1 0;
|
|
margin-right: 29.1rpx;
|
|
}
|
|
.group_3 {
|
|
padding: 14.06rpx 5.04rpx 12.19rpx;
|
|
border-bottom: solid 1.88rpx #efefef;
|
|
}
|
|
.text_3 {
|
|
line-height: 24.17rpx;
|
|
}
|
|
.text-wrapper_2 {
|
|
flex: 1 1 0;
|
|
margin-right: 28.71rpx;
|
|
}
|
|
.group_4 {
|
|
padding: 14.06rpx 5.04rpx 12.19rpx;
|
|
border-bottom: solid 1.88rpx #efefef;
|
|
}
|
|
.text_5 {
|
|
line-height: 24.21rpx;
|
|
}
|
|
.group_5 {
|
|
margin-right: 12.58rpx;
|
|
}
|
|
.text-wrapper_3 {
|
|
margin-right: 16.88rpx;
|
|
}
|
|
.image {
|
|
width: 48.75rpx;
|
|
height: 48.75rpx;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.group_6 {
|
|
padding: 14.06rpx 4.8rpx 8.44rpx;
|
|
border-bottom: solid 1.88rpx #efefef;
|
|
}
|
|
.text_7 {
|
|
line-height: 24.26rpx;
|
|
}
|
|
.section_2 {
|
|
width: 300rpx;
|
|
// height: 45rpx;
|
|
flex: 1 1 0;
|
|
margin-right: 19.57rpx;
|
|
}
|
|
.group_7 {
|
|
padding: 14.06rpx 5.04rpx 12.19rpx;
|
|
}
|
|
.image_2 {
|
|
margin-right: 19.5rpx;
|
|
width: 33.75rpx;
|
|
height: 33.75rpx;
|
|
}
|
|
.section_3 {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
// margin-right: 13.13rpx;
|
|
padding: 16.88rpx 0;
|
|
background-color: #fffef8;
|
|
}
|
|
.text-wrapper_4 {
|
|
padding: 27.24rpx 0 23.61rpx;
|
|
background-color: #FBDEDF;
|
|
border-radius: 46.88rpx;
|
|
width: 618.75rpx;
|
|
}
|
|
.text_8 {
|
|
color: #C35C5D;
|
|
font-size: 30rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 27.9rpx;
|
|
}
|
|
.zujian{ //地址组件样式
|
|
height: 100rpx;
|
|
width: 450rpx;
|
|
margin-left: 50rpx;
|
|
}
|
|
.tag {
|
|
width: 55.75rpx;
|
|
height: 55.75rpx;
|
|
}
|
|
.radius {
|
|
transform: scale(0.7);
|
|
width: 37.5rpx;
|
|
height: 37.5rpx;
|
|
}
|
|
@import url(../../../common/css/global.css);
|
|
</style> |