java/ruoyi-vue-pro
1
0
Fork 0
mirror of https://github.com/YunaiV/ruoyi-vue-pro.git synced 2025-10-31 02:28:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sfmind
2022-04-11 23:02:08 +08:00
parent e10b707588
commit 6e685c487d
12 changed files with 436 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
yudao-ui-app/app.scss
View File

@ -1,52 +1,7 @@
/* 页面公共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;}

1
yudao-ui-app/common/props.js
View File

@ -1,2 +1,3 @@
/* uView组件全局属性 */
uni.$u.props.gap.bgColor = '#ffffff'
uni.$u.props.gap.height = '10'

6
yudao-ui-app/pages.json
View File

@ -47,6 +47,12 @@
"style": {
"navigationBarTitleText": "个人资料"
}
},
{
"path": "pages/product/product",
"style": {
"navigationBarTitleText": "商品详情"
}
}
],
"tabBar": {

205
yudao-ui-app/pages/category/category.vue
View File

@ -1,24 +1,217 @@
<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>

4
yudao-ui-app/pages/forgot/forgot.vue
View File

@ -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;
}

111
yudao-ui-app/pages/index/index.vue
View File

@ -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;

4
yudao-ui-app/pages/login/login.vue
View File

@ -217,8 +217,8 @@ import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api";
justify-content: space-between;
font-size: 12rpx;
color: #3c9cff;
text-decoration: #3c9cff;
color: $u-primary;
text-decoration: $u-primary;
}

102
yudao-ui-app/pages/product/product.vue Normal file
View File

@ -0,0 +1,102 @@
<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>

4
yudao-ui-app/pages/register/register.vue
View File

@ -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;
}

27
yudao-ui-app/pages/user/user.vue
View File

@ -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;
}
}

65
yudao-ui-app/uni.scss
View File

@ -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;

43
yudao-ui-app/uni_modules/uview-ui/components/u--text-price/u--text-price.vue
View File

@ -1,32 +1,39 @@
<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>