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

sfmind
1 parent e10b7075
Showing 12 changed files with 436 additions and 183 deletions
yudao-ui-app/app.scss
yudao-ui-app/common/props.js
yudao-ui-app/pages.json
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/product/product.vue
yudao-ui-app/pages/register/register.vue
yudao-ui-app/pages/user/user.vue
yudao-ui-app/uni.scss
yudao-ui-app/uni_modules/uview-ui/components/u--text-price/u--text-price.vue
 /* 页面公共scss */
 .container {
 	padding-top: var(--status-bar-height);//uni-app提供了状态栏高度的css变量--status-bar-height
-	background-color: $uni-bg-color;
+	background-color: $custom-bg-color;
 	box-sizing: border-box;
 	height: 100%;
 }
-
-/* 布局间距 */
-.m-0-r {
-	margin: 0rpx;
-}
-
-.mtb-0-r {
-	margin-top: 0rpx;
-	margin-bottom: 0rpx;
-}
-
-.no-mlt {
-	margin-left: 0rpx;
-	margin-right: 0rpx;
-}
-
-.mtb-30-r {
-	margin-top: 30rpx;
-	margin-bottom: 30rpx;
-}
-
-.mlr-30-r {
-	margin-left: 30rpx;
-	margin-right: 30rpx;
-}
-
-.mt-20-r {margin-top: 20rpx;}
-.mt-30-r {margin-top: 30rpx;}
-.mt-40-r {margin-top: 40rpx;}
-.mt-50-r {margin-top: 50rpx;}
-
-.mb-20-r {margin-bottom: 20rpx;}
-.mb-30-r {margin-bottom: 30rpx;}
-.mb-40-r {margin-bottom: 40rpx;}
-.mb-50-r {margin-bottom: 50rpx;}
-
-.ml-20-r {margin-left: 20rpx;}
-.ml-30-r {margin-left: 30rpx;}
-.ml-40-r {margin-left: 40rpx;}
-.ml-50-r {margin-left: 50rpx;}
-
-.mr-20-r {margin-right: 20rpx;}
-.mr-30-r {margin-right: 30rpx;}
-.mr-40-r {margin-right: 40rpx;}
-.mr-50-r {margin-right: 50rpx;}
+/* uView组件全局属性 */
 uni.$u.props.gap.bgColor = '#ffffff'
 uni.$u.props.gap.height = '10'
@@ -47,6 +47,12 @@
 			"style": {
 				"navigationBarTitleText": "个人资料"
 			}
+		},
+		{
+			"path": "pages/product/product",
+			"style": {
+				"navigationBarTitleText": "商品详情"
+			}
 		}
 	],
 	"tabBar": {
 <template>
 	<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>
+            </view>
+          </u-list-item>
+        </u-list>
+      </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>
+        <view>
+          <u-list class="prod-list" @scrolltolower="scrolltolower">
+            <u-list-item v-for="(item, index) in productList" :key="index">
+              <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">
+                  <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 :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>
+                    <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
+                  </view>
+                </view>
+              </view>
+            </u-list-item>
+          </u-list>
+        </view>
+      </view>
+    </view>
 	</view>
 </template>
 <script>
-	export default {
-		data() {
+	import UText from "../../uni_modules/uview-ui/components/u-text/u-text";
+  export default {
+    components: {UText},
+    data() {
 			return {
-				title: ''
+        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 查询下分类商品
+        }
+      },
+      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{
+  display: flex;
+  .box-left{
+    width: 180rpx;
+    padding-top: 20rpx;
+    border-right: $custom-border-style;
+    .category-item{
+      border-bottom: $custom-border-style;
+      padding: 20rpx 0;
+      .item-title{
+        padding-left: 30rpx;
+        font-size: 30rpx;
+        &.active{
+          border-left: 6rpx solid $u-primary;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+  .box-right{
+    width: 550rpx;
+    padding-right: 20rpx;
+    .category-image{
+      padding: 20rpx;
+    }
+
+    .prod-list {
+      height: auto !important;
+
+      .prod-item {
+        padding: 10rpx 20rpx;
+        background: #fff;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        border-bottom: $custom-border-style;
+
+        .prod-image {
+          border-radius: 10rpx;
+          /deep/ * {
+            border-radius: 10rpx;
+          }
+        }
+
+        .item-info {
+          width: 350rpx;
+          padding: 5rpx;
+          .info-text {
+            height: 70rpx;
+            padding-bottom: 10rpx;
+          }
+          .price-and-cart {
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
@@ -174,8 +174,8 @@ export default {
   justify-content: space-between;
   font-size: 12rpx;
-  color: #3c9cff;
-  text-decoration: #3c9cff;
+  color: $u-primary;
+  text-decoration: $u-primary;
 }
@@ -15,14 +15,16 @@
       </view>
     </u-swiper>
+    <u-gap height="20px"></u-gap>
+
     <!--宫格菜单按钮-->
-    <view class="mt-40-r mb-30-r">
-      <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>
-    </view>
+    <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>
     <!--消息滚动栏-->
     <u-notice-bar style="padding: 13px 12px" :text="noticeList" mode="link" direction="column" @click="click"></u-notice-bar>
@@ -37,14 +39,14 @@
         </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">
-            <view class="prod-item">
-              <u--image class="prod-image" width="230rpx" height="230rpx" :src="item"></u--image>
+            <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="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
+                  <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" integerSize="18" :text="233.33"></u--text-price>
+                  <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
                   <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
                 </view>
               </view>
@@ -62,15 +64,15 @@
         </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">
-            <view class="prod-item">
-              <u--image class="prod-image" width="345rpx" height="345rpx" :src="item"></u--image>
+            <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="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
-                  <u--text :lines="1" size="12px" color="#939393" text="斯是陋室，惟吾德馨。"></u--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">
-                  <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
+                  <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
                   <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
                 </view>
               </view>
@@ -89,15 +91,16 @@
         <u-list class="prod-list" @scrolltolower="scrolltolower">
           <u-list-item v-for="(item, index) in productList" :key="index">
-            <view class="prod-item">
-              <u--image class="prod-image" width="210rpx" height="210rpx" :src="item"></u--image>
+            <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="2" size="14px" color="#333333" text="山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。"></u--text>
-                  <u--text :lines="1" size="12px" color="#939393" text="斯是陋室，惟吾德馨。"></u--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">
-                  <u--text-price color="red" size="12" integerSize="18" :text="233.33"></u--text-price>
+                  <u--text-price color="red" size="12" intSize="18" :text="item.price"></u--text-price>
                   <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
                 </view>
               </view>
@@ -138,11 +141,41 @@ export default {
         '一片冰心在玉壶'
       ],
       productList: [
-        'https://cdn.uviewui.com/uview/album/1.jpg',
-        'https://cdn.uviewui.com/uview/album/2.jpg',
-        'https://cdn.uviewui.com/uview/album/3.jpg',
-        'https://cdn.uviewui.com/uview/album/4.jpg',
-        'https://cdn.uviewui.com/uview/album/5.jpg',
+        {
+          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'
+        }
       ],
       status: 'nomore',
       loadingText: '努力加载中...',
@@ -174,6 +207,11 @@ export default {
     },
     handleSwiperClick(index){
       console.log('点击了图片索引值：',index)
+    },
+    handleProdItemClick(productId){
+      uni.$u.route('/pages/product/product', {
+        productId: productId
+      });
     }
   },
   computed: {
@@ -198,7 +236,7 @@ export default {
 <style lang="scss" scoped>
 .search-wrap {
-  background: #ffffff;
+  background: $custom-bg-color;
   padding: 20rpx;
 }
@@ -215,7 +253,7 @@ export default {
     transition: background-color 0.3s;
     &--active {
-      background-color: #ffffff;
+      background-color: $custom-bg-color;
     }
   }
 }
@@ -235,12 +273,12 @@ export default {
     padding: 10rpx 30rpx;
     .bloc-title {
-      color: #ffffff;
+      color: $custom-bg-color;
       font-size: 34rpx;
     }
     .see-more {
-      color: #ffffff;
-      background: #3c9cff;
+      color: $custom-bg-color;
+      background: $u-primary;
       padding: 0 30rpx;
       height: 50rpx;
       line-height: 50rpx;
@@ -279,7 +317,8 @@ export default {
         .item-info {
           padding: 15rpx;
           .info-text {
-            padding-bottom: 15rpx;
+            height: 70rpx;
+            padding-bottom: 10rpx;
           }
           .price-and-cart {
             display: flex;
@@ -300,7 +339,7 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: 1rpx solid #f3f3f3;
+    border-bottom: $custom-border-style;
     .prod-image {
       border-radius: 10rpx;
@@ -310,9 +349,11 @@ export default {
     }
     .item-info {
-      padding: 20rpx 30rpx;
+      width: 450rpx;
+      padding: 20rpx 30rpx 0 30rpx;
       .info-text {
-        padding-bottom: 15rpx;
+        height: 100rpx;
+        padding-bottom: 10rpx;
       }
       .price-and-cart {
         display: flex;
@@ -217,8 +217,8 @@ import {passwordLogin,sendSmsCode,smsLogin} from &quot;../../common/api&quot;;
   justify-content: space-between;
   font-size: 12rpx;
-  color: #3c9cff;
-  text-decoration: #3c9cff;
+  color: $u-primary;
+  text-decoration: $u-primary;
 }
+<template>
+  <view class="container">
+    <u-swiper :list="product.images" @change="e => currentNum = e.current" :autoplay="false" height="750rpx" radius="0" indicatorStyle="right: 20px">
+      <view slot="indicator" class="indicator-num">
+        <text class="indicator-num__text">{{ currentNum + 1 }}/{{ product.images.length }}</text>
+      </view>
+    </u-swiper>
+
+    <view class="product-box">
+      <view class="prod-info">
+        <view class="info-text">
+          <u--text :lines="2" size="14px" color="#333333" :text="product.title"></u--text>
+          <u-gap height="5px"></u-gap>
+          <u--text :lines="3" size="12px" color="#939393" :text="product.desc"></u--text>
+        </view>
+        <view class="price-and-cart">
+          <u--text-price color="red" size="16" intSize="26" :text="product.price"></u--text-price>
+        </view>
+      </view>
+      <view class="prod-collect">
+        <u-icon name="heart" color="#2979ff" size="28"></u-icon>
+      </view>
+    </view>
+  </view>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 0,
+      currentNum: 0,
+      product: {
+        id: '',
+        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'],
+        title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
+        desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
+        price: '13.00'
+      }
+    }
+  },
+  onLoad(e) {
+    if (!e.productId) {
+      uni.$u.toast('请求参数错误');
+    } else {
+      this.product.id = e.productId;
+      this.loadProductData();
+      // TODO 请求接口获取商品详情数据
+    }
+    console.log(e);
+  },
+  methods: {
+    loadProductData(){
+
+    }
+
+  },
+  computed: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.indicator-num {
+  padding: 2px 0;
+  background-color: rgba(0, 0, 0, 0.35);
+  border-radius: 100px;
+  width: 35px;
+  @include flex;
+  justify-content: center;
+
+  &__text {
+    color: #FFFFFF;
+    font-size: 12px;
+  }
+}
+
+.product-box {
+  padding: 40rpx 40rpx 10rpx 40rpx;
+  display: flex;
+  border-bottom: $custom-border-style;
+  .prod-info {
+    padding-right: 30rpx;
+    .info-text {
+      padding-bottom: 10rpx;
+    }
+    .price-and-cart {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .prod-collect {
+    margin-top: 15rpx;
+  }
+}
+
+
+
+</style>
@@ -136,8 +136,8 @@ export default {
   justify-content: space-between;
   font-size: 12rpx;
-  color: #3c9cff;
-  text-decoration: #3c9cff;
+  color: $u-primary;
+  text-decoration: $u-primary;
 }
@@ -7,7 +7,7 @@
       </view>
     </view>
-    <u-gap height="10" bgColor="#f6f6f6"></u-gap>
+    <u-gap height="10" bgColor="#f3f3f3"></u-gap>
     <view>
       <view class="order-header">
@@ -18,7 +18,7 @@
         </view>
       </view>
-      <view class="mt-40-r mb-40-r">
+      <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>
@@ -27,16 +27,17 @@
       </view>
     </view>
-    <u-gap height="10" bgColor="#f6f6f6"></u-gap>
-    <view class="mt-20-r mb-20-r">
-      <u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statisticsList" :key="index">
+    <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>
     </view>
-    <u-gap height="10" bgColor="#f6f6f6"></u-gap>
+    <u-gap height="10" bgColor="#f3f3f3"></u-gap>
     <u-cell-group class="fun-list">
       <u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
@@ -57,7 +58,7 @@
         avatar:'',
         nickName:'点击登录',
         orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}],
-        statisticsList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
+        statList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
 			}
 		},
 		onLoad() {
@@ -101,7 +102,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 30rpx;
-  border-bottom: 1rpx solid #f3f3f3;
+  border-bottom: $custom-border-style;
   .order-title {
     color: #333333;
@@ -118,6 +119,14 @@
   }
 }
+.order-status-box {
+  padding: 40rpx 0;
+}
+
+.stat-box {
+  padding: 20rpx 0;
+}
+
 .grid-title {
   line-height: 50rpx;
   font-size: 26rpx;
@@ -134,7 +143,7 @@
   .fun-item {
     padding-top: 10rpx;
     padding-bottom: 10rpx;
-    border-bottom: 1rpx solid #f3f3f3;
+    border-bottom: $custom-border-style;
   }
 }
@@ -15,65 +15,10 @@
 /* 引入uView主题样式 */
 @import '@/uni_modules/uview-ui/theme.scss';
-/* 颜色变量 */
+/* 全局自定义scss变量 */
-/* 行为相关颜色 */
-$uni-color-primary: #007aff;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
+/* 页面背景颜色 */
+$custom-bg-color: #ffffff;
-/* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
-$uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
-
-/* 背景颜色 */
-$uni-bg-color:#ffffff;
-$uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
-
-/* 边框颜色 */
-$uni-border-color:#c8c7cc;
-
-/* 尺寸变量 */
-
-/* 文字尺寸 */
-$uni-font-size-sm:12px;
-$uni-font-size-base:14px;
-$uni-font-size-lg:16;
-
-/* 图片尺寸 */
-$uni-img-size-sm:20px;
-$uni-img-size-base:26px;
-$uni-img-size-lg:40px;
-
-/* Border Radius */
-$uni-border-radius-sm: 2px;
-$uni-border-radius-base: 3px;
-$uni-border-radius-lg: 6px;
-$uni-border-radius-circle: 50%;
-
-/* 水平间距 */
-$uni-spacing-row-sm: 5px;
-$uni-spacing-row-base: 10px;
-$uni-spacing-row-lg: 15px;
-
-/* 垂直间距 */
-$uni-spacing-col-sm: 4px;
-$uni-spacing-col-base: 8px;
-$uni-spacing-col-lg: 12px;
-
-/* 透明度 */
-$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
-
-/* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:20px;
-$uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:26px;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+/* 边框样式 */
+$custom-border-style: 1rpx solid #f3f3f3;
 <template>
   <view class="u-text-price-wrap">
-    <uvText
-        class="u-text-price-item"
+    <text
         v-for="(item,index) in textArray"
         :key="index"
-        :text="item"
-        :size="(index === 1 && integerSize) ? integerSize : size"
-        :color="color"
+        :style="{'font-size': (index === 1 ? integerSize : size) + 'px', 'color': color}"
     >
-    </uvText>
+      {{item}}
+    </text>
   </view>
 </template>
 <script>
 /**
- * 此组件存在只为简单的显示特定样式的价格数字
+ * 此组件存在只为简单的显示特定样式的(人名币)价格数字
  */
-import uvText from "../u-text/u-text.vue";
-import props from "../u-text/props.js";
 export default {
   name: "u--text-price",
-  mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
   components: {
-    uvText,
   },
   props: {
+    text: {
+      type: String,
+      default: '0.00'
+    },
+    color: {
+      type: String,
+      default: '#333333'
+    },
+    //字体大小
+    size: {
+      type: [String, Number],
+      default: uni.$u.props.text.size
+    },
     //整形部分字体大小可单独定义
-    integerSize: {
+    intSize: {
       type: [String, Number],
       default: uni.$u.props.text.size
     }
@@ -42,18 +49,12 @@ export default {
         array.push('.' + arr[1]);
       }
       return array;
+    },
+    integerSize() {
+      return this.intSize ? this.intSize : this.size
     }
   }
 };
 </script>
 <style>
-.u-text-price-wrap {
-  display: flex;
-  flex-direction: row;
-  justify-content: left;
-}
-
-.u-text-price-item{
-  flex: 0;
-}
 </style>
 \ No newline at end of file