375 lines
13 KiB
Vue
375 lines
13 KiB
Vue
<template>
|
||
<view class="pad-x160">
|
||
<!-- 状态栏 -->
|
||
<status-nav :navBarTitle="'确认订单'"></status-nav>
|
||
<!-- 容器 -->
|
||
<container-subgroup>
|
||
<view slot="content">
|
||
<view class="bacf6 fon30 col3 radius20 mar-s20 disjbac pad-sx27-zy20">
|
||
<view class="bold">配送方式</view>
|
||
<view class="disac">
|
||
<view @tap="expressEv(0)" :class="isExpress?'activeT':'expressT'" :style="{background:isExpress?publicColor:''}">快递</view>
|
||
<view @tap="expressEv(1)" :class="!isExpress?'activeT':'expressT'" :style="{background:isExpress?'':publicColor}">自提</view>
|
||
</view>
|
||
</view>
|
||
<!-- 地址信息 -->
|
||
<view v-if="isExpress" class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20">
|
||
<view class="bold">收件人信息</view>
|
||
<navigator url="/pagesA/myAddress/myAddress?isWhere=0" hover-class="none">
|
||
<view class="disjbac pad-s30">
|
||
<view v-if="addressInfo!=''">
|
||
<view class="fon28 bold mar-x10">{{addressInfo.name}}<span class="mar-z20">{{userPphone}}</span></view>
|
||
<view class="fon24 col9">{{addressInfo.province_str}}{{addressInfo.city_str}}{{addressInfo.county_str || ''}}{{addressInfo.address || ''}}</view>
|
||
</view>
|
||
<view v-else class="fon24 col9">请完善收件人信息</view>
|
||
<i class="icon icon-next col0"></i>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
<!-- 自提地址 -->
|
||
<view v-else class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20">
|
||
<view class="bold">自提地址</view>
|
||
<input type="number" maxlength="11" :focus="isFocus" @blur="blurEv" v-model="zPhone" class="mar-s50 mar-x20" style="border: 2rpx solid #E0E0E0;padding: 20rpx;border-radius: 10rpx;font-size: 24rpx;" placeholder="请输入收货人手机号" />
|
||
<view class="disjbac mar-s50">
|
||
<view>
|
||
<view class="fon28 bold mar-x20">佩丽饰品</view>
|
||
<view class="fon24 col9">{{goAddress}}</view>
|
||
</view>
|
||
<!-- 立即导航 -->
|
||
<view @tap="goThere(goAddress)" class="disjcac fc col0 fon24">
|
||
<i class="icon icon-navigate-now " style="font-size: 50rpx;"></i>
|
||
<view>立即导航</view>
|
||
</view>
|
||
<!-- <image src="/static/public/daoh.png" class="there" mode="aspectFill"></image> -->
|
||
</view>
|
||
</view>
|
||
<!-- 订单信息 -->
|
||
<view class="bacf6 fon30 radius20 mar-s20 pad-sx27-zy20">
|
||
<view class="bold">订单信息</view>
|
||
<view v-for="(item,index) in orderList" :key="index" class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||
<image @tap="goShopDetail(item.id)" :src="item.imgSrc" class="flexs order-image" mode="aspectFill"></image>
|
||
<view class="width100 disjb fc" style="height: 166rpx;">
|
||
<view @tap="goShopDetail(item.id)" class="fon30 col3 bold clips2">{{item.title}}</view>
|
||
<view class="fon24 colpeili disac fw">
|
||
<view class="mar-y40" v-for="(item1,index1) in item.specs" :key="index1">{{item1}}</view>
|
||
</view>
|
||
<view class="disjbac mar-s10 width100">
|
||
<view class="order-item-price">￥{{item.price}}</view>
|
||
<view class="fon30 col6">x{{item.num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fon30 disjbac mar-s20 pad-s10">
|
||
<view class="col6">共{{allNum}}件</view>
|
||
<view class="bold colf8">应付款：{{allPrice}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 优惠 -->
|
||
<view class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20 disjbac">
|
||
<view class="bold">折扣优惠</view>
|
||
<view class="colf8 bold">￥{{discountPrice}}</view>
|
||
</view>
|
||
<!-- 快递费用 -->
|
||
<view v-if="isExpress" class="bacf6 fon30 radius20 mar-s20 disjbac pad-sx27-zy20">
|
||
<view class="bold">快递费用</view>
|
||
<view class="colf8 bold">￥{{expressInfo.default_price}}</view>
|
||
</view>
|
||
</view>
|
||
</container-subgroup>
|
||
<!-- 底部导航 -->
|
||
<payment :totalPrice="totalPrice" @immediatePayment="goPayment"></payment>
|
||
<!-- 支付成功 -->
|
||
<view v-if="isSuccess" class="posAll" style="z-index: 3;background-color: #F5F5F5;">
|
||
<view class="bacf radius20 mar-s20 mar-zy20 success-box">
|
||
<image src="/static/public/pay-success.png" mode=""></image>
|
||
<view class="fon28 col3 pad-s20 pad-x40">支付成功</view>
|
||
<view class="success-hj"><span>￥{{jsPrice<0?0:jsPrice}}</span></view>
|
||
<view class="disja success-btn">
|
||
<view @tap="goDetail">查看订单</view>
|
||
<view @tap="goShop" class="colf" :style="{background:publicColor}">再逛一逛</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import payment from '@/components/payment-subgroup/payment.vue';
|
||
export default {
|
||
components:{
|
||
payment
|
||
},
|
||
data() {
|
||
return {
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
isExpress:true,
|
||
orderList:uni.getStorageSync('orderList'),
|
||
goAddress:'四川省成都市青羊区草堂东路88号',
|
||
discountPrice:0,// 折扣优惠
|
||
isNei:0,
|
||
addressInfo:'',//地址信息
|
||
zPhone:'',//自提时的手机号
|
||
isFocus:false,
|
||
isSuccess:false,//支付成功
|
||
times:0,//点击次数
|
||
checkGrounpId:0,
|
||
expressInfo:{
|
||
code:'',//快递编号
|
||
default_price:0 //快递费
|
||
},
|
||
userPphone:'', // 快递时的手机号
|
||
}
|
||
},
|
||
computed:{
|
||
// 所有商品数量
|
||
allNum(){
|
||
let num = 0;
|
||
this.orderList.forEach(item=>{
|
||
num += item.num;
|
||
})
|
||
return num;
|
||
},
|
||
// 应付款金额
|
||
allPrice(){
|
||
let newPrice = 0;
|
||
this.orderList.forEach(item=>{
|
||
newPrice += item.num * item.price;
|
||
})
|
||
return this.$toolAll.tools.addXiaoShu(newPrice);
|
||
},
|
||
// 合计金额
|
||
totalPrice(){
|
||
let price1 = this.$toolAll.tools.operationEv(this.allPrice, this.discountPrice, '-', 2);
|
||
// 是否计算快递费
|
||
let expressPrice = 0;
|
||
this.isExpress ? expressPrice = this.expressInfo.default_price : expressPrice = 0;
|
||
return this.$toolAll.tools.operationEv(price1, expressPrice, '+', 2);
|
||
}
|
||
},
|
||
onShareAppMessage(res) {
|
||
var shareObj = {
|
||
title: ``, // 默认是小程序的名称(可以写slogan等)
|
||
path: `/pagesB/shopDetail/shopDetail?id=${this.orderList[0].id}&category_id=${this.orderList[0].category_id}&share_id=${this.checkGrounpId}&invite_code=${uni.getStorageSync('invite_code')}&shareCate=${this.orderList[0].cateNum}&checkGrounpId=${this.orderList[0].checkGrounpId}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
imageUrl: ''//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||
};
|
||
return shareObj;
|
||
},
|
||
onShow() {
|
||
this.checkChoose();//调用检测地址
|
||
},
|
||
onLoad(options) {
|
||
// 调取查询快递公司信息事件
|
||
this.checkexpress();
|
||
},
|
||
methods: {
|
||
//检测地址
|
||
checkChoose(){
|
||
console.log(uni.getStorageSync('chooseAddress'),165);
|
||
if(uni.getStorageSync('chooseAddress')==''){
|
||
this.checkAddress();//查询地址
|
||
} else {
|
||
console.log(uni.getStorageSync('chooseAddress'));
|
||
let naddress = uni.getStorageSync('chooseAddress');
|
||
this.addressInfo = {
|
||
id:naddress.id,
|
||
name:naddress.userName,
|
||
phone:naddress.userPhone,
|
||
province_str:naddress.province,
|
||
city_str:naddress.city,
|
||
county_str:naddress.county,
|
||
address:naddress.address
|
||
}
|
||
this.userPphone = this.$toolAll.tools.hideMPhone(naddress.userPhone);
|
||
}
|
||
},
|
||
goShopDetail(id){
|
||
uni.navigateTo({
|
||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||
})
|
||
},
|
||
goPayment(){//去付款
|
||
this.isFocus = false;
|
||
let nphone = this.zPhone; // 自提时的手机号
|
||
if(this.isExpress) nphone = this.addressInfo.phone; // 默认地址的手机号
|
||
let self = 1; // 自提的方式
|
||
if(this.isExpress) self = 0; // 快递的配送方式
|
||
let nsku_list = [];
|
||
this.orderList.forEach(item=>{
|
||
let obj = {
|
||
sku_coding:item.coding,
|
||
num:item.num,
|
||
group_id:item.pin_user_id
|
||
}
|
||
nsku_list.push(obj);
|
||
})
|
||
let parmas = {
|
||
sku_list: nsku_list,//商品单号和数量数组
|
||
total: this.totalPrice,//总金额
|
||
address_id: this.isExpress ? this.addressInfo.id : 0,//地址ID
|
||
express_code: this.isExpress ? this.expressInfo.code : '',//快递编码
|
||
pick_self: self,//是否自提0 快递， 1自提
|
||
pick_self_phone: nphone,//联系电话
|
||
original_total: this.allPrice,//原价总金额
|
||
freight: this.isExpress ? this.expressInfo.default_price : 0,//快递费
|
||
discount:0
|
||
}
|
||
if(this.addressInfo=='' && self==0){
|
||
this.$toolAll.tools.showToast('请完善收件人信息');
|
||
} else if(nphone=='' && self==1) {
|
||
this.$toolAll.tools.showToast('请填写收货人手机号');
|
||
this.focusEv();
|
||
} else if(this.$toolAll.tools.isPhone(nphone) && self==1) {
|
||
this.$toolAll.tools.showToast('请正确填写收货人手机号');
|
||
this.focusEv();
|
||
} else {
|
||
if(this.times==0){
|
||
this.times++;
|
||
if(this.allPrice==0){
|
||
this.$toolAll.tools.showToast('正在支付','loading',1500);
|
||
} else {
|
||
this.$toolAll.tools.showToast('正在调起支付','loading',1500);
|
||
}
|
||
this.$requst.post('/api/order/create',parmas).then(res=>{
|
||
if(res.code==0){
|
||
// 调取微信支付
|
||
this.payment(res.data);
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
this.times = 0;
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
}
|
||
}
|
||
},
|
||
payment(info){
|
||
if(info.needPay){
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
appId:info.payment_params.appId,//appId
|
||
timeStamp: info.payment_params.timeStamp,//时间戳
|
||
nonceStr: info.payment_params.nonceStr,//随机字符串
|
||
package: info.payment_params.package,//package
|
||
signType: info.payment_params.signType,//MD5
|
||
paySign: info.payment_params.sign,//签名
|
||
success:(res)=> {
|
||
this.times = 0;
|
||
// 支付成功通知
|
||
this.$requst.post('/api/order/paid',{order_coding:info.coding}).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('支付成功');
|
||
setTimeout(()=>{
|
||
uni.navigateTo({
|
||
url:'/pagesA/myOrder/myOrder?index=2'
|
||
})
|
||
},2000)
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
})
|
||
},
|
||
fail:(err)=> {
|
||
this.$toolAll.tools.showToast('取消支付');
|
||
}
|
||
});
|
||
} else {
|
||
// 支付成功通知
|
||
this.$requst.post('/api/order/paid',{order_coding:info.coding}).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('支付成功');
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
})
|
||
}
|
||
},
|
||
goThere(val){//去这里
|
||
wx.getLocation({//获取当前经纬度
|
||
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||
success: function (res) {
|
||
wx.openLocation({//使用微信内置地图查看位置。
|
||
latitude: 30.657707,//要去的纬度-地址
|
||
longitude: 104.036007,//要去的经度-地址,
|
||
name: val,
|
||
address: val
|
||
})
|
||
}
|
||
})
|
||
},
|
||
checkAddress(){//默认地址查询
|
||
this.$requst.post('/api/user/address').then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.length){
|
||
res.data.forEach(item=>{
|
||
if(item.is_default==1) {
|
||
this.addressInfo = item;
|
||
} else {
|
||
if(res.data.length==1){
|
||
this.addressInfo = item;
|
||
}
|
||
}
|
||
})
|
||
this.userPphone = this.$toolAll.tools.hideMPhone(this.addressInfo.phone);
|
||
} else {
|
||
this.addressInfo = '';
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//查询快递费
|
||
checkexpress(){
|
||
if(this.isExpress) {
|
||
this.$requst.post('/api/common/express-list').then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.length!=0){
|
||
res.data.forEach(item=>{
|
||
// 如果查询到有默认地址，赋值默认地址，没有默认地址就取地址列表第一位
|
||
item.is_default==1 ? this.expressInfo = item : this.expressInfo = res.data[0];
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
expressEv(index){//快递自取切换事件
|
||
if(index==0) {
|
||
this.isExpress = true;
|
||
if(this.addressInfo==''){this.$toolAll.tools.showToast('请完善收件人信息','none',1500);}
|
||
}
|
||
if(index==1) {
|
||
this.isExpress = false;
|
||
}
|
||
},
|
||
checkOrderDetail(){//查询订单准备信息
|
||
let nsku_list = [];
|
||
this.orderList.forEach(item=>{
|
||
let obj = {
|
||
sku_coding:item.coding,
|
||
num:item.num
|
||
}
|
||
nsku_list.push(obj)
|
||
})
|
||
let parmas = {
|
||
sku_list: nsku_list,
|
||
pick_self: 0
|
||
}
|
||
this.$requst.post('/api/order/prepare-info',parmas).then(res=>{
|
||
if(res.code==0){
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
})
|
||
},
|
||
goDetail(){//去订单列表
|
||
uni.navigateTo({
|
||
url:'/pagesA/myOrder/myOrder'
|
||
})
|
||
},
|
||
focusEv(){//获取焦点
|
||
this.isFocus = true;
|
||
},
|
||
blurEv(){//失去焦点
|
||
this.isFocus = false;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|