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

11

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
pages/order/successful.vue
View File

@ -46,6 +46,30 @@
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/yhj.png" mode=""></image>
<text>恭喜获得优惠券</text>
</view>
<view class="towcontenthereimage flex-colum">
<view class="towcontenthereimageone">
<text style="font-size:28rpx; color: #FF7C0D;">￥</text>
30.00
</view>
<view class="towcontenthereimagetow">
通用红包券
</view>
<view class="towcontenthereimagethere">
有效至 2024 07 11
</view>
<view class="towcontenthereimagefour">
限时红包变大 快来领取
</view>
<view class="towcontenthereimagefive flex-between">
<view class="towcontenthereimagefiveone">
我在想想
</view>
<view class="towcontenthereimagefivetow">
马上翻倍
</view>
</view>
</view>
</view>
</view>
</view>
@ -215,6 +239,7 @@
.towcontentow {
margin-top: 16rpx;
.towcontentow_O {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
@ -229,24 +254,100 @@
color: #333333;
}
}
.towcontenthere{
.towcontenthere {
margin-top: 32rpx;
border-top: 1rpx dashed #E5E5E5;
.towcontentherebox{
margin-top: 32rpx;
image{
.towcontentherebox {
margin-top: 48rpx;
image {
width: 38.48rpx;
height: 38.42rpx;
}
text{
text {
margin-left: 16rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
}
.towcontenthereimage{
.towcontenthereimage {
margin-top: 48rpx;
width: 540rpx;
height: 498rpx;
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/yhjs.png) no-repeat;
background-size: cover;
justify-content: flex-start;
.towcontenthereimageone {
margin-top: 54rpx;
font-family: Roboto, Roboto;
font-weight: bold;
font-size: 48rpx;
color: #FF7C0D;
}
.towcontenthereimagetow {
margin-top: 28rpx;
width: 184rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
background: rgba(255, 219, 151, 0.33);
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 24rpx;
color: #C7620E;
}
.towcontenthereimagethere {
margin-top: 8rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 20rpx;
color: #333333;
}
.towcontenthereimagefour {
margin-top: 74rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
}
.towcontenthereimagefive {
margin-top: 40rpx;
.towcontenthereimagefiveone {
padding: 12rpx 28rpx;
background: #FFF6D8;
border-radius: 46rpx 46rpx 46rpx 46rpx;
border: 2rpx solid #FFE18F;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.towcontenthereimagefivetow {
margin-left: 16rpx;
padding: 12rpx 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
background: linear-gradient(178deg, #FFFF81 0%, rgba(255, 76, 59, 0.56) 100%);
box-shadow: 0rpx 4rpx 6rpx 2rpx rgba(222, 91, 43, 0.65);
border-radius: 46rpx 46rpx 46rpx 46rpx;
}
}
}
}
}

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>