<template>
<view class="full-width full-height " style="margin: auto;" :style="{width:$tool.isPc()?$base.isPcWidth + 'px':'100%'}">
<myhead :worksid="0" :title="myheadtext" :color="'#333'" :titleShow="true" :backShow="true" :background="'none'"></myhead>
<scroll-view scroll-y class="scroll_content" style="position: fixed; top:70px"
:style="{width:$tool.isPc()?$base.isPcWidth + 'px':'100%'}">
<view class='create_intput'>
<view class='right_text'>{{$i18n.messages[$i18n.locale]['收件人']}}:</view>
<input class='left_input' :placeholder="$i18n.messages[$i18n.locale]['输入收件人']" v-model="receivor" />
</view>
<view class='create_intput'>
<view class='right_text'>{{$i18n.messages[$i18n.locale]['电话号码']}}:</view>
<input class='left_input' :placeholder="$i18n.messages[$i18n.locale]['输入电话号码']" v-model="telephone" />
</view>
<view class='create_intput' @click="selectCountry()">
<view class='right_text'>{{$i18n.messages[$i18n.locale]['国家']}}:</view>
<view class='left_input'>{{country}}</view>
<view v-if="country == null || country == '' " class='left_input'
style="position: absolute; left: 250upx; color: #999999;">{{$i18n.messages[$i18n.locale]['输入国家']}}
</view>
</view>
<view class='create_intput'>
<view class='right_text'>{{$i18n.messages[$i18n.locale]['省份']}}:</view>
<input class='left_input' :placeholder="$i18n.messages[$i18n.locale]['输入省份']" v-model="province" />
</view>
<view class='create_intput'>
<view class='right_text'>{{$i18n.messages[$i18n.locale]['城市']}}:</view>
<input class='left_input' :placeholder="$i18n.messages[$i18n.locale]['输入城市']" v-model="city" />
</view>
<view class='create_intput'>
<view class='right_text'>{{$i18n.messages[$i18n.locale]['详细地址']}}:</view>
<input class='left_input' :placeholder="$i18n.messages[$i18n.locale]['输入详细地址']"
v-model="detailedAddress" />
</view>
<view class='create_intput'>
<view class='right_text'>{{$i18n.messages[$i18n.locale]['邮政编码']}}:</view>
<input class='left_input' :placeholder="$i18n.messages[$i18n.locale]['输入邮政编码']" v-model="postalCode" />
</view>
<view class='create_intput'>
<view class='right_text'>{{$i18n.messages[$i18n.locale]['邮箱']}}:</view>
<input class='left_input' :placeholder="$i18n.messages[$i18n.locale]['输入邮箱']" v-model="email" />
</view>
<view style="width: 100%; height: 220upx;"></view>
</scroll-view>
<view class="button_save" @click="saveAddress()" :style="{width:$tool.isPc()?$base.isPcWidth + 'px':'100%'}">
{{$i18n.messages[$i18n.locale]['确认']}}
</view>
<!-- 国家 -->
<mpvue-picker ref="mpvuePicker" :themeColor="'#854AC2'" mode="selector" :pickerValueDefault="pickerValueDefault"
@onConfirm="onConfirm" :pickerValueArray="pickerValueArray" :pickerSearchValueArray="pickerValueArray"
:isShowSerach="true">
</mpvue-picker>
</view>
</template>
<script>
import homeservice from '@/service/homeservice.js'
import uniPopup from '../index/common/uni-popup/uni-popup.vue'
import Enums from '@/util/Enums';
import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
import myhead from '../mine/head.vue';
export default {
components: {
uniPopup,
mpvuePicker,
myhead
},
computed: {
},
data() {
return {
pickerValueArray: [],
pickerValueDefault: [0],
machine_id: null, //设备id
goods_id: null, //商品id
works_id: null, //作品id
receivor: null, //收件人
telephone: null, //电话
country: null, //国家
province: null, //省份
city: null, //城市
detailedAddress: null, //详细地址
postalCode: null, //邮编
email: null, //邮箱
support_paypal: 0, // paypal 开关 0：不开启支付 1:支付
support_oversea: 0, //是否支持海外配送 0：不支持 1：支持
countryListData: [], //国家数据集合
userAddressData: null, //地址信息
sizetext_id: null,
sizetext: null, //选中设备的尺码
give_sizetext: null, //选中配送的尺码
give_dict_id: null, //属性字典id
sizestock: null, //尺码库存
channel_no: null, //货道
dict_id: null, //属性字典id
coupon: null, //优惠劵
stock: null, //尺码
good: null, //商品
machineDetail: null, //设备数据
isCustomize: false,
titleName: "",
customize_size_id: "",
myheadtext:"",
};
},
methods: {
//获取库存与优惠券信息
getMachineStock() {
homeservice.queryListPhone({
s: 'Machine.getMachineStock',
machine_id: this.machine_id,
// key: this.tabletext ? 3 : 1
key: "2"
}).then(result => {
this.coupon = result.coupon
this.stock = result.stock
// 读出锁库存储存信息
this.sizetext_id = this.$base.lockInventory.id
this.sizetext = this.$base.lockInventory.goods_size
this.sizestock = this.$base.lockInventory.stock
this.channel_no = this.$base.lockInventory.channel_no
this.dict_id = this.$base.lockInventory.dict_id
}).catch(err => {
//uni.showToast({title: err.msg,icon: 'none'});
});
},
//确定选择国家
onConfirm(e) {
this.country = e.value[0];
},
//选择国家
selectCountry() {
this.pickerValueArray = this.countryListData;
this.pickerValueArray.filter(item => {
item.label = item.english_name
item.value = item.english_name
});
this.$refs.mpvuePicker.show();
},
//保存地址信息
saveAddress() {
if (this.receivor == null || this.receivor == "") {
uni.showToast({
title: this.$i18n.messages[this.$i18n.locale]['收件人不能为空'],
icon: 'none'
});
return;
}
if (this.telephone == null || this.telephone == "") {
uni.showToast({
title: this.$i18n.messages[this.$i18n.locale]['号码不能为空'],
icon: 'none'
});
return;
}
if (this.country == null || this.country == "") {
uni.showToast({
title: this.$i18n.messages[this.$i18n.locale]['国家不能为空'],
icon: 'none'
});
return;
}
if (this.province == null || this.province == "") {
uni.showToast({
title: this.$i18n.messages[this.$i18n.locale]['省份不能为空'],
icon: 'none'
});
return;
}
if (this.city == null || this.city == "") {
uni.showToast({
title: this.$i18n.messages[this.$i18n.locale]['城市不能为空'],
icon: 'none'
});
return;
}
if (this.detailedAddress == null || this.detailedAddress == "") {
uni.showToast({
title: this.$i18n.messages[this.$i18n.locale]['地址不能为空'],
icon: 'none'
});
return;
}
if (this.postalCode == null || this.postalCode == "") {
uni.showToast({
title: this.$i18n.messages[this.$i18n.locale]['邮政编码不能为空'],
icon: 'none'
});
return;
}
if (this.email == null || this.email == "") {
uni.showToast({
title: this.$i18n.messages[this.$i18n.locale]['邮箱不能为空'],
icon: 'none'
});
return;
}
let detailData = this.province + " " + this.city + " " + this.detailedAddress;
let data = {
receivor: this.receivor,
phone: this.telephone,
country: this.country,
province: this.province,
city: this.city,
county: "",
detail: detailData,
address: detailData,
email: this.email,
zip: this.postalCode,
exact_address: this.detailedAddress,
}
var userAddressData = JSON.stringify(data)
data.s = "UserAddress.addAddress";
data.is_default = "1";
data.detail = this.detailedAddress;
data.exact_address = "";
data.address = "";
//保存地址调转
homeservice.queryListPhone(data).then(result => {
if (this.support_paypal == 0) {
this.commitOrderOnPay(userAddressData)
} else {
uni.navigateTo({
url: '../mine/order?goodid=' + this.works_id + '&machine_id=' + this
.machine_id +
'&goods_id=' +
this.goods_id + "&support_oversea=" + this.support_oversea +
"&support_paypal=" + this.support_paypal + "&userAddressData=" +
userAddressData + "&machineDetail=" + JSON.stringify(this.machineDetail) +
"&isCustomize=" + this.isCustomize +
"&titleName=" + this.titlename +
"&customize_size_id=" + this.customize_size_id
})
}
}).catch(err => {
});
},
//不需要开启支付
commitOrderOnPay(userAddressData) {
let promoterId = "";
try { //数据缓存 同步 一定要用try catch 包裹
promoterId = uni.getStorageSync('promoter_id');
} catch (e) {
//TODO handle the exception
};
let goods_specs_name = "";
if (this.good != null && this.good.goods != null) {
goods_specs_name = this.good.goods.alias_name;
}
let data = {
s: 'Order.create',
type: 2, //1：配送版，2：单机版，3：自助版
machine_id: this.machine_id, //设备
goods_id: this.goods_id, //产品
works_id: this.works_id, //作品
channel_no: null, //货道
dict_id: null, //属性字典id
goods_size: null, //产品尺寸
works_num: null, //作品
shop_id: this.tabletext ? this.machine_item.shop_id : null, //商铺
sn: null, //前端查询标志
coupon_id: null, //优惠券id，支付多个id( 1-2-3)
user_address: userAddressData, //地址
surface_type: this.$base.surfaceData.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
surface_id: this.$base.surfaceData.surface_id, //材质对应的编号，没有的话就为0或者不传
surface_color_series_id: this.$base.surfaceData.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
surface_color_id: this.$base.surfaceData.surface_color_id, //选择的颜色编号，没有的话就不传或者为0
language: this._i18n.locale,
support_paypal: "0",
promoter_id: promoterId,
goods_specs: goods_specs_name,
terminal: 4,
customize_size_id: this.customize_size_id,
create_time: Date.parse(new Date()) / 1000,
}
if (this.coupon.ids != undefined && this.coupon != null) {
data.coupon_id = this.coupon.ids.join("-")
}
uni.showLoading({
title: this.$i18n.messages[this.$i18n.locale]['正在生成订单'],
mask: true
})
homeservice.WorksListPhone(data).then(result => {
uni.hideLoading();
uni.navigateTo({
url: '../mall/lineUp?machine_id=' + this.machine_id
})
}).catch(err => {
uni.hideLoading();
uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
});
},
Worksdetail() { //获取作品详情
homeservice.WorksListPhone({
s: 'Works.detail',
id: this.works_id,
surface_type: this.$base.surfaceData.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
surface_id: this.$base.surfaceData.surface_id, //材质对应的编号，没有的话就为0或者不传
}).then(result => {
this.good = result
if (this.isCustomize) {
this.good.goods.alias_name = this.titleName
}
}).catch(err => {
//uni.showToast({ title: err.msg || err.data, icon: 'none' });
});
},
//获取国家列表信息
getCountryList() {
homeservice.queryListPhone({
s: 'Country.getList',
limit: "300",
page: "1"
}).then(result => {
this.countryListData = result.data;
}).catch(err => {
});
},
//获取默认地址
getDefaultAddress() {
homeservice.queryListPhone({
s: 'UserAddress.getDefaultAddress',
}).then(result => {
if (result == null) {
return;
}
this.receivor = result.receivor;
this.telephone = result.phone;
this.country = result.country;
this.province = result.province;
this.city = result.city;
this.detailedAddress = result.detail;
this.postalCode = result.zip;
this.email = result.email;
}).catch(err => {
});
},
},
onLoad(options) {
// uni.setNavigationBarTitle({
// title: this.$i18n.messages[this.$i18n.locale]['接收地址']
// })
if (options.goods_id != 'null') {
this.goods_id = options.goods_id
}
if (options.machine_id != 'null') { //设备进来的
this.machine_id = options.machine_id
}
if (options.goodid != 'null') {
this.works_id = options.goodid
}
if (options.support_paypal != 'null') {
this.support_paypal = options.support_paypal
}
if (options.support_oversea != 'null') {
this.support_oversea = options.support_oversea
}
if (options.machineDetail && options.machineDetail != 'null') {
this.machineDetail = JSON.parse(options.machineDetail);
}
if (options.isCustomize) {
this.isCustomize = options.isCustomize;
}
if (options.titleName) {
this.titleName = options.titleName;
}
if (options.customize_size_id) {
this.customize_size_id = options.customize_size_id;
}
this.getCountryList();
this.getDefaultAddress();
this.getMachineStock();
this.Worksdetail();
this.myheadtext = this.$i18n.messages[this.$i18n.locale]['接收地址']
},
onShow() {},
onUnload() {}
};
</script>
<style lang="scss">
page {
background: #ffffff !important;
}
.scroll_content {
height: 100%;
width: 100%;
overflow: hidden;
overflow-y: scroll;
position: relative;
}
.create_intput {
width: calc(100% - 40upx);
height: 130upx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
margin-left: 30upx;
margin-right: 30upx;
border-bottom: 1upx solid #EEEEEE;
.right_text {
font-size: 29upx;
width: 230upx;
color: #333333;
}
.left_input {
width: calc(100% - 230upx);
height: 45upx;
font-size: 27upx;
line-height: 45upx;
color: #000000;
margin-left: 15upx;
justify-content: center;
}
}
// <view v-if="support_paypal != 1"
// style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
// <view style="width: 100%; height: 100upx;
// background: #fff; font-size: 36upx;
// font-weight: 400; text-align: center; line-height: 100upx; float: left; color: #333; " @click="commitOrderOnPay()">
// Pay offline
// </view>
// </view>
.button_save {
position: fixed;
bottom: 0upx;
width: 100%;
height: 100upx;
background: linear-gradient(-90deg, #178CE6, #984ACE);
font-size: 36upx;
font-weight: 400;
text-align: center;
line-height: 100upx;
float: right;
color: #FFFFFF;
// height: 100upx;
// width: 400upx;
// position: fixed;
// bottom: 60upx;
// background: #854AC2;
// font-size: 36upx;
// font-weight: 400;
// text-align: center;
// left: calc(50% - 200upx);
// border-radius: 60upx;
// line-height: 100upx;
// color: #FFFFFF;
}
</style>