Skip to content

J
jiedao-app-customer-new-master
Commit 569da69b authored by lizhan's avatar lizhan
Browse files
Options

📝 【TASK-20240806-01】TASK:APP我的积分静态页面完成 

首页nav栏入口增加，我的积分页面完成，增加图片，增加icon组件
parent 003f471f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1114 additions and 502 deletions
src/pages.json
View file @ 569da69b
...@@ -267,6 +267,12 @@ ...@@ -267,6 +267,12 @@
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path": "pages/integral/integral",
"style": {
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
src/pages/index/index.vue
View file @ 569da69b
This diff is collapsed.
src/pages/integral/components/gift.vue 0 → 100644
View file @ 569da69b
<template>
<view class="gift">
<view class="gift-remark">不同网点兑换积分不同</view>
<view class="gift-select">
<view class="select-list">
<view class="list-item"
>中国
<uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
</view>
<view class="list-item"
>大连
<uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
</view>
</view>
<view class="select-right">
请选择网点
<uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
</view>
</view>
<view class="gift-content">
<view class="gift-item" v-for="item in 7" :key="item">
<view class="gift-image-box">
<image class="gift-image" mode="cover" src="../../../static/img/wallet.png"></image>
<view class="gift-tag">
<view class="tags">
<image class="tag-image" src="../../../static/img/score.png"></image>
<view class="tag-text">{{ item }}</view>
</view>
</view>
<view class="foot-tag">剩余99份</view>
</view>
<view class="gift-name">商品名称</view>
<view class="gift-menu">
<view class="gift-menu-text">包邮</view>
<view class="gift-menu-text">到付</view>
<view class="gift-menu-text">自提</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.gift {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.gift-remark {
padding: 0 32upx;
width: 100%;
height: 42upx;
display: flex;
align-items: center;
justify-content: right;
box-sizing: border-box;
font-size: 20upx;
color: red;
}
.gift-select {
padding: 0 32upx;
display: flex;
width: 100%;
height: 70upx;
color: #b3b3b3;
box-sizing: border-box;
align-items: center;
border-bottom: 2upx solid #e7e7e7;
}
.select-list {
font-size: 20upx;
display: flex;
align-items: center;
}
.list-item {
display: flex;
align-items: center;
margin-right: 20upx;
&:last-child {
margin-right: 0;
}
}
.list-icon {
font-weight: 600;
margin-left: 50upx;
&:last-child {
margin-left: 20upx;
}
}
.select-right {
margin-left: auto;
font-size: 24upx;
}
.gift-content {
overflow-y: auto;
width: 100%;
height: calc(100% - 152upx);
padding: 32upx 32upx;
gap: 22upx;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
justify-content: space-between;
}
.gift-item {
display: flex;
flex-direction: column;
width: 300upx;
height: 318upx;
box-sizing: border-box;
// background-color: red;
}
.gift-image {
margin: 0;
width: 300upx;
height: 200upx;
}
.gift-name {
margin: 0;
display: flex;
height: 60upx;
font-size: 24upx;
color: #000000;
align-items: center;
}
.gift-menu {
display: flex;
height: 58upx;
font-size: 20upx;
color: #b3b3b3;
align-items: center;
}
.gift-menu-text {
padding: 4upx 4upx;
border: 2upx solid #ef8d15;
font-size: 24upx;
color: #ef8d15;
border-radius: 20upx;
margin-right: 10upx;
&:last-child {
margin-right: 0;
}
}
.gift-image-box {
position: relative;
}
.gift-tag {
position: absolute;
top: 0;
left: 0;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
width: 80upx;
height: 32upx;
background: linear-gradient(#ef7e1a, #f1b009);
transform: skewX(15deg);
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
.tag-image {
width: 24upx;
height: 24upx;
}
.tags {
display: flex;
align-items: center;
justify-content: center;
transform: skewX(-15deg);
}
.tag-text {
margin-left: 4upx;
font-weight: 500;
color: #fff;
font-size: 24upx;
}
.foot-tag {
position: absolute;
padding: 0 8upx;
bottom: 0;
right: 0;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
min-width: 110upx;
height: 32upx;
color: #fff;
font-size: 22upx;
box-sizing: border-box;
background: linear-gradient(#ef7e1a, #f1b009);
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
</style>
src/pages/integral/components/points.vue 0 → 100644
View file @ 569da69b
<template>
<view class="int">
<view class="int-centent" v-for="item in 6" :key="item">
<view class="int-centent-left">
<view class="centent-tag">
<view class="tag-text">APP注册</view>
</view>
<image class="centent-image" src="../../../static/img/company.png"></image>
</view>
<view class="int-centent-right">
<view class="centent-title">此处是活动标题</view>
<view class="centent-text"
>此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，</view
>
</view>
</view>
</view>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.int {
padding: 30upx 0;
height: inherit;
overflow-y: auto;
}
.int-centent {
margin-bottom: 20upx;
width: 100%;
height: 220upx;
display: flex;
padding: 0 30upx;
box-sizing: border-box;
border-bottom: 2upx solid #e7e7e7;
&:last-child {
margin-bottom: 0;
}
}
.int-centent-left {
position: relative;
width: 200upx;
height: inherit;
.centent-image {
width: 200upx;
height: 200upx;
}
}
.int-centent-right {
flex: 1;
height: inherit;
padding-left: 20upx;
box-sizing: border-box;
.centent-title {
font-size: 28upx;
color: #333;
margin-bottom: 20upx;
}
.centent-text {
font-size: 20upx;
color: #666;
line-height: 36upx;
}
}
.centent-tag {
position: absolute;
top: 0;
left: 0;
z-index: 9;
display: flex;
font-size: 24upx;
min-width: 120upx;
height: 40upx;
color: #fff;
align-items: center;
justify-content: center;
box-sizing: border-box;
transform: skewX(15deg);
background-color: #ff4d4f;
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
.tag-text {
transform: skewX(-15deg);
}
</style>
src/pages/integral/integral.vue 0 → 100644
View file @ 569da69b
<template>
<view class="integral">
<dHeader :title="$lang.lang.integral.info"></dHeader>
<view class="container">
<view class="header">
<view class="avatar">
<image src="../../static/img/vip_avatar.png" mode=""></image>
</view>
<view class="content">
<view class="content-title">{{ $lang.lang.integral.headerTitle }}白金会员</view>
<view class="content-text">
<view class="text">{{ $lang.lang.integral.spend }} 100</view>
<view class="text">{{ $lang.lang.integral.available }} 88</view>
</view>
<view class="divider">
<view class="divider-active"></view>
<view class="divider-unm">238</view>
<view class="divider-level">VIP2</view>
</view>
</view>
<view class="classification">
<image class="classification-image" src="../../static/img/vip_2.png"></image>
<view class="log-menu">
<view class="menu-item">积分日志 &gt;</view>
<view class="menu-item">兑换日志 &gt;</view>
</view>
</view>
</view>
<view class="main">
<view class="main-nav">
<view class="nav-item" :class="{ 'nav-active1': navIndex === 0 }" @click="navIndex = 0"
>兑换礼品</view
>
<view class="nav-item" :class="{ 'nav-active2': navIndex === 1 }" @click="navIndex = 1"
>积分活动</view
>
</view>
<view class="main-content">
<gift v-if="navIndex === 0"></gift>
<points v-if="navIndex === 1"></points>
</view>
</view>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
import points from './components/points.vue'
import gift from './components/gift.vue'
export default {
components: {
dHeader,
gift,
points
},
data() {
return {
navIndex: 0
}
}
}
</script>
<style>
@import url(../../static/css/integral.css);
</style>
src/static/css/integral.css 0 → 100644
View file @ 569da69b
page {
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
height: 100%;
}
.integral {
padding: 0 32upx;
height: inherit;
}
.container {
width: 100%;
display: flex;
height: inherit;
flex-direction: column;
box-sizing: border-box;
background-color: #C3C8D3;
border-top-left-radius: 12upx;
border-top-right-radius: 12upx;
}
.header {
padding: 32upx 32upx 20upx;
height: 240upx;
display: flex;
color: #8C8E97;
font-size: 24upx;
box-sizing: border-box;
}
.avatar image {
width: 68upx;
height: 68upx;
}
.content {
flex: 1;
margin-left: 10upx;
}
.content .content-title {
font-size: 32upx;
color: #2A426B;
margin-bottom: 16upx;
text-shadow: 2upx 4upx 12upx rgba(0, 0, 0, 0.5);
}
.content .content-text {
display: flex;
}
.content .content-text .text {
text-align: left;
margin-right: 20upx;
font-size: 20upx;
/* transform: scale(0.8); */
}
.content .divider {
position: relative;
margin-top: 76upx;
width: 260upx;
height: 4upx;
background-color: #fff;
border-radius: 4upx;
}
.divider-active {
position: absolute;
top: 0;
left: 0;
width: 130upx;
height: 4upx;
background-color: #2A426B;
border-radius: 4upx;
}
.divider-unm {
position: absolute;
top: 0;
right: 50%;
color: #2A426B;
transform: translate(50%, -110%);
}
.divider-level {
position: absolute;
top: 0;
right: 0;
color: #2A426B;
transform: translate(130%, -50%);
}
.classification {
position: relative;
display: flex;
flex-direction: column;
}
.classification-image {
position: absolute;
width: 164upx;
height: 116upx;
transform: translateY(-60upx);
}
.log-menu {
margin-top: auto;
text-align: right;
color: #8A8E96;
}
.menu-item {
font-size: 24upx;
margin-top: 10upx;
}
.main {
overflow: hidden;
flex: 1;
height: calc(100% - 240upx);
background-color: #fff;
border-top-left-radius: 18upx;
border-top-right-radius: 18upx;
box-shadow: -2px 0px 12px 0 rgba(0, 0, 0, 0.1)
}
.main-nav {
display: flex;
width: 100%;
height: 80upx;
align-items: center;
justify-content: space-around;
background-color: #D1D5E1;
box-sizing: border-box;
}
.nav-item {
flex: 1;
display: flex;
height: 80upx;
font-size: 28upx;
color: #3F4044;
align-items: center;
justify-content: center;
border: 0;
}
.nav-active1 {
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 80% 0%);
/* clip-path: path('M 0 0 H 80 Q 100 0 100 20 V 100 H 0 Z'); */
font-weight: 600;
background-color: #fff !important;
color: #000 !important;
position: relative;
overflow: hidden;
}
.nav-active2 {
clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%);
/* clip-path: path('M 0 0 H 80 Q 100 0 100 20 V 100 H 0 Z'); */
font-weight: 600;
background-color: #fff !important;
color: #000 !important;
position: relative;
overflow: hidden;
}
.main-content {
height: calc(100% - 80upx);
box-sizing: border-box;
}
src/static/lang/en.js
View file @ 569da69b
...@@ -456,7 +456,14 @@ export default { ...@@ -456,7 +456,14 @@ export default {
old_system: 'Old Order', old_system: 'Old Order',
sea: 'Groupage container', sea: 'Groupage container',
seaAir: 'Sea&air Cargo', seaAir: 'Sea&air Cargo',
air: 'Air Cargo' air: 'Air Cargo',
integral: 'my integral'
},
integral: {
info: 'my integral',
headerTitle: 'Honorable',
spend: 'redeemed points are',
available: 'The available credits are'
}, },
levite: { levite: {
levite: 'warehousing notes' levite: 'warehousing notes'
......
src/static/lang/zh.js
View file @ 569da69b
...@@ -451,7 +451,14 @@ export default { ...@@ -451,7 +451,14 @@ export default {
old_system: '旧订单', old_system: '旧订单',
sea: '海运拼柜', sea: '海运拼柜',
seaAir: '海空联运', seaAir: '海空联运',
air: '空运专线' air: '空运专线',
integral: '我的积分'
},
integral: {
info: '我的积分',
headerTitle: '尊贵的',
spend: '已兑换积分为',
available: '可用积分为'
}, },
levite: { levite: {
levite: '入仓须知' levite: '入仓须知'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment