确认订单优化
This commit is contained in:
邝军华
parent
61e58411db
commit
07ab2046bf
@ -1,12 +1,15 @@
|
||||
<template>
|
||||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||||
<view class="main">
|
||||
<view class="main" v-if="apiShow">
|
||||
<!-- 地址 -->
|
||||
<view class="cont" @click="onAddress()">
|
||||
<view class="cont_ul">
|
||||
<view class="cont_l cont_width">
|
||||
<view class="cont_text"><text class="cont_default">默认</text><text class="cont_v">花木街道浦东新区机关事务管理局人民政府-20号楼2306室</text></view>
|
||||
<view class="cont_user">悟语<text class="cont_tel">15221679766</text></view>
|
||||
<view class="cont_l cont_width" v-if="orderInfoVo.realName">
|
||||
<view class="cont_text"><text class="cont_default">默认</text><text class="cont_v">{{orderInfoVo.province+orderInfoVo.city+orderInfoVo.district+orderInfoVo.detail}}</text></view>
|
||||
<view class="cont_user">{{orderInfoVo.realName}}<text class="cont_tel">{{orderInfoVo.phone}}</text></view>
|
||||
</view>
|
||||
<view class="cont_l cont_width" v-else>
|
||||
<view class="cont_text"><text class="cont_v">您还没有收货地址，去新增</text></view>
|
||||
</view>
|
||||
<view class="cont_arr"></view>
|
||||
</view>
|
||||
@ -17,7 +20,7 @@
|
||||
<view class="cont_l">
|
||||
<view class="cont_text">送达时间</view>
|
||||
</view>
|
||||
<view class="cont_arr">预计18:30</view>
|
||||
<view class="cont_arr">{{time?time:'请选择配送时间'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单商品 -->
|
||||
@ -39,18 +42,18 @@
|
||||
</view>
|
||||
<view class="cont_m">
|
||||
<view class="cont_m_l">商品金额</view>
|
||||
<view class="cont_m_r price">{{orderInfoVo.proTotalFee}}</view>
|
||||
<view class="cont_m_r price">{{proTotalFee}}</view>
|
||||
</view>
|
||||
<view class="cont_m">
|
||||
<view class="cont_m_l">配送费<text class="cont_m_ps" v-if="orderInfoVo.freightFee > 0">满30免基础配送费</text></view>
|
||||
<view class="cont_m_r price" v-if="orderInfoVo.freightFee > 0">{{orderInfoVo.freightFee}}</view>
|
||||
<view class="cont_m_l">配送费<text class="cont_m_ps" v-if="freightFee > 0">满30免基础配送费</text></view>
|
||||
<view class="cont_m_r price" v-if="freightFee > 0">{{freightFee}}</view>
|
||||
<view class="cont_m_r" v-else>免配送费</view>
|
||||
</view>
|
||||
<view class="cont_m" @click="OpenCoupon()">
|
||||
<view class="cont_m" v-if="coupon_list.length" @click="OpenCoupon()">
|
||||
<view class="cont_m_l"><image class="cont_m_x_img" src="../../static/order/coupon.png"></image>优惠券<text class="cont_m_ps cont_m_x_v">最佳优惠</text></view>
|
||||
<view class="cont_m_r cont_m_color">-<text class="couponprice">45.08</text></view>
|
||||
<view class="cont_m_r cont_m_color">-<text class="couponprice">{{couponFee}}</text></view>
|
||||
</view>
|
||||
<view class="cont_bottom"><text class="cont_text">小计:</text><text class="cont_price">{{orderInfoVo.payFee}}</text></view>
|
||||
<view class="cont_bottom"><text class="cont_text">小计:</text><text class="cont_price">{{payFee}}</text></view>
|
||||
</view>
|
||||
<!-- 支付方式 -->
|
||||
<view class="cont conttop">
|
||||
@ -86,8 +89,8 @@
|
||||
<view class="footer">
|
||||
<view class="footer_li">
|
||||
<text class="footer_name">应付:</text>
|
||||
<text class="footer_price">{{orderInfoVo.payFee}}</text>
|
||||
<view class="footer_coupon">共优惠<text class="footer_coupon_price">3.00</text></view>
|
||||
<text class="footer_price">{{payFee}}</text>
|
||||
<view class="footer_coupon" v-if="couponFee > 0">共优惠<text class="footer_coupon_price">{{couponFee}}</text></view>
|
||||
</view>
|
||||
<view class="footer_btn">去支付</view>
|
||||
</view>
|
||||
@ -110,27 +113,33 @@
|
||||
</view>
|
||||
<view class="shop_open_cont_price">{{item.price}}</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 100rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="couponPopup" type="bottom" @change="changeCoupon">
|
||||
<view class="shop_open shop_open_bcg">
|
||||
<view class="shop_open_title">选择优惠券<view class="shop_open_close" @click="OpenCoupon()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
|
||||
|
||||
|
||||
|
||||
<view class="coupon_cont">
|
||||
<view class="coupon_item">
|
||||
|
||||
|
||||
<view class="coupon_item" v-for="(item,index) in coupon_list" :key="index">
|
||||
<view class="coupon_item_l">
|
||||
<view class="coupon_item_absolute"></view>
|
||||
<view class="coupon_item_v">
|
||||
<view class="coupon_item_price">5</view>
|
||||
<view class="coupon_item_desc">满39可用</view>
|
||||
<view class="coupon_item_price">{{item.money}}</view>
|
||||
<view class="coupon_item_desc">满{{item.minPrice}}可用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon_item_border"></view>
|
||||
<view class="coupon_item_r">
|
||||
<view class="coupon_item_r_l">
|
||||
<view class="coupon_item_name">新人限时券</view>
|
||||
<view class="coupon_item_time">今日23:59到期</view>
|
||||
<view class="coupon_item_name">{{item.useType == 1?'全场通用券':item.useType == 2?'商品券':'品类券'}}</view>
|
||||
<!-- <view class="coupon_item_time">开始时间：{{item.startTime}}</view> -->
|
||||
<view class="coupon_item_time">到期时间：{{item.endTime}}</view>
|
||||
</view>
|
||||
<view class="coupon_radio"><image class="cont_radioimg" src="../../static/selected.png"></image></view>
|
||||
</view>
|
||||
@ -144,8 +153,18 @@
|
||||
<view class="shop_open">
|
||||
<view class="shop_open_title">选择送达时间<view class="shop_open_close" @click="OpenTime()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
|
||||
<view class="tiem_cont">
|
||||
<view class="tiem_l"></view>
|
||||
<view class="tiem_r"></view>
|
||||
<view class="tiem_l">
|
||||
<view v-for="(item,index) in time_title" :key="index" class="tiem_title" :class="time_select == index?'time_select':''" @click="timeName(item,index)">
|
||||
<view class="time_border" :class="time_select == index?'time_border_hover':''"></view>
|
||||
<view class="time_text">{{item.key}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tiem_r">
|
||||
<view class="tiem_list" v-for="(item,index) in time_list" :key="index" @click="timeList(item,index)" :class="timeHover == index?'timeHover':''">
|
||||
<view>{{item}}</view>
|
||||
<image v-if="timeHover == index" class="time_img" src="../../static/order/time.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
@ -159,7 +178,7 @@ import { computed,ref } from 'vue';
|
||||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||||
import { storeToRefs } from 'pinia';//实现解构付值
|
||||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||||
import { orderloadpre,deliverytimes } from "@/server/api.js"
|
||||
import { orderloadpre,deliverytimes,addresslist,couponlist,computedprice } from "@/server/api.js"
|
||||
const counterStore = useCounterStore(); // 使用 Store
|
||||
const isDefault = ref(0);
|
||||
const shopPopup = ref(null);
|
||||
@ -174,6 +193,27 @@ const orderDetailList = ref({});
|
||||
const orderInfoVo = ref({});
|
||||
const orderList = ref([]);
|
||||
const preOrderNos = ref('');
|
||||
const apiShow = ref(false);
|
||||
const time_title = ref([]);
|
||||
const time_list = ref([]);
|
||||
const time_select = ref(0);
|
||||
const timeKey = ref('');
|
||||
const time = ref('');
|
||||
const timeHover = ref(-1);
|
||||
const pages = ref(0);
|
||||
const limits = ref(10);
|
||||
const decs = ref('');
|
||||
const list = ref([]);
|
||||
const coupon_list = ref([]);
|
||||
const couponId = ref('');
|
||||
const couponFee = ref('');
|
||||
const deductionPrice = ref('');
|
||||
const freightFee = ref('');
|
||||
const payFee = ref('');
|
||||
const proTotalFee = ref('');
|
||||
const surplusIntegral = ref('');
|
||||
const useIntegral = ref(false);
|
||||
const usedIntegral = ref('');
|
||||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||||
const isIos = ref(false);
|
||||
@ -185,6 +225,8 @@ const System = () =>{
|
||||
isIos.value = false
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const OpenShop = ()=>{
|
||||
shopShow.value ? shopPopup.value.close():shopPopup.value.open();
|
||||
};
|
||||
@ -192,9 +234,6 @@ const changeShop = (e)=>{
|
||||
shopShow.value = e.show;
|
||||
show.value = e.show;
|
||||
};
|
||||
const OpenCoupon =() =>{
|
||||
couponShow.value ? couponPopup.value.close():couponPopup.value.open()
|
||||
};
|
||||
const changeCoupon = (e)=>{
|
||||
couponShow.value = e.show;
|
||||
show.value = e.show;
|
||||
@ -206,34 +245,6 @@ const changeTime = (e)=>{
|
||||
timeShow.value = e.show;
|
||||
show.value = e.show;
|
||||
};
|
||||
const timeFun = (e)=>{
|
||||
const time = [{id:1,name:'今天',list:[
|
||||
{id:1,text:'立即配送(预计13:54送达)'},
|
||||
{id:2,text:'14:00-14:30'},
|
||||
{id:3,text:'14:00-14:30'},
|
||||
{id:4,text:'14:00-14:30'},
|
||||
{id:5,text:'14:00-14:30'},
|
||||
{id:6,text:'14:00-14:30'},
|
||||
{id:7,text:'14:00-14:30'},
|
||||
{id:8,text:'14:00-14:30'},
|
||||
{id:9,text:'14:00-14:30'},
|
||||
{id:10,text:'14:00-14:30'},
|
||||
{id:11,text:'14:00-14:30'},
|
||||
]},{id:2,name:'明天 周三',list:[
|
||||
{id:1,text:'立即配送(预计13:54送达)'},
|
||||
{id:2,text:'14:00-14:30'},
|
||||
{id:3,text:'14:00-14:30'},
|
||||
{id:4,text:'14:00-14:30'},
|
||||
{id:5,text:'14:00-14:30'},
|
||||
{id:6,text:'14:00-14:30'},
|
||||
{id:7,text:'14:00-14:30'},
|
||||
{id:8,text:'14:00-14:30'},
|
||||
{id:9,text:'14:00-14:30'},
|
||||
{id:10,text:'14:00-14:30'},
|
||||
{id:11,text:'14:00-14:30'},
|
||||
]}]
|
||||
timList.value = time;
|
||||
}
|
||||
const onAddress=()=>{
|
||||
const params = {page:1,limit:10}
|
||||
return addresslist(params).then(({data}) => {
|
||||
@ -243,7 +254,7 @@ const onAddress=()=>{
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url:`/userserve/addressList/addressList?address_isDefaults=true`
|
||||
url:`/userserve/addressEdit/addressEdit?address_isDefaults=true`
|
||||
})
|
||||
}
|
||||
}).catch(({message}) => {
|
||||
@ -256,17 +267,107 @@ const onAddress=()=>{
|
||||
//加载预下单
|
||||
const api_orderloadpre = () => {
|
||||
loads('', true)
|
||||
apiShow.value = false;
|
||||
return orderloadpre(preOrderNos.value).then(({data})=>{
|
||||
uni.hideLoading();
|
||||
apiShow.value = true;
|
||||
orderDetailList.value = data;
|
||||
data.orderInfoVo.orderDetailList.forEach(item => {
|
||||
item.subtotal = NP.times(item.price,item.payNum);
|
||||
})
|
||||
orderList.value = data.orderInfoVo.orderDetailList;
|
||||
orderInfoVo.value = data.orderInfoVo;
|
||||
|
||||
})
|
||||
.then(()=>api_couponlist())
|
||||
.then(()=>api_computedprice())
|
||||
.catch(({message}) => {
|
||||
apiShow.value = false;
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
content:message,
|
||||
showCancel: false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//计算价格
|
||||
const api_computedprice = () => {
|
||||
const params = {
|
||||
shippingType:3,
|
||||
useIntegral:false
|
||||
}
|
||||
if(orderInfoVo.value.addressId){
|
||||
params.addressId = orderInfoVo.value.addressId;
|
||||
}
|
||||
if(couponId.value){
|
||||
params.couponId = couponId.value;
|
||||
}
|
||||
if(preOrderNos.value){
|
||||
params.preOrderNo = preOrderNos.value;
|
||||
}
|
||||
return computedprice(params).then(({data}) => {
|
||||
couponFee.value = data.couponFee
|
||||
deductionPrice.value = data.deductionPrice
|
||||
freightFee.value = data.freightFee
|
||||
payFee.value = data.payFee
|
||||
proTotalFee.value = data.proTotalFee
|
||||
surplusIntegral.value = data.surplusIntegral
|
||||
useIntegral.value = data.useIntegral
|
||||
usedIntegral.value = data.usedIntegral
|
||||
})
|
||||
}
|
||||
|
||||
const api_deliverytimes=()=>{
|
||||
return deliverytimes().then(({data})=>{
|
||||
data.forEach((item,index)=>{
|
||||
item.id = index + 1
|
||||
})
|
||||
time_title.value = data;
|
||||
time_list.value = data[0].times
|
||||
timeKey.value = data[0].key
|
||||
time.value = timeKey.value + data[0].times[0];
|
||||
timeHover.value = 0;
|
||||
})
|
||||
.catch(({message}) => {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
content:message,
|
||||
showCancel: false
|
||||
})
|
||||
})
|
||||
}
|
||||
const timeName=(e,index)=>{
|
||||
if(time_select.value == index) return false
|
||||
time_select.value = index;
|
||||
const selectedItems = time_title.value.filter(item => item.id === e.id);
|
||||
time_list.value = selectedItems[0].times
|
||||
timeKey.value = e.key;
|
||||
timeHover.value = -1
|
||||
}
|
||||
const timeList=(item,index)=>{
|
||||
if(timeHover.value == index) return false;
|
||||
timeHover.value = index;
|
||||
time.value = timeKey.value + item;
|
||||
}
|
||||
const OpenCoupon =() =>{
|
||||
couponShow.value ? couponPopup.value.close():couponPopup.value.open()
|
||||
};
|
||||
const api_couponlist=()=>{
|
||||
// pages.value = pages.value + 1;
|
||||
// decs.value = "—— 加载中... ——";
|
||||
const params = {
|
||||
page:1,
|
||||
limit:30,
|
||||
type:'usabel'
|
||||
}
|
||||
return couponlist(params).then(({data}) => {
|
||||
decs.value = '—— 上拉加载更多 ——'
|
||||
if(data.list.length < 10){
|
||||
decs.value = '—— 嗷呜，已经到底啦 ——';
|
||||
}
|
||||
coupon_list.value = coupon_list.value.concat(data.list);
|
||||
}).catch(({message}) => {
|
||||
uni.showModal({
|
||||
content:message,
|
||||
showCancel: false
|
||||
@ -277,11 +378,10 @@ onLoad((options) => {
|
||||
const { preOrderNo } = options;
|
||||
preOrderNos.value = preOrderNo;
|
||||
System();
|
||||
timeFun();
|
||||
api_orderloadpre();
|
||||
api_deliverytimes();
|
||||
});
|
||||
onShow(() => {
|
||||
|
||||
api_orderloadpre();
|
||||
});
|
||||
onPullDownRefresh(()=>{
|
||||
|
||||
|
||||
@ -390,6 +390,7 @@ page{
|
||||
top: 0;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
border-bottom: 1rpx solid #F6f6f6;
|
||||
.shop_open_close{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
@ -415,7 +416,7 @@ page{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
.shop_open_cont_l{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -538,16 +539,16 @@ page{
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.coupon_item_r{
|
||||
width: 438rpx;
|
||||
width: 460rpx;
|
||||
height: 193rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 25rpx 0 45rpx;
|
||||
padding: 0 25rpx 0 25rpx;
|
||||
.coupon_item_r_l{
|
||||
width: 300rpx;
|
||||
width: 380rpx;
|
||||
.coupon_item_name{
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
@ -606,12 +607,55 @@ page{
|
||||
max-height: 800rpx;
|
||||
min-height: 800rpx;
|
||||
overflow-x: auto;
|
||||
.tiem_title{
|
||||
width: 100%;
|
||||
font-size:28rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
.time_text{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.time_border{
|
||||
width: 8rpx;
|
||||
height: 50rpx;
|
||||
background-color:#FFFFFF;
|
||||
border-top-right-radius: 30rpx;
|
||||
border-bottom-right-radius: 30rpx;
|
||||
}
|
||||
.time_border_hover{
|
||||
background-color:#FF0000;
|
||||
}
|
||||
}
|
||||
.time_select{
|
||||
background-color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
color: #FF0000;
|
||||
}
|
||||
}
|
||||
.tiem_r{
|
||||
width: 70%;
|
||||
max-height: 800rpx;
|
||||
min-height: 800rpx;
|
||||
overflow-x: auto;
|
||||
.tiem_list{
|
||||
margin: 0rpx 20rpx 0 20rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
.time_img{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
.timeHover{
|
||||
font-weight: 500;
|
||||
color: #FF0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<view class="user_account_border"></view>
|
||||
<view class="user_account_li">
|
||||
<view class="user_account_message">
|
||||
<view class="user_account_amount">0.01</view>
|
||||
<view class="user_account_amount">0.00</view>
|
||||
<view class="user_account_name">余额(元)</view>
|
||||
</view>
|
||||
<image class="user_account_img" src="../../static/user/purse.png" mode="widthFix"></image>
|
||||
|
||||
@ -126,4 +126,12 @@ export const citylist = (data) => {
|
||||
//配送时间
|
||||
export const deliverytimes = (data) => {
|
||||
return request({url:`/api/front/delivery/times`,method:'GET',data});
|
||||
}
|
||||
}
|
||||
//我的优惠券
|
||||
export const couponlist = (data) => {
|
||||
return request({url:`/api/front/coupon/list`,method:'GET',data});
|
||||
}
|
||||
//计算订单价格
|
||||
export const computedprice = (data) => {
|
||||
return request({url:`/api/front/order/computed/price`,method:'POST',data});
|
||||
}
|
||||
BIN
static/order/time.png
Normal file
BIN
static/order/time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -73,7 +73,7 @@ const select_address=(item)=>{
|
||||
const params = {
|
||||
id:item.id
|
||||
}
|
||||
return addresslist(params).then(({message}) => {
|
||||
return defaultset(params).then(({message}) => {
|
||||
uni.showToast({
|
||||
title:message,
|
||||
icon:'success',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user