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

pull/2/head
sfmind 2022-04-19 17:58:39 +08:00
parent b24803cf22
commit 671b5d343e
14 changed files with 265 additions and 136 deletions

View File

@ -1,6 +1,5 @@
/* 页面公共scss */ /* 页面公共scss */
.container { .container {
padding-top: var(--status-bar-height);//uni-appcss--status-bar-height
background-color: $custom-bg-color; background-color: $custom-bg-color;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;

View File

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

View File

@ -53,6 +53,30 @@
"style": { "style": {
"navigationBarTitleText": "商品详情" "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": { "tabBar": {
@ -86,8 +110,7 @@
] ]
}, },
"globalStyle": { "globalStyle": {
"navigationStyle": "custom",// "navigationBarTextStyle": "black",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "yudao-ui-app", "navigationBarTitleText": "yudao-ui-app",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#FFFFFF" "backgroundColor": "#FFFFFF"

View File

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

View File

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

View File

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

View File

@ -1,5 +1,18 @@
<template> <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> </template>
<script> <script>
@ -14,4 +27,21 @@ export default {
} }
</script> </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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
<template> <template>
<view class="container"> <view class="container">
<view class="user-header"> <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> <u-avatar size="80" :src="avatar"></u-avatar>
<text class="nick-name">{{ nickName }}</text> <text class="nick-name">{{ nickName }}</text>
</view> </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="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="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="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-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> </view>
</template> </template>
@ -65,20 +68,20 @@ export default {
{ icon: 'integral', title: '已完成' } { icon: 'integral', title: '已完成' }
], ],
statList: [ statList: [
{ value: '2', title: '我的收藏' }, { value: '0', title: '我的收藏' },
{ value: '3', title: '我的消息' }, { value: '0', title: '我的消息' },
{ value: '3', title: '我的足迹' } { value: '0', title: '我的足迹' }
] ]
} }
}, },
onLoad() {}, onLoad() {},
methods: { methods: {
handleUserInfoClick() { loginOrJump(pageUrl){
// TODO // TODO
if (!uni.getStorageSync('token')) { if (!uni.getStorageSync('token')) {
uni.$u.route('/pages/login/login') uni.$u.route('/pages/login/login')
} else { } else {
uni.$u.route('/pages/profile/profile') uni.$u.route(pageUrl)
} }
} }
} }
@ -145,7 +148,7 @@ export default {
} }
.logout-btn { .logout-btn {
margin-top: 60rpx; margin: 60rpx auto 0;
width: 300rpx; width: 400rpx;
} }
</style> </style>

View File

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