Leadfyy.co
/
uniapp-hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的页面

test
Enzo 4 years ago
parent
286fcfdb66
commit
0c2c1aa0b4
2 changed files with 341 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      pages.json
  2. 327
      pages/user/user.vue

22
pages.json
View File

@ -3,6 +3,20 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
},
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/notice/notice",
"style": {
@ -32,14 +46,6 @@
"style": {
"navigationBarTitleText": "支付结果"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {

327
pages/user/user.vue
View File

@ -0,0 +1,327 @@
<template>
<view>
<view class="flex-direction bg-blue justify-between align-center text-center lf-p-t-30 lf-p-b-30" style="height: 340rpx;">
<view>
<image src="../../static/logo.png" mode="aspectFill" style="width: 200rpx;height: 200rpx;border-radius: 50%;"></image>
</view>
<view class="lf-font-36 align-center text-center text-white lf-m-t-30">
小小的小可爱
</view>
</view>
<view class="list">
<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/collect/index')">
<view class="lf-row-center">
<image class="icon-img" src="../../static/logo.png"></image>
<text class="lf-text-vertical lf-m-l-20 lf-font-28 lf-color-black">我的订单</text>
</view>
<view>
<u-icon name="arrow-right" color="#777" size="28"></u-icon>
</view>
</view>
<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/contactService/index')">
<view class="lf-row-center">
<image class="icon-img" src="../../static/logo.png"></image>
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">消息中心</text>
</view>
<view>
<u-icon name="arrow-right" color="#777" size="28"></u-icon>
</view>
</view>
<view class="lf-row-between list-item" hover-class="lf-opacity">
<view class="lf-row-center">
<image class="icon-img" src="../../static/logo.png"></image>
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">意见反馈</text>
</view>
<view>
<u-icon name="arrow-right" color="#777" size="28"></u-icon>
</view>
<button class="feedback-btn" open-type="feedback"></button>
</view>
<view class="lf-row-between list-item" hover-class="lf-opacity">
<view class="lf-row-center">
<image class="icon-img" src="../../static/logo.png"></image>
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">我的收藏</text>
</view>
<view>
<u-icon name="arrow-right" color="#777" size="28"></u-icon>
</view>
<button class="feedback-btn" open-type="feedback"></button>
</view>
<view class="lf-row-between list-item" hover-class="lf-opacity">
<view class="lf-row-center">
<image class="icon-img" src="../../static/logo.png"></image>
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">关于我们</text>
</view>
<view>
<u-icon name="arrow-right" color="#777" size="28"></u-icon>
</view>
<button class="feedback-btn" open-type="feedback"></button>
</view>
<view class="lf-row-between list-item" hover-class="lf-opacity">
<view class="lf-row-center">
<image class="icon-img" src="../../static/logo.png"></image>
<text class="lf-text-vertical lf-m-l-16 lf-font-28 lf-color-black">联系客服</text>
</view>
<view>
<u-icon name="arrow-right" color="#777" size="28"></u-icon>
</view>
<button class="feedback-btn" open-type="feedback"></button>
</view>
</view>
<view style="background-color: #F6F6F6;">
<view class="lf-p-t-40 lf-p-b-20 text-center details-title">
<view class="lf-font-32 details-text flex justify-between align-center text-center" style="color: #222;position: relative;left: 270rpx;">
<view class="rhombus lf-m-l-30"></view>
<view>为你推荐</view>
<view class="rhombus lf-m-r-30"></view>
</view>
</view>
<u-waterfall v-model="list" :ref="'uWaterfall-'+ tabIndex">
<template v-slot:left="{leftList}">
<view class="list-warter" v-for="(item, index) in leftList" :key="index">
<u-lazy-load threshold="-450" :image="item.image" :index="index">
<view class="list-label">已售8777</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.title}}
</view>
<view class="list-price">
<text>{{item.price}}元</text>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="list-warter" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="-450" :image="item.image" :index="index">
<view class="list-label">已售8777</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.title}}
</view>
<view class="list-price">
<text>{{item.price}}元</text>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text>
</view>
</view>
</view>
</template>
</u-waterfall>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
price: 35,
title: '北国风光，千里冰封，万里雪飘',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
},
{
price: 75,
title: '望长城内外，惟余莽莽',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
},
{
price: 385,
title: '大河上下，顿失滔滔',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
},
{
price: 784,
title: '欲与天公试比高',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
},
{
price: 7891,
title: '须晴日，看红装素裹，分外妖娆',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
},
{
price: 2341,
shop: '李白杜甫白居易旗舰店',
title: '江山如此多娇，引无数英雄竞折腰',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
},
{
price: 661,
shop: '李白杜甫白居易旗舰店',
title: '惜秦皇汉武，略输文采',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
},
{
price: 1654,
title: '唐宗宋祖，稍逊风骚',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 1678,
title: '一代天骄，成吉思汗',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 924,
title: '只识弯弓射大雕',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 8243,
title: '俱往矣，数风流人物，还看今朝',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
]
}
}
}
</script>
<style lang="scss">
.rhombus{
width: 16rpx;
height: 16rpx;
transform: rotateZ(45deg);
background: #222;
}
.details-title {
position: relative;
&::after {
position: absolute;
left: 144rpx;
top: 60rpx;
content: '';
width: 69%;
height: 1rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.08)
}
.details-text {
position: relative;
// display: inline-block;
width: 264rpx;
background-color: #f5f5f9;
z-index: 9;
}
}
.list{
margin-top: 20rpx;
padding: 0 32rpx;
background-color: #FFFFFF;
width: 100%;
height: auto;
}
.list-item{
border-bottom: 1rpx solid #EEEEEE;
height: 110rpx;
box-sizing: border-box;
position: relative;
.icon-img{
width: 50rpx;
height: 50rpx;
}
.feedback-btn{
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background: transparent;
}
&:last-child{
border-bottom: none;
}
}
//waterfall
.list-warter {
border-radius: 8px;
margin: 10px 5px;
margin-top: 0px;
background-color: #ffffff;
// padding: 8px;
position: relative;
overflow: hidden;
}
.u-close {
position: absolute;
top: 32rpx;
right: 32rpx;
}
.list-image {
width: 100%;
border-radius: 4px;
}
.list-title {
font-size: 28rpx;
font-weight: bold;
color: $u-main-color;
}
.list-label{
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
width: 140rpx;
height: 48rpx;
border-radius: 20rpx 0rpx 0rpx 0rpx;
font-size: 22rpx;
color: #FFFFFF;
line-height: 48rpx;
text-align: center;
}
.list-tag {
display: flex;
margin-top: 5px;
}
.list-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.list-tag-text {
border: 1px solid $u-type-primary;
color: $u-type-primary;
margin-left: 10px;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
.list-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 5px;
}
</style>
Write Preview
Loading…
Cancel
Save