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
1 <template> 1 <template>
2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" 2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
3 class="uni-collapse-cell"> 3 class="uni-collapse-cell">
4 <view class="uni-collapse-cell__title" @click="onClick"> 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 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> 6 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
6 <text class="uni-collapse-cell__title-text">{{ title }}</text> 7 <text class="uni-collapse-cell__title-text">{{ title }}</text>
8 <text class="uni-collapse-cell__time-text">{{ time }}</text>
7 <!-- #ifdef MP-ALIPAY --> 9 <!-- #ifdef MP-ALIPAY -->
8 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 10 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
9 class="uni-collapse-cell__title-arrow"> 11 class="uni-collapse-cell__title-arrow">
10 <uni-icons color="#bbb" size="20" type="arrowdown" /> 12 <uni-icons color="#bbb" size="20" type="arrowdown" />
11 </view> 13 </view>
12 <!-- #endif --> 14 <!-- #endif -->
13 <!-- #ifndef MP-ALIPAY --> 15 <!-- #ifndef MP-ALIPAY -->
14 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 16 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
15 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" /> 17 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
16 <!-- #endif --> 18 <!-- #endif -->
17 </view> 19 </view>
18 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content"> 20 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
19 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" 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%)'}" 22 :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">
21 >
22 <slot /> 23 <slot />
23 </view> 24 </view>
24 </view> 25 </view>
25 </view> 26 </view>
26 </template> 27 </template>
27 28
28 <script> 29 <script>
29 import UniIcons from '../UniIcons/UniIcons.vue' 30 import UniIcons from '../UniIcons/UniIcons.vue'
30 export default { 31 export default {
31 name: 'UniCollapseItem', 32 name: 'UniCollapseItem',
32 components: { 33 components: {
33 UniIcons 34 UniIcons
34 }, 35 },
35 props: { 36 props: {
36 title: { 37 title: {
37 // 列表标题 38 // 列表标题
38 type: String, 39 type: String,
39 default: '' 40 default: ''
40 }, 41 },
42 time: {
43 // 列表时间 朱海涛加的，验光数据需要
44 type: String,
45 default: ''
46 },
41 name: { 47 name: {
42 // 唯一标识符 48 // 唯一标识符
43 type: [Number, String], 49 type: [Number, String],
44 default: 0 50 default: 0
45 }, 51 },
46 disabled: { 52 disabled: {
47 // 是否禁用 53 // 是否禁用
48 type: Boolean, 54 type: Boolean,
49 default: false 55 default: false
50 }, 56 },
51 showAnimation: { 57 showAnimation: {
52 // 是否显示动画 58 // 是否显示动画
53 type: Boolean, 59 type: Boolean,
54 default: false 60 default: false
55 }, 61 },
56 open: { 62 open: {
57 // 是否展开 63 // 是否展开
58 type: Boolean, 64 type: Boolean,
59 default: false 65 default: false
60 }, 66 },
61 thumb: { 67 thumb: {
62 // 缩略图 68 // 缩略图
63 type: String, 69 type: String,
64 default: '' 70 default: ''
71 },
72 iconText:{
73 //名字头像
74 type:String,
75 default:''
65 } 76 }
66 }, 77 },
67 data() { 78 data() {
68 return { 79 return {
69 isOpen: false 80 isOpen: false,
81 background: ''
82
70 } 83 }
71 }, 84 },
72 watch: { 85 watch: {
73 open(val) { 86 open(val) {
74 this.isOpen = val 87 this.isOpen = val
75 } 88 }
76 }, 89 },
77 inject: ['collapse'], 90 inject: ['collapse'],
78 created() { 91 created() {
79 this.isOpen = this.open 92 this.isOpen = this.open
80 this.nameSync = this.name ? this.name : this.collapse.childrens.length 93 this.nameSync = this.name ? this.name : this.collapse.childrens.length
81 this.collapse.childrens.push(this) 94 this.collapse.childrens.push(this)
82 if (String(this.collapse.accordion) === 'true') { 95 if (String(this.collapse.accordion) === 'true') {
83 if (this.isOpen) { 96 if (this.isOpen) {
84 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2] 97 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
85 if (lastEl) { 98 if (lastEl) {
86 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false 99 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
87 } 100 }
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 methods: { 115 methods: {
92 onClick() { 116 onClick() {
93 if (this.disabled) { 117 if (this.disabled) {
94 return 118 return
95 } 119 }
96 if (String(this.collapse.accordion) === 'true') { 120 if (String(this.collapse.accordion) === 'true') {
97 this.collapse.childrens.forEach(vm => { 121 this.collapse.childrens.forEach(vm => {
98 if (vm === this) { 122 if (vm === this) {
99 return 123 return
100 } 124 }
101 vm.isOpen = false 125 vm.isOpen = false
102 }) 126 })
103 } 127 }
104 this.isOpen = !this.isOpen 128 this.isOpen = !this.isOpen
105 this.collapse.onChange && this.collapse.onChange() 129 this.collapse.onChange && this.collapse.onChange()
106 this.$forceUpdate() 130 this.$forceUpdate()
107 console.log(this.isOpen) 131 // console.log(this.isOpen)
108 } 132 },
109 } 133 }
110 } 134 }
111 </script> 135 </script>
112 136
113 <style lang="scss" scoped> 137 <style lang="scss" scoped>
114 @import '@/uni.scss'; 138 @import '@/uni.scss';
115 139
116 .uni-collapse-cell { 140 .uni-collapse-cell {
117 flex-direction: column; 141 flex-direction: column;
118 border-color: #FFFFFF; 142 border-color: #FFFFFF;
119 border-bottom-width: 1px; 143 border-bottom-width: 1px;
120 border-bottom-style: solid; 144 border-bottom-style: solid;
121 } 145 }
122 146
123 147
124 .uni-collapse-cell--hover { 148 .uni-collapse-cell--hover {
125 background-color: #FFFFFF; 149 background-color: #FFFFFF;
126 } 150 }
127 151
128 .uni-collapse-cell--open { 152 .uni-collapse-cell--open {
129 background-color: #FFFFFF; 153 background-color: #FFFFFF;
130 } 154 }
131 155
132 .uni-collapse-cell--disabled { 156 .uni-collapse-cell--disabled {
133 background-color: #FFFFFF; 157 background-color: #FFFFFF;
134 // opacity: 0.3; 158 // opacity: 0.3;
135 } 159 }
136 160
137 161
138 .uni-collapse-cell--hide { 162 .uni-collapse-cell--hide {
139 height: 48px; 163 height: 48px;
140 } 164 }
141 165
142 .uni-collapse-cell--animation { 166 .uni-collapse-cell--animation {
143 transition: transform 0s ease; 167 transition: transform all 0.3s ease;
144 transition-property: transform; 168 transition-property: transform;
145 transition-duration: 0s; 169 transition-duration: 0.3s;
146 transition-timing-function: ease; 170 transition-timing-function: ease;
147 } 171 }
148 172
149 .uni-collapse-cell__title { 173 .uni-collapse-cell__title {
150 // padding: 12px 12px; 174 // padding: 12px 12px;
151 font-size: 16px; 175 font-size: 16px;
152 color: #333333; 176 color: #333333;
153 position: relative; 177 position: relative;
154 /* #ifndef APP-NVUE */ 178 /* #ifndef APP-NVUE */
155 display: flex; 179 display: flex;
156 width: 100%; 180 width: 100%;
157 box-sizing: border-box; 181 box-sizing: border-box;
158 /* #endif */ 182 /* #endif */
159 height: 48px; 183 height: 48px;
160 line-height: 24px; 184 line-height: 24px;
161 flex-direction: row; 185 flex-direction: row;
162 justify-content: space-between; 186 justify-content: space-between;
163 align-items: center; 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 .uni-collapse-cell__title:active { 201 .uni-collapse-cell__title:active {
167 background-color: #FFFFFF; 202 background-color: #FFFFFF;
168 } 203 }
169 204
170 .uni-collapse-cell__title-img { 205 .uni-collapse-cell__title-img {
171 height: $uni-img-size-base; 206 height: $uni-img-size-base;
172 width: $uni-img-size-base; 207 width: $uni-img-size-base;
173 margin-right: 10px; 208 margin-right: 10px;
209 // height: 50rpx;
210 // width: 50rpx;
211 // border-radius: 25rpx;
212 // border-radius: 25rpx;
174 } 213 }
175 214
176 .uni-collapse-cell__title-arrow { 215 .uni-collapse-cell__title-arrow {
177 width: 20px; 216 width: 20px;
178 height: 20px; 217 height: 20px;
179 transform: rotate(0deg); 218 transform: rotate(-90deg);
180 transform-origin: center center; 219 transform-origin: center center;
181 220
182 } 221 }
183 222
184 .uni-collapse-cell__title-arrow-active { 223 .uni-collapse-cell__title-arrow-active {
185 transform: rotate(180deg); 224 transform: rotate(0deg);
186 } 225 }
187 226
188 .uni-collapse-cell__title-text { 227 .uni-collapse-cell__title-text {
189 flex: 1; 228 flex: 1;
190 font-size: $uni-font-size-base; 229 font-size: $uni-font-size-base;
191 /* #ifndef APP-NVUE */ 230 /* #ifndef APP-NVUE */
192 white-space: nowrap; 231 white-space: nowrap;
193 color: inherit; 232 color: inherit;
194 /* #endif */ 233 /* #endif */
195 /* #ifdef APP-NVUE */ 234 /* #ifdef APP-NVUE */
196 lines: 1; 235 lines: 1;
197 /* #endif */ 236 /* #endif */
198 overflow: hidden; 237 overflow: hidden;
199 text-overflow: ellipsis; 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 .uni-collapse-cell__content { 247 .uni-collapse-cell__content {
203 overflow: hidden; 248 overflow: hidden;
204 } 249 }
205 250
206 .uni-collapse-cell__wrapper { 251 .uni-collapse-cell__wrapper {
207 /* #ifndef APP-NVUE */ 252 /* #ifndef APP-NVUE */
208 display: flex; 253 display: flex;
209 /* #endif */ 254 /* #endif */
210 flex-direction: column; 255 flex-direction: column;
211 } 256 }
212 257
213 .uni-collapse-cell__content--hide { 258 .uni-collapse-cell__content--hide {
214 // height: 0px; 259 // height: 0px;
215 // line-height: 0px; 260 // line-height: 0px;
216 } 261 }
1 { 1 {
2 "pages" : [ 2 "pages" : [
3 { 3 {
4 "path" : "pages/index/index", 4 "path" : "pages/index/index",
5 "style" : { 5 "style" : {
6 "navigationBarTitleText" : "商城一览" 6 "navigationBarTitleText" : "商城一览"
7 } 7 }
8 },
9 {
10 "path" : "pages/addOpticsData/addOpticsData",
11 "style" : {
12 "navigationBarTitleText" : "验光数据"}
8 }, 13 },
9 { 14 {
10 "path" : "pages/user/user", 15 "path" : "pages/user/user",
11 "style" : { 16 "style" : {
12 "navigationBarTitleText" : "我的" 17 "navigationBarTitleText" : "我的"
13 } 18 }
14 }, 19 },
15 { 20 {
16 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", 21 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
17 "style" : { 22 "style" : {
18 "navigationBarTitleText" : "镜片名称名称" 23 "navigationBarTitleText" : "镜片名称名称"
19 } 24 }
20 }, 25 },
21 { 26 {
22 "path" : "pages/purchaseLenses/purchaseLenses", 27 "path" : "pages/purchaseLenses/purchaseLenses",
23 "style" : { 28 "style" : {
24 "navigationBarTitleText" : "产品选购" 29 "navigationBarTitleText" : "产品选购"
25 } 30 }
26 }, 31 },
27 { 32 {
28 "path" : "pages/lensDetails/lensDetails", 33 "path" : "pages/lensDetails/lensDetails",
29 "style" : { 34 "style" : {
30 "navigationBarTitleText" : "产品详情" 35 "navigationBarTitleText" : "产品详情"
31 } 36 }
32 }, 37 },
33 { 38 {
34 "path" : "pages/myOrderPaying/myOrderPaying", 39 "path" : "pages/myOrderPaying/myOrderPaying",
35 "style" : { 40 "style" : {
36 "navigationBarTitleText" : "我的订单" 41 "navigationBarTitleText" : "我的订单"
37 } 42 }
38 }, 43 },
39 { 44 {
40 "path" : "pages/myOrder/myOrder", 45 "path" : "pages/myOrder/myOrder",
41 "style" : { 46 "style" : {
42 "navigationBarTitleText" : "我的订单" 47 "navigationBarTitleText" : "我的订单"
43 } 48 }
44 }, 49 },
45 { 50 {
46 "path" : "pages/cart/cart", 51 "path" : "pages/cart/cart",
47 "style" : { 52 "style" : {
48 "navigationBarTitleText" : "购物车" 53 "navigationBarTitleText" : "购物车"
49 } 54 }
50 }, 55 },
51 { 56 {
52 "path" : "pages/frameDetail/frameDetail", 57 "path" : "pages/frameDetail/frameDetail",
53 "style" : { 58 "style" : {
54 "navigationBarTitleText" : "产品详情" 59 "navigationBarTitleText" : "产品详情"
55 } 60 }
56 }, 61 },
57 { 62 {
58 "path" : "pages/refundProgress/refundProgress", 63 "path" : "pages/refundProgress/refundProgress",
59 "style" : { 64 "style" : {
60 "navigationBarTitleText" : "申请退款" 65 "navigationBarTitleText" : "申请退款"
61 } 66 }
62 }, 67 },
63 { 68 {
64 "path" : "pages/addAddress/addAddress", 69 "path" : "pages/addAddress/addAddress",
65 "style" : { 70 "style" : {
66 "navigationBarTitleText" : "新增地址" 71 "navigationBarTitleText" : "新增地址"
67 } 72 }
68 }, 73 },
69 { 74 {
70 "path" : "pages/confirmOrder/confirmOrder", 75 "path" : "pages/confirmOrder/confirmOrder",
71 "style" : { 76 "style" : {
72 "navigationBarTitleText" : "确认订单" 77 "navigationBarTitleText" : "确认订单"
73 } 78 }
74 }, 79 },
75 { 80 {
76 "path" : "pages/refundment/refundWays", 81 "path" : "pages/refundment/refundWays",
77 "style" : { 82 "style" : {
78 "navigationBarTitleText" : "退款方式" 83 "navigationBarTitleText" : "退款方式"
79 } 84 }
80 }, 85 },
81 { 86 {
82 "path" : "pages/refundment/refundment", 87 "path" : "pages/refundment/refundment",
83 "style" : { 88 "style" : {
84 "navigationBarTitleText" : "申请退款" 89 "navigationBarTitleText" : "申请退款"
85 } 90 }
86 }, 91 },
87 { 92 {
88 "path" : "pages/predelivery/predelivery", 93 "path" : "pages/predelivery/predelivery",
89 "style" : { 94 "style" : {
90 "navigationBarTitleText" : "待发货" 95 "navigationBarTitleText" : "待发货"
91 } 96 }
92 }, 97 },
93 { 98 {
94 "path" : "pages/customerService/customerService", 99 "path" : "pages/customerService/customerService",
95 "style" : { 100 "style" : {
96 "navigationBarTitleText" : "在线客服" 101 "navigationBarTitleText" : "在线客服"
97 } 102 }
98 }, 103 },
99 { 104 {
100 "path" : "pages/detailStandard/detailStandard_sun", 105 "path" : "pages/detailStandard/detailStandard_sun",
101 "style" : { 106 "style" : {
102 "navigationBarTitleText" : "太阳镜选购页" 107 "navigationBarTitleText" : "太阳镜选购页"
103 } 108 }
104 }, 109 },
105 { 110 {
106 "path" : "pages/detailStandard/detailStandard_k", 111 "path" : "pages/detailStandard/detailStandard_k",
107 "style" : { 112 "style" : {
108 "navigationBarTitleText" : "镜框选购页" 113 "navigationBarTitleText" : "镜框选购页"
109 } 114 }
110 } 115 }
111 ,{
112 "path" : "pages/addOpticsData/addOpticsData",
113 "style" : {
114 "navigationBarTitleText" : "验光数据"}
115 }
116 ], 116 ],
117 "globalStyle" : { 117 "globalStyle" : {
118 "navigationBarTextStyle" : "black", 118 "navigationBarTextStyle" : "black",
119 "navigationBarTitleText" : "uni-app", 119 "navigationBarTitleText" : "uni-app",
120 "navigationBarBackgroundColor" : "#F8F8F8", 120 "navigationBarBackgroundColor" : "#F8F8F8",
121 "backgroundColor" : "#F8F8F8" 121 "backgroundColor" : "#F8F8F8"
122 }, 122 },
123 "tabBar" : { 123 "tabBar" : {
124 "color" : "#C0C4CC", 124 "color" : "#C0C4CC",
125 "selectedColor" : "#fa436a", 125 "selectedColor" : "#fa436a",
126 "borderStyle" : "black", 126 "borderStyle" : "black",
127 "backgroundColor" : "#ffffff", 127 "backgroundColor" : "#ffffff",
128 "list" : [ 128 "list" : [
129 { 129 {
130 "pagePath" : "pages/index/index", 130 "pagePath" : "pages/index/index",
131 "iconPath" : "static/tab-home.png", 131 "iconPath" : "static/tab-home.png",
132 "selectedIconPath" : "static/tab-home-current.png", 132 "selectedIconPath" : "static/tab-home-current.png",
133 "text" : "首页" 133 "text" : "首页"
134 }, 134 },
135 { 135 {
136 "pagePath" : "pages/cart/cart", 136 "pagePath" : "pages/cart/cart",
137 "iconPath" : "static/tab-cart.png", 137 "iconPath" : "static/tab-cart.png",
138 "selectedIconPath" : "static/tab-cart-current.png", 138 "selectedIconPath" : "static/tab-cart-current.png",
139 "text" : "购物车" 139 "text" : "购物车"
140 }, 140 },
141 { 141 {
142 "pagePath" : "pages/user/user", 142 "pagePath" : "pages/user/user",
143 "iconPath" : "static/tab-my.png", 143 "iconPath" : "static/tab-my.png",
144 "selectedIconPath" : "static/tab-my-current.png", 144 "selectedIconPath" : "static/tab-my-current.png",
145 "text" : "我的" 145 "text" : "我的"
146 } 146 }
147 ] 147 ]
148 }, 148 },
149 "condition" : { 149 "condition" : {
150 //模式配置，仅开发期间生效 150 //模式配置，仅开发期间生效
151 "current" : 0, //当前激活的模式(list 的索引项) 151 "current" : 0, //当前激活的模式(list 的索引项)
152 "list" : [ 152 "list" : [
153 { 153 {
154 "name" : "", //模式名称 154 "name" : "", //模式名称
155 "path" : "", //启动页面，必选 155 "path" : "", //启动页面，必选
156 "query" : "" //启动参数，在页面的onLoad函数里面得到 156 "query" : "" //启动参数，在页面的onLoad函数里面得到
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @5b51350
1 <template> 1 <template>
2 <view> 2 <view class="wrap">
3 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 </view> 38 </view>
5 </template> 39 </template>
6 40
7 <script> 41 <script>
8 export default { 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 data() { 48 data() {
10 return { 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 </script> 94 </script>
16 95
17 <style lang="scss"> 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 </style> 170 </style>
20 171
src/pages/user/user.vue
Diff comments   View file @5b51350
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view v-if="isAuth" class="content"> 3 <view v-if="isAuth" class="content">
4 <view class="userInfo"> 4 <view class="userInfo">
5 <view class="info"> 5 <view class="info">
6 <image :src="headerphoto" mode="aspectFill"></image> 6 <image :src="headerphoto" mode="aspectFill"></image>
7 <view class="infoText"> 7 <view class="infoText">
8 <text class="userName">{{nickName}}</text> 8 <text class="userName">{{nickName}}</text>
9 </view> 9 </view>
10 </view> 10 </view>
11 <!-- <view class="service"> 11 <!-- <view class="service">
12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image> 12 <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
13 </view> --> 13 </view> -->
14 </view> 14 </view>
15 <view class="myOpticsData"> 15 <view class="myOpticsData" @click="toOpticsData">
16 <view class="left"> 16 <view class="left">
17 <image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image> 17 <image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>
18 <text>验光数据</text> 18 <text>验光数据</text>
19 </view> 19 </view>
20 <image src="../../static/right.png" mode="aspectFit"></image> 20 <image src="../../static/right.png" mode="aspectFit"></image>
21 </view> 21 </view>
22 <view class="myOrder"> 22 <view class="myOrder">
23 <view class="orderHeader"> 23 <view class="orderHeader">
24 <text>全部订单</text> 24 <text>全部订单</text>
25 <view class="btn" @click="toMyOrder('10')"> 25 <view class="btn" @click="toMyOrder('10')">
26 全部 26 全部
27 <image src="../../static/right.png" mode="aspectFit"></image> 27 <image src="../../static/right.png" mode="aspectFit"></image>
28 </view> 28 </view>
29 </view> 29 </view>
30 <view class="orderBody"> 30 <view class="orderBody">
31 <view class="item waitPay" @click="toMyOrder('0')"> 31 <view class="item waitPay" @click="toMyOrder('0')">
32 <image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image> 32 <image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image>
33 <text>待付款</text> 33 <text>待付款</text>
34 </view> 34 </view>
35 <view class="item waitDeliver" @click="toMyOrder('1')" > 35 <view class="item waitDeliver" @click="toMyOrder('1')" >
36 <image src="../../static/img/user/waitPay.png" mode="aspectFit"></image> 36 <image src="../../static/img/user/waitPay.png" mode="aspectFit"></image>
37 <text>待收货</text> 37 <text>待收货</text>
38 </view> 38 </view>
39 <view class="item waitReceive" @click="toMyOrder('2')"> 39 <view class="item waitReceive" @click="toMyOrder('2')">
40 <image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image> 40 <image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image>
41 <text>已完成</text> 41 <text>已完成</text>
42 </view> 42 </view>
43 <!-- <view class="item service" @click="toMyOrder('3')"> 43 <!-- <view class="item service" @click="toMyOrder('3')">
44 <image src="../../static/img/user/refound.png" mode="aspectFit"></image> 44 <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
45 <text>已评价</text> 45 <text>已评价</text>
46 </view> --> 46 </view> -->
47 </view> 47 </view>
48 </view> 48 </view>
49 <view class="someItem"> 49 <view class="someItem">
50 <!-- <view class="item"> 50 <!-- <view class="item">
51 <view class="left"> 51 <view class="left">
52 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image> 52 <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
53 <text>推广记录与收益</text> 53 <text>推广记录与收益</text>
54 </view> 54 </view>
55 <image src="../../static/right.png" mode="aspectFit"></image> 55 <image src="../../static/right.png" mode="aspectFit"></image>
56 </view> --> 56 </view> -->
57 <view class="item"> 57 <view class="item">
58 <view class="left"> 58 <view class="left">
59 <image src="../../static/img/user/introduce.png" mode="aspectFit"></image> 59 <image src="../../static/img/user/introduce.png" mode="aspectFit"></image>
60 <text>系统介绍</text> 60 <text>系统介绍</text>
61 </view> 61 </view>
62 <image src="../../static/right.png" mode="aspectFit"></image> 62 <image src="../../static/right.png" mode="aspectFit"></image>
63 </view> 63 </view>
64 <view class="item"> 64 <view class="item">
65 <view class="left"> 65 <view class="left">
66 <image src="../../static/img/user/joinUs.png" mode="aspectFit"></image> 66 <image src="../../static/img/user/joinUs.png" mode="aspectFit"></image>
67 <text>加入我们</text> 67 <text>加入我们</text>
68 </view> 68 </view>
69 <image src="../../static/right.png" mode="aspectFit"></image> 69 <image src="../../static/right.png" mode="aspectFit"></image>
70 </view> 70 </view>
71 <view class="item"> 71 <view class="item">
72 <view class="left"> 72 <view class="left">
73 <image src="../../static/img/user/service.png" mode="aspectFit"></image> 73 <image src="../../static/img/user/service.png" mode="aspectFit"></image>
74 <text>联系客服</text> 74 <text>联系客服</text>
75 </view> 75 </view>
76 <image src="../../static/right.png" mode="aspectFit"></image> 76 <image src="../../static/right.png" mode="aspectFit"></image>
77 </view> 77 </view>
78 </view> 78 </view>
79 <view class="recommend"> 79 <view class="recommend">
80 <view class="title"> 80 <view class="title">
81 <view class="line"></view> 81 <view class="line"></view>
82 <view class="text">精选推荐</view> 82 <view class="text">精选推荐</view>
83 <view class="line"></view> 83 <view class="line"></view>
84 </view> 84 </view>
85 <!-- 商品列表 --> 85 <!-- 商品列表 -->
86 <view class="goods-list"> 86 <view class="goods-list">
87 <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list"> 87 <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list">
88 <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id"> 88 <block v-for="(goods) in userRecommandList " :key="goods.list.sk_id">
89 <view class="product" v-for="(item) in goods.list" :key="item.sk_id"> 89 <view class="product" v-for="(item) in goods.list" :key="item.sk_id">
90 <Card :goods="item" ></Card> 90 <Card :goods="item" ></Card>
91 </view> 91 </view>
92 </block> 92 </block>
93 </scroll-view> 93 </scroll-view>
94 <view class="loading-text">{{loadingText}}</view> 94 <view class="loading-text">{{loadingText}}</view>
95 </view> 95 </view>
96 </view> 96 </view>
97 </view> 97 </view>
98 <view v-else class="auth"> 98 <view v-else class="auth">
99 <view class="icon"></view> 99 <view class="icon"></view>
100 <view class="divider"></view> 100 <view class="divider"></view>
101 <view class="title">申请获取以下权限</view> 101 <view class="title">申请获取以下权限</view>
102 <view class="text">获得您的公开信息(昵称、头像等)</view> 102 <view class="text">获得您的公开信息(昵称、头像等)</view>
103 <button 103 <button
104 type="primary" 104 type="primary"
105 open-type="getUserInfo" 105 open-type="getUserInfo"
106 @getuserinfo="onGotUserInfo" 106 @getuserinfo="onGotUserInfo"
107 >授权登陆</button> 107 >授权登陆</button>
108 </view> 108 </view>
109 </view> 109 </view>
110 </template> 110 </template>
111 111
112 <script> 112 <script>
113 import Card from "@/components/CommodityCard/CommodityCard.vue"; 113 import Card from "@/components/CommodityCard/CommodityCard.vue";
114 import store from '@/store'; 114 import store from '@/store';
115 115
116 export default { 116 export default {
117 components: { 117 components: {
118 'Card':Card 118 'Card':Card
119 }, 119 },
120 data() { 120 data() {
121 return { 121 return {
122 isAuth: true, // 是否显示授权页面, 122 isAuth: true, // 是否显示授权页面,
123 pagesnum:1 // 分页请求初始值 123 pagesnum:1 // 分页请求初始值
124 } 124 }
125 }, 125 },
126 onLoad() { 126 onLoad() {
127 // 判断是否授权 127 // 判断是否授权
128 uni.getSetting({ 128 uni.getSetting({
129 success(res) { 129 success(res) {
130 console.log('authSetting',res.authSetting) 130 console.log('authSetting',res.authSetting)
131 if(res.authSetting['scope.userInfo'] === true) { 131 if(res.authSetting['scope.userInfo'] === true) {
132 this.isAuth = true 132 this.isAuth = true
133 } else { 133 } else {
134 this.isAuth = false 134 this.isAuth = false
135 } 135 }
136 } 136 }
137 }) 137 })
138 138
139 }, 139 },
140 computed: { 140 computed: {
141 nickName() { 141 nickName() {
142 console.log('nickName', this.$store.state.user.userInfo) 142 console.log('nickName', this.$store.state.user.userInfo)
143 return this.$store.state.user.userInfo.nickName; 143 return this.$store.state.user.userInfo.nickName;
144 }, 144 },
145 headerphoto() { 145 headerphoto() {
146 return this.$store.state.user.userInfo.headerphoto; 146 return this.$store.state.user.userInfo.headerphoto;
147 }, 147 },
148 userRecommandList() { 148 userRecommandList() {
149 console.log('recommandList', this.$store.state.userRecommand.recommandList); 149 console.log('recommandList', this.$store.state.userRecommand.recommandList);
150 return this.$store.state.userRecommand.recommandList; 150 return this.$store.state.userRecommand.recommandList;
151 } 151 }
152 }, 152 },
153 onLoad:function(){ 153 onLoad:function(){
154 console.log('usr-my',this.$store.state.user.userInfo) 154 console.log('usr-my',this.$store.state.user.userInfo)
155 155
156 store.dispatch('userRecommand/getRecommandList', { 156 store.dispatch('userRecommand/getRecommandList', {
157 // uid:468, 157 // uid:468,
158 uid: this.$store.state.user.userInfo.uid, 158 uid: this.$store.state.user.userInfo.uid,
159 // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4", 159 // openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4",
160 openid:this.$store.state.user.userInfo.openid, 160 openid:this.$store.state.user.userInfo.openid,
161 page: this.pagesnum 161 page: this.pagesnum
162 }); 162 });
163 }, 163 },
164 164
165 methods: { 165 methods: {
166 // 授权 166 // 授权
167 onGotUserInfo(e) { 167 onGotUserInfo(e) {
168 console.log('anthInfo', e); 168 console.log('anthInfo', e);
169 if(e.detail.errMsg == 'getUserInfo:ok') { 169 if(e.detail.errMsg == 'getUserInfo:ok') {
170 const { fromInfo } = this.$store.state.user; 170 const { fromInfo } = this.$store.state.user;
171 console.log('=====la', fromInfo) 171 console.log('=====la', fromInfo)
172 // 用户授权成功 172 // 用户授权成功
173 store.dispatch('user/getUserInfo', fromInfo); 173 store.dispatch('user/getUserInfo', fromInfo);
174 this.isAuth = true 174 this.isAuth = true
175 } 175 }
176 }, 176 },
177 toMyOrder(status){ 177 toMyOrder(status){
178 uni.navigateTo({ 178 uni.navigateTo({
179 url: `../myOrder/myOrder?status=`+status, 179 url: `../myOrder/myOrder?status=`+status,
180 success: res => {}, 180 success: res => {},
181 fail: () => {}, 181 fail: () => {},
182 complete: () => {} 182 complete: () => {}
183 }); 183 });
184 }, 184 },
185 toOpticsData(){
186 uni.navigateTo({
187 url: `../addOpticsData/addOpticsData`,
188 });
189 },
185 handleScrolltolower(){ 190 handleScrolltolower(){
186 // console.log('usr-my',this.$store.state.user.userInfo) 191 // console.log('usr-my',this.$store.state.user.userInfo)
187 this.pagesnum++; 192 this.pagesnum++;
188 store.dispatch('userRecommand/getRecommandList', { 193 store.dispatch('userRecommand/getRecommandList', {
189 uid: this.$store.state.user.userInfo.uid, 194 uid: this.$store.state.user.userInfo.uid,
190 openid:this.$store.state.user.userInfo.openid, 195 openid:this.$store.state.user.userInfo.openid,
191 page: this.pagesnum 196 page: this.pagesnum
192 }); 197 });
193 } 198 }
194 } 199 }
195 } 200 }
196 </script> 201 </script>
197 202
198 <style lang="scss"> 203 <style lang="scss">
199 .warp{ 204 .warp{
200 font-size: 24rpx; 205 font-size: 24rpx;
201 background-color: #f2f2f2; 206 background-color: #f2f2f2;
202 height: 100vh; 207 height: 100vh;
203 } 208 }
204 .content { 209 .content {
205 display: flex; 210 display: flex;
206 flex-direction: column; 211 flex-direction: column;
207 align-items: center; 212 align-items: center;
208 justify-content: center; 213 justify-content: center;
209 background-color: #F2F2F2; 214 background-color: #F2F2F2;
210 } 215 }
211 .userInfo{ 216 .userInfo{
212 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); 217 background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
213 width: 100%; 218 width: 100%;
214 height: 240rpx; 219 height: 240rpx;
215 color: #FFFFFF; 220 color: #FFFFFF;
216 padding: 60rpx 82rpx 80rpx 44rpx; 221 padding: 60rpx 82rpx 80rpx 44rpx;
217 box-sizing: border-box; 222 box-sizing: border-box;
218 display: flex; 223 display: flex;
219 flex-direction: row; 224 flex-direction: row;
220 justify-content: space-between; 225 justify-content: space-between;
221 align-items: flex-start; 226 align-items: flex-start;
222 .info{ 227 .info{
223 display: flex; 228 display: flex;
224 flex-direction: row; 229 flex-direction: row;
225 justify-content: space-between; 230 justify-content: space-between;
226 align-items: center; 231 align-items: center;
227 image{ 232 image{
228 border-radius: 50rpx; 233 border-radius: 50rpx;
229 height: 100rpx ; 234 height: 100rpx ;
230 width: 100rpx; 235 width: 100rpx;
231 margin-right: 40rpx; 236 margin-right: 40rpx;
232 } 237 }
233 .infoText{ 238 .infoText{
234 display: flex; 239 display: flex;
235 flex-direction: column; 240 flex-direction: column;
236 justify-content: space-between; 241 justify-content: space-between;
237 align-items: flex-scetart; 242 align-items: flex-scetart;
238 .userName{ 243 .userName{
239 font-size: 18px; 244 font-size: 18px;
240 color: #FFFFFF; 245 color: #FFFFFF;
241 margin-bottom: 8rpx; 246 margin-bottom: 8rpx;
242 } 247 }
243 .nickName{ 248 .nickName{
244 font-size: 12px; 249 font-size: 12px;
245 color: #FFFFFF; 250 color: #FFFFFF;
246 } 251 }
247 } 252 }
248 } 253 }
249 // .service{ 254 // .service{
250 // margin-top: 20rpx; 255 // margin-top: 20rpx;
251 // image{ 256 // image{
252 // height: 36rpx; 257 // height: 36rpx;
253 // width: 36rpx; 258 // width: 36rpx;
254 // } 259 // }
255 // } 260 // }
256 } 261 }
257 .myOpticsData{ 262 .myOpticsData{
258 width: 670rpx; 263 width: 670rpx;
259 height: 120rpx; 264 height: 120rpx;
260 background-color: #FFFFFF; 265 background-color: #FFFFFF;
261 border-radius: 6px; 266 border-radius: 6px;
262 box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10); 267 box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10);
263 position: relative; 268 position: relative;
264 bottom: 44rpx; 269 bottom: 44rpx;
265 padding: 40rpx; 270 padding: 40rpx;
266 box-sizing: border-box; 271 box-sizing: border-box;
267 display: flex; 272 display: flex;
268 justify-content: space-between; 273 justify-content: space-between;
269 align-items: center; 274 align-items: center;
270 .left{ 275 .left{
271 font-size: 14px; 276 font-size: 14px;
272 color: #333333; 277 color: #333333;
273 display: flex; 278 display: flex;
274 align-items: center; 279 align-items: center;
275 image{ 280 image{
276 margin-right: 32rpx; 281 margin-right: 32rpx;
277 width: 30rpx; 282 width: 30rpx;
278 height: 34rpx; 283 height: 34rpx;
279 } 284 }
280 } 285 }
281 image{ 286 image{
282 height: 16px; 287 height: 16px;
283 width: 8px; 288 width: 8px;
284 } 289 }
285 } 290 }
286 .myOrder{ 291 .myOrder{
287 width: 100%; 292 width: 100%;
288 height: 296rpx; 293 height: 296rpx;
289 // margin-top: 116rpx; 294 // margin-top: 116rpx;
290 margin-bottom: 20rpx; 295 margin-bottom: 20rpx;
291 padding: 0 40rpx; 296 padding: 0 40rpx;
292 box-sizing: border-box; 297 box-sizing: border-box;
293 background: #FFFFFF; 298 background: #FFFFFF;
294 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 299 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
295 border-radius: 6px; 300 border-radius: 6px;
296 border-radius: 6px; 301 border-radius: 6px;
297 display: flex; 302 display: flex;
298 flex-direction: column; 303 flex-direction: column;
299 justify-content: space-around; 304 justify-content: space-around;
300 align-items: center; 305 align-items: center;
301 .orderHeader{ 306 .orderHeader{
302 width: 100%; 307 width: 100%;
303 height: 100rpx; 308 height: 100rpx;
304 display: flex; 309 display: flex;
305 flex-direction: row; 310 flex-direction: row;
306 justify-content: space-between; 311 justify-content: space-between;
307 align-items: center; 312 align-items: center;
308 border-bottom: 1px solid #E9E9E9;; 313 border-bottom: 1px solid #E9E9E9;;
309 font-weight: bold; 314 font-weight: bold;
310 font-size: 18px; 315 font-size: 18px;
311 color: #333333; 316 color: #333333;
312 .btn{ 317 .btn{
313 font-size: 12px; 318 font-size: 12px;
314 color: #999999; 319 color: #999999;
315 display: flex; 320 display: flex;
316 align-items: center; 321 align-items: center;
317 image{ 322 image{
318 margin-left: 20rpx; 323 margin-left: 20rpx;
319 height: 32rpx; 324 height: 32rpx;
320 width: 16rpx; 325 width: 16rpx;
321 } 326 }
322 } 327 }
323 } 328 }
324 .orderBody{ 329 .orderBody{
325 width: 100%; 330 width: 100%;
326 display: flex; 331 display: flex;
327 flex-direction: row; 332 flex-direction: row;
328 justify-content: space-around; 333 justify-content: space-around;
329 align-items: center; 334 align-items: center;
330 .item{ 335 .item{
331 display: flex; 336 display: flex;
332 flex-direction: column; 337 flex-direction: column;
333 align-items: center; 338 align-items: center;
334 image{ 339 image{
335 width: 62rpx; 340 width: 62rpx;
336 height: 46rpx; 341 height: 46rpx;
337 } 342 }
338 text{ 343 text{
339 margin-top: 24rpx; 344 margin-top: 24rpx;
340 font-size: 12px; 345 font-size: 12px;
341 color: #333333; 346 color: #333333;
342 } 347 }
343 } 348 }
344 } 349 }
345 } 350 }
346 .someItem{ 351 .someItem{
347 width: 100%; 352 width: 100%;
348 height: 336rpx; 353 height: 336rpx;
349 background: #FFFFFF; 354 background: #FFFFFF;
350 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 355 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
351 border-radius: 6px; 356 border-radius: 6px;
352 border-radius: 6px; 357 border-radius: 6px;
353 margin-bottom: 18rpx; 358 margin-bottom: 18rpx;
354 box-sizing: border-box; 359 box-sizing: border-box;
355 padding: 21rpx 48rpx 21rpx 42rpx; 360 padding: 21rpx 48rpx 21rpx 42rpx;
356 box-sizing: border-box; 361 box-sizing: border-box;
357 display: flex; 362 display: flex;
358 flex-direction: column; 363 flex-direction: column;
359 justify-content: space-between; 364 justify-content: space-between;
360 align-items: center; 365 align-items: center;
361 .item{ 366 .item{
362 display: flex; 367 display: flex;
363 justify-content: space-between; 368 justify-content: space-between;
364 border-bottom: 1px solid #F2F2F2;; 369 border-bottom: 1px solid #F2F2F2;;
365 align-items: center; 370 align-items: center;
366 height: 72rpx; 371 height: 72rpx;
367 width: 100%; 372 width: 100%;
368 .left{ 373 .left{
369 font-size: 14px; 374 font-size: 14px;
370 color: #333333; 375 color: #333333;
371 display: flex; 376 display: flex;
372 align-items: center; 377 align-items: center;
373 image{ 378 image{
374 margin-right: 32rpx; 379 margin-right: 32rpx;
375 width: 30rpx; 380 width: 30rpx;
376 height: 34rpx; 381 height: 34rpx;
377 } 382 }
378 } 383 }
379 image{ 384 image{
380 height: 16px; 385 height: 16px;
381 width: 8px; 386 width: 8px;
382 } 387 }
383 } 388 }
384 389
385 } 390 }
386 .recommend{ 391 .recommend{
387 background: #FFFFFF; 392 background: #FFFFFF;
388 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 393 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
389 border-radius: 6px; 394 border-radius: 6px;
390 border-radius: 6px; 395 border-radius: 6px;
391 width: 100%; 396 width: 100%;
392 .title{ 397 .title{
393 display: flex; 398 display: flex;
394 flex-direction: row; 399 flex-direction: row;
395 align-items: center; 400 align-items: center;
396 justify-content: space-between; 401 justify-content: space-between;
397 padding: 20rpx 40rpx; 402 padding: 20rpx 40rpx;
398 .line{ 403 .line{
399 width: 264rpx; 404 width: 264rpx;
400 height: 1rpx; 405 height: 1rpx;
401 border-bottom: 1px solid #EAEAEA; 406 border-bottom: 1px solid #EAEAEA;
402 } 407 }
403 .text{ 408 .text{
404 font-family: PingFangSC-Medium; 409 font-family: PingFangSC-Medium;
405 font-size: 14px; 410 font-size: 14px;
406 color: #333333; 411 color: #333333;
407 letter-spacing: -0.26px; 412 letter-spacing: -0.26px;
408 text-align: justify; 413 text-align: justify;
409 line-height: 24px; 414 line-height: 24px;
410 } 415 }
411 } 416 }
412 .goods-list{ 417 .goods-list{
413 .loading-text{ 418 .loading-text{
414 width: 100%; 419 width: 100%;
415 display: flex; 420 display: flex;
416 justify-content: center; 421 justify-content: center;
417 align-items: center; 422 align-items: center;
418 height: 30px; 423 height: 30px;
419 color: #979797; 424 color: #979797;
420 font-size: 12px; 425 font-size: 12px;
421 } 426 }
422 .product-list{ 427 .product-list{
423 width: 92%; 428 width: 92%;
424 padding: 0 4% 3vw 4%; 429 padding: 0 4% 3vw 4%;
425 display: flex; 430 display: flex;
426 height: 200px; 431 height: 200px;
427 justify-content: space-between; 432 justify-content: space-between;
428 flex-wrap: wrap; 433 flex-wrap: wrap;
429 .product{ 434 .product{
430 width: 48%; 435 width: 48%;
431 margin: 0 0 20rpx 0; 436 margin: 0 0 20rpx 0;
432 background: #FFFFFF; 437 background: #FFFFFF;
433 border: 1px solid #F2F2F2; 438 border: 1px solid #F2F2F2;
434 } 439 }
435 } 440 }
436 } 441 }
437 } 442 }
438 .auth { 443 .auth {
439 height: 100vh; 444 height: 100vh;
440 display: flex; 445 display: flex;
441 flex-direction: column; 446 flex-direction: column;
442 align-items: center; 447 align-items: center;
443 .icon { 448 .icon {
444 width: 140rpx; 449 width: 140rpx;
445 height: 140rpx; 450 height: 140rpx;
446 border-radius: 50%; 451 border-radius: 50%;
447 margin-top: 100rpx; 452 margin-top: 100rpx;
448 background-color: grey; 453 background-color: grey;
449 } 454 }
450 .divider { 455 .divider {
451 height: 1rpx; 456 height: 1rpx;
452 width: 600rpx; 457 width: 600rpx;
453 margin-top: 80rpx; 458 margin-top: 80rpx;
454 background-color: #E6E3E3; 459 background-color: #E6E3E3;
455 } 460 }
456 .title { 461 .title {
457 width: 600rpx; 462 width: 600rpx;
458 margin-top: 50rpx; 463 margin-top: 50rpx;
459 text-align: left; 464 text-align: left;
460 } 465 }
461 .text { 466 .text {
462 width: 600rpx; 467 width: 600rpx;
463 margin-top: 30rpx; 468 margin-top: 30rpx;
464 text-align: left; 469 text-align: left;
465 color: #E6E3E3; 470 color: #E6E3E3;
466 } 471 }
467 button { 472 button {
468 width: 450rpx; 473 width: 450rpx;
469 height: 80rpx; 474 height: 80rpx;
470 line-height: 80rpx; 475 line-height: 80rpx;
471 margin-top: 80rpx; 476 margin-top: 80rpx;
472 border-radius: 30rpx; 477 border-radius: 30rpx;
473 } 478 }
474 } 479 }
475 480
476 </style> 481 </style>
477 482
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
File was created 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 }
1 const urlAlias = { 1 const urlAlias = {
2 // 获取商品信息 2 // 获取商品信息
3 read: '/app/prod/read', 3 read: '/app/prod/read',
4 4
5 // 首页 5 // 首页
6 shopList: '/app/prod/list', // 获取首页商品列表 6 shopList: '/app/prod/list', // 获取首页商品列表
7 category: '/app/prod/category2', // 获取首页商品分类 7 category: '/app/prod/category2', // 获取首页商品分类
8 search: '/app/prod/search', // 首页搜索商品 8 search: '/app/prod/search', // 首页搜索商品
9 9
10 // 登陆 10 // 登陆
11 login: '/app/glass/getOpenId', // 登陆 11 login: '/app/glass/getOpenId', // 登陆
12 getUserInfo: '/app/glass/userinfo', // 获取用户信息 12 getUserInfo: '/app/glass/userinfo', // 获取用户信息
13 13
14 // 我的订单 14 // 我的订单
15 myOrderList: '/app/order/list3', // 获取订单列表 15 myOrderList: '/app/order/list3', // 获取订单列表
16 orderRead: '/app/order/read', // 获取订单详情 16 orderRead: '/app/order/read', // 获取订单详情
17 cancelOrder: '/app/order/wait/del',//取消订单 17 cancelOrder: '/app/order/wait/del',//取消订单
18 statusConfirm: '/app/order/statusConfirm',//订单操作 18 statusConfirm: '/app/order/statusConfirm',//订单操作
19 payLog:'/app/pay/log',//调起支付 19 payLog:'/app/pay/log',//调起支付
20 20
21 // 购物车 21 // 购物车
22 cartList: '/app/cart/list', // 获取购物车列表 22 cartList: '/app/cart/list', // 获取购物车列表
23 cartModi: '/app/cart/modi', // 修改购物车 23 cartModi: '/app/cart/modi', // 修改购物车
24 cartDel: '/app/cart/del', // 删除购物车 24 cartDel: '/app/cart/del', // 删除购物车
25 cartAdd: '/app/cart/add',// 添加购物车 25 cartAdd: '/app/cart/add',// 添加购物车
26 26
27 // 我的 27 // 我的
28 recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品 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
35 export default urlAlias; 39 export default urlAlias;
36 40