You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
258 lines
6.2 KiB
258 lines
6.2 KiB
<template>
|
|
<view class="page">
|
|
<up-form ref="formRef" :model="form" :rules="rules" labelPosition="left" labelWidth="150rpx">
|
|
<view class="info">
|
|
<view class="info-header">地址信息</view>
|
|
<view class="info-content">
|
|
<up-form-item label="接单地址" prop="area">
|
|
<view plain class="flex-rowr" @click="selectAddr">
|
|
<text v-if="form.area">{{ form.area }}</text>
|
|
<text v-else class="placeholder">请定位选择小区或商城等</text>
|
|
<up-icon style="margin-left: 22rpx;" name="arrow-down" color="#7F7F7F"
|
|
size="21rpx"></up-icon>
|
|
</view>
|
|
</up-form-item>
|
|
<up-form-item label="接单地址" prop="address" labelPosition="top">
|
|
<view class="textarea">
|
|
<textarea v-model="form.address" placeholder="如街道、门牌号、小区、乡镇、村等" :row="3"></textarea>
|
|
</view>
|
|
</up-form-item>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info">
|
|
<view class="info-header">接单信息</view>
|
|
<view class="info-content">
|
|
<up-form-item label="接单状态" prop="status">
|
|
<view class="flex-rowr">
|
|
<switch :checked="!!form.status" @change="onSwitch" color="#FFBF60"
|
|
style="transform: scale(0.6);" />
|
|
<text>{{ !!form.status ? '开启' : '关闭' }}</text>
|
|
</view>
|
|
</up-form-item>
|
|
<up-form-item label="接单范围" prop="rangeNo">
|
|
<up-input v-model="form.rangeNo" placeholder="请输入内容" inputAlign="right" border="none">
|
|
<template #suffix>
|
|
<text>Km</text>
|
|
</template>
|
|
</up-input>
|
|
</up-form-item>
|
|
<up-form-item @click="toNoOrderDate"
|
|
v-if="eidtItem"
|
|
|
|
label="不接单日期(选填)" prop="disabledDate" labelWidth="300rpx">
|
|
<view class="" style="display: flex;width: 380rpx;">
|
|
<view class="text-ellipsis"
|
|
style="margin-left: auto;"
|
|
v-if="eidtItem.appletOutDate && eidtItem.appletOutDate.length">
|
|
{{ getDisabledDateDesc(eidtItem.appletOutDate) }}
|
|
</view>
|
|
|
|
<view class="text-ellipsis"
|
|
style="margin-left: auto;" v-else>
|
|
暂无不可接单日期
|
|
</view>
|
|
>
|
|
</view>
|
|
</up-form-item>
|
|
</view>
|
|
</view>
|
|
|
|
</up-form>
|
|
|
|
<view style="margin-top: 40rpx;">
|
|
<up-parse class="size-28" :content="configList.adress_statement.paramValueArea" containerStyle="{
|
|
color: '#707070',
|
|
fontSize: '22rpx',
|
|
lineHeight: '35rpx',
|
|
}"></up-parse>
|
|
</view>
|
|
|
|
<view class="footer-btn">
|
|
<view class="btn" @click="onSave">
|
|
{{ eidtItem ? '修改地址' : '新增地址'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
getCurrentInstance,
|
|
computed,
|
|
} from 'vue'
|
|
import dayjs from 'dayjs'
|
|
import {
|
|
store
|
|
} from '@/store'
|
|
import {
|
|
insertAddress,
|
|
udpateAddress,
|
|
addressDetail,
|
|
} from "@/api/address/address.js"
|
|
import {
|
|
onLoad,
|
|
onShow
|
|
} from '@dcloudio/uni-app'
|
|
|
|
const instance = getCurrentInstance();
|
|
const configList = store.state.system.configList
|
|
|
|
const formRef = ref()
|
|
const form = ref({
|
|
area: null,
|
|
latitude: null,
|
|
longitude: null,
|
|
address: null,
|
|
status: true,
|
|
distance: null,
|
|
disabledDate: [],
|
|
})
|
|
|
|
const userInfo = computed(() => {
|
|
return store.getters.userInfo;
|
|
})
|
|
|
|
const rules = ref({})
|
|
const eidtItem = ref(null);
|
|
const addressId = ref(0)
|
|
|
|
onLoad((options) => {
|
|
addressId.value = options.addressId
|
|
|
|
// eidtItem.value = options?.item ? JSON.parse(options.item) : null;
|
|
// form.value = {
|
|
// id: eidtItem?.value?.id || null,
|
|
// area: eidtItem?.value?.area || null,
|
|
// address: eidtItem?.value?.address || null,
|
|
// status: eidtItem?.value?.status == 'true' || null,
|
|
// latitude: eidtItem?.value?.latitude || null,
|
|
// longitude: eidtItem?.value?.longitude || null
|
|
// }
|
|
});
|
|
onShow(() => {
|
|
getDetail()
|
|
})
|
|
|
|
const setAddress = (res) => {
|
|
form.value.latitude = res.latitude
|
|
form.value.longitude = res.longitude
|
|
|
|
if (!res.address && res.name) { //用户直接选择城市的逻辑
|
|
return form.value.area = res.name
|
|
}
|
|
if (res.address || res.name) {
|
|
return form.value.area = res.address + res.name
|
|
}
|
|
form.value.area = '' //用户啥都没选就点击勾选
|
|
}
|
|
|
|
const selectAddr = () => {
|
|
uni.chooseLocation({
|
|
success: function(res) {
|
|
setAddress(res)
|
|
},
|
|
fail(e) {
|
|
console.log("获取位置信息失败!", e)
|
|
}
|
|
})
|
|
}
|
|
|
|
const onSwitch = (e) => {
|
|
form.value.status = e.detail.value
|
|
}
|
|
|
|
const onSave = async () => {
|
|
let code = null;
|
|
if (eidtItem?.value?.id) {
|
|
let result = await udpateAddress({
|
|
...form.value,
|
|
userId : userInfo.value.userId,
|
|
})
|
|
code = result.code
|
|
} else {
|
|
// 新增地址
|
|
let result = await insertAddress({
|
|
...form.value,
|
|
userId : userInfo.value.userId,
|
|
})
|
|
code = result.code
|
|
}
|
|
if (code == 200) {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
|
|
function getDetail(){
|
|
addressDetail(addressId.value).
|
|
then(res => {
|
|
console.log(res.data);
|
|
eidtItem.value = res.data
|
|
form.value = {
|
|
id: eidtItem?.value?.id || null,
|
|
area: eidtItem?.value?.area || null,
|
|
address: eidtItem?.value?.address || null,
|
|
status: eidtItem?.value?.status == 'true' || null,
|
|
latitude: eidtItem?.value?.latitude || null,
|
|
longitude: eidtItem?.value?.longitude || null
|
|
}
|
|
})
|
|
}
|
|
|
|
const getDisabledDateDesc = (dateArr) => {
|
|
if (!dateArr?.length) {
|
|
return '暂无不可接单日期'
|
|
}
|
|
|
|
return dateArr.map(date => dayjs(date.date).format('MM-DD')).join('、')
|
|
}
|
|
|
|
const toNoOrderDate = () => {
|
|
if (eidtItem?.value?.id) {
|
|
uni.navigateTo({
|
|
url: `/otherPages/myOrdersManage/date/detail?addressId=${eidtItem.value.id}`
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
padding: 35rpx 37rpx 144rpx 37rpx;
|
|
min-height: calc(100vh - 200rpx);
|
|
background-color: #fff;
|
|
}
|
|
|
|
.info {
|
|
color: #707070;
|
|
font-size: 30rpx;
|
|
line-height: 40rpx;
|
|
|
|
&-header {
|
|
color: #000000;
|
|
}
|
|
|
|
.placeholder {
|
|
color: #707070;
|
|
}
|
|
|
|
.textarea {
|
|
margin-top: 16rpx;
|
|
background-color: #F3F3F3;
|
|
padding: 26rpx 8rpx;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
:deep(.u-form-item__body__left__content__label) {
|
|
color: #707070;
|
|
}
|
|
}
|
|
.text-ellipsis {
|
|
text-align: right;
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
width: 330rpx;
|
|
}
|
|
</style>
|