Commit dbf2597d3b8ab4560c3a2aeb0d514dee5c35f3cd
1 parent
987c0218
重构页面抽取组件
Showing
6 changed files
with
407 additions
and
263 deletions
yudao-ui-app/components/yd-banner/yd-banner.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <u-swiper :list="bannerList" :keyName="keyName" previousMargin="20" nextMargin="20" circular height="150" @change="e => (current = e.current)" :autoplay="true" @click="handleSwiperClick"> | |
| 3 | + <view slot="indicator" class="indicator"> | |
| 4 | + <view class="indicator__dot" v-for="(item, index) in bannerList" :key="index" :class="[index === current && 'indicator__dot--active']"></view> | |
| 5 | + </view> | |
| 6 | + </u-swiper> | |
| 7 | +</template> | |
| 8 | + | |
| 9 | +<script> | |
| 10 | +/** | |
| 11 | + * 广告滚动图 | |
| 12 | + */ | |
| 13 | +export default { | |
| 14 | + name: 'mkt-banner', | |
| 15 | + components: {}, | |
| 16 | + props: { | |
| 17 | + keyName: { | |
| 18 | + type: String, | |
| 19 | + default: 'url' | |
| 20 | + }, | |
| 21 | + bannerList: { | |
| 22 | + type: Array, | |
| 23 | + default: () => [] | |
| 24 | + } | |
| 25 | + }, | |
| 26 | + data() { | |
| 27 | + return { | |
| 28 | + current: 0, | |
| 29 | + currentNum: 0 | |
| 30 | + } | |
| 31 | + }, | |
| 32 | + methods: { | |
| 33 | + handleSwiperClick(index) { | |
| 34 | + console.log('点击了图片索引值：', index) | |
| 35 | + } | |
| 36 | + } | |
| 37 | +} | |
| 38 | +</script> | |
| 39 | + | |
| 40 | +<style lang="scss" scoped> | |
| 41 | +.indicator { | |
| 42 | + @include flex(row); | |
| 43 | + justify-content: center; | |
| 44 | + | |
| 45 | + &__dot { | |
| 46 | + height: 15rpx; | |
| 47 | + width: 15rpx; | |
| 48 | + border-radius: 100rpx; | |
| 49 | + background-color: rgba(255, 255, 255, 0.35); | |
| 50 | + margin: 0 10rpx; | |
| 51 | + transition: background-color 0.3s; | |
| 52 | + | |
| 53 | + &--active { | |
| 54 | + background-color: $custom-bg-color; | |
| 55 | + } | |
| 56 | + } | |
| 57 | +} | |
| 58 | +</style> | ... | ... |
yudao-ui-app/components/yd-product-box/yd-product-box.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view> | |
| 3 | + <view v-if="showType === 'normal'"> | |
| 4 | + <u-gap height="180" bgColor="#398ade"></u-gap> | |
| 5 | + <view class="prod-block"> | |
| 6 | + <view class="bloc-header"> | |
| 7 | + <text class="bloc-title">{{title}}</text> | |
| 8 | + <text class="see-more">查看更多</text> | |
| 9 | + </view> | |
| 10 | + <view class="prod-grid"> | |
| 11 | + <view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)"> | |
| 12 | + <image class="prod-image" :src="item.image"></image> | |
| 13 | + <view class="item-info"> | |
| 14 | + <view class="info-text"> | |
| 15 | + <u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text> | |
| 16 | + </view> | |
| 17 | + <view class="price-and-cart"> | |
| 18 | + <yd-text-price color="red" size="12" intSize="18" :price="item.price"></yd-text-price> | |
| 19 | + <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> | |
| 20 | + </view> | |
| 21 | + </view> | |
| 22 | + </view> | |
| 23 | + </view> | |
| 24 | + </view> | |
| 25 | + </view> | |
| 26 | + | |
| 27 | + <view v-if="showType === 'half'"> | |
| 28 | + <view class="prod-block half"> | |
| 29 | + <view class="bloc-header"> | |
| 30 | + <text class="bloc-title">{{title}}</text> | |
| 31 | + <text class="more">更多 ></text> | |
| 32 | + </view> | |
| 33 | + <view class="prod-grid half"> | |
| 34 | + <view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)"> | |
| 35 | + <image class="prod-image" :src="item.image"></image> | |
| 36 | + <view class="item-info"> | |
| 37 | + <view class="info-text"> | |
| 38 | + <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text> | |
| 39 | + <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text> | |
| 40 | + </view> | |
| 41 | + <view class="price-and-cart"> | |
| 42 | + <yd-text-price color="red" size="12" intSize="18" :price="item.price"></yd-text-price> | |
| 43 | + <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> | |
| 44 | + </view> | |
| 45 | + </view> | |
| 46 | + </view> | |
| 47 | + </view> | |
| 48 | + </view> | |
| 49 | + </view> | |
| 50 | + | |
| 51 | + </view> | |
| 52 | +</template> | |
| 53 | + | |
| 54 | +<script> | |
| 55 | +/** | |
| 56 | + * 商品列表 | |
| 57 | + */ | |
| 58 | +export default { | |
| 59 | + name: 'yd-product-box', | |
| 60 | + components: {}, | |
| 61 | + props: { | |
| 62 | + showType: { | |
| 63 | + type: String, | |
| 64 | + default: 'normal' | |
| 65 | + }, | |
| 66 | + title: { | |
| 67 | + type: String, | |
| 68 | + default: '商品推荐' | |
| 69 | + }, | |
| 70 | + productList: { | |
| 71 | + type: Array, | |
| 72 | + default: () => [] | |
| 73 | + } | |
| 74 | + }, | |
| 75 | + computed: {}, | |
| 76 | + methods: { | |
| 77 | + handleProdItemClick(productId) { | |
| 78 | + uni.$u.route('/pages/product/product', { | |
| 79 | + productId: productId | |
| 80 | + }) | |
| 81 | + } | |
| 82 | + } | |
| 83 | +} | |
| 84 | +</script> | |
| 85 | +<style lang="scss" scoped> | |
| 86 | +.prod-block { | |
| 87 | + margin-top: -160px; | |
| 88 | + | |
| 89 | + .bloc-header { | |
| 90 | + @include flex-space-between; | |
| 91 | + padding: 10rpx 20rpx; | |
| 92 | + | |
| 93 | + .bloc-title { | |
| 94 | + color: $custom-bg-color; | |
| 95 | + font-size: 34rpx; | |
| 96 | + } | |
| 97 | + | |
| 98 | + .see-more { | |
| 99 | + color: $custom-bg-color; | |
| 100 | + background: $u-primary; | |
| 101 | + padding: 0 30rpx; | |
| 102 | + height: 50rpx; | |
| 103 | + line-height: 50rpx; | |
| 104 | + border-radius: 50rpx; | |
| 105 | + font-size: 24rpx; | |
| 106 | + } | |
| 107 | + } | |
| 108 | + | |
| 109 | + &.half { | |
| 110 | + margin-top: 0; | |
| 111 | + | |
| 112 | + .bloc-header { | |
| 113 | + margin-top: 50rpx; | |
| 114 | + margin-bottom: 20rpx; | |
| 115 | + | |
| 116 | + .bloc-title { | |
| 117 | + color: #333333; | |
| 118 | + } | |
| 119 | + | |
| 120 | + .more { | |
| 121 | + font-size: 24rpx; | |
| 122 | + } | |
| 123 | + } | |
| 124 | + } | |
| 125 | + | |
| 126 | + .prod-grid { | |
| 127 | + width: 730rpx; | |
| 128 | + margin: 0 auto; | |
| 129 | + @include flex; | |
| 130 | + flex-wrap: wrap; | |
| 131 | + justify-content: left; | |
| 132 | + | |
| 133 | + &.half { | |
| 134 | + .prod-item { | |
| 135 | + width: 345rpx; | |
| 136 | + margin: 10rpx; | |
| 137 | + | |
| 138 | + .prod-image { | |
| 139 | + width: 345rpx; | |
| 140 | + height: 345rpx; | |
| 141 | + } | |
| 142 | + } | |
| 143 | + } | |
| 144 | + | |
| 145 | + .prod-item { | |
| 146 | + width: 223rpx; | |
| 147 | + margin: 10rpx; | |
| 148 | + background: #ffffff; | |
| 149 | + border-radius: 10rpx; | |
| 150 | + box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2); | |
| 151 | + | |
| 152 | + .prod-image { | |
| 153 | + width: 223rpx; | |
| 154 | + height: 223rpx; | |
| 155 | + border-radius: 10rpx 10rpx 0 0; | |
| 156 | + } | |
| 157 | + | |
| 158 | + .item-info { | |
| 159 | + padding: 15rpx; | |
| 160 | + | |
| 161 | + .info-text { | |
| 162 | + height: 70rpx; | |
| 163 | + padding-bottom: 10rpx; | |
| 164 | + } | |
| 165 | + | |
| 166 | + .price-and-cart { | |
| 167 | + @include flex-space-between; | |
| 168 | + } | |
| 169 | + } | |
| 170 | + } | |
| 171 | + } | |
| 172 | +} | |
| 173 | +</style> | ... | ... |
yudao-ui-app/components/yd-product-more/yd-product-more.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <view> | |
| 3 | + <view class="prod-block list"> | |
| 4 | + <view class="bloc-header"> | |
| 5 | + <text class="bloc-title">更多宝贝</text> | |
| 6 | + <text></text> | |
| 7 | + </view> | |
| 8 | + | |
| 9 | + <view class="prod-list" v-for="(item, index) in productList" :key="item.id"> | |
| 10 | + <view class="prod-item" @click="handleProdItemClick(item.id)"> | |
| 11 | + <image class="prod-image" :src="item.image"></image> | |
| 12 | + <view class="item-info"> | |
| 13 | + <view class="info-text"> | |
| 14 | + <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text> | |
| 15 | + <u-gap height="2px"></u-gap> | |
| 16 | + <u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text> | |
| 17 | + </view> | |
| 18 | + <view class="price-and-cart"> | |
| 19 | + <yd-text-price color="red" size="12" intSize="18" :price="item.price"></yd-text-price> | |
| 20 | + <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> | |
| 21 | + </view> | |
| 22 | + </view> | |
| 23 | + </view> | |
| 24 | + </view> | |
| 25 | + </view> | |
| 26 | + | |
| 27 | + <!--加载更多--> | |
| 28 | + <u-loadmore fontSize="28rpx" :line="true" :status="moreStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" /> | |
| 29 | + | |
| 30 | + </view> | |
| 31 | +</template> | |
| 32 | + | |
| 33 | +<script> | |
| 34 | +/** | |
| 35 | + * 商品列表 | |
| 36 | + */ | |
| 37 | +export default { | |
| 38 | + name: 'yd-product-more', | |
| 39 | + components: {}, | |
| 40 | + props: { | |
| 41 | + title: { | |
| 42 | + type: String, | |
| 43 | + default: '商品推荐' | |
| 44 | + }, | |
| 45 | + productList: { | |
| 46 | + type: Array, | |
| 47 | + default: () => [] | |
| 48 | + }, | |
| 49 | + moreStatus: { | |
| 50 | + type: String, | |
| 51 | + default: 'nomore' | |
| 52 | + } | |
| 53 | + }, | |
| 54 | + data() { | |
| 55 | + return { | |
| 56 | + //status: 'nomore', | |
| 57 | + loadingText: '加载中...', | |
| 58 | + loadmoreText: '上拉加载更多', | |
| 59 | + nomoreText: '已经到底了' | |
| 60 | + } | |
| 61 | + }, | |
| 62 | + methods: { | |
| 63 | + handleProdItemClick(productId) { | |
| 64 | + uni.$u.route('/pages/product/product', { | |
| 65 | + productId: productId | |
| 66 | + }) | |
| 67 | + } | |
| 68 | + } | |
| 69 | +} | |
| 70 | +</script> | |
| 71 | +<style lang="scss" scoped> | |
| 72 | +.prod-block { | |
| 73 | + margin-top: 0; | |
| 74 | + | |
| 75 | + .bloc-header { | |
| 76 | + margin-top: 50rpx; | |
| 77 | + margin-bottom: 20rpx; | |
| 78 | + | |
| 79 | + .bloc-title { | |
| 80 | + margin-left: 20rpx; | |
| 81 | + color: #333333; | |
| 82 | + } | |
| 83 | + } | |
| 84 | + | |
| 85 | + .prod-list { | |
| 86 | + .prod-item { | |
| 87 | + background: #ffffff; | |
| 88 | + @include flex-space-between; | |
| 89 | + border-bottom: $custom-border-style; | |
| 90 | + padding: 20rpx; | |
| 91 | + | |
| 92 | + .prod-image { | |
| 93 | + width: 200rpx; | |
| 94 | + height: 200rpx; | |
| 95 | + border-radius: 10rpx; | |
| 96 | + } | |
| 97 | + | |
| 98 | + .item-info { | |
| 99 | + flex: 1; | |
| 100 | + padding: 20rpx 20rpx 0; | |
| 101 | + | |
| 102 | + .info-text { | |
| 103 | + height: 100rpx; | |
| 104 | + padding-bottom: 10rpx; | |
| 105 | + } | |
| 106 | + | |
| 107 | + .price-and-cart { | |
| 108 | + @include flex-space-between; | |
| 109 | + } | |
| 110 | + } | |
| 111 | + } | |
| 112 | + } | |
| 113 | +} | |
| 114 | +</style> | ... | ... |
yudao-ui-app/components/custom-text-price/custom-text-price.vue renamed to yudao-ui-app/components/yd-text-price/yd-text-price.vue
yudao-ui-app/pages/index/index.vue
| ... | ... | @@ -8,17 +8,13 @@ |
| 8 | 8 | </u-sticky> |
| 9 | 9 | |
| 10 | 10 | <!--轮播图--> |
| 11 | - <u-swiper :list="swiperList" previousMargin="20" nextMargin="20" circular height="200" @change="e => (current = e.current)" :autoplay="true" @click="handleSwiperClick"> | |
| 12 | - <view slot="indicator" class="indicator"> | |
| 13 | - <view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']"> </view> | |
| 14 | - </view> | |
| 15 | - </u-swiper> | |
| 11 | + <mkt-banner :banner-list="bannerList"></mkt-banner> | |
| 16 | 12 | |
| 17 | 13 | <u-gap height="20px"></u-gap> |
| 18 | 14 | |
| 19 | 15 | <!--宫格菜单按钮--> |
| 20 | - <u-grid :border="false" col="4" | |
| 21 | - ><u-grid-item v-for="(item, index) in menuList" :key="index"> | |
| 16 | + <u-grid :border="false" col="4"> | |
| 17 | + <u-grid-item v-for="(item, index) in menuList" :key="index"> | |
| 22 | 18 | <u-icon :name="item.icon" :size="40"></u-icon> |
| 23 | 19 | <text class="grid-title">{{ item.title }}</text> |
| 24 | 20 | </u-grid-item> |
| ... | ... | @@ -30,81 +26,11 @@ |
| 30 | 26 | <u-notice-bar style="padding: 13px 12px" :text="noticeList" mode="link" direction="column" @click="click"></u-notice-bar> |
| 31 | 27 | |
| 32 | 28 | <!--商品展示栏--> |
| 33 | - <view> | |
| 34 | - <u-gap height="180" bgColor="#398ade"></u-gap> | |
| 35 | - <view class="prod-block"> | |
| 36 | - <view class="bloc-header"> | |
| 37 | - <text class="bloc-title">每日上新</text> | |
| 38 | - <text class="see-more">查看更多</text> | |
| 39 | - </view> | |
| 40 | - <view class="prod-grid"> | |
| 41 | - <view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)"> | |
| 42 | - <image class="prod-image" :src="item.image"></image> | |
| 43 | - <view class="item-info"> | |
| 44 | - <view class="info-text"> | |
| 45 | - <u--text :lines="2" size="14px" color="#333333" :text="item.title"></u--text> | |
| 46 | - </view> | |
| 47 | - <view class="price-and-cart"> | |
| 48 | - <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price> | |
| 49 | - <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> | |
| 50 | - </view> | |
| 51 | - </view> | |
| 52 | - </view> | |
| 53 | - </view> | |
| 54 | - </view> | |
| 55 | - </view> | |
| 56 | - | |
| 57 | - <view> | |
| 58 | - <view class="prod-block half"> | |
| 59 | - <view class="bloc-header"> | |
| 60 | - <text class="bloc-title">商品热卖</text> | |
| 61 | - <text class="more">更多 ></text> | |
| 62 | - </view> | |
| 63 | - <view class="prod-grid half"> | |
| 64 | - <view class="prod-item" v-for="(item, index) in productList" :key="item.id" @click="handleProdItemClick(item.id)"> | |
| 65 | - <image class="prod-image" :src="item.image"></image> | |
| 66 | - <view class="item-info"> | |
| 67 | - <view class="info-text"> | |
| 68 | - <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text> | |
| 69 | - <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text> | |
| 70 | - </view> | |
| 71 | - <view class="price-and-cart"> | |
| 72 | - <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price> | |
| 73 | - <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> | |
| 74 | - </view> | |
| 75 | - </view> | |
| 76 | - </view> | |
| 77 | - </view> | |
| 78 | - </view> | |
| 79 | - </view> | |
| 29 | + <yd-product-box :product-list="productList" :title="'每日上新'" show-type="normal"></yd-product-box> | |
| 30 | + <yd-product-box :product-list="productList" :title="'热卖商品'" show-type="half"></yd-product-box> | |
| 31 | + <yd-product-more :product-list="productList" more-status="moreStatus"></yd-product-more> | |
| 80 | 32 | |
| 81 | - <view> | |
| 82 | - <view class="prod-block list"> | |
| 83 | - <view class="bloc-header"> | |
| 84 | - <text class="bloc-title">更多宝贝</text> | |
| 85 | - <text></text> | |
| 86 | - </view> | |
| 87 | - | |
| 88 | - <view class="prod-list" v-for="(item, index) in productList" :key="item.id"> | |
| 89 | - <view class="prod-item" @click="handleProdItemClick(item.id)"> | |
| 90 | - <image class="prod-image" :src="item.image"></image> | |
| 91 | - <view class="item-info"> | |
| 92 | - <view class="info-text"> | |
| 93 | - <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text> | |
| 94 | - <u-gap height="2px"></u-gap> | |
| 95 | - <u--text class="info-desc" :lines="2" size="12px" color="#939393" :text="item.desc"></u--text> | |
| 96 | - </view> | |
| 97 | - <view class="price-and-cart"> | |
| 98 | - <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price> | |
| 99 | - <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> | |
| 100 | - </view> | |
| 101 | - </view> | |
| 102 | - </view> | |
| 103 | - </view> | |
| 104 | - </view> | |
| 105 | - </view> | |
| 106 | - <!--加载更多--> | |
| 107 | - <u-loadmore fontSize="28rpx" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" /> | |
| 33 | + <u-gap height="5px"></u-gap> | |
| 108 | 34 | </view> |
| 109 | 35 | </template> |
| 110 | 36 | |
| ... | ... | @@ -115,9 +41,23 @@ export default { |
| 115 | 41 | components: {}, |
| 116 | 42 | data() { |
| 117 | 43 | return { |
| 118 | - current: 0, | |
| 119 | - currentNum: 0, | |
| 120 | - 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'], | |
| 44 | + bannerList: [ | |
| 45 | + { | |
| 46 | + id: 1, | |
| 47 | + title: '山不在高，有仙则名', | |
| 48 | + url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' | |
| 49 | + }, | |
| 50 | + { | |
| 51 | + id: 2, | |
| 52 | + title: '水不在深，有龙则灵', | |
| 53 | + url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png' | |
| 54 | + }, | |
| 55 | + { | |
| 56 | + id: 3, | |
| 57 | + title: '斯是陋室，惟吾德馨', | |
| 58 | + url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png' | |
| 59 | + } | |
| 60 | + ], | |
| 121 | 61 | menuList: [ |
| 122 | 62 | { icon: 'gift', title: '热门推荐' }, |
| 123 | 63 | { icon: 'star', title: '收藏转发' }, |
| ... | ... | @@ -162,15 +102,12 @@ export default { |
| 162 | 102 | price: '53.00' |
| 163 | 103 | } |
| 164 | 104 | ], |
| 165 | - status: 'nomore', | |
| 166 | - loadingText: '努力加载中...', | |
| 167 | - loadmoreText: '轻轻上拉', | |
| 168 | - nomoreText: '实在没有了...' | |
| 105 | + moreStatus: 'nomore' | |
| 169 | 106 | } |
| 170 | 107 | }, |
| 171 | 108 | onLoad() { |
| 172 | - this.loadBannerData(); | |
| 173 | - this.loadNoticeData(); | |
| 109 | + this.loadBannerData() | |
| 110 | + this.loadNoticeData() | |
| 174 | 111 | }, |
| 175 | 112 | methods: { |
| 176 | 113 | loadBannerData() { |
| ... | ... | @@ -185,24 +122,9 @@ export default { |
| 185 | 122 | }, |
| 186 | 123 | handleSearchClick(e) { |
| 187 | 124 | uni.$u.route('/pages/search/search') |
| 188 | - }, | |
| 189 | - handleSwiperClick(index) { | |
| 190 | - console.log('点击了图片索引值：', index) | |
| 191 | - }, | |
| 192 | - handleProdItemClick(productId) { | |
| 193 | - uni.$u.route('/pages/product/product', { | |
| 194 | - productId: productId | |
| 195 | - }) | |
| 196 | 125 | } |
| 197 | 126 | }, |
| 198 | 127 | computed: { |
| 199 | - swiperList() { | |
| 200 | - return this.bannerList.map(item => { | |
| 201 | - if (item) { | |
| 202 | - return item | |
| 203 | - } | |
| 204 | - }) | |
| 205 | - }, | |
| 206 | 128 | noticeTextList() { |
| 207 | 129 | return this.noticeList.map(item => { |
| 208 | 130 | if (item.title) { |
| ... | ... | @@ -220,131 +142,8 @@ export default { |
| 220 | 142 | padding: 20rpx; |
| 221 | 143 | } |
| 222 | 144 | |
| 223 | -.indicator { | |
| 224 | - @include flex(row); | |
| 225 | - justify-content: center; | |
| 226 | - | |
| 227 | - &__dot { | |
| 228 | - height: 15rpx; | |
| 229 | - width: 15rpx; | |
| 230 | - border-radius: 100rpx; | |
| 231 | - background-color: rgba(255, 255, 255, 0.35); | |
| 232 | - margin: 0 10rpx; | |
| 233 | - transition: background-color 0.3s; | |
| 234 | - | |
| 235 | - &--active { | |
| 236 | - background-color: $custom-bg-color; | |
| 237 | - } | |
| 238 | - } | |
| 239 | -} | |
| 240 | - | |
| 241 | 145 | .grid-title { |
| 242 | 146 | line-height: 50rpx; |
| 243 | 147 | font-size: 26rpx; |
| 244 | 148 | } |
| 245 | - | |
| 246 | -.prod-block { | |
| 247 | - margin-top: -160px; | |
| 248 | - .bloc-header { | |
| 249 | - @include flex-space-between; | |
| 250 | - padding: 10rpx 20rpx; | |
| 251 | - | |
| 252 | - .bloc-title { | |
| 253 | - color: $custom-bg-color; | |
| 254 | - font-size: 34rpx; | |
| 255 | - } | |
| 256 | - .see-more { | |
| 257 | - color: $custom-bg-color; | |
| 258 | - background: $u-primary; | |
| 259 | - padding: 0 30rpx; | |
| 260 | - height: 50rpx; | |
| 261 | - line-height: 50rpx; | |
| 262 | - border-radius: 50rpx; | |
| 263 | - font-size: 24rpx; | |
| 264 | - } | |
| 265 | - } | |
| 266 | - | |
| 267 | - &.half, | |
| 268 | - &.list { | |
| 269 | - margin-top: 0; | |
| 270 | - .bloc-header { | |
| 271 | - margin-top: 50rpx; | |
| 272 | - margin-bottom: 20rpx; | |
| 273 | - .bloc-title { | |
| 274 | - color: #333333; | |
| 275 | - } | |
| 276 | - .more { | |
| 277 | - font-size: 24rpx; | |
| 278 | - } | |
| 279 | - } | |
| 280 | - } | |
| 281 | - | |
| 282 | - .prod-grid { | |
| 283 | - width: 730rpx; | |
| 284 | - margin: 0 auto; | |
| 285 | - @include flex; | |
| 286 | - flex-wrap: wrap; | |
| 287 | - justify-content: left; | |
| 288 | - | |
| 289 | - &.half { | |
| 290 | - .prod-item { | |
| 291 | - width: 345rpx; | |
| 292 | - margin: 10rpx; | |
| 293 | - .prod-image { | |
| 294 | - width: 345rpx; | |
| 295 | - height: 345rpx; | |
| 296 | - } | |
| 297 | - } | |
| 298 | - } | |
| 299 | - | |
| 300 | - .prod-item { | |
| 301 | - width: 223rpx; | |
| 302 | - margin: 10rpx; | |
| 303 | - background: #ffffff; | |
| 304 | - border-radius: 10rpx; | |
| 305 | - box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2); | |
| 306 | - .prod-image { | |
| 307 | - width: 223rpx; | |
| 308 | - height: 223rpx; | |
| 309 | - border-radius: 10rpx 10rpx 0 0; | |
| 310 | - } | |
| 311 | - .item-info { | |
| 312 | - padding: 15rpx; | |
| 313 | - .info-text { | |
| 314 | - height: 70rpx; | |
| 315 | - padding-bottom: 10rpx; | |
| 316 | - } | |
| 317 | - .price-and-cart { | |
| 318 | - @include flex-space-between; | |
| 319 | - } | |
| 320 | - } | |
| 321 | - } | |
| 322 | - } | |
| 323 | -} | |
| 324 | - | |
| 325 | -.prod-list { | |
| 326 | - .prod-item { | |
| 327 | - background: #ffffff; | |
| 328 | - @include flex-space-between; | |
| 329 | - border-bottom: $custom-border-style; | |
| 330 | - padding: 20rpx; | |
| 331 | - .prod-image { | |
| 332 | - width: 200rpx; | |
| 333 | - height: 200rpx; | |
| 334 | - border-radius: 10rpx; | |
| 335 | - } | |
| 336 | - | |
| 337 | - .item-info { | |
| 338 | - flex: 1; | |
| 339 | - padding: 20rpx 20rpx 0; | |
| 340 | - .info-text { | |
| 341 | - height: 100rpx; | |
| 342 | - padding-bottom: 10rpx; | |
| 343 | - } | |
| 344 | - .price-and-cart { | |
| 345 | - @include flex-space-between; | |
| 346 | - } | |
| 347 | - } | |
| 348 | - } | |
| 349 | -} | |
| 350 | 149 | </style> | ... | ... |
yudao-ui-app/pages/profile/profile.vue
| ... | ... | @@ -10,43 +10,22 @@ |
| 10 | 10 | </view> |
| 11 | 11 | <view class="info-item"> |
| 12 | 12 | <view class="label">昵称：</view> |
| 13 | - <view v-if="!nameEditOn" class="info"> | |
| 14 | - <view class="value">{{ userInfo.nickname }}</view> | |
| 15 | - <u-icon | |
| 16 | - class="btn" | |
| 17 | - name="edit-pen" | |
| 18 | - @click=" | |
| 19 | - tempName = userInfo.nickname | |
| 20 | - nameEditOn = true | |
| 21 | - " | |
| 22 | - ></u-icon> | |
| 23 | - </view> | |
| 24 | - <view v-else class="name-edit"> | |
| 25 | - <u--input maxlength="10" border="bottom" v-model="tempName"></u--input> | |
| 26 | - <view class="edit-btn-group"> | |
| 27 | - <u-tag class="edit-btn" text="保存" plain size="mini" type="primary" @click="handleSaveBtnClick"></u-tag> | |
| 28 | - <u-tag | |
| 29 | - class="edit-btn" | |
| 30 | - text="取消" | |
| 31 | - plain | |
| 32 | - size="mini" | |
| 33 | - type="info" | |
| 34 | - @click=" | |
| 35 | - tempName = '' | |
| 36 | - nameEditOn = false | |
| 37 | - " | |
| 38 | - ></u-tag> | |
| 39 | - </view> | |
| 13 | + <view class="info"> | |
| 14 | + <u--input maxlength="10" :border="borderStyle" v-model="userInfo.nickname" @focus="borderStyle = 'bottom'" inputAlign="right" @blur="borderStyle = 'none'" @change="handleNameChange"></u--input> | |
| 40 | 15 | </view> |
| 41 | 16 | </view> |
| 42 | 17 | <view class="info-item"> |
| 43 | 18 | <view class="label">手机：</view> |
| 44 | 19 | <view class="info"> |
| 45 | 20 | <view class="value">{{ userInfo.mobile }}</view> |
| 46 | - <u-icon class="btn" name="edit-pen"></u-icon> | |
| 47 | 21 | </view> |
| 48 | 22 | </view> |
| 49 | 23 | </view> |
| 24 | + | |
| 25 | + <view v-if="nameUpdateVisible" class="btn-group"> | |
| 26 | + <u-button type="primary" text="保存" customStyle="margin-top: 50px" @click="handleSaveBtnClick"></u-button> | |
| 27 | + </view> | |
| 28 | + | |
| 50 | 29 | </view> |
| 51 | 30 | </template> |
| 52 | 31 | |
| ... | ... | @@ -62,8 +41,13 @@ export default { |
| 62 | 41 | mobile: '' |
| 63 | 42 | }, |
| 64 | 43 | avatarFiles: [], |
| 65 | - nameEditOn: false, | |
| 66 | - tempName: '' | |
| 44 | + tempName: '', | |
| 45 | + borderStyle: 'none' | |
| 46 | + } | |
| 47 | + }, | |
| 48 | + computed: { | |
| 49 | + nameUpdateVisible: function () { | |
| 50 | + return this.userInfo.nickname !== this.tempName | |
| 67 | 51 | } |
| 68 | 52 | }, |
| 69 | 53 | onLoad() { |
| ... | ... | @@ -73,6 +57,7 @@ export default { |
| 73 | 57 | loadUserInfoData() { |
| 74 | 58 | getUserInfo().then(res => { |
| 75 | 59 | this.userInfo = res.data |
| 60 | + this.tempName = this.userInfo.nickname | |
| 76 | 61 | }) |
| 77 | 62 | }, |
| 78 | 63 | handleAvatarClick() { |
| ... | ... | @@ -86,11 +71,22 @@ export default { |
| 86 | 71 | } |
| 87 | 72 | }) |
| 88 | 73 | }, |
| 74 | + handleNameChange(val) { | |
| 75 | + let str = uni.$u.trim(val, 'all') | |
| 76 | + this.$nextTick(() => { | |
| 77 | + this.userInfo.nickname = str | |
| 78 | + }) | |
| 79 | + }, | |
| 89 | 80 | handleSaveBtnClick() { |
| 90 | - updateNickname({ nickname: this.tempName }).then(res => { | |
| 91 | - this.nameEditOn = false; | |
| 92 | - this.userInfo.nickname = this.tempName | |
| 81 | + updateNickname({ nickname: this.userInfo.nickname }).then(res => { | |
| 82 | + this.tempName = this.userInfo.nickname | |
| 93 | 83 | this.$store.commit('SET_USER_INFO', this.userInfo) |
| 84 | + uni.$u.toast('已保存') | |
| 85 | + setTimeout(() => { | |
| 86 | + uni.switchTab({ | |
| 87 | + url: '/pages/user/user' | |
| 88 | + }) | |
| 89 | + }, 300) | |
| 94 | 90 | }) |
| 95 | 91 | } |
| 96 | 92 | } |
| ... | ... | @@ -107,7 +103,7 @@ export default { |
| 107 | 103 | font-size: 30rpx; |
| 108 | 104 | } |
| 109 | 105 | .info { |
| 110 | - @include flex-right; | |
| 106 | + @include flex-left; | |
| 111 | 107 | .value { |
| 112 | 108 | font-size: 30rpx; |
| 113 | 109 | } |
| ... | ... | @@ -126,4 +122,8 @@ export default { |
| 126 | 122 | } |
| 127 | 123 | } |
| 128 | 124 | } |
| 125 | + | |
| 126 | +.btn-group { | |
| 127 | + padding: 0 30rpx; | |
| 128 | +} | |
| 129 | 129 | </style> | ... | ... |