452 lines
14 KiB
Vue
452 lines
14 KiB
Vue
<template>
|
||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||
<view class="main" v-if="apiShow">
|
||
<!-- 地址 -->
|
||
<view class="cont" @click="onAddress()">
|
||
<view class="cont_ul">
|
||
<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>
|
||
</view>
|
||
<!-- 配送时间 -->
|
||
<view class="cont" @click="OpenTime()">
|
||
<view class="cont_ul">
|
||
<view class="cont_l">
|
||
<view class="cont_text">送达时间</view>
|
||
</view>
|
||
<view class="cont_arr">{{time?time:'请选择配送时间'}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 订单商品 -->
|
||
<view class="cont">
|
||
<view class="shop_view" @click="OpenShop()">
|
||
<view class="cart_scroll">
|
||
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||
|
||
<view class="cart_scroll_li" v-for="(item,index) in orderList" :key="index">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" :src="item.image" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</scroll-view>
|
||
</view>
|
||
<view class="shop_numer" >共{{orderInfoVo.orderProNum}}件</view>
|
||
</view>
|
||
<view class="cont_m">
|
||
<view class="cont_m_l">商品金额</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="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" 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">{{couponFee}}</text></view>
|
||
</view>
|
||
<view class="cont_bottom"><text class="cont_text">小计:</text><text class="cont_price">{{payFee}}</text></view>
|
||
</view>
|
||
<!-- 支付方式 -->
|
||
<view class="cont conttop">
|
||
<view class="cont_title">支付方式</view>
|
||
<view class="cont_ul">
|
||
<view class="cont_pay">
|
||
<view class="cont_name"><image class="cont_name_img" src="../../static/order/WeChat.png" mode="widthFix"></image>微信支付</view>
|
||
</view>
|
||
<view class="cont_radio"><image class="cont_radioimg" src="../../static/selected.png"></image></view>
|
||
</view>
|
||
</view>
|
||
<!-- 余额抵扣 -->
|
||
<view class="cont">
|
||
<view class="cont_ul">
|
||
<view class="cont_li">
|
||
<image class="cont_balance" src="../../static/order/balance.png" mode="widthFix"></image>
|
||
<view class="cont_balance_ul">
|
||
<view class="cont_tx">余额抵扣<text class="cont_txx">?</text></view>
|
||
<view class="cont_desc">{{orderInfoVo.userBalance > 0 ? orderInfoVo.userBalance:'暂无可用'}}</view>
|
||
</view>
|
||
</view>
|
||
<switch :checked="isDefault == 1 ? true:false" color="#e61817" :disabled="orderInfoVo.userBalance > 0 ?false:true" @change="switchChange" />
|
||
</view>
|
||
</view>
|
||
<!-- 订单备注 -->
|
||
<view class="cont conttop">
|
||
<view class="cont_title">订单备注</view>
|
||
<view class="cont_textarea">
|
||
<textarea class="cont_textarea_text" :disable-default-padding="isIos" placeholder="选填，可以告诉我们您的特殊需求" v-model="mark"></textarea>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer">
|
||
<view class="footer_li">
|
||
<text class="footer_name">应付:</text>
|
||
<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" @click="api_orderCreate">去支付</view>
|
||
</view>
|
||
<uni-popup ref="shopPopup" type="bottom" @change="changeShop">
|
||
<view class="shop_open">
|
||
<view class="shop_open_title">商品信息<view class="shop_open_close" @click="OpenShop()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
|
||
<view class="shop_open_cont">
|
||
|
||
|
||
<view class="shop_open_item" v-for="(item,index) in orderList" :key="index">
|
||
<view class="shop_open_cont_l">
|
||
<view class="shop_border">
|
||
<image class="shop_img" :src="item.image" mode="widthFix"></image>
|
||
</view>
|
||
<view class="shop_script">
|
||
<view class="shop_title"><text>{{item.productName}}</text></view>
|
||
<view class="shop_desc_price">小计<text class="shop_desc_f">{{item.subtotal}}</text></view>
|
||
<view class="shop_desc_amount">数量:{{item.payNum}}</view>
|
||
</view>
|
||
</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" 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">{{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">{{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>
|
||
</view>
|
||
<view style="height: 150rpx;"></view>
|
||
</view>
|
||
<view class="coupon_item_bottom" @click="OpenCoupon()">不使用优惠券</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="timePopup" type="bottom" @change="changeTime">
|
||
<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 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>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import NP from 'number-precision';
|
||
import { loads } from '@/utils/index.js'
|
||
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,addresslist,couponlist,computedprice,ordercreate } from "@/server/api.js"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {storeId} = storeToRefs(counterStore);
|
||
const isDefault = ref(0);
|
||
const shopPopup = ref(null);
|
||
const shopShow = ref(false);
|
||
const couponPopup = ref(null);
|
||
const couponShow = ref(false);
|
||
const timePopup = ref(null);
|
||
const timeShow = ref(false);
|
||
const show = ref(false);
|
||
const timList = ref([]);
|
||
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('');
|
||
const mark = ref('');
|
||
const deliveryTime = ref('');
|
||
const timedate = ref('');
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||
const isIos = ref(false);
|
||
const System = () =>{
|
||
const phone = wx.getSystemInfoSync();
|
||
if (phone.platform == 'ios') {
|
||
isIos.value = true
|
||
} else if (phone.platform == 'android') {
|
||
isIos.value = false
|
||
}
|
||
};
|
||
|
||
|
||
const OpenShop = ()=>{
|
||
shopShow.value ? shopPopup.value.close():shopPopup.value.open();
|
||
};
|
||
const changeShop = (e)=>{
|
||
shopShow.value = e.show;
|
||
show.value = e.show;
|
||
};
|
||
const changeCoupon = (e)=>{
|
||
couponShow.value = e.show;
|
||
show.value = e.show;
|
||
};
|
||
const OpenTime =() =>{
|
||
timeShow.value ? timePopup.value.close():timePopup.value.open()
|
||
};
|
||
const changeTime = (e)=>{
|
||
timeShow.value = e.show;
|
||
show.value = e.show;
|
||
};
|
||
const onAddress=()=>{
|
||
const params = {page:1,limit:10}
|
||
return addresslist(params).then(({data}) => {
|
||
if(data.list.length){
|
||
uni.navigateTo({
|
||
url:`/userserve/addressList/addressList?address_isDefaults=true`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/userserve/addressEdit/addressEdit?address_isDefaults=true`
|
||
})
|
||
}
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
};
|
||
//加载预下单
|
||
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];
|
||
timedate.value = data[0].date
|
||
deliveryTime.value = timedate.value +" "+data[0].times[0]
|
||
timeHover.value = 0;
|
||
})
|
||
.catch(({message}) => {
|
||
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;
|
||
deliveryTime.value = e.date
|
||
timedate.value = e.date
|
||
timeHover.value = -1
|
||
}
|
||
const timeList=(item,index)=>{
|
||
if(timeHover.value == index) return false;
|
||
timeHover.value = index;
|
||
time.value = timeKey.value + item;
|
||
deliveryTime.value = timedate.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
|
||
})
|
||
})
|
||
}
|
||
//创建订单
|
||
const api_orderCreate=()=>{
|
||
const params = {
|
||
payChannel: "routine",
|
||
payType: "weixin",
|
||
preOrderNo:preOrderNos.value,
|
||
shippingType: 3,
|
||
storeId:storeId.value,
|
||
useIntegral:false
|
||
}
|
||
if(storeId.value){
|
||
params.storeId = storeId.value;
|
||
}
|
||
if(deliveryTime.value){
|
||
params.deliveryTime = deliveryTime.value;
|
||
}
|
||
if(orderInfoVo.value.realName){
|
||
params.realName = orderInfoVo.value.realName;
|
||
}
|
||
if(mark.value){
|
||
params.mark = mark.value;
|
||
}
|
||
if(orderInfoVo.value.phone){
|
||
params.phone = orderInfoVo.value.phone;
|
||
}
|
||
if(orderInfoVo.value.addressId){
|
||
params.addressId = orderInfoVo.value.addressId;
|
||
}
|
||
if(couponId.value){
|
||
params.couponId = couponId.value;
|
||
}
|
||
loads('', true)
|
||
return ordercreate(params).then(({data}) => {
|
||
uni.hideLoading();
|
||
|
||
}).catch(({message}) => {
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
|
||
onLoad((options) => {
|
||
const { preOrderNo } = options;
|
||
preOrderNos.value = preOrderNo;
|
||
System();
|
||
api_deliverytimes();
|
||
});
|
||
onShow(() => {
|
||
api_orderloadpre();
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
|
||
})
|
||
onReachBottom(()=>{
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |