164 lines
3.4 KiB
Vue
164 lines
3.4 KiB
Vue
<template>
|
||
<view class="page-gray u-font-28">
|
||
<view class="search bg-fff u-flex u-col-center ">
|
||
<view class="u-flex-1">
|
||
<uni-search-bar bgColor="#F9F9F9" cancelButton="none" placeholder="搜索" @confirm="search"
|
||
v-model="query.name">
|
||
</uni-search-bar>
|
||
</view>
|
||
<view class="u-flex">
|
||
<image src="/pagesCreateOrder/static/images/icon-saoma.svg" class="icon-saoma" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="list ">
|
||
<view class="bg-fff u-row-between u-flex no-choose border-r-12" @tap="chooseUser">
|
||
<view>不选择用户</view>
|
||
<my-radio v-model="nouser" :size="18" border-color="#d1d1d1" @change="chooseUser"></my-radio>
|
||
</view>
|
||
<view class="u-m-t-32 bg-fff box bg-fff">
|
||
<view class="u-flex item u-row-between" v-for="(item,index) in list" :key="index"
|
||
@tap="chooseUser(index,item)">
|
||
<view class="u-flex">
|
||
<view class="headimg u-flex u-row-center u-col-center">
|
||
<image v-if="item.headImg" :src="item.headImg" class="img" mode=""></image>
|
||
</view>
|
||
<view class="u-m-l-32">
|
||
<view>{{item.nickName}}</view>
|
||
<view class=" u-font-24 u-m-t-12 u-flex">
|
||
<text class="color-999" v-if="!item.isVip">非会员</text>
|
||
<text class="color-main" v-else>会员</text>
|
||
<view class="u-m-l-30 u-flex">
|
||
<text class="">余额：</text>
|
||
<text class="color-main">{{item.amount}}</text>
|
||
</view>
|
||
<view class="u-m-l-30 u-flex">
|
||
<text class="">积分：</text>
|
||
<text class="color-main">{{item.totalScore}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<my-radio @change="chooseUser(index,item)" v-model="item.checked" :size="18"
|
||
border-color="#d1d1d1"></my-radio>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as Api from '@/http/yskApi/shop-user.js'
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app'
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
let nouser = ref(false)
|
||
|
||
function emitChooser(data) {
|
||
uni.$emit('choose-user', data)
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 100)
|
||
}
|
||
|
||
function chooseUser(index, item) {
|
||
if (index === undefined || item === undefined) {
|
||
nouser.value = true
|
||
return emitChooser({
|
||
id: '',
|
||
headImg: '',
|
||
telephone: '',
|
||
amount: '0.00',
|
||
totalScore: '0.00'
|
||
})
|
||
} else {
|
||
list[index].checked = true
|
||
emitChooser(item)
|
||
}
|
||
}
|
||
|
||
const query = reactive({
|
||
page: 0,
|
||
name: '',
|
||
size: 300
|
||
})
|
||
const list = reactive([])
|
||
async function getUser() {
|
||
const {
|
||
content
|
||
} = await Api.queryAllShopUser(query)
|
||
for (let i in content) {
|
||
list.push({
|
||
...content[i],
|
||
checked: false
|
||
})
|
||
}
|
||
console.log(list);
|
||
}
|
||
|
||
function search() {
|
||
query.page = 0
|
||
list.length = 0
|
||
getUser()
|
||
}
|
||
onLoad(() => {
|
||
getUser()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.scale7 {
|
||
transform: scale(0.7);
|
||
}
|
||
|
||
.search {
|
||
padding-right: 28rpx;
|
||
|
||
.icon-saoma {
|
||
margin-left: 20rpx;
|
||
width: 34rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 32rpx 24rpx;
|
||
|
||
.no-choose {
|
||
padding: 36rpx 30rpx 36rpx 24rpx;
|
||
}
|
||
|
||
.box {
|
||
padding: 32rpx 30rpx 78rpx 24rpx;
|
||
|
||
.item {
|
||
padding: 24rpx 0;
|
||
|
||
.headimg {
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-size: 0;
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
background-color: #eee;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item:not(:first-child) {
|
||
border-top: 1px solid #E5E5E5;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style> |