调整自定义插件、代码风格化

sfmind
1 parent cfcc0aa6
Showing 11 changed files with 492 additions and 527 deletions
yudao-ui-app/.editorconfig
yudao-ui-app/uni_modules/uview-ui/components/u--text-price/u--text-price.vue → yudao-ui-app/components/custom-text-price/custom-text-price.vue
yudao-ui-app/pages/cart/cart.vue
yudao-ui-app/pages/category/category.vue
yudao-ui-app/pages/forgot/forgot.vue
yudao-ui-app/pages/index/index.vue
yudao-ui-app/pages/login/login.vue
yudao-ui-app/pages/profile/profile.vue
yudao-ui-app/pages/register/register.vue
yudao-ui-app/pages/user/user.vue
yudao-ui-app/uni.scss
+# 告诉EditorConfig插件，这是根文件，不用继续往上查找
+root = true
+
+# 匹配全部文件
+[*]
+# 设置字符集
+charset = utf-8
+# 缩进风格，可选space、tab
+indent_style = space
+# 缩进的空格数
+indent_size = 2
+# 结尾换行符，可选lf、cr、crlf
+end_of_line = lf
+# 在文件结尾插入新行
+insert_final_newline = true
+# 删除一行中的前后空格
+trim_trailing_whitespace = true
+
+# 匹配md结尾的文件
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
 <template>
   <view class="u-text-price-wrap">
-    <text
-        v-for="(item,index) in textArray"
-        :key="index"
-        :style="{'font-size': (index === 1 ? integerSize : size) + 'px', 'color': color}"
-    >
-      {{item}}
+    <text v-for="(item, index) in textArray" :key="index" :style="{ 'font-size': (index === 1 ? integerSize : size) + 'px', 'color': color }">
+      {{ item }}
     </text>
   </view>
 </template>
@@ -15,12 +11,11 @@
  * 此组件存在只为简单的显示特定样式的(人名币)价格数字
  */
 export default {
-  name: "u--text-price",
-  components: {
-  },
+  name: 'custom-text-price',
+  components: {},
   props: {
-    text: {
-      type: String,
+    price: {
+      type: [String, Number],
       default: '0.00'
     },
     color: {
@@ -30,31 +25,30 @@ export default {
     //字体大小
     size: {
       type: [String, Number],
-      default: uni.$u.props.text.size
+      default: 15
     },
     //整形部分字体大小可单独定义
     intSize: {
       type: [String, Number],
-      default: uni.$u.props.text.size
+      default: 15
     }
   },
   computed: {
     textArray() {
-      let array = ['￥'];
-      if (!/^\d+(\.\d+)?$/.test(this.text)) {
-        uni.$u.error('组件<u--text-price :text="???" 此处参数应为金额数字');
+      let array = ['￥']
+      if (!/^\d+(\.\d+)?$/.test(this.price)) {
+        console.error('组件<custom-text-price :text="???" 此处参数应为金额数字')
       } else {
-        let arr = parseFloat(this.text).toFixed(2).split('.');
-        array.push(arr[0]);
-        array.push('.' + arr[1]);
+        let arr = parseFloat(this.price).toFixed(2).split('.')
+        array.push(arr[0])
+        array.push('.' + arr[1])
       }
-      return array;
+      return array
     },
     integerSize() {
       return this.intSize ? this.intSize : this.size
     }
   }
-};
+}
 </script>
-<style>
-</style>
 \ No newline at end of file
+<style></style>
 <template>
-	<view class="container">
-
-	</view>
+  <view class="container"> </view>
 </template>
 <script>
-	export default {
-		data() {
-			return {
-				title: ''
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+export default {
+  data() {
+    return {
+      title: ''
+    }
+  },
+  onLoad() {},
+  methods: {}
+}
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
 <template>
-	<view class="container">
+  <view class="container">
     <view class="search-wrap">
       <u-search placeholder="搜索" disabled height="32" :show-action="false" @click="handleSearchClick"></u-search>
     </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="index">
-            <view class="item-title" :class="index === currentIndex ? 'active' : ''" @click="handleCategoryClick(index)">
-              <text>{{item.name}}</text>
+          <u-list-item 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>
@@ -19,7 +19,7 @@
         </view>
         <view>
           <u-list class="prod-list" @scrolltolower="scrolltolower">
-            <u-list-item v-for="(item, index) in productList" :key="index">
+            <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="140rpx" height="140rpx" :src="item.image"></u--image>
                 <view class="item-info">
@@ -29,7 +29,7 @@
                     <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
                   </view>
                   <view class="price-and-cart">
-                    <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
+                    <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>
@@ -39,144 +39,151 @@
         </view>
       </view>
     </view>
-	</view>
+  </view>
 </template>
 <script>
-	import UText from "../../uni_modules/uview-ui/components/u-text/u-text";
-  export default {
-    components: {UText},
-    data() {
-			return {
-        currentIndex: 0,
-        categoryList: [
-          {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-            name: '关注'
-          }, {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-            name: '推荐'
-          }, {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-            name: '电影'
-          }, {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-            name: '科技'
-          }, {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-            name: '音乐'
-          }, {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-            name: '美食'
-          }, {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-            name: '文化'
-          }, {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-            name: '财经'
-          }, {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-            name: '手工'
-          }],
-        productList: [
-          {
-            id: 1,
-            image: 'https://cdn.uviewui.com/uview/album/1.jpg',
-            title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
-            desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
-            price: '13.00'
-          },
-          {
-            id: 2,
-            image: 'https://cdn.uviewui.com/uview/album/2.jpg',
-            title: '商品222',
-            desc: '',
-            price: '23.00'
-          },
-          {
-            id: 3,
-            image: 'https://cdn.uviewui.com/uview/album/3.jpg',
-            title: '商品333',
-            desc: '商品描述信息2',
-            price: '33.00'
-          },
-          {
-            id: 4,
-            image: 'https://cdn.uviewui.com/uview/album/4.jpg',
-            title: '商品444',
-            desc: '商品描述信息4',
-            price: '43.00'
-          },
-          {
-            id: 5,
-            image: 'https://cdn.uviewui.com/uview/album/5.jpg',
-            title: '商品555',
-            desc: '商品描述信息5',
-            price: '53.00'
-          }
-        ]
-			}
-		},
-		onLoad() {
-		},
-		methods: {
-      handleSearchClick(e) {
-        console.log('监听点击准备跳转页面')
-      },
-      handleCategoryClick(index){
-        if (this.currentIndex !== index) {
-          this.currentIndex = index;
-          // TODO 查询下分类商品
+import UText from '../../uni_modules/uview-ui/components/u-text/u-text'
+export default {
+  components: { UText },
+  data() {
+    return {
+      currentIndex: 0,
+      categoryList: [
+        {
+          id: 1,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+          name: '关注'
+        },
+        {
+          id: 2,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+          name: '推荐'
+        },
+        {
+          id: 3,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+          name: '电影'
+        },
+        {
+          id: 4,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+          name: '科技'
+        },
+        {
+          id: 5,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+          name: '音乐'
+        },
+        {
+          id: 6,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+          name: '美食'
+        },
+        {
+          id: 7,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+          name: '文化'
+        },
+        {
+          id: 8,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+          name: '财经'
+        },
+        {
+          id: 9,
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+          name: '手工'
+        }
+      ],
+      productList: [
+        {
+          id: 0,
+          image: 'https://cdn.uviewui.com/uview/album/1.jpg',
+          title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
+          desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
+          price: '13.00'
+        },
+        {
+          id: 2,
+          image: 'https://cdn.uviewui.com/uview/album/2.jpg',
+          title: '商品222',
+          desc: '',
+          price: '23.00'
+        },
+        {
+          id: 3,
+          image: 'https://cdn.uviewui.com/uview/album/3.jpg',
+          title: '商品333',
+          desc: '商品描述信息2',
+          price: '33.00'
+        },
+        {
+          id: 4,
+          image: 'https://cdn.uviewui.com/uview/album/4.jpg',
+          title: '商品444',
+          desc: '商品描述信息4',
+          price: '43.00'
+        },
+        {
+          id: 5,
+          image: 'https://cdn.uviewui.com/uview/album/5.jpg',
+          title: '商品555',
+          desc: '商品描述信息5',
+          price: '53.00'
         }
-      },
-      handleProdItemClick(productId){
-        uni.$u.route('/pages/product/product', {
-          productId: productId
-        });
+      ]
+    }
+  },
+  onLoad() {},
+  methods: {
+    handleSearchClick(e) {
+      console.log('监听点击准备跳转页面')
+    },
+    handleCategoryClick(index) {
+      if (this.currentIndex !== index) {
+        this.currentIndex = index
+        // TODO 查询下分类商品
       }
-		}
-	}
+    },
+    handleProdItemClick(productId) {
+      uni.$u.route('/pages/product/product', {
+        productId: productId
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
-
 .search-wrap {
   background: $custom-bg-color;
   padding: 20rpx;
 }
-.category-box{
+.category-box {
   display: flex;
-  .box-left{
+  .box-left {
     width: 180rpx;
     padding-top: 20rpx;
     border-right: $custom-border-style;
-    .category-item{
+    .category-item {
       border-bottom: $custom-border-style;
       padding: 20rpx 0;
-      .item-title{
+      .item-title {
         padding-left: 30rpx;
         font-size: 30rpx;
-        &.active{
+        &.active {
           border-left: 6rpx solid $u-primary;
           font-weight: 700;
         }
       }
     }
   }
-  .box-right{
+  .box-right {
     width: 550rpx;
     padding-right: 20rpx;
-    .category-image{
+    .category-image {
       padding: 20rpx;
     }
@@ -186,9 +193,7 @@
       .prod-item {
         padding: 10rpx 20rpx;
         background: #fff;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+        @include flex-space-between;
         border-bottom: $custom-border-style;
         .prod-image {
@@ -206,8 +211,7 @@
             padding-bottom: 10rpx;
           }
           .price-and-cart {
-            display: flex;
-            justify-content: space-between;
+            @include flex-space-between;
           }
         }
       }
 <template>
   <view class="container">
-
     <view class="unp-header">
       <view class="unp-logo">
         <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
@@ -36,21 +35,12 @@
           <!-- 占位 -->
         </view>
-        <u-button
-            type="error"
-            text="重置密码"
-            customStyle="margin-top: 50px"
-            @click="handleSubmit"
-        ></u-button>
+        <u-button type="error" 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--form>
-
-
     </view>
-
   </view>
 </template>
@@ -64,24 +54,24 @@ export default {
       formData: {
         username: '',
         code: '',
-        password: '',
+        password: ''
       },
       rules: {
-        'username': {
+        username: {
           type: 'string',
           max: 20,
           required: true,
           message: '请输入您的账号',
           trigger: ['blur', 'change']
         },
-        'code': {
+        code: {
           type: 'number',
           max: 6,
           required: true,
           message: '请输入验证码',
           trigger: ['blur', 'change']
         },
-        'password': {
+        password: {
           type: 'string',
           max: 20,
           required: true,
@@ -91,24 +81,22 @@ export default {
       }
     }
   },
-  onLoad() {
-
-  },
+  onLoad() {},
   methods: {
-    handleUsernameChange(e){
-      let str = uni.$u.trim(e, 'all');
+    handleUsernameChange(e) {
+      let str = uni.$u.trim(e, 'all')
       this.$nextTick(() => {
         this.formData.username = str
       })
     },
-    handlePasswordChange(e){
-      let str = uni.$u.trim(e, 'all');
+    handlePasswordChange(e) {
+      let str = uni.$u.trim(e, 'all')
       this.$nextTick(() => {
         this.formData.password = str
       })
     },
     codeChange(text) {
-      this.tips = text;
+      this.tips = text
     },
     getCode() {
       if (this.$refs.uCode.canGetCode) {
@@ -117,22 +105,23 @@ export default {
           title: '正在获取验证码'
         })
         setTimeout(() => {
-          uni.hideLoading();
+          uni.hideLoading()
           // 这里此提示会被this.start()方法中的提示覆盖
-          uni.$u.toast('验证码已发送');
+          uni.$u.toast('验证码已发送')
           // 通知验证码组件内部开始倒计时
-          this.$refs.uCode.start();
-        }, 2000);
+          this.$refs.uCode.start()
+        }, 2000)
       } else {
-        uni.$u.toast('倒计时结束后再发送');
+        uni.$u.toast('倒计时结束后再发送')
       }
     },
     handleSubmit() {
-      this.$refs.form.validate().then(res => {
-        uni.$u.toast('点击了重置密码')
-      }).catch(err => {
-
-      })
+      this.$refs.form
+        .validate()
+        .then(res => {
+          uni.$u.toast('点击了重置密码')
+        })
+        .catch(err => {})
     },
     navigateBack() {
       uni.navigateBack()
@@ -142,26 +131,17 @@ export default {
 </script>
 <style lang="scss" scoped>
-
 .unp-header {
   height: 400rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
   .unp-logo {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    @include flex-center;
   }
 }
 .unp-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  .unp-form{
+  @include flex-center(column);
+  .unp-form {
     width: 560rpx;
   }
 }
@@ -169,14 +149,10 @@ export default {
 .lk-group {
   height: 40rpx;
   margin-top: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  @include flex-space-between;
   font-size: 12rpx;
   color: $u-primary;
   text-decoration: $u-primary;
 }
-
-
 </style>
@@ -8,20 +8,20 @@
     </u-sticky>
     <!--轮播图-->
-    <u-swiper :list="swiperList" previousMargin="20" nextMargin="20" circular height="200" @change="e => current = e.current" :autoplay="true" @click="handleSwiperClick">
+    <u-swiper :list="swiperList" previousMargin="20" nextMargin="20" circular height="200" @change="e => (current = e.current)" :autoplay="true" @click="handleSwiperClick">
       <view slot="indicator" class="indicator">
-        <view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']">
-        </view>
+        <view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']"> </view>
       </view>
     </u-swiper>
     <u-gap height="20px"></u-gap>
     <!--宫格菜单按钮-->
-    <u-grid :border="false" col="4"><u-grid-item v-for="(item,index) in menuList" :key="index">
-      <u-icon :name="item.icon" :size="40"></u-icon>
-      <text class="grid-title">{{item.title}}</text>
-    </u-grid-item>
+    <u-grid :border="false" col="4"
+      ><u-grid-item v-for="(item, index) in menuList" :key="index">
+        <u-icon :name="item.icon" :size="40"></u-icon>
+        <text class="grid-title">{{ item.title }}</text>
+      </u-grid-item>
     </u-grid>
     <u-gap height="15px"></u-gap>
@@ -38,7 +38,7 @@
           <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="index">
+          <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">
@@ -46,7 +46,7 @@
                   <u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text>
                 </view>
                 <view class="price-and-cart">
-                  <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
+                  <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>
@@ -63,7 +63,7 @@
           <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="index">
+          <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">
@@ -72,7 +72,7 @@
                   <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
                 </view>
                 <view class="price-and-cart">
-                  <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
+                  <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>
@@ -90,7 +90,7 @@
         </view>
         <u-list class="prod-list" @scrolltolower="scrolltolower">
-          <u-list-item v-for="(item, index) in productList" :key="index">
+          <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">
@@ -100,46 +100,40 @@
                   <u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text>
                 </view>
                 <view class="price-and-cart">
-                  <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
+                  <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>
             </view>
           </u-list-item>
         </u-list>
-
       </view>
     </view>
     <u-gap height="5px"></u-gap>
     <!--加载更多-->
-    <u-loadmore fontSize="32rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"/>
+    <u-loadmore fontSize="32rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
     <u-gap height="10px"></u-gap>
   </view>
 </template>
 <script>
-import {getBannerData,getNoticeData} from "../../common/api";
+import { getBannerData, getNoticeData } from '../../common/api'
 export default {
-  components: {
-
-  },
+  components: {},
   data() {
     return {
       current: 0,
       currentNum: 0,
-      bannerList: [
-        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-        'https://cdn.uviewui.com/uview/swiper/swiper1.png',],
-      menuList: [{icon: 'gift', title: '热门推荐'}, {icon: 'star', title: '收藏转发'}, {icon: 'thumb-up', title: '点赞投币'}, {icon: 'heart', title: '感谢支持'}],
-      noticeList:[
-        '寒雨连江夜入吴',
-        '平明送客楚山孤',
-        '洛阳亲友如相问',
-        '一片冰心在玉壶'
+      bannerList: ['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png'],
+      menuList: [
+        { icon: 'gift', title: '热门推荐' },
+        { icon: 'star', title: '收藏转发' },
+        { icon: 'thumb-up', title: '点赞投币' },
+        { icon: 'heart', title: '感谢支持' }
       ],
+      noticeList: ['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶'],
       productList: [
         {
           id: 1,
@@ -189,43 +183,47 @@ export default {
   },
   methods: {
     loadBannerData() {
-      getBannerData().then(res => {
-        this.bannerList = res.data;
-      }).catch(err => {
-        //console.log(err)
-      })
+      getBannerData()
+        .then(res => {
+          this.bannerList = res.data
+        })
+        .catch(err => {
+          //console.log(err)
+        })
     },
     loadNoticeData() {
-      getNoticeData().then(res => {
-        this.noticeList = res.data;
-      }).catch(err => {
-        //console.log(err)
-      })
+      getNoticeData()
+        .then(res => {
+          this.noticeList = res.data
+        })
+        .catch(err => {
+          //console.log(err)
+        })
     },
     handleSearchClick(e) {
       console.log('监听点击准备跳转页面')
     },
-    handleSwiperClick(index){
-      console.log('点击了图片索引值：',index)
+    handleSwiperClick(index) {
+      console.log('点击了图片索引值：', index)
     },
-    handleProdItemClick(productId){
+    handleProdItemClick(productId) {
       uni.$u.route('/pages/product/product', {
         productId: productId
-      });
+      })
     }
   },
   computed: {
-    swiperList(){
+    swiperList() {
       return this.bannerList.map(item => {
-        if (item){
-          return item;
+        if (item) {
+          return item
         }
       })
     },
     noticeTextList() {
       return this.noticeList.map(item => {
-        if (item.title){
-          return item.title;
+        if (item.title) {
+          return item.title
         }
       })
     }
@@ -234,7 +232,6 @@ export default {
 </script>
 <style lang="scss" scoped>
-
 .search-wrap {
   background: $custom-bg-color;
   padding: 20rpx;
@@ -266,10 +263,7 @@ export default {
 .prod-block {
   margin-top: -160px;
   .bloc-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
+    @include flex-space-between;
     padding: 10rpx 30rpx;
     .bloc-title {
@@ -287,7 +281,8 @@ export default {
     }
   }
-  &.half, &.list {
+  &.half,
+  &.list {
     margin-top: 0;
     .bloc-header {
       margin-top: 50rpx;
@@ -321,8 +316,7 @@ export default {
             padding-bottom: 10rpx;
           }
           .price-and-cart {
-            display: flex;
-            justify-content: space-between;
+            @include flex-space-between;
           }
         }
       }
@@ -336,9 +330,7 @@ export default {
   .prod-item {
     padding: 20rpx;
     background: #fff;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    @include flex-space-between;
     border-bottom: $custom-border-style;
     .prod-image {
@@ -356,11 +348,9 @@ export default {
         padding-bottom: 10rpx;
       }
       .price-and-cart {
-        display: flex;
-        justify-content: space-between;
+        @include flex-space-between;
       }
     }
   }
 }
-
 </style>
 <template>
-	<view class="container">
-
+  <view class="container">
     <view class="unp-header">
       <view class="unp-logo">
         <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
@@ -23,12 +22,12 @@
         <u-gap height="20"></u-gap>
         <u-form-item v-if="currentModeIndex === 0" label="密码" prop="password" labelWidth="60" borderBottom ref="item-password">
-            <u-input :type="inputType" maxlength="16" v-model="formData.password" placeholder="请填写密码" border="none">
-              <template slot="suffix">
+          <u-input :type="inputType" maxlength="16" v-model="formData.password" placeholder="请填写密码" border="none">
+            <template slot="suffix">
               <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
               <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
-              </template>
-            </u-input>
+            </template>
+          </u-input>
         </u-form-item>
         <u-form-item v-else label="验证码" prop="code" labelWidth="60" borderBottom>
@@ -41,170 +40,160 @@
         <u-gap height="20"></u-gap>
         <u-button type="info" text="返回" @click="navigateBack()"></u-button>
-
       </u--form>
-
     </view>
-
-	</view>
+  </view>
 </template>
 <script>
-import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api";
-
-  export default {
-		data() {
-			return {
-        //租户ID
-        agent: 1,
-        currentModeIndex: 0,
-        loginModeList: ['密码登录', '验证码登录'],
-        inputType: 'password',
-        codeDisabled: false,
-        codeTips: '',
-        formData: {
-          mobile: '15601691234',
-          password: '',
-          code: ''
-        },
-        rules: {
-          'mobile': [
-            {
-              type: 'integer',
-              required: true,
-              message: '请填写手机号',
-              trigger: ['blur', 'change']
-            },
-            {
-              // 自定义验证函数，见上说明
-              validator: (rule, value, callback) => {
-                // 上面有说，返回true表示校验通过，返回false表示不通过
-                // uni.$u.test.mobile()就是返回true或者false的
-                return uni.$u.test.mobile(value);
-              },
-              message: '手机号码不正确',
-              // 触发器可以同时用blur和change
-              trigger: ['change','blur'],
-            }
-          ],
-          'password': {
-            type: 'string',
-            min: 4,
-            max: 16,
-            required: true,
-            message: '密码长度4-16位密码',
-            trigger: ['blur', 'change']
-          },
-          'code': {
+import { passwordLogin, sendSmsCode, smsLogin } from '../../common/api'
+
+export default {
+  data() {
+    return {
+      //租户ID
+      agent: 1,
+      currentModeIndex: 0,
+      loginModeList: ['密码登录', '验证码登录'],
+      inputType: 'password',
+      codeDisabled: false,
+      codeTips: '',
+      formData: {
+        mobile: '15601691234',
+        password: '',
+        code: ''
+      },
+      rules: {
+        mobile: [
+          {
             type: 'integer',
-            len: 4,
             required: true,
-            message: '请填写4位验证码',
+            message: '请填写手机号',
             trigger: ['blur', 'change']
+          },
+          {
+            // 自定义验证函数，见上说明
+            validator: (rule, value, callback) => {
+              // 上面有说，返回true表示校验通过，返回false表示不通过
+              // uni.$u.test.mobile()就是返回true或者false的
+              return uni.$u.test.mobile(value)
+            },
+            message: '手机号码不正确',
+            // 触发器可以同时用blur和change
+            trigger: ['change', 'blur']
           }
+        ],
+        password: {
+          type: 'string',
+          min: 4,
+          max: 16,
+          required: true,
+          message: '密码长度4-16位密码',
+          trigger: ['blur', 'change']
+        },
+        code: {
+          type: 'integer',
+          len: 4,
+          required: true,
+          message: '请填写4位验证码',
+          trigger: ['blur', 'change']
         }
-			}
-		},
-		onLoad() {
-
-		},onReady(){
-      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
-      this.$refs.form.setRules(this.rules)
+      }
+    }
+  },
+  onLoad() {},
+  onReady() {
+    // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
+    this.$refs.form.setRules(this.rules)
+  },
+  methods: {
+    handleModeChange(index) {
+      if (index !== this.currentModeIndex) {
+        this.currentModeIndex = index
+        this.$refs.form.clearValidate()
+      }
     },
-		methods: {
-      handleModeChange(index) {
-        if (index !== this.currentModeIndex){
-          this.currentModeIndex = index;
-          this.$refs.form.clearValidate();
-        }
-      },
-      codeChange(text) {
-        this.codeTips = text;
-      },
-      getCode() {
-        const mobile = this.formData.mobile;
-        if (!mobile) {
-          uni.$u.toast('请填写手机号');
-        } else if (!uni.$u.test.mobile(mobile)){
-          uni.$u.toast('手机号格式不正确');
-        } else if (this.$refs.uCode.canGetCode) {
-          // 模拟向后端请求验证码
-          uni.showLoading({
-            title: '正在获取验证码'
-          });
+    codeChange(text) {
+      this.codeTips = text
+    },
+    getCode() {
+      const mobile = this.formData.mobile
+      if (!mobile) {
+        uni.$u.toast('请填写手机号')
+      } else if (!uni.$u.test.mobile(mobile)) {
+        uni.$u.toast('手机号格式不正确')
+      } else if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: '正在获取验证码'
+        })
-          //scene:1登陆获取验证码场景
-          sendSmsCode({agent: 1, mobile:mobile, scene:1 }).then(res => {
+        //scene:1登陆获取验证码场景
+        sendSmsCode({ agent: 1, mobile: mobile, scene: 1 })
+          .then(res => {
             //console.log(res)
-            uni.hideLoading();
-            if (res.data.code === 0){
+            uni.hideLoading()
+            if (res.data.code === 0) {
               // 这里此提示会被this.start()方法中的提示覆盖
-              uni.$u.toast('验证码已发送');
+              uni.$u.toast('验证码已发送')
               // 通知验证码组件内部开始倒计时
-              this.$refs.uCode.start();
+              this.$refs.uCode.start()
             } else {
-              uni.$u.toast(res.data.msg);
+              uni.$u.toast(res.data.msg)
             }
-          }).catch(err => {
-            uni.$u.toast('服务器接口请求异常');
           })
-        } else {
-          uni.$u.toast('倒计时结束后再发送');
-        }
-      },
-      handleSubmit() {
-        this.$refs.form.validate().then(res => {
-          uni.$u.toast('登录');
-          if (this.currentModeIndex === 0){
-            passwordLogin({agent: 1, mobile:this.formData.mobile, password:this.formData.password}).then(res => {
-              if (res.data.code === 0){
-                uni.$u.toast('登录成功');
+          .catch(err => {
+            uni.$u.toast('服务器接口请求异常')
+          })
+      } else {
+        uni.$u.toast('倒计时结束后再发送')
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate().then(res => {
+        uni.$u.toast('登录')
+        if (this.currentModeIndex === 0) {
+          passwordLogin({ agent: 1, mobile: this.formData.mobile, password: this.formData.password })
+            .then(res => {
+              if (res.data.code === 0) {
+                uni.$u.toast('登录成功')
                 // TODO 登录成功，保存toke
               } else {
-                uni.$u.toast(res.data.msg);
+                uni.$u.toast(res.data.msg)
                 // TODO 登录失败
-                }
-            }).catch(err => {
-              uni.$u.toast('服务器接口请求异常');
+              }
             })
-          } else if (this.currentModeIndex === 1) {
-            smsLogin({agent: 1, mobile:this.formData.mobile, code:this.formData.code})
-          }
-        })
-      },
-      navigateBack() {
-        uni.navigateBack()
-      }
-		}
-	}
+            .catch(err => {
+              uni.$u.toast('服务器接口请求异常')
+            })
+        } else if (this.currentModeIndex === 1) {
+          smsLogin({ agent: 1, mobile: this.formData.mobile, code: this.formData.code })
+        }
+      })
+    },
+    navigateBack() {
+      uni.navigateBack()
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
-
 .unp-header {
   height: 400rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
   .unp-logo {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    @include flex-center(column);
   }
 }
-
 .unp-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  @include flex-center(column);
-  .mode-section{
+  .mode-section {
     width: 560rpx;
   }
-  .unp-form{
+  .unp-form {
     width: 560rpx;
   }
 }
@@ -212,14 +201,10 @@ import {passwordLogin,sendSmsCode,smsLogin} from &quot;../../common/api&quot;;
 .lk-group {
   height: 40rpx;
   margin-top: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  @include flex-space-between;
   font-size: 12rpx;
   color: $u-primary;
   text-decoration: $u-primary;
 }
-
-
 </style>
 <template>
-	<view class="container">
-个人资料
-	</view>
+  <view class="container"> 个人资料 </view>
 </template>
 <script>
-	export default {
-		data() {
-			return {
-				title: ''
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
+export default {
+  data() {
+    return {
+      title: ''
+    }
+  },
+  onLoad() {},
+  methods: {}
+}
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
 <template>
   <view class="container">
-
     <view class="unp-header">
       <view class="unp-logo">
         <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
@@ -25,24 +24,15 @@
         </u-form-item>
         <view class="lk-group">
-        <!-- 占位 -->
+          <!-- 占位 -->
         </view>
-        <u-button
-            type="success"
-            text="注册账号"
-            customStyle="margin-top: 50px"
-            @click="handleSubmit"
-        ></u-button>
+        <u-button type="success" 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--form>
-
-
     </view>
-
   </view>
 </template>
@@ -53,17 +43,17 @@ export default {
       inputType: 'password',
       formData: {
         username: '',
-        password: '',
+        password: ''
       },
       rules: {
-        'username': {
+        username: {
           type: 'string',
           max: 20,
           required: true,
           message: '请输入您的账号',
           trigger: ['blur', 'change']
         },
-        'password': {
+        password: {
           type: 'string',
           max: 20,
           required: true,
@@ -73,28 +63,27 @@ export default {
       }
     }
   },
-  onLoad() {
-
-  },
+  onLoad() {},
   methods: {
-    handleUsernameChange(e){
-      let str = uni.$u.trim(e, 'all');
+    handleUsernameChange(e) {
+      let str = uni.$u.trim(e, 'all')
       this.$nextTick(() => {
         this.formData.username = str
       })
     },
-    handlePasswordChange(e){
-      let str = uni.$u.trim(e, 'all');
+    handlePasswordChange(e) {
+      let str = uni.$u.trim(e, 'all')
       this.$nextTick(() => {
         this.formData.password = str
       })
     },
     handleSubmit() {
-      this.$refs.form.validate().then(res => {
-        uni.$u.toast('点击了注册账号')
-      }).catch(err => {
-
-      })
+      this.$refs.form
+        .validate()
+        .then(res => {
+          uni.$u.toast('点击了注册账号')
+        })
+        .catch(err => {})
     },
     navigateBack() {
       uni.navigateBack()
@@ -104,41 +93,28 @@ export default {
 </script>
 <style lang="scss" scoped>
-
 .unp-header {
   height: 400rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
   .unp-logo {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    @include flex-center;
   }
 }
 .unp-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  .unp-form{
+  @include flex-center;
+  .unp-form {
     width: 560rpx;
   }
 }
 .lk-group {
+  @include flex-space-between;
   height: 40rpx;
   margin-top: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   font-size: 12rpx;
   color: $u-primary;
   text-decoration: $u-primary;
 }
-
-
 </style>
 <template>
-	<view class="container">
+  <view class="container">
     <view class="user-header">
       <view class="user-info" @click="handleUserInfoClick">
         <u-avatar size="80" :src="avatar"></u-avatar>
-        <text class="nick-name">{{nickName}}</text>
+        <text class="nick-name">{{ nickName }}</text>
       </view>
     </view>
@@ -19,10 +19,11 @@
       </view>
       <view class="order-status-box">
-        <u-grid :border="false" :col="orderStatusList.length"><u-grid-item v-for="(item,index) in orderStatusList" :key="index">
-          <u-icon :name="item.icon" :size="32"></u-icon>
-          <text class="grid-title">{{item.title}}</text>
-        </u-grid-item>
+        <u-grid :border="false" :col="orderStatusList.length"
+          ><u-grid-item v-for="(item, index) in orderStatusList" :key="index">
+            <u-icon :name="item.icon" :size="32"></u-icon>
+            <text class="grid-title">{{ item.title }}</text>
+          </u-grid-item>
         </u-grid>
       </view>
     </view>
@@ -30,10 +31,11 @@
     <u-gap height="10" bgColor="#f3f3f3"></u-gap>
     <view class="stat-box">
-      <u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statList" :key="index">
-        <text class="grid-value">{{item.value}}</text>
-        <text class="grid-title">{{item.title}}</text>
-      </u-grid-item>
+      <u-grid :border="false" col="3"
+        ><u-grid-item v-for="(item, index) in statList" :key="index">
+          <text class="grid-value">{{ item.value }}</text>
+          <text class="grid-title">{{ item.title }}</text>
+        </u-grid-item>
       </u-grid>
     </view>
@@ -47,47 +49,48 @@
     </u-cell-group>
     <u-button class="logout-btn" type="error" color="#ea322b" text="确定"></u-button>
-
-	</view>
+  </view>
 </template>
 <script>
-	export default {
-		data() {
-			return {
-        avatar:'',
-        nickName:'点击登录',
-        orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}],
-        statList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-      handleUserInfoClick(){
-        // TODO 判断是否已经登录逻辑
-        if (!uni.getStorageSync('token')) {
-          uni.$u.route('/pages/login/login');
-        } else {
-          uni.$u.route('/pages/profile/profile');
-        }
+export default {
+  data() {
+    return {
+      avatar: '',
+      nickName: '点击登录',
+      orderStatusList: [
+        { icon: 'rmb-circle', title: '待支付' },
+        { icon: 'car', title: '代发货' },
+        { icon: 'order', title: '待收货' },
+        { icon: 'integral', title: '已完成' }
+      ],
+      statList: [
+        { value: '2', title: '我的收藏' },
+        { value: '3', title: '我的消息' },
+        { value: '3', title: '我的足迹' }
+      ]
+    }
+  },
+  onLoad() {},
+  methods: {
+    handleUserInfoClick() {
+      // TODO 判断是否已经登录逻辑
+      if (!uni.getStorageSync('token')) {
+        uni.$u.route('/pages/login/login')
+      } else {
+        uni.$u.route('/pages/profile/profile')
       }
-		}
-	}
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .user-header {
+  @include flex-center(column);
   height: 280rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   .user-info {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    @include flex-center(column);
     .nick-name {
       margin-top: 20rpx;
       font-size: 32rpx;
@@ -97,10 +100,7 @@
 }
 .order-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+  @include flex-space-between;
   padding: 20rpx 30rpx;
   border-bottom: $custom-border-style;
@@ -110,10 +110,7 @@
   }
   .see-all {
     height: 40rpx;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: right;
+    @include flex-right;
     color: #666666;
     font-size: 26rpx;
   }
@@ -151,5 +148,4 @@
   margin-top: 60rpx;
   width: 300rpx;
 }
-
 </style>
@@ -22,3 +22,39 @@ $custom-bg-color: #ffffff;
 /* 边框样式 */
 $custom-border-style: 1rpx solid #f3f3f3;
+
+
+@mixin flex-left($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+  align-items: center;
+  justify-content: left;
+}
+
+@mixin flex-right($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+  align-items: center;
+  justify-content: right;
+}
+
+@mixin flex-center($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-space-between($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-space-around($direction: row) {
+  display: flex;
+  flex-direction: $direction;
+  align-items: center;
+  justify-content: space-around;
+}