Adam / gulu-vue

Download as
Browse Code »

Commit 5b513503fba717984f49ac62662a06cf3eb5a29e

Authored by BigBoss
1 parent f0cf57997c
Exists in master

验光数据页面

Showing 20 changed files with 264 additions and 23 deletions   Show diff stats
src/components/UniCollapseItem/UniCollapseItem.vue
Diff comments   View file @5b51350
... ... @@ -2,8 +2,10 @@
2 2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
3 3 class="uni-collapse-cell">
4 4 <view class="uni-collapse-cell__title" @click="onClick">
  5 + <view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}">{{iconText}}</view>
5 6 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
6 7 <text class="uni-collapse-cell__title-text">{{ title }}</text>
  8 + <text class="uni-collapse-cell__time-text">{{ time }}</text>
7 9 <!-- #ifdef MP-ALIPAY -->
8 10 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
9 11 class="uni-collapse-cell__title-arrow">
... ... @@ -17,8 +19,7 @@
17 19 </view>
18 20 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
19 21 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper"
20   - :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"
21   - >
  22 + :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">
22 23 <slot />
23 24 </view>
24 25 </view>
... ... @@ -38,6 +39,11 @@
38 39 type: String,
39 40 default: ''
40 41 },
  42 + time: {
  43 + // 列表时间 朱海涛加的，验光数据需要
  44 + type: String,
  45 + default: ''
  46 + },
41 47 name: {
42 48 // 唯一标识符
43 49 type: [Number, String],
... ... @@ -62,11 +68,18 @@
62 68 // 缩略图
63 69 type: String,
64 70 default: ''
  71 + },
  72 + iconText:{
  73 + //名字头像
  74 + type:String,
  75 + default:''
65 76 }
66 77 },
67 78 data() {
68 79 return {
69   - isOpen: false
  80 + isOpen: false,
  81 + background: ''
  82 +
70 83 }
71 84 },
72 85 watch: {
... ... @@ -88,6 +101,17 @@
88 101 }
89 102 }
90 103 },
  104 + computed:{
  105 + //给头像搞个随机背景颜色，验光数据页面需要
  106 + getRandomColor(){
  107 + let r = Math.floor(Math.random()*256);
  108 + let g = Math.floor(Math.random()*256);
  109 + let b = Math.floor(Math.random()*256);
  110 + let color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
  111 + this.background = color
  112 + // return color;
  113 + }
  114 + },
91 115 methods: {
92 116 onClick() {
93 117 if (this.disabled) {
... ... @@ -104,8 +128,8 @@
104 128 this.isOpen = !this.isOpen
105 129 this.collapse.onChange && this.collapse.onChange()
106 130 this.$forceUpdate()
107   - console.log(this.isOpen)
108   - }
  131 + // console.log(this.isOpen)
  132 + },
109 133 }
110 134 }
111 135 </script>
... ... @@ -140,9 +164,9 @@
140 164 }
141 165  
142 166 .uni-collapse-cell--animation {
143   - transition: transform 0s ease;
  167 + transition: transform all 0.3s ease;
144 168 transition-property: transform;
145   - transition-duration: 0s;
  169 + transition-duration: 0.3s;
146 170 transition-timing-function: ease;
147 171 }
148 172  
... ... @@ -162,7 +186,18 @@
162 186 justify-content: space-between;
163 187 align-items: center;
164 188 }
165   -
  189 + .uni-collapse-cell__title-iconText{
  190 + border: 1px solid #FFFFFF;
  191 + height: 50rpx;
  192 + width: 50rpx;
  193 + border-radius: 26rpx;
  194 + // background-color: #47A6F0;
  195 + font-size: 12px;
  196 + color: #FFFFFF;
  197 + line-height: 50rpx;
  198 + text-align: center;
  199 + margin-right: 20rpx;
  200 + }
166 201 .uni-collapse-cell__title:active {
167 202 background-color: #FFFFFF;
168 203 }
... ... @@ -171,18 +206,22 @@
171 206 height: $uni-img-size-base;
172 207 width: $uni-img-size-base;
173 208 margin-right: 10px;
  209 + // height: 50rpx;
  210 + // width: 50rpx;
  211 + // border-radius: 25rpx;
  212 + // border-radius: 25rpx;
174 213 }
175 214  
176 215 .uni-collapse-cell__title-arrow {
177 216 width: 20px;
178 217 height: 20px;
179   - transform: rotate(0deg);
  218 + transform: rotate(-90deg);
180 219 transform-origin: center center;
181 220  
182 221 }
183 222  
184 223 .uni-collapse-cell__title-arrow-active {
185   - transform: rotate(180deg);
  224 + transform: rotate(0deg);
186 225 }
187 226  
188 227 .uni-collapse-cell__title-text {
... ... @@ -197,8 +236,14 @@
197 236 /* #endif */
198 237 overflow: hidden;
199 238 text-overflow: ellipsis;
  239 + font-size: 12px;
  240 + color: #333333;
  241 + }
  242 + .uni-collapse-cell__time-text{
  243 + font-size: 12px;
  244 + color: #999999;
  245 + margin-right: 20rpx;
200 246 }
201   -
202 247 .uni-collapse-cell__content {
203 248 overflow: hidden;
204 249 }
... ...
... ... @@ -5,6 +5,11 @@
5 5 "style" : {
6 6 "navigationBarTitleText" : "商城一览"
7 7 }
  8 + },
  9 + {
  10 + "path" : "pages/addOpticsData/addOpticsData",
  11 + "style" : {
  12 + "navigationBarTitleText" : "验光数据"}
8 13 },
9 14 {
10 15 "path" : "pages/user/user",
... ... @@ -108,11 +113,6 @@
108 113 "navigationBarTitleText" : "镜框选购页"
109 114 }
110 115 }
111   - ,{
112   - "path" : "pages/addOpticsData/addOpticsData",
113   - "style" : {
114   - "navigationBarTitleText" : "验光数据"}
115   - }
116 116 ],
117 117 "globalStyle" : {
118 118 "navigationBarTextStyle" : "black",
... ...
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @5b51350
1 1 <template>
2   - <view>
3   -
  2 + <view class="wrap">
  3 + <view class="header">
  4 + <view class="headerLeft" @click=tapShow(0)>
  5 + <text>如何查看验光单？</text>
  6 + <image src="../../static/dataLook.png" mode="aspectFit"></image>
  7 + </view>
  8 + <view class="headerRight" @click=tapShow(1)>
  9 + <text>如何查看眼镜框架？</text>
  10 + <image src="../../static/glassLook.png" mode="aspectFit"></image>
  11 + </view>
  12 + </view>
  13 + <view class="dataMenu">
  14 + <uni-collapse accordion="true">
  15 + <view class="item" v-for="(loveItem,index) in loveList" :key="index">
  16 + <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
  17 + <view class="loveDataInfo">
  18 + <view class="dataInfoItem">
  19 + <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
  20 + </view>
  21 + <view class="dataInfoItem">
  22 + <text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>
  23 + </view>
  24 + <view class="dataInfoItem">
  25 + <text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>
  26 + </view>
  27 + <view class="dataInfoItem">
  28 + <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
  29 + </view>
  30 + </view>
  31 + </uni-collapse-item>
  32 + </view>
  33 + </uni-collapse>
  34 + </view>
  35 + <view class="footer">
  36 + <button class="btn" type="default">新建验光单</button>
  37 + </view>
4 38 </view>
5 39 </template>
6 40  
7   -<script>
8   - export default {
  41 +<script>
  42 + import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  43 + import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
  44 + // import uniPopup from '@/components/uni-popup/uni-popup.vue'
  45 + import store from '@/store';
  46 + export default {
  47 + components: {UniCollapse,UniCollapseItem},
9 48 data() {
10 49 return {
11 50  
12 51 };
  52 + },
  53 + onLoad: function(option) {
  54 + //获取关心的人列表
  55 + store.dispatch('myLoveList/getLoveList', {
  56 + uid: "1",
  57 + });
  58 + },
  59 + computed:{
  60 + loveList() {
  61 + console.log(this.$store.state.myLoveList.loveList)
  62 + return this.$store.state.myLoveList.loveList || []
  63 + },
  64 + },
  65 + methods:{
  66 + tapShow(item){
  67 + switch(item){
  68 + // 0左边 1右边
  69 + case '0':
  70 +
  71 + break;
  72 + case '1':
  73 +
  74 + break;
  75 + }
  76 + },
  77 + //给时间搞一个nice的格式
  78 + getRightTime(time){
  79 + //如果小于10 则返回'0'+m
  80 + function add(m){return m<10?'0'+m:m}
  81 + const oldTime = (new Date(time)).getTime()
  82 + const year = new Date(oldTime).getFullYear()
  83 + const month = new Date(oldTime).getMonth()+1
  84 + const day = new Date(oldTime).getDate()
  85 + const newTime = add(year)+'-'+add(month)+'-'+add(day)
  86 + return newTime
  87 + },
  88 + getFirstName(name){
  89 + console.log(name.substring(0,1))
  90 + return name.substring(0,1)
  91 + }
13 92 }
14 93 }
15 94 </script>
16 95  
17 96 <style lang="scss">
18   -
  97 + .wrap{
  98 + min-height: 100vh;
  99 + width: 100%;
  100 + background-color: #F2F2F2;
  101 + .header{
  102 + height: 304rpx;
  103 + width: 100%;
  104 + background-color: #FFFFFF;
  105 + display: flex;
  106 + justify-content: space-around;
  107 + align-items: center;
  108 + view{
  109 + height: 210rpx;
  110 + width: 304rpx;
  111 + background: #FDF7F5;
  112 + border-radius: 4px;
  113 + border-radius: 4px;
  114 + display: flex;
  115 + flex-direction: column;
  116 + align-items: center;
  117 + justify-content: center;
  118 + text{
  119 + font-size: 12px;
  120 + color: #333333;
  121 + }
  122 + image{
  123 + height: 144rpx;
  124 + width: 144rpx;
  125 + }
  126 + }
  127 + }
  128 + .dataMenu{
  129 + margin-top: 20rpx;
  130 + box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
  131 + width: 100%;
  132 + background-color: #FFFFFF;
  133 + .item{
  134 + padding: 0 40rpx;
  135 + .loveDataInfo{
  136 + padding: 0 44rpx 0 70rpx;
  137 + display: flex;
  138 + justify-content: space-around;
  139 + flex-direction: column;
  140 + align-items: flex-start;
  141 + .dataInfoItem{
  142 + font-size: 12px;
  143 + color: #333333;
  144 + margin-bottom: 34rpx;
  145 + text{
  146 + font-size: 12px;
  147 + color: #2A2A2A;
  148 + margin-right: 20rpx;
  149 + }
  150 + }
  151 + }
  152 + }
  153 + }
  154 + .footer{
  155 + width: 100%;
  156 + position: fixed;
  157 + bottom: 0;
  158 + left: 0;
  159 + .btn{
  160 + width: 100%;
  161 + height: 112rpx;
  162 + line-height: 112rpx;
  163 + background: #FF6B4A;
  164 + font-size: 16px;
  165 + color: #FFFFFF;
  166 + }
  167 + }
  168 + }
  169 +
19 170 </style>
... ...
src/pages/user/user.vue
Diff comments   View file @5b51350
... ... @@ -12,7 +12,7 @@
12 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
13 13 </view> -->
14 14 </view>
15   - <view class="myOpticsData">
  15 + <view class="myOpticsData" @click="toOpticsData">
16 16 <view class="left">
17 17 <image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>
18 18 <text>验光数据</text>
... ... @@ -182,6 +182,11 @@
182 182 complete: () => {}
183 183 });
184 184 },
  185 + toOpticsData(){
  186 + uni.navigateTo({
  187 + url: `../addOpticsData/addOpticsData`,
  188 + });
  189 + },
185 190 handleScrolltolower(){
186 191 // console.log('usr-my',this.$store.state.user.userInfo)
187 192 this.pagesnum++;
... ...
src/static/dataLook.png
Diff comments   View file @5b51350

6.6 KB
src/static/glassLook.png
Diff comments   View file @5b51350

10 KB
src/static/img/goods/p1.jpg
View file @f0cf579

11.3 KB
src/static/img/goods/p10.jpg
View file @f0cf579

22.6 KB
src/static/img/goods/p11.png
View file @f0cf579

121 KB
src/static/img/goods/p12.png
View file @f0cf579

115 KB
src/static/img/goods/p2.jpg
View file @f0cf579

16.3 KB
src/static/img/goods/p3.jpg
View file @f0cf579

15 KB
src/static/img/goods/p4.jpg
View file @f0cf579

6.55 KB
src/static/img/goods/p5.jpg
View file @f0cf579

29.6 KB
src/static/img/goods/p6.jpg
View file @f0cf579

6.25 KB
src/static/img/goods/p7.jpg
View file @f0cf579

20.1 KB
src/static/img/goods/p8.jpg
View file @f0cf579

20.4 KB
src/static/img/goods/p9.jpg
View file @f0cf579

24.1 KB
src/store/modules/myLoveList.js
Diff comments   View file @5b51350
... ... @@ -0,0 +1,36 @@
  1 +import urlAlias from '../url';
  2 +import request from '../request';
  3 +
  4 +const {
  5 + mylovelist
  6 +} = urlAlias;
  7 +
  8 +const state = {
  9 + loveList: [],
  10 +};
  11 +
  12 +const mutations = {
  13 + INIT: (state, data) => {
  14 + state.loveList = data;
  15 + },
  16 +};
  17 +
  18 +const actions = {
  19 + getLoveList({ commit }, param) {
  20 + request({
  21 + url: mylovelist,
  22 + data: param,
  23 + success: (res) => {
  24 + // console.log(res.data);
  25 + commit("INIT", res.data.data);
  26 + },
  27 + })
  28 + }
  29 +}
  30 +
  31 +export default {
  32 + namespaced: true,
  33 + state,
  34 + mutations,
  35 + actions,
  36 +}
0 37 \ No newline at end of file
... ...
... ... @@ -28,7 +28,11 @@ const urlAlias = {
28 28 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
29 29  
30 30 // 镜框选购页
31   - detailStandardList: '/app/prod/read', //获取商品的详细信息
  31 + detailStandardList: '/app/prod/read', //获取商品的详细信息
  32 +
  33 + //用户数据
  34 + mylovelist:'/app/user/mylovelist',//关心的人的数据
  35 + myloveadd:'/app/user/myloveadd'//添加关心的人
32 36  
33 37 }
34 38  
... ...