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,17 +8,13 @@ | ||
| 8 | </u-sticky> | 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 | <u-gap height="20px"></u-gap> | 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 | <u-icon :name="item.icon" :size="40"></u-icon> | 18 | <u-icon :name="item.icon" :size="40"></u-icon> |
| 23 | <text class="grid-title">{{ item.title }}</text> | 19 | <text class="grid-title">{{ item.title }}</text> |
| 24 | </u-grid-item> | 20 | </u-grid-item> |
| @@ -30,81 +26,11 @@ | @@ -30,81 +26,11 @@ | ||
| 30 | <u-notice-bar style="padding: 13px 12px" :text="noticeList" mode="link" direction="column" @click="click"></u-notice-bar> | 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 | </view> | 34 | </view> |
| 109 | </template> | 35 | </template> |
| 110 | 36 | ||
| @@ -115,9 +41,23 @@ export default { | @@ -115,9 +41,23 @@ export default { | ||
| 115 | components: {}, | 41 | components: {}, |
| 116 | data() { | 42 | data() { |
| 117 | return { | 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 | menuList: [ | 61 | menuList: [ |
| 122 | { icon: 'gift', title: '热门推荐' }, | 62 | { icon: 'gift', title: '热门推荐' }, |
| 123 | { icon: 'star', title: '收藏转发' }, | 63 | { icon: 'star', title: '收藏转发' }, |
| @@ -162,15 +102,12 @@ export default { | @@ -162,15 +102,12 @@ export default { | ||
| 162 | price: '53.00' | 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 | onLoad() { | 108 | onLoad() { |
| 172 | - this.loadBannerData(); | ||
| 173 | - this.loadNoticeData(); | 109 | + this.loadBannerData() |
| 110 | + this.loadNoticeData() | ||
| 174 | }, | 111 | }, |
| 175 | methods: { | 112 | methods: { |
| 176 | loadBannerData() { | 113 | loadBannerData() { |
| @@ -185,24 +122,9 @@ export default { | @@ -185,24 +122,9 @@ export default { | ||
| 185 | }, | 122 | }, |
| 186 | handleSearchClick(e) { | 123 | handleSearchClick(e) { |
| 187 | uni.$u.route('/pages/search/search') | 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 | computed: { | 127 | computed: { |
| 199 | - swiperList() { | ||
| 200 | - return this.bannerList.map(item => { | ||
| 201 | - if (item) { | ||
| 202 | - return item | ||
| 203 | - } | ||
| 204 | - }) | ||
| 205 | - }, | ||
| 206 | noticeTextList() { | 128 | noticeTextList() { |
| 207 | return this.noticeList.map(item => { | 129 | return this.noticeList.map(item => { |
| 208 | if (item.title) { | 130 | if (item.title) { |
| @@ -220,131 +142,8 @@ export default { | @@ -220,131 +142,8 @@ export default { | ||
| 220 | padding: 20rpx; | 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 | .grid-title { | 145 | .grid-title { |
| 242 | line-height: 50rpx; | 146 | line-height: 50rpx; |
| 243 | font-size: 26rpx; | 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 | </style> | 149 | </style> |
yudao-ui-app/pages/profile/profile.vue
| @@ -10,43 +10,22 @@ | @@ -10,43 +10,22 @@ | ||
| 10 | </view> | 10 | </view> |
| 11 | <view class="info-item"> | 11 | <view class="info-item"> |
| 12 | <view class="label">昵称：</view> | 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 | </view> | 15 | </view> |
| 41 | </view> | 16 | </view> |
| 42 | <view class="info-item"> | 17 | <view class="info-item"> |
| 43 | <view class="label">手机：</view> | 18 | <view class="label">手机：</view> |
| 44 | <view class="info"> | 19 | <view class="info"> |
| 45 | <view class="value">{{ userInfo.mobile }}</view> | 20 | <view class="value">{{ userInfo.mobile }}</view> |
| 46 | - <u-icon class="btn" name="edit-pen"></u-icon> | ||
| 47 | </view> | 21 | </view> |
| 48 | </view> | 22 | </view> |
| 49 | </view> | 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 | </view> | 29 | </view> |
| 51 | </template> | 30 | </template> |
| 52 | 31 | ||
| @@ -62,8 +41,13 @@ export default { | @@ -62,8 +41,13 @@ export default { | ||
| 62 | mobile: '' | 41 | mobile: '' |
| 63 | }, | 42 | }, |
| 64 | avatarFiles: [], | 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 | onLoad() { | 53 | onLoad() { |
| @@ -73,6 +57,7 @@ export default { | @@ -73,6 +57,7 @@ export default { | ||
| 73 | loadUserInfoData() { | 57 | loadUserInfoData() { |
| 74 | getUserInfo().then(res => { | 58 | getUserInfo().then(res => { |
| 75 | this.userInfo = res.data | 59 | this.userInfo = res.data |
| 60 | + this.tempName = this.userInfo.nickname | ||
| 76 | }) | 61 | }) |
| 77 | }, | 62 | }, |
| 78 | handleAvatarClick() { | 63 | handleAvatarClick() { |
| @@ -86,11 +71,22 @@ export default { | @@ -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 | handleSaveBtnClick() { | 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 | this.$store.commit('SET_USER_INFO', this.userInfo) | 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,7 +103,7 @@ export default { | ||
| 107 | font-size: 30rpx; | 103 | font-size: 30rpx; |
| 108 | } | 104 | } |
| 109 | .info { | 105 | .info { |
| 110 | - @include flex-right; | 106 | + @include flex-left; |
| 111 | .value { | 107 | .value { |
| 112 | font-size: 30rpx; | 108 | font-size: 30rpx; |
| 113 | } | 109 | } |
| @@ -126,4 +122,8 @@ export default { | @@ -126,4 +122,8 @@ export default { | ||
| 126 | } | 122 | } |
| 127 | } | 123 | } |
| 128 | } | 124 | } |
| 125 | + | ||
| 126 | +.btn-group { | ||
| 127 | + padding: 0 30rpx; | ||
| 128 | +} | ||
| 129 | </style> | 129 | </style> |