first
This commit is contained in:
250
pageUser/user-info/user-info.vue
Normal file
250
pageUser/user-info/user-info.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user