82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
|
|
<view class="tips-wrapper">
|
|
<view class="tips-text call-phone">
|
|
{{ vdata.tips }}
|
|
<view class="phone-number">{{ vdata.phone }}</view>
|
|
</view>
|
|
<view class="single-text flex-center" hover-class="u-cell-hover" hover-stay-time="150" style="color: #2980fd" @tap="emits('callPhone')">{{ vdata.confirmText }}</view>
|
|
<view class="line"></view>
|
|
<view class="tips-text tips-cancel flex-center" hover-class="u-cell-hover" hover-stay-time="150" @tap="popup.close()"> 取消 </view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
|
|
const vdata = reactive({
|
|
phone: '',
|
|
tips: '',
|
|
confirmText: ''
|
|
})
|
|
const emits = defineEmits(['callPhone'])
|
|
|
|
const selected = ref(undefined)
|
|
const popup = ref(null)
|
|
// 打开弹窗 val 选中数据的key
|
|
const open = (val) => {
|
|
console.log(val)
|
|
Object.assign(vdata, val)
|
|
popup.value.open()
|
|
}
|
|
|
|
const close = () => popup.value.close()
|
|
defineExpose({ open, close })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tips-wrapper {
|
|
// overflow: hidden;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 60rpx;
|
|
background-color: #fff;
|
|
.tips-text {
|
|
text-align: center;
|
|
min-height: 90rpx;
|
|
font-size: 30rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
|
|
}
|
|
.single-text {
|
|
height: 120rpx;
|
|
}
|
|
.line {
|
|
height: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
}
|
|
.tips-cancel {
|
|
height: 110rpx;
|
|
color: $J-color-t80;
|
|
font-size: 33rpx;
|
|
border: none;
|
|
}
|
|
.u-cell-hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
}
|
|
.call-phone {
|
|
padding: 0 60rpx;
|
|
padding-top: 40rpx;
|
|
font-size: 30rpx;
|
|
color: #808080;
|
|
.phone-number {
|
|
margin-top: 25rpx;
|
|
margin-bottom: 40rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #000;
|
|
}
|
|
}
|
|
</style>
|