mobile-admin/store/user/edit.vue

<template>
	<view class="content bg-gray-50">
		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>

		<view class="grid">
			<wd-card class="rounded-md overflow-hidden" type="rectangle">
				<template #title>
					<view class="title">
						<view>ID：{{ userInfo.id }}</view>
						<view @click="utils.copy(userInfo.user_merge.mobile)" class="title-tip" v-if="userInfo.user_merge">
							{{ userInfo.user_merge.mobile }}

							<wd-icon name="file-copy" size="14px"></wd-icon>
						</view>
					</view>
				</template>
				<view style="height: 40px;" class="userInfoBox">
					<image mode="aspectFill" :src="userInfo.avatar_pic" :alt="userInfo.name"
						style="width: 60px;height: 60px;border-radius: 4px; margin-right: 12px;" />
					<view>
						<view style="color: rgba(0,0,0,0.85); font-size: 16px;">
							{{ userInfo.nickname }}

							<wd-tag v-if="userInfo.user_merge" class="mx-1" size="small" type="success">
								v {{ userInfo.user_merge.member_level }}
							</wd-tag>

							<wd-button type="warning" @click="showLv = true" size="small" style="margin-left: 10px;">修改等级</wd-button>

						</view>
						<view style="color: rgba(0,0,0,0.25); font-size: 12px;">

							<wd-tag class="mx-1" size="small" :type="originType[userInfo.origin]">
								{{ userInfo.origin_text }}
							</wd-tag>

						</view>
					</view>
				</view>

				<template #footer>

					<view v-if="userInfo.user_merge" class="bg-gray-50 p-2 mb-2.5 flex justify-between" style="font-size: 22rpx;">
						<view>余额：{{ userInfo.user_merge.balance }} </view>
						<view>积分：{{ userInfo.user_merge.integral }} </view>
						<view>佣金：{{ userInfo.user_merge.money }} </view>
					</view>

					<view v-if="userInfo.user_merge" class="flex justify-between items-center">
						<view></view>

						<view>
							<wd-button @click="showActions({ typeAc: 1 })" size="small" style="margin-right: 8px;">编辑余额</wd-button>
							<wd-button @click="showActions({ typeAc: 2 })" size="small" style="margin-right: 0px;">编辑积分</wd-button>
						</view>

					</view>
				</template>
			</wd-card>
		</view>

		<view v-if="!loading">
			<wd-tabs v-model="tab">
				<block v-for="item in 1" :key="item + '余额记录'">
					<wd-tab title="余额记录">
						<yList height="64vh" v-if="userInfo.id" ref="yListRef" :apiObj="user.getLog"
							:params="{ model: 'balance', id: userInfo.id }">
							<template #default="{ list }">
								<div class="pt-3 bg-gray-50">
									<view v-for="item of list" class="bg-gray-50">
										<wd-card :title='(item.type == 1 ? "余额增加 + " : "余额减少 - ") + item.change'>
											<view class="bg-gray-50 p-2 mb-2.5 flex flex-col justify-between" style="font-size: 22rpx;">
												<view class="mb-1">变动时间：{{ item.create_time }} </view>
												<view class="mb-1">变动前：{{ item.before }} </view>
												<view class="mb-1">变动后：<span>{{ item.after }}</span> </view>
												<view class="mb-1">描述：{{ item.desc }} </view>
											</view>

											<template #footer>
												<view>
													ID：{{ item.id }}
												</view>
											</template>

										</wd-card>
									</view>
								</div>
							</template>
						</yList>
					</wd-tab>
				</block>

				<block v-for="item in 1" :key="item + '积分记录'">
					<wd-tab title="积分记录">
						<yList height="64vh" v-if="userInfo.id" ref="yListRef" :apiObj="user.getLog"
							:params="{ model: 'integral', id: userInfo.id }">
							<template #default="{ list }">
								<div class="pt-3 bg-gray-50">
									<view v-for="item of list" class="bg-gray-50">
										<wd-card :title='(item.type == 1 ? "积分增加 + " : "积分减少 - ") + item.change'>
											<view class="bg-gray-50 p-2 mb-2.5 flex flex-col justify-between" style="font-size: 22rpx;">
												<view class="mb-1">变动时间：{{ item.create_time }} </view>
												<view class="mb-1">变动前：{{ item.before }} </view>
												<view class="mb-1">变动后：<span>{{ item.after }}</span> </view>
												<view class="mb-1">描述：{{ item.desc }} </view>
											</view>

											<template #footer>
												<view>
													ID：{{ item.id }}
												</view>
											</template>

										</wd-card>
									</view>
								</div>
							</template>
						</yList>
					</wd-tab>
				</block>

			</wd-tabs>
		</view>

		<wd-toast />
		<wd-action-sheet v-model="showAc" :actions="actions" @select="select" />

		<wd-action-sheet v-model="showLv" :actions="actionsLv" @select="changeLevel" />

		<wd-message-box></wd-message-box>

	</view>
</template>

<script setup>
import { ref } from 'vue';
import utils from '@/utils/utils.js';
import user from '@/api/store/user.js';
import userMembers from '@/api/store/userMembers.js';
import yList from "/components/yList/index.vue";
import kevyloading from "@/components/kevy-loading/kevy-loading";
import { useMessage } from '@/uni_modules/wot-design-uni'
import { useApi } from "@/hooks/useApi.js"
const message = useMessage()

import {
	onShow, onLoad
} from "@dcloudio/uni-app";

const tab = ref(0)

const model = ref({})
const baseForm = ref({})

const showAc = ref(false)
const typeAc = ref(1)

const userInfo = ref({});

const actions = [
	{
		name: '增加'
	},
	{
		name: '减少'
	}
]

function showActions(e) {
	showAc.value = true
	typeAc.value = e.typeAc
}

function close() {
	showAc.value = false
}

function select({ item, index }) {

	let textAc = ''

	if (typeAc.value == 1) {

		if (item.name == "增加") {
			textAc = "增加余额"
		} else {
			textAc = "减少余额"
		}

	}

	if (typeAc.value == 2) {

		if (item.name == "增加") {
			textAc = "增加积分"
		} else {
			textAc = "减少积分"
		}

	}

	message
		.prompt({
			title: textAc,
		})
		.then((resp) => {
			let model = ''
			if (typeAc.value == 1) {
				model = 'balance'
			}

			if (typeAc.value == 2) {
				model = 'integral'
			}

			let type = ''
			if (item.name == "增加") {
				type = 1
			} else {
				type = 2
			}

			loading.value = true
			user.changeInformation({
				id: userInfo.value.id,
				value: resp.value,
				type, model
			}).then(res => {
				loading.value = false
			})


		})
		.catch((error) => {

		})

}

const originType = ref({
	100: 'success',
	101: 'success',
	200: 'info',
	201: 'danger',
	300: 'warning',
})


/** 
 * @type {Ref<boolean>} 
 * 控制页面加载状态的 Ref
 */
const loading = ref(false);


// 初始化调用获取一行数据
onShow(() => {
	// getuserInfoList();
})

onLoad(async (e) => {
	loading.value = true
	const res = await user.userItem({
		id: e.id
	});

	userInfo.value = res.data
	loading.value = false
})

const showLv = ref(false);
const actionsLv = ref([])

const changeLevel = e => {
	console.log(e);
	loading.value = true
	user.UpdateLevel({
		user_merge_id: userInfo.value.user_merge.id,
		level: e.item.level,
	}).then(async (res) => {
		loading.value = true
		const data = await user.userItem({ id: userInfo.value.id });
		userInfo.value = data.data
		loading.value = false

	})
}

/**
 * 获取数据的函数
 */
const getmemberList = async () => {
	const { fetchData } = await useApi(userMembers.LevelShow, { loading })

	fetchData().then(res => {
		actionsLv.value = res.data.map(item => {
			return {
				...item,
				subname: `等级 ${item.level}`
			}
		});
		actionsLv.value.ok = true;
	})
};

getmemberList()

</script>

<style lang="scss" scoped>
.userInfoBox,
.title {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.userInfoBox {
	justify-content: flex-start;
}

.title {
	justify-content: space-between;
}

.title-tip {
	color: rgba(0, 0, 0, 0.25);
	font-size: 12px;
}
</style>