kuangjunhua/TakeOutShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商品详情页样式微调/新增确认订单页面

Browse Source
This commit is contained in:
邝军华 2025-03-10 23:37:38 +08:00
parent 98291a4ab8
commit a2c0378c08
50 changed files with 4118 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

299
order/orderConfirm/orderConfirm.vue Normal file
View File

@ -0,0 +1,299 @@
<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>

597
order/orderConfirm/style.scss Normal file
View File

@ -0,0 +1,597 @@
page{
background: #F6F6F6;
}
.main{
background: linear-gradient( 180deg, #FDEDEE 0%, #F6F6F6 35%);
background-repeat: no-repeat;
overflow: hidden;
.cont{
margin: 25rpx 20rpx 0 20rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
padding:30rpx;
.cont_title{
font-size: 32rpx;
color: #333333;
font-weight: 500;
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.cont_ul{
display: flex;
align-items: center;
justify-content: space-between;
.cont_l{
.cont_text{
font-size: 32rpx;
font-weight: 500;
color: #000000;
display: flex;
align-items: center;
.cont_default{
font-size: 20rpx;
background-color: #FFF4CD;
border-radius: 10rpx;
color: #F9D448;
margin-left: 10rpx;
padding: 2rpx 10rpx 2rpx 10rpx;
}
}
.cont_user{
font-size: 26rpx;
color: #666666;
margin-top: 10rpx;
.cont_tel{
margin-left: 20rpx;
}
}
}
.cont_arr{
position: relative;
margin-right: 20rpx;
font-size: 28rpx;
color: #FF0000;
font-weight: 500;
}
.cont_arr::after{
content: '';
position: absolute;
top: 50%;
left: 100%;
transform: translate3d(0, -50%, 0) rotate(45deg);
width: 14rpx;
height: 14rpx;
border-top: 3rpx solid #666666;
border-right: 3rpx solid #666666;
}
.cont_pay{
.cont_name{
color: #333333;
font-size: 26rpx;
display: flex;
align-items: center;
.cont_name_img{
width: 58rpx;
height: 58rpx;
margin-right: 12rpx;
display: block;
}
}
}
.cont_radio{
background-color: #E60703;
width: 45rpx;
height: 45rpx;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15rpx;
.cont_radioimg{
width: 45rpx;
height: 45rpx;
}
}
.cont_li{
display: flex;
align-items: center;
.cont_balance{
width: 58rpx;
height: 58rpx;
display: block;
}
.cont_balance_ul{
margin-left: 15rpx;
.cont_tx{
font-size: 28rpx;
color: #333333;
display: flex;
align-items: center;
.cont_txx{
width: 24rpx;
height: 24rpx;
border-radius: 50rpx;
border: 1rpx solid #D9D9D9;
color: #D9D9D9;
font-size: 20rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10rpx;
}
}
.cont_desc{
font-size: 23rpx;
color: #999999;
}
}
}
}
.cont_textarea{
background: #F7F8FA;
border-radius: 16rpx;
padding: 20rpx;
height: 110rpx;
.cont_textarea_text{
width: 100%;
font-size: 26rpx;
height: 150rpx;
}
}
.shop_view{
display: flex;
align-items: center;
justify-content: space-between;
height: 138rpx;
position: relative;
z-index: 1;
margin-bottom: 15rpx;
.cart_scroll{
width: 530rpx;
display: flex;
overflow: hidden;
white-space: nowrap;
position: absolute;
left: 0;
top: 0;
.cart_scroll_ul{
.cart_scroll_li{
width: 138rpx;
display: inline-block;
margin-right: 20rpx;
.cart_scroll_img{
background: #FFFFFF;
border-radius: 10rpx;
width: 138rpx;
height: 138rpx;
overflow: hidden;
border: 1rpx solid #F3F3F3;
.cart_scroll_img_url{
width: 138rpx;
height: 138rpx;
display: block;
}
}
.cart_scroll_title{
color: #333333;
font-size: 26rpx;
font-weight: 500;
white-space: break-spaces;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: break-word;
margin-top: 20rpx;
}
.cart_scroll_price{
font-size: 32rpx;
color: #FF0000;
font-weight: 500;
margin-top: 10rpx;
}
.cart_scroll_market_name{
color: #999999;
font-size: 28rpx;
text-decoration: line-through;
font-weight: 400;
}
}
}
}
.shop_numer{
width: 115rpx;
position: absolute;
right: 0;
top: 0;
z-index: 2;
font-size: 28rpx;
color: #666666;
height: 138rpx;
align-items: center;
display: flex;
justify-content: flex-end;
margin-right: 20rpx;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(15rpx);
}
.shop_numer::after{
content: '';
position: absolute;
top: 50%;
left: 100%;
transform: translate3d(0, -50%, 0) rotate(45deg);
width: 14rpx;
height: 14rpx;
border-top: 3rpx solid #666666;
border-right: 3rpx solid #666666;
}
}
.cont_m{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 15rpx;
padding-bottom: 15rpx;
.cont_m_l{
font-size: 28rpx;
color: #333333;
display: flex;
align-items: center;
.cont_m_x_img{
width: 58rpx;
height: 58rpx;
margin-right: 10rpx;
display: block;
}
.cont_m_ps{
padding-left: 10rpx;
padding-right: 10rpx;
height: 30rpx;
border-radius:9rpx;
border: 1px solid #D9D9D9;
font-size: 20rpx;
color: #666666;
margin-left: 10rpx;
display: flex;
align-items: center;
}
.cont_m_x_v{
border: 1px solid #FF0000;
color: #FF0000;
margin-left: 10rpx;
}
}
.cont_m_r{
font-size: 28rpx;
color: #333333;
font-weight: 500;
.couponprice::before{
content: '¥';
font-size: 20rpx;
margin-right: 5rpx;
margin-left: 5rpx;
}
}
.cont_m_color{
color:#FF0000;
}
.price::before{
content: '¥';
font-size: 20rpx;
margin-right: 5rpx;
margin-left: 5rpx;
}
}
.cont_bottom{
text-align: right;
padding: 20rpx 0 0rpx 0;
border-top: 1rpx solid #D9D9D9;
margin-top: 20rpx;
.cont_text{
font-size: 28rpx;
color: #333333;
}
.cont_price{
font-size: 40rpx;
color: #333333;
font-weight: 500;
}
.cont_price::before{
content: '¥';
font-size: 28rpx;
margin-right: 5rpx;
margin-left: 5rpx;
}
}
}
.conttop{
padding-top: 0rpx;
}
.footer{
position: fixed;
z-index: 88;
left: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
width: 100%;
top: 100%;
background: #FFFFFF;
padding-bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
border-top: 1rpx solid #f6f6f6;
.footer_li{
margin-left: 30rpx;
.footer_name{
font-size: 30rpx;
color: #333333;
}
.footer_price{
font-size: 40rpx;
color: #FF0000;
font-weight: 500;
}
.footer_price::before{
content: '¥';
font-size: 28rpx;
margin-right: 5rpx;
margin-left: 5rpx;
}
.footer_coupon{
display: inline-block;
color: #666666;
font-size: 28rpx;
margin-left: 10rpx;
.footer_coupon_price::before{
content: '¥';
font-size: 24rpx;
}
}
}
.footer_btn{
margin-right: 30rpx;
width: 205rpx;
height: 77rpx;
background: linear-gradient( 90deg, #FD4955 0%, #FD343C 100%);
border-radius: 39rpx 39rpx 39rpx 39rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #FFFFFF;
}
}
.shop_open{
width: 100%;
background-color: #FFFFFF;
color: #333333;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
.shop_open_title{
text-align: center;
font-size: 32rpx;
color: #333333;
font-weight: 500;
position: sticky;
top: 0;
height: 100rpx;
line-height: 100rpx;
.shop_open_close{
width: 100rpx;
height: 100rpx;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.shop_open_close image{
width: 45rpx;
height: 45rpx;
}
}
// 订单商品
.shop_open_cont{
max-height: 800rpx;
min-height: 600rpx ;
overflow-x: auto;
padding: 0 30rpx 0 30rpx;
.shop_open_item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.shop_open_cont_l{
display: flex;
align-items: center;
.shop_border{
width: 138rpx;
height: 138rpx;
background: #FFFFFF;
border-radius: 8rpx;
border: 1rpx solid #F3F3F3;
position: relative;
.shop_img{
width: 138rpx;
height: 138rpx;
display: block;
position: absolute;
border-radius: 8rpx;
left: 0;
top: 0;
}
}
.shop_script{
margin-left: 20rpx;
.shop_title{
font-size: 28rpx;
color: #333333;
min-height: 45rpx;
font-weight: 500;
}
.shop_desc_price{
font-size: 24rpx;
color: #999999;
.shop_desc_f::before{
font-size: 20rpx;
content: '¥';
margin: 0 5rpx 0 5rpx;
}
}
.shop_desc_amount{
font-size: 24rpx;
color: #999999;
}
}
}
.shop_open_cont_price{
font-size: 30rpx;
color: #333333;
font-weight: 500;
}
.shop_open_cont_price::before{
content: '¥';
font-size: 24rpx;
margin-right: 5rpx;
}
}
}
// 优惠券
.coupon_cont{
min-height: 800rpx;
max-height: 800rpx;
overflow-x: auto;
.coupon_item{
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 24rpx 24rpx 24rpx;
.coupon_item_l{
width: 198rpx;
height: 193rpx;
background: #FFFFFF;
border-radius: 20rpx;
text-align: center;
position: relative;
.coupon_item_v{
position: absolute;
width: 198rpx;
height: 193rpx;
top: 0;
left: 0;
.coupon_item_price{
color: #FF0000;
font-size: 60rpx;
font-weight: 500;
text-align: center;
margin-top: 35rpx;
}
.coupon_item_price::before{
content: '¥';
font-size: 34rpx;
margin-right: 5rpx;
}
.coupon_item_desc{
color: #999999;
font-size: 26rpx;
}
}
.coupon_item_absolute{
position: absolute;
top: 0;
left: 0;
width: 20rpx;
height: 193rpx;
background: #FF0000;
border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
}
.coupon_item_border{
width: 1px;
height: 155rpx;
border-left: 1px dashed #D9D9D9;
background-color: #FFFFFF;
}
.coupon_item_r{
width: 438rpx;
height: 193rpx;
background: #FFFFFF;
border-radius: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25rpx 0 45rpx;
.coupon_item_r_l{
width: 300rpx;
.coupon_item_name{
font-size: 32rpx;
color: #000000;
font-weight: 500;
}
.coupon_item_time{
color: #FF6E6E;
font-size: 26rpx;
margin-top: 10rpx;
}
}
.coupon_item_r_r{
background-color: #E60703;
width: 42rpx;
height: 42rpx;
border-radius: 50rpx;
}
}
}
}
.coupon_item_bottom{
position: fixed;
z-index: 88;
left: 0;
transform: translate3d(0,-100%,0);
width: 100%;
top: 100%;
background: #FFFFFF;
padding-bottom: env(safe-area-inset-bottom);
display: flex;
justify-content: center;
align-items: center;
padding-top: 20rpx;
color: #000000;
font-size: 32rpx;
border-top: 1rpx solid #F6F7FB;
}
// 送达时间
.tiem_cont{
max-height: 800rpx;
min-height: 800rpx;
display: flex;
justify-content: space-between;
.tiem_l{
background-color: #F6F7FB;
width: 30%;
max-height: 800rpx;
min-height: 800rpx;
overflow-x: auto;
}
.tiem_r{
width: 70%;
max-height: 800rpx;
min-height: 800rpx;
overflow-x: auto;
}
}
}
.shop_open_bcg{
background-color: #F6F7FB;
}
}

17
pages.json
View File

@ -90,11 +90,26 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}] }]
}], },
{
"root": "order",
"pages": [{
"path": "orderConfirm/orderConfirm",
"style": {
"navigationBarTitleText": "确认订单",
"navigationBarBackgroundColor": "#FCEEEF"
}
}]
}
],
"preloadRule":{ "preloadRule":{
"shopProDetail/detail/detail": { "shopProDetail/detail/detail": {
"network": "all", "network": "all",
"packages": ["shopProDetail"] "packages": ["shopProDetail"]
},
"order/orderConfirm/orderConfirm": {
"network": "all",
"packages": ["shopProDetail"]
} }
}, },
"globalStyle": { "globalStyle": {

7
pages/cart/cart.vue
View File

@ -290,7 +290,7 @@
<view class="footer_text">合计:</view> <view class="footer_text">合计:</view>
<view class="footer_price">39.9</view> <view class="footer_price">39.9</view>
</view> </view>
<view class="footer_btn">去下单</view> <view class="footer_btn" @click="orderConfirm">去下单</view>
</view> </view>
</view> </view>
@ -311,6 +311,11 @@ const goDetail= ()=>{
url:`/shopProDetail/detail/detail` url:`/shopProDetail/detail/detail`
}) })
} }
const orderConfirm = ()=>{
uni.navigateTo({
url:`/order/orderConfirm/orderConfirm`
})
}
// 使用 uni.onLoad 监听页面加载 // 使用 uni.onLoad 监听页面加载
onLoad((options) => { onLoad((options) => {

1
pages/classify/classify.vue
View File

@ -3,6 +3,7 @@
<!-- 头部区域 --> <!-- 头部区域 -->
<view class="head" :style="{'padding-top':headerHeight+3+'px'}"> <view class="head" :style="{'padding-top':headerHeight+3+'px'}">
<view class="head_search"> <view class="head_search">
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/> <input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
</view> </view>
<view class="head_class"> <view class="head_class">

21
pages/classify/style.scss
View File

@ -21,21 +21,18 @@ page{
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;
justify-content: space-between; justify-content: space-between;
.head_search_input{ .head_search_img{
width: 500rpx;
height: 100%;
margin-left: 10px;
font-size: 28rpx;
display: flex;
align-items: center;
}
.head_search_input::before{
content: "";
background-image: url('../../static/search_img.png');
background-size: cover;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 13rpx; margin-right: 13rpx;
margin-left: 23rpx;
}
.head_search_input{
width: 500rpx;
height: 100%;
font-size: 28rpx;
display: flex;
align-items: center;
} }
} }
.head_class{ .head_class{

8
pages/index/index.vue
View File

@ -4,6 +4,7 @@
<view class="head" :style="{'padding-top':headerHeight+'px'}"> <view class="head" :style="{'padding-top':headerHeight+'px'}">
<view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view> <view class="head_location head_location_active"><text class="location_title">东方体育中心</text></view>
<view class="head_search"> <view class="head_search">
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/> <input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
<view class="head_search_btn">搜索</view> <view class="head_search_btn">搜索</view>
</view> </view>
@ -283,7 +284,7 @@
<!-- <view class="footer_cont_m_desc">已优惠20元</view> --> <!-- <view class="footer_cont_m_desc">已优惠20元</view> -->
</view> </view>
</view> </view>
<view class="footer_cont_btn">去下单</view> <view class="footer_cont_btn" @click="orderConfirm">去下单</view>
</view> </view>
</view> </view>
</view> </view>
@ -321,6 +322,11 @@ const classify = ()=>{
}) })
}) })
} }
const orderConfirm = ()=>{
uni.navigateTo({
url:`/order/orderConfirm/orderConfirm`
})
}
onLoad((options) => { onLoad((options) => {
}); });

22
pages/index/style.scss
View File

@ -72,21 +72,19 @@ page{
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;
justify-content: space-between; justify-content: space-between;
.head_search_input{ .head_search_img{
width: 560rpx;
height: 100%;
margin-left: 10px;
font-size: 28rpx;
display: flex;
align-items: center;
}
.head_search_input::before{
content: "";
background-image: url('../../static/search_img.png');
background-size: cover;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 13rpx; margin-right: 13rpx;
display: block;
margin-left: 23rpx;
}
.head_search_input{
width: 560rpx;
height: 100%;
font-size: 28rpx;
display: flex;
align-items: center;
} }
.head_search_btn{ .head_search_btn{
width: 120rpx; width: 120rpx;

438
shopProDetail/detail/detail.vue
View File

@ -1,197 +1,212 @@
<template> <template>
<view class="mian"> <view class="mian">
<view class="head_capsule" :style="{ top: statusBartop+'px' }"> <view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
<view v-if="showBack" @click="handleBack()" :class="showBack?'head_back':'head_home'" :style="{'width': statusHeight+'px','height':statusHeight+'px'}" > <view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
<image :src="showBack?'https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png':'https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/backHome.png'" :class="showBack?'head_backimg':'head_homeimg'"></image> <image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
</view>
<block v-if="headShow">
<view class="head_nav" :style="{'height':statusHeight+'px'}">
<view class="head_item" v-for="(item,index) in navList" :key="index" :class="currentTab === index ? 'head_item_active':''" @click="switchTab(index)">
<view class="head_item_name">{{item}}</view>
<view class="head_item_img"></view>
</view>
</view>
<view class="head_search" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
<image :style="{'width': statusHeight-15+'px','height':statusHeight-15+'px'}" src="../../static/search_img.png" mode="widthFix"></image>
</view>
</block>
</view> </view>
</view>
<view id="top-layout">
<!-- 轮播图区域 --> <!-- 轮播图区域 -->
<view class="shop_swiper" :style="{'height':swiperHeight+'rpx'}" > <view class="item">
<swiper class="shop_swiper_wrap" interval="3000" :current="currentIndex" circular @change="onSwiperChange" :style="{'height':swiperHeight+'rpx'}"> <view class="shop_swiper" :style="{'height':swiperHeight+'rpx'}" >
<swiper-item class="shop_swiper_marquees" v-if="imglist.length" v-for="(item,index) in imglist" :key="index"> <swiper class="shop_swiper_wrap" interval="3000" :current="currentIndex" circular @change="onSwiperChange" :style="{'height':swiperHeight+'rpx'}">
<view class="shop_swiper_img"> <swiper-item class="shop_swiper_marquees" v-if="imglist.length" v-for="(item,index) in imglist" :key="index">
<image class="shop_swiper_imgUrl" :src="item" @load="onImageLoad" @click="previewImage(index)"></image> <view class="shop_swiper_img">
</view> <image class="shop_swiper_imgUrl" :src="item" @load="onImageLoad" @click="previewImage(index)"></image>
</swiper-item> </view>
</swiper> </swiper-item>
<view class="currentNumber"> </swiper>
<view class="item_currentNumber item_currentNumber_width" v-if="imglist.length"><text>{{currentIndex+1}}/{{imglist.length}}</text></view> <view class="currentNumber">
</view> <view class="item_currentNumber item_currentNumber_width" v-if="imglist.length"><text>{{currentIndex+1}}/{{imglist.length}}</text></view>
</view>
<!-- 价格标题区域 -->
<view class="shop_head">
<view class="shop_price price">49.9<text class="market_name prices">79.9</text></view>
<view class="shop_title">新鲜黄牛牛肉200g+9g/份</view>
<view class="shop_desc">外红里黑属于牛肉内部缺氧导致，切开氧化静置会逐步 氧化发红，不影响食用</view>
</view>
<!-- 评论区域 -->
<view class="shop_comment">
<view class="shop_comment_head">
<view class="shop_comment_head_title">商品评论(1万+)</view>
<view class="shop_comment_head_arrow">全部</view>
</view>
<view class="shop_comment_tag">
<view class="shop_comment_item">很好吃33</view>
<view class="shop_comment_item">肉新鲜21</view>
<view class="shop_comment_item">继续回购9</view>
</view>
<view class="shop_comment_cont">
<view class="shop_comment_cont_ul">
<view class="shop_comment_cont_l"><image class="shop_comment_cont_userimg" src="" mode="widthFix"></image><view class="shop_comment_cont_username">蓝**v</view><view class="shop_comment_cont_amount">买过3次</view></view>
<view class="shop_comment_cont_ip">2025-02-25 来自上海</view>
</view>
<view class="shop_comment_m">
<view class="shop_comment_title"><text>速度很快，品质保证，一如既往的支持！就不一一评价了，赞👍👍</text></view>
<view class="shop_comment_item">
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
</view>
</view> </view>
</view> </view>
<!-- 价格标题区域 -->
<view class="shop_head">
<view class="shop_price price">49.9<text class="market_name prices">79.9</text></view>
<view class="shop_title">新鲜黄牛牛肉200g+9g/份</view>
<view class="shop_desc">外红里黑属于牛肉内部缺氧导致，切开氧化静置会逐步 氧化发红，不影响食用</view>
</view>
</view> </view>
<!-- 评论区域 --> <!-- 评论区域 -->
<view class="shop_comment"> <view class="item">
<view class="shop_comment_head"> <view class="shop_comment">
<view class="shop_comment_head_title">常见问题(2)</view> <view class="shop_comment_head">
<view class="shop_comment_head_arrow">全部</view> <view class="shop_comment_head_title">商品评论(1万+)</view>
<view class="shop_comment_head_arrow">全部</view>
</view>
<view class="shop_comment_tag">
<view class="shop_comment_item">很好吃33</view>
<view class="shop_comment_item">肉新鲜21</view>
<view class="shop_comment_item">继续回购9</view>
</view>
<view class="shop_comment_cont">
<view class="shop_comment_cont_ul">
<view class="shop_comment_cont_l"><image class="shop_comment_cont_userimg" src="" mode="widthFix"></image><view class="shop_comment_cont_username">蓝**v</view><view class="shop_comment_cont_amount">买过3次</view></view>
<view class="shop_comment_cont_ip">2025-02-25 来自上海</view>
</view>
<view class="shop_comment_m">
<view class="shop_comment_title"><text>速度很快，品质保证，一如既往的支持！就不一一评价了，赞👍👍</text></view>
<view class="shop_comment_item">
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<!-- 常见问题 -->
<view class="shop_comment">
<view class="shop_comment_head">
<view class="shop_comment_head_title">常见问题(2)</view>
<view class="shop_comment_head_arrow">全部</view>
</view>
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
<view class="shop_ask shop_padding"><text>如何判定虾是否新鲜?</text></view>
<!-- <view class="shop_answer shop_padding">这里填写回答</view> -->
</view> </view>
<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
<view class="shop_ask shop_padding"><text>如何判定虾是否新鲜?</text></view>
<!-- <view class="shop_answer shop_padding">这里填写回答</view> -->
</view> </view>
<!-- 图文详情 --> <!-- 图文详情 -->
<view class="shop_detail"> <view class="shop_detail item">
<view class="shop_detail_title">图文详情</view> <view class="shop_detail_title">图文详情</view>
<view class="shop_detail_img"> <view class="shop_detail_img">
<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20241105-b286a4cf0d1148158e166b858112125a.jpg" mode="widthFix"></image> <image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20241105-b286a4cf0d1148158e166b858112125a.jpg" mode="widthFix"></image>
</view> </view>
</view> </view>
</view> <view class="item">
<!-- 推荐区域 -->
<!-- 推荐区域 --> <view class="user_title" >
<view class="user_title"> <text class="user_name">为您推荐</text>
<text class="user_name">为您推荐</text>
</view>
<!-- 商品区域 -->
<view class="shop_view">
<view class="shop_view_ul">
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">糖醋排骨</view>
<view class="shop_view_cont_desc">乡下土猪</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">糖醋排骨</view>
<view class="shop_view_cont_desc">乡下土猪</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view> </view>
<view class="shop_view_ul">
<view class="shop_view_li" @click="goDetail()"> <!-- 商品区域 -->
<view class="shop_view_img"> <view class="shop_view">
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view> <view class="shop_view_ul">
<view class="shop_view_img_u"> <view class="shop_view_li" @click="goDetail()">
<image class="shop_view_img_url" src="../../static/Mask.png"></image> <view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view> </view>
</view> <view class="shop_view_cont">
<view class="shop_view_cont"> <view class="shop_view_cont_title">糖醋排骨</view>
<view class="shop_view_cont_title">泡椒田鸡</view> <view class="shop_view_cont_desc">乡下土猪</view>
<view class="shop_view_cont_desc">超大只田鸡</view> <view class="shop_view_cont_tag">
<view class="shop_view_cont_tag"> <view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">仅剩3份</view> <view class="shop_view_cont_tag_text">劲辣胃浓</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view> </view>
</view> <view class="shop_view_cont_bottom">
<view class="shop_view_cont_bottom"> <view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view> <view class="shop_view_cont_cart">
<view class="shop_view_cont_cart"> <image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="shop_view_li" @click="goDetail()">
<view class="shop_view_li" @click="goDetail()"> <view class="shop_view_img">
<view class="shop_view_img"> <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view> <view class="shop_view_img_u">
<view class="shop_view_img_u"> <image class="shop_view_img_url" src="../../static/Mask.png"></image>
<image class="shop_view_img_url" src="../../static/Mask.png"></image> </view>
</view> </view>
</view> <view class="shop_view_cont">
<view class="shop_view_cont"> <view class="shop_view_cont_title">糖醋排骨</view>
<view class="shop_view_cont_title">泡椒田鸡</view> <view class="shop_view_cont_desc">乡下土猪</view>
<view class="shop_view_cont_desc">超大只田鸡</view> <view class="shop_view_cont_tag">
<view class="shop_view_cont_tag"> <view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">仅剩3份</view> <view class="shop_view_cont_tag_text">劲辣胃浓</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view> </view>
</view> <view class="shop_view_cont_bottom">
<view class="shop_view_cont_bottom"> <view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view> <view class="shop_view_cont_cart">
<view class="shop_view_cont_cart"> <image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
<view class="shop_view_ul">
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<view class="shop_view_li" @click="goDetail()">
<view class="shop_view_img">
<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
<view class="shop_view_img_u">
<image class="shop_view_img_url" src="../../static/Mask.png"></image>
</view>
</view>
<view class="shop_view_cont">
<view class="shop_view_cont_title">泡椒田鸡</view>
<view class="shop_view_cont_desc">超大只田鸡</view>
<view class="shop_view_cont_tag">
<view class="shop_view_cont_tag_text">仅剩3份</view>
<view class="shop_view_cont_tag_text">劲辣胃浓</view>
</view>
<view class="shop_view_cont_bottom">
<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
<view class="shop_view_cont_cart">
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</view> </view>
</view> </view>
<view style="height: 200rpx;"></view> <view style="height: 200rpx;"></view>
@ -215,7 +230,7 @@
</view> </view>
<view class="footer_r"> <view class="footer_r">
<view class="footer_btn border_l">加入购物车</view> <view class="footer_btn border_l">加入购物车</view>
<view class="footer_btn footer_btn_bcg border_r">立即下单</view> <view class="footer_btn footer_btn_bcg border_r" @click="orderConfirm">立即下单</view>
</view> </view>
</view> </view>
</view> </view>
@ -223,11 +238,12 @@
</template> </template>
<script setup> <script setup>
import { computed,ref } from 'vue'; import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值 import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app" import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
const imglist = ref([ const imglist = ref([
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg", "http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg",
"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ebe6955a5db9476e9a525042eaba3d0e.jpg", "http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ebe6955a5db9476e9a525042eaba3d0e.jpg",
@ -237,6 +253,14 @@ const swiperHeight = ref(200);
const imgheights = ref([]); const imgheights = ref([]);
const currentIndex = ref(0); const currentIndex = ref(0);
const showBack = ref(false); const showBack = ref(false);
const headShow = ref(false);
const opacity = ref(1);
const navList = ref(['商品','评论','详情','推荐']);
const currentTab = ref(0); // 当前选中的tab
const scrollTop = ref(0); // 页面滚动的距离
const scrollTimer = ref(null);
const sectionHeights = ref([0]);
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新) //使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore); const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
//获取图片真实宽度 //获取图片真实宽度
@ -275,13 +299,77 @@ const handleBack = () => {
}); });
} }
}; };
const getSectionHeights = async (e)=>{
let sections = []
let sectionHeight = [0]
let rect = await new Promise(resolve => {
const query = uni.createSelectorQuery();
query.selectAll('.item').boundingClientRect((res) => {
resolve(res)
}).exec();
})
sections = rect
for (let i = 0; i < sections.length; i++) {
sectionHeight.push(sectionHeight[i] + sections[i].height - statusBartop.value - statusHeight.value)
}
sectionHeights.value = sectionHeight;
if(e == 1){
let len = sectionHeight.length;
let currentTabs = 0;
for (let i = 0; i < len - 1; i++) {
if (scrollTop.value >= sectionHeight[i] && scrollTop.value < sectionHeight[i + 1]) {
currentTabs = i
break
}
}
currentTab.value = currentTabs;
}
};
const switchTab = (index) =>{
if(currentTab.value == index) return false;
console.log('000');
currentTab.value = index;
nextTick(() => {
uni.pageScrollTo({
scrollTop: sectionHeights.value[currentTab.value],
duration: 200,
});
});
};
const orderConfirm = ()=>{
uni.navigateTo({
url:`/order/orderConfirm/orderConfirm`
})
}
onLoad((options) => { onLoad((options) => {
//初始化时判断是否显示返回按钮 //初始化时判断是否显示返回按钮
showBack.value = getPages(); showBack.value = getPages();
}); });
onShow(() => { onShow(() => {});
onPageScroll((e)=>{
}); const top = e.scrollTop;
// 导航条颜色透明渐变
if (top <= 50) {
headShow.value = false
} else {
if( 50 < top && top <= 200 ){
opacity.value = top / 200
}else{
opacity.value = 1
}
headShow.value = true
}
if (scrollTimer.value) {
clearTimeout(scrollTimer.value)
}
scrollTimer.value = setTimeout(() => {
scrollTop.value = e.scrollTop;
getSectionHeights(1);
}, 300)
}),
onReady(()=>{
getSectionHeights();
})
onPullDownRefresh(()=>{ onPullDownRefresh(()=>{
}) })

76
shopProDetail/detail/style.scss
View File

@ -2,55 +2,69 @@ page{
background: #f6f6f6; background: #f6f6f6;
} }
.mian{ .mian{
.head_capsule{ .head{
color: #fff; position: fixed;
z-index: 100;
width: 100%;
top: 0;
left: 0;
padding-bottom: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 10px;
justify-content: space-between;
position: fixed;
z-index: 110;
border-radius: 50rpx;
.head_back{ .head_back{
display: flex; display: flex;
align-items: center; align-items: center;
background: rgba(255, 255, 255, 0.6); background: rgba(255,255,255,.6);
border: 1rpx solid rgba(0, 0, 0, 0.1); border: 1rpx solid rgba(0,0,0,.1);
border-radius: 50rpx; border-radius: 50rpx;
.head_backimg{ margin-left: 10px;
.head_back_img{
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 7px; margin-left: 7px;
} }
} }
.head_line{ .head_nav{
width: 1rpx; display: flex;
margin-left: 5px; .head_item{
margin-right: 5px; padding: 0px 8px 0px 8px;
height: 32rpx; margin-top: 5px;
background-color: rgba(0, 0, 0, 0.1); .head_item_name{
font-size: 28rpx;
color: #999999;
}
.head_item_img{
width: 32px;
height: 8px;
}
}
.head_item_active{
.head_item_name{
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.head_item_img{
background: url(../../static/act.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
} }
.head_hove{ .head_search{
background: rgba(255,255,255,.8); background-color: #F6F6F6;
border: 1rpx solid rgba(0, 0, 0, 0.1); border-radius: 50rpx;
}
.head_home{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 100%; margin-left: 8px;
overflow: hidden;
.head_homeimg{
display: block;
width: 30rpx;
height: 30rpx;
}
} }
} }
.head_show{
background-color: #FFFFFF;
border-bottom: 1rpx solid #f6f6f6;
}
.shop_swiper{ .shop_swiper{
width: 100%; width: 100%;
height: 750rpx; height: 750rpx;

BIN
static/order/WeChat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/order/balance.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 B

BIN
static/order/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/order/coupon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/order/radio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

90
uni_modules/uni-popup/changelog.md Normal file
View File

@ -0,0 +1,90 @@
## 1.9.6（2025-01-08）
- 修复 示例中过期图片地址
## 1.9.5（2024-10-15）
- 修复 微信小程序中的getSystemInfo警告
## 1.9.2（2024-09-21）
- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
## 1.9.1（2024-04-02）
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
## 1.9.0（2024-03-28）
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
## 1.8.9（2024-03-20）
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
## 1.8.8（2024-02-20）
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
## 1.8.7（2024-02-02）
- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
## 1.8.6（2024-01-30）
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
## 1.8.5（2024-01-26）
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
## 1.8.4（2023-11-15）
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
## 1.8.3（2023-04-17）
- 修复 uni-popup 重复打开时的 bug
## 1.8.2（2023-02-02）
- uni-popup-dialog 组件新增 inputType 属性
## 1.8.1（2022-12-01）
- 修复 nvue 下 v-show 报错
## 1.8.0（2022-11-29）
- 优化 主题样式
## 1.7.9（2022-04-02）
- 修复 弹出层内部无法滚动的bug
## 1.7.8（2022-03-28）
- 修复 小程序中高度错误的bug
## 1.7.7（2022-03-17）
- 修复 快速调用open出现问题的Bug
## 1.7.6（2022-02-14）
- 修复 safeArea 属性不能设置为false的bug
## 1.7.5（2022-01-19）
- 修复 isMaskClick 失效的bug
## 1.7.4（2022-01-19）
- 新增 cancelText \ confirmText 属性 ，可自定义文本
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
## 1.7.3（2022-01-13）
- 修复 设置 safeArea 属性不生效的bug
## 1.7.2（2021-11-26）
- 优化 组件示例
## 1.7.1（2021-11-26）
- 修复 vuedoc 文字错误
## 1.7.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
## 1.6.2（2021-08-24）
- 新增 支持国际化
## 1.6.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.6.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.5.0（2021-06-23）
- 新增 mask-click 遮罩层点击事件
## 1.4.5（2021-06-22）
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.4（2021-06-18）
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.3（2021-06-08）
- 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题
- 修复 点击内容，再点击遮罩无法关闭的Bug
## 1.4.2（2021-05-12）
- 新增 组件示例地址
## 1.4.1（2021-04-29）
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
## 1.4.0 （2021-04-29）
- 新增 type 属性的 left\right 值，支持左右弹出
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
- 新增 safeArea 属性，是否适配底部安全区
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
- 修复 App 端弹出等待的Bug
- 优化 提升低配设备性能，优化动画卡顿问题
- 优化 更简单的组件自定义方式
## 1.2.9（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.2.8（2021-02-05）
- 调整为uni_modules目录规范
## 1.2.7（2021-02-05）
- 调整为uni_modules目录规范
- 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端

45
uni_modules/uni-popup/components/uni-popup-dialog/keypress.js Normal file
View File

@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif

316
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue Normal file
View File

@ -0,0 +1,316 @@
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
</view>
<view v-if="mode === 'base'" class="uni-dialog-content">
<slot>
<text class="uni-dialog-content-text">{{content}}</text>
</slot>
</view>
<view v-else class="uni-dialog-content">
<slot>
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
:placeholder="placeholderText" :focus="focus">
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
<text class="uni-dialog-button-text">{{closeText}}</text>
</view>
<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {Boolean} focus input模式下是否自动聚焦，默认为true
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @showClose {Boolean} 是否显示关闭按钮
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @property {Number} maxlength 输入
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
mixins: [popup],
emits: ['confirm', 'close', 'update:modelValue', 'input'],
props: {
inputType: {
type: String,
default: 'text'
},
showClose: {
type: Boolean,
default: true
},
// #ifdef VUE2
value: {
type: [String, Number],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [Number, String],
default: ''
},
// #endif
placeholder: {
type: [String, Number],
default: ''
},
type: {
type: String,
default: 'error'
},
mode: {
type: String,
default: 'base'
},
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
},
cancelText: {
type: String,
default: ''
},
confirmText: {
type: String,
default: ''
},
maxlength: {
type: Number,
default: -1,
},
focus: {
type: Boolean,
default: true,
}
},
data() {
return {
dialogType: 'error',
val: ""
}
},
computed: {
okText() {
return this.confirmText || t("uni-popup.ok")
},
closeText() {
return this.cancelText || t("uni-popup.cancel")
},
placeholderText() {
return this.placeholder || t("uni-popup.placeholder")
},
titleText() {
return this.title || t("uni-popup.title")
}
},
watch: {
type(val) {
this.dialogType = val
},
mode(val) {
if (val === 'input') {
this.dialogType = 'info'
}
},
value(val) {
if (this.maxlength != -1 && this.mode === 'input') {
this.val = val.slice(0, this.maxlength);
} else {
this.val = val
}
},
val(val) {
// #ifdef VUE2
// TODO 兼容 vue2
this.$emit('input', val);
// #endif
// #ifdef VUE3
// TODO　兼容　vue3
this.$emit('update:modelValue', val);
// #endif
}
},
created() {
// 对话框遮罩不可点击
this.popup.disableMask()
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value;
// #ifdef VUE3
this.val = this.modelValue;
// #endif
} else {
this.dialogType = this.type
}
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
if (this.mode === 'input') {
this.$emit('confirm', this.val)
} else {
this.$emit('confirm')
}
if (this.beforeClose) return
this.popup.close()
},
/**
* 点击取消按钮
*/
closeDialog() {
this.$emit('close')
if (this.beforeClose) return
this.popup.close()
},
close() {
this.popup.close()
}
}
}
</script>
<style lang="scss">
.uni-popup-dialog {
width: 300px;
border-radius: 11px;
background-color: #fff;
}
.uni-dialog-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 25px;
}
.uni-dialog-title-text {
font-size: 16px;
font-weight: 500;
}
.uni-dialog-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.uni-dialog-content-text {
font-size: 14px;
color: #6C6C6C;
}
.uni-dialog-button-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-dialog-button {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
}
.uni-border-left {
border-left-color: #f0f0f0;
border-left-style: solid;
border-left-width: 1px;
}
.uni-dialog-button-text {
font-size: 16px;
color: #333;
}
.uni-button-color {
color: #007aff;
}
.uni-dialog-input {
flex: 1;
font-size: 14px;
border: 1px #eee solid;
height: 40px;
padding: 0 10px;
border-radius: 5px;
color: #555;
}
.uni-popup__success {
color: #4cd964;
}
.uni-popup__warn {
color: #f0ad4e;
}
.uni-popup__error {
color: #dd524d;
}
.uni-popup__info {
color: #909399;
}
</style>

143
uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<view class="uni-popup-message">
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
<slot>
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
</slot>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
/**
* PopUp 弹出层-消息提示
* @description 弹出层-消息提示
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} message 消息提示文字
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
*/
export default {
name: 'uniPopupMessage',
mixins:[popup],
props: {
/**
* 主题 success/warning/info/error 默认 success
*/
type: {
type: String,
default: 'success'
},
/**
* 消息文字
*/
message: {
type: String,
default: ''
},
/**
* 显示时间，设置为 0 则不会自动关闭
*/
duration: {
type: Number,
default: 3000
},
maskShow:{
type:Boolean,
default:false
}
},
data() {
return {}
},
created() {
this.popup.maskShow = this.maskShow
this.popup.messageChild = this
},
methods: {
timerClose(){
if(this.duration === 0) return
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
this.popup.close()
},this.duration)
}
}
}
</script>
<style lang="scss" >
.uni-popup-message {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.uni-popup-message__box {
background-color: #e1f3d8;
padding: 10px 15px;
border-color: #eee;
border-style: solid;
border-width: 1px;
flex: 1;
}
@media screen and (min-width: 500px) {
.fixforpc-width {
margin-top: 20px;
border-radius: 4px;
flex: none;
min-width: 380px;
/* #ifndef APP-NVUE */
max-width: 50%;
/* #endif */
/* #ifdef APP-NVUE */
max-width: 500px;
/* #endif */
}
}
.uni-popup-message-text {
font-size: 14px;
padding: 0;
}
.uni-popup__success {
background-color: #e1f3d8;
}
.uni-popup__success-text {
color: #67C23A;
}
.uni-popup__warn {
background-color: #faecd8;
}
.uni-popup__warn-text {
color: #E6A23C;
}
.uni-popup__error {
background-color: #fde2e2;
}
.uni-popup__error-text {
color: #F56C6C;
}
.uni-popup__info {
background-color: #F2F6FC;
}
.uni-popup__info-text {
color: #909399;
}
</style>

188
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue Normal file
View File

@ -0,0 +1,188 @@
<template>
<view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
export default {
name: 'UniPopupShare',
mixins:[popup],
emits:['select'],
props: {
title: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
// TODO 替换为自己的图标
bottomData: [{
text: '微信',
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
name: 'ali'
},
{
text: 'QQ',
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
name: 'sina'
},
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
// name: 'copy'
// },
// {
// text: '其他',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
// name: 'more'
// }
]
}
},
created() {},
computed: {
cancelText() {
return t("uni-popup.cancel")
},
shareTitleText() {
return this.title || t("uni-popup.shareTitle")
}
},
methods: {
/**
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
})
this.close()
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-share {
background-color: #fff;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.uni-share-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
}
.uni-share-title-text {
font-size: 14px;
color: #666;
}
.uni-share-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.uni-share-content-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
}
.uni-share-content-item {
width: 90px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
align-items: center;
}
.uni-share-content-item:active {
background-color: #f5f5f5;
}
.uni-share-image {
width: 30px;
height: 30px;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
}
.uni-share-button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
color: #666;
font-size: 16px;
}
.uni-share-button::after {
border-radius: 50px;
}
</style>

7
uni_modules/uni-popup/components/uni-popup/i18n/en.json Normal file
View File

@ -0,0 +1,7 @@
{
"uni-popup.cancel": "cancel",
"uni-popup.ok": "ok",
"uni-popup.placeholder": "pleace enter",
"uni-popup.title": "Hint",
"uni-popup.shareTitle": "Share to"
}

8
uni_modules/uni-popup/components/uni-popup/i18n/index.js Normal file
View File

@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

7
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json Normal file
View File

@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

7
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json Normal file
View File

@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

45
uni_modules/uni-popup/components/uni-popup/keypress.js Normal file
View File

@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif

26
uni_modules/uni-popup/components/uni-popup/popup.js Normal file
View File

@ -0,0 +1,26 @@
export default {
data() {
return {
}
},
created(){
this.popup = this.getParent()
},
methods:{
/**
* 获取父元素实例
*/
getParent(name = 'uniPopup') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
}
}

90
uni_modules/uni-popup/components/uni-popup/uni-popup.uvue Normal file
View File

@ -0,0 +1,90 @@
<template>
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
<view @click.stop>
<slot></slot>
</view>
</view>
</template>
<script>
type CloseCallBack = ()=> void;
let closeCallBack:CloseCallBack = () :void => {};
export default {
emits:["close","clickMask"],
data() {
return {
isShow:false,
isOpen:false
}
},
props: {
maskClick: {
type: Boolean,
default: true
},
},
watch: {
// 设置show = true 时，如果没有 open 需要设置为 open
isShow:{
handler(isShow) {
// console.log("isShow",isShow)
if(isShow && this.isOpen == false){
this.isOpen = true
}
},
immediate:true
},
// 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
isOpen:{
handler(isOpen) {
// console.log("isOpen",isOpen)
if(isOpen && this.isShow == false){
this.isShow = true
}
},
immediate:true
}
},
methods:{
open(){
// ...funs : CloseCallBack[]
// if(funs.length > 0){
// closeCallBack = funs[0]
// }
this.isOpen = true;
},
clickMask(){
if(this.maskClick == true){
this.$emit('clickMask')
this.close()
}
},
close(): void{
this.isOpen = false;
this.$emit('close')
closeCallBack()
},
hiden(){
this.isShow = false
},
show(){
this.isShow = true
}
}
}
</script>
<style>
.popup-root {
position: fixed;
top: 0;
left: 0;
width: 750rpx;
height: 100%;
flex: 1;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
z-index: 99;
}
</style>

518
uni_modules/uni-popup/components/uni-popup/uni-popup.vue Normal file
View File

@ -0,0 +1,518 @@
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart">
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
:duration="duration" :show="showTrans" @click="onTap" />
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
:show="showTrans" @click="onTap">
<view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
<slot />
</view>
</uni-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default {
name: 'uniPopup',
components: {
// #ifdef H5
keypress
// #endif
},
emits: ['change', 'maskClick'],
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
isMaskClick: {
type: Boolean,
default: null
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: {
type: Boolean,
default: null
},
backgroundColor: {
type: String,
default: 'none'
},
safeArea: {
type: Boolean,
default: true
},
maskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
},
borderRadius:{
type: String,
}
},
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
if (!this.config[newVal]) return
this[this.config[this.type]](true)
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
isMaskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom'
},
maskClass: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)'
},
transClass: {
backgroundColor: 'transparent',
borderRadius: this.borderRadius || "0",
position: 'fixed',
left: 0,
right: 0
},
maskShow: true,
mkclick: true,
popupstyle: 'top'
}
},
computed: {
getStyles() {
let res = { backgroundColor: this.bg };
if (this.borderRadius || "0") {
res = Object.assign(res, { borderRadius: this.borderRadius })
}
return res;
},
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
},
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent'
}
return this.backgroundColor
}
},
mounted() {
const fixSize = () => {
// #ifdef MP-WEIXIN
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getWindowInfo()
// #endif
// #ifndef MP-WEIXIN
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getSystemInfoSync()
// #endif
this.popupWidth = windowWidth
this.popupHeight = windowHeight + (windowTop || 0)
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom
// #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
} else {
this.safeAreaInsets = 0
}
}
fixSize()
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible()
},
// #endif
activated() {
this.setH5Visible(!this.showPopup);
},
deactivated() {
this.setH5Visible(true);
},
created() {
// this.mkclick = this.isMaskClick || this.maskClick
if (this.isMaskClick === null && this.maskClick === null) {
this.mkclick = true
} else {
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
}
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
this.maskClass.backgroundColor = this.maskBackgroundColor
},
methods: {
setH5Visible(visible = true) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden";
// #endif
},
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
return
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type
}
if (!this.config[direction]) {
console.error('缺少类型：', direction)
return
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
},
close(type) {
this.showTrans = false
this.$emit('change', {
show: false,
type: this.type
})
clearTimeout(this.timer)
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
},
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() {
this.clearPropagation = false
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false
return
}
this.$emit('maskClick')
if (!this.mkclick) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0"
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
this.$nextTick(() => {
this.showPoptrans()
if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose()
}
})
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom'
this.ani = ['slide-bottom']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: this.safeAreaInsets + 'px',
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPoptrans()
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center'
//微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
// #ifdef MP-WEIXIN
this.ani = ['fade']
// #endif
// #ifndef MP-WEIXIN
this.ani = ['zoom-out', 'fade']
// #endif
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center',
borderRadius:this.borderRadius || "0"
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPoptrans()
},
left(type) {
this.popupstyle = 'left'
this.ani = ['slide-left']
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPoptrans()
},
right(type) {
this.popupstyle = 'right'
this.ani = ['slide-right']
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPoptrans()
},
showPoptrans(){
this.$nextTick(()=>{
this.showPopup = true
this.showTrans = true
})
}
}
}
</script>
<style lang="scss">
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>

90
uni_modules/uni-popup/package.json Normal file
View File

@ -0,0 +1,90 @@
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.9.6",
"description": " Popup 组件，提供常用的弹层",
"keywords": [
"uni-ui",
"弹出层",
"弹窗",
"popup",
"弹框"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y",
"app-harmony": "u",
"app-uvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

17
uni_modules/uni-popup/readme.md Normal file
View File

@ -0,0 +1,17 @@
## Popup 弹出层
> **组件名：uni-popup**
> 代码块： `uPopup`
> 关联组件：`uni-transition`
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

8
uni_modules/uni-scss/changelog.md Normal file
View File

@ -0,0 +1,8 @@
## 1.0.3（2022-01-21）
- 优化 组件示例
## 1.0.2（2021-11-22）
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1（2021-11-22）
- 修复 vue3中scss语法兼容问题
## 1.0.0（2021-11-18）
- init

1
uni_modules/uni-scss/index.scss Normal file
View File

@ -0,0 +1 @@
@import './styles/index.scss';

82
uni_modules/uni-scss/package.json Normal file
View File

@ -0,0 +1,82 @@
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

4
uni_modules/uni-scss/readme.md Normal file
View File

@ -0,0 +1,4 @@
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

7
uni_modules/uni-scss/styles/index.scss Normal file
View File

@ -0,0 +1,7 @@
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';

3
uni_modules/uni-scss/styles/setting/_border.scss Normal file
View File

@ -0,0 +1,3 @@
.uni-border {
border: 1px $uni-border-1 solid;
}

66
uni_modules/uni-scss/styles/setting/_color.scss Normal file
View File

@ -0,0 +1,66 @@
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}

55
uni_modules/uni-scss/styles/setting/_radius.scss Normal file
View File

@ -0,0 +1,55 @@
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}

56
uni_modules/uni-scss/styles/setting/_space.scss Normal file
View File

@ -0,0 +1,56 @@
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}

167
uni_modules/uni-scss/styles/setting/_styles.scss Normal file
View File

@ -0,0 +1,167 @@
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */

24
uni_modules/uni-scss/styles/setting/_text.scss Normal file
View File

@ -0,0 +1,24 @@
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}

146
uni_modules/uni-scss/styles/setting/_variables.scss Normal file
View File

@ -0,0 +1,146 @@
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;

19
uni_modules/uni-scss/styles/tools/functions.scss Normal file
View File

@ -0,0 +1,19 @@
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};

31
uni_modules/uni-scss/theme.scss Normal file
View File

@ -0,0 +1,31 @@
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);

62
uni_modules/uni-scss/variables.scss Normal file
View File

@ -0,0 +1,62 @@
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);

24
uni_modules/uni-transition/changelog.md Normal file
View File

@ -0,0 +1,24 @@
## 1.3.3（2024-04-23）
- 修复 当元素会受变量影响自动隐藏的bug
## 1.3.2（2023-05-04）
- 修复 NVUE 平台报错的问题
## 1.3.1（2021-11-23）
- 修复 init 方法初始化问题
## 1.3.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
## 1.2.1（2021-09-27）
- 修复 init 方法不生效的 Bug
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.1（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的 Bug
## 1.1.0（2021-04-22）
- 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑，使动画更流畅
- 优化 支持单独的动画类型
- 优化 文档示例
## 1.0.2（2021-02-05）
- 调整为 uni_modules 目录规范

131
uni_modules/uni-transition/components/uni-transition/createAnimation.js Normal file
View File

@ -0,0 +1,131 @@
// const defaultOption = {
// duration: 300,
// timingFunction: 'linear',
// delay: 0,
// transformOrigin: '50% 50% 0'
// }
// #ifdef APP-NVUE
const nvueAnimation = uni.requireNativePlugin('animation')
// #endif
class MPAnimation {
constructor(options, _this) {
this.options = options
// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
this.animation = uni.createAnimation({
...options
})
this.currentStepAnimates = {}
this.next = 0
this.$ = _this
}
_nvuePushAnimates(type, args) {
let aniObj = this.currentStepAnimates[this.next]
let styles = {}
if (!aniObj) {
styles = {
styles: {},
config: {}
}
} else {
styles = aniObj
}
if (animateTypes1.includes(type)) {
if (!styles.styles.transform) {
styles.styles.transform = ''
}
let unit = ''
if(type === 'rotate'){
unit = 'deg'
}
styles.styles.transform += `${type}(${args+unit}) `
} else {
styles.styles[type] = `${args}`
}
this.currentStepAnimates[this.next] = styles
}
_animateRun(styles = {}, config = {}) {
let ref = this.$.$refs['ani'].ref
if (!ref) return
return new Promise((resolve, reject) => {
nvueAnimation.transition(ref, {
styles,
...config
}, res => {
resolve()
})
})
}
_nvueNextAnimate(animates, step = 0, fn) {
let obj = animates[step]
if (obj) {
let {
styles,
config
} = obj
this._animateRun(styles, config).then(() => {
step += 1
this._nvueNextAnimate(animates, step, fn)
})
} else {
this.currentStepAnimates = {}
typeof fn === 'function' && fn()
this.isEnd = true
}
}
step(config = {}) {
// #ifndef APP-NVUE
this.animation.step(config)
// #endif
// #ifdef APP-NVUE
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
this.next++
// #endif
return this
}
run(fn) {
// #ifndef APP-NVUE
this.$.animationData = this.animation.export()
this.$.timer = setTimeout(() => {
typeof fn === 'function' && fn()
}, this.$.durationTime)
// #endif
// #ifdef APP-NVUE
this.isEnd = false
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
if(!ref) return
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
this.next = 0
// #endif
}
}
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
'translateZ'
]
const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
MPAnimation.prototype[type] = function(...args) {
// #ifndef APP-NVUE
this.animation[type](...args)
// #endif
// #ifdef APP-NVUE
this._nvuePushAnimates(type, args)
// #endif
return this
}
})
export function createAnimation(option, _this) {
if(!_this) return
clearTimeout(_this.timer)
return new MPAnimation(option, _this)
}

286
uni_modules/uni-transition/components/uni-transition/uni-transition.vue Normal file
View File

@ -0,0 +1,286 @@
<template>
<!-- #ifndef APP-NVUE -->
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import { createAnimation } from './createAnimation'
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
*/
export default {
name: 'uniTransition',
emits:['click','change'],
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: [Array, String],
default() {
return 'fade'
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default() {
return {}
}
},
customClass:{
type: String,
default: ''
},
onceRender:{
type:Boolean,
default:false
},
},
data() {
return {
isShow: false,
transform: '',
opacity: 1,
animationData: {},
durationTime: 300,
config: {}
}
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
// 避免上来就执行 close,导致动画错乱
if (this.isShow) {
this.close()
}
}
},
immediate: true
}
},
computed: {
// 生成样式数据
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transform = ''
for (let i in styles) {
let line = this.toLine(i)
transform += line + ':' + styles[i] + ';'
}
return transform
},
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
}
},
created() {
// 动画默认配置
this.config = {
duration: this.duration,
timingFunction: 'ease',
transformOrigin: '50% 50%',
delay: 0
}
this.durationTime = this.duration
},
methods: {
/**
* ref 触发 初始化动画
*/
init(obj = {}) {
if (obj.duration) {
this.durationTime = obj.duration
}
this.animation = createAnimation(Object.assign(this.config, obj),this)
},
/**
* 点击组件触发回调
*/
onClick() {
this.$emit('click', {
detail: this.isShow
})
},
/**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return
for (let i in obj) {
try {
if(typeof obj[i] === 'object'){
this.animation[i](...obj[i])
}else{
this.animation[i](obj[i])
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
}
}
this.animation.step(config)
return this
},
/**
* ref 触发 执行动画
*/
run(fn) {
if (!this.animation) return
this.animation.run(fn)
},
// 开始过度动画
open() {
clearTimeout(this.timer)
this.transform = ''
this.isShow = true
let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') {
this.opacity = opacity
}
this.transform = transform
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
this.$nextTick(() => {
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step()
this.animation.run()
this.$emit('change', {
detail: this.isShow
})
}, 20)
})
},
// 关闭过度动画
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1
this.transform = transform
this.$emit('change', {
detail: this.isShow
})
})
},
// 处理动画开始前的默认样式
styleInit(type) {
let styles = {
transform: ''
}
let buildStyle = (type, mode) => {
if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode]
} else {
styles.transform += this.animationType(type)[mode] + ' '
}
}
if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildStyle(type, mode)
})
}
return styles
},
// 处理内置组合动画
tranfromInit(type) {
let buildTranfrom = (type, mode) => {
let aniNum = null
if (mode === 'fade') {
aniNum = type ? 0 : 1
} else {
aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1
}
if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1
}
if (mode === 'slide-right') {
aniNum = type ? '100%' : '0'
}
if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0'
}
}
this.animation[this.animationMode()[mode]](aniNum)
}
if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildTranfrom(type, mode)
})
}
return this.animation
},
animationType(type) {
return {
fade: type ? 0 : 1,
'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
}
},
// 内置动画类型与实际动画对应字典
animationMode() {
return {
fade: 'opacity',
'slide-top': 'translateY',
'slide-right': 'translateX',
'slide-bottom': 'translateY',
'slide-left': 'translateX',
'zoom-in': 'scale',
'zoom-out': 'scale'
}
},
// 驼峰转中横线
toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
}
}
</script>
<style></style>

85
uni_modules/uni-transition/package.json Normal file
View File

@ -0,0 +1,85 @@
{
"id": "uni-transition",
"displayName": "uni-transition 过渡动画",
"version": "1.3.3",
"description": "元素的简单过渡动画",
"keywords": [
"uni-ui",
"uniui",
"动画",
"过渡",
"过渡动画"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

11
uni_modules/uni-transition/readme.md Normal file
View File

@ -0,0 +1,11 @@
## Transition 过渡动画
> **组件名：uni-transition**
> 代码块： `uTransition`
元素过渡动画
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839