弹窗

src/components/popView/index.vue

+<template>
+
+	<u-popup border-radius="12" v-model="visible" safe-area-inset-bottom mode="center" width="690rpx"
+		:mask-close-able="false">
+		<view class="order-pop-view">
+			<view class="order-pop-title">
+				<text>{{title}}</text>
+			</view>
+			<view class="line-view" />
+			<view class="order-pop-text">
+				<text>{{message}}</text>
+			</view>
+			<view class="order-pop-btn-view">
+				<u-button :custom-style="customStyleCancel" hover-class="none" shape="circle" type="primary"
+					@click="changeVisibleValue(false)">
+					取消
+				</u-button>
+				<u-button :custom-style="customStyleSave" shape="circle" type="primary" @click="handleClickSure">
+					确定
+				</u-button>
+			</view>
+		</view>
+	</u-popup>
+
+</template>
+
+<script>
+	export default {
+		props: {
+			visible: Boolean,
+			title: String,
+			message: String,
+		},
+		data() {
+			return {}
+		},
+		computed: {
+			customStyleCancel() {
+				return {
+					'background-color': '#D1D4D4',
+					'width': '300rpx',
+					'height': '104rpx',
+					'background-color': 'transparent',
+					'border': '1px solid #2272FF',
+					'color': '#2272FF',
+					'font-weight': 'bold',
+					'font-size': '32rpx',
+				}
+			},
+			customStyleSave() {
+				return {
+					'background-color': '#2272FF',
+					'width': '300rpx',
+					'height': '104rpx',
+					'font-weight': 'bold',
+					'font-size': '32rpx',
+					'margin-left': '30rpx'
+				}
+			}
+		},
+		methods: {
+			changeVisibleValue(val) {
+				this.$emit('update:visible', val)
+			},
+			handleClickSure() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order-pop-view {
+		padding: 30rpx;
+
+		.order-pop-title {
+			font-size: 40rpx;
+			margin-top: 40rpx;
+			margin-bottom: 40rpx;
+			text-align: center;
+			color: #333333;
+		}
+
+		.order-pop-text {
+			color: #999999;
+			text-align: center;
+			margin-top: 40rpx;
+			font-size: 28rpx;
+			margin-bottom: 260rpx;
+		}
+
+		.line-view {
+			background-color: #F4F5F7;
+			height: 2rpx;
+			width: 100%;
+		}
+
+		.order-pop-btn-view {
+			display: flex;
+			position: absolute;
+			bottom: 50rpx;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+</style>

src/pages/order/index.vue

@@ -31,12 +31,13 @@
 			</view>
 
 		<!-- </view> -->
+		<PopView title="aaaa" message="bbbb" :visible="visibale"/>
 	</TabBarPage>
 </template>
 
 <script>
 	import TabBarPage from "@/components/tabBarList/index.vue"
-	import OrderCell from "@/components/order/index.vue";
+	import OrderCell from "@/components/order/index.vue"
 	export default {
 		components: {
 			TabBarPage,
@@ -44,6 +45,7 @@
 		},
 		data() {
 			return {
+				visibale: false,
 				showSview: true,
 				curNow: 0,
 				pageNumber: 0,