Skip to content

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

首页ui

parent 618f414f
Showing with 57 additions and 29 deletions
src/components/common/StoreAddr.vue
<template>
<div class="storeAddr flex">
<div class="left flex" v-if="openThousandsStoresFlag">
<div class="left flex" v-if="openThousandsStoresFlag" @click="pushStorePage">
<div class="logo">
<image :src="logoUrl" alt=""></image>
</div>
<div class="contentInfo flex" v-if="name != ''">
<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>
......@@ -34,6 +35,7 @@ export default {
enterShopId: "", //进店规则门店id
logoUrl: "",
openThousandsStoresFlag: false,
distanceForXinHua: 0,
};
},
async onLoad() {
......@@ -52,6 +54,11 @@ export default {
}
this.reloadName();
},
filters: {
formatDistance(val) {
return val > 1 ? parseFloat(val).toFixed(2) + ' km' : Math.floor(val * 1000) + ' m';
}
},
computed: {
},
methods: {
......@@ -192,19 +199,32 @@ export default {
align-items: center;
.contentInfo {
align-items: flex-start;
align-items: center;
.info {
font-size: 14px;
color: #999;
flex: 1;
}
.addr{
font-size: 12px;
margin-left: 4px;
color: #999;
}
.change {
flex-shrink: 0;
padding-left: 6px;
color: #333;
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 {
.logo {
width: 30px;
height: 30px;
border-radius: 50%;
border-radius: 8px;
overflow: hidden;
margin-right: 10px;
......
static/nativeComponents/GoodsSearch/index.wxml
<!--static/nativeComponents/GoodsSearch/index.wxml-->
<view class="goods-search flex" style="background:{{datas.componentData.heapBgColor||''}}">
<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">
<block wx:if="{{datas.componentData['searchModel'] == 0}}">
<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)}}em;background:{{backgroundColor}};border-color:{{borderColor}}" bindtap="toSearchPage">
<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}}">
<input style="width:{{placeholderValue.length*40}}rpx" disabled type="text" placeholder="{{placeholderValue}}">
</input>
......@@ -17,11 +9,14 @@
<block wx:else>
<input class="search-input" type="text" placeholder="{{placeholderValue}}" bindinput="onInput" value="{{searchValue}}"></input>
</block>
<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="handleSearchLocal">搜本店</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}}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 class="svg-wrapper" catchtap="handleScan">
<image class="scan-svg" src="/static/svg/scanCode.svg" />
</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 class="hot_words_class" wx:if="{{datas.componentData.hotWordsData['isOpenHotWords'] == 1}}">
......
static/nativeComponents/GoodsSearch/index.wxss
......@@ -5,18 +5,18 @@
}
.goods-search{
font-size: 24rpx;
width: 100%;
width: 96%;
margin: 0 auto;
height: 80rpx;
align-items:center;
}
.goods-search i{
margin: 0 20rpx;
color: #bbb;
color: #333;
}
.goods-search .ipt{
width: 96%;
margin: 0 auto;
height: 60rpx;
flex: 1;
height: 70rpx;
align-items: center;
position: relative;
border-width: 1rpx;
......@@ -26,7 +26,11 @@
}
.goods-search .ipt input{
font-size: 28rpx;
color: #bbb;
color: #333;
}
.goods-search .ipt input{
font-size: 28rpx;
color: #333;
}
.goods-search .textCenter{
justify-content: center;
......@@ -39,19 +43,23 @@
.search-btn {
position: relative;
right: 0;
flex-shrink: 0;
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 {
border: none;
border-radius: 2em 0 0 2em;
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.search-btn .search-btn__all {
border: none;
border-radius: 0 2em 2em 0;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.svg-wrapper {
......@@ -59,6 +67,7 @@
height: 100%;
padding-left: 10px;
align-items: center;
margin: 0 20rpx;
}
.svg-divider {
......
static/nativeComponents/RankingList/index.js
const app = getApp();
const { goodsApi, $themeToLink } = app;
const { goodsApi, DFSImg, $themeToLink } = app;
Component({
behaviors: [],
......@@ -86,6 +86,9 @@ Component({
}
const res = await goodsApi.queryProductInfo(data);
if (res.data.code == 200) {
res.data.data.list && res.data.data.list.forEach(item => {
item.productImgUrl = DFSImg(item.productImgUrl);
})
if (!type) {
this.setData({ rankingListA: res.data.data.list || [] });
} else {
......
static/nativeComponents/RankingList/index.wxss
......@@ -34,6 +34,7 @@
.ranking-list__content .list-item {
align-items: center;
flex-direction: column;
margin: 0 20rpx;
}
.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