zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
yudao-ui-app/components/custom-text-price/custom-text-price.vue
View File

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

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

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

17
yudao-ui-app/pages/address/add.vue Normal file
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>

17
yudao-ui-app/pages/address/edit.vue Normal file
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>

17
yudao-ui-app/pages/address/list.vue Normal file
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>

34
yudao-ui-app/pages/cart/cart.vue
View File

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

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

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

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

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

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

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

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

19
yudao-ui-app/pages/search/search.vue Normal file
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>

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

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

7
yudao-ui-app/sitemap.json Normal file
View File

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