|
|
<template>
|
|
|
<LayoutApp :title="title" :show-back="true">
|
|
|
<div class="pane-body">
|
|
|
<FormItem>
|
|
|
<CInput
|
|
|
label="收货人"
|
|
|
place-holder="请写姓名"
|
|
|
v-model="model.consignee"
|
|
|
:textValue="model.consignee"
|
|
|
type="text"
|
|
|
></CInput>
|
|
|
</FormItem>
|
|
|
<FormItem>
|
|
|
<CInput label="手机号" place-holder="请填写手机号" v-model="model.mobile" :textValue="model.mobile"></CInput>
|
|
|
</FormItem>
|
|
|
|
|
|
<template>
|
|
|
<Scroll ref="scroll" :options="scrollOpts">
|
|
|
<div class="pane-body">
|
|
|
<FormItem>
|
|
|
<div class="wrapper-area">
|
|
|
<label class="input-label">所在区域</label>
|
|
|
<div class="wrapper-arrow" @click="chooseArea">
|
|
|
<template v-if="model.area">
|
|
|
<label class="text-label">{{ model.area }}</label>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<label class="choose-area">请选择</label>
|
|
|
</template>
|
|
|
<div class="arrow"></div>
|
|
|
<CInput
|
|
|
label="收货人"
|
|
|
place-holder="请写姓名"
|
|
|
v-model="model.consignee"
|
|
|
:textValue="model.consignee"
|
|
|
type="text"
|
|
|
></CInput>
|
|
|
</FormItem>
|
|
|
<FormItem>
|
|
|
<CInput
|
|
|
label="手机号"
|
|
|
place-holder="请填写手机号"
|
|
|
v-model="model.mobile"
|
|
|
:textValue="model.mobile"
|
|
|
></CInput>
|
|
|
</FormItem>
|
|
|
|
|
|
<template>
|
|
|
<FormItem>
|
|
|
<div class="wrapper-area">
|
|
|
<label class="input-label">所在区域</label>
|
|
|
<div class="wrapper-arrow" @click="chooseArea">
|
|
|
<template v-if="model.area">
|
|
|
<label class="text-label">{{ model.area }}</label>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<label class="choose-area">请选择</label>
|
|
|
</template>
|
|
|
<div class="arrow"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</FormItem>
|
|
|
</template>
|
|
|
|
|
|
<FormItem>
|
|
|
<CInput
|
|
|
label="详细地址"
|
|
|
place-holder="请输入详细地址"
|
|
|
v-model="model.address"
|
|
|
:textValue="model.address"
|
|
|
></CInput>
|
|
|
</FormItem>
|
|
|
</template>
|
|
|
|
|
|
<FormItem>
|
|
|
<CInput
|
|
|
label="详细地址"
|
|
|
place-holder="请输入详细地址"
|
|
|
v-model="model.address"
|
|
|
:textValue="model.address"
|
|
|
></CInput>
|
|
|
</FormItem>
|
|
|
<!-- 订单修改地址隐藏 -->
|
|
|
<div v-if="!orderCode" class="wrapper-tag">
|
|
|
<p class="tag-text">设置标签:</p>
|
|
|
<RadioGroup class="wrapper-radio">
|
|
|
<div v-for="(tag, index) in addressTags" :key="index">
|
|
|
<Radio
|
|
|
class="tag-radio"
|
|
|
:label="{ text: `${tag.name}`, value: `${tag.code}` }"
|
|
|
v-model="model.tag_code"
|
|
|
checked="tag.code === model.tag_code"
|
|
|
></Radio>
|
|
|
</div>
|
|
|
</RadioGroup>
|
|
|
</div>
|
|
|
<!-- 订单修改地址隐藏 -->
|
|
|
<div v-if="!orderCode" class="wrapper-del">
|
|
|
<Radio
|
|
|
class="radio"
|
|
|
:label="{ text: '设为默认地址', value: true }"
|
|
|
style="flex: 0 1 100%;"
|
|
|
checked="model.is_default"
|
|
|
v-model="model.is_default"
|
|
|
></Radio>
|
|
|
<div v-if="isUpdate" class="del-address" @click="delAddress">删除地址</div>
|
|
|
<!-- 订单修改地址隐藏 -->
|
|
|
<div v-if="!orderCode" class="wrapper-tag">
|
|
|
<p class="tag-text">设置标签:</p>
|
|
|
<RadioGroup class="wrapper-radio">
|
|
|
<div v-for="(tag, index) in addressTags" :key="index">
|
|
|
<Radio
|
|
|
class="tag-radio"
|
|
|
:label="{ text: `${tag.name}`, value: `${tag.code}` }"
|
|
|
v-model="model.tag_code"
|
|
|
checked="tag.code === model.tag_code"
|
|
|
></Radio>
|
|
|
</div>
|
|
|
</RadioGroup>
|
|
|
</div>
|
|
|
<!-- 订单修改地址隐藏 -->
|
|
|
<div v-if="!orderCode" class="wrapper-del">
|
|
|
<Radio
|
|
|
class="radio"
|
|
|
:label="{ text: '设为默认地址', value: true }"
|
|
|
style="flex: 0 1 100%;"
|
|
|
checked="model.is_default"
|
|
|
v-model="model.is_default"
|
|
|
></Radio>
|
|
|
<div v-if="isUpdate" class="del-address" @click="delAddress">删除地址</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div :class="submitClass" @touchend="onSubmit">确 认</div>
|
|
|
</div>
|
|
|
|
|
|
</Scroll>
|
|
|
<AddressAct
|
|
|
class="address-act"
|
|
|
ref="addressAct"
|
|
|
v-show="isShowProvince"
|
|
|
@popHidden="popHidden"
|
...
|
...
|
@@ -84,6 +90,7 @@ import FormItem from "./components/form-item"; |
|
|
import Radio from "./components/radio";
|
|
|
import AddressAct from "./components/address-act";
|
|
|
import RadioGroup from "./components/radio-group";
|
|
|
import { Scroll } from "cube-ui";
|
|
|
|
|
|
import { createNamespacedHelpers } from "vuex";
|
|
|
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
|
...
|
...
|
@@ -98,10 +105,14 @@ export default { |
|
|
FormItem,
|
|
|
Radio,
|
|
|
AddressAct,
|
|
|
RadioGroup
|
|
|
RadioGroup,
|
|
|
Scroll
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
scrollOpts: {
|
|
|
bounce: false
|
|
|
},
|
|
|
isShowProvince: false,
|
|
|
isUpdate: false,
|
|
|
updateMobileNum: "",
|
...
|
...
|
@@ -332,9 +343,27 @@ export default { |
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
/deep/ {
|
|
|
.cube-scroll-content {
|
|
|
min-height: 100%;
|
|
|
}
|
|
|
|
|
|
.cube-scroll-list-wrapper {
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
.cube-loading-spinners {
|
|
|
margin: auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.address-act {
|
|
|
z-index: 99;
|
|
|
}
|
|
|
|
|
|
.pane-body {
|
|
|
height: 100%;
|
|
|
overflow-y: hidden;
|
|
|
overflow-y: auto;
|
|
|
padding-top: 12px;
|
|
|
padding-left: 40px;
|
|
|
padding-right: 40px;
|
...
|
...
|
|