402 lines
10 KiB
Vue
402 lines
10 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 收货地址 -->
|
||
<view class="Harvest-Address">
|
||
<!-- 查询收获地址时 -->
|
||
<template v-if="!Taddress">
|
||
<u-loadmore :status="status" :loadingText="loadingText" />
|
||
</template>
|
||
<!-- 没有默认收货地址 -->
|
||
<template v-else-if="Object.keys(Taddress)['length'] <= 0">
|
||
<view class="Title">
|
||
收货地址
|
||
</view>
|
||
<navigator url="/pages/diy/addresslis/addresslis">
|
||
<view class="nothing">
|
||
添加收货地址
|
||
</view>
|
||
</navigator>
|
||
</template>
|
||
<!-- 有默认收货地址 -->
|
||
<navigator v-else url="/pages/diy/addresslis/addresslis">
|
||
<view class="Address">
|
||
<view class="User-Infor">
|
||
<text class="text1">{{Taddress['name']}}</text>
|
||
<text class="text1">{{Taddress['mobile']}}</text>
|
||
</view>
|
||
<view class="Address-Text">
|
||
{{Taddress['region']}}
|
||
</view>
|
||
<view class="Address-Text">
|
||
{{Taddress['address']}}
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
|
||
<view class="Commodity">
|
||
<view class="Commodity-Img" :class="{'Commodity-Imgn':InforData['thumbUrl']?true:false}">
|
||
<img class="img" :src="InforData['thumbUrl']" alt="">
|
||
</view>
|
||
<view class="Commodity-Infor">
|
||
<view class="Commodity-Infor-Title">
|
||
{{GetGoodsInfor['goods_name']}}
|
||
</view>
|
||
<view class="Commodity-Infor-Sku">
|
||
<view class="sku">
|
||
<!-- 磨砂款 -->
|
||
</view>
|
||
<view class="sku">
|
||
x1
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="Commodity-Order-Infor">
|
||
<u-cell-group :border="false">
|
||
<u-cell :border="false" titleStyle="color:#666666;fontSize:28rpx" title="运费" :value="freight"></u-cell>
|
||
<u-cell :border="false" titleStyle="color:#666666;fontSize:28rpx" title="商品金额" :value="CommodityAmount"></u-cell>
|
||
<u-cell :border="false" titleStyle="color:#666666;fontSize:28rpx" title="补贴卡抵扣金额" :value="`- ${ActualDeduction}`"></u-cell>
|
||
<u-cell :border="false" titleStyle="color:#666666;fontSize:28rpx" title="预估佣金" :value="commission"></u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
|
||
<view class="payment-content">
|
||
<view class="payment-content-Price">
|
||
<text style="font-size: 28rpx;">实付款：</text>
|
||
<text style="font-size: 32rpx; color: #FE2825;">￥{{price}}</text>
|
||
</view>
|
||
<view class="pay-btn" v-if="Taddress">
|
||
<button class="btn" :disabled="Object.keys(Taddress)['length'] <= 0" @tap="paymentClick">
|
||
{{Object.keys(Taddress)['length'] <= 0?'请选择地址':'立即支付'}}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
goodsInfoAPI,
|
||
getRegionFreightAPI,
|
||
getDefaultAddressAPI,
|
||
createOrderAPI,
|
||
conWalletInfoAPI
|
||
} from '@/request/diy/index.js';
|
||
|
||
import {
|
||
mapActions,
|
||
mapGetters
|
||
} from 'vuex';
|
||
let self;
|
||
// 公用混入
|
||
import mixin from "@/static/js/mixin/mixin.js";
|
||
import { mapMutations } from 'vuex';
|
||
export default {
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
InforData: {},
|
||
// 收货地址
|
||
Taddress:undefined,
|
||
status:'loading',
|
||
loadingText:'正在获取收货地址',
|
||
price:0,
|
||
amount:0,
|
||
ActualDeduction:0
|
||
};
|
||
},
|
||
onLoad(parameters) {
|
||
console.log(parameters,'parameters')
|
||
self = this;
|
||
// 定制完成之后的数据
|
||
this['InforData'] = parameters;
|
||
// 获取默认地址与运费
|
||
this.GetgetDefaultAddress();
|
||
// 监听地址列表选择地址
|
||
uni.$on('upArea',data=>{
|
||
self['Taddress'] = data;
|
||
self.Getfreight(data);
|
||
})
|
||
},
|
||
onUnload() {
|
||
uni.$off('upArea');
|
||
},
|
||
computed: {
|
||
...mapGetters("diy", ['GetTaddress', 'GetGoodsInfor']),
|
||
// 运费
|
||
freight(){
|
||
return this['InforData']['Freight']?this['InforData']['Freight']:'0';
|
||
},
|
||
// 商品金额
|
||
CommodityAmount(){
|
||
return this._amount(this['GetGoodsInfor']['pay_price'])
|
||
},
|
||
// 补贴卡抵扣金额
|
||
deductionPrice(){
|
||
return this._amount(this['GetGoodsInfor']['deduction_price'])
|
||
},
|
||
// 预估佣金
|
||
commission(){
|
||
return String(this['GetGoodsInfor']['self_commission']);
|
||
},
|
||
// 实际支付
|
||
// _price(){
|
||
|
||
// console.log((this['CommodityAmount']*100),(this['deductionPrice']*100),this['InforData']['Freight'],'----');
|
||
// return this._amount((this['CommodityAmount'] - this['deductionPrice']) + this['freight']);
|
||
// }
|
||
},
|
||
methods: {
|
||
...mapMutations("diy", ['SetTaddress']),
|
||
// 进入下单页面获取默认地址
|
||
GetgetDefaultAddress(){
|
||
conWalletInfoAPI().then(res => {
|
||
self['amount'] = res['data']['amount'];
|
||
getDefaultAddressAPI().then(res=>{
|
||
console.log(res,'默认地址');
|
||
// 存在默认地址
|
||
if(Object.keys(res['data'])['length'] > 0){
|
||
self['Taddress'] = res['data'];
|
||
// const area = res['data'];
|
||
// 开始获取运费
|
||
self.Getfreight(res['data']);
|
||
}else{
|
||
self['Taddress'] = {};
|
||
}
|
||
|
||
})
|
||
|
||
})
|
||
},
|
||
// 支付
|
||
paymentClick(){
|
||
uni.showLoading({
|
||
title: '支付中...'
|
||
});
|
||
const para = {
|
||
// 商品ID
|
||
goods_id:this['InforData']['goods_id'],
|
||
// 地址ID
|
||
add_id:this['Taddress']['add_id'],
|
||
// 运费
|
||
freight_price:this['freight'],
|
||
// 抵扣金额
|
||
deduction_price:this['ActualDeduction'],
|
||
// 印鸽单号
|
||
customizeNo:this['InforData']['customizeNo'],
|
||
// 生成的缩略图
|
||
effect_img:this['InforData']['thumbUrl'],
|
||
// 来源
|
||
source:this['$project']['environment']?1:0
|
||
};
|
||
console.log(para);
|
||
createOrderAPI(para).then(res=>{
|
||
console.log(res['data']);
|
||
// 回调地址
|
||
let redirect_url = '/pages/diy/pay-status/pay-status?order_sn=31ZC-DIY1673511979475297';
|
||
uni.hideLoading();
|
||
const { pay_price, order_sn, type, openid} = res['data'];
|
||
this.$Payment.H5_Payment({
|
||
pay_price,
|
||
order_sn,
|
||
type,
|
||
openid,
|
||
return_url:`/pages/diy/pay-status/pay-status?order_sn=${order_sn}`
|
||
});
|
||
// 调起支付
|
||
// this.payment({
|
||
// order_sn: res['data']['data'],
|
||
// // 仅微信环境下存在参数
|
||
// // money:res['data']['money'],
|
||
// type: res['data']['type'],
|
||
// redirect_url,
|
||
// });
|
||
})
|
||
},
|
||
|
||
// 获取运费
|
||
Getfreight(area){
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask:true
|
||
});
|
||
// 开始获取运费
|
||
const para = {
|
||
goods_id: self['InforData']['goods_id'],
|
||
city:area['region'].split('-')[0]
|
||
};
|
||
getRegionFreightAPI(para).then(res => {
|
||
uni.hideLoading();
|
||
console.log(res,'运费');
|
||
self.$set(self['InforData'],'Freight',res['data']);
|
||
self.ispjn();
|
||
self.$forceUpdate();
|
||
}).catch(res=>{
|
||
self.$set(self['InforData'],'Freight',0);
|
||
self.ispjn();
|
||
self.$forceUpdate();
|
||
})
|
||
},
|
||
|
||
ispjn(){
|
||
console.log(this['freight'],'freight');
|
||
// 商品金额
|
||
const CommodityAmount = this.calc(this['CommodityAmount'],100,'*');
|
||
// 最大抵扣金额
|
||
const deductionPrice = this.calc(this['deductionPrice'],100,'*');
|
||
// 当前抵扣卡余额
|
||
const amount = this['amount'];
|
||
// 当前余额减去最大抵扣金额是否满足抵扣
|
||
const ded = (amount - deductionPrice) >= 0 ? deductionPrice : amount;
|
||
this['ActualDeduction'] = this._amount(ded);
|
||
this['price'] = this._amount((CommodityAmount - ded) + (this.calc(this['freight'] || 0,100,'*')));
|
||
console.log(this['price'],'price');
|
||
if(!this['amount']){
|
||
uni.showToast({
|
||
title:'抵扣卡余额不足',
|
||
icon:'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F5F5F5;
|
||
.payment-content{
|
||
display: flex;
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
position: fixed;
|
||
bottom: 32rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 95%;
|
||
box-sizing: border-box;
|
||
.pay-btn{
|
||
.btn{
|
||
width: 208rpx;
|
||
height: 96rpx;
|
||
background: linear-gradient(180deg, #FFAF00 0%, #FF7700 100%);
|
||
border-radius: 20rpx;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
line-height: 94rpx;
|
||
&::after{
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
padding: 32rpx;
|
||
|
||
.Harvest-Address {
|
||
.Title {
|
||
font-size: 32rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.nothing {
|
||
width: 220rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
border: 2rpx solid #333333;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.Address {
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
|
||
.User-Infor {
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
margin-bottom: 10rpx;
|
||
|
||
.text1 {
|
||
margin-right: 32rpx;
|
||
}
|
||
}
|
||
|
||
.Address-Text {
|
||
font-size: 24rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Commodity {
|
||
margin-top: 32rpx;
|
||
padding: 20rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
|
||
&-Imgn {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
&-Img {
|
||
width: 172rpx;
|
||
height: 172rpx;
|
||
min-height: 172rpx;
|
||
min-width: 172rpx;
|
||
max-width: 172rpx;
|
||
max-height: 172rpx;
|
||
background-color: #D8D8D8;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-Infor {
|
||
padding-left: 15rpx;
|
||
flex: 1;
|
||
|
||
&-Title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
&-Sku {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
color: #999990;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.Commodity-Order-Infor {
|
||
background-color: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|