Skip to content

M
mayi-mp-shop
Commit 51d18665 by 李嘉林
Options

首页ui

parent 618f414f
Showing with 58 additions and 30 deletions
src/components/common/StoreAddr.vue
<template> <template>
<div class="storeAddr flex"> <div class="storeAddr flex">
<div class="left flex" v-if="openThousandsStoresFlag"> <div class="left flex" v-if="openThousandsStoresFlag" @click="pushStorePage">
<div class="logo"> <div class="logo">
<image :src="logoUrl" alt=""></image> <image :src="logoUrl" alt=""></image>
</div> </div>
<div class="contentInfo flex" v-if="name != ''"> <div class="contentInfo flex" v-if="name != ''">
<p class="info">{{ name }}</p> <p class="info">{{ name }}</p>
<p class="change" @click="pushStorePage">[切换]</p> <p class="addr" v-if="distanceForXinHua">{{ distanceForXinHua | formatDistance}}</p>
<p class="change"><i class="ant-fanhui-line"></i></p>
</div> </div>
</div> </div>
</div> </div>
...@@ -34,6 +35,7 @@ export default { ...@@ -34,6 +35,7 @@ export default {
enterShopId: "", //进店规则门店id enterShopId: "", //进店规则门店id
logoUrl: "", logoUrl: "",
openThousandsStoresFlag: false, openThousandsStoresFlag: false,
distanceForXinHua: 0,
}; };
}, },
async onLoad() { async onLoad() {
...@@ -52,6 +54,11 @@ export default { ...@@ -52,6 +54,11 @@ export default {
} }
this.reloadName(); this.reloadName();
}, },
filters: {
formatDistance(val) {
return val > 1 ? parseFloat(val).toFixed(2) + ' km' : Math.floor(val * 1000) + ' m';
}
},
computed: { computed: {
}, },
methods: { methods: {
...@@ -192,19 +199,32 @@ export default { ...@@ -192,19 +199,32 @@ export default {
align-items: center; align-items: center;
.contentInfo { .contentInfo {
align-items: flex-start; align-items: center;
.info { .info {
font-size: 14px; font-size: 14px;
color: #999; color: #999;
flex: 1; flex: 1;
} }
.addr{
font-size: 12px;
margin-left: 4px;
color: #999;
}
.change { .change {
flex-shrink: 0; flex-shrink: 0;
padding-left: 6px; padding-left: 6px;
color: #333; color: #333;
font-size: 14px; font-size: 14px;
align-items: center;
i{
display: inline-block;
transform: rotateZ(-90deg);
font-weight: bold;
color: #999;
margin-top: 4px;
}
} }
} }
...@@ -212,7 +232,7 @@ export default { ...@@ -212,7 +232,7 @@ export default {
.logo { .logo {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 8px;
overflow: hidden; overflow: hidden;
margin-right: 10px; margin-right: 10px;
......
static/nativeComponents/GoodsSearch/index.wxml
<!--static/nativeComponents/GoodsSearch/index.wxml--> <!--static/nativeComponents/GoodsSearch/index.wxml-->
<view class="goods-search flex" style="background:{{datas.componentData.heapBgColor||''}}"> <view class="goods-search flex" style="background:{{datas.componentData.heapBgColor||''}}" style="--border-radius: {{2*(datas.componentData['radius']/100)}}em">
<view class="ipt flex {{datas.componentData.keywordPosition == 1 ? 'textCenter' : ''}} {{datas.componentData.showStyle == 0 ? 'my-hairline--all' :''}}" style="border-radius:{{2*(datas.componentData['radius']/100)*2}}em;border-radius:{{2*(datas.componentData['radius']/100)}}em;background:{{backgroundColor}};border-color:{{borderColor}}" bindtap="toSearchPage"> <view class="ipt flex {{datas.componentData.keywordPosition == 1 ? 'textCenter' : ''}} {{datas.componentData.showStyle == 0 ? 'my-hairline--all' :''}}" style="border-radius:{{2*(datas.componentData['radius']/100)}}em;background:{{backgroundColor}};border-color:{{borderColor}}" bindtap="toSearchPage">
<block wx:if="{{datas.componentData['searchModel'] == 0}}"> <i class="iconfont-common common-iconsousuo"></i>
<i class="iconfont-common common-iconsousuo"></i>
</block>
<block wx:else>
<view class="svg-wrapper" catchtap="handleScan">
<image class="scan-svg" src="/static/svg/scanCode.svg" />
</view>
<view class="svg-divider"></view>
</block>
<block wx:if="{{datas.componentData['searchModel'] != 1}}"> <block wx:if="{{datas.componentData['searchModel'] != 1}}">
<input style="width:{{placeholderValue.length*40}}rpx" disabled type="text" placeholder="{{placeholderValue}}"> <input style="width:{{placeholderValue.length*40}}rpx" disabled type="text" placeholder="{{placeholderValue}}">
</input> </input>
...@@ -17,11 +9,14 @@ ...@@ -17,11 +9,14 @@
<block wx:else> <block wx:else>
<input class="search-input" type="text" placeholder="{{placeholderValue}}" bindinput="onInput" value="{{searchValue}}"></input> <input class="search-input" type="text" placeholder="{{placeholderValue}}" bindinput="onInput" value="{{searchValue}}"></input>
</block> </block>
<view class="flex search-btn" wx:if="{{datas.componentData['searchModel'] == 1}}"> <view class="svg-wrapper" catchtap="handleScan">
<view class="search-btn__local" style="color:{{datas.componentData.leftBtn.color}};background-color:{{datas.componentData['leftBtn'].backgroundColor}};font-size:{{datas.componentData['leftBtn'].fontSize*2}}rpx;padding:{{datas.componentData['leftBtn'].paddingTop*2}}rpx {{datas.componentData['leftBtn'].paddingRight*2}}rpx {{datas.componentData['leftBtn'].paddingBottom*2}}rpx {{datas.componentData['leftBtn'].paddingLeft*2}}rpx;margin:{{datas.componentData['leftBtn'].marginTop*2}}rpx {{datas.componentData['leftBtn'].marginRight*2}}rpx {{datas.componentData['leftBtn'].marginBottom*2}}rpx {{datas.componentData['leftBtn'].marginLeft*2}}rpx;" bindtap="handleSearchLocal">搜本店</view> <image class="scan-svg" src="/static/svg/scanCode.svg" />
<view class="search-btn__all" style="color:{{datas.componentData['rightBtn'].color}};background-color:{{datas.componentData['rightBtn'].backgroundColor}};font-size:{{datas.componentData['rightBtn'].fontSize*2}}rpx;padding:{{datas.componentData['rightBtn'].paddingTop*2}}rpx {{datas.componentData['rightBtn'].paddingRight*2}}rpx {{datas.componentData['rightBtn'].paddingBottom}}rpx {{datas.componentData['rightBtn'].paddingLeft*2}}rpx;margin:{{datas.componentData['rightBtn'].marginTop*2}}rpx {{datas.componentData['rightBtn'].marginRight*2}}rpx {{datas.componentData['rightBtn'].marginBottom*2}}rpx {{datas.componentData['rightBtn'].marginLeft*2}}rpx;" bindtap="handleSearchAll">搜全网</view>
</view> </view>
</view> </view>
<view class="flex search-btn" wx:if="{{datas.componentData['searchModel'] == 1}}">
<view class="search-btn__local" style="color:{{datas.componentData.leftBtn.color}};background-color:{{datas.componentData['leftBtn'].backgroundColor}};font-size:{{datas.componentData['leftBtn'].fontSize*2}}rpx;padding:{{datas.componentData['leftBtn'].paddingTop*2}}rpx {{datas.componentData['leftBtn'].paddingRight*2}}rpx {{datas.componentData['leftBtn'].paddingBottom*2}}rpx {{datas.componentData['leftBtn'].paddingLeft*2}}rpx;margin:{{datas.componentData['leftBtn'].marginTop*2}}rpx {{datas.componentData['leftBtn'].marginRight*2}}rpx {{datas.componentData['leftBtn'].marginBottom*2}}rpx {{datas.componentData['leftBtn'].marginLeft*2}}rpx;" bindtap="handleSearchAll">全网搜</view>
<view class="search-btn__all" style="color:{{datas.componentData['rightBtn'].color}};background-color:{{datas.componentData['rightBtn'].backgroundColor}};font-size:{{datas.componentData['rightBtn'].fontSize*2}}rpx;padding:{{datas.componentData['rightBtn'].paddingTop*2}}rpx {{datas.componentData['rightBtn'].paddingRight*2}}rpx {{datas.componentData['rightBtn'].paddingBottom*2}}rpx {{datas.componentData['rightBtn'].paddingLeft*2}}rpx;margin:{{datas.componentData['rightBtn'].marginTop*2}}rpx {{datas.componentData['rightBtn'].marginRight*2}}rpx {{datas.componentData['rightBtn'].marginBottom*2}}rpx {{datas.componentData['rightBtn'].marginLeft*2}}rpx;" bindtap="handleSearchLocal">门店搜</view>
</view>
</view> </view>
<!-- 热门词区域 --> <!-- 热门词区域 -->
<view class="hot_words_class" wx:if="{{datas.componentData.hotWordsData['isOpenHotWords'] == 1}}"> <view class="hot_words_class" wx:if="{{datas.componentData.hotWordsData['isOpenHotWords'] == 1}}">
......
static/nativeComponents/GoodsSearch/index.wxss
...@@ -5,18 +5,18 @@ ...@@ -5,18 +5,18 @@
} }
.goods-search{ .goods-search{
font-size: 24rpx; font-size: 24rpx;
width: 100%; width: 96%;
margin: 0 auto;
height: 80rpx; height: 80rpx;
align-items:center; align-items:center;
} }
.goods-search i{ .goods-search i{
margin: 0 20rpx; margin: 0 20rpx;
color: #bbb; color: #333;
} }
.goods-search .ipt{ .goods-search .ipt{
width: 96%; flex: 1;
margin: 0 auto; height: 70rpx;
height: 60rpx;
align-items: center; align-items: center;
position: relative; position: relative;
border-width: 1rpx; border-width: 1rpx;
...@@ -26,7 +26,11 @@ ...@@ -26,7 +26,11 @@
} }
.goods-search .ipt input{ .goods-search .ipt input{
font-size: 28rpx; font-size: 28rpx;
color: #bbb; color: #333;
}
.goods-search .ipt input{
font-size: 28rpx;
color: #333;
} }
.goods-search .textCenter{ .goods-search .textCenter{
justify-content: center; justify-content: center;
...@@ -39,19 +43,23 @@ ...@@ -39,19 +43,23 @@
.search-btn { .search-btn {
position: relative; position: relative;
right: 0; flex-shrink: 0;
justify-content: end; justify-content: end;
margin-right: 2px; margin-left: 10px;
}
.search-btn > view{
display: flex;
justify-content: center;
align-items: center;
} }
.search-btn .search-btn__local { .search-btn .search-btn__local {
border: none; border: none;
border-radius: 2em 0 0 2em; border-radius: var(--border-radius) 0 0 var(--border-radius);
} }
.search-btn .search-btn__all { .search-btn .search-btn__all {
border: none; border: none;
border-radius: 0 2em 2em 0; border-radius: 0 var(--border-radius) var(--border-radius) 0;
} }
.svg-wrapper { .svg-wrapper {
...@@ -59,6 +67,7 @@ ...@@ -59,6 +67,7 @@
height: 100%; height: 100%;
padding-left: 10px; padding-left: 10px;
align-items: center; align-items: center;
margin: 0 20rpx;
} }
.svg-divider { .svg-divider {
......
static/nativeComponents/RankingList/index.js
const app = getApp(); const app = getApp();
const { goodsApi, $themeToLink } = app; const { goodsApi, DFSImg, $themeToLink } = app;
Component({ Component({
behaviors: [], behaviors: [],
...@@ -86,6 +86,9 @@ Component({ ...@@ -86,6 +86,9 @@ Component({
} }
const res = await goodsApi.queryProductInfo(data); const res = await goodsApi.queryProductInfo(data);
if (res.data.code == 200) { if (res.data.code == 200) {
res.data.data.list && res.data.data.list.forEach(item => {
item.productImgUrl = DFSImg(item.productImgUrl);
})
if (!type) { if (!type) {
this.setData({ rankingListA: res.data.data.list || [] }); this.setData({ rankingListA: res.data.data.list || [] });
} else { } else {
......
static/nativeComponents/RankingList/index.wxss
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
.ranking-list__content .list-item { .ranking-list__content .list-item {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin: 0 20rpx;
} }
.ranking-list__content .image { .ranking-list__content .image {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment