new-cashier/jeepay-ui-uapp-merchant/pagesCreateOrder/choose-user/choose-user.vue

144 lines
3.3 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" :focus="true"
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()
}
else{
list[index].checked=true
emitChooser(item)
}
}
const query=reactive({
page:0,
name:'',
size:10
})
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>