101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
<template>
|
|
<u-popup v-model="localShow" :mode="mode" :border-radius="24">
|
|
<view class="content">
|
|
<view style="height: 1rpx;">
|
|
<image src="../../../static/img/fz_icon_gb/fz_icon_gb.png" class="close"></image>
|
|
</view>
|
|
<view class="slectAddress">
|
|
<view v-for="(item, index) in listJurisdiction" :key="index">
|
|
<list-item>
|
|
<template v-slot:left>
|
|
<view>{{item.title}}</view>
|
|
</template>
|
|
<template v-slot:right>
|
|
<image :src="item.iconCheck ? checkBoxImg[0] : checkBoxImg[1]" style="width: 50rpx; height: 50rpx;"></image>
|
|
</template>
|
|
</list-item>
|
|
</view>
|
|
</view>
|
|
<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">确认</u-button>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import listItem from '../../listitem/listItem.vue'
|
|
export default {
|
|
components: {
|
|
listItem
|
|
},
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'bottom'
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
checkBoxImg: ['../../static/img/fz_icon_xz/fz_icon_xz.png', '../../static/img/fz_icon_gb/fz_icon_gb.png'],
|
|
listJurisdiction: [
|
|
{
|
|
title: 'qqkld.net',
|
|
iconCheck: true,
|
|
},
|
|
{
|
|
title: '在线支付接口',
|
|
iconCheck: false,
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
localShow: {
|
|
get () {
|
|
return this.show
|
|
},
|
|
set (val) {
|
|
this.$emit('update:show', val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
confim () {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.close {
|
|
margin: 24rpx 24rpx 0 0;
|
|
float: right;
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
}
|
|
.slectAddress {
|
|
margin: 125rpx 50rpx 38rpx 50rpx;
|
|
}
|
|
/deep/ .u-drawer__scroll-view {
|
|
background-color: #2B3062;
|
|
color: #FFFFFF;
|
|
font-size: 32rpx;
|
|
}
|
|
.confim {
|
|
margin: 0 45rpx 29rpx 45rpx;
|
|
height: 90rpx;
|
|
|
|
background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
|
|
border-radius: 45rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
</style>
|