添加新文件
This commit is contained in:
hejiangming
@@ -0,0 +1,338 @@
|
||||
<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_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>
|
||||
Reference in New Issue
Block a user