czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
魏啾
2024-04-19 09:29:46 +08:00
parent 4bc97b35fd
commit 25acfbeb91
2 changed files with 164 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
pages/user/user.vue
View File

@@ -1,13 +1,13 @@
<template>
<view class="container">
<view class="user-info-wrap">
<view style="width: 36px; height: 36px;border-radius: 10rpx;">
<view style="width: 108rpx; height: 108rpx;border-radius: 50%;">
<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar'
style="padding: 0;margin: 0; width: 36px; height: 36px;border-radius: 10rpx;">
<image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar"
style="padding: 0;margin: 0; width: 108rpx; height: 108rpx;border-radius: 50%;">
<image style="width: 108rpx; height: 108rpx;" v-if="userInfo.avatar" :src="userInfo.avatar"
mode="aspectFill">
</image>
<image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png" mode="aspectFill">
<image style="width: 108rpx; height: 108rpx;" v-else src="@/static/avatar.png" mode="aspectFill">
</image>
</button>
</view>
@@ -15,64 +15,18 @@
<text class="phone">{{userInfo.telephone || '无'}}</text>
</view>
</view>
<view class="card">
<view class="header-wrap">
<view class="header">
<text class="title">我的订单</text>
<view class="more" @click="orderHandle(1)">
<text class="t">全部订单</text>
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
<view class="userinfoone">
<view class="userinfoonebox">
<view class="userinfooneboxitem flex-between">
<view class="userinfooneboxitemleft flex-start">
<image src="@/static/ewm.png" mode="aspectFill"></image>
<text>优惠券</text>
</view>
</view>
</view>
<view class="order-menu">
<view class="item" @click="orderHandle(2)">
<image class="icon" src="@/static/user/user_icon1.png" mode="aspectFit"></image>
<text class="t">待付款</text>
</view>
<view class="item" @click="orderHandle(3)">
<image class="icon" src="@/static/user/user_icon2.png" mode="aspectFit"></image>
<text class="t">待发货</text>
</view>
<view class="item" @click="orderHandle(4)">
<image class="icon" src="@/static/user/user_icon3.png" mode="aspectFit"></image>
<text class="t">已完成</text>
</view>
<view class="item" @click="orderHandle(5)">
<image class="icon" src="@/static/user/user_icon4.png" mode="aspectFit"></image>
<text class="t">退款</text>
<u-icon name="arrow-right" color="#575B66" size="28"></u-icon>
</view>
</view>
</view>
<view class="card">
<view class="header-wrap">
<view class="header">
<text class="title">更多服务</text>
</view>
</view>
<view class="order-menu">
<navigator class="item" hover-class="none" url="/pages/order/successful">
<!-- <image class="icon" src="@/static/user_icon5.png" mode="aspectFit"></image> -->
<text class="t">优惠券</text>
</navigator>
<view class="item">
<!-- <image class="icon" src="@/static/user_icon6.png" mode="aspectFit"></image> -->
<text class="t">寄存记录</text>
</view>
<view class="item">
<!-- <image class="icon" src="@/static/user_icon7.png" mode="aspectFit"></image> -->
<text class="t">储值明细</text>
</view>
<view class="item">
<!-- <image class="icon" src="@/static/user_icon8.png" mode="aspectFit"></image> -->
<text class="t">设置</text>
</view>
</view>
</view>
<view class="version-wrap">
<!-- <text class="t">版本号：2.0.0</text> -->
<text class="t">陕西超掌柜科技有限公司</text>
</view>
</view>
</template>
@@ -147,22 +101,13 @@
<style scoped lang="scss">
.user-info-wrap {
padding: $paddingSize + 20upx $paddingSize;
position: relative;
padding: 48rpx 32rpx 88rpx 32rpx;
display: flex;
align-items: center;
width: 750rpx;
height: 280rpx;
background: #FFD158;
border-radius: 0rpx 0rpx 40rpx 0rpx;
.avatar {
$size: 120upx;
width: $size;
height: $size;
border-radius: 50%;
border: 2px solid #fff;
}
.info {
flex: 1;
padding-left: $paddingSize;
@@ -182,63 +127,49 @@
}
}
.card {
border-radius: 20upx;
background-color: #fff;
margin-bottom: $paddingSize;
.header-wrap {
padding: 0 $paddingSize;
}
.header {
padding: 38upx 0;
display: flex;
justify-content: space-between;
border-bottom: 1upx solid #f2f2f2;
.more {
display: flex;
align-items: center;
.t {
color: #999;
margin-right: 8upx;
}
}
}
.order-menu {
display: flex;
.item {
flex: 1;
padding: 38upx 0;
display: flex;
flex-direction: column;
align-items: center;
.icon {
$size: 68upx;
width: $size;
height: $size;
}
.t {
padding-top: 20upx;
}
}
}
.user-info-wrap::after {
position: absolute;
content: '';
bottom:40rpx;
right: 0;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
background-image: radial-gradient(40rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
}
.version-wrap {
padding: 100upx 0;
display: flex;
flex-direction: column;
align-items: center;
.t {
color: #999;
.userinfoone{
position: relative;
padding: 48rpx 28rpx;
width:100%;
top: -40rpx;
background: #F6F6F6;
border-radius: 40rpx 0 0rpx 0rpx;
.userinfoonebox{
padding: 32rpx 20rpx 32rpx 52rpx;
border-radius: 22rpx;
background: #FFFFFF;
width: 100%;
.userinfooneboxitem{
width: 100%;
margin-top: 32rpx;
.userinfooneboxitemleft{
image{
width: 41.33rpx;
height:36.9rpx;
}
text{
margin-left: 32rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
}
.userinfooneboxitem:nth-child(1){
margin-top: 0;
}
}
}
</style>