update

src/business/user/address.ts

@@ -1,4 +1,4 @@
-import { shallowRef, reactive } from 'vue'
+import { shallowRef, reactive, computed } from 'vue'
 import { useDataTable } from '@/hooks/datatable'
 import { useLoginStore } from '@/stores'
 import { queryUserReceiveInfo, userReceiveInfo, delUserReceiveInfo, userReceiveIsDefault } from '@/services/api/user'
@@ -68,6 +68,15 @@ export function useAddressForm(selectedRow?: Model.UserReceiveInfoRsp) {
         } = selectedRow)
     }
 
+    // 地区名称
+    const regionName = computed(() => {
+        const { provincename, cityname, districtname } = selectedRow ?? {}
+        if (provincename || cityname || districtname) {
+            return [provincename, cityname, districtname].join(' ')
+        }
+        return ''
+    })
+
     const addOrUpdate = () => {
         loading.value = true
         return userReceiveInfo({
@@ -106,6 +115,7 @@ export function useAddressForm(selectedRow?: Model.UserReceiveInfoRsp) {
     return {
         loading,
         formData,
+        regionName,
         addOrUpdate,
         deleteAddress,
         updateAddressIsDefault,

src/hooks/component/index.ts

@@ -1,10 +1,14 @@
 import { ref } from 'vue'
+//import { v4 } from 'uuid'
+
+//const componentMap = new Map()
 
 /**
  * @param callback 组件关闭时的回调
  * @returns 
  */
 export function useComponent(callback?: (componentName?: string) => void) {
+    //const uuid = v4()
     const components = new Set<string>() // 已打开的组件列表
     const componentId = ref<string>() // 当前显示的组件
     const componentRef = ref() // 组件实例

src/packages/mobile/components/base/region/index.less

@@ -4,7 +4,10 @@
     align-items: center;
 
     &__input {
-        flex : 1;
+        flex: 1;
+    }
+
+    input {
         width: 100%;
     }
 }

src/packages/mobile/components/base/region/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="app-region" @click="show = true">
-        <slot :value="inputValue">
+        <slot :label="inputValue">
             <input class="app-region__input" v-model="inputValue" :placeholder="placeholder" readonly />
         </slot>
         <Popup v-model:show="show" position="bottom" teleport="body" round>
@@ -20,13 +20,12 @@ const props = defineProps({
         type: [String, Number],
         default: 0
     },
-    title: {
+    label: {
         type: String,
-        default: '请选择地区'
     },
-    label: {
+    title: {
         type: String,
-        default: '收货地区'
+        default: '请选择地区'
     },
     placeholder: {
         type: String,
@@ -36,7 +35,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change', 'finish'])
 const show = shallowRef(false) // 是否弹出选择器
-const inputValue = shallowRef('')
+const inputValue = shallowRef(props.label)
 const options = shallowRef<CascaderOption[]>([])
 
 // 选中的值

src/packages/mobile/views/goods/details/components/address/index.less

@@ -0,0 +1,10 @@
+.goods-details-address {
+    &__form {
+        .van-cell-group__title {
+            display        : flex;
+            justify-content: space-between;
+            align-items    : center;
+            padding        : 16px 32px 8px 32px;
+        }
+    }
+}

src/packages/mobile/views/goods/details/components/address/index.vue

@@ -4,16 +4,30 @@
             <template #header>
                 <app-navbar :title="formItem.THJDeliveryMode === 2 ? '自提信息' : '代办运输信息'" @back="closed" />
             </template>
-            <Form ref="formRef" class="g-form__container" @submit="onSubmit">
-                <CellGroup title="联系信息" inset>
+            <Form ref="formRef" class="goods-details-address__form g-form__container" @submit="onSubmit">
+                <CellGroup inset>
+                    <template #title>
+                        <span>联系信息</span>
+                        <span @click="showContact = true" style="color: #333;">
+                            <Icon name="add-o" />
+                            添加联系信息
+                        </span>
+                    </template>
                     <Field v-model="formItem.ContactName" name="username" label="联系人" placeholder="必填"
                         :rules="formRules.ContactName" />
                     <Field v-model="formItem.ContactInfo" name="username" label="联系方式" placeholder="必填"
                         :rules="formRules.ContactInfo" />
-                    <Field v-model="formItem.DesAddress" name="username" label="目的地地址" placeholder="必填"
+                    <Field v-model="formItem.DesAddress" type="textarea" name="username" label="目的地地址" placeholder="必填"
                         :rules="formRules.DesAddress" v-if="formItem.THJDeliveryMode === 3" />
                 </CellGroup>
-                <CellGroup title="发票信息" inset>
+                <CellGroup inset>
+                    <template #title>
+                        <span>发票信息</span>
+                        <span style="color: #333;">
+                            <Icon name="add-o" />
+                            添加发票信息
+                        </span>
+                    </template>
                     <Field v-model="formItem.ReceiptInfo" type="textarea" name="username" label="发票信息" rows="3"
                         placeholder="选填" :rules="formRules.ReceiptInfo" />
                 </CellGroup>
@@ -24,13 +38,15 @@
                 </div>
             </template>
         </app-view>
+        <app-contact v-model:show="showContact" @change="contactChange" />
     </app-modal>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef, reactive, PropType } from 'vue'
-import { CellGroup, Button, Field, Form, FormInstance, FieldRule } from 'vant'
+import { CellGroup, Button, Field, Form, FormInstance, FieldRule, Icon } from 'vant'
 import AppModal from '@/components/base/modal/index.vue'
+import AppContact from '../contact/index.vue'
 
 const props = defineProps({
     formData: {
@@ -42,6 +58,7 @@ const props = defineProps({
 const emit = defineEmits(['updated'])
 const formRef = shallowRef<FormInstance>()
 const showModal = shallowRef(true)
+const showContact = shallowRef(false) // 显示联系人选择列表
 const formItem = reactive({ ...props.formData })
 
 // 表单验证规则
@@ -60,6 +77,18 @@ const formRules: { [key in keyof Proto.SpotPresaleDestingOrderReq]?: FieldRule[]
     }],
 }
 
+// 选择联系信息
+const contactChange = (item: Model.UserReceiveInfoRsp) => {
+    formItem.ContactName = item.receivername
+    formItem.ContactInfo = item.phonenum
+
+    if (formItem.THJDeliveryMode === 3) {
+        formItem.DesAddress = [item.provincename, item.cityname, item.districtname, item.address].join(' ')
+    } else {
+        formItem.DesAddress = ''
+    }
+}
+
 const onSubmit = () => {
     emit('updated', formItem)
     closed()
@@ -67,11 +96,19 @@ const onSubmit = () => {
 
 // 关闭弹窗
 const closed = () => {
-    showModal.value = false
+    if (showContact.value) {
+        showContact.value = false
+    } else {
+        showModal.value = false
+    }
 }
 
 // 暴露组件属性给父组件调用
 defineExpose({
     closed,
 })
-</script>
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/mobile/views/goods/details/components/contact/index.vue

@@ -0,0 +1,30 @@
+<template>
+    <app-modal class="goods-details-address" direction="right" height="100%" v-model:show="showModal">
+        <app-address :show-radio="true" @change="onChange" />
+    </app-modal>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import AppModal from '@/components/base/modal/index.vue'
+import AppAddress from '@mobile/views/mine/address/index.vue'
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['update:show', 'change'])
+
+const showModal = computed({
+    get: () => props.show,
+    set: (val) => emit('update:show', val)
+})
+
+const onChange = (item: Model.UserReceiveInfoRsp) => {
+    showModal.value = false
+    emit('change', item)
+}
+</script>

src/packages/mobile/views/goods/details/index.vue

@@ -31,7 +31,7 @@
                             <div class="form-qty__input">
                                 <input type="number" v-model="formData.Qty" placeholder="必填" />
                                 <span v-if="selectedDate">≤{{ selectedDate.remainqty }}{{
-                                getGoodsUnitName(goodsinfo.unitid)
+                                        getGoodsUnitName(goodsinfo.unitid)
                                 }}</span>
                             </div>
                             <div class="form-qty__label">
@@ -235,7 +235,6 @@ const onMonthChange = (value: string) => {
     deliveryDays.value = months.filter((e) => e.endmonth === value) // 重新过滤交割日期列表
     selectedDate.value = undefined // 清除选中的交割日期
     formData.value.PresaleApplyID = undefined
-    formRef.value?.validate('PresaleApplyID')
 }
 
 // 切换交割日期

src/packages/mobile/views/mine/address/components/edit/index.vue

@@ -1,8 +1,8 @@
 <template>
-    <app-modal class="main-address-edit" direction="right" height="100%" v-model:show="showModal">
+    <app-modal class="main-address-edit" direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
         <app-view class="g-form" style="">
             <template #header>
-                <app-navbar title="新增收货地址" />
+                <app-navbar :title="selectedRow.autoid ? '修改收货地址' : '新增收货地址'" @back="closed" />
             </template>
             <Form ref="formRef" class="g-form__container" @submit="formSubmit">
                 <CellGroup inset>
@@ -12,7 +12,7 @@
                         label="联系电话" placeholder="必填" />
                     <Field :rules="formRules.Region" name="Region" label="收货地区" placeholder="请选择" is-link>
                         <template #input>
-                            <app-region v-model="formData.DistrictID" @finish="onRegionFinish" />
+                            <app-region v-model="formData.DistrictID" :label="regionName" @finish="onRegionFinish" />
                         </template>
                     </Field>
                     <Field v-model="formData.Address" :rules="formRules.Address" name="Address" label="详细地址"
@@ -21,7 +21,8 @@
             </Form>
             <template #footer>
                 <div class="g-form__footer">
-                    <Button type="primary" @click="formRef?.submit" round block>确定</Button>
+                    <Button type="warning" @click="formDelete" round block v-if="selectedRow.autoid">删除</Button>
+                    <Button type="primary" @click="formRef?.submit" round block>保存</Button>
                 </div>
             </template>
         </app-view>
@@ -31,9 +32,8 @@
 <script lang="ts" setup>
 import { shallowRef, PropType } from 'vue'
 import { CellGroup, Button, Field, Form, FormInstance, Toast, FieldRule } from 'vant'
-import { fullloading } from '@/utils/vant'
+import { fullloading, dialog } from '@/utils/vant'
 import { validateRules } from '@/constants/regex'
-import { useNavigation } from '@/hooks/navigation'
 import { useAddressForm } from '@/business/user'
 import AppModal from '@/components/base/modal/index.vue'
 import AppRegion from '@mobile/components/base/region/index.vue'
@@ -45,10 +45,10 @@ const props = defineProps({
     }
 })
 
-const { router } = useNavigation()
-const { formData, addOrUpdate } = useAddressForm(props.selectedRow)
+const { formData, regionName, addOrUpdate, deleteAddress } = useAddressForm(props.selectedRow)
 const formRef = shallowRef<FormInstance>()
 const showModal = shallowRef(true)
+const refresh = shallowRef(false) // 是否刷新父组件数据
 
 // 表单验证规则
 const formRules: { [key in keyof Proto.UserReceiveInfoReq | 'Region']?: FieldRule[] } = {
@@ -91,15 +91,32 @@ const formSubmit = () => {
     fullloading((hideLoading) => {
         addOrUpdate().then(() => {
             hideLoading()
-            router.back()
+            closed(true)
         }).catch((err) => {
             Toast.fail(err)
         })
     })
 }
 
+// 删除地址
+const formDelete = () => {
+    dialog('是否删除该收货地址？', {
+        showCancelButton: true
+    }).then(() => {
+        fullloading((hideLoading) => {
+            deleteAddress().then(() => {
+                hideLoading()
+                closed(true)
+            }).catch((err) => {
+                Toast.fail(err)
+            })
+        })
+    })
+}
+
 // 关闭弹窗
-const closed = () => {
+const closed = (isRefresh = false) => {
+    refresh.value = isRefresh
     showModal.value = false
 }
 

src/packages/mobile/views/mine/address/index.less

@@ -1 +1,46 @@
-.mine-address {}
+.mine-address {
+    &__container {
+        padding: .32rem;
+
+        .list {
+            &-item {
+                display         : flex;
+                align-items     : center;
+                background-color: #fff;
+                border-radius   : 8px;
+                overflow        : hidden;
+                padding         : .24rem;
+
+                &:not(:first-child) {
+                    margin-top: .2rem;
+                }
+
+                &__checkbox {
+                    margin-right: .24rem;
+                }
+
+                &__info {
+                    flex: 1;
+
+                    &-name {
+                        margin-bottom: .12rem;
+                    }
+
+                    &-address {
+                        font-size: .28rem;
+                    }
+
+                    span {
+                        margin-right: .12rem;
+                    }
+                }
+
+                &__button {
+                    .van-icon {
+                        font-size: .36rem;
+                    }
+                }
+            }
+        }
+    }
+}

src/packages/mobile/views/mine/address/index.vue

@@ -3,35 +3,43 @@
         <template #header>
             <app-navbar title="收货地址管理" />
         </template>
-        <div class="mine-address__container">
+        <RadioGroup class="mine-address__container" v-model="selectedRow" v-if="dataList.length">
             <ul class="list">
                 <li class="list-item" v-for="(item, index) in dataList" :key="index">
-                    <div class="list-item__">
-                        <Checkbox v-model="item.isdefault" />
+                    <div class="list-item__checkbox" @click="onChange(item)" v-if="showRadio">
+                        <Radio :name="item" checked-color="#ee0a24" />
                     </div>
-                    <div class="list-item__">
-                        <div>{{ item.receivername }}</div>
-                        <div>{{ [item.provincename, item.cityname, item.districtname, item.address].join(' ') }}</div>
+                    <div class="list-item__info" @click="onChange(item)">
+                        <div class="list-item__info-name">
+                            <span>{{ item.receivername }}</span>
+                            <span>{{ item.phonenum }}</span>
+                            <Tag type="danger" round v-if="item.isdefault" />
+                        </div>
+                        <div class="list-item__info-address">
+                            <span>{{ [item.provincename, item.cityname, item.districtname, item.address].join(' ')
+                            }}</span>
+                        </div>
                     </div>
-                    <div class="list-item__">
+                    <div class="list-item__button">
                         <Button icon="edit" @click="onEdit(item)" />
                     </div>
                 </li>
             </ul>
-        </div>
+        </RadioGroup>
+        <Empty v-else />
         <template #footer>
             <div class="g-form__footer">
                 <Button type="primary" @click="onEdit" round block>新增地址</Button>
             </div>
-            <component ref="componentRef" v-bind="{selectedRow}" :is="componentMap.get(componentId)"
+            <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
                 @closed="closeComponent" v-if="componentId" />
         </template>
     </app-view>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, defineAsyncComponent } from 'vue'
-import { Checkbox, Button } from 'vant'
+import { shallowRef, defineAsyncComponent, PropType } from 'vue'
+import { RadioGroup, Radio, Button, Tag, Empty } from 'vant'
 import { useNavigation } from '@/hooks/navigation'
 import { useComponent } from '@/hooks/component'
 import { useAddress } from '@/business/user'
@@ -40,10 +48,28 @@ const componentMap = new Map<string, unknown>([
     ['edit', defineAsyncComponent(() => import('./components/edit/index.vue'))],
 ])
 
+const props = defineProps({
+    // 是否显示单选按钮
+    showRadio: {
+        type: Boolean,
+        default: false
+    },
+    checked: {
+        type: Object as PropType<Model.UserReceiveInfoRsp>,
+    }
+})
+
+const emit = defineEmits(['change'])
 const { beforeRouteLeave } = useNavigation()
 const { dataList, getUserAddressList } = useAddress()
 const { componentRef, componentId, openComponent, closeComponent, closeComponentEach } = useComponent(getUserAddressList)
-const selectedRow = shallowRef<Model.UserReceiveInfoRsp>()
+const selectedRow = shallowRef(props.checked)
+
+// 选择地址
+const onChange = (item: Model.UserReceiveInfoRsp) => {
+    selectedRow.value = item
+    emit('change', item)
+}
 
 const onEdit = (item?: Model.UserReceiveInfoRsp) => {
     selectedRow.value = item

src/packages/mobile/views/mine/order/list/index.less

@@ -6,6 +6,7 @@
 
         &__content {
             flex       : 1;
+            overflow-y : auto;
             padding-top: .2rem;
         }
 

src/packages/mobile/views/mine/wareorder/list/index.less

@@ -6,6 +6,7 @@
 
         &__content {
             flex       : 1;
+            overflow-y : auto;
             padding-top: .2rem;
         }
 

vue.config.js

@@ -15,7 +15,7 @@ module.exports = defineConfig({
       filename: 'index.html',
       title: process.env.VUE_APP_TITLE,
       meta: {
-        revised: moment(new Date()).format('v3.0.YYYYMMDDHHmmss')  // 打包生成版本号
+        revised: moment(new Date()).format('YYYYMMDDHHmmss')  // 打包生成版本号
       }
     }
   },