BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 6e685c487d17fee448a2de6aed62460a77dcbc71

Authored by sfmind
1 parent e10b7075

增加产品详情页，调整部分页面样式

Inline Side-by-side
Showing 12 changed files with 436 additions and 183 deletions
yudao-ui-app/app.scss
  View file @6e685c4
1 1 /* 页面公共scss */
2 2 .container {
3 3 padding-top: var(--status-bar-height);//uni-app提供了状态栏高度的css变量--status-bar-height
4   - background-color: $uni-bg-color;
  4 + background-color: $custom-bg-color;
5 5 box-sizing: border-box;
6 6 height: 100%;
7 7 }
8   -
9   -/* 布局间距 */
10   -.m-0-r {
11   - margin: 0rpx;
12   -}
13   -
14   -.mtb-0-r {
15   - margin-top: 0rpx;
16   - margin-bottom: 0rpx;
17   -}
18   -
19   -.no-mlt {
20   - margin-left: 0rpx;
21   - margin-right: 0rpx;
22   -}
23   -
24   -.mtb-30-r {
25   - margin-top: 30rpx;
26   - margin-bottom: 30rpx;
27   -}
28   -
29   -.mlr-30-r {
30   - margin-left: 30rpx;
31   - margin-right: 30rpx;
32   -}
33   -
34   -.mt-20-r {margin-top: 20rpx;}
35   -.mt-30-r {margin-top: 30rpx;}
36   -.mt-40-r {margin-top: 40rpx;}
37   -.mt-50-r {margin-top: 50rpx;}
38   -
39   -.mb-20-r {margin-bottom: 20rpx;}
40   -.mb-30-r {margin-bottom: 30rpx;}
41   -.mb-40-r {margin-bottom: 40rpx;}
42   -.mb-50-r {margin-bottom: 50rpx;}
43   -
44   -.ml-20-r {margin-left: 20rpx;}
45   -.ml-30-r {margin-left: 30rpx;}
46   -.ml-40-r {margin-left: 40rpx;}
47   -.ml-50-r {margin-left: 50rpx;}
48   -
49   -.mr-20-r {margin-right: 20rpx;}
50   -.mr-30-r {margin-right: 30rpx;}
51   -.mr-40-r {margin-right: 40rpx;}
52   -.mr-50-r {margin-right: 50rpx;}
... ...
yudao-ui-app/common/props.js
  View file @6e685c4
  1 +/* uView组件全局属性 */
1 2 uni.$u.props.gap.bgColor = '#ffffff'
2 3 uni.$u.props.gap.height = '10'
... ...
yudao-ui-app/pages.json
  View file @6e685c4
... ... @@ -47,6 +47,12 @@
47 47 "style": {
48 48 "navigationBarTitleText": "个人资料"
49 49 }
  50 + },
  51 + {
  52 + "path": "pages/product/product",
  53 + "style": {
  54 + "navigationBarTitleText": "商品详情"
  55 + }
50 56 }
51 57 ],
52 58 "tabBar": {
... ...
yudao-ui-app/pages/category/category.vue
  View file @6e685c4
1 1 <template>
2 2 <view class="container">
3   -
  3 + <view class="search-wrap">
  4 + <u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search>
  5 + </view>
  6 + <view class="category-box">
  7 + <view class="box-left">
  8 + <u-list @scrolltolower="scrolltolower">
  9 + <u-list-item class="category-item" v-for="(item, index) in categoryList" :key="index">
  10 + <view class="item-title" :class="index === currentIndex ? 'active' : ''" @click="handleCategoryClick(index)">
  11 + <text>{{item.name}}</text>
  12 + </view>
  13 + </u-list-item>
  14 + </u-list>
  15 + </view>
  16 + <view class="box-right">
  17 + <view class="category-image">
  18 + <u--image :showLoading="true" :src="categoryList[currentIndex].image" width="530rpx" height="160rpx" @click="click"></u--image>
  19 + </view>
  20 + <view>
  21 + <u-list class="prod-list" @scrolltolower="scrolltolower">
  22 + <u-list-item v-for="(item, index) in productList" :key="index">
  23 + <view class="prod-item" @click="handleProdItemClick(item.id)">
  24 + <u--image class="prod-image" width="140rpx" height="140rpx" :src="item.image"></u--image>
  25 + <view class="item-info">
  26 + <view class="info-text">
  27 + <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
  28 + <u-gap height="2px"></u-gap>
  29 + <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
  30 + </view>
  31 + <view class="price-and-cart">
  32 + <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
  33 + <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
  34 + </view>
  35 + </view>
  36 + </view>
  37 + </u-list-item>
  38 + </u-list>
  39 + </view>
  40 + </view>
  41 + </view>
4 42 </view>
5 43 </template>
6 44  
7 45 <script>
8   - export default {
9   - data() {
  46 + import UText from "../../uni_modules/uview-ui/components/u-text/u-text";
  47 + export default {
  48 + components: {UText},
  49 + data() {
10 50 return {
11   - title: ''
  51 + currentIndex: 0,
  52 + categoryList: [
  53 + {
  54 + id: 1,
  55 + image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  56 + name: '关注'
  57 + }, {
  58 + id: 1,
  59 + image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  60 + name: '推荐'
  61 + }, {
  62 + id: 1,
  63 + image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  64 + name: '电影'
  65 + }, {
  66 + id: 1,
  67 + image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  68 + name: '科技'
  69 + }, {
  70 + id: 1,
  71 + image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  72 + name: '音乐'
  73 + }, {
  74 + id: 1,
  75 + image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  76 + name: '美食'
  77 + }, {
  78 + id: 1,
  79 + image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  80 + name: '文化'
  81 + }, {
  82 + id: 1,
  83 + image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  84 + name: '财经'
  85 + }, {
  86 + id: 1,
  87 + image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  88 + name: '手工'
  89 + }],
  90 + productList: [
  91 + {
  92 + id: 1,
  93 + image: 'https://cdn.uviewui.com/uview/album/1.jpg',
  94 + title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
  95 + desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
  96 + price: '13.00'
  97 + },
  98 + {
  99 + id: 2,
  100 + image: 'https://cdn.uviewui.com/uview/album/2.jpg',
  101 + title: '商品222',
  102 + desc: '',
  103 + price: '23.00'
  104 + },
  105 + {
  106 + id: 3,
  107 + image: 'https://cdn.uviewui.com/uview/album/3.jpg',
  108 + title: '商品333',
  109 + desc: '商品描述信息2',
  110 + price: '33.00'
  111 + },
  112 + {
  113 + id: 4,
  114 + image: 'https://cdn.uviewui.com/uview/album/4.jpg',
  115 + title: '商品444',
  116 + desc: '商品描述信息4',
  117 + price: '43.00'
  118 + },
  119 + {
  120 + id: 5,
  121 + image: 'https://cdn.uviewui.com/uview/album/5.jpg',
  122 + title: '商品555',
  123 + desc: '商品描述信息5',
  124 + price: '53.00'
  125 + }
  126 + ]
12 127 }
13 128 },
14 129 onLoad() {
15   -
16 130 },
17 131 methods: {
18   -
  132 + handleSearchClick(e) {
  133 + console.log('监听点击准备跳转页面')
  134 + },
  135 + handleCategoryClick(index){
  136 + if (this.currentIndex !== index) {
  137 + this.currentIndex = index;
  138 + // TODO 查询下分类商品
  139 + }
  140 + },
  141 + handleProdItemClick(productId){
  142 + uni.$u.route('/pages/product/product', {
  143 + productId: productId
  144 + });
  145 + }
19 146 }
20 147 }
21 148 </script>
22 149  
23 150 <style lang="scss" scoped>
  151 +
  152 +.search-wrap {
  153 + background: $custom-bg-color;
  154 + padding: 20rpx;
  155 +}
  156 +
  157 +.category-box{
  158 + display: flex;
  159 + .box-left{
  160 + width: 180rpx;
  161 + padding-top: 20rpx;
  162 + border-right: $custom-border-style;
  163 + .category-item{
  164 + border-bottom: $custom-border-style;
  165 + padding: 20rpx 0;
  166 + .item-title{
  167 + padding-left: 30rpx;
  168 + font-size: 30rpx;
  169 + &.active{
  170 + border-left: 6rpx solid $u-primary;
  171 + font-weight: 700;
  172 + }
  173 + }
  174 + }
  175 + }
  176 + .box-right{
  177 + width: 550rpx;
  178 + padding-right: 20rpx;
  179 + .category-image{
  180 + padding: 20rpx;
  181 + }
  182 +
  183 + .prod-list {
  184 + height: auto !important;
  185 +
  186 + .prod-item {
  187 + padding: 10rpx 20rpx;
  188 + background: #fff;
  189 + display: flex;
  190 + flex-direction: row;
  191 + justify-content: space-between;
  192 + border-bottom: $custom-border-style;
  193 +
  194 + .prod-image {
  195 + border-radius: 10rpx;
  196 + /deep/ * {
  197 + border-radius: 10rpx;
  198 + }
  199 + }
  200 +
  201 + .item-info {
  202 + width: 350rpx;
  203 + padding: 5rpx;
  204 + .info-text {
  205 + height: 70rpx;
  206 + padding-bottom: 10rpx;
  207 + }
  208 + .price-and-cart {
  209 + display: flex;
  210 + justify-content: space-between;
  211 + }
  212 + }
  213 + }
  214 + }
  215 + }
  216 +}
24 217 </style>
... ...
yudao-ui-app/pages/forgot/forgot.vue
  View file @6e685c4
... ... @@ -174,8 +174,8 @@ export default {
174 174 justify-content: space-between;
175 175 font-size: 12rpx;
176 176  
177   - color: #3c9cff;
178   - text-decoration: #3c9cff;
  177 + color: $u-primary;
  178 + text-decoration: $u-primary;
179 179 }
180 180  
181 181  
... ...
yudao-ui-app/pages/index/index.vue
  View file @6e685c4
... ... @@ -15,14 +15,16 @@
15 15 </view>
16 16 </u-swiper>
17 17  
  18 + <u-gap height="20px"></u-gap>
  19 +
18 20 <!--宫格菜单按钮-->
19   - <view class="mt-40-r mb-30-r">
20   - <u-grid :border="false" col="4"><u-grid-item v-for="(item,index) in menuList" :key="index">
21   - <u-icon :name="item.icon" :size="40"></u-icon>
22   - <text class="grid-title">{{item.title}}</text>
23   - </u-grid-item>
24   - </u-grid>
25   - </view>
  21 + <u-grid :border="false" col="4"><u-grid-item v-for="(item,index) in menuList" :key="index">
  22 + <u-icon :name="item.icon" :size="40"></u-icon>
  23 + <text class="grid-title">{{item.title}}</text>
  24 + </u-grid-item>
  25 + </u-grid>
  26 +
  27 + <u-gap height="15px"></u-gap>
26 28  
27 29 <!--消息滚动栏-->
28 30 <u-notice-bar style="padding: 13px 12px" :text="noticeList" mode="link" direction="column" @click="click"></u-notice-bar>
... ... @@ -37,14 +39,14 @@
37 39 </view>
38 40 <u-grid class="prod-grid" :border="false" col="3">
39 41 <u-grid-item class="prod-item-box" v-for="(item,index) in productList" :key="index">
40   - <view class="prod-item">
41   - <u--image class="prod-image" width="230rpx" height="230rpx" :src="item"></u--image>
  42 + <view class="prod-item" @click="handleProdItemClick(item.id)">
  43 + <u--image class="prod-image" width="230rpx" height="230rpx" :src="item.image"></u--image>
42 44 <view class="item-info">
43 45 <view class="info-text">
44   - <u--text :lines="2" size="14px" color="#333333" text="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
  46 + <u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text>
45 47 </view>
46 48 <view class="price-and-cart">
47   - <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
  49 + <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
48 50 <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
49 51 </view>
50 52 </view>
... ... @@ -62,15 +64,15 @@
62 64 </view>
63 65 <u-grid class="prod-grid" :border="false" col="2">
64 66 <u-grid-item class="prod-item-box" v-for="(item,index) in productList" :key="index">
65   - <view class="prod-item">
66   - <u--image class="prod-image" width="345rpx" height="345rpx" :src="item"></u--image>
  67 + <view class="prod-item" @click="handleProdItemClick(item.id)">
  68 + <u--image class="prod-image" width="345rpx" height="345rpx" :src="item.image"></u--image>
67 69 <view class="item-info">
68 70 <view class="info-text">
69   - <u--text :lines="1" size="14px" color="#333333" text="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
70   - <u--text :lines="1" size="12px" color="#939393" text="斯是陋室，惟吾德馨。"></u--text>
  71 + <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
  72 + <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
71 73 </view>
72 74 <view class="price-and-cart">
73   - <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
  75 + <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
74 76 <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
75 77 </view>
76 78 </view>
... ... @@ -89,15 +91,16 @@
89 91  
90 92 <u-list class="prod-list" @scrolltolower="scrolltolower">
91 93 <u-list-item v-for="(item, index) in productList" :key="index">
92   - <view class="prod-item">
93   - <u--image class="prod-image" width="210rpx" height="210rpx" :src="item"></u--image>
  94 + <view class="prod-item" @click="handleProdItemClick(item.id)">
  95 + <u--image class="prod-image" width="210rpx" height="210rpx" :src="item.image"></u--image>
94 96 <view class="item-info">
95 97 <view class="info-text">
96   - <u--text :lines="2" size="14px" color="#333333" text="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
97   - <u--text :lines="1" size="12px" color="#939393" text="斯是陋室，惟吾德馨。"></u--text>
  98 + <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
  99 + <u-gap height="2px"></u-gap>
  100 + <u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text>
98 101 </view>
99 102 <view class="price-and-cart">
100   - <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
  103 + <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
101 104 <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
102 105 </view>
103 106 </view>
... ... @@ -138,11 +141,41 @@ export default {
138 141 '一片冰心在玉壶'
139 142 ],
140 143 productList: [
141   - 'https://cdn.uviewui.com/uview/album/1.jpg',
142   - 'https://cdn.uviewui.com/uview/album/2.jpg',
143   - 'https://cdn.uviewui.com/uview/album/3.jpg',
144   - 'https://cdn.uviewui.com/uview/album/4.jpg',
145   - 'https://cdn.uviewui.com/uview/album/5.jpg',
  144 + {
  145 + id: 1,
  146 + image: 'https://cdn.uviewui.com/uview/album/1.jpg',
  147 + title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
  148 + desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
  149 + price: '13.00'
  150 + },
  151 + {
  152 + id: 2,
  153 + image: 'https://cdn.uviewui.com/uview/album/2.jpg',
  154 + title: '商品222',
  155 + desc: '',
  156 + price: '23.00'
  157 + },
  158 + {
  159 + id: 3,
  160 + image: 'https://cdn.uviewui.com/uview/album/3.jpg',
  161 + title: '商品333',
  162 + desc: '商品描述信息2',
  163 + price: '33.00'
  164 + },
  165 + {
  166 + id: 4,
  167 + image: 'https://cdn.uviewui.com/uview/album/4.jpg',
  168 + title: '商品444',
  169 + desc: '商品描述信息4',
  170 + price: '43.00'
  171 + },
  172 + {
  173 + id: 5,
  174 + image: 'https://cdn.uviewui.com/uview/album/5.jpg',
  175 + title: '商品555',
  176 + desc: '商品描述信息5',
  177 + price: '53.00'
  178 + }
146 179 ],
147 180 status: 'nomore',
148 181 loadingText: '努力加载中...',
... ... @@ -174,6 +207,11 @@ export default {
174 207 },
175 208 handleSwiperClick(index){
176 209 console.log('点击了图片索引值：',index)
  210 + },
  211 + handleProdItemClick(productId){
  212 + uni.$u.route('/pages/product/product', {
  213 + productId: productId
  214 + });
177 215 }
178 216 },
179 217 computed: {
... ... @@ -198,7 +236,7 @@ export default {
198 236 <style lang="scss" scoped>
199 237  
200 238 .search-wrap {
201   - background: #ffffff;
  239 + background: $custom-bg-color;
202 240 padding: 20rpx;
203 241 }
204 242  
... ... @@ -215,7 +253,7 @@ export default {
215 253 transition: background-color 0.3s;
216 254  
217 255 &--active {
218   - background-color: #ffffff;
  256 + background-color: $custom-bg-color;
219 257 }
220 258 }
221 259 }
... ... @@ -235,12 +273,12 @@ export default {
235 273 padding: 10rpx 30rpx;
236 274  
237 275 .bloc-title {
238   - color: #ffffff;
  276 + color: $custom-bg-color;
239 277 font-size: 34rpx;
240 278 }
241 279 .see-more {
242   - color: #ffffff;
243   - background: #3c9cff;
  280 + color: $custom-bg-color;
  281 + background: $u-primary;
244 282 padding: 0 30rpx;
245 283 height: 50rpx;
246 284 line-height: 50rpx;
... ... @@ -279,7 +317,8 @@ export default {
279 317 .item-info {
280 318 padding: 15rpx;
281 319 .info-text {
282   - padding-bottom: 15rpx;
  320 + height: 70rpx;
  321 + padding-bottom: 10rpx;
283 322 }
284 323 .price-and-cart {
285 324 display: flex;
... ... @@ -300,7 +339,7 @@ export default {
300 339 display: flex;
301 340 flex-direction: row;
302 341 justify-content: space-between;
303   - border-bottom: 1rpx solid #f3f3f3;
  342 + border-bottom: $custom-border-style;
304 343  
305 344 .prod-image {
306 345 border-radius: 10rpx;
... ... @@ -310,9 +349,11 @@ export default {
310 349 }
311 350  
312 351 .item-info {
313   - padding: 20rpx 30rpx;
  352 + width: 450rpx;
  353 + padding: 20rpx 30rpx 0 30rpx;
314 354 .info-text {
315   - padding-bottom: 15rpx;
  355 + height: 100rpx;
  356 + padding-bottom: 10rpx;
316 357 }
317 358 .price-and-cart {
318 359 display: flex;
... ...
yudao-ui-app/pages/login/login.vue
  View file @6e685c4
... ... @@ -217,8 +217,8 @@ import {passwordLogin,sendSmsCode,smsLogin} from &quot;../../common/api&quot;;
217 217 justify-content: space-between;
218 218 font-size: 12rpx;
219 219  
220   - color: #3c9cff;
221   - text-decoration: #3c9cff;
  220 + color: $u-primary;
  221 + text-decoration: $u-primary;
222 222 }
223 223  
224 224  
... ...
yudao-ui-app/pages/product/product.vue 0 → 100644
  View file @6e685c4
  1 +<template>
  2 + <view class="container">
  3 + <u-swiper :list="product.images" @change="e => currentNum = e.current" :autoplay="false" height="750rpx" radius="0" indicatorStyle="right: 20px">
  4 + <view slot="indicator" class="indicator-num">
  5 + <text class="indicator-num__text">{{ currentNum + 1 }}/{{ product.images.length }}</text>
  6 + </view>
  7 + </u-swiper>
  8 +
  9 + <view class="product-box">
  10 + <view class="prod-info">
  11 + <view class="info-text">
  12 + <u--text :lines="2" size="14px" color="#333333" :text="product.title"></u--text>
  13 + <u-gap height="5px"></u-gap>
  14 + <u--text :lines="3" size="12px" color="#939393" :text="product.desc"></u--text>
  15 + </view>
  16 + <view class="price-and-cart">
  17 + <u--text-price color="red" size="16" intSize="26" :text="product.price"></u--text-price>
  18 + </view>
  19 + </view>
  20 + <view class="prod-collect">
  21 + <u-icon name="heart" color="#2979ff" size="28"></u-icon>
  22 + </view>
  23 + </view>
  24 + </view>
  25 +
  26 +</template>
  27 +
  28 +<script>
  29 +export default {
  30 + data() {
  31 + return {
  32 + current: 0,
  33 + currentNum: 0,
  34 + product: {
  35 + id: '',
  36 + images: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg'],
  37 + title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
  38 + desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
  39 + price: '13.00'
  40 + }
  41 + }
  42 + },
  43 + onLoad(e) {
  44 + if (!e.productId) {
  45 + uni.$u.toast('请求参数错误');
  46 + } else {
  47 + this.product.id = e.productId;
  48 + this.loadProductData();
  49 + // TODO 请求接口获取商品详情数据
  50 + }
  51 + console.log(e);
  52 + },
  53 + methods: {
  54 + loadProductData(){
  55 +
  56 + }
  57 +
  58 + },
  59 + computed: {
  60 +
  61 + }
  62 +}
  63 +</script>
  64 +
  65 +<style lang="scss" scoped>
  66 +
  67 +.indicator-num {
  68 + padding: 2px 0;
  69 + background-color: rgba(0, 0, 0, 0.35);
  70 + border-radius: 100px;
  71 + width: 35px;
  72 + @include flex;
  73 + justify-content: center;
  74 +
  75 + &__text {
  76 + color: #FFFFFF;
  77 + font-size: 12px;
  78 + }
  79 +}
  80 +
  81 +.product-box {
  82 + padding: 40rpx 40rpx 10rpx 40rpx;
  83 + display: flex;
  84 + border-bottom: $custom-border-style;
  85 + .prod-info {
  86 + padding-right: 30rpx;
  87 + .info-text {
  88 + padding-bottom: 10rpx;
  89 + }
  90 + .price-and-cart {
  91 + display: flex;
  92 + justify-content: space-between;
  93 + }
  94 + }
  95 + .prod-collect {
  96 + margin-top: 15rpx;
  97 + }
  98 +}
  99 +
  100 +
  101 +
  102 +</style>
... ...
yudao-ui-app/pages/register/register.vue
  View file @6e685c4
... ... @@ -136,8 +136,8 @@ export default {
136 136 justify-content: space-between;
137 137 font-size: 12rpx;
138 138  
139   - color: #3c9cff;
140   - text-decoration: #3c9cff;
  139 + color: $u-primary;
  140 + text-decoration: $u-primary;
141 141 }
142 142  
143 143  
... ...
yudao-ui-app/pages/user/user.vue
  View file @6e685c4
... ... @@ -7,7 +7,7 @@
7 7 </view>
8 8 </view>
9 9  
10   - <u-gap height="10" bgColor="#f6f6f6"></u-gap>
  10 + <u-gap height="10" bgColor="#f3f3f3"></u-gap>
11 11  
12 12 <view>
13 13 <view class="order-header">
... ... @@ -18,7 +18,7 @@
18 18 </view>
19 19 </view>
20 20  
21   - <view class="mt-40-r mb-40-r">
  21 + <view class="order-status-box">
22 22 <u-grid :border="false" :col="orderStatusList.length"><u-grid-item v-for="(item,index) in orderStatusList" :key="index">
23 23 <u-icon :name="item.icon" :size="32"></u-icon>
24 24 <text class="grid-title">{{item.title}}</text>
... ... @@ -27,16 +27,17 @@
27 27 </view>
28 28 </view>
29 29  
30   - <u-gap height="10" bgColor="#f6f6f6"></u-gap>
31   - <view class="mt-20-r mb-20-r">
32   - <u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statisticsList" :key="index">
  30 + <u-gap height="10" bgColor="#f3f3f3"></u-gap>
  31 +
  32 + <view class="stat-box">
  33 + <u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statList" :key="index">
33 34 <text class="grid-value">{{item.value}}</text>
34 35 <text class="grid-title">{{item.title}}</text>
35 36 </u-grid-item>
36 37 </u-grid>
37 38 </view>
38 39  
39   - <u-gap height="10" bgColor="#f6f6f6"></u-gap>
  40 + <u-gap height="10" bgColor="#f3f3f3"></u-gap>
40 41  
41 42 <u-cell-group class="fun-list">
42 43 <u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
... ... @@ -57,7 +58,7 @@
57 58 avatar:'',
58 59 nickName:'点击登录',
59 60 orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}],
60   - statisticsList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
  61 + statList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
61 62 }
62 63 },
63 64 onLoad() {
... ... @@ -101,7 +102,7 @@
101 102 align-items: center;
102 103 justify-content: space-between;
103 104 padding: 20rpx 30rpx;
104   - border-bottom: 1rpx solid #f3f3f3;
  105 + border-bottom: $custom-border-style;
105 106  
106 107 .order-title {
107 108 color: #333333;
... ... @@ -118,6 +119,14 @@
118 119 }
119 120 }
120 121  
  122 +.order-status-box {
  123 + padding: 40rpx 0;
  124 +}
  125 +
  126 +.stat-box {
  127 + padding: 20rpx 0;
  128 +}
  129 +
121 130 .grid-title {
122 131 line-height: 50rpx;
123 132 font-size: 26rpx;
... ... @@ -134,7 +143,7 @@
134 143 .fun-item {
135 144 padding-top: 10rpx;
136 145 padding-bottom: 10rpx;
137   - border-bottom: 1rpx solid #f3f3f3;
  146 + border-bottom: $custom-border-style;
138 147 }
139 148 }
140 149  
... ...
yudao-ui-app/uni.scss
  View file @6e685c4
... ... @@ -15,65 +15,10 @@
15 15 /* 引入uView主题样式 */
16 16 @import '@/uni_modules/uview-ui/theme.scss';
17 17  
18   -/* 颜色变量 */
  18 +/* 全局自定义scss变量 */
19 19  
20   -/* 行为相关颜色 */
21   -$uni-color-primary: #007aff;
22   -$uni-color-success: #4cd964;
23   -$uni-color-warning: #f0ad4e;
24   -$uni-color-error: #dd524d;
  20 +/* 页面背景颜色 */
  21 +$custom-bg-color: #ffffff;
25 22  
26   -/* 文字基本颜色 */
27   -$uni-text-color:#333;//基本色
28   -$uni-text-color-inverse:#fff;//反色
29   -$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
30   -$uni-text-color-placeholder: #808080;
31   -$uni-text-color-disable:#c0c0c0;
32   -
33   -/* 背景颜色 */
34   -$uni-bg-color:#ffffff;
35   -$uni-bg-color-grey:#f8f8f8;
36   -$uni-bg-color-hover:#f1f1f1;//点击状态颜色
37   -$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
38   -
39   -/* 边框颜色 */
40   -$uni-border-color:#c8c7cc;
41   -
42   -/* 尺寸变量 */
43   -
44   -/* 文字尺寸 */
45   -$uni-font-size-sm:12px;
46   -$uni-font-size-base:14px;
47   -$uni-font-size-lg:16;
48   -
49   -/* 图片尺寸 */
50   -$uni-img-size-sm:20px;
51   -$uni-img-size-base:26px;
52   -$uni-img-size-lg:40px;
53   -
54   -/* Border Radius */
55   -$uni-border-radius-sm: 2px;
56   -$uni-border-radius-base: 3px;
57   -$uni-border-radius-lg: 6px;
58   -$uni-border-radius-circle: 50%;
59   -
60   -/* 水平间距 */
61   -$uni-spacing-row-sm: 5px;
62   -$uni-spacing-row-base: 10px;
63   -$uni-spacing-row-lg: 15px;
64   -
65   -/* 垂直间距 */
66   -$uni-spacing-col-sm: 4px;
67   -$uni-spacing-col-base: 8px;
68   -$uni-spacing-col-lg: 12px;
69   -
70   -/* 透明度 */
71   -$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
72   -
73   -/* 文章场景相关 */
74   -$uni-color-title: #2C405A; // 文章标题颜色
75   -$uni-font-size-title:20px;
76   -$uni-color-subtitle: #555555; // 二级标题颜色
77   -$uni-font-size-subtitle:26px;
78   -$uni-color-paragraph: #3F536E; // 文章段落颜色
79   -$uni-font-size-paragraph:15px;
  23 +/* 边框样式 */
  24 +$custom-border-style: 1rpx solid #f3f3f3;
... ...
yudao-ui-app/uni_modules/uview-ui/components/u--text-price/u--text-price.vue
  View file @6e685c4
1 1 <template>
2 2 <view class="u-text-price-wrap">
3   - <uvText
4   - class="u-text-price-item"
  3 + <text
5 4 v-for="(item,index) in textArray"
6 5 :key="index"
7   - :text="item"
8   - :size="(index === 1 && integerSize) ? integerSize : size"
9   - :color="color"
  6 + :style="{'font-size': (index === 1 ? integerSize : size) + 'px', 'color': color}"
10 7 >
11   - </uvText>
  8 + {{item}}
  9 + </text>
12 10 </view>
13 11 </template>
14 12  
15 13 <script>
16 14 /**
17   - * 此组件存在只为简单的显示特定样式的价格数字
  15 + * 此组件存在只为简单的显示特定样式的(人名币)价格数字
18 16 */
19   -import uvText from "../u-text/u-text.vue";
20   -import props from "../u-text/props.js";
21 17 export default {
22 18 name: "u--text-price",
23   - mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
24 19 components: {
25   - uvText,
26 20 },
27 21 props: {
  22 + text: {
  23 + type: String,
  24 + default: '0.00'
  25 + },
  26 + color: {
  27 + type: String,
  28 + default: '#333333'
  29 + },
  30 + //字体大小
  31 + size: {
  32 + type: [String, Number],
  33 + default: uni.$u.props.text.size
  34 + },
28 35 //整形部分字体大小可单独定义
29   - integerSize: {
  36 + intSize: {
30 37 type: [String, Number],
31 38 default: uni.$u.props.text.size
32 39 }
... ... @@ -42,18 +49,12 @@ export default {
42 49 array.push('.' + arr[1]);
43 50 }
44 51 return array;
  52 + },
  53 + integerSize() {
  54 + return this.intSize ? this.intSize : this.size
45 55 }
46 56 }
47 57 };
48 58 </script>
49 59 <style>
50   -.u-text-price-wrap {
51   - display: flex;
52   - flex-direction: row;
53   - justify-content: left;
54   -}
55   -
56   -.u-text-price-item{
57   - flex: 0;
58   -}
59 60 </style>
60 61 \ No newline at end of file
... ...