|
@@ -1,155 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <div class="sel-search-module">
|
|
|
|
|
- <div class="input-wrap">
|
|
|
|
|
- <app-search-module placeholder="请输入名称" :isBtn="true" @search="searchFn" />
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 列表 -->
|
|
|
|
|
- <div class="list-wrap">
|
|
|
|
|
- <!-- 多选 -->
|
|
|
|
|
- <block v-if="multi">
|
|
|
|
|
- <checkbox-group @change="checkboxChange">
|
|
|
|
|
- <div class="list" v-for="(item, index) in list" :key="index">
|
|
|
|
|
- <div class="checkbox-wrap">
|
|
|
|
|
- <checkbox class="ljd-checkbox" :value="item.value" :checked="item.checked" />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </checkbox-group>
|
|
|
|
|
- </block>
|
|
|
|
|
- <!-- 单选 -->
|
|
|
|
|
- <block v-else>
|
|
|
|
|
- <radio-group @change="radioChange">
|
|
|
|
|
- <label class="list" v-for="(item, index) in list" :key="index">
|
|
|
|
|
- <div class="checkbox-wrap">
|
|
|
|
|
- <radio :value="index + ''" :checked="item.checked" />
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 图片块 -->
|
|
|
|
|
- <slot name="img" :item="item">
|
|
|
|
|
- <block v-if="isMember">
|
|
|
|
|
- <div class="list-img">
|
|
|
|
|
- <app-avatar-module :src="item.avatarUrl" :width="120" />
|
|
|
|
|
- </div>
|
|
|
|
|
- </block>
|
|
|
|
|
- </slot>
|
|
|
|
|
- <!-- 列表详情块 -->
|
|
|
|
|
- <slot name="detail" :item="item">
|
|
|
|
|
- <block v-if="isMember">
|
|
|
|
|
- <div class="list-right">
|
|
|
|
|
- <div class="list-name">{{ item.userName }}</div>
|
|
|
|
|
- <div>手机号: {{ item.mobile }}</div>
|
|
|
|
|
- <div>会员等级: {{ item.userAsset.memberLevel }}</div>
|
|
|
|
|
- <div>最后访问: {{ item.visitTimeFormat }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </block>
|
|
|
|
|
- </slot>
|
|
|
|
|
- </label>
|
|
|
|
|
- </radio-group>
|
|
|
|
|
- </block>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- 按钮 -->
|
|
|
|
|
- <div class="app-footer">
|
|
|
|
|
- <div class="admin-button-com middle blue" @click="confirmFn">确认</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
-import AppSearchModule from '@/components/module/app-search'
|
|
|
|
|
-import AppAvatarModule from '@/components/module/app-avatar'
|
|
|
|
|
-export default {
|
|
|
|
|
- name: 'sel-search-module',
|
|
|
|
|
- components: {
|
|
|
|
|
- AppSearchModule,
|
|
|
|
|
- AppAvatarModule
|
|
|
|
|
- },
|
|
|
|
|
- props: {
|
|
|
|
|
- list: {
|
|
|
|
|
- type: Array,
|
|
|
|
|
- default: () => []
|
|
|
|
|
- },
|
|
|
|
|
- multi: {
|
|
|
|
|
- type: Boolean,
|
|
|
|
|
- default: false
|
|
|
|
|
- },
|
|
|
|
|
- // 是否是选择用户
|
|
|
|
|
- isMember: {
|
|
|
|
|
- type: Boolean,
|
|
|
|
|
- default: false
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- radioData: null,
|
|
|
|
|
- checkboxArr: null
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- // 单选
|
|
|
|
|
- radioChange(e) {
|
|
|
|
|
- this.radioData = this.list[e.detail.value]
|
|
|
|
|
- // this.selData = []
|
|
|
|
|
- },
|
|
|
|
|
- // 多选
|
|
|
|
|
- checkboxChange(e) {
|
|
|
|
|
- console.log(e)
|
|
|
|
|
- },
|
|
|
|
|
- // 搜索
|
|
|
|
|
- searchFn(e) {
|
|
|
|
|
- this.$emit('search', e)
|
|
|
|
|
- },
|
|
|
|
|
- // 确认
|
|
|
|
|
- confirmFn() {
|
|
|
|
|
- // if (this.multi) {
|
|
|
|
|
- // this.$emit('change', this.checkboxArr)
|
|
|
|
|
- // } else {
|
|
|
|
|
- this.$emit('change', this.radioData)
|
|
|
|
|
- // }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
- .sel-search-module {
|
|
|
|
|
- padding-top: 130upx;
|
|
|
|
|
- padding-bottom: 120upx;
|
|
|
|
|
- }
|
|
|
|
|
- .input-wrap {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- width: calc(100% - 50upx);
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- padding: 22upx 20upx 22upx 30upx;
|
|
|
|
|
- }
|
|
|
|
|
- // 列表
|
|
|
|
|
- .list-wrap {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- .list {
|
|
|
|
|
- width: calc(100% - 60upx);
|
|
|
|
|
- margin: 0 30upx;
|
|
|
|
|
- padding: 10upx 0 20upx;
|
|
|
|
|
- @include disFlex(center, flex-start);
|
|
|
|
|
- border-bottom: 2upx solid $borderColor;
|
|
|
|
|
- .list-img {
|
|
|
|
|
- margin: 0 20upx;
|
|
|
|
|
- }
|
|
|
|
|
- .list-right {
|
|
|
|
|
- color: $fontColor3;
|
|
|
|
|
- .list-name {
|
|
|
|
|
- color: #333;
|
|
|
|
|
- font-size: 30upx;
|
|
|
|
|
- margin-bottom: 10upx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- // 按钮
|
|
|
|
|
- .app-footer {
|
|
|
|
|
- justify-content: flex-end;
|
|
|
|
|
- .admin-button-com {
|
|
|
|
|
- width: 160upx;
|
|
|
|
|
- margin-right: 30upx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|