123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- <template>
- <view class="content">
- <view class="row b-b">
- <text class="tit">{{$L('联系人')}}</text>
- <input class="input" maxlength='10' type="text" v-model="addressData.memberName" :placeholder="$L('请输入收货人姓名')"
- placeholder-class="placeholder" />
- </view>
- <view class="row b-b">
- <text class="tit">{{$L('联系电话')}}</text>
- <input class="input" maxlength='11' type="number" v-model="addressData.telMobile" :placeholder="$L('请输入手机号')"
- placeholder-class="placeholder" />
- </view>
- <view class="row b-b">
- <text class="tit">{{$L('所在地区')}}</text>
- <text @click="chooseArea" :class="addressData.addressAll==$L(`请选择所在地区`)? 'input placeholder1':'input'">
- {{addressData.addressAll}}
- </text>
- </view>
- <view class="row b-b">
- <text class="tit">{{$L('详细地址')}}</text>
- <input class="input" type="text" v-model="addressData.detailAddress" :placeholder="$L('请输入详细地址,建议5~60字')" maxlength='60'
- placeholder-class="placeholder" />
- </view>
- <view class="row default_row">
- <text class="tit">{{$L('设为默认地址')}}</text>
- <switch style="transform: scale(0.8,0.8)" :checked="addressData.isDefault" color="#FC1C1C" @change="switchChange" />
- </view>
- <button class="add_btn flex_row_center_center" @click="confirm" :style="{top:windowHeight - 80 + 'px'}">{{$L('提交')}}</button>
- <selectAddress ref='selectAddress' :sel_data='selAddressData' @selectAddress="successSelectAddress"></selectAddress>
- </view>
- </template>
- <script>
- import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress';
- import {
- mapState,mapMutations
- } from 'vuex';
- export default {
- components: {
- selectAddress,
- },
- data() {
- return {
- addressData: {
- memberName: '',
- telMobile: '',
- addressAll: '请选择所在地区',
- detailAddress: '',
- isDefault: false,
- addressId: '', //编辑收货地址时的id
- },
- selAddressData: [],
- windowHeight:''
- }
- },
- onLoad(option) {
- let title = '新增收货地址';
- if (option.type === 'edit') {
- title = '编辑收货地址'
- this.addressData.addressId = option.addressId;
- this.getAddressDetail();
- }
- this.manageType = option.type;
- uni.setNavigationBarTitle({
- title
- });
- uni.getSystemInfo({
- success:(res)=>{
- this.windowHeight = res.windowHeight;
- }
- });
- },
- computed: {
- ...mapState(['userInfo','addressList'])
- },
- methods: {
- ...mapMutations(['operateAddressData']),
- switchChange(e) {
- this.addressData.isDefault = e.detail.value;
- },
- chooseArea() {
- this.$refs.selectAddress.show()
- },
- successSelectAddress(address) { //选择成功回调
- this.selAddressData = address;
- this.addressData.addressAll = ''
- address.map((item) => {
- this.addressData.addressAll += item.name;
- })
- },
- //获取收货地址详情
- getAddressDetail() {
- this.$request({
- url: 'v3/member/front/memberAddress/detail',
- data: {
- addressId: this.addressData.addressId,
- },
- method:'GET',
- }).then(res => {
- if (res.state == 200) {
- let result = res.data;
- this.addressData.memberName = result.memberName;
- this.addressData.telMobile = result.telMobile;
- this.addressData.addressAll = result.addressAll;
- this.addressData.detailAddress = result.detailAddress;
- this.addressData.isDefault = result.isDefault ? true : false;
- this.selAddressData = [{
- code: result.provinceCode,
- name: ''
- }, {
- code: result.cityCode,
- name: ''
- }, {
- code: result.districtCode,
- name: ''
- }, ];
- //初始化地址选择组件
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- //提交
- confirm() {
- let data = this.addressData;
- if (!data.memberName) {
- this.$api.msg('请填写收货人姓名');
- return;
- }
- if (!this.$checkMobile(data.telMobile)) {
- return;
- }
- if (data.addressAll=='请选择所在地区') {
- this.$api.msg('请选择所在地区');
- return;
- }
- if (!data.detailAddress) {
- this.$api.msg('请填写详细地址');
- return;
- } else if (data.detailAddress.length < 5) {
- this.$api.msg('详细地址至少填写5个字');
- return;
- }
- let param = {};
- param.url = data.addressId ? 'v3/member/front/memberAddress/edit' : 'v3/member/front/memberAddress/add';
- param.data = {};
- param.data.key = this.userInfo.access_token;
- param.data.memberName = data.memberName; //收货人
- param.data.provinceCode = this.selAddressData[0].code; //省份编码
- param.data.cityCode = this.selAddressData[1].code; //城市编码
- param.data.districtCode = this.selAddressData[2]?this.selAddressData[2].code:0; //区县编码
- param.data.addressAll = data.addressAll; //所在地区
- param.data.detailAddress = data.detailAddress; //详细地址
- param.data.telMobile = data.telMobile; //联系电话
- param.data.isDefault = data.isDefault ? 1 : 0; //是否设为默认地址(0非默认地址 1默认地址)
- if (data.addressId) {
- param.data.addressId = data.addressId;
- }
- param.method = 'POST';
- this.$request(param).then(res => {
- this.$api.msg(res.msg);
- if (res.state == 200) {
- //更新上一页的数据
- const pages = getCurrentPages(); //当前页面栈
- if (pages.length > 1) {
- const beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
- beforePage.$vm.getAddressList(); //触发上个面中的方法获取地址列表的方法
- }
- setTimeout(() => {
- uni.navigateBack()
- }, 800)
- } else {
- //错误提示
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- })
- },
- }
- }
- </script>
- <style lang="scss">
- page {
- background: $bg-color-split;
- padding-top: 20rpx;
- width: 750rpx;
- margin: 0 auto;
- }
- .content{
- position: relative;
- }
- .b_b {
- &:after {
- position: absolute;
- z-index: 3;
- left: 20rpx;
- right: 0;
- height: 0;
- content: '';
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- border-bottom: 1px solid rgba(0, 0, 0, .1);
- }
- }
- .row {
- display: flex;
- align-items: center;
- position: relative;
- padding: 0 30rpx;
- height: 100rpx;
- background: #fff;
- &.b-b {
- &:after {
- position: absolute;
- z-index: 3;
- left: 20rpx;
- right: 0;
- height: 0;
- content: '';
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- border-bottom: 1px solid rgba(0, 0, 0, .1);
- }
- }
- .tit {
- flex-shrink: 0;
- width: 130rpx;
- font-size: 28rpx;
- color: #333;
- }
- .input {
- flex: 1;
- font-size: 30rpx;
- color: #333;
- font-weight: 600;
- }
- }
- .default_row {
- margin-top: 20rpx;
- .tit {
- flex: 1;
- }
- switch {
- transform: translateX(16rpx) scale(.9);
- }
- }
- .add_btn {
- position: absolute;
- font-size: 34rpx;
- color: #fff;
- width: 668rpx;
- height: 88rpx;
- background: #F30300;
- border-radius: 44rpx;
- right: 0;
- left: 0;
- margin: 0 auto;
- }
- .placeholder1{
- color: #949494!important;
- font-size: 26rpx!important;
- }
- </style>
|