This commit is contained in:
faiz 2024-03-24 15:29:21 +08:00
commit 1b198a13d7
16 changed files with 312 additions and 9 deletions

View File

@ -1,6 +1,6 @@
{ {
"name" : "多商户商城", "name" : "铸源商城",
"appid" : "__UNI__99FC347", "appid" : "__UNI__2D931EE",
"description" : "", "description" : "",
"versionName" : "1.0.4", "versionName" : "1.0.4",
"versionCode" : 127, "versionCode" : 127,

View File

@ -88,6 +88,13 @@
"navigationBarTitleText": "商品分类" "navigationBarTitleText": "商品分类"
} }
}, },
{
"path": "pages/shop/index",
"style": {
"enablePullDownRefresh": true,
"navigationBarTitleText": "商家联盟"
}
},
{ {
"path": "pages/news_list/index", "path": "pages/news_list/index",
"style": { "style": {

153
pages/shop/css/shop.css Normal file
View File

@ -0,0 +1,153 @@
.content{
width: 100%;
display: flex;
flex-direction: column;
background-color: white;
}
.content .top-tab{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 28rpx 0;
font-size: 32rpx;
font-weight: bold;
}
.content .top-tab .tab-location{
font-size: 28rpx;
font-weight: 500;
position: absolute;
left:28rpx;
display: flex;
align-items: center;
}
.content .top-tab .tab-location .icon-dingwei{
color: blue;
font-size: 28rpx;
}
.content .content-map{
width: 100%;
height: 300rpx;
}
.content .content-map .map{
width:100%;
}
.content .content-type{
width: 100%;
display: flex;
flex-direction: row;
padding:40rpx 28rpx;
flex-wrap: wrap;
grid-row-gap: 28rpx;
background-color: white;
border-radius: 24rpx 24rpx 0 0;
position: relative;
top: -10rpx;
}
.content .content-type .type-item{
flex: 20%;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.content .content-type .type-item .type-item-img{
width: 48rpx;
height: 48rpx;
}
.content .content-type .type-item .type-item-text{
color: #999;
font-size: 24rpx;
margin-top: 4rpx;
}
.content .content-list{
width: 100%;
display: flex;
flex-direction: column;
}
.content .content-list .list-tab{
padding:24rpx 28rpx;
display: flex;
grid-gap: 24rpx;
font-size: 36rpx;
}
.content .content-list .list-tab .action{
font-weight: bold;
}
.content .content-list .list-container .list-item{
background-color: #F2F2F2;
display: flex;
border-radius: 20rpx;
margin: 24rpx 28rpx;
padding: 24rpx 0;
}
.content .content-list .list-container .list-item .list-item-left{
display: flex;
justify-content: center;
align-items: center;
padding: 0 10rpx;
}
.content .content-list .list-container .list-item .list-item-left image{
width: 160rpx;
height: 160rpx;
border: solid 1px red;
border-radius: 20rpx;
}
.content .content-list .list-container .list-item .list-item-right{
display: flex;
flex-direction: column;
grid-gap: 8rpx;
}
.content .content-list .list-container .list-item .list-item-right .item-title{
font-size: 14px;
font-weight: bold;
}
.content .content-list .list-container .list-item .list-item-right .item-content{
display: flex;
justify-content: space-between;
padding-right: 6rpx;
}
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-left .center-left-score{
color:#FE8C16;
font-size: 24rpx;
padding: 4rpx 0;
}
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-right{
color:white;
background-color: #F87320;
font-size: 24rpx;
line-height: 36rpx;
width: 128rpx;
height: 46rpx;
text-align: center;
padding: 4rpx 8rpx;
border-radius: 30px;
}
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-left .center-left-time{
font-size: 24rpx;
}
.content .content-list .list-container .list-item .list-item-right .item-address{
display: flex;
justify-content: space-between;
color: #999999;
font-size: 24rpx;
padding-right: 6rpx;
grid-gap: 12rpx;
max-width: 500rpx;
}
.content .content-list .list-container .list-item .list-item-right .item-address .address{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
max-width: 360rpx;
}
.content .content-list .list-container .list-item .list-item-right .item-address .distance{
display: 1;
display: flex;
overflow:hidden;
}

View File

@ -1,11 +1,154 @@
<template> <template>
<navigator class="" url="/pages/shop_details/index"> <view class="content">
跳转门店详情 <view class="top-tab">
</navigator> <view class="tab-location">
北京
<view class="iconfont icon-dingwei"></view>
</view>
商家联盟
</view>
<view class="content-map" >
<map class="map" :latitude="22.547" :longitude="114.085947" :markers="covers"></map>
</view>
<view class="content-type">
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab1.png" mode=""></image>
<text class="type-item-text">餐饮美食</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab2.png" mode=""></image>
<text class="type-item-text">丽人美妆</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab3.png" mode=""></image>
<text class="type-item-text">休息娱乐</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab4.png" mode=""></image>
<text class="type-item-text">运动健身</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab5.png" mode=""></image>
<text class="type-item-text">婚庆服务</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab6.png" mode=""></image>
<text class="type-item-text">亲子</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab7.png" mode=""></image>
<text class="type-item-text">教育培训</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab8.png" mode=""></image>
<text class="type-item-text">汽车服务</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab8.png" mode=""></image>
<text class="type-item-text">家装</text>
</view>
<view class="type-item">
<image class="type-item-img" src="@/static/images/shop/tab10.png" mode=""></image>
<text class="type-item-text">生活服务</text>
</view>
</view>
<view class="content-list">
<view class="list-tab">
<view class="action">全部商家</view>
<view>附近商家</view>
</view>
<view class="list-container">
<view class="list-item" v-for="(item,index) in 20" :key='index'>
<view class="list-item-left">
<image src="../users/static/images/level_avatar.png" mode=""></image>
</view>
<view class="list-item-right">
<view class="item-title">
特色餐厅福田店
</view>
<view class="item-content">
<view class="right-center-left">
<view class="center-left-score">
<text class="iconfont icon-kongxinxing"></text>
<!-- <text class="iconfont icon-kongxinxing"></text> -->
<text>4.7</text>
</view>
<view class="center-left-time">营业时间12:00-24:00</view>
</view>
<view class="right-center-right">
去选购
</view>
</view>
<view class="item-address">
<view class="address">深圳市福田区购物公园cocopark购物中心</view>
<view class="distance">100.23km</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
</script> export default {
components:{
<style> },
data(){
return{
// tabList:[
// {
// url:'@/static/images/shop/tab1/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab2/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab3/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab4/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab5/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab6/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab7/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab8/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab9/png',
// name:''
// },
// {
// url:'@/static/images/shop/tab10/png',
// name:''
// },
// ]
}
},
onLoad(){
this.init();
this.loadScript();
},
methods:{
}
}
</script>
<style lang="less" scoped>
@import url("css/shop.css");
</style> </style>

View File

@ -1,5 +1,5 @@
@charset "UTF-8"; @charset "UTF-8";
* {scrollbar-color: #e5e5e5 #f7f7f9;scrollbar-width: thin;} /* * {scrollbar-color: #e5e5e5 #f7f7f9;scrollbar-width: thin;} */
html {margin: 0 auto;max-width: 1200px;} html {margin: 0 auto;max-width: 1200px;}
body {overflow-x: hidden;} body {overflow-x: hidden;}
.font-color,.font-color-red {color:#fc4141!important} .font-color,.font-color-red {color:#fc4141!important}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/images/shop/tab1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
static/images/shop/tab2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
static/images/shop/tab3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/images/shop/tab4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
static/images/shop/tab5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/images/shop/tab6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
static/images/shop/tab7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
static/images/shop/tab8.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
static/images/shop/tab9.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB