first

components/JAppPopup/JAppPopup.vue

@@ -0,0 +1,185 @@
+<template>
+  <!-- 修改应用弹窗 -->
+  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false" @maskClick="emits('cancel')">
+    <view class="card-wrapper">
+      <view class="input-search">
+        <uni-easyinput
+          v-model="vadta.searchInfo"
+          prefixIcon="search"
+          :inputBorder="false"
+          :clearable="false"
+          :styles="styles"
+          type="text"
+          placeholder="搜索门店名称、ID"
+          placeholderStyle=" color: rgba(0,0,0,0.85);font-size: 30rpx;"
+        />
+        <view class="search-button">搜索</view>
+      </view>
+      <!-- 循环开始部分 -->
+      <view class="store">
+        <view class="left">
+          <view class="store-dot"></view>
+          <view class="app-info">
+            <view class="app-name">应用名称</view>
+            <view class="app-code">62a55637e4b07ea5b8717ca3</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 循环结束部分 -->
+      <view class="footer-wrapper">
+        <view class="footer-main">
+          <view class="tips" v-if="tips">{{ tips }}</view>
+          <view class="footer-button">
+            <view class="flex-center" hover-class="touch-button" @tap="close">取消</view>
+            <view class="confirm flex-center" hover-class="touch-button">确认</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+const emits = defineEmits(['cancel', 'confirm'])
+const props = defineProps({
+  isAll: { type: Boolean, default: false }, //是否展示全部门店 默认false
+  tips: { type: String }, //提示信息 传入则展示
+})
+const styles = reactive({
+  backgroundColor: '#f7f7f7',
+  height: '90rpx',
+  borderRadius: '10rpx',
+  color: '#000',
+})
+const vadta = reactive({
+  searchInfo: '',
+})
+const popup = ref(null)
+const open = (val) => {
+  popup.value.open()
+}
+const close = () => {
+  emits('cancel')
+  popup.value.close()
+}
+const confirm = () => {}
+onMounted(() => {
+  open()
+})
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+.card-wrapper {
+  border-radius: 32rpx 32rpx 0 0;
+  background-color: #fff;
+  overflow: hidden;
+  min-height: 70vh;
+  .input-search {
+    display: flex;
+    align-items: center;
+    padding-left: 10rpx;
+    margin: 30rpx;
+    border-radius: 10rpx;
+    background-color: #f7f7f7;
+    .search-button {
+      padding: 24rpx 30rpx;
+      font-size: 32rpx;
+      font-weight: 500;
+      color: #2980fd;
+    }
+  }
+  .store {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 40rpx;
+    height: 170rpx;
+    font-size: 30rpx;
+    .left {
+      display: flex;
+      align-items: center;
+      .store-dot {
+        align-self: start;
+        position: relative;
+        top: 2rpx;
+        margin-right: 20rpx;
+        width: 36rpx;
+        height: 36rpx;
+        background-color: #d7d8d9;
+        border-radius: 50%;
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 50%;
+          height: 50%;
+          border-radius: 50%;
+          background-color: #fff;
+        }
+      }
+      .active-dot {
+        background-color: #2980fd;
+      }
+    }
+    .app-info {
+      .app-code {
+        margin-top: 15rpx;
+        font-size: 26rpx;
+        color: #999;
+      }
+    }
+  }
+  .all-store::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 40rpx;
+    right: 40rpx;
+    height: 1rpx;
+    background-color: #ededed;
+  }
+  .footer-wrapper {
+    height: 186rpx;
+    .footer-main {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: env(safe-area-inset-bottom);
+      border-top: 1rpx solid #ededed;
+      .tips {
+        margin: 20rpx;
+        text-align: center;
+        font-size: 27rpx;
+        color: #a6a6a6;
+      }
+      .footer-button {
+        padding: 0 30rpx;
+        margin-top: 30rpx;
+        padding-bottom: 30rpx;
+        display: flex;
+        justify-content: space-between;
+        view {
+          width: 330rpx;
+          height: 110rpx;
+          font-size: 33rpx;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.5);
+          border-radius: 20rpx;
+          background-color: #f7f7f7;
+        }
+        .confirm {
+          color: #fff;
+          background: jeepay-bg-primary;
+        }
+      }
+    }
+  }
+}
+</style>