油站小程序

This commit is contained in:
@QQNZX 2023-12-18 11:10:15 +08:00
parent 63339f8016
commit f4e97540f3
4 changed files with 167 additions and 68 deletions

View File

@ -7,13 +7,12 @@
<view class="my-icons"></view>
</view>
<view class="mub">
<view class="mub-box" v-for="(item,index) in activityList" :key="index"
@click="intoOtherPage(item.name)">
<view class="mub-box" v-for="(item,index) in activityList" :key="index">
<view class="right-box">
立即前往
</view>
<view class="box-img">
<view class="box-img" @click="intoOtherPage(item.name)">
<image src="../../static/imgs/xfyl.png" v-if="item.name == '消费有礼活动'"></image>
<image src="../../static/imgs/zkyx.png" v-if="item.name == '折扣营销活动'"></image>
<image src="../../static/imgs/mjyh.png" v-if="item.name == '满减营销活动'"></image>
@ -23,7 +22,15 @@
</view>
<view class="box-size">
<view class="box-s-title">{{item.name || "活动标题"}}</view>
<view class="box-s-size">{{item.des || "内容"}}</view>
<!-- <view class="box-s-size">{{item.des || "内容"}}</view> -->
<view class="dis-box">
<view class="dian"></view>
<view class="h_size">适用用户普通会员银牌会员V2</view>
</view>
<view class="dis-box">
<view class="dian" style="background: #FA5E03;"></view>
<view class="h_size">享受优惠满送一百万 送一元</view>
</view>
</view>
<view class="box-bottom">
<view class="">活动时间</view>
@ -170,19 +177,21 @@
justify-content: space-between;
border-top: 1px solid #f4f5f6;
font-size: 14px;
color: #666666;
}
.box-s-title {
font-size: 17px;
font-weight: bold;
margin: 5px auto;
}
.box-s-size {
font-size: 14px;
color: #666666;
color: #777777;
box-sizing: border-box;
padding: 5px;
background-color: #f4f5f6;
// padding: 5px;
// background-color: #f4f5f6;
border-radius: 8px;
margin: 5px auto;
@ -209,4 +218,24 @@
position: fixed;
top: 0px;
}
.dian {
width: 6px;
height: 6px;
background: #2F72F7;
border-radius: 50%;
margin-right: 5px;
}
.dis-box {
display: flex;
align-items: center;
}
.h_size {
font-size: 14px;
font-weight: 400;
color: #777777;
}
</style>

View File

@ -8,8 +8,8 @@
</view>
<!-- 顶部区域 -->
<view class="centen-siez">
<u-parse :content="setting.pointsRules"></u-parse>
<view v-html="setting.pointsRules"></view>
</view>
</view>
@ -60,6 +60,7 @@
.content {
width: 100%;
background: #f4f5f6;
background: #ffffff;
}

View File

@ -15,8 +15,25 @@
<image src="../../static/imgs/yqyl.png" v-if="title == '推荐有礼活动'"></image>
</view>
<view class="center-box">
<view class="title-box">活动明细</view>
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '消费有礼活动'">
<view class="title-box">活动介绍</view>
<view class="h_size">活动介绍活动介绍活动介绍</view>
<view class="title-box">参与油品</view>
<view class="w_box">
<view class="w_oil" v-for="(item,index) in 3" :key="index">#95</view>
</view>
<view class="h_bottom">
<view class="dis-box">
<view class="dian"></view>
<view class="h_size">参与会员普通会员银牌会员V2</view>
</view>
<view class="dis-box">
<view class="dian" style="background: #FA5E03;"></view>
<view class="h_size">获得折扣赠送10积分</view>
</view>
</view>
</view>
<!-- <view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '消费有礼活动'">
<text>{{item.activeDescribe || ""}}</text>
</view>
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '折扣营销活动'">
@ -34,8 +51,7 @@
<view class="g-box" v-if="title == '推荐有礼活动'">
<text>{{datas.recommendActiveDescribeIn || ""}}</text>
<text>{{datas.recommendActiveDescribeOut || ""}}</text>
</view>
</view>
</view> -->
</view>
</view>
@ -143,7 +159,7 @@
<style scoped lang="scss">
.content {
background: #ffffff;
background: #f4f5f6;
height: 100vh;
}
@ -158,7 +174,7 @@
.container {
width: 100%;
background: #ffffff;
background: #f4f5f6;
box-sizing: border-box;
padding-top: 88px;
padding-bottom: 20px;
@ -187,7 +203,7 @@
.center-box {
border-radius: 8px;
background: #f4f5f6;
background: #ffffff;
margin: 10px auto;
box-sizing: border-box;
padding: 10px;
@ -197,6 +213,7 @@
.title-box {
font-size: 18px;
font-weight: bold;
margin: 10px auto;
}
@ -207,4 +224,52 @@
font-size: 14px;
color: #333333;
}
.w_box {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.h_size {
font-size: 14px;
font-weight: 400;
color: #777777;
}
.w_oil {
border-radius: 4px 4px 4px 4px;
box-sizing: border-box;
padding: 5px 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
border: 1px solid #2F72F7;
color: #2F72F7;
}
.h_bottom {
width: 100%;
background: #F4F4F4;
border-radius: 4px;
box-sizing: border-box;
padding: 10px 5px;
margin: 10px auto;
}
.dian {
width: 6px;
height: 6px;
background: #2F72F7;
border-radius: 50%;
margin-right: 5px;
}
.dis-box {
display: flex;
align-items: center;
}
</style>

View File

@ -19,33 +19,35 @@
<view class="box-top">
<view class="dis">
<view class="touxiang">
<image src="../../static/imgs/topbj.png" mode=""></image>
<image src="../../static/imgs/bzhd.png" mode=""></image>
</view>
<view class="box-top-size">
<view class="box-title">{{item.store.name}}{{item.store.description ? "("+item.store.description+")" : ""}}</view>
<view class="box-title">
{{item.store.name}}{{item.store.description ? "("+item.store.description+")" : ""}}
</view>
<view class="box-hui"> {{item.store.address}} </view>
</view>
</view>
<view class="">
<view class="top-right-icon" v-if="index == 0">
<u-tag text="距离最近" size="mini" type="error"
plain plainFill></u-tag>
<u-tag text="距离最近" size="mini" type="error" plain plainFill></u-tag>
</view>
<view class="box-hui" style="width: 80px;">{{(Math.ceil(item.distance)).toFixed(1)}}km
</view>
<view class="box-hui" style="width: 80px;">{{(Math.ceil(item.distance)).toFixed(1)}}km</view>
</view>
</view>
<scroll-view scroll-x="true" class="fa-scroll">
<view class="scrollbox" v-for="(item1,index1) in item.store.oilList" :key="index1" @click="toRefuel(item.store)">
<view class="scrollbox" v-for="(item1,index1) in item.store.oilList" :key="index1"
@click="toRefuel(item.store)">
<view style="font-size: 16px;">{{item1.oilNames}}</view>
<view style="font-size: 18px;">{{item1.gbPrice}}/{{item1.unit}}</view>
</view>
</scroll-view>
<view class="wrap-box">
<u-tag v-if="item.store.welfareList!=null"
v-for="(item1,index1) in item.store.welfareList" :key="index1"
:text="item1" type="warning" shape="circle"></u-tag>
<u-tag v-if="item.store.welfareList!=null" v-for="(item1,index1) in item.store.welfareList"
:key="index1" :text="item1" type="warning" shape="circle"></u-tag>
</view>
<view class="box-bottom">
<view class="box-bottom-anniu">
@ -103,7 +105,8 @@
queryStore(val) {
this.list = []
this.storeList.forEach(item => {
if (item.store.name.includes(val.detail.value) || item.store.description.includes(val.detail.value)){
if (item.store.name.includes(val.detail.value) || item.store.description.includes(val.detail
.value)) {
this.list.push(item)
}
})
@ -234,7 +237,7 @@
.touxiang {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
image {
@ -244,6 +247,7 @@
}
.box-top-size {
width: 80%;
margin-left: 5px;
}