1275 lines
31 KiB
Vue
1275 lines
31 KiB
Vue
<template>
|
||
<view class="order-create-container">
|
||
<view class="info-cell address-info-cell" @click="jumpToAddress">
|
||
<view class="address-content">
|
||
<view class="address-row-first">
|
||
<image class="address-icon" src="@/static/images/address.png" />
|
||
<text v-if="!addressInfo.id" class="address-placeholder">
|
||
添加收货地址
|
||
</text>
|
||
<template v-else>
|
||
<text class="address-name">
|
||
{{ addressInfo.recipient_name || "" }}
|
||
<text class="address-phone">
|
||
{{ addressInfo.phone || "" }}
|
||
</text>
|
||
</text>
|
||
</template>
|
||
</view>
|
||
<view v-if="addressInfo" class="address-row-second">
|
||
<text class="address-details">
|
||
{{ addressInfo.full_address || "" }}
|
||
</text>
|
||
</view>
|
||
<image v-if="!petOrderAddressId" class="arrow-icon" :src="`${imgPrefix}right-arrow.png`"
|
||
mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="!petOrderId" class="info-cell sliver-info-cell" @click="openSliverModal">
|
||
<view class="flex-row-start sliver-content">
|
||
<image class="sliver-icon" src="./static/sliver-icon.png" mode="widthFix" />
|
||
<view class="sliver-text">
|
||
{{ !sliverInfo.id ? "请选择配送方式" : sliverInfo.name }}
|
||
</view>
|
||
<image class="arrow-icon" :src="`${imgPrefix}right-arrow.png`" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="info-cell goods-info-cell">
|
||
<template>
|
||
<view class="goods-item" v-for="(item, index) in orderData" :key="index">
|
||
<image class="goods-img" :src="item.item_pic || item.product_pic " mode="aspectFill" />
|
||
<view class="goods-content">
|
||
<view class="goods-row-first">
|
||
<view class="goods-name">{{ item.item_name || item.product_name }}</view>
|
||
<text class="goods-price">¥{{ item.product_price }}</text>
|
||
</view>
|
||
<view class="goods-row-second">
|
||
<!-- <view class="goods-spec">
|
||
{{ item.shuxing_name || "" }}{{ item.shuxing_name && item.price_name ? ";" : "" }}{{ item.price_name || "" }}
|
||
</view> -->
|
||
<text class="goods-count">共{{ item.number || 1 }}件</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<view class="info-cell pay-cell">
|
||
<view class="flex-row-between pay-info">
|
||
<text class="pay-label">商品金额</text>
|
||
<text class="pay-value">￥{{ payPrice }}</text>
|
||
</view>
|
||
<view v-if="couponList.length" class="flex-row-between pay-info coupon-row" @click="showCouponModal = true">
|
||
<text class="pay-label">优惠券</text>
|
||
<view class="flex-row-end">
|
||
<text class="coupon-price">
|
||
{{ couponFee ? `- ￥${couponFee}` : "请选择" }}
|
||
</text>
|
||
<image class="arrow-icon" src="@/static/images/arrow_right_black.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view class="flex-row-between pay-info">
|
||
<text class="pay-label">运费</text>
|
||
<text class="pay-value">{{ sliverFee ? `￥${sliverFee}` : "包邮" }}</text>
|
||
</view>
|
||
<view class="flex-row-between pay-price">
|
||
<text class="pay-label">需付款</text>
|
||
<text class="pay-total">￥{{ payPrice }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="flex-row-start info-cell pay-type">
|
||
<image class="pay-icon" src="./static/wx_pay.png" />
|
||
<view class="fs-30 app-fc-main pay-type-text"> 微信支付 </view>
|
||
<image
|
||
class="pay-select-icon"
|
||
src="@/static/images/cart_checked.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view> -->
|
||
<view class="info-cell payment-method-cell">
|
||
<view class="payment-item" @click.stop="selectOption1('1')">
|
||
<view class="payment-left">
|
||
<image class="payment-icon" src="@/static/images/wx.png" mode="widthFix" />
|
||
<text class="payment-text">微信支付</text>
|
||
</view>
|
||
<image class="payment-check"
|
||
:src="selected2 ? require('@/static/images/cart_checked.png') : require('@/static/images/unchecked.png')"
|
||
mode="widthFix" />
|
||
</view>
|
||
<view class="payment-item" @click.stop="selectOption2('2')">
|
||
<view class="payment-left">
|
||
<image class="payment-icon" src="@/static/images/wallet.png" mode="widthFix" />
|
||
<text class="payment-text">钱包支付</text>
|
||
<!-- <text class="payment-text">钱包支付(￥{{ walletBalance || '0.00' }})</text> -->
|
||
|
||
</view>
|
||
<image class="payment-check"
|
||
:src="selected4 ? require('@/static/images/cart_checked.png') : require('@/static/images/unchecked.png')"
|
||
mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 右侧浮动联系客服按钮 -->
|
||
<view class="contact-float-btn"
|
||
:style="{ right: contactBtnRight + 'rpx', bottom: contactBtnBottom +100 +'rpx' }"
|
||
@touchstart="onContactBtnTouchStart" @touchmove="onContactBtnTouchMove" @touchend="onContactBtnTouchEnd"
|
||
@click="handleContactBtnClick">
|
||
<image class="contact-icon" :src="`${imgPrefix}supportStaff.png`" />
|
||
<view class="contact-btn fs-20">
|
||
联系客服
|
||
</view>
|
||
</view>
|
||
|
||
<view class="place-view"></view>
|
||
|
||
<view class="order-create-bottom">
|
||
<view class="cancel-btn" @click="cancelOrder">
|
||
<text class="cancel-btn-text">取消订单</text>
|
||
</view>
|
||
<view class="pay-btn" @click="confirmPay">
|
||
<text class="pay-btn-text">立即支付</text>
|
||
</view>
|
||
</view>
|
||
|
||
<select-modal v-if="showSliverModal" title="请选择配送方式" @close="showSliverModal = false">
|
||
<view class="sliver-content">
|
||
<!-- :class="{ disabled: !serviceOrderList.length && item.id === 2 }" -->
|
||
<view class="flex-row-between sliver-item" v-for="item in sliverTypeList" :key="item.id"
|
||
@click="changeSliverType(item)">
|
||
<text class="fs-32 app-fc-main">{{ item.name }}</text>
|
||
<image class="select-icon" :src="
|
||
item.id === selectSliverInfo.id
|
||
? require('@/static/images/cart_checked.png')
|
||
: require('@/static/images/unchecked.png')
|
||
" />
|
||
</view>
|
||
<view class="flex-center fs-30 app-fc-white sliver-btn" @click="confirmSliverType">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</select-modal>
|
||
|
||
<good-info-modal v-if="showGoodInfoModal" :goods="orderData" @close="showGoodInfoModal = false" />
|
||
|
||
<recharge-coupon-modal v-if="showCouponModal" :couponList="usefullCouponList" :price="orderPrice"
|
||
:showOptBtn="true" @useCoupon="useCoupon" @close="showCouponModal = false" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import SelectModal from "@/components/select-modal.vue";
|
||
import GoodInfoModal from "./components/GoodInfoModal.vue";
|
||
import RechargeCouponModal from "@/components/coupon/RechargeCouponModal.vue";
|
||
import {
|
||
getCouponListByOrderPrice,
|
||
getOwnCouponData
|
||
} from "../../../api/coupon";
|
||
import {
|
||
createCartOrder,
|
||
createOrder,
|
||
payOrder
|
||
} from "../../../api/shop";
|
||
import {
|
||
getOrderList
|
||
} from "../../../api/order";
|
||
import {
|
||
ORDER_STATUS_COMPLETED
|
||
} from "../../../pageHome/constants/home";
|
||
import {
|
||
getAddressInfo
|
||
} from "../../../api/address";
|
||
import {
|
||
COUPON_TYPE_GOODS
|
||
} from '../../../constants/app.business';
|
||
import {
|
||
walletTransaction
|
||
} from "../../../api/login";
|
||
import {
|
||
imgPrefix,
|
||
jumpToWeChat
|
||
} from "@/utils/common";
|
||
|
||
const sliverList = [{
|
||
name: "快递配送",
|
||
id: 1,
|
||
},
|
||
{
|
||
name: "和服务订单一起随车派送",
|
||
id: 2,
|
||
},
|
||
];
|
||
|
||
export default {
|
||
components: {
|
||
SelectModal,
|
||
GoodInfoModal,
|
||
RechargeCouponModal,
|
||
},
|
||
data() {
|
||
return {
|
||
payPrice:0,
|
||
type: "",
|
||
orderData: [],
|
||
addressInfo: {},
|
||
sliverInfo: {},
|
||
selectSliverInfo: {},
|
||
showSliverModal: false,
|
||
sliverTypeList: sliverList,
|
||
showGoodInfoModal: false,
|
||
showCouponModal: false,
|
||
couponList: [],
|
||
serviceOrderList: [],
|
||
useCouponInfo: null, // 当前使用的优惠券信息
|
||
petOrderId: "",
|
||
petOrderAddressId: "",
|
||
orderPrice: 0,
|
||
confirmPrice: 0,
|
||
selected1: false,
|
||
selected2: false,
|
||
selected3: false,
|
||
selected4: true, // 默认选中钱包支付
|
||
recharge: true,
|
||
record: false,
|
||
walletBalance: "1000.00", // 钱包余额，实际应该从接口获取
|
||
imgPrefix,
|
||
WeChat: undefined,
|
||
wallet: "2", // 默认选中钱包支付
|
||
// 联系客服按钮拖拽相关
|
||
contactBtnRight: 0, // 默认右侧距离，始终为0
|
||
contactBtnBottom: 0, // 默认底部距离，需要计算
|
||
isDragging: false, // 是否正在拖拽
|
||
touchStartX: 0, // 触摸开始X坐标
|
||
touchStartY: 0, // 触摸开始Y坐标
|
||
initialRight: 0, // 初始右侧距离
|
||
initialBottom: 0, // 初始底部距离
|
||
};
|
||
},
|
||
computed: {
|
||
goodsImgs() {
|
||
return this.orderData.map((item) => item.goods_pic).filter((v) => !!v);
|
||
},
|
||
sliverFee() {
|
||
return this.orderData.reduce((total, prev) => total + +prev.yunfei, 0);
|
||
},
|
||
couponFee() {
|
||
return +this.useCouponInfo?.card_money || 0;
|
||
},
|
||
usefullCouponList() {
|
||
return this.couponList.filter((v) => +v.card_money < this.orderPrice);
|
||
},
|
||
},
|
||
onLoad(option) {
|
||
// console.log(option,'??')
|
||
// console.log(JSON.parse(option.petList))
|
||
|
||
// console.log( JSON.parse(),'?')
|
||
const {
|
||
type,
|
||
petOrderId = "",
|
||
petOrderAddressId = ""
|
||
} = option;
|
||
this.type = type;
|
||
this.petOrderId = petOrderId;
|
||
this.petOrderAddressId = petOrderAddressId;
|
||
|
||
// 初始化联系客服按钮位置
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const windowHeight = systemInfo.windowHeight;
|
||
// 计算底部距离：calc(35vh - 130rpx - 48rpx) 转换为rpx
|
||
// 35vh = windowHeight * 0.35，转换为rpx (750rpx = windowHeight px)
|
||
const vh35InRpx = (windowHeight * 0.35 / windowHeight) * 750;
|
||
this.contactBtnBottom = vh35InRpx - 130 - 48;
|
||
|
||
// 随车购收货地址id
|
||
if (petOrderAddressId) {
|
||
getAddressInfo(petOrderAddressId).then((res) => {
|
||
this.addressInfo = {
|
||
...res?.info,
|
||
};
|
||
});
|
||
}
|
||
uni.$on("selectAddress", this.addressChange);
|
||
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
eventChannel.on("createOrder", (data) => {
|
||
this.orderData = data?.goodList || [];
|
||
this.payPrice = (data?.goodList || []).reduce((sum, item) => sum + Number(item.product_price * item.number || 0), 0);
|
||
console.log(data,'--=?')
|
||
const price = this.orderData.reduce(
|
||
(total, prev) => total + +prev.item_price,
|
||
0
|
||
);
|
||
this.orderPrice = +price.toFixed(2);
|
||
this.confirmPrice = +(this.orderPrice - this.couponFee).toFixed(2);
|
||
this.getCouponList();
|
||
// this.type === "cart" ? this.creatCartOrder(true) : this.createOrder(true);
|
||
});
|
||
|
||
// 查询服务订单
|
||
// this.getServiceOrderList();
|
||
},
|
||
methods: {
|
||
// 设置默认使用优惠券
|
||
setDefaultCoupon() {
|
||
let fee = 0;
|
||
let coupon;
|
||
this.couponList.map((v) => {
|
||
if (+v.card_money < this.orderPrice && +v.card_money > fee) {
|
||
fee = +v.card_money;
|
||
coupon = {
|
||
...v
|
||
};
|
||
}
|
||
});
|
||
this.useCouponInfo = coupon;
|
||
// 购物车进来的需要预下单
|
||
if (coupon?.coupon_id) {
|
||
this.type === "cart" ?
|
||
this.creatCartOrder(true) :
|
||
this.createOrder(true);
|
||
}
|
||
},
|
||
// 已支付服务订单
|
||
getServiceOrderList() {
|
||
getOrderList(1, 1, ORDER_STATUS_COMPLETED).then((res) => {
|
||
this.serviceOrderList = res?.info || [];
|
||
});
|
||
},
|
||
// 获取已领取待使用的优惠券列表
|
||
getCouponList() {
|
||
getCouponListByOrderPrice(this.orderPrice, COUPON_TYPE_GOODS).then((res) => {
|
||
this.couponList = res?.info || [];
|
||
// 若接口比与下单接口慢，需要再设置下默认优惠券
|
||
if (!this.useCouponInfo) {
|
||
this.setDefaultCoupon();
|
||
}
|
||
});
|
||
},
|
||
// 创建订单
|
||
createOrder(isPrePay) {
|
||
// console.log(this.addressInfo,'--==?')
|
||
// const {
|
||
// goods_id,
|
||
// price_id,
|
||
// number,
|
||
// shuxing_name
|
||
// } = this.orderData?.[0];
|
||
|
||
return new Promise((resolve, reject) => {
|
||
if (!isPrePay) {
|
||
// 快递配送/随车订单必填收货地址
|
||
// if (!this.petOrderId) {
|
||
if (!this.addressInfo?.id) {
|
||
uni.showToast({
|
||
title: "请选择收货地址",
|
||
icon: "none",
|
||
});
|
||
return reject();
|
||
}
|
||
if (!this.sliverInfo?.id) {
|
||
uni.showToast({
|
||
title: "请选择配送方式",
|
||
icon: "none",
|
||
});
|
||
return reject();
|
||
}
|
||
// }
|
||
uni.showLoading({
|
||
title: "处理中",
|
||
mask: true,
|
||
});
|
||
}
|
||
// console.log(this.orderData,'--=?')
|
||
const item = {
|
||
product_id:this.orderData[0].id,
|
||
price_id:this.orderData[0].prices[0].id,
|
||
price_desc:this.orderData[0].product_desc,
|
||
product_name:this.orderData[0].product_name,
|
||
product_pic:this.orderData[0].product_pic,
|
||
number:this.orderData[0].number,
|
||
product_price:this.orderData[0].prices[0].actual_price
|
||
}
|
||
|
||
createCartOrder({
|
||
type:this.sliverInfo.id,
|
||
original_price:this.orderData[0].prices[0].original_price, //付款金额
|
||
actual_price:this.payPrice + '', //付款金额
|
||
reduction_amount:'0',
|
||
pay_amount:this.payPrice +'', //付款金额
|
||
pay_type: Number(this.WeChat) || Number(this.wallet), //微信和钱包type
|
||
address_id:this.addressInfo.id, //地址id
|
||
address:this.addressInfo.full_address, //地址
|
||
name:this.addressInfo.recipient_name,
|
||
phone:this.addressInfo.phone,
|
||
note:'', //备注
|
||
items:item
|
||
})
|
||
.then((res) => {
|
||
if (isPrePay) {
|
||
this.confirmPrice = +(res?.info?.pay_price || 0).toFixed(2);
|
||
this.orderPrice = +(res?.info?.price || 0).toFixed(2);
|
||
!this.useCouponInfo && this.setDefaultCoupon();
|
||
} else {
|
||
|
||
if (this.WeChat == 1) {
|
||
this.pay(res?.data);
|
||
} else if (this.wallet == 2) {
|
||
this.buyService(res?.data);
|
||
}
|
||
}
|
||
resolve();
|
||
})
|
||
.catch((err) => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err || "支付失败",
|
||
icon: "none",
|
||
});
|
||
reject();
|
||
});
|
||
});
|
||
},
|
||
buyService(order) {
|
||
uni.showLoading({
|
||
title: "处理中",
|
||
mask: true,
|
||
});
|
||
const value = (this.$store.state && this.$store.state.user && this.$store.state.user.userInfo) || {};
|
||
// console.log(this.selectService,'---')
|
||
const data = {
|
||
wallet_id: value.wallet_id,
|
||
total_fee: this.payPrice,
|
||
type: 4,
|
||
order_id: order.order_id,
|
||
order_no: order.order_no
|
||
}
|
||
walletTransaction(data).then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'none'
|
||
})
|
||
uni.requestSubscribeMessage({
|
||
tmplIds: ['QoTeQwj4xw2UQMK5jI67MzAVOo6og76oqZ7BDIJW7cE',
|
||
'GPWlTkaNbi7JqvxltLKuZZMtKedSZfEKlirV7yOUu-0'
|
||
], // TEMPLATE_ID替换为选用的模版id
|
||
success(res) {
|
||
uni.hideLoading()
|
||
if (res['QoTeQwj4xw2UQMK5jI67MzAVOo6og76oqZ7BDIJW7cE'] === 'accept') {
|
||
// setSubscribeStatus(true, '已订阅')
|
||
uni.showToast({
|
||
title: '订阅成功',
|
||
icon: 'success',
|
||
})
|
||
}
|
||
if (res['GPWlTkaNbi7JqvxltLKuZZMtKedSZfEKlirV7yOUu-0'] === 'accept') {
|
||
// setSubscribeStatus(true, '已订阅')
|
||
uni.showToast({
|
||
title: '订阅成功',
|
||
icon: 'success',
|
||
})
|
||
}
|
||
},
|
||
fail() {
|
||
uni.showToast({
|
||
title: '订阅失败',
|
||
icon: 'error',
|
||
})
|
||
},
|
||
complete: () => {
|
||
// isSubscribing = false
|
||
},
|
||
})
|
||
if (this.petOrderId) {
|
||
this.jumpToPetOrder();
|
||
return;
|
||
}
|
||
uni.redirectTo({
|
||
url: `/pages/client/order/details?id=${order.order_id}`,
|
||
});
|
||
|
||
} else if (res.code == 400) {
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none'
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
// 创建购物车订单
|
||
creatCartOrder(isPrePay) {
|
||
return new Promise((resolve, reject) => {
|
||
if (!isPrePay) {
|
||
// console.log(this.addressInfo,'--=!')
|
||
// 快递配送/随车订单必填收货地址
|
||
if (!this.petOrderId) {
|
||
if (!this.addressInfo?.id) {
|
||
uni.showToast({
|
||
title: "请选择收货地址",
|
||
icon: "none",
|
||
});
|
||
return reject();
|
||
}
|
||
if (!this.sliverInfo?.id) {
|
||
uni.showToast({
|
||
title: "请选择配送方式",
|
||
icon: "none",
|
||
});
|
||
return reject();
|
||
}
|
||
}
|
||
uni.showLoading({
|
||
title: "处理中",
|
||
mask: true,
|
||
});
|
||
}
|
||
// console.log(this.orderData,'--=')
|
||
// console.log(this.sliverInfo,'==--==')
|
||
|
||
createCartOrder({
|
||
type:this.sliverInfo.id,
|
||
original_price:this.orderData[0].prices[0].original_price, //付款金额
|
||
actual_price:this.payPrice + '', //付款金额
|
||
reduction_amount:'0',
|
||
pay_amount:this.payPrice + '', //付款金额
|
||
pay_type: Number(this.WeChat) || Number(this.wallet), //微信和钱包type
|
||
address_id:this.addressInfo.id, //地址id
|
||
address:this.addressInfo.full_address, //地址
|
||
name:this.addressInfo.recipient_name,
|
||
phone:this.addressInfo.phone,
|
||
note:'', //备注
|
||
items:this.orderData
|
||
})
|
||
.then((res) => {
|
||
if (isPrePay) {
|
||
this.confirmPrice = +(res?.data?.pay_amount || 0).toFixed(2);
|
||
this.orderPrice = +(res?.data?.original_price || 0).toFixed(2);
|
||
!this.useCouponInfo && this.setDefaultCoupon();
|
||
} else {
|
||
if (this.WeChat == 1) {
|
||
this.pay(res?.data);
|
||
} else if (this.wallet == 2) {
|
||
this.buyService(res?.data);
|
||
}
|
||
}
|
||
return resolve();
|
||
})
|
||
.catch(() => {
|
||
return reject();
|
||
});
|
||
});
|
||
},
|
||
// 支付订单
|
||
pay(orderId) {
|
||
payOrder({
|
||
type:4,
|
||
total_fee: Number(this.payPrice),
|
||
order_id:orderId.order_id,
|
||
order_no:orderId.order_no
|
||
})
|
||
.then((res) => {
|
||
const payData = res?.data || {};
|
||
console.log(payData,'--=')
|
||
uni.requestPayment({
|
||
provider: "wxpay",
|
||
timeStamp: payData.timeStamp,
|
||
nonceStr: payData.nonceStr,
|
||
package: payData.package,
|
||
signType: payData.signType,
|
||
paySign: payData.paySign,
|
||
success: (res) => {
|
||
console.log(res,'--==')
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
icon: "none",
|
||
});
|
||
uni.requestSubscribeMessage({
|
||
tmplIds: ['QoTeQwj4xw2UQMK5jI67MzAVOo6og76oqZ7BDIJW7cE',
|
||
'GPWlTkaNbi7JqvxltLKuZZMtKedSZfEKlirV7yOUu-0'
|
||
], // TEMPLATE_ID替换为选用的模版id
|
||
success(res) {
|
||
uni.hideLoading()
|
||
if (res['QoTeQwj4xw2UQMK5jI67MzAVOo6og76oqZ7BDIJW7cE'] ===
|
||
'accept') {
|
||
// setSubscribeStatus(true, '已订阅')
|
||
uni.showToast({
|
||
title: '订阅成功',
|
||
icon: 'success',
|
||
})
|
||
}
|
||
if (res['GPWlTkaNbi7JqvxltLKuZZMtKedSZfEKlirV7yOUu-0'] ===
|
||
'accept') {
|
||
// setSubscribeStatus(true, '已订阅')
|
||
uni.showToast({
|
||
title: '订阅成功',
|
||
icon: 'success',
|
||
})
|
||
}
|
||
},
|
||
fail() {
|
||
uni.showToast({
|
||
title: '订阅失败',
|
||
icon: 'error',
|
||
})
|
||
},
|
||
complete: () => {
|
||
// isSubscribing = false
|
||
},
|
||
})
|
||
|
||
if (this.petOrderId) {
|
||
this.jumpToPetOrder();
|
||
return;
|
||
}
|
||
uni.redirectTo({
|
||
url: `/pages/client/order/details?id=${orderId.order_id}`,
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err?.msg || "支付失败",
|
||
icon: "none",
|
||
});
|
||
uni.redirectTo({
|
||
url: `/pages/client/order/details?id=${orderId.order_id}`,
|
||
});
|
||
},
|
||
});
|
||
})
|
||
.catch((err) => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err || "支付失败",
|
||
icon: "none",
|
||
});
|
||
uni.redirectTo({
|
||
url: `/pages/client/order/details?id=${orderId.order_id}`,
|
||
});
|
||
});
|
||
},
|
||
selectOption1(v) {
|
||
this.WeChat = v
|
||
this.wallet = ''
|
||
console.log(this.WeChat)
|
||
this.selected1 = false;
|
||
this.selected2 = true;
|
||
this.selected3 = true;
|
||
this.selected4 = false;
|
||
},
|
||
selectOption2(v) {
|
||
this.WeChat = ''
|
||
this.wallet = v
|
||
console.log(this.wallet)
|
||
this.selected1 = true;
|
||
this.selected2 = false;
|
||
this.selected3 = false;
|
||
this.selected4 = true;
|
||
},
|
||
// 跳转至宠物订单随车购入口
|
||
jumpToPetOrder() {
|
||
const pages = getCurrentPages();
|
||
const detailsIndex = pages.findIndex((v) =>
|
||
v.route === "pageHome/order/order-detail-page"
|
||
);
|
||
const listIndex = pages.findIndex((v) =>
|
||
v.route === "pages/client/index/index"
|
||
);
|
||
if (detailsIndex > -1) {
|
||
uni.navigateBack({
|
||
delta: pages.length - detailsIndex - 1,
|
||
});
|
||
return
|
||
}
|
||
if (listIndex > -1) {
|
||
uni.navigateBack({
|
||
delta: pages.length - listIndex - 1,
|
||
});
|
||
return
|
||
}
|
||
},
|
||
jumpToAddress() {
|
||
if (this.petOrderAddressId) {
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: `/pageHome/selectAddress/index?typeSelect=1&addressId=${
|
||
this.addressInfo?.address_id || ""
|
||
}`,
|
||
});
|
||
},
|
||
addressChange(addressInfo) {
|
||
this.addressInfo = addressInfo;
|
||
console.log(this.addressInfo,'?？s')
|
||
},
|
||
confirmSliverType() {
|
||
this.sliverInfo = {
|
||
...this.selectSliverInfo
|
||
};
|
||
this.showSliverModal = false;
|
||
this.$forceUpdate();
|
||
},
|
||
openSliverModal() {
|
||
this.showSliverModal = true;
|
||
this.selectSliverInfo = {
|
||
...this.sliverInfo
|
||
};
|
||
this.$forceUpdate();
|
||
},
|
||
useCoupon(data) {
|
||
this.showCouponModal = false;
|
||
const oldCoupon = {
|
||
...this.useCouponInfo
|
||
};
|
||
// 购物车进来的需要预下单
|
||
if (data.coupon_id) {
|
||
this.useCouponInfo = {
|
||
...data
|
||
};
|
||
if (this.type === "cart") {
|
||
this.creatCartOrder(true).catch(() => {
|
||
this.useCouponInfo = {
|
||
...oldCoupon
|
||
};
|
||
});
|
||
} else {
|
||
this.createOrder(true).catch(() => {
|
||
this.useCouponInfo = {
|
||
...oldCoupon
|
||
};
|
||
});
|
||
}
|
||
}
|
||
},
|
||
jumpToWeChat,
|
||
// 联系客服按钮触摸开始
|
||
onContactBtnTouchStart(e) {
|
||
this.isDragging = false;
|
||
const touch = e.touches[0];
|
||
this.touchStartX = touch.clientX;
|
||
this.touchStartY = touch.clientY;
|
||
this.initialRight = this.contactBtnRight;
|
||
this.initialBottom = this.contactBtnBottom;
|
||
},
|
||
// 联系客服按钮触摸移动
|
||
onContactBtnTouchMove(e) {
|
||
const touch = e.touches[0];
|
||
const deltaX = touch.clientX - this.touchStartX;
|
||
const deltaY = touch.clientY - this.touchStartY;
|
||
|
||
// 如果移动距离超过10px，认为是拖拽
|
||
if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
|
||
this.isDragging = true;
|
||
}
|
||
|
||
if (this.isDragging) {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const windowHeight = systemInfo.windowHeight;
|
||
|
||
// 只处理上下移动，将px转换为rpx
|
||
const deltaYRpx = (deltaY / windowHeight) * 750;
|
||
|
||
// 计算新位置（只改变bottom，right始终保持为0）
|
||
// 向上移动时deltaY为负，但bottom值应该减小
|
||
let newBottom = this.initialBottom - deltaYRpx;
|
||
|
||
// 限制在屏幕范围内
|
||
// 按钮高度约120rpx
|
||
const btnHeight = 120;
|
||
|
||
newBottom = Math.max(0, Math.min(newBottom, windowHeight * 2 - btnHeight));
|
||
|
||
// right始终保持为0
|
||
this.contactBtnRight = 0;
|
||
this.contactBtnBottom = newBottom;
|
||
}
|
||
},
|
||
// 联系客服按钮触摸结束
|
||
onContactBtnTouchEnd(e) {
|
||
// 松手后，right重置为0
|
||
this.contactBtnRight = 0;
|
||
this.isDragging = false;
|
||
},
|
||
// 联系客服按钮点击
|
||
handleContactBtnClick() {
|
||
// 如果正在拖拽，不触发点击事件
|
||
if (this.isDragging) {
|
||
return;
|
||
}
|
||
this.jumpToWeChat();
|
||
},
|
||
cancelOrder() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定要取消订单吗？",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateBack();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
confirmPay() {
|
||
// console.log(this.type, '??')
|
||
if (this.WeChat === undefined && this.wallet === undefined) {
|
||
uni.showToast({
|
||
title: '请选择支付方式',
|
||
icon: "none",
|
||
});
|
||
return
|
||
}
|
||
this.type === "cart" ? this.creatCartOrder() : this.createOrder();
|
||
},
|
||
changeSliverType(item) {
|
||
// if (item.id === 2 && !this.serviceOrderList?.length) {
|
||
// uni.showToast({
|
||
// title: "您当前不存在服务订单",
|
||
// icon: "none",
|
||
// });
|
||
// return;
|
||
// }
|
||
this.selectSliverInfo = {
|
||
...item
|
||
};
|
||
this.$forceUpdate();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order-create-container {
|
||
height: 100%;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
background: #F7F8FA;
|
||
|
||
.info-cell {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20rpx;
|
||
|
||
.arrow-icon {
|
||
width: 11rpx;
|
||
height: 18rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&.address-info-cell {
|
||
.address-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.address-row-first {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.address-row-second {
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
.address-icon {
|
||
width: 24rpx;
|
||
height: 32rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.address-placeholder {
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
padding: 20rpx 0rpx;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
|
||
.address-name {
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
|
||
.address-phone {
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.address-details {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-left: 36rpx; // 图标宽度24rpx + 间距12rpx
|
||
}
|
||
|
||
.arrow-icon {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 11rpx;
|
||
height: 18rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
&.sliver-info-cell {
|
||
.sliver-content {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.sliver-icon {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sliver-text {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
&.goods-info-cell {
|
||
padding: 0;
|
||
|
||
.goods-item {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: 24rpx 20rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1rpx solid #F5F5F5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.goods-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 16rpx;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.goods-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
min-height: 100rpx;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
|
||
.goods-row-first {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12rpx;
|
||
|
||
.goods-name {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
line-height: 40rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.goods-price {
|
||
flex-shrink: 0;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.goods-row-second {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.goods-spec {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.goods-count {
|
||
flex-shrink: 0;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-multi {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
|
||
.goods-imgs {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
|
||
.goods-img-small {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-right: 8rpx;
|
||
border-radius: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.goods-count-wrapper {
|
||
flex-shrink: 0;
|
||
|
||
.goods-count-text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.pay-cell {
|
||
.pay-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16rpx 0;
|
||
|
||
.pay-label {
|
||
font-size: 24rpx;
|
||
color: #9B939A;
|
||
}
|
||
|
||
.pay-value {
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
.coupon-row {
|
||
.coupon-price {
|
||
font-size: 28rpx;
|
||
color: #FF19A0;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
.pay-price {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 16rpx;
|
||
margin-top: 16rpx;
|
||
border-top: 1rpx solid #E5E5E5;
|
||
|
||
.pay-label {
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.pay-total {
|
||
font-size: 28rpx;
|
||
color: #FF19A0;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.payment-method-cell {
|
||
.payment-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 0;
|
||
|
||
&:not(:last-child) {
|
||
border-bottom: 1rpx solid #E5E5E5;
|
||
}
|
||
|
||
.payment-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.payment-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.payment-text {
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
.payment-check {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.pay-type {
|
||
.pay-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.pay-select-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.pay-type-text {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
&.good-list {
|
||
padding: 20rpx;
|
||
|
||
.good-img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-right: 20rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.good-num {
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.place-view {
|
||
height: 166rpx;
|
||
}
|
||
|
||
.order-create-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100vw;
|
||
background: #fff;
|
||
padding: 20rpx 32rpx;
|
||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.05);
|
||
|
||
.cancel-btn {
|
||
flex: 1;
|
||
height: 92rpx;
|
||
border-radius: 92rpx;
|
||
border: 2rpx solid #FF19A0;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.cancel-btn-text {
|
||
font-size: 30rpx;
|
||
color: #FF19A0;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.pay-btn {
|
||
flex: 1;
|
||
height: 92rpx;
|
||
border-radius: 92rpx;
|
||
background: #FF19A0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.pay-btn-text {
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact-float-btn {
|
||
position: fixed;
|
||
text-align: center;
|
||
z-index: 100;
|
||
|
||
.contact-icon {
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
margin: auto;
|
||
}
|
||
|
||
.contact-btn {
|
||
color: #FFFFFF;
|
||
background-color: #FF19A0;
|
||
border-radius: 257px;
|
||
padding: 6rpx 8rpx;
|
||
transform: translateY(-8px);
|
||
}
|
||
}
|
||
|
||
.sliver-content {
|
||
padding: 16rpx 0;
|
||
|
||
.sliver-item {
|
||
padding: 52rpx 0;
|
||
margin: 0 52rpx;
|
||
width: calc(100% - 52rpx * 2);
|
||
box-sizing: border-box;
|
||
border-bottom: 1rpx solid #f7f3f7;
|
||
|
||
&.disabled {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.select-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.sliver-btn {
|
||
width: 630rpx;
|
||
height: 92rpx;
|
||
background: #fe019b;
|
||
border-radius: 92rpx;
|
||
margin: 18rpx auto 10rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |