首页页面完善
This commit is contained in:
@@ -1,21 +1,120 @@
|
||||
<template>
|
||||
<view class="flex flex-col items-center justify-center">
|
||||
<image
|
||||
class="mb-50rpx mt-200rpx h-200rpx w-200rpx"
|
||||
src="@/static/images/logo.png"
|
||||
width="200rpx"
|
||||
height="200rpx"
|
||||
/>
|
||||
<view class="flex justify-center">
|
||||
<text class="font-size-36rpx color-gray-700">
|
||||
{{ title }}
|
||||
</text>
|
||||
<view class='content'>
|
||||
<view class='user-info-view'>
|
||||
<image
|
||||
class='image-bg'
|
||||
:src="assetsUrl+'test_bg.png'"
|
||||
/>
|
||||
|
||||
<view class='top-row'>
|
||||
<image :src='assetsUrl+"ic_coupon.png"' />
|
||||
|
||||
<view class='u-flex-column'>
|
||||
<text>设计小仙女</text>
|
||||
<text>15542535625</text>
|
||||
</view>
|
||||
|
||||
<image :src='assetsUrl+"ic_qrcode_white.png"' />
|
||||
</view>
|
||||
|
||||
<view class='bottom-row'>
|
||||
<view>
|
||||
<text>100</text>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>255.00</text>
|
||||
<text>余额</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>3</text>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='integral-add-view'>
|
||||
<text>将会员卡放入微信卡包，及时了解积分变动</text>
|
||||
<text>去添加</text>
|
||||
<image :src='assetsUrl+"ic_arrow_right_yellow.png"' />
|
||||
</view>
|
||||
|
||||
<text class='title-view'>
|
||||
我的订单
|
||||
</text>
|
||||
<view class='card-order-view'>
|
||||
<view v-for='(item,index) in orderActionList' :key='index'>
|
||||
<image :src='item.icon' />
|
||||
<text>{{ item.title }}</text>
|
||||
<text v-if='item.amount>0'>{{ item.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class='title-view'>
|
||||
会员服务
|
||||
</text>
|
||||
|
||||
<view class='card-service-view'>
|
||||
<view v-for='(item,index) in serviceList' :key='index'>
|
||||
<image :src='item.icon' />
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup lang='ts'>
|
||||
import { useUserStore } from '@/store';
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const orderActionList = ref([{
|
||||
title: '进行中',
|
||||
icon: assetsUrl + 'ic_order_progressing.png',
|
||||
path: '',
|
||||
amount: 10
|
||||
}, {
|
||||
title: '已结束',
|
||||
icon: assetsUrl + 'ic_order_finish.png',
|
||||
path: '',
|
||||
amount: 0
|
||||
}, {
|
||||
title: '全部订单',
|
||||
icon: assetsUrl + 'ic_order_all.png',
|
||||
path: '',
|
||||
amount: 0
|
||||
}]);
|
||||
|
||||
const serviceList = [
|
||||
{
|
||||
title: '会员信息',
|
||||
icon: assetsUrl + 'ic_member_service_info.png',
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
title: '消费记录',
|
||||
icon: assetsUrl + 'ic_member_service_record.png',
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
title: '关注公众号',
|
||||
icon: assetsUrl + 'ic_member_service_follow.png',
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
title: '收货地址',
|
||||
icon: assetsUrl + 'ic_member_service_address.png',
|
||||
path: ''
|
||||
}, {
|
||||
title: '联系商家',
|
||||
icon: assetsUrl + 'ic_member_service_contact.png',
|
||||
path: ''
|
||||
}
|
||||
// ,{
|
||||
// title: '推广中心',
|
||||
// icon: assetsUrl + 'ic_order_progressing.png',
|
||||
// path: ''
|
||||
// }
|
||||
];
|
||||
|
||||
const title = ref<string>();
|
||||
title.value = import.meta.env.VITE_APP_TITLE;
|
||||
@@ -23,3 +122,200 @@ title.value = import.meta.env.VITE_APP_TITLE;
|
||||
const store = useUserStore();
|
||||
console.log('store.user_name', store.user_name);
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.user-info-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 275rpx;
|
||||
|
||||
.image-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
margin-left: 33rpx;
|
||||
margin-top: 43rpx;
|
||||
margin-right: 28rpx;
|
||||
align-items: center;
|
||||
|
||||
image:nth-of-type(1) {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
border: #FFFFFF solid 2rpx;
|
||||
}
|
||||
|
||||
view:nth-of-type(1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
image:nth-of-type(2) {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-top: 33rpx;
|
||||
|
||||
view:nth-of-type(n+1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
margin-top: 8rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.integral-add-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #F8ECDE;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx 17rpx;
|
||||
margin-top: 30rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #DB7400;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title-view {
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.card-view {
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.card-order-view {
|
||||
@extend .card-view;
|
||||
flex-direction: row;
|
||||
padding: 30rpx 0;
|
||||
|
||||
view:nth-of-type(n+1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
image {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
min-width: 40rpx;
|
||||
min-height: 35rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F32B2B;
|
||||
border-radius: 50%;
|
||||
color: #FFFFFF;
|
||||
top: -10rpx;
|
||||
right: 70rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-service-view {
|
||||
@extend .card-view;
|
||||
display: grid;
|
||||
grid-template-columns:repeat(4, 1fr);
|
||||
|
||||
view:nth-of-type(n+1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user