迁移项目到cli模式
| 
						 | 
				
			
			@ -0,0 +1,17 @@
 | 
			
		|||
<script>
 | 
			
		||||
	export default {
 | 
			
		||||
		onLaunch: function() {
 | 
			
		||||
			console.log('App Launch')
 | 
			
		||||
		},
 | 
			
		||||
		onShow: function() {
 | 
			
		||||
			console.log('App Show')
 | 
			
		||||
		},
 | 
			
		||||
		onHide: function() {
 | 
			
		||||
			console.log('App Hide')
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
	/*每个页面公共css */
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,18 @@
 | 
			
		|||
import request  from "../utils/request";
 | 
			
		||||
 | 
			
		||||
export const checkTradeNo = (params) => request({
 | 
			
		||||
	url:'/backend/zxjt_redpacket/orders/is_exist',
 | 
			
		||||
	method:'POST',
 | 
			
		||||
	...params
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
export const getAccessPage = (params) => request({
 | 
			
		||||
	url:'/backend/zxjt_redpacket/orders/access_page',
 | 
			
		||||
	...params
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
export const sendPacket = (params) => request({
 | 
			
		||||
	url:'/backend/zxjt_redpacket/orders/send_packet',
 | 
			
		||||
	method:'POST',
 | 
			
		||||
	...params
 | 
			
		||||
})
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,31 @@
 | 
			
		|||
import request  from "../utils/request";
 | 
			
		||||
 | 
			
		||||
export const login = (params) => request({
 | 
			
		||||
	url:'/v1/xy/login',
 | 
			
		||||
	method:'POST',
 | 
			
		||||
	...params
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
export const getProduceList = (params) => request({
 | 
			
		||||
	url:'/v1/auth/activity',
 | 
			
		||||
	method:'POST',
 | 
			
		||||
	...params
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
export const goBuy = (params) => request({
 | 
			
		||||
	url:'/v1/auth/order/buy',
 | 
			
		||||
	method:'POST',
 | 
			
		||||
	...params
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
export const getTicketList = (params) => request({
 | 
			
		||||
	url:'/v1/auth/order/list',
 | 
			
		||||
	method:'POST',
 | 
			
		||||
	...params
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
export const queryOrder = (params) => request({
 | 
			
		||||
	url:'/v1/auth/order/query',
 | 
			
		||||
	...params
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,22 @@
 | 
			
		|||
import App from './App'
 | 
			
		||||
 | 
			
		||||
// #ifndef VUE3
 | 
			
		||||
import Vue from 'vue'
 | 
			
		||||
import './uni.promisify.adaptor'
 | 
			
		||||
Vue.config.productionTip = false
 | 
			
		||||
App.mpType = 'app'
 | 
			
		||||
const app = new Vue({
 | 
			
		||||
  ...App
 | 
			
		||||
})
 | 
			
		||||
app.$mount()
 | 
			
		||||
// #endif
 | 
			
		||||
 | 
			
		||||
// #ifdef VUE3
 | 
			
		||||
import { createSSRApp } from 'vue'
 | 
			
		||||
export function createApp() {
 | 
			
		||||
  const app = createSSRApp(App)
 | 
			
		||||
  return {
 | 
			
		||||
    app
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
// #endif
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,78 @@
 | 
			
		|||
{
 | 
			
		||||
    "name" : "vue-h5",
 | 
			
		||||
    "appid" : "__UNI__1EFA9EE",
 | 
			
		||||
    "description" : "",
 | 
			
		||||
    "versionName" : "1.0.0",
 | 
			
		||||
    "versionCode" : "100",
 | 
			
		||||
    "transformPx" : false,
 | 
			
		||||
    /* 5+App特有相关 */
 | 
			
		||||
    "app-plus" : {
 | 
			
		||||
        "usingComponents" : true,
 | 
			
		||||
        "nvueStyleCompiler" : "uni-app",
 | 
			
		||||
        "compilerVersion" : 3,
 | 
			
		||||
        "splashscreen" : {
 | 
			
		||||
            "alwaysShowBeforeRender" : true,
 | 
			
		||||
            "waiting" : true,
 | 
			
		||||
            "autoclose" : true,
 | 
			
		||||
            "delay" : 0
 | 
			
		||||
        },
 | 
			
		||||
        /* 模块配置 */
 | 
			
		||||
        "modules" : {},
 | 
			
		||||
        /* 应用发布信息 */
 | 
			
		||||
        "distribute" : {
 | 
			
		||||
            /* android打包配置 */
 | 
			
		||||
            "android" : {
 | 
			
		||||
                "permissions" : [
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
 | 
			
		||||
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
 | 
			
		||||
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
 | 
			
		||||
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
 | 
			
		||||
                ]
 | 
			
		||||
            },
 | 
			
		||||
            /* ios打包配置 */
 | 
			
		||||
            "ios" : {},
 | 
			
		||||
            /* SDK配置 */
 | 
			
		||||
            "sdkConfigs" : {}
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
    /* 快应用特有相关 */
 | 
			
		||||
    "quickapp" : {},
 | 
			
		||||
    /* 小程序特有相关 */
 | 
			
		||||
    "mp-weixin" : {
 | 
			
		||||
        "appid" : "",
 | 
			
		||||
        "setting" : {
 | 
			
		||||
            "urlCheck" : false
 | 
			
		||||
        },
 | 
			
		||||
        "usingComponents" : true
 | 
			
		||||
    },
 | 
			
		||||
    "mp-alipay" : {
 | 
			
		||||
        "usingComponents" : true
 | 
			
		||||
    },
 | 
			
		||||
    "mp-baidu" : {
 | 
			
		||||
        "usingComponents" : true
 | 
			
		||||
    },
 | 
			
		||||
    "mp-toutiao" : {
 | 
			
		||||
        "usingComponents" : true
 | 
			
		||||
    },
 | 
			
		||||
    "uniStatistics" : {
 | 
			
		||||
        "enable" : false
 | 
			
		||||
    },
 | 
			
		||||
    "vueVersion" : "3",
 | 
			
		||||
    "h5" : {
 | 
			
		||||
        "router" : {
 | 
			
		||||
            "mode" : "hash",
 | 
			
		||||
            "base" : "./"
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,31 @@
 | 
			
		|||
{
 | 
			
		||||
	"pages": [
 | 
			
		||||
		// {
 | 
			
		||||
		// 	"path": "pages/index/index",
 | 
			
		||||
		// 	"style": {
 | 
			
		||||
		// 		"navigationBarTitleText": "现金红包明细"
 | 
			
		||||
		// 	}
 | 
			
		||||
		// },
 | 
			
		||||
		{
 | 
			
		||||
			"path": "pages/xyyk/index",
 | 
			
		||||
			"style": {
 | 
			
		||||
				"navigationBarTitleText": "兴业优酷"
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		{
 | 
			
		||||
			"path": "pages/xyyk/tickets",
 | 
			
		||||
			"style": {
 | 
			
		||||
				"navigationBarTitleText": "我的券包"
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		
 | 
			
		||||
	],
 | 
			
		||||
	"globalStyle": {
 | 
			
		||||
		"navigationStyle": "custom",
 | 
			
		||||
		"navigationBarTextStyle": "black",
 | 
			
		||||
		"navigationBarTitleText": "uni-app",
 | 
			
		||||
		"navigationBarBackgroundColor": "#F8F8F8",
 | 
			
		||||
		"backgroundColor": "#F8F8F8"
 | 
			
		||||
	},
 | 
			
		||||
	"uniIdRouter": {}
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,202 @@
 | 
			
		|||
<template>
 | 
			
		||||
	<view class="content">
 | 
			
		||||
		<!-- <view class='tips-text'>暂无可以领取的红包</view> -->
 | 
			
		||||
		<view class="tips-area">
 | 
			
		||||
			<image src="../../static/image/tips_bg.png" class="tips-img" mode="widthFix"></image>
 | 
			
		||||
		</view>
 | 
			
		||||
		<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
 | 
			
		||||
			<view class="popup-content">
 | 
			
		||||
				<view class="title">恭喜你提现成功!</view>
 | 
			
		||||
				<view class="number">{{num}}<text>元</text></view>
 | 
			
		||||
				<view class="tips">*24小时内在微信"服务通知"中领取</view>
 | 
			
		||||
				<view class="btn" @click="closePopup">
 | 
			
		||||
					<image src="../../static/image/popup_btn.png"></image>
 | 
			
		||||
				</view>
 | 
			
		||||
				<view class="close">
 | 
			
		||||
					<image src="../../static/image/ic_close.png" @click="closePopup"></image>
 | 
			
		||||
				</view>
 | 
			
		||||
			</view>
 | 
			
		||||
		</uni-popup>
 | 
			
		||||
	</view>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
	import { ref,onMounted } from 'vue';
 | 
			
		||||
	import {getQueryString} from '../../utils/utils'
 | 
			
		||||
	import { checkTradeNo,getAccessPage,sendPacket } from '../../api'
 | 
			
		||||
	const popupRef = ref(null)
 | 
			
		||||
	//红包金额
 | 
			
		||||
	const num = ref(0);
 | 
			
		||||
	//有code就代表是授权回调回来的
 | 
			
		||||
	const isRedirect = () => {
 | 
			
		||||
		return !!getQueryString('code')
 | 
			
		||||
	}
 | 
			
		||||
	onMounted(() => {
 | 
			
		||||
		const isRedir = isRedirect()
 | 
			
		||||
		if(!isRedir){
 | 
			
		||||
			const orderInfo = {
 | 
			
		||||
				tid:getQueryString('tid'),
 | 
			
		||||
				timeStamp:getQueryString('timeStamp'),
 | 
			
		||||
				sign:getQueryString('sign'),
 | 
			
		||||
				tradeNo:getQueryString('tradeNo'),
 | 
			
		||||
			};
 | 
			
		||||
			uni.setStorageSync('orderInfo',JSON.stringify(orderInfo));
 | 
			
		||||
			checkEvent()
 | 
			
		||||
		}else{
 | 
			
		||||
			sendEvent()
 | 
			
		||||
		}
 | 
			
		||||
	})
 | 
			
		||||
	//检查是否存在可领取红包
 | 
			
		||||
	const checkEvent = () => {
 | 
			
		||||
		const params = {tradeNo:getQueryString('tradeNo')}
 | 
			
		||||
		checkTradeNo({params}).then(res => {
 | 
			
		||||
			if(res.status === true){
 | 
			
		||||
				recieveEvent()
 | 
			
		||||
			}else{
 | 
			
		||||
				uni.showModal({
 | 
			
		||||
					title: '提示',
 | 
			
		||||
					content: '暂无可领取的红包!!!',
 | 
			
		||||
					showCancel:false,
 | 
			
		||||
					success: function (res) {
 | 
			
		||||
						if (res.confirm) {
 | 
			
		||||
							console.log('用户点击确定');
 | 
			
		||||
						} else if (res.cancel) {
 | 
			
		||||
							console.log('用户点击取消');
 | 
			
		||||
						}
 | 
			
		||||
					}
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		}).catch(() => {
 | 
			
		||||
			uni.showModal({
 | 
			
		||||
				title: '提示',
 | 
			
		||||
				content: '暂无可领取的红包!!!',
 | 
			
		||||
				showCancel:false,
 | 
			
		||||
				success: function (res) {
 | 
			
		||||
					if (res.confirm) {
 | 
			
		||||
						console.log('用户点击确定');
 | 
			
		||||
					} else if (res.cancel) {
 | 
			
		||||
						console.log('用户点击取消');
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
	//发送红包的事件
 | 
			
		||||
	const sendEvent = () => {
 | 
			
		||||
		const orderInfo = JSON.parse(uni.getStorageSync('orderInfo'))
 | 
			
		||||
		const {tid,timeStamp,sign,tradeNo} = orderInfo
 | 
			
		||||
		const params = {
 | 
			
		||||
			tid:Number(tid),
 | 
			
		||||
			code:getQueryString('code'),
 | 
			
		||||
			timeStamp,
 | 
			
		||||
			sign,
 | 
			
		||||
			tradeNo,
 | 
			
		||||
		}
 | 
			
		||||
		sendPacket({params}).then(res => {
 | 
			
		||||
			//金额以分为单位,需要转换
 | 
			
		||||
			num.value = res.amount / 100
 | 
			
		||||
			popupRef.value.open()
 | 
			
		||||
		}).catch((err) => {
 | 
			
		||||
			console.log(err)
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
	//领取红包事件
 | 
			
		||||
	const recieveEvent = () => {
 | 
			
		||||
		const orderInfo = JSON.parse(uni.getStorageSync('orderInfo'))
 | 
			
		||||
		const {tid,timeStamp,sign,tradeNo} = orderInfo
 | 
			
		||||
		const url = `https://lsxdwx.access.86698.cn/?tid=${tid}&tradeNo=${tradeNo}`
 | 
			
		||||
		console.log(url);
 | 
			
		||||
		window.location.href = url;
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	const closePopup = () => {
 | 
			
		||||
		popupRef.value.close()
 | 
			
		||||
	}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang='scss'>
 | 
			
		||||
	.content {
 | 
			
		||||
		width: 100vw;
 | 
			
		||||
		height:100vh;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		flex-direction: column;
 | 
			
		||||
		align-items: center;
 | 
			
		||||
		justify-content: flex-end;
 | 
			
		||||
		background: url('../../static/image/bg.png') no-repeat;
 | 
			
		||||
		background-size: 100% 100%;
 | 
			
		||||
		box-sizing:border-box;
 | 
			
		||||
		padding-bottom:20rpx;
 | 
			
		||||
		.tips-text{
 | 
			
		||||
			color:#310000;
 | 
			
		||||
			font-size:40rpx;
 | 
			
		||||
			position: absolute;
 | 
			
		||||
			top:50%;
 | 
			
		||||
			left:50%;
 | 
			
		||||
			transform: translate(-50%,-50%);
 | 
			
		||||
		}
 | 
			
		||||
		.btn-area{
 | 
			
		||||
			position: absolute;
 | 
			
		||||
			top:50%;
 | 
			
		||||
			left:50%;
 | 
			
		||||
			transform: translate(-50%,-50%);
 | 
			
		||||
			image{
 | 
			
		||||
				width:300rpx;
 | 
			
		||||
				height:100rpx;
 | 
			
		||||
				border-radius:100rpx;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.tips-area{
 | 
			
		||||
			width:700rpx;
 | 
			
		||||
			margin-top:40rpx;
 | 
			
		||||
			.tips-img{
 | 
			
		||||
				display: block;
 | 
			
		||||
				width:100%;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	.popup-content{
 | 
			
		||||
		width:750rpx;
 | 
			
		||||
		height:850rpx;
 | 
			
		||||
		background: url("../../static/image/popup_bg.png") no-repeat;
 | 
			
		||||
		background-size:100% 800rpx;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		flex-direction: column;
 | 
			
		||||
		align-items: center;
 | 
			
		||||
		box-sizing: border-box;
 | 
			
		||||
		padding-top:230rpx;
 | 
			
		||||
		.title{
 | 
			
		||||
			font-weight:bolder;
 | 
			
		||||
			margin-bottom:20rpx;
 | 
			
		||||
			color:#0A0200;
 | 
			
		||||
			font-size:34rpx;
 | 
			
		||||
		}
 | 
			
		||||
		.number{
 | 
			
		||||
			color:#F71E00;
 | 
			
		||||
			font-size:90rpx;
 | 
			
		||||
			font-weight:bolder;
 | 
			
		||||
			margin-bottom:15rpx;
 | 
			
		||||
			> text{
 | 
			
		||||
				font-size:40rpx;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.tips{
 | 
			
		||||
			color:#43403F;
 | 
			
		||||
			font-size:30rpx;
 | 
			
		||||
			margin-bottom:85rpx;
 | 
			
		||||
			opacity: 0.6;
 | 
			
		||||
			font-size:28rpx;
 | 
			
		||||
			font-weight:400;
 | 
			
		||||
		}
 | 
			
		||||
		.btn > image{
 | 
			
		||||
			width:300rpx;
 | 
			
		||||
			height:90rpx;
 | 
			
		||||
		}
 | 
			
		||||
		.close {
 | 
			
		||||
			margin-top:60rpx;
 | 
			
		||||
			> image {
 | 
			
		||||
				width:60rpx;
 | 
			
		||||
				height:60rpx;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,87 @@
 | 
			
		|||
<template>
 | 
			
		||||
	<view class="product-container">
 | 
			
		||||
		<view class="product-tips">
 | 
			
		||||
			支付享立减1元
 | 
			
		||||
		</view>
 | 
			
		||||
		<view class="product-price display">
 | 
			
		||||
			<view class="price">
 | 
			
		||||
				¥<text>{{detail.price}}</text>/{{detail.brand}}
 | 
			
		||||
			</view>
 | 
			
		||||
			<view class="ori">
 | 
			
		||||
				原价{{detail.show_price}}
 | 
			
		||||
			</view>
 | 
			
		||||
		</view>
 | 
			
		||||
		<view class="product-type display">
 | 
			
		||||
			{{detail.name}}
 | 
			
		||||
		</view>
 | 
			
		||||
		<view class="product-btn" @click="$emit('buy-event',detail)">
 | 
			
		||||
			立即购买
 | 
			
		||||
		</view>
 | 
			
		||||
	</view>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
	const props = defineProps({
 | 
			
		||||
		detail:{
 | 
			
		||||
			type:Object,
 | 
			
		||||
			require:true,
 | 
			
		||||
		}
 | 
			
		||||
	})
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.product-container{
 | 
			
		||||
	width:292rpx;
 | 
			
		||||
	height:318rpx;
 | 
			
		||||
	background: url('../../../static/xyyk/bg-product.png') no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	margin-top:30rpx;
 | 
			
		||||
	.product-tips{
 | 
			
		||||
		font-weight: 400;
 | 
			
		||||
		font-size: 20rpx;
 | 
			
		||||
		color: #B05619;
 | 
			
		||||
		box-sizing: border-box;
 | 
			
		||||
		padding-left:40rpx;
 | 
			
		||||
	}
 | 
			
		||||
	.display{
 | 
			
		||||
		display: flex;
 | 
			
		||||
		flex-direction: column;
 | 
			
		||||
		align-items: center;
 | 
			
		||||
	}
 | 
			
		||||
	.product-price{
 | 
			
		||||
		color: #FD613F;
 | 
			
		||||
		.price{
 | 
			
		||||
			font-weight: 400;
 | 
			
		||||
			font-size: 40rpx;
 | 
			
		||||
			text{
 | 
			
		||||
				font-weight:bold;
 | 
			
		||||
				font-size: 60rpx;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.ori{
 | 
			
		||||
			font-size: 24rpx;
 | 
			
		||||
			color: #E18B72;
 | 
			
		||||
			font-weight:400;
 | 
			
		||||
			text-decoration-line: line-through;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	.product-type{
 | 
			
		||||
		font-weight: 400;
 | 
			
		||||
		font-size: 28rpx;
 | 
			
		||||
		color: #FFFFFF;
 | 
			
		||||
		margin-top:40rpx;
 | 
			
		||||
	}
 | 
			
		||||
	.product-btn{
 | 
			
		||||
		width: 218rpx;
 | 
			
		||||
		height: 60rpx;
 | 
			
		||||
		background: linear-gradient( 90deg, #FFD888 0%, #FFE39E 100%);
 | 
			
		||||
		border-radius: 30rpx;
 | 
			
		||||
		font-weight: 400;
 | 
			
		||||
		font-size: 30rpx;
 | 
			
		||||
		color: #A83203;
 | 
			
		||||
		text-align: center;
 | 
			
		||||
		line-height: 60rpx;
 | 
			
		||||
		margin:16rpx auto 0;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,80 @@
 | 
			
		|||
<template>
 | 
			
		||||
	<view class="ticket-container">
 | 
			
		||||
		<view class="ticket-type">{{detail.product_name}}</view>
 | 
			
		||||
		<view class="ticket-content">
 | 
			
		||||
			<image src="../../../static/xyyk/icon-ticket.png" mode=""></image>
 | 
			
		||||
			<view class="ticket-name">{{detail.product_name}}</view>
 | 
			
		||||
			<view class="ticket-btn" @click="$emit('view-event',detail)">
 | 
			
		||||
				立即查看
 | 
			
		||||
			</view>
 | 
			
		||||
		</view>
 | 
			
		||||
	</view>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
	const props = defineProps({
 | 
			
		||||
		detail:{
 | 
			
		||||
			type:Object,
 | 
			
		||||
			require:true
 | 
			
		||||
		}
 | 
			
		||||
	})
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.ticket-container{
 | 
			
		||||
	width: 694rpx;
 | 
			
		||||
	height: 240rpx;
 | 
			
		||||
	background: #FFFFFF;
 | 
			
		||||
	border-radius: 24rpx 24rpx 24rpx 24rpx;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
	font-size: 32rpx;
 | 
			
		||||
	color: #1A1A1A;
 | 
			
		||||
	box-sizing: border-box;
 | 
			
		||||
	padding:32rpx;
 | 
			
		||||
	display: flex;
 | 
			
		||||
	flex-direction: column;
 | 
			
		||||
	justify-content: space-between;
 | 
			
		||||
	margin-top:32rpx;
 | 
			
		||||
	.ticket-type{
 | 
			
		||||
		width:100%;
 | 
			
		||||
		height:32rpx;
 | 
			
		||||
		font-weight: 500;
 | 
			
		||||
		font-size: 32rpx;
 | 
			
		||||
		color: #1A1A1A;
 | 
			
		||||
		line-height: 32rpx;
 | 
			
		||||
	}
 | 
			
		||||
	.ticket-content{
 | 
			
		||||
		height:92rpx;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		align-items: center;
 | 
			
		||||
		position: relative;
 | 
			
		||||
		image{
 | 
			
		||||
			width:92rpx;
 | 
			
		||||
			height:92rpx;
 | 
			
		||||
			margin-right: 22rpx;
 | 
			
		||||
		}
 | 
			
		||||
		.ticket-name{
 | 
			
		||||
			font-weight: 500;
 | 
			
		||||
			font-size: 28rpx;
 | 
			
		||||
			color: #333333;
 | 
			
		||||
			width:50%;
 | 
			
		||||
			overflow: hidden; /* 隐藏溢出内容 */
 | 
			
		||||
			text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
 | 
			
		||||
			white-space: nowrap; /* 禁止文本换行 */
 | 
			
		||||
		}
 | 
			
		||||
		.ticket-btn{
 | 
			
		||||
			position: absolute;
 | 
			
		||||
			right:0;
 | 
			
		||||
			width: 150rpx;
 | 
			
		||||
			height: 54rpx;
 | 
			
		||||
			background: #47A5FF;
 | 
			
		||||
			border-radius: 27rpx;
 | 
			
		||||
			font-weight: 500;
 | 
			
		||||
			font-size: 24rpx;
 | 
			
		||||
			color: #FFFFFF;
 | 
			
		||||
			text-align: center;
 | 
			
		||||
			line-height:54rpx ;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,243 @@
 | 
			
		|||
<template>
 | 
			
		||||
	<view class="container">
 | 
			
		||||
		<image class="title" src="../../static/xyyk/bg-title.png" mode="widthFix"></image>
 | 
			
		||||
		<view class="tips">
 | 
			
		||||
			支付享立减1元
 | 
			
		||||
		</view>
 | 
			
		||||
		<view class="tickets" @click="toTickets">
 | 
			
		||||
			我的券包
 | 
			
		||||
		</view>
 | 
			
		||||
		<view class="bottom-banner">
 | 
			
		||||
			<view class="banner-title">
 | 
			
		||||
				兑换商品列表
 | 
			
		||||
			</view>
 | 
			
		||||
			<view class="banner-tips">
 | 
			
		||||
				<view>兴业优酷半价购送周卡</view>
 | 
			
		||||
				<view><text class="line"></text>支付享立减1元<text class="line"></text></view>
 | 
			
		||||
			</view>
 | 
			
		||||
			<scroll-view class="banner-content" scroll-y>
 | 
			
		||||
				<view class="banner-container">
 | 
			
		||||
					<view v-for="(item,index) in products" :key="item.id">
 | 
			
		||||
						<ProductItem :detail="item" @buy-event="handleBuy"/>
 | 
			
		||||
					</view>
 | 
			
		||||
				</view>
 | 
			
		||||
			</scroll-view>
 | 
			
		||||
		</view>
 | 
			
		||||
		<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
 | 
			
		||||
			<view class="popup-content">
 | 
			
		||||
				<view class="popup-title">购买{{payResult ? '成功' : '失败'}}</view>
 | 
			
		||||
				<view class="popup-tips" v-if="payResult">恭喜购买成功,请稍后查看结果</view>
 | 
			
		||||
				<view class="popup-tips" v-else>支付失败了</view>
 | 
			
		||||
				<view class="btn" @click="closePopup">
 | 
			
		||||
					确定
 | 
			
		||||
				</view>
 | 
			
		||||
			</view>
 | 
			
		||||
		</uni-popup>
 | 
			
		||||
	</view>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
	
 | 
			
		||||
	import { onMounted, ref } from 'vue';
 | 
			
		||||
	import ProductItem from './components/product-item';
 | 
			
		||||
	import {getQueryString} from '../../utils/utils';
 | 
			
		||||
	import {login,getProduceList,goBuy,queryOrder} from '../../api/xyyk';
 | 
			
		||||
	
 | 
			
		||||
	const popupRef = ref(null);
 | 
			
		||||
	const products = ref([]);
 | 
			
		||||
	const payResult = ref(false);
 | 
			
		||||
	const orderNo = "SN202406131136518803"
 | 
			
		||||
	const code = 'MDQ4MDM2ZWYwNzUxYmMwYmM3YTk4ZjdmNjEzZWNmOGNjZDk0OGQ5ZjM0NjY1NjY1NDMyYjY2MzVmNjkwZTE5MjU1MTdhOTc1MDkzOGVhMWJhNDE5YWVlMjQ5NGMwZjFmMTg4NzgyZDBiN2UyOGYwZDFjNzIzOGIzOTQ1ZGRiMWU0M2FiNjhjOTRlZjEyODE1MmM5NjIyMTQzZTBhYmQzZGFiOTRjM2ZhNTNlYTVlYTRiOGY0ZTIxZjFkN2I4ZjFlYzBmODQ1NzlmYTY2MDJmMmViZDIxMzc4ZDMwMmM1OGExZTZiMTQ1N2Y0MjY5NWJlNDRhZWU5YzE5OTViMmQ1MjAxNWY5NWM4ZTQ0OGI2NGEyZDI5MTkyNWNkZjA0YWIwZjFlZGE3MGJmZjk3YzViZTYwNTYzZDgxMjk2YmE5MWE4ZDQ0ZDZiZGY3MmJlMzdmN2NmMjI3YjU5NmQwNmMwYWM4MmZkYjc5MTk0MmRlNzE0NWU3ZmYxMGNkNjhmN2RhODMwMzU3NGUzMTM0ZGU3OTc1NWIwNDM0ODBmMjdlMzliZDEwZjViNWI4OTE1N2RhN2EzNmU5ZGNmZjQ3NzhiYjBhOGFmOTNlNTM2M2NiNmIzY2UwODJjZDU5NzFjMTVmZGI2ZA=='
 | 
			
		||||
	
 | 
			
		||||
	onMounted(()=>{
 | 
			
		||||
		//页面连接中带code代表第一次进入页面,带订单号代表支付回调回来进入页面
 | 
			
		||||
		// const code = getQueryString('code');
 | 
			
		||||
		// const orderNo = getQueryString('order_no');
 | 
			
		||||
		// if(code){
 | 
			
		||||
		// 	getProductConfig()
 | 
			
		||||
		// }else if(orderNo){
 | 
			
		||||
		// 	queryOrderStatus()
 | 
			
		||||
		// }
 | 
			
		||||
		getProductConfig()
 | 
			
		||||
	})
 | 
			
		||||
	
 | 
			
		||||
	const getProductConfig = async () => {
 | 
			
		||||
		const params = {data:code}
 | 
			
		||||
		const resData = await login({params})
 | 
			
		||||
		uni.setStorageSync('token',resData.token);
 | 
			
		||||
		const productConfig = await getProduceList();
 | 
			
		||||
		const {name,description,product} = productConfig;
 | 
			
		||||
		products.value = product;
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	const queryOrderStatus = () => {
 | 
			
		||||
		const params = {
 | 
			
		||||
			order_no:orderNo
 | 
			
		||||
		}
 | 
			
		||||
		queryOrder({params}).then(res => {
 | 
			
		||||
			const {state} = res
 | 
			
		||||
			payResult.value = state == '2' ? true : false;
 | 
			
		||||
			popupRef.value.open()
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	const handleBuy = (item) => {
 | 
			
		||||
		const {id} = item;
 | 
			
		||||
		const params = {product_id:id}
 | 
			
		||||
		goBuy({params}).then(res => {
 | 
			
		||||
			const {payToken,payOrderId,mchtOrderId} = res;
 | 
			
		||||
			window.location.href = payToken;
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	const toTickets = () => {
 | 
			
		||||
		uni.navigateTo({url:'/pages/xyyk/tickets'})
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	const closePopup = () => {
 | 
			
		||||
		popupRef.value.close()
 | 
			
		||||
	}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.container{
 | 
			
		||||
	position: relative;
 | 
			
		||||
	display: flex;
 | 
			
		||||
	flex-direction: column;
 | 
			
		||||
	align-items: center;
 | 
			
		||||
	width:100vw;
 | 
			
		||||
	height:100vh;
 | 
			
		||||
	background: url('../../static/xyyk/bg.png') no-repeat;
 | 
			
		||||
	background-size: 100% 100%;
 | 
			
		||||
	.title{
 | 
			
		||||
		width:640rpx;
 | 
			
		||||
		margin: 32rpx auto 0;
 | 
			
		||||
	}
 | 
			
		||||
	.tips{
 | 
			
		||||
		width: 215rpx;
 | 
			
		||||
		height: 42rpx;
 | 
			
		||||
		background: linear-gradient( 90deg, #E5F5FF 0%, #FFFEFF 100%);
 | 
			
		||||
		border-radius: 21rpx;
 | 
			
		||||
		margin-top:16rpx;
 | 
			
		||||
		font-weight: 400;
 | 
			
		||||
		font-size: 24rpx;
 | 
			
		||||
		color: #00A5EB;
 | 
			
		||||
		text-align: center;
 | 
			
		||||
		line-height: 42rpx;
 | 
			
		||||
	}
 | 
			
		||||
	.tickets{
 | 
			
		||||
		position: fixed;
 | 
			
		||||
		right:0;
 | 
			
		||||
		top:150rpx;
 | 
			
		||||
		width: 102rpx;
 | 
			
		||||
		height: 32rpx;
 | 
			
		||||
		background: linear-gradient( 90deg, #E7F6FF 0%, #FEFEFF 100%);
 | 
			
		||||
		border-radius: 52rpx 0px 0px 52rpx;
 | 
			
		||||
		font-weight: 400;
 | 
			
		||||
		font-size: 20rpx;
 | 
			
		||||
		color: #00A5EB;
 | 
			
		||||
		line-height: 28rpx;
 | 
			
		||||
		text-align: center;
 | 
			
		||||
		line-height: 28rpx;
 | 
			
		||||
	}
 | 
			
		||||
	.bottom-banner{
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		bottom:10rpx;
 | 
			
		||||
		width:730rpx;
 | 
			
		||||
		height:620rpx;
 | 
			
		||||
		background: url('../../static/xyyk/bg-banner.png') no-repeat;
 | 
			
		||||
		background-size: 100% 100%;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		flex-direction: column;
 | 
			
		||||
		.banner-title{
 | 
			
		||||
			width:350rpx;
 | 
			
		||||
			height:78rpx;
 | 
			
		||||
			text-align: center;
 | 
			
		||||
			line-height: 78rpx;
 | 
			
		||||
			font-weight: 400;
 | 
			
		||||
			font-size: 32rpx;
 | 
			
		||||
			color: #FFFFFF;
 | 
			
		||||
			margin:0 auto;
 | 
			
		||||
			padding-left:50rpx;
 | 
			
		||||
		}
 | 
			
		||||
		.banner-tips{
 | 
			
		||||
			display: flex;
 | 
			
		||||
			flex-direction: column;
 | 
			
		||||
			align-items: center;
 | 
			
		||||
			margin-top:30rpx;
 | 
			
		||||
			.line{
 | 
			
		||||
				display: block;
 | 
			
		||||
				width: 40rpx;
 | 
			
		||||
				height: 0;
 | 
			
		||||
				border: 1rpx solid #3F85BC;
 | 
			
		||||
				&:first-child{
 | 
			
		||||
					margin-right:14rpx;
 | 
			
		||||
				}
 | 
			
		||||
				&:last-child{
 | 
			
		||||
					margin-left:14rpx;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			> :first-child{
 | 
			
		||||
				font-weight: 600;
 | 
			
		||||
				font-size: 32rpx;
 | 
			
		||||
				color: #135BC3;
 | 
			
		||||
			}
 | 
			
		||||
			> :last-child{
 | 
			
		||||
				display: flex;
 | 
			
		||||
				align-items: center;
 | 
			
		||||
				font-weight: 400;
 | 
			
		||||
				font-size: 28rpx;
 | 
			
		||||
				color: #3F85BC;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.banner-content{
 | 
			
		||||
			box-sizing: border-box;
 | 
			
		||||
			padding:0 60rpx 40rpx;
 | 
			
		||||
			flex:1;
 | 
			
		||||
			overflow: auto;
 | 
			
		||||
			.banner-container{
 | 
			
		||||
				display: flex;
 | 
			
		||||
				justify-content: space-between;
 | 
			
		||||
				flex-wrap: wrap;
 | 
			
		||||
			}
 | 
			
		||||
			
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	.popup-content{
 | 
			
		||||
		width:578rpx;
 | 
			
		||||
		height:700rpx;
 | 
			
		||||
		background: url("../../static/xyyk/bg-popup.png") no-repeat;
 | 
			
		||||
		background-size:100% 700rpx;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		flex-direction: column;
 | 
			
		||||
		align-items: center;
 | 
			
		||||
		box-sizing: border-box;
 | 
			
		||||
		padding-top:290rpx;
 | 
			
		||||
		.popup-title{
 | 
			
		||||
			font-weight:600;
 | 
			
		||||
			color:#111B1F;
 | 
			
		||||
			font-size:60rpx;
 | 
			
		||||
			margin-top:24rpx;
 | 
			
		||||
		}
 | 
			
		||||
		.popup-tips{
 | 
			
		||||
			font-weight: 400;
 | 
			
		||||
			font-size: 28rpx;
 | 
			
		||||
			color: #00A5EB;
 | 
			
		||||
			margin-top:34rpx;
 | 
			
		||||
			opacity: .6;
 | 
			
		||||
		}
 | 
			
		||||
		.btn{
 | 
			
		||||
			width: 236rpx;
 | 
			
		||||
			height: 72rpx;
 | 
			
		||||
			background: linear-gradient( 180deg, #57C3FB 7%, #2D98F7 100%);
 | 
			
		||||
			border-radius: 36rpx;
 | 
			
		||||
			text-align: center;
 | 
			
		||||
			line-height: 72rpx;
 | 
			
		||||
			font-weight: 400;
 | 
			
		||||
			font-size: 32rpx;
 | 
			
		||||
			color: #FFFFFF;
 | 
			
		||||
			margin-top:100rpx;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,66 @@
 | 
			
		|||
<template>
 | 
			
		||||
	<scroll-view scroll-y="true" class="container" @scrolltolower="getNextPage">
 | 
			
		||||
		<view class="wrapper">
 | 
			
		||||
			<view v-for="(item,index) in list" :key="item.id">
 | 
			
		||||
				<TicketItem :detail="item" @view-event="handleView"/>
 | 
			
		||||
			</view>
 | 
			
		||||
		</view>
 | 
			
		||||
	</scroll-view>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
	import { onMounted , ref, unref } from 'vue';
 | 
			
		||||
	import TicketItem from './components/ticket-item';
 | 
			
		||||
	import {getTicketList} from '../../api/xyyk';
 | 
			
		||||
	
 | 
			
		||||
	const page = ref(1);
 | 
			
		||||
	const pageSize = 10;
 | 
			
		||||
	const total = ref(0);
 | 
			
		||||
	const list = ref([]);
 | 
			
		||||
	
 | 
			
		||||
	onMounted(()=> {
 | 
			
		||||
		const params = {
 | 
			
		||||
			page:unref(page),
 | 
			
		||||
			pageSize:unref(pageSize)
 | 
			
		||||
		}
 | 
			
		||||
		getTicketList({params}).then(res => {
 | 
			
		||||
			const {count,data} = res
 | 
			
		||||
			total.value = count;
 | 
			
		||||
			list.value = data;
 | 
			
		||||
		})
 | 
			
		||||
	})
 | 
			
		||||
	const isLastPage = () => unref(page) === Math.ceil(unref(total) / pageSize)
 | 
			
		||||
	
 | 
			
		||||
	const getNextPage = () => {
 | 
			
		||||
		if(isLastPage){
 | 
			
		||||
			console.log('已经是最后一页');
 | 
			
		||||
			return false;
 | 
			
		||||
		};
 | 
			
		||||
		const params = {
 | 
			
		||||
			page:unref(page) + 1,
 | 
			
		||||
			pageSize:unref(pageSize),
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	const handleView = (item) => {
 | 
			
		||||
		const {voucher_link} = item
 | 
			
		||||
		console.log(item)
 | 
			
		||||
	}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.container{
 | 
			
		||||
	width:100vw;
 | 
			
		||||
	height:100vh;
 | 
			
		||||
	background-color: #f7f7f7;
 | 
			
		||||
	overflow-y: auto;
 | 
			
		||||
	.wrapper{
 | 
			
		||||
		width:100%;
 | 
			
		||||
		position: relative;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		flex-direction: column;
 | 
			
		||||
		align-items: center;
 | 
			
		||||
		padding-bottom:32rpx;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,10 @@
 | 
			
		|||
uni.addInterceptor({
 | 
			
		||||
  returnValue (res) {
 | 
			
		||||
    if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
 | 
			
		||||
      return res;
 | 
			
		||||
    }
 | 
			
		||||
    return new Promise((resolve, reject) => {
 | 
			
		||||
      res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
 | 
			
		||||
    });
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,76 @@
 | 
			
		|||
/**
 | 
			
		||||
 * 这里是uni-app内置的常用样式变量
 | 
			
		||||
 *
 | 
			
		||||
 * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
 | 
			
		||||
 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
 | 
			
		||||
 *
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
 | 
			
		||||
 *
 | 
			
		||||
 * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
/* 颜色变量 */
 | 
			
		||||
 | 
			
		||||
/* 行为相关颜色 */
 | 
			
		||||
$uni-color-primary: #007aff;
 | 
			
		||||
$uni-color-success: #4cd964;
 | 
			
		||||
$uni-color-warning: #f0ad4e;
 | 
			
		||||
$uni-color-error: #dd524d;
 | 
			
		||||
 | 
			
		||||
/* 文字基本颜色 */
 | 
			
		||||
$uni-text-color:#333;//基本色
 | 
			
		||||
$uni-text-color-inverse:#fff;//反色
 | 
			
		||||
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
 | 
			
		||||
$uni-text-color-placeholder: #808080;
 | 
			
		||||
$uni-text-color-disable:#c0c0c0;
 | 
			
		||||
 | 
			
		||||
/* 背景颜色 */
 | 
			
		||||
$uni-bg-color:#ffffff;
 | 
			
		||||
$uni-bg-color-grey:#f8f8f8;
 | 
			
		||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
 | 
			
		||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 | 
			
		||||
 | 
			
		||||
/* 边框颜色 */
 | 
			
		||||
$uni-border-color:#c8c7cc;
 | 
			
		||||
 | 
			
		||||
/* 尺寸变量 */
 | 
			
		||||
 | 
			
		||||
/* 文字尺寸 */
 | 
			
		||||
$uni-font-size-sm:12px;
 | 
			
		||||
$uni-font-size-base:14px;
 | 
			
		||||
$uni-font-size-lg:16px;
 | 
			
		||||
 | 
			
		||||
/* 图片尺寸 */
 | 
			
		||||
$uni-img-size-sm:20px;
 | 
			
		||||
$uni-img-size-base:26px;
 | 
			
		||||
$uni-img-size-lg:40px;
 | 
			
		||||
 | 
			
		||||
/* Border Radius */
 | 
			
		||||
$uni-border-radius-sm: 2px;
 | 
			
		||||
$uni-border-radius-base: 3px;
 | 
			
		||||
$uni-border-radius-lg: 6px;
 | 
			
		||||
$uni-border-radius-circle: 50%;
 | 
			
		||||
 | 
			
		||||
/* 水平间距 */
 | 
			
		||||
$uni-spacing-row-sm: 5px;
 | 
			
		||||
$uni-spacing-row-base: 10px;
 | 
			
		||||
$uni-spacing-row-lg: 15px;
 | 
			
		||||
 | 
			
		||||
/* 垂直间距 */
 | 
			
		||||
$uni-spacing-col-sm: 4px;
 | 
			
		||||
$uni-spacing-col-base: 8px;
 | 
			
		||||
$uni-spacing-col-lg: 12px;
 | 
			
		||||
 | 
			
		||||
/* 透明度 */
 | 
			
		||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 | 
			
		||||
 | 
			
		||||
/* 文章场景相关 */
 | 
			
		||||
$uni-color-title: #2C405A; // 文章标题颜色
 | 
			
		||||
$uni-font-size-title:20px;
 | 
			
		||||
$uni-color-subtitle: #555555; // 二级标题颜色
 | 
			
		||||
$uni-font-size-subtitle:26px;
 | 
			
		||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
 | 
			
		||||
$uni-font-size-paragraph:15px;
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,84 @@
 | 
			
		|||
## 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 端
 | 
			
		||||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,187 @@
 | 
			
		|||
<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 {
 | 
			
		||||
				bottomData: [{
 | 
			
		||||
						text: '微信',
 | 
			
		||||
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
 | 
			
		||||
						name: 'wx'
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						text: '支付宝',
 | 
			
		||||
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
 | 
			
		||||
						name: 'ali'
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						text: 'QQ',
 | 
			
		||||
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
 | 
			
		||||
						name: 'qq'
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						text: '新浪',
 | 
			
		||||
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.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>
 | 
			
		||||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,7 @@
 | 
			
		|||
{
 | 
			
		||||
	"uni-popup.cancel": "取消",
 | 
			
		||||
	"uni-popup.ok": "确定",
 | 
			
		||||
	"uni-popup.placeholder": "请输入",
 | 
			
		||||
		"uni-popup.title": "提示",
 | 
			
		||||
		"uni-popup.shareTitle": "分享到"
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,7 @@
 | 
			
		|||
{
 | 
			
		||||
	"uni-popup.cancel": "取消",
 | 
			
		||||
	"uni-popup.ok": "確定",
 | 
			
		||||
	"uni-popup.placeholder": "請輸入",
 | 
			
		||||
	"uni-popup.title": "提示",
 | 
			
		||||
	"uni-popup.shareTitle": "分享到"
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
		},
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,503 @@
 | 
			
		|||
<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 = () => {
 | 
			
		||||
				const {
 | 
			
		||||
					windowWidth,
 | 
			
		||||
					windowHeight,
 | 
			
		||||
					windowTop,
 | 
			
		||||
					safeArea,
 | 
			
		||||
					screenHeight,
 | 
			
		||||
					safeAreaInsets
 | 
			
		||||
				} = uni.getSystemInfoSync()
 | 
			
		||||
				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(() => {
 | 
			
		||||
					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.showPopup = true
 | 
			
		||||
				this.showTrans = true
 | 
			
		||||
			},
 | 
			
		||||
			/**
 | 
			
		||||
			 * 中间弹出样式处理
 | 
			
		||||
			 */
 | 
			
		||||
			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.showPopup = true
 | 
			
		||||
				this.showTrans = true
 | 
			
		||||
			},
 | 
			
		||||
			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.showPopup = true
 | 
			
		||||
				this.showTrans = true
 | 
			
		||||
			},
 | 
			
		||||
			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.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>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,88 @@
 | 
			
		|||
{
 | 
			
		||||
	"id": "uni-popup",
 | 
			
		||||
	"displayName": "uni-popup 弹出层",
 | 
			
		||||
	"version": "1.9.1",
 | 
			
		||||
	"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"
 | 
			
		||||
				},
 | 
			
		||||
				"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"
 | 
			
		||||
                }
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,17 @@
 | 
			
		|||
 | 
			
		||||
 | 
			
		||||
## Popup 弹出层
 | 
			
		||||
> **组件名:uni-popup**
 | 
			
		||||
> 代码块: `uPopup`
 | 
			
		||||
> 关联组件:`uni-transition`
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
 | 
			
		||||
 | 
			
		||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
 | 
			
		||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1 @@
 | 
			
		|||
@import './styles/index.scss';
 | 
			
		||||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,4 @@
 | 
			
		|||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
 | 
			
		||||
 | 
			
		||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
 | 
			
		||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 
 | 
			
		||||
| 
						 | 
				
			
			@ -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';
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,3 @@
 | 
			
		|||
.uni-border {
 | 
			
		||||
	border: 1px $uni-border-1 solid;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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)
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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 */
 | 
			
		||||
| 
						 | 
				
			
			@ -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 */
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
| 
						 | 
				
			
			@ -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 目录规范
 | 
			
		||||
| 
						 | 
				
			
			@ -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)
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,11 @@
 | 
			
		|||
 | 
			
		||||
 | 
			
		||||
## Transition 过渡动画
 | 
			
		||||
> **组件名:uni-transition**
 | 
			
		||||
> 代码块: `uTransition`
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
元素过渡动画
 | 
			
		||||
 | 
			
		||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
 | 
			
		||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 
 | 
			
		||||
| 
		 After Width: | Height: | Size: 147 KiB  | 
| 
						 | 
				
			
			@ -0,0 +1 @@
 | 
			
		|||
*{margin:0;-webkit-tap-highlight-color:transparent}html,body{-webkit-user-select:none;user-select:none;width:100%;height:100%}body{overflow-x:hidden;font-size:16px}uni-app,uni-page,uni-page-wrapper,uni-page-body{display:block;box-sizing:border-box;width:100%}uni-page-wrapper{position:relative}#app,uni-app,uni-page,uni-page-wrapper{height:100%}.uni-mask{position:fixed;z-index:999;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.5)}.uni-fade-enter-active,.uni-fade-leave-active{transition-duration:.25s;transition-property:opacity;transition-timing-function:ease}.uni-fade-enter-from,.uni-fade-leave-active{opacity:0}.uni-loading,uni-button[loading]:before{background-color:transparent;background-image:url(data:image/svg+xml;base64,\ PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=);background-repeat:no-repeat}.uni-loading{width:20px;height:20px;display:inline-block;vertical-align:middle;animation:uni-loading 1s steps(12,end) infinite;background-size:100%}@keyframes uni-loading{0%{transform:rotate3d(0,0,1,0)}to{transform:rotate3d(0,0,1,360deg)}}html{--primary-color: #007aff;--UI-BG: #fff;--UI-BG-1: #f7f7f7;--UI-BG-2: #fff;--UI-BG-3: #f7f7f7;--UI-BG-4: #4c4c4c;--UI-BG-5: #fff;--UI-FG: #000;--UI-FG-0: rgba(0, 0, 0, .9);--UI-FG-HALF: rgba(0, 0, 0, .9);--UI-FG-1: rgba(0, 0, 0, .5);--UI-FG-2: rgba(0, 0, 0, .3);--UI-FG-3: rgba(0, 0, 0, .1)}body:after{position:fixed;content:"";left:-1000px;top:-1000px;animation:shadow-preload .1s;animation-delay:3s}@keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}to{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}.uni-async-error{position:absolute;left:0;right:0;top:0;bottom:0;color:#999;padding:100px 10px;text-align:center}.uni-async-loading{box-sizing:border-box;width:100%;padding:50px;text-align:center}.uni-async-loading .uni-loading{width:30px;height:30px}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1 @@
 | 
			
		|||
.uni-popup[data-v-f0b957f8]{position:fixed;z-index:99}.uni-popup.top[data-v-f0b957f8],.uni-popup.left[data-v-f0b957f8],.uni-popup.right[data-v-f0b957f8]{top:var(--window-top)}.uni-popup .uni-popup__wrapper[data-v-f0b957f8]{display:block;position:relative}.uni-popup .uni-popup__wrapper.left[data-v-f0b957f8],.uni-popup .uni-popup__wrapper.right[data-v-f0b957f8]{padding-top:var(--window-top);flex:1}.fixforpc-z-index[data-v-f0b957f8]{z-index:999}.fixforpc-top[data-v-f0b957f8]{top:0}.content[data-v-ebd11ddf]{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:url(./bg-3NzT_zCy.png) no-repeat;background-size:100% 100%;box-sizing:border-box;padding-bottom:.625rem}.content .tips-text[data-v-ebd11ddf]{color:#310000;font-size:1.25rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content .btn-area[data-v-ebd11ddf]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.content .btn-area uni-image[data-v-ebd11ddf]{width:9.375rem;height:3.125rem;border-radius:3.125rem}.content .tips-area[data-v-ebd11ddf]{width:21.875rem;margin-top:1.25rem}.content .tips-area .tips-img[data-v-ebd11ddf]{display:block;width:100%}.popup-content[data-v-ebd11ddf]{width:23.4375rem;height:26.5625rem;background:url(./popup_bg-g-F1YU-s.png) no-repeat;background-size:100% 25rem;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding-top:7.1875rem}.popup-content .title[data-v-ebd11ddf]{font-weight:bolder;margin-bottom:.625rem;color:#0a0200;font-size:1.0625rem}.popup-content .number[data-v-ebd11ddf]{color:#f71e00;font-size:2.8125rem;font-weight:bolder;margin-bottom:.46875rem}.popup-content .number>uni-text[data-v-ebd11ddf]{font-size:1.25rem}.popup-content .tips[data-v-ebd11ddf]{color:#43403f;font-size:.9375rem;margin-bottom:2.65625rem;opacity:.6;font-size:.875rem;font-weight:400}.popup-content .btn>uni-image[data-v-ebd11ddf]{width:9.375rem;height:2.8125rem}.popup-content .close[data-v-ebd11ddf]{margin-top:1.875rem}.popup-content .close>uni-image[data-v-ebd11ddf]{width:1.875rem;height:1.875rem}
 | 
			
		||||
| 
		 After Width: | Height: | Size: 79 KiB  | 
| 
		 After Width: | Height: | Size: 4.3 KiB  | 
| 
		 After Width: | Height: | Size: 61 KiB  | 
| 
						 | 
				
			
			@ -0,0 +1 @@
 | 
			
		|||
uni-image{width:320px;height:240px;display:inline-block;overflow:hidden;position:relative}uni-image[hidden]{display:none}uni-image>div{width:100%;height:100%;background-repeat:no-repeat}uni-image>img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:block;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}uni-image>.uni-image-will-change{will-change:transform}@keyframes once-show{0%{top:0}}uni-resize-sensor,uni-resize-sensor>div{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}uni-resize-sensor{display:block;z-index:-1;visibility:hidden;animation:once-show 1ms}uni-resize-sensor>div>div{position:absolute;left:0;top:0}uni-resize-sensor>div:first-child>div{width:100000px;height:100000px}uni-resize-sensor>div:last-child>div{width:200%;height:200%}uni-text[selectable]{cursor:auto;-webkit-user-select:text;user-select:text}uni-text{white-space:pre-line}uni-view{display:block}uni-view[hidden]{display:none}uni-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:block;box-sizing:border-box}.uni-modal{position:fixed;z-index:999;width:80%;max-width:300px;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;text-align:center;border-radius:3px;overflow:hidden}.uni-modal *{box-sizing:border-box}.uni-modal__hd{padding:1em 1.6em .3em}.uni-modal__title{font-weight:400;font-size:18px;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.uni-modal__bd{padding:1.3em 1.6em;min-height:40px;font-size:15px;line-height:1.4;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;color:#999;max-height:400px;overflow-x:hidden;overflow-y:auto}.uni-modal__textarea{resize:none;border:0;margin:0;width:90%;padding:10px;font-size:20px;outline:none;border:none;background-color:#eee;text-decoration:inherit}.uni-modal__ft{position:relative;line-height:48px;font-size:18px;display:flex}.uni-modal__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid #d5d5d6;color:#d5d5d6;transform-origin:0 0;transform:scaleY(.5)}.uni-modal__btn{display:block;flex:1;color:#3cc51f;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;cursor:pointer}.uni-modal__btn:active{background-color:#eee}.uni-modal__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1px solid #d5d5d6;color:#d5d5d6;transform-origin:0 0;transform:scaleX(.5)}.uni-modal__btn:first-child:after{display:none}.uni-modal__btn_default{color:#353535}.uni-modal__btn_primary{color:#007aff}uni-toast{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:block;box-sizing:border-box;pointer-events:none;font-size:16px}.uni-sample-toast{position:fixed;z-index:999;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;max-width:80%}.uni-simple-toast__text{display:inline-block;vertical-align:middle;color:#fff;background-color:rgba(17,17,17,.7);padding:10px 20px;border-radius:5px;font-size:13px;text-align:center;max-width:100%;word-break:break-all;white-space:normal}uni-toast .uni-mask{pointer-events:auto}.uni-toast{position:fixed;z-index:999;width:8em;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(17,17,17,.7);text-align:center;border-radius:5px;color:#fff}.uni-toast *{box-sizing:border-box}.uni-toast__icon{margin:20px 0 0;width:38px!important;height:38px!important;vertical-align:baseline!important}.uni-icon_toast{margin:15px 0 0}.uni-icon_toast.uni-icon-success-no-circle:before{color:#fff;font-size:55px}.uni-icon_toast.uni-loading{margin:20px 0 0;width:38px;height:38px;vertical-align:baseline}.uni-toast__content{margin:0 0 15px}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,23 @@
 | 
			
		|||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
  <head>
 | 
			
		||||
    <link rel="stylesheet" href="./assets/uni.6f8e8158.css">
 | 
			
		||||
 | 
			
		||||
    <meta charset="UTF-8" />
 | 
			
		||||
    <script>
 | 
			
		||||
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
 | 
			
		||||
        CSS.supports('top: constant(a)'))
 | 
			
		||||
      document.write(
 | 
			
		||||
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
 | 
			
		||||
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
 | 
			
		||||
    </script>
 | 
			
		||||
    <title>vue-h5</title>
 | 
			
		||||
    <!--preload-links-->
 | 
			
		||||
    <!--app-context-->
 | 
			
		||||
    <script type="module" crossorigin src="./assets/index-CMpkHqXW.js"></script>
 | 
			
		||||
    <link rel="stylesheet" crossorigin href="./assets/index-BgCuxJG8.css">
 | 
			
		||||
  </head>
 | 
			
		||||
  <body>
 | 
			
		||||
    <div id="app"><!--app-html--></div>
 | 
			
		||||
  </body>
 | 
			
		||||
</html>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 147 KiB  | 
| 
		 After Width: | Height: | Size: 661 B  | 
| 
		 After Width: | Height: | Size: 243 B  | 
| 
		 After Width: | Height: | Size: 34 KiB  | 
| 
		 After Width: | Height: | Size: 79 KiB  | 
| 
		 After Width: | Height: | Size: 4.3 KiB  | 
| 
		 After Width: | Height: | Size: 61 KiB  | 
| 
						 | 
				
			
			@ -0,0 +1,8 @@
 | 
			
		|||
{
 | 
			
		||||
  "hash": "01c15a5a",
 | 
			
		||||
  "configHash": "d144ff1f",
 | 
			
		||||
  "lockfileHash": "e3b0c442",
 | 
			
		||||
  "browserHash": "5acd962d",
 | 
			
		||||
  "optimized": {},
 | 
			
		||||
  "chunks": {}
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,3 @@
 | 
			
		|||
{
 | 
			
		||||
  "type": "module"
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,69 @@
 | 
			
		|||
const baseUrl = process.env.REQUEST_BASE_URL
 | 
			
		||||
 | 
			
		||||
function request(options) {
 | 
			
		||||
	uni.showLoading({
 | 
			
		||||
		title: "加载中",
 | 
			
		||||
		mask: true,
 | 
			
		||||
	});
 | 
			
		||||
	let defaultHeader = {
 | 
			
		||||
		
 | 
			
		||||
	}
 | 
			
		||||
	// // 如果使用params传参则,以&符拼接的格式传参
 | 
			
		||||
	if (options.params) {
 | 
			
		||||
		options.data = options.params
 | 
			
		||||
		// defaultHeader['Content-Type'] = 'application/json'
 | 
			
		||||
		defaultHeader['Content-Type'] = 'application/x-www-form-urlencoded'
 | 
			
		||||
	}
 | 
			
		||||
	const token = uni.getStorageSync('token');
 | 
			
		||||
	if (token) {
 | 
			
		||||
	  defaultHeader.Authorization = `Bearer ${token}`
 | 
			
		||||
	}
 | 
			
		||||
	return new Promise((resolve, reject) => {
 | 
			
		||||
		uni.request({
 | 
			
		||||
			url: baseUrl + options.url, // 接口地址:前缀+方法中传入的地址
 | 
			
		||||
			method: options.method || 'GET', // 请求方法:传入的方法或者默认是“GET”
 | 
			
		||||
			data: options.data || {}, // 传递参数:传入的参数或者默认传递空集合
 | 
			
		||||
			header: {
 | 
			
		||||
				...defaultHeader,
 | 
			
		||||
				...options.header
 | 
			
		||||
			},
 | 
			
		||||
			success: (res) => {
 | 
			
		||||
				if (res.statusCode && res.statusCode != 200) {
 | 
			
		||||
					uni.hideLoading().then(() => {
 | 
			
		||||
						uni.showToast({
 | 
			
		||||
							title: "api错误" + res.errMsg,
 | 
			
		||||
							icon: 'none'
 | 
			
		||||
						});
 | 
			
		||||
					})
 | 
			
		||||
					reject()
 | 
			
		||||
				} else {
 | 
			
		||||
					const resData = res.data
 | 
			
		||||
					if (resData.code == 200) {
 | 
			
		||||
						uni.hideLoading()
 | 
			
		||||
						resolve(resData.data)
 | 
			
		||||
					} else {
 | 
			
		||||
						uni.hideLoading().then(() => {
 | 
			
		||||
							uni.showToast({
 | 
			
		||||
								title: '请求失败了,稍后再试',
 | 
			
		||||
								icon: 'none'
 | 
			
		||||
							});
 | 
			
		||||
						})
 | 
			
		||||
						reject(res.msg)
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			},
 | 
			
		||||
			// 这里的接口请求,如果出现问题就输出接口请求失败
 | 
			
		||||
			fail: (err) => {
 | 
			
		||||
				uni.hideLoading().then(() => {
 | 
			
		||||
					uni.showToast({
 | 
			
		||||
						title: err,
 | 
			
		||||
						icon: 'none'
 | 
			
		||||
					});
 | 
			
		||||
				})
 | 
			
		||||
				reject(err)
 | 
			
		||||
			}
 | 
			
		||||
		})
 | 
			
		||||
	})
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default request
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,7 @@
 | 
			
		|||
//获取url后面拼接的参数
 | 
			
		||||
export const getQueryString = (name) => {
 | 
			
		||||
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 | 
			
		||||
	let r = window.location.search.substr(1).match(reg);
 | 
			
		||||
	if (r != null) return unescape(r[2]);
 | 
			
		||||
	return null;
 | 
			
		||||
}
 | 
			
		||||