186 lines
4.4 KiB
Vue
186 lines
4.4 KiB
Vue
<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>
|