cashier_admin_app/pageUser/index/components/user.vue

<template>
	<view class=" goods">
		<view class="u-flex">
			<view class="u-flex u-col-top">
				<image v-if="data.headImg" :src="data.headImg" class="img"></image>
				<view class="img" v-else></view>
			</view>
			<view class="u-p-l-30 u-flex-1">
				<view class="u-flex">
					<view class="color-000 font-bold">{{data.nickName}}</view>
					<view class="color-999 u-m-l-40" @click="remark">备注</view>
				</view>
				<view class="u-m-t-6 u-flex u-row-between">
					<view class="vip isvip" v-if="data.isVip">会员</view>
					<view class=" vip noVip" v-else>非会员</view>
					<view class="color-main" @click="bindMoblie">绑定号码</view>
				</view>
				<view class="u-m-t-6 color-666 ">
					{{data.telephone||''}}
				</view>
			</view>
			
		</view>
		
		<view class="info u-m-t-20 u-flex">
			<view class="u-flex-1  u-text-center" @tap="toYue">
				<view class="font-bold color-000 pr-16" >{{data.amount}}</view>
				<view class="u-flex u-row-center" >
					<view class="color-999">余额</view>
					<view class="u-flex">
						<uni-icons type="right" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="u-flex-1  u-text-center" @tap="toUser">
				<view class="font-bold color-000 pr-16">{{data.totalScore}}</view>
				<view class="u-flex u-row-center">
					<view class="color-999">积分</view>
					<view class="u-flex">
						<uni-icons type="right" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="u-flex-1  u-text-center">
				<view class="font-bold color-000 pr-16">0</view>
				<view class="u-flex u-row-center">
					<view class="color-999">优惠券</view>
					<view class="u-flex">
						<uni-icons type="right" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="u-flex-1  u-text-center">
				<view class="font-bold color-000 ">0.00</view>
				<view class="u-flex u-row-center">
					<view class="color-999">已消费</view>
				</view>
			</view>
		</view>

		
		<view class="u-m-t-24 u-flex u-row-between">
			<view></view>
			<view class="u-flex">
				<view class="btn-default btn" @click="toOrder">查看订单</view>
				<view class="btn-primary btn u-m-l-38" @click="moreOperate">更多操作</view>
			</view>
		</view>
		
		
		

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import go from '@/commons/utils/go.js';
	import {ColorMain} from '@/commons/color.js'
	const emits=defineEmits(['remark','bindMoblie','moreOperate'])
	const props = defineProps({
		index:{
			type:Number
		},
		data:{
			type:Object,
			default:()=>{
				return{}
			}
		},
		showChecked:{
			type:Boolean,
			default:false
		},
		showDetail:{
			type:Boolean,
			default:false
		}
	})
	
	function toUser(){
		go.to('PAGES_USER_INFO',{id:''})
	}
	function toYue(){
		go.to('PAGES_RECHARGE_INDEX',{id:''})
	}
	function toOrder(){
		go.to('PAGES_ORDER_INDEX',{
			userId:props.data.id||'',
			type:'user'
		})
	}
	
	function remark(){
		console.log(props.index);
		emits('remark',props.index)
	}
	function bindMoblie(){
		emits('bindMoblie',props.index)
	}
	function moreOperate(){
		emits('moreOperate',props.index)
	}
	//携带参数type edit跳转到商品添加页面，编辑与添加同一页面，根据type值来判断
	function toEdit(){
		go.to('PAGES_PRODUCT_ADD',{type:'edit'})
	}
</script>

<style lang="scss" scoped>
	$imgSize: 126rpx;
	$price-color: #F02C45;
	.isvip{
		color: $my-main-color;
		background-color: rgb(234, 244, 255);
	}
	.pr-16{
		padding-right: 16px;
	}
	.info{
		background-color: rgb(250, 250, 250);
		padding: 20rpx;
	}
	.vip{
		padding:2rpx 6rpx;
		border-radius: 10rpx;
	}
	.noVip{
		background-color: #F9F9F9;
		color: #999;
	}
	.btn{
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
		border: 2rpx solid transparent;
	}
	.btn-primary{
		border-color:  $my-main-color;;
		color: $my-main-color;
	}
	.btn-default{
		border-color:  #F4F4F4;
		color: #666;
	}
	.price {
		color: $price-color;
	}

	.h-100 {
		height: $imgSize;
	}

	.img {
		width: $imgSize;
		height: $imgSize;
		background-color: #eee;
		border-radius: 16rpx;
	}

	.icon-arrow-right {
		width: 32rpx;
		height: 32rpx;
	}

	.stock {
		padding-right: 46rpx;
		position: relative;
	}

	.stock::after {
		content: '';
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 16rpx;
		border: 2rpx solid #333333;
	}

	.goods {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background-color: #fff;
		padding: 24rpx 28rpx 16rpx 28rpx;
		font-size: 28rpx;
		.skus{
			background: #F9F9F9;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			padding: 28rpx 42rpx;
			.sku{
				color: #000;
				font-weight: 700;
				padding: 6rpx 40rpx;
			}
			.skds{
				gap: 10rpx 50rpx;
			}
			.skd{
				padding: 14rpx 40rpx;
				background: #F0F2F5;
				border-radius: 4rpx;
				position: relative;
				color: #666;
				overflow: hidden;
				.tag{
					position: absolute;
					right: 0;
					top: 0;
					font-size: 12rpx;
					right: 0;
					padding: 2rpx 4rpx;
					border-radius: 0rpx 4rpx 4rpx 4rpx;
				}
				.tag-primary{
					background-color: $my-main-color;
					color: #fff;
				}
			}
			
			
		}
	}
</style>