first

pages/userSetUp/components/CallPhone.vue

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