添加页面
This commit is contained in:
wangxiaowei
132
src/bundle/user/user-detail.vue
Normal file
132
src/bundle/user/user-detail.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<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="https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/icon/icon_avatar.png" :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">用户昵称</view>
|
||||
<!-- TODO 如果是vip的话才显示这个皇冠 -->
|
||||
<view>
|
||||
<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">手机号：18857339563</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- TODO VIP显示这块内容 -->
|
||||
<view class="relative mt-22rpx">
|
||||
<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">2026.03.06到期</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">3,1.46</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">3,662.46</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="23.02"></price-format>
|
||||
</view>
|
||||
<view
|
||||
@click="router.navigateTo('/bundle/user/bill-detail')"
|
||||
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">注册日期：2025-04-23</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">修改备注</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toTimes, copy } from '@/utils/tools'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const mark = ref<string>('')
|
||||
|
||||
onLoad((args) => {
|
||||
})
|
||||
|
||||
const UserList = {
|
||||
// 打电话
|
||||
handleCall: (phone) => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
|
||||
.add-textarea {
|
||||
:deep() {
|
||||
.wd-textarea__value,
|
||||
.wd-textarea__count {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user