537 lines
14 KiB
Vue
537 lines
14 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 顶部导航 -->
|
||
<wd-navbar title="下单" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
|
||
|
||
<!-- 收货地址 -->
|
||
|
||
<view class="address-card" @click="selectAddress">
|
||
<view class="address-content">
|
||
<view v-if="address" class="address-text">
|
||
<view class="province-city">{{ address.receiverArea }} {{ address.receiverAddress }}</view>
|
||
<view class="address-detail">{{ address.receiverName }} {{ address.receiverPhone }}</view>
|
||
</view>
|
||
|
||
<view class="address-text" v-else>请选择地址</view>
|
||
<view class="arrow-right">
|
||
<image src="/static/y.png" style="width: 45rpx; height: 45rpx"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="product-section">
|
||
<view class="section-title">商品信息</view>
|
||
<view class="product-list">
|
||
<view class="product-item" @click="viewProduct">
|
||
<!-- src="/images/product.jpg" -->
|
||
<image class="product-image" :src="goods.cover" mode="aspectFill"></image>
|
||
<view class="product-info">
|
||
<view class="product-name">{{ goods.name }}</view>
|
||
<view class="product-count">{{ goods.specs }}</view>
|
||
<view style="font-size: 36rpx; font-weight: bold; color: #ff2929">￥{{ goods.currentPrice }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="arrow-right">
|
||
<image src="/static/y.png" style="width: 45rpx; height: 45rpx"></image>
|
||
</view>
|
||
</view>
|
||
<view class="price-item" style="margin-top: 25rpx">
|
||
<text class="price-label">商品数量</text>
|
||
<view class="price-value">
|
||
<wd-input-number v-model="dataFrom.goodsNum" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 价格明细 -->
|
||
<!-- <view class="price-section">
|
||
<view class="section-title">价格明细</view>
|
||
<view class="price-item">
|
||
<text class="price-label">商品金额</text>
|
||
<text class="price-value" style="color: #ff2929">¥ {{ goods.currentPrice }}</text>
|
||
</view>
|
||
|
||
<view class="price-item">
|
||
<text class="price-label">商品数量</text>
|
||
<view class="price-value">
|
||
<wd-input-number v-model="GoodsNum" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="price-total">
|
||
<text class="price-label">合计</text>
|
||
<text class="price-value total">¥ {{ goods.currentPrice * GoodsNum }}</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 订单备注 -->
|
||
<view class="remark-section">
|
||
<view class="section-title">订单备注</view>
|
||
<view class="remark-content">
|
||
<wd-textarea style="height: 100rpx" v-model="dataFrom.note" placeholder="请填写订单备注" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 抵扣 -->
|
||
<view class="price-section">
|
||
<view class="section-title">支付方式</view>
|
||
<view class="price-item-pay" :class="dataFrom.payType == 1 ? 'active-border' : ''" @click="changePayType(1)">
|
||
<view style="width: 350rpx; text-align: center" class="price-label">余额支付</view>
|
||
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
|
||
<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
|
||
<text style="color: #aaa">可用余额：</text>
|
||
{{ userInfo.money || 0 }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 1">
|
||
<view style="color: #aaa; font-size: 24rpx">
|
||
当前权益等级：{{ userInfo.userRights.rights.rightsName }}
|
||
<text style="margin-left: 30rpx">
|
||
可享受折扣：
|
||
<text style="color: #ff2929">{{ userInfo.userRights.rights.rightsDiscount / 10 }}折</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="price-item-pay" :class="dataFrom.payType == 2 ? 'active-border' : ''" @click="changePayType(2)">
|
||
<view style="width: 350rpx; text-align: center" class="price-label">权益货值</view>
|
||
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
|
||
<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
|
||
<text style="color: #aaa">可用抵扣：</text>
|
||
{{ userInfo.userRights.pice || 0 }}
|
||
</view>
|
||
</view>
|
||
<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 2">
|
||
<view style="color: #aaa; font-size: 24rpx">提示：抵扣金额不足时，自动使用余额补足</view>
|
||
</view>
|
||
|
||
<view class="price-item-pay" style="flex-direction: column" :class="dataFrom.payType == 3 ? 'active-border' : ''" @click="changePayType(3)">
|
||
<view style="display: flex; align-items: center; justify-content: space-between">
|
||
<view style="width: 350rpx; text-align: center" class="price-label">混合支付</view>
|
||
<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
|
||
|
||
<view v-if="dataFrom.payType == 3">
|
||
<view
|
||
style="width: 350rpx; color: #ff2929; text-align: center"
|
||
class="price-value"
|
||
v-if="goods.currentPrice * dataFrom.goodsNum > userInfo.userRights.pice + userInfo.money"
|
||
>
|
||
<view>
|
||
<text style="color: #aaa">余额：</text>
|
||
<text v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice > userInfo.money">
|
||
{{userInfo.money}}
|
||
</text>
|
||
<text v-else>
|
||
{{ goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice }}
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text style="color: #aaa">抵扣：</text>
|
||
<text v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.money > userInfo.userRights.pice">
|
||
{{userInfo.userRights.pice}}
|
||
</text>
|
||
<text v-else>
|
||
{{ goods.currentPrice * dataFrom.goodsNum - userInfo.money }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view
|
||
style="width: 350rpx; color: #ff2929; text-align: center"
|
||
class="price-value"
|
||
v-if="goods.currentPrice * dataFrom.goodsNum < userInfo.userRights.pice + userInfo.money"
|
||
>
|
||
<view v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice < 0">
|
||
<text style="color: #aaa">余额：</text>
|
||
{{ 0 }}
|
||
</view>
|
||
<view v-else>
|
||
<text style="color: #aaa">余额：</text>
|
||
{{ goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice }}
|
||
</view>
|
||
<view>
|
||
<text style="color: #aaa">抵扣：</text>
|
||
{{ goods.currentPrice * dataFrom.goodsNum < userInfo.userRights.pice ? goods.currentPrice * dataFrom.goodsNum : userInfo.userRights.pice }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<text style="color: #aaa">-</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 3">
|
||
<view style="color: #aaa; font-size: 24rpx">提示：混合支付时优先使用抵扣金额</view>
|
||
</view>
|
||
|
||
<!-- <view class="price-section">
|
||
<view class="price-item">
|
||
<text class="price-label">商品金额</text>
|
||
<text class="price-value" style="color: #ff2929">¥ {{ goods.currentPrice }}</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view class="price-item">
|
||
<view class="price-label">是否使用抵扣金额</view>
|
||
<view>
|
||
<wd-radio-group shape="dot" inline v-model="typePay">
|
||
<wd-radio :value="1" :disabled="!userInfo.userRights">是</wd-radio>
|
||
<wd-radio :value="2">否</wd-radio>
|
||
</wd-radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="price-item">
|
||
<text class="price-label">当前余额</text>
|
||
<text class="price-value" style="color: #ff2929">¥ {{ userInfo.money || 0 }}</text>
|
||
</view>
|
||
<view class="price-item">
|
||
<text class="price-label">当前抵扣金额</text>
|
||
<text class="price-value" style="color: #ff2929">¥ {{ userInfo.userRights.pice || 0 }}</text>
|
||
</view>
|
||
<view class="price-item">
|
||
<text class="price-label">可抵扣金额</text>
|
||
<text class="price-value" style="color: #ff2929">¥ {{ userInfo.userRights.pice || 0 }}</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view style="height: 130rpx"></view>
|
||
|
||
<!-- 底部结算栏 -->
|
||
<view class="footer">
|
||
<view class="total-price">
|
||
合计：
|
||
<text style="color: #ff2929" v-if="dataFrom.payType == 1">¥ {{ (goods.currentPrice * dataFrom.goodsNum * userInfo.userRights.rights.rightsDiscount) / 100 }}</text>
|
||
<text style="color: #ff2929" v-if="dataFrom.payType == 2">¥ {{ goods.currentPrice * dataFrom.goodsNum }}</text>
|
||
<text style="color: #ff2929" v-if="dataFrom.payType == 3">¥ {{ goods.currentPrice * dataFrom.goodsNum }}</text>
|
||
</view>
|
||
<view class="pay-button" @click="submitOrder">确认支付</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { toast } from '@/utils/fun.js';
|
||
import api from '@/api/index';
|
||
import { Store } from '@/store';
|
||
const store = Store();
|
||
|
||
const userInfo = computed(() => {
|
||
if (!store.userInfo.userRights) {
|
||
dataFrom.value.payType = 2;
|
||
}
|
||
return (
|
||
store.userInfo || {
|
||
inviteCode: '',
|
||
nickname: '',
|
||
mobile: '',
|
||
avatar: '',
|
||
paywallet: {
|
||
balance: 0
|
||
},
|
||
userRights: null
|
||
}
|
||
);
|
||
});
|
||
|
||
const goods = ref({});
|
||
const address = ref(null);
|
||
|
||
const dataFrom = ref({
|
||
goodsId: null,
|
||
goodsNum: 1,
|
||
totalAmount: 0,
|
||
payableAmount: 0,
|
||
payAmount: 0,
|
||
payType: 1,
|
||
receiverId: null,
|
||
note: '',
|
||
orderType: 1
|
||
});
|
||
|
||
const submitOrder = () => {
|
||
//余额支付
|
||
if (dataFrom.value.payType == 1) {
|
||
//存在权益包
|
||
if (userInfo.value.userRights) {
|
||
if ((goods.value.currentPrice * dataFrom.value.goodsNum * userInfo.value.userRights.rights.rightsDiscount) / 100 > userInfo.value.money) {
|
||
toast('当前可用余额不足');
|
||
return;
|
||
}
|
||
dataFrom.value.payAmount = (goods.value.currentPrice * dataFrom.value.goodsNum * userInfo.value.userRights.rights.rightsDiscount) / 100;
|
||
dataFrom.value.payableAmount = dataFrom.value.payAmount;
|
||
dataFrom.value.totalAmount = goods.value.currentPrice * dataFrom.value.goodsNum;
|
||
}
|
||
}
|
||
|
||
// 权益包支付
|
||
if (dataFrom.value.payType == 2) {
|
||
//判断权益包货值是否大于总金额
|
||
if (goods.value.currentPrice * dataFrom.value.goodsNum > userInfo.value.userRights.pice) {
|
||
// 判断权益货值+余额是否>商品总价 >走混合支付
|
||
|
||
console.log(goods.value.currentPrice * dataFrom.value.goodsNum);
|
||
console.log(userInfo.value.userRights.pice + userInfo.value.money);
|
||
console.log(goods.value.currentPrice * dataFrom.value.goodsNum > userInfo.value.userRights.pice + userInfo.value.money);
|
||
|
||
if (goods.value.currentPrice * dataFrom.value.goodsNum < userInfo.value.userRights.pice + userInfo.value.money) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '当前货值不足，是否使用余额补足？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
toast('当前权益货值不足');
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
|
||
api.orderCreate(dataFrom.value).then((res: any) => {
|
||
uni.navigateTo({
|
||
url: '/pages/order/success?id=' + res.id
|
||
});
|
||
});
|
||
};
|
||
|
||
onLoad(async (options: any) => {
|
||
dataFrom.value.goodsId = options.id;
|
||
|
||
await store.usersGetInfo();
|
||
|
||
api.goodsInfo({ id: options.id }).then((res: any) => {
|
||
goods.value = res;
|
||
});
|
||
|
||
api.addressPage({ isDefault: 1 }).then((res: any) => {
|
||
if (res.list.length !== 0) {
|
||
address.value = res.list[0];
|
||
// 赋值默认收货地址;
|
||
dataFrom.value.receiverId = address.value.id;
|
||
}
|
||
});
|
||
|
||
uni.$on('address', (e) => {
|
||
address.value = e;
|
||
});
|
||
});
|
||
|
||
const selectAddress = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/address/list?type=1'
|
||
});
|
||
};
|
||
|
||
const viewProduct = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/goods/goods?id=' + goods.value.id
|
||
});
|
||
};
|
||
|
||
const changePayType = (e = 1) => {
|
||
dataFrom.value.payType = e;
|
||
};
|
||
|
||
const back = () => {
|
||
uni.navigateBack();
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #f5f5f5;
|
||
position: relative;
|
||
}
|
||
|
||
/* 地址卡片 */
|
||
.address-card {
|
||
margin: 25rpx;
|
||
margin-bottom: 0;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.address-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.address-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.province-city {
|
||
font-size: 15px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.address-detail {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.arrow-right {
|
||
color: #ccc;
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 商品部分 */
|
||
.product-section {
|
||
margin: 25rpx;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 15px;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.product-list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.product-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.product-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 4px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.product-count {
|
||
font-size: 13px;
|
||
color: #999;
|
||
margin: 10rpx 0;
|
||
}
|
||
|
||
/* 价格明细 */
|
||
.price-section {
|
||
margin: 25rpx;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.price-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
}
|
||
.price-item-pay {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 15rpx;
|
||
padding: 24rpx 0rpx;
|
||
border: 1rpx solid #f7f7f7;
|
||
border-radius: 10rpx;
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.price-total {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.price-label {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.price-value {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.total {
|
||
color: #ff2929;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 订单备注 */
|
||
.remark-section {
|
||
margin: 25rpx;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.remark-content {
|
||
border-radius: 16rpx;
|
||
border: 1rpx solid #f7f7f7;
|
||
overflow: hidden;
|
||
height: 100rpx;
|
||
}
|
||
|
||
/* 底部结算栏 */
|
||
.footer {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100rpx;
|
||
padding: 0 30rpx;
|
||
background-color: #fff;
|
||
border-top: 1rpx solid #eee;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.pay-button {
|
||
background-color: #799675;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
padding: 0 30px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
border-radius: 18px;
|
||
}
|
||
|
||
.active-border {
|
||
background-color: rgba(121, 150, 117, 0.1);
|
||
border: 1rpx solid #799675;
|
||
.price-label {
|
||
color: #799675;
|
||
}
|
||
}
|
||
</style>
|