299 lines
11 KiB
Vue
299 lines
11 KiB
Vue
<template>
|
||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||
<view class="main">
|
||
<!-- 地址 -->
|
||
<view class="cont">
|
||
<view class="cont_ul">
|
||
<view class="cont_l">
|
||
<view class="cont_text">东方体育中心<text class="cont_default">默认</text></view>
|
||
<view class="cont_user">悟语<text class="cont_tel">15221679766</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">预计18:30</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">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="cart_scroll_li">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="cart_scroll_li">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="cart_scroll_li">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
<view class="shop_numer" >共45件</view>
|
||
</view>
|
||
<view class="cont_m">
|
||
<view class="cont_m_l">商品金额</view>
|
||
<view class="cont_m_r price">400.50</view>
|
||
</view>
|
||
<view class="cont_m">
|
||
<view class="cont_m_l">配送费<text class="cont_m_ps">满30免基础配送费</text></view>
|
||
<view class="cont_m_r price">20</view>
|
||
</view>
|
||
<view class="cont_m" @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>
|
||
<view class="cont_bottom"><text class="cont_text">小计:</text><text class="cont_price">488.50</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/order/radio.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">暂无可用</view>
|
||
</view>
|
||
</view>
|
||
<switch :checked="isDefault == 1 ? true:false" color="#e61817" @change="switchChange" />
|
||
</view>
|
||
</view>
|
||
<!-- 订单备注 -->
|
||
<view class="cont conttop">
|
||
<view class="cont_title">订单备注</view>
|
||
<view class="cont_textarea">
|
||
<textarea class="cont_textarea_text" placeholder="有其他要求和在此填写，我们将尽力配合，但仍可能 存在无法满足的的情况，请您谅解~"></textarea>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer">
|
||
<view class="footer_li">
|
||
<text class="footer_name">应付:</text>
|
||
<text class="footer_price">488.58</text>
|
||
<view class="footer_coupon">共优惠<text class="footer_coupon_price">3.00</text></view>
|
||
</view>
|
||
<view class="footer_btn">去支付</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">
|
||
<view class="shop_open_cont_l">
|
||
<view class="shop_border">
|
||
<image class="shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="shop_script">
|
||
<view class="shop_title">糖醋排骨</view>
|
||
<view class="shop_desc_price">小计:<text class="shop_desc_f">19.50</text></view>
|
||
<view class="shop_desc_amount">数量:1</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_open_cont_price">45.08</view>
|
||
</view>
|
||
<view class="shop_open_item">
|
||
<view class="shop_open_cont_l">
|
||
<view class="shop_border">
|
||
<image class="shop_img" src="../../static/Mask.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="shop_script">
|
||
<view class="shop_title">糖醋排骨</view>
|
||
<view class="shop_desc_price">小计:<text class="shop_desc_f">19.50</text></view>
|
||
<view class="shop_desc_amount">数量:1</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop_open_cont_price">45.08</view>
|
||
</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_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>
|
||
</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>
|
||
<view class="coupon_item_r_r"></view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item">
|
||
<view class="coupon_item_l">
|
||
<view class="coupon_item_absolute"></view>
|
||
<view class="coupon_item_v">
|
||
<view class="coupon_item_price">100</view>
|
||
<view class="coupon_item_desc">满39可用</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>
|
||
<view class="coupon_item_r_r"></view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item">
|
||
<view class="coupon_item_l">
|
||
<view class="coupon_item_absolute"></view>
|
||
<view class="coupon_item_v">
|
||
<view class="coupon_item_price">100</view>
|
||
<view class="coupon_item_desc">满39可用</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>
|
||
<view class="coupon_item_r_r"></view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item">
|
||
<view class="coupon_item_l">
|
||
<view class="coupon_item_absolute"></view>
|
||
<view class="coupon_item_v">
|
||
<view class="coupon_item_price">100</view>
|
||
<view class="coupon_item_desc">满39可用</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>
|
||
<view class="coupon_item_r_r"></view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item">
|
||
<view class="coupon_item_l">
|
||
<view class="coupon_item_absolute"></view>
|
||
<view class="coupon_item_v">
|
||
<view class="coupon_item_price">100</view>
|
||
<view class="coupon_item_desc">满39可用</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>
|
||
<view class="coupon_item_r_r"></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>
|
||
<view class="tiem_r"></view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
|
||
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"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
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);
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
//const { count,doubleCount } = storeToRefs(counterStore);
|
||
const OpenShop = ()=>{
|
||
shopShow.value ? shopPopup.value.close():shopPopup.value.open();
|
||
};
|
||
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;
|
||
};
|
||
const OpenTime =() =>{
|
||
timeShow.value ? timePopup.value.close():timePopup.value.open()
|
||
};
|
||
const changeTime = (e)=>{
|
||
timeShow.value = e.show;
|
||
show.value = e.show;
|
||
};
|
||
onLoad((options) => {
|
||
|
||
});
|
||
onShow(() => {
|
||
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
|
||
})
|
||
onReachBottom(()=>{
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |