185 lines
7.3 KiB
Vue
185 lines
7.3 KiB
Vue
<route lang="jsonc" type="page">{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom",
|
||
"navigationBarBackgroundColor": "#fff"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="pb-40rpx">
|
||
<view>
|
||
<navbar title="用户详情" custom-class="!bg-[#F6F7F9]"></navbar>
|
||
</view>
|
||
|
||
<view class="mt-28rpx mx-30rpx">
|
||
<view class="bg-white rounded-16rpx px-28rpx pt-40rpx pb-26rpx">
|
||
<view>
|
||
<view class="flex items-center">
|
||
<wd-img width="140rpx" height='140rpx' :src="user.avatar" :round="true"></wd-img>
|
||
<view class="ml-20rpx">
|
||
<view class="flex items-center">
|
||
<view class="font-bold text-28rpx text-[#303133] leading-40rpx mr-12rpx">{{ user.nickname }}</view>
|
||
<view v-if="user.member == 1">
|
||
<wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_crown.png`"></wd-img>
|
||
</view>
|
||
</view>
|
||
<view class="mt-18rpx font-400 text-28rpx text-[#303133] leading-40rpx">手机号：{{ user.mobile }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- TODO VIP显示这块内容 -->
|
||
<view class="relative mt-22rpx" v-if="user.member == 1">
|
||
<wd-img width="650rpx" height='70rpx' :src="`${OSS}images/store/user/image1.png`"></wd-img>
|
||
<view class="absolute top-18rpx left-28rpx flex items-center">
|
||
<wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_vip.png`"></wd-img>
|
||
<view class="font-400 text-24rpx text-[#EECC99] leading-34rpx ml-18rpx">{{ user.expiration_time }}到期</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex items-center justify-around px-90rpx mt-46rpx">
|
||
<view class="flex flex-col items-center justify-start">
|
||
<view class="font-400 text-24rpx text-[#606266] text-34rpx">平台余额</view>
|
||
<view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-34rpx">{{ user.user_money || 0 }}</view>
|
||
</view>
|
||
<view class="h-98rpx">
|
||
<wd-divider vertical color="#EAEEF2" custom-class="!h-98rpx"></wd-divider>
|
||
</view>
|
||
<view class="flex flex-col items-center justify-start">
|
||
<view class="font-400 text-24rpx text-[#606266] text-34rpx">门店余额</view>
|
||
<view class="font-bold text-32rpx text-[#303133] leading-34rpx mt-34rpx">{{ user.user_store_money || 0 }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-50rpx relative">
|
||
<wd-img width="650rpx" height='216rpx' :src="`${OSS}images/store/user/image2.png`"></wd-img>
|
||
<view class="absolute top-24rpx left-40rpx">
|
||
<view class="">消费金额</view>
|
||
<view class="mt-22rpx">
|
||
<price-format color="#FF5951" :first-size="34" :second-size="34" :subscript-size="34" :price="user.order_amount"></price-format>
|
||
</view>
|
||
<view
|
||
@click="router.navigateTo(`/bundle/user/bill-detail?userId=${user.id}`)"
|
||
class="bg-[#3C7FFF] w-124rpx h-48rpx rounded-24rpx text-[#fff] text-center leading-48rpx text-28rpx font-bold mt-12rpx">
|
||
去查看
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-26rpx mb-18rpx">
|
||
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
|
||
</view>
|
||
|
||
<view class="font-400 text-26rpx text-[#9CA3AF] leading-36rpx">注册日期：{{ user.create_time.split(' ')[0] }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-white rounded-16rpx px-30rpx pt-36rpx pb-34rpx mt-20rpx">
|
||
<view class="flex items-center">
|
||
<wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_qizhi.png`"></wd-img>
|
||
<view class="text-30rpx leading-42rpx text-[#303133] ml-10rpx">备注</view>
|
||
</view>
|
||
|
||
<view class="add-textarea">
|
||
<wd-textarea v-model="mark"
|
||
placeholder="有想说的可以在这里写哦！"
|
||
custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
|
||
custom-textarea-class='!bg-[#F8F9FA] !h-100rpx' :maxlength='30' show-word-limit />
|
||
</view>
|
||
|
||
<view class="bg-[#4C9F44] rounded-8rpx text-[#fff] w-626rpx h-90rpx text-center leading-90rpx mt-52rpx" @click="UserDetail.handleEditUserRemark(user.store_user_id)">修改备注</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script lang="ts" setup>
|
||
import { toTimes, copy } from '@/utils/tools'
|
||
import { router } from '@/utils/tools'
|
||
import { getStoreMemberDetails, editStoreMemberMark } from '@/api/store'
|
||
import { useStoreStore } from '@/store'
|
||
import { toast } from '@/utils/toast'
|
||
|
||
const OSS = inject('OSS')
|
||
const useStore = useStoreStore()
|
||
|
||
// ID
|
||
const id = ref<number>(0)
|
||
const mark = ref<string>('')
|
||
const user = ref<any>({
|
||
avatar: '',
|
||
nickname: '',
|
||
mobile: '',
|
||
member: 0,
|
||
expiration_time: '',
|
||
order_amount: 0,
|
||
store_user_id: 0,
|
||
create_time: ''
|
||
})
|
||
|
||
onLoad(async (args) => {
|
||
id.value = Number(args.id) || 0
|
||
await UserDetail.handleGetStoreMemberDetails()
|
||
})
|
||
|
||
const UserDetail = {
|
||
/**
|
||
* 获取用户详情
|
||
*/
|
||
handleGetStoreMemberDetails: async () => {
|
||
const res = await getStoreMemberDetails(useStore.defaultStore.id, id.value)
|
||
user.value = res.user || {}
|
||
mark.value = res.user?.remark || ''
|
||
},
|
||
|
||
/**
|
||
* 打电话
|
||
* @param phone
|
||
*/
|
||
handleCall: (phone) => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 修改用户备注
|
||
*/
|
||
handleEditUserRemark: async (id) => {
|
||
if (!mark.value.trim()) {
|
||
toast.info('请输入备注内容')
|
||
return
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '修改中...'
|
||
})
|
||
|
||
try {
|
||
await editStoreMemberMark(id, mark.value)
|
||
uni.hideLoading()
|
||
toast.info('修改成功')
|
||
uni.$emit('refreshUserDetail')
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.add-textarea {
|
||
:deep() {
|
||
.wd-textarea__value,
|
||
.wd-textarea__count {
|
||
background: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|