diff --git a/order/orderConfirm/orderConfirm.vue b/order/orderConfirm/orderConfirm.vue new file mode 100644 index 0000000..27661cc --- /dev/null +++ b/order/orderConfirm/orderConfirm.vue @@ -0,0 +1,299 @@ + + + + + \ No newline at end of file diff --git a/order/orderConfirm/style.scss b/order/orderConfirm/style.scss new file mode 100644 index 0000000..e3ec0f0 --- /dev/null +++ b/order/orderConfirm/style.scss @@ -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; + } +} \ No newline at end of file diff --git a/pages.json b/pages.json index 1cd587c..a11e710 100644 --- a/pages.json +++ b/pages.json @@ -90,11 +90,26 @@ "navigationStyle": "custom" } }] - }], + }, + { + "root": "order", + "pages": [{ + "path": "orderConfirm/orderConfirm", + "style": { + "navigationBarTitleText": "确认订单", + "navigationBarBackgroundColor": "#FCEEEF" + } + }] + } + ], "preloadRule":{ "shopProDetail/detail/detail": { "network": "all", "packages": ["shopProDetail"] + }, + "order/orderConfirm/orderConfirm": { + "network": "all", + "packages": ["shopProDetail"] } }, "globalStyle": { diff --git a/pages/cart/cart.vue b/pages/cart/cart.vue index afbd02f..614266f 100644 --- a/pages/cart/cart.vue +++ b/pages/cart/cart.vue @@ -290,7 +290,7 @@ 合计: 39.9 - 去下单 + 去下单 @@ -311,6 +311,11 @@ const goDetail= ()=>{ url:`/shopProDetail/detail/detail` }) } +const orderConfirm = ()=>{ + uni.navigateTo({ + url:`/order/orderConfirm/orderConfirm` + }) +} // 使用 uni.onLoad 监听页面加载 onLoad((options) => { diff --git a/pages/classify/classify.vue b/pages/classify/classify.vue index 773ac55..d851270 100644 --- a/pages/classify/classify.vue +++ b/pages/classify/classify.vue @@ -3,6 +3,7 @@ + diff --git a/pages/classify/style.scss b/pages/classify/style.scss index ea2e985..6e03652 100644 --- a/pages/classify/style.scss +++ b/pages/classify/style.scss @@ -21,21 +21,18 @@ page{ font-size: 28rpx; color: #000000; justify-content: space-between; - .head_search_input{ - 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; + .head_search_img{ width: 20px; height: 20px; margin-right: 13rpx; + margin-left: 23rpx; + } + .head_search_input{ + width: 500rpx; + height: 100%; + font-size: 28rpx; + display: flex; + align-items: center; } } .head_class{ diff --git a/pages/index/index.vue b/pages/index/index.vue index 7afb3e4..45d8648 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -4,6 +4,7 @@ 东方体育中心 + 搜索 @@ -283,7 +284,7 @@ - 去下单 + 去下单 @@ -321,6 +322,11 @@ const classify = ()=>{ }) }) } +const orderConfirm = ()=>{ + uni.navigateTo({ + url:`/order/orderConfirm/orderConfirm` + }) +} onLoad((options) => { }); diff --git a/pages/index/style.scss b/pages/index/style.scss index 04ec004..415f059 100644 --- a/pages/index/style.scss +++ b/pages/index/style.scss @@ -72,21 +72,19 @@ page{ font-size: 28rpx; color: #000000; justify-content: space-between; - .head_search_input{ - 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; + .head_search_img{ width: 20px; height: 20px; 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{ width: 120rpx; diff --git a/shopProDetail/detail/detail.vue b/shopProDetail/detail/detail.vue index abdb0bf..f5b8866 100644 --- a/shopProDetail/detail/detail.vue +++ b/shopProDetail/detail/detail.vue @@ -1,197 +1,212 @@ + + diff --git a/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue new file mode 100644 index 0000000..91370a8 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue @@ -0,0 +1,143 @@ + + + + diff --git a/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue new file mode 100644 index 0000000..c8945d5 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue @@ -0,0 +1,188 @@ + + + + diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/en.json b/uni_modules/uni-popup/components/uni-popup/i18n/en.json new file mode 100644 index 0000000..7f1bd06 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/i18n/en.json @@ -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" +} diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/index.js b/uni_modules/uni-popup/components/uni-popup/i18n/index.js new file mode 100644 index 0000000..de7509c --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/i18n/index.js @@ -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 +} diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json new file mode 100644 index 0000000..5e3003c --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json @@ -0,0 +1,7 @@ +{ + "uni-popup.cancel": "取消", + "uni-popup.ok": "确定", + "uni-popup.placeholder": "请输入", + "uni-popup.title": "提示", + "uni-popup.shareTitle": "分享到" +} diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json new file mode 100644 index 0000000..13e39eb --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json @@ -0,0 +1,7 @@ +{ + "uni-popup.cancel": "取消", + "uni-popup.ok": "確定", + "uni-popup.placeholder": "請輸入", + "uni-popup.title": "提示", + "uni-popup.shareTitle": "分享到" +} diff --git a/uni_modules/uni-popup/components/uni-popup/keypress.js b/uni_modules/uni-popup/components/uni-popup/keypress.js new file mode 100644 index 0000000..62dda46 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/keypress.js @@ -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 diff --git a/uni_modules/uni-popup/components/uni-popup/popup.js b/uni_modules/uni-popup/components/uni-popup/popup.js new file mode 100644 index 0000000..c4e5781 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/popup.js @@ -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; + }, + } +} diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue b/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue new file mode 100644 index 0000000..5eb8d5b --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue @@ -0,0 +1,90 @@ + + + + + \ No newline at end of file diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue new file mode 100644 index 0000000..5af55e0 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue @@ -0,0 +1,518 @@ + + + + diff --git a/uni_modules/uni-popup/package.json b/uni_modules/uni-popup/package.json new file mode 100644 index 0000000..da485a4 --- /dev/null +++ b/uni_modules/uni-popup/package.json @@ -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" + } + } + } + } +} diff --git a/uni_modules/uni-popup/readme.md b/uni_modules/uni-popup/readme.md new file mode 100644 index 0000000..fdad4b3 --- /dev/null +++ b/uni_modules/uni-popup/readme.md @@ -0,0 +1,17 @@ + + +## Popup 弹出层 +> **组件名：uni-popup** +> 代码块： `uPopup` +> 关联组件：`uni-transition` + + +弹出层组件，在应用中弹出一个消息提示窗口、提示框等 + +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup) +#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 + + + + + diff --git a/uni_modules/uni-scss/changelog.md b/uni_modules/uni-scss/changelog.md new file mode 100644 index 0000000..b863bb0 --- /dev/null +++ b/uni_modules/uni-scss/changelog.md @@ -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 diff --git a/uni_modules/uni-scss/index.scss b/uni_modules/uni-scss/index.scss new file mode 100644 index 0000000..1744a5f --- /dev/null +++ b/uni_modules/uni-scss/index.scss @@ -0,0 +1 @@ +@import './styles/index.scss'; diff --git a/uni_modules/uni-scss/package.json b/uni_modules/uni-scss/package.json new file mode 100644 index 0000000..7cc0ccb --- /dev/null +++ b/uni_modules/uni-scss/package.json @@ -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" + } + } + } + } +} diff --git a/uni_modules/uni-scss/readme.md b/uni_modules/uni-scss/readme.md new file mode 100644 index 0000000..b7d1c25 --- /dev/null +++ b/uni_modules/uni-scss/readme.md @@ -0,0 +1,4 @@ +`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 + +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) +#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 \ No newline at end of file diff --git a/uni_modules/uni-scss/styles/index.scss b/uni_modules/uni-scss/styles/index.scss new file mode 100644 index 0000000..ffac4fe --- /dev/null +++ b/uni_modules/uni-scss/styles/index.scss @@ -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'; diff --git a/uni_modules/uni-scss/styles/setting/_border.scss b/uni_modules/uni-scss/styles/setting/_border.scss new file mode 100644 index 0000000..12a11c3 --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_border.scss @@ -0,0 +1,3 @@ +.uni-border { + border: 1px $uni-border-1 solid; +} \ No newline at end of file diff --git a/uni_modules/uni-scss/styles/setting/_color.scss b/uni_modules/uni-scss/styles/setting/_color.scss new file mode 100644 index 0000000..1ededd9 --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_color.scss @@ -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; +} diff --git a/uni_modules/uni-scss/styles/setting/_radius.scss b/uni_modules/uni-scss/styles/setting/_radius.scss new file mode 100644 index 0000000..9a0428b --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_radius.scss @@ -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) + } + } + } +} diff --git a/uni_modules/uni-scss/styles/setting/_space.scss b/uni_modules/uni-scss/styles/setting/_space.scss new file mode 100644 index 0000000..3c89528 --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_space.scss @@ -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); + } + } + } +} \ No newline at end of file diff --git a/uni_modules/uni-scss/styles/setting/_styles.scss b/uni_modules/uni-scss/styles/setting/_styles.scss new file mode 100644 index 0000000..689afec --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_styles.scss @@ -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 */ diff --git a/uni_modules/uni-scss/styles/setting/_text.scss b/uni_modules/uni-scss/styles/setting/_text.scss new file mode 100644 index 0000000..a34d08f --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_text.scss @@ -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 */ +} diff --git a/uni_modules/uni-scss/styles/setting/_variables.scss b/uni_modules/uni-scss/styles/setting/_variables.scss new file mode 100644 index 0000000..557d3d7 --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_variables.scss @@ -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; diff --git a/uni_modules/uni-scss/styles/tools/functions.scss b/uni_modules/uni-scss/styles/tools/functions.scss new file mode 100644 index 0000000..ac6f63e --- /dev/null +++ b/uni_modules/uni-scss/styles/tools/functions.scss @@ -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; +}; diff --git a/uni_modules/uni-scss/theme.scss b/uni_modules/uni-scss/theme.scss new file mode 100644 index 0000000..80ee62f --- /dev/null +++ b/uni_modules/uni-scss/theme.scss @@ -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); diff --git a/uni_modules/uni-scss/variables.scss b/uni_modules/uni-scss/variables.scss new file mode 100644 index 0000000..1c062d4 --- /dev/null +++ b/uni_modules/uni-scss/variables.scss @@ -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); diff --git a/uni_modules/uni-transition/changelog.md b/uni_modules/uni-transition/changelog.md new file mode 100644 index 0000000..faaf336 --- /dev/null +++ b/uni_modules/uni-transition/changelog.md @@ -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 目录规范 diff --git a/uni_modules/uni-transition/components/uni-transition/createAnimation.js b/uni_modules/uni-transition/components/uni-transition/createAnimation.js new file mode 100644 index 0000000..8f89b18 --- /dev/null +++ b/uni_modules/uni-transition/components/uni-transition/createAnimation.js @@ -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) +} diff --git a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue new file mode 100644 index 0000000..f3ddd1f --- /dev/null +++ b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue @@ -0,0 +1,286 @@ + + + + + diff --git a/uni_modules/uni-transition/package.json b/uni_modules/uni-transition/package.json new file mode 100644 index 0000000..d5c20e1 --- /dev/null +++ b/uni_modules/uni-transition/package.json @@ -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" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/uni-transition/readme.md b/uni_modules/uni-transition/readme.md new file mode 100644 index 0000000..2f8a77e --- /dev/null +++ b/uni_modules/uni-transition/readme.md @@ -0,0 +1,11 @@ + + +## Transition 过渡动画 +> **组件名：uni-transition** +> 代码块： `uTransition` + + +元素过渡动画 + +### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition) +#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 \ No newline at end of file