312 lines
8.5 KiB
Vue
312 lines
8.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="get_prize_warp">
|
|||
|
|
<view class="address_add_warp">
|
|||
|
|
<view class="address_form">
|
|||
|
|
<view class="add_form_item add_form_item_but">
|
|||
|
|
<view class="add_form_title">收货人</view>
|
|||
|
|
<up-input placeholder="收货人" border="surround" v-model="form.name" :customStyle="{
|
|||
|
|
'border': '0rpx',
|
|||
|
|
}"></up-input>
|
|||
|
|
</view>
|
|||
|
|
<view class="add_form_item add_form_item_but">
|
|||
|
|
<view class="add_form_title">手机号码</view>
|
|||
|
|
<up-input placeholder="请填写收货人手机号" border="surround" v-model="form.mobile" :customStyle="{
|
|||
|
|
'border': '0rpx',
|
|||
|
|
}" type="number"></up-input>
|
|||
|
|
</view>
|
|||
|
|
<view class="add_form_item add_form_item_but">
|
|||
|
|
<view class="add_form_title">所在地区</view>
|
|||
|
|
<view class="region_warp" @click="regionShowCheck(true)">
|
|||
|
|
<view style="color: #808080;margin-left: 22rpx;font-size: 28rpx;">{{ (form.regionStr &&
|
|||
|
|
form.regionStr.join("/")) || "所在地区" }}</view>
|
|||
|
|
<up-image src="/static/common/right_soild.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="add_form_item">
|
|||
|
|
<view class="add_form_title">详细地址</view>
|
|||
|
|
<up-input placeholder="门牌号、小区、楼栋号、单元室等" border="surround" v-model="form.address" :customStyle="{
|
|||
|
|
'border': '0rpx',
|
|||
|
|
'height': '100rpx',
|
|||
|
|
}"></up-input>
|
|||
|
|
</view>
|
|||
|
|
<view class="add_form_item">
|
|||
|
|
<view class="add_form_title">备注</view>
|
|||
|
|
<up-textarea v-model="prizeForm.remark" placeholder="请输入内容"></up-textarea>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="address_select">
|
|||
|
|
<view class="msg_">注：此收货地址会默认添加到地址列表</view>
|
|||
|
|
<view class="address_" @click="addressShow = true">使用收货地址</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="add_but" @click="addAddress">
|
|||
|
|
确认领取
|
|||
|
|
</view>
|
|||
|
|
<up-toast ref="uToastRef"></up-toast>
|
|||
|
|
<up-picker :show="regionShow" ref="uPickerRef" :columns="regionColumns" @confirm="regionConfirm"
|
|||
|
|
:loading="regionLoading" @change="regionChange" keyName="label" itemHeight="34" @cancel="regionShow = false"
|
|||
|
|
@close="regionShow = false"></up-picker>
|
|||
|
|
</view>
|
|||
|
|
<!-- 选择地址 -->
|
|||
|
|
<up-popup v-model:show="addressShow" :round="10" :closeOnClickOverlay="false" :closeable="true"
|
|||
|
|
:safeAreaInsetBottom="false" @close="checkAddressShow(false)">
|
|||
|
|
<view class="address_popup_warp">
|
|||
|
|
<view class="address_popup_title">收件地址</view>
|
|||
|
|
<view class="address_popup_content">
|
|||
|
|
<Address @valueFunc="getAddressValueFunc" />
|
|||
|
|
</view>
|
|||
|
|
<view class="popup_but" @click="addressOk">
|
|||
|
|
确认
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</up-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { takeGoods } from '@/api/raffle.js';
|
|||
|
|
import { editAddress } from '@/api/address.js'
|
|||
|
|
import { getCascadeRegion } from '@/api/common.js';
|
|||
|
|
import Address from '@/components/address.vue';
|
|||
|
|
import { assembleAddress } from '@/utils/index.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
Address,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
form: {
|
|||
|
|
id: 0,
|
|||
|
|
name: null,// 收货人
|
|||
|
|
mobile: null,// 手机号码
|
|||
|
|
regionStr: null,// 所属地区
|
|||
|
|
countryId: null,// 国家ID
|
|||
|
|
provinceId: null,// 省份ID
|
|||
|
|
cityId: null,// 城市ID
|
|||
|
|
areaId: null,// 区域ID
|
|||
|
|
address: null,// 详细地址
|
|||
|
|
},
|
|||
|
|
regionShow: false,
|
|||
|
|
regionColumns: [],
|
|||
|
|
regionLoading: false,
|
|||
|
|
addressShow: false,// 收件地址选择
|
|||
|
|
selectAddress: {},// 选中的地址
|
|||
|
|
prizeForm: {
|
|||
|
|
id: 0,
|
|||
|
|
addressId: 0,//
|
|||
|
|
remark: '',// 备注
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
const id = option.id;
|
|||
|
|
if (id && id !== 0) {
|
|||
|
|
this.prizeForm.id = id;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 选择地址的弹框
|
|||
|
|
async regionShowCheck(status) {
|
|||
|
|
if (status) {
|
|||
|
|
const nation = await this.getRegion(0);
|
|||
|
|
const province = nation && nation.length !== 0 ? await this.getRegion(nation[0].id) : [];
|
|||
|
|
const city = province && province.length !== 0 ? await this.getRegion(province[0].id) : [];
|
|||
|
|
const area = city && city.length !== 0 ? await this.getRegion(city[0].id) : [];
|
|||
|
|
this.regionColumns = [nation, province, city, area];
|
|||
|
|
} else {
|
|||
|
|
this.regionColumns = [[], [], [], []];
|
|||
|
|
}
|
|||
|
|
this.regionShow = status;
|
|||
|
|
},
|
|||
|
|
// 数据交互
|
|||
|
|
async getRegion(pId) {
|
|||
|
|
this.regionLoading = true
|
|||
|
|
const params = {
|
|||
|
|
parentId: pId,
|
|||
|
|
}
|
|||
|
|
const resp = await getCascadeRegion(params);
|
|||
|
|
const arrOption = [];
|
|||
|
|
if (resp.bizcode === 100) {
|
|||
|
|
const data = resp.data;
|
|||
|
|
if (data && data.length !== 0) {
|
|||
|
|
data.map(item => {
|
|||
|
|
arrOption.push({
|
|||
|
|
id: item.id,
|
|||
|
|
label: item.name,
|
|||
|
|
pId: pId,
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.regionLoading = false;
|
|||
|
|
return arrOption
|
|||
|
|
},
|
|||
|
|
// 地区改变
|
|||
|
|
async regionChange(e) {
|
|||
|
|
const {
|
|||
|
|
columnIndex,
|
|||
|
|
index,
|
|||
|
|
picker
|
|||
|
|
} = e;
|
|||
|
|
const selectData = this.regionColumns[columnIndex][index];
|
|||
|
|
const resultData = await this.getRegion(selectData.id);
|
|||
|
|
if (resultData && resultData.length !== 0) {
|
|||
|
|
const index = columnIndex + 1;
|
|||
|
|
this.regionColumns[index] = resultData;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 提交地址
|
|||
|
|
regionConfirm(e) {
|
|||
|
|
const {
|
|||
|
|
columnIndex,
|
|||
|
|
value,
|
|||
|
|
values,
|
|||
|
|
index,
|
|||
|
|
} = e;
|
|||
|
|
const regionStr = [];
|
|||
|
|
const regionId = [];
|
|||
|
|
value.map(item => {
|
|||
|
|
if (item) {
|
|||
|
|
regionStr.push(item.label);
|
|||
|
|
regionId.push(item.id);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.form.regionStr = regionStr;
|
|||
|
|
if (regionId && regionId.length !== 0) {
|
|||
|
|
this.form.countryId = regionId[0] ? regionId[0] : null;
|
|||
|
|
this.form.provinceId = regionId[1] ? regionId[1] : null;
|
|||
|
|
this.form.cityId = regionId[2] ? regionId[2] : null;
|
|||
|
|
this.form.areaId = regionId[3] ? regionId[3] : null;
|
|||
|
|
}
|
|||
|
|
this.regionShowCheck(false);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加地址
|
|||
|
|
async addAddress() {
|
|||
|
|
const params = {
|
|||
|
|
...this.form,
|
|||
|
|
}
|
|||
|
|
if (!params.name) {
|
|||
|
|
this.$refs.uToastRef.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: "请输入收货人",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!params.mobile) {
|
|||
|
|
this.$refs.uToastRef.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: "请输入收货人手机号",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!params.regionStr) {
|
|||
|
|
this.$refs.uToastRef.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: "请选择所在地区",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!params.address) {
|
|||
|
|
this.$refs.uToastRef.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: "请输入详细地址",
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const selectAddress = this.selectAddress;
|
|||
|
|
if (selectAddress && selectAddress.id !== 0) {
|
|||
|
|
params.id = selectAddress.id;
|
|||
|
|
} else {
|
|||
|
|
delete params.id;
|
|||
|
|
}
|
|||
|
|
if (!params.areaId || params.areaId === 0) {
|
|||
|
|
delete params.areaId;
|
|||
|
|
}
|
|||
|
|
delete params.regionStr;
|
|||
|
|
const res = await editAddress(params);
|
|||
|
|
if (res && res.bizcode === 100) {
|
|||
|
|
const goodsParams = {
|
|||
|
|
...this.prizeForm,
|
|||
|
|
addressId: res.data,
|
|||
|
|
}
|
|||
|
|
const goodsRes = await takeGoods(goodsParams);
|
|||
|
|
if (goodsRes && goodsRes.bizcode === 100) {
|
|||
|
|
this.$refs.uToastRef.show({
|
|||
|
|
type: 'success',
|
|||
|
|
message: "领取成功",
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/mine/mine_winning_record/mine_winning_record'
|
|||
|
|
})
|
|||
|
|
}, 1500)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 地址类型
|
|||
|
|
checkAddressShow(status, type, addIndex, index) {
|
|||
|
|
this.addressShow = status;
|
|||
|
|
},
|
|||
|
|
// 地址选中
|
|||
|
|
getAddressValueFunc(item) {
|
|||
|
|
this.selectAddress = item;
|
|||
|
|
},
|
|||
|
|
// 地址选中OK
|
|||
|
|
addressOk() {
|
|||
|
|
const item = this.selectAddress;
|
|||
|
|
console.log("item", item);
|
|||
|
|
this.form.name = item.name;
|
|||
|
|
this.form.mobile = item.phone;
|
|||
|
|
this.form.countryId = item.countryId;
|
|||
|
|
this.form.provinceId = item.provinceId;
|
|||
|
|
this.form.cityId = item.cityId;
|
|||
|
|
this.form.areaId = item.areaId;
|
|||
|
|
this.form.address = item.address;
|
|||
|
|
const regionStr = [];
|
|||
|
|
if (item.countryName) {
|
|||
|
|
regionStr.push(item.countryName);
|
|||
|
|
}
|
|||
|
|
if (item.provinceName) {
|
|||
|
|
regionStr.push(item.provinceName);
|
|||
|
|
}
|
|||
|
|
if (item.cityName) {
|
|||
|
|
regionStr.push(item.cityName);
|
|||
|
|
}
|
|||
|
|
if (item.areaName) {
|
|||
|
|
regionStr.push(item.areaName);
|
|||
|
|
}
|
|||
|
|
this.form.regionStr = regionStr;
|
|||
|
|
this.addressShow = false;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.get_prize_warp {
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: $app-bj;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address_select {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.msg_ {
|
|||
|
|
color: #BDBDBD;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address_ {
|
|||
|
|
color: #03A9F4;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|