Browse Source

调整页面在微信模拟器下的样式

sfmind 3 years ago
parent
commit
671b5d343e

+ 0 - 1
yudao-ui-app/app.scss

@@ -1,6 +1,5 @@
 /* 页面公共scss */
 .container {
-	padding-top: var(--status-bar-height);//uni-app提供了状态栏高度的css变量--status-bar-height
 	background-color: $custom-bg-color;
 	box-sizing: border-box;
 	height: 100%;

+ 3 - 3
yudao-ui-app/components/custom-text-price/custom-text-price.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="u-text-price-wrap">
+  <view>
     <text v-for="(item, index) in textArray" :key="index" :style="{ 'font-size': (index === 1 ? integerSize : size) + 'px', 'color': color }">
       {{ item }}
     </text>
@@ -8,7 +8,7 @@
 
 <script>
 /**
- * 此组件存在只为简单的显示特定样式的(人名币)价格数字
+ * 此组件简单的显示特定样式的(人名币)价格数字
  */
 export default {
   name: 'custom-text-price',
@@ -51,4 +51,4 @@ export default {
   }
 }
 </script>
-<style></style>
+<style scoped></style>

+ 26 - 3
yudao-ui-app/pages.json

@@ -53,7 +53,31 @@
 			"style": {
 				"navigationBarTitleText": "商品详情"
 			}
-		}
+		},
+    {
+      "path": "pages/address/list",
+      "style": {
+        "navigationBarTitleText": "收货列表"
+      }
+    },
+    {
+      "path": "pages/search/search",
+      "style": {
+        "navigationBarTitleText": "商品搜索"
+      }
+    },
+    {
+      "path": "pages/address/add",
+      "style": {
+        "navigationBarTitleText": "新增地址"
+      }
+    },
+    {
+      "path": "pages/address/edit",
+      "style": {
+        "navigationBarTitleText": "修改地址"
+      }
+    }
 	],
 	"tabBar": {
 		"selectedColor": "#333333",
@@ -86,8 +110,7 @@
 		]
 	},
 	"globalStyle": {
-		"navigationStyle": "custom",//取消默认导航栏
-		"navigationBarTextStyle": "white",
+		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "yudao-ui-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#FFFFFF"

+ 17 - 0
yudao-ui-app/pages/address/add.vue

@@ -0,0 +1,17 @@
+<template>
+  <view class="container"> </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: ''
+    }
+  },
+  onLoad() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped></style>

+ 17 - 0
yudao-ui-app/pages/address/edit.vue

@@ -0,0 +1,17 @@
+<template>
+  <view class="container"> </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: ''
+    }
+  },
+  onLoad() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped></style>

+ 17 - 0
yudao-ui-app/pages/address/list.vue

@@ -0,0 +1,17 @@
+<template>
+  <view class="container"> </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: ''
+    }
+  },
+  onLoad() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped></style>

+ 32 - 2
yudao-ui-app/pages/cart/cart.vue

@@ -1,5 +1,18 @@
 <template>
-  <view class="container"> </view>
+  <view class="container">
+    <view class="cart-empty">
+      <u-empty mode="car" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
+    </view>
+
+    <view class="login-tips-box">
+      <view class="login-tips">
+        <navigator url="/pages/login/login" open-type="navigate" hover-class="none">
+          <text class="login-link">登录</text>
+        </navigator>
+        <text>查看购物车</text>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
@@ -14,4 +27,21 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.cart-empty {
+  padding-top: 100rpx;
+}
+
+.login-tips-box {
+  padding-top: 100rpx;
+  .login-tips {
+    @include flex-center;
+    color: #939393;
+    font-size: 28rpx;
+    letter-spacing: 5rpx;
+  }
+  .login-link {
+    color: $u-primary;
+  }
+}
+</style>

+ 13 - 24
yudao-ui-app/pages/category/category.vue

@@ -5,25 +5,23 @@
     </view>
     <view class="category-box">
       <view class="box-left">
-        <u-list @scrolltolower="scrolltolower">
-          <u-list-item class="category-item" v-for="(item, index) in categoryList" :key="item.id">
+        <view>
+          <view class="category-item" v-for="(item, index) in categoryList" :key="item.id">
             <view class="item-title" :class="{ active: currentIndex === index }" @click="handleCategoryClick(index)">
               <text>{{ item.name }}</text>
             </view>
-          </u-list-item>
-        </u-list>
+          </view>
+        </view>
       </view>
       <view class="box-right">
-        <view class="category-image">
-          <u--image :showLoading="true" :src="categoryList[currentIndex].image" width="530rpx" height="160rpx" @click="click"></u--image>
-        </view>
+        <image class="category-image" :showLoading="true" :src="categoryList[currentIndex].image" width="530rpx" height="160rpx" @click="click"></image>
         <view class="sub-category-box" v-for="(item, index) in categoryList[currentIndex].children" :key="item.id">
           <view class="sub-category-header">
             <view class="title">{{ item.title }}</view>
             <view class="more">查看更多</view>
           </view>
           <u-grid class="sub-category-grid" col="3">
-            <u-grid-item v-for="(subItem, index) in item.category" :key="subItem.id">
+            <u-grid-item v-for="(subItem, subIndex) in item.category" :key="subItem.id">
               <view class="sub-category-item">
                 <u-icon name="photo" :size="80"></u-icon>
                 <text class="sub-category-title">{{ subItem.title }}</text>
@@ -48,7 +46,7 @@ export default {
     for (let i = 0; i < 10; i++) {
       this.categoryList.push({
         id: i,
-        image: '',
+        image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
         name: '商品分类' + i,
         children: [
           {
@@ -111,10 +109,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-  height: calc(100vh - 50px);
-  overflow: hidden;
-}
 
 .search-wrap {
   background: $custom-bg-color;
@@ -124,7 +118,7 @@ export default {
 .category-box {
   display: flex;
   .box-left {
-    width: 180rpx;
+    width: 200rpx;
     padding-top: 20rpx;
     border-right: $custom-border-style;
     .category-item {
@@ -132,7 +126,7 @@ export default {
       padding: 20rpx 0;
       .item-title {
         padding-left: 30rpx;
-        font-size: 30rpx;
+        font-size: 28rpx;
         &.active {
           border-left: 6rpx solid $u-primary;
           font-weight: 700;
@@ -141,15 +135,17 @@ export default {
     }
   }
   .box-right {
-    width: 570rpx;
+    flex: 1;
     .category-image {
+      width: 510rpx;
+      height: 160rpx;
       padding: 20rpx;
     }
 
     .sub-category-box {
       .sub-category-header {
         @include flex-space-between;
-        padding: 20rpx;
+        padding: 30rpx 20rpx;
 
         .title {
           font-size: 28rpx;
@@ -168,13 +164,6 @@ export default {
           @include flex-center(column);
           background: #fff;
 
-          .sub-category-image {
-            border-radius: 10rpx;
-            /deep/ * {
-              border-radius: 10rpx;
-            }
-          }
-
           .sub-category-title {
             margin: 15rpx 0;
             font-size: 24rpx;

+ 80 - 77
yudao-ui-app/pages/index/index.vue

@@ -37,22 +37,20 @@
           <text class="bloc-title">每日上新</text>
           <text class="see-more">查看更多</text>
         </view>
-        <u-grid class="prod-grid" :border="false" col="3">
-          <u-grid-item class="prod-item-box" v-for="(item, index) in productList" :key="item.id">
-            <view class="prod-item" @click="handleProdItemClick(item.id)">
-              <u--image class="prod-image" width="230rpx" height="230rpx" :src="item.image"></u--image>
-              <view class="item-info">
-                <view class="info-text">
-                  <u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text>
-                </view>
-                <view class="price-and-cart">
-                  <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
-                  <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
-                </view>
+        <view class="prod-grid">
+          <view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)">
+            <image class="prod-image" :src="item.image"></image>
+            <view class="item-info">
+              <view class="info-text">
+                <u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text>
+              </view>
+              <view class="price-and-cart">
+                <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
+                <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
               </view>
             </view>
-          </u-grid-item>
-        </u-grid>
+          </view>
+        </view>
       </view>
     </view>
 
@@ -62,23 +60,21 @@
           <text class="bloc-title">商品热卖</text>
           <text class="more">更多 &gt;</text>
         </view>
-        <u-grid class="prod-grid" :border="false" col="2">
-          <u-grid-item class="prod-item-box" v-for="(item, index) in productList" :key="item.id">
-            <view class="prod-item" @click="handleProdItemClick(item.id)">
-              <u--image class="prod-image" width="345rpx" height="345rpx" :src="item.image"></u--image>
-              <view class="item-info">
-                <view class="info-text">
-                  <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
-                  <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
-                </view>
-                <view class="price-and-cart">
-                  <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
-                  <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
-                </view>
+        <view class="prod-grid half">
+          <view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)">
+            <image class="prod-image" :src="item.image"></image>
+            <view class="item-info">
+              <view class="info-text">
+                <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
+                <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
+              </view>
+              <view class="price-and-cart">
+                <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
+                <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
               </view>
             </view>
-          </u-grid-item>
-        </u-grid>
+          </view>
+        </view>
       </view>
     </view>
 
@@ -89,31 +85,26 @@
           <text></text>
         </view>
 
-        <u-list class="prod-list" @scrolltolower="scrolltolower">
-          <u-list-item v-for="(item, index) in productList" :key="item.id">
-            <view class="prod-item" @click="handleProdItemClick(item.id)">
-              <u--image class="prod-image" width="210rpx" height="210rpx" :src="item.image"></u--image>
-              <view class="item-info">
-                <view class="info-text">
-                  <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
-                  <u-gap height="2px"></u-gap>
-                  <u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text>
-                </view>
-                <view class="price-and-cart">
-                  <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
-                  <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
-                </view>
+        <view class="prod-list" v-for="(item, index) in productList" :key="item.id">
+          <view class="prod-item" @click="handleProdItemClick(item.id)">
+            <image class="prod-image" :src="item.image"></image>
+            <view class="item-info">
+              <view class="info-text">
+                <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
+                <u-gap height="2px"></u-gap>
+                <u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text>
+              </view>
+              <view class="price-and-cart">
+                <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
+                <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
               </view>
             </view>
-          </u-list-item>
-        </u-list>
+          </view>
+        </view>
       </view>
     </view>
-    <u-gap height="5px"></u-gap>
     <!--加载更多-->
-    <u-loadmore fontSize="32rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
-
-    <u-gap height="10px"></u-gap>
+    <u-loadmore fontSize="28rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
   </view>
 </template>
 
@@ -201,7 +192,7 @@ export default {
         })
     },
     handleSearchClick(e) {
-      console.log('监听点击准备跳转页面')
+      uni.$u.route('/pages/search/search')
     },
     handleSwiperClick(index) {
       console.log('点击了图片索引值:', index)
@@ -264,7 +255,7 @@ export default {
   margin-top: -160px;
   .bloc-header {
     @include flex-space-between;
-    padding: 10rpx 30rpx;
+    padding: 10rpx 20rpx;
 
     .bloc-title {
       color: $custom-bg-color;
@@ -299,25 +290,40 @@ export default {
   .prod-grid {
     width: 730rpx;
     margin: 0 auto;
-    .prod-item-box {
-      padding: 10rpx;
+    @include flex;
+    flex-wrap: wrap;
+    justify-content: left;
+
+    &.half {
       .prod-item {
-        background: #fff;
-        border-radius: 10rpx;
-        box-shadow: -1rpx 1rpx 2rpx #afd3f5, 1rpx 1rpx 0rpx #afd3f5;
-        justify-content: left;
-        /deep/ * {
-          border-radius: 10rpx 10rpx 0 0;
+        width: 346rpx;
+        margin: 10rpx;
+        .prod-image {
+          width: 346rpx;
+          height: 346rpx;
+        }
+      }
+    }
+
+    .prod-item {
+      width: 224rpx;
+      margin: 10rpx;
+      background: #ffffff;
+      border-radius: 10rpx;
+      box-shadow: -1rpx 1rpx 2rpx #afd3f5, 1rpx 1rpx 0rpx #afd3f5;
+      .prod-image {
+        width: 224rpx;
+        height: 224rpx;
+        border-radius: 10rpx 10rpx 0 0;
+      }
+      .item-info {
+        padding: 15rpx;
+        .info-text {
+          height: 70rpx;
+          padding-bottom: 10rpx;
         }
-        .item-info {
-          padding: 15rpx;
-          .info-text {
-            height: 70rpx;
-            padding-bottom: 10rpx;
-          }
-          .price-and-cart {
-            @include flex-space-between;
-          }
+        .price-and-cart {
+          @include flex-space-between;
         }
       }
     }
@@ -325,24 +331,21 @@ export default {
 }
 
 .prod-list {
-  height: auto !important;
 
   .prod-item {
-    padding: 20rpx;
-    background: #fff;
+    background: #ffffff;
     @include flex-space-between;
     border-bottom: $custom-border-style;
-
+    padding: 20rpx;
     .prod-image {
+      width: 200rpx;
+      height: 200rpx;
       border-radius: 10rpx;
-      /deep/ * {
-        border-radius: 10rpx;
-      }
     }
 
     .item-info {
-      width: 450rpx;
-      padding: 20rpx 30rpx 0 30rpx;
+      flex: 1;
+      padding: 20rpx 20rpx 0;
       .info-text {
         height: 100rpx;
         padding-bottom: 10rpx;

+ 9 - 5
yudao-ui-app/pages/login/login.vue

@@ -14,7 +14,7 @@
       <u-gap height="40"></u-gap>
 
       <!-- 登录表单 -->
-      <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
+      <u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
         <u-form-item label="手机号" prop="mobile" labelWidth="60" borderBottom ref="item-mobile">
           <u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号" border="none"></u-input>
         </u-form-item>
@@ -36,10 +36,12 @@
           <u-code ref="uCode" @change="codeChange" seconds="60" @start="codeDisabled = true" @end="codeDisabled = false"></u-code>
         </u-form-item>
 
-        <u-button type="primary" text="登录" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
+        <view class="btn-group">
+          <u-button type="primary" text="登录" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
 
-        <u-gap height="20"></u-gap>
-        <u-button type="info" text="返回" @click="navigateBack()"></u-button>
+          <u-gap height="20"></u-gap>
+          <u-button type="info" text="返回" @click="navigateBack()"></u-button>
+        </view>
       </u--form>
     </view>
   </view>
@@ -193,11 +195,13 @@ export default {
   .mode-section {
     width: 560rpx;
   }
-  .unp-form {
+  .btn-group {
     width: 560rpx;
   }
 }
 
+
+
 .lk-group {
   height: 40rpx;
   margin-top: 40rpx;

+ 12 - 11
yudao-ui-app/pages/product/product.vue

@@ -144,7 +144,7 @@
             <view class="evan-type-item" :class="{ active: currentEvanIndex === index }" v-for="(item, index) in evanTypeList" :key="item.id" @click="handleEvanTypeClick(index)"> {{ item.name }}({{ item.count }}) </view>
           </view>
           <view class="comment-empty" v-if="true">
-            <u-empty mode="comment" icon="/static/images/empty/comment.png"></u-empty>
+            <u-empty mode="comment" width="350rpx" height="350rpx" icon="/static/images/empty/comment.png"></u-empty>
           </view>
           <view v-else class="comment-list" style="min-height: 50px"> </view>
         </view>
@@ -169,7 +169,7 @@
           <u-button type="warning" shape="circle" size="small" text="加入购物车"></u-button>
         </view>
         <view class="btn-item-main">
-          <u-button type="error" shape="circle" size="small" text="立即购买"></u-button>
+          <u-button type="error" color="#ea322b" shape="circle" size="small" text="立即购买"></u-button>
         </view>
       </view>
     </view>
@@ -355,23 +355,23 @@ export default {
   height: 70rpx;
   .row-left {
     width: 70rpx;
-    font-size: 22rpx;
+    font-size: 24rpx;
     color: #939393;
   }
 
   .row-right {
     @include flex-space-between;
-    width: 620rpx;
+    flex: 1;
 
     .row-content {
-      width: 590rpx;
+      flex: 1;
 
       .delivery-box {
         @include flex-left;
         .delivery-item {
           margin-right: 20rpx;
           @include flex-left;
-          font-size: 14rpx;
+          font-size: 22rpx;
           .delivery-name {
             margin-left: 5rpx;
           }
@@ -382,7 +382,7 @@ export default {
         @include flex-left;
         .prom-item {
           @include flex-left;
-          font-size: 12rpx;
+          font-size: 22rpx;
           .prom-title {
             padding: 1rpx 10rpx;
             border: 1rpx solid red;
@@ -402,7 +402,7 @@ export default {
           @include flex-left;
           .coupon-item {
             @include flex-left;
-            font-size: 12rpx;
+            font-size: 22rpx;
             .coupon-desc {
               padding: 2rpx 15rpx;
               margin-right: 15rpx;
@@ -422,7 +422,7 @@ export default {
         @include flex-space-between;
         .sku-item {
           @include flex-left;
-          font-size: 12rpx;
+          font-size: 22rpx;
           .sku-desc {
             margin-left: 15rpx;
             font-weight: 700;
@@ -547,7 +547,7 @@ export default {
         border-radius: 8rpx;
         padding: 7rpx 12rpx;
         background: #f3f3f3;
-        font-size: 12rpx;
+        font-size: 22rpx;
         text-align: center;
         &.active {
           background: #ffffff;
@@ -559,6 +559,7 @@ export default {
     }
 
     .comment-empty {
+
     }
   }
 }
@@ -579,7 +580,7 @@ export default {
       width: 80rpx;
       @include flex-center(column);
       .btn-text {
-        font-size: 12rpx;
+        font-size: 18rpx;
         color: #666666;
       }
     }

+ 19 - 0
yudao-ui-app/pages/search/search.vue

@@ -0,0 +1,19 @@
+<template>
+  <view class="container">
+    搜索页面
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: ''
+    }
+  },
+  onLoad() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped></style>

+ 13 - 10
yudao-ui-app/pages/user/user.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="container">
     <view class="user-header">
-      <view class="user-info" @click="handleUserInfoClick">
+      <view class="user-info" @click="loginOrJump('/pages/profile/profile')">
         <u-avatar size="80" :src="avatar"></u-avatar>
         <text class="nick-name">{{ nickName }}</text>
       </view>
@@ -45,10 +45,13 @@
       <u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
       <u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
       <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
-      <u-cell class="fun-item" :border="false" icon="map" title="收获地址" isLink></u-cell>
+      <u-cell class="fun-item" :border="false" icon="map" title="收货地址"  @click="loginOrJump('/pages/address/list')" isLink></u-cell>
     </u-cell-group>
 
-    <u-button class="logout-btn" type="error" color="#ea322b" text="确定"></u-button>
+    <view class="logout-btn">
+      <u-button type="error" color="#ea322b" text="确定"></u-button>
+    </view>
+
   </view>
 </template>
 
@@ -65,20 +68,20 @@ export default {
         { icon: 'integral', title: '已完成' }
       ],
       statList: [
-        { value: '2', title: '我的收藏' },
-        { value: '3', title: '我的消息' },
-        { value: '3', title: '我的足迹' }
+        { value: '0', title: '我的收藏' },
+        { value: '0', title: '我的消息' },
+        { value: '0', title: '我的足迹' }
       ]
     }
   },
   onLoad() {},
   methods: {
-    handleUserInfoClick() {
+    loginOrJump(pageUrl){
       // TODO 判断是否已经登录逻辑
       if (!uni.getStorageSync('token')) {
         uni.$u.route('/pages/login/login')
       } else {
-        uni.$u.route('/pages/profile/profile')
+        uni.$u.route(pageUrl)
       }
     }
   }
@@ -145,7 +148,7 @@ export default {
 }
 
 .logout-btn {
-  margin-top: 60rpx;
-  width: 300rpx;
+  margin: 60rpx auto 0;
+  width: 400rpx;
 }
 </style>

+ 7 - 0
yudao-ui-app/sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}