purchase-let/pages/my/my.vue

168 lines
4.2 KiB
Vue

<template>
<view>
<up-navbar title="我的" bgColor="rgba(0,0,0,0)">
<template #left>
<view></view>
</template>
</up-navbar>
<view class="user-info">
<image class="bg" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e3a7b202404261113002322.webp"
mode="widthFix"></image>
<view class="u-card">
<up-avatar src="" size="80"></up-avatar>
<view class="content">
<view class="u-phone">151****6699</view>
<view class="u-id">ID: 6655</view>
</view>
</view>
</view>
<view class="order-info-box">
<view class="order-info">
<view class="info-head">我的订单</view>
<view class="info-list">
<view class="list-item" @click="navTo(1)">
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f335a202404261401535608.png"></image>
<view class="">待付款</view>
</view>
<view class="list-item" @click="navTo(2)">
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/45241202404261403353935.png"></image>
<view class="">待收货</view>
</view>
<!-- <view class="list-item">
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/96915202404261403582769.png"></image>
<view class="">售后/退款</view>
</view> -->
<view class="list-item" @click="navTo()">
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/abdcd202404261406199643.png"></image>
<view class="">全部订单</view>
</view>
</view>
</view>
</view>
<view class="card">
<up-cell-group>
<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
</up-cell-group>
</view>
<view class="card">
<up-cell-group>
<up-cell title="意见反馈" :isLink="true"></up-cell>
<up-cell title="关于我们" :isLink="true"></up-cell>
<up-cell title="退出登录" :isLink="true" url="/pages/login/login"></up-cell>
</up-cell-group>
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
const navTo = (type=0) => {
uni.navigateTo({
url: `/pagesOrder/order/order?type=${type}`
})
}
</script>
<style lang="scss">
.user-info {
overflow: hidden;
position: relative;
width: 750rpx;
height: 450rpx;
/* #ifdef H5 */
height: 350rpx;
/* #endif */
.bg {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.u-card {
box-sizing: border-box;
padding: 50rpx 0 50rpx 50rpx;
display: flex;
position: absolute;
bottom: 50rpx;
left: 0;
z-index: 2;
.content {
width: 500rpx;
padding-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
.u-phone {
font-size: 32rpx;
margin-bottom: 16rpx;
}
.u-id {
font-size: 24rpx;
}
}
}
}
.order-info-box {
margin: 20rpx;
height: 140rpx;
position: relative;
.order-info {
height: 220rpx;
width: 710rpx;
background-color: #fff;
border-radius: 14rpx;
position: absolute;
top: -80rpx;
left: 0;
z-index: 3;
background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a8863202404261349533191.png');
background-size: 38% 100%;
background-position: right;
background-repeat: no-repeat;
.info-head{
margin-left: 20rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
font-size: 32rpx;
}
.info-list{
height: 110rpx;
display: flex;
font-size: 26rpx;
.list-item{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
image{
width: 64rpx;
height: 64rpx;
}
}
}
}
}
.card{
margin: 20rpx;
background-color: #fff;
border-radius: 14rpx;
overflow: hidden;
}
</style>