cashier_admin_app/pageUser/user-info/user-info.vue

<template>
	<view class="bg-gray min-page u-p-30">
		<view class=" u-p-30 top bg-fff">
			<view class=" u-flex u-col-top ">
				<view class="u-flex">
					<image src="@/static/uni.png" class="logo" mode=""></image>
				</view>
				<view class="u-p-l-30">
					<view class="font-bold">未授权</view>
					<view class="u-m-t-10 color-999 u-font-24">非会员</view>
				</view>
			</view>
			<view class="u-flex u-m-t-30 u-row-between u-p-t-30 border-top">
				<view><text class="color-666">余额：</text><text class="font-bold">0.00</text></view>
				<view><text class="color-666">积分：</text><text class="font-bold">0.00</text></view>
				<view><text class="color-666">优惠券：</text><text class="font-bold">0.00</text></view>
			</view>

		</view>
		<view class="bg-fff u-p-30 u-m-t-30">
			<myTabs :defaultIndex="tabsCurrent" :list="tabsList" @change="tabsChange"></myTabs>
			<template v-if="tabsCurrent===0">
				<view class="u-m-t-30">
					<uni-steps :options="guiji.list" :active-color="color.ColorMain" :active="guiji.active"
						direction="column" />
				</view>
			</template>
			<template v-if="tabsCurrent===1">


			</template>
			<template v-if="tabsCurrent===2">

			</template>
		</view>


	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import myTabs from '@/components/my-components/my-tabs.vue'
	import mySwitch from '@/components/my-components/my-switch.vue'
	import myButton from '@/components/my-components/my-button.vue'
	import myModel from '@/components/my-components/my-model.vue'
	import color from '@/commons/color.js';
	import $util from '@/commons/utils/getDateArea.js';
	import go from '@/commons/utils/go.js';

	const guiji = reactive({
		list: [{
			title: '买家下单',
			desc: '2018-11-11'
		}, {
			title: '卖家发货',
			desc: '2018-11-12'
		}, {
			title: '买家签收',
			desc: '2018-11-13'
		}, {
			title: '交易完成',
			desc: '2018-11-14'
		}],
		active: 0
	})

	function rechargeItemDel(e) {
		modelData.desc = `确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`
		model.value.open()
		console.log(e);
	}

	function toAddRecharge() {
		go.to('PAGES_USER_DEPOSIT_ADD_RECHARGE')
	}

	const rechargeLists = ref([{
			id: 1,
			price: 200,
			desc: '20.00元、2张券'
		},
		{
			id: 2,
			price: 500,
			desc: '60.00元、4张券'
		}
	])



	let mustBindPhone = ref(true)
	const nowDate = new Date()
	const filters = reactive({
		time: {
			start: $util.getDayArea(nowDate, 'start'),
			end: $util.getDayArea(nowDate, 'end')
		}
	})
	const tabsList = ['用户轨迹', '余额记录', '积分记录']
	let tabsCurrent = ref(2)

	let showStatus = ref(false)

	function showStatusToggle() {
		showStatus.value = !showStatus.value
	}

	const statusBootom = 14
	const statusHeight = computed(() => {
		return 30 * status.length + statusBootom + 'px'
	})


	let searchShow = ref(false)

	function showSearch() {
		searchShow.value = true
	}
	const status = ['全部', '未支付', '支付成功']
	let nowStatusIndex = ref(0)

	function changeNowStatusIndex(i) {
		nowStatusIndex.value = i
		showStatus.value = false
	}

	function hideSearch() {
		searchShow.value = false
	}

	function tabsChange(i) {
		console.log(i);
		tabsCurrent.value = i
	}

	let keyword = ref('')

	function searchConfirm(e) {
		console.log(e)
	}

	const datePicker = ref(null)

	function timeToggle() {
		datePicker.value.toggle()
	}

	function datePickerConfirm(e) {
		console.log(e);
		filters.time.start = e.start
		filters.time.end = e.end
	}
</script>

<style lang="scss" scoped>
	.border-top {
		border-top: 1px solid rgb(247, 247, 247);
	}

	.logo {
		width: 130rpx;
		height: 130rpx;
	}

	.u-overflow-hide {
		overflow: hidden;
	}

	.border {
		border: 1px solid #E5E5E5;
	}

	.border-r-12 {
		border-radius: 12rpx;
	}

	.recoreds {
		background: linear-gradient(127deg, #33A0FF 0%, #6699FF 100%);
		box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding: 32rpx 40rpx 40rpx 48rpx;
	}

	.lh30 {
		line-height: 30px;
	}

	.status {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	.input-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.box-shadow {
		box-shadow: 0 0 5px #eee;
	}

	.search-box {
		background-color: #fff;
		padding: 16rpx 0;
		top: 0;
		bottom: 0;
		position: absolute;
		right: 30rpx;
		display: flex;

		.search-btn {
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			// width: 164rpx;
			transition: all .3s ease-in-out;
			background-color: rgb(247, 247, 247);
			border-radius: 100px;
		}
	}

	.time-area {
		background: #E6F0FF;
		border-radius: 100px;
		padding: 10rpx 20rpx;
	}

	.icon-down {
		transform: rotate(90deg);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	::v-deep  .uni-steps__column-title{
		font-size: 12px;
	}
	::v-deep  .uni-steps__column-desc{
		font-size: 14px;
	}
</style>