yxt_product
/
yxt-yythmall-ui-miniprogram
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

记录查询图标修改

master
yxt_njy 1 year ago
parent
85a4de4141
commit
698e576f39
1 changed files with 185 additions and 251 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. 436
      pages/home/myHome.vue

436
pages/home/myHome.vue
View File

@ -1,267 +1,94 @@
<template>
<view
style="display: flex;flex-direction: column; height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440); box-sizing: border-box;"
id="page">
<view id="page">
<!-- 顶部 -->
<view class="top">
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
:end-change-height="page.endHeight">
</NavBar>
<view style="display: flex;flex-direction: row;align-items: center;
margin-top: 25vw; margin-left: 8vw;">
<image style="width: 70px;height: 70px;border-radius: 50%;" :src="userInfo.photo" @click="showDiaLog">
</image>
<view style="display: flex;flex-direction: column;margin-left: 10px;">
<text style="font-size: 16px;color: #fff;" @click="showDiaLog">{{userInfo.nick}}</text>
<text style="font-size: 14px;color: #fff;">{{userInfo.mobile}}</text>
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight" :end-change-height="page.endHeight"></NavBar>
<!-- 用户信息 -->
<view class="userinfo">
<!-- 头像 -->
<image class="head-img" :src="userInfo.photo" @click="showDiaLog"></image>
<view class="name-mob">
<!-- 昵称 -->
<text @click="showDiaLog">{{userInfo.nick}}</text>
<!-- 手机 -->
<text style="font-size:14px;">{{userInfo.mobile}}</text>
</view>
</view>
</view>
<view
style="background: #F7F7F7;flex-flow: 1; height: calc(100vh - 50vw - 48px); width: 100%; margin-top: -18vw;border-radius: 25px;">
<scroll-view scroll-y="true"
style=" height: 100%; width: 100%; padding: 15px;border-radius: 25px; box-sizing: border-box;"
<view class="view">
<!-- 滚动视图 -->
<scroll-view scroll-y="true" class="scroll-view"
bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
<!-- <view
style=" display: flex;flex-direction: column;padding-top: 5vw;padding-left: 5vw;padding-right: 5vw;">
<view style="display: flex;flex-direction: row;align-items: center;">
<view
style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center;">
<image src="https://supervise.yxtsoft.com/lpk/image/reservation_icon.png"
style="width: 30px;height: 30px;"></image>
<text style="margin-top: 5px;">预约记录</text>
</view>
<view
style="display: flex;flex-direction: column; flex: 1;justify-content: center; align-items: center;">
<image src="https://supervise.yxtsoft.com/lpk/image/order_icon.png"
style="width: 30px;height: 30px;"></image>
<text style="margin-top: 5px;">订单</text>
</view>
<view
style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center; ">
<image src="https://supervise.yxtsoft.com/lpk/image/forward_icon.png"
style="width: 30px;height: 30px;"></image>
<text style="margin-top: 5px;">转赠记录</text>
</view>
<view
style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center; ">
</view>
</view>
</view> -->
<!-- 预约记录 -->
<view
style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px;">
<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">预约记录</text>
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view style="position: relative;width: 35px;height: 35px;">
<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{data.count}}</view>
</view>
<text style="font-size: 13px; color: #101010;margin-top: 5px;">全部预约</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view style="position: relative;width: 35px;height: 35px;">
<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{data.count}}</view>
</view>
<text style="font-size: 13px; color: #101010;margin-top: 5px;">待提菜</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view style="position: relative;width: 35px;height: 35px;">
<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{data.count}}</view>
<view class="icon-cow">
<text class="title">预约记录</text>
<view class="group">
<!-- 待提菜 -->
<view class="icon-name">
<view class="icon">
<image class="img" src="../../static/img/record-query/waiting_extraction.png" mode="aspectFill"></image>
<view v-if="data.count>0" class="count">{{data.count}}</view>
</view>
<text style="font-size: 13px; color: #101010;margin-top: 5px;">已提菜</text>
<text class="name">待提菜</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view style="position: relative;width: 35px;height: 35px;">
<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view v-if="data.count==0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{data.count}}</view>
<!-- 已提菜 -->
<view class="icon-name">
<view class="icon">
<image class="img" src="../../static/img/record-query/extracted.png" mode="aspectFill"></image>
</view>
<text style="font-size: 13px; color: #101010;margin-top: 5px;">过期未提</text>
<text class="name">已提菜</text>
</view>
<view class="icon-name"></view>
<view class="icon-name"></view>
</view>
</view>
<!-- 订单记录 -->
<view
style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px; margin-top: 10px;">
<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">订单记录</text>
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view style="position: relative;width: 35px;height: 35px;">
<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{data.count}}</view>
<view class="icon-cow">
<text class="title">订单记录</text>
<view class="group">
<!-- 待付款 -->
<view class="icon-name">
<view class="icon">
<image class="img" src="../../static/img/record-query/obligation.png" mode="aspectFill"></image>
<view v-if="data.count>0" class="count">{{data.count}}</view>
</view>
<text style="font-size: 13px; color: #101010;margin-top: 5px;">待付款</text>
<text class="name">待付款</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view style="position: relative;width: 35px;height: 35px;">
<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view v-if="data.count==0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{data.count}}</view>
<!-- 已提菜 -->
<view class="icon-name">
<view class="icon">
<image class="img" src="../../static/img/record-query/paid.png" mode="aspectFill"></image>
</view>
<text style="font-size: 13px; color: #101010;margin-top: 5px;">已付款</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<text class="name">已付款</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
</view>
<view class="icon-name"></view>
<view class="icon-name"></view>
</view>
</view>
<!-- 转赠记录 -->
<view
style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px; margin-top: 10px;">
<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">转赠记录</text>
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view style="position: relative;width: 35px;height: 35px;">
<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{data.count}}</view>
<view class="icon-cow">
<text class="title">转赠记录</text>
<view class="group">
<!-- 赠与我的 -->
<view class="icon-name">
<view class="icon">
<image class="img" src="../../static/img/record-query/gifted_to_me.png" mode="aspectFill"></image>
</view>
<text style="font-size: 13px; color: #101010;margin-top: 5px;">赠与我的</text>
<text class="name">赠与我的</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<view style="position: relative;width: 35px;height: 35px;">
<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
src="../../static/basket_icon.png" mode="aspectFill"></image>
<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;">{{data.count}}</view>
<!-- 我的转赠 -->
<view class="icon-name">
<view class="icon">
<image class="img" src="../../static/img/record-query/my_gift.png" mode="aspectFill"></image>
</view>
<text style="font-size: 13px; color: #101010;margin-top: 5px;">我的转赠</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<text class="name">我的转赠</text>
</view>
<view
style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
</view>
<view class="icon-name"></view>
<view class="icon-name"></view>
</view>
</view>
<!-- 推荐有礼 -->
<view style="display: flex;flex-direction: column; border-radius: 10px;background: #fff;
padding: 10px; margin-top: 10px;width: 100%;box-sizing: border-box;">
@ -288,7 +115,6 @@
</view>
<text style="font-size: 12px;color: #4B4B4B; margin-top: 8px;">邀请新朋友后，您和您的朋友将获得“蔬菜品鉴礼包”。</text>
<!-- <view style="display: flex;flex-direction: row;align-items: center; ">
@ -312,15 +138,10 @@
</view>
<!-- </loading-state> -->
</scroll-view>
</view>
</view>
</template>
@ -444,6 +265,127 @@
</script>
<style>
#page {
display: flex;
flex-direction: column;
height: 100vh;
background: -webkit-linear-gradient(left,#FEA65F,#FB9440);
box-sizing: border-box;
}
/* 顶部 */
.top {
width: 100vw;
/* height: 126.66vw; */
height: 65vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/my_bj.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
/* 顶部-用户信息 */
.top .userinfo{
display: flex;flex-direction: row;align-items: center;margin-top: 25vw; margin-left: 8vw;
}
/* 顶部-用户信息-头像 */
.top .userinfo .head-img{
width: 60px;
height: 60px;
border-radius: 50%;
}
/* 顶部-用户信息-名称手机 */
.top .userinfo .name-mob{
display: flex;
flex-direction: column;
margin-left: 10px;
}
/* 顶部-用户信息-名称手机-文本样式 */
.top .userinfo .name-mob text{
font-size: 16px;color: #fff;
}
/* 视图 */
.view{
background: #F7F7F7;
flex-flow: 1;
height: calc(100vh - 50vw - 48px);
width: 100%;
margin-top: -18vw;
border-radius: 25px;
}
/* 滚动视图 */
.scroll-view{
height: 100%;
width: 100%;
padding: 15px;
border-radius: 25px;
box-sizing: border-box;
}
/* 图标显示行 */
.icon-cow {
display: flex;
flex-direction: column;
border-radius: 10px;
background: #fff;
padding: 12px;
margin-bottom:10px
}
/* 图标显示行-标题 */
.icon-cow .title {
font-size: 15px;
color: #101010;
font-weight: 600;
font-family: sans-serif;
}
/* 图标显示行-图标群 */
.icon-cow .group {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
}
/* 图标显示行-图标群-图标和名称*/
.icon-cow .group .icon-name {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 图标显示行-图标群-图标和名称-图标*/
.icon-cow .group .icon-name .icon {
position: relative;
width: 35px;
height: 35px;
}
/* 图标显示行-图标群-图标和名称-图标-图片*/
.icon-cow .group .icon-name .icon .img{
width: 28px;
height: 28px;
margin-left: 5px;
margin-top: 5px;
}
/* 图标显示行-图标群-图标和名称-图标-数量*/
.icon-cow .group .icon-name .icon .count {
border-radius: 50%;
text-align: center;
background: #f00;
color: #fff;
font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;
}
/* 图标显示行-图标群-图标和名称-图标名称*/
.icon-cow .group .icon-name .name {
font-size:13px;
color: #101010;
margin-top:5px;
}
.sharebtn {
margin-right: -10px;
background: #fff;
@ -459,13 +401,5 @@
}
.top {
width: 100vw;
/* height: 126.66vw; */
height: 65vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/my_bj.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
</style>
Write Preview
Loading…
Cancel
Save