油站小程序

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 class="my-icons"></view>
</view> </view>
<view class="mub"> <view class="mub">
<view class="mub-box" v-for="(item,index) in activityList" :key="index" <view class="mub-box" v-for="(item,index) in activityList" :key="index">
@click="intoOtherPage(item.name)">
<view class="right-box"> <view class="right-box">
立即前往 立即前往
</view> </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/xfyl.png" v-if="item.name == '消费有礼活动'"></image>
<image src="../../static/imgs/zkyx.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> <image src="../../static/imgs/mjyh.png" v-if="item.name == '满减营销活动'"></image>
@ -23,7 +22,15 @@
</view> </view>
<view class="box-size"> <view class="box-size">
<view class="box-s-title">{{item.name || "活动标题"}}</view> <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>
<view class="box-bottom"> <view class="box-bottom">
<view class="">活动时间</view> <view class="">活动时间</view>
@ -170,19 +177,21 @@
justify-content: space-between; justify-content: space-between;
border-top: 1px solid #f4f5f6; border-top: 1px solid #f4f5f6;
font-size: 14px; font-size: 14px;
color: #666666;
} }
.box-s-title { .box-s-title {
font-size: 17px; font-size: 17px;
font-weight: bold; font-weight: bold;
margin: 5px auto;
} }
.box-s-size { .box-s-size {
font-size: 14px; font-size: 14px;
color: #666666; color: #777777;
box-sizing: border-box; box-sizing: border-box;
padding: 5px; // padding: 5px;
background-color: #f4f5f6; // background-color: #f4f5f6;
border-radius: 8px; border-radius: 8px;
margin: 5px auto; margin: 5px auto;
@ -209,4 +218,24 @@
position: fixed; position: fixed;
top: 0px; 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> </style>

View File

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

View File

@ -15,28 +15,44 @@
<image src="../../static/imgs/yqyl.png" v-if="title == '推荐有礼活动'"></image> <image src="../../static/imgs/yqyl.png" v-if="title == '推荐有礼活动'"></image>
</view> </view>
<view class="center-box"> <view class="center-box">
<view class="title-box">活动明细</view> <view class="title-box">活动介绍</view>
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '消费有礼活动'"> <view class="h_size">活动介绍活动介绍活动介绍</view>
<text>{{item.activeDescribe || ""}}</text> <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>
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '折扣营销活动'"> <view class="h_bottom">
<text>{{item.discountActiveDescribe || ""}}</text> <view class="dis-box">
</view> <view class="dian"></view>
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '满减营销活动'"> <view class="h_size">参与会员普通会员银牌会员V2</view>
<text>{{item.fullminusActiveDescribe || ""}}</text> </view>
</view> <view class="dis-box">
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '储值卡充值活动'"> <view class="dian" style="background: #FA5E03;"></view>
<text>{{item.discountActiveDescribe || ""}}</text> <view class="h_size">获得折扣赠送10积分</view>
</view> </view>
<view class="g-box" v-if="title == '新人有礼活动'">
<text>{{datas.newlywedsActiveDescribe || ""}}</text>
</view>
<view class="g-box" v-if="title == '推荐有礼活动'">
<text>{{datas.recommendActiveDescribeIn || ""}}</text>
<text>{{datas.recommendActiveDescribeOut || ""}}</text>
</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 == '折扣营销活动'">
<text>{{item.discountActiveDescribe || ""}}</text>
</view>
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '满减营销活动'">
<text>{{item.fullminusActiveDescribe || ""}}</text>
</view>
<view class="g-box" v-for="(item,index) in datas" :key="index" v-if="title == '储值卡充值活动'">
<text>{{item.discountActiveDescribe || ""}}</text>
</view>
<view class="g-box" v-if="title == '新人有礼活动'">
<text>{{datas.newlywedsActiveDescribe || ""}}</text>
</view>
<view class="g-box" v-if="title == '推荐有礼活动'">
<text>{{datas.recommendActiveDescribeIn || ""}}</text>
<text>{{datas.recommendActiveDescribeOut || ""}}</text>
</view> -->
</view> </view>
</view> </view>
</template> </template>
@ -120,17 +136,17 @@
} }
}) })
} }
if (name == '储值卡充值活动') { if (name == '储值卡充值活动') {
request({ request({
url: '/business/marketingActivity/cardValue/appletList', url: '/business/marketingActivity/cardValue/appletList',
method: 'get', method: 'get',
}).then(res => { }).then(res => {
if (res.code == 200) { if (res.code == 200) {
this.datas = res.data this.datas = res.data
uni.hideLoading(); uni.hideLoading();
} }
}) })
} }
}, },
@ -143,7 +159,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
background: #ffffff; background: #f4f5f6;
height: 100vh; height: 100vh;
} }
@ -158,7 +174,7 @@
.container { .container {
width: 100%; width: 100%;
background: #ffffff; background: #f4f5f6;
box-sizing: border-box; box-sizing: border-box;
padding-top: 88px; padding-top: 88px;
padding-bottom: 20px; padding-bottom: 20px;
@ -187,7 +203,7 @@
.center-box { .center-box {
border-radius: 8px; border-radius: 8px;
background: #f4f5f6; background: #ffffff;
margin: 10px auto; margin: 10px auto;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
@ -197,6 +213,7 @@
.title-box { .title-box {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin: 10px auto;
} }
@ -207,4 +224,52 @@
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
</style>
.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="box-top">
<view class="dis"> <view class="dis">
<view class="touxiang"> <view class="touxiang">
<image src="../../static/imgs/topbj.png" mode=""></image> <image src="../../static/imgs/bzhd.png" mode=""></image>
</view> </view>
<view class="box-top-size"> <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 class="box-hui"> {{item.store.address}} </view>
</view> </view>
</view> </view>
<view class=""> <view class="">
<view class="top-right-icon" v-if="index == 0"> <view class="top-right-icon" v-if="index == 0">
<u-tag text="距离最近" size="mini" type="error" <u-tag text="距离最近" size="mini" type="error" plain plainFill></u-tag>
plain plainFill></u-tag> </view>
<view class="box-hui" style="width: 80px;">{{(Math.ceil(item.distance)).toFixed(1)}}km
</view> </view>
<view class="box-hui" style="width: 80px;">{{(Math.ceil(item.distance)).toFixed(1)}}km</view>
</view> </view>
</view> </view>
<scroll-view scroll-x="true" class="fa-scroll"> <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: 16px;">{{item1.oilNames}}</view>
<view style="font-size: 18px;">{{item1.gbPrice}}/{{item1.unit}}</view> <view style="font-size: 18px;">{{item1.gbPrice}}/{{item1.unit}}</view>
</view> </view>
</scroll-view> </scroll-view>
<view class="wrap-box"> <view class="wrap-box">
<u-tag v-if="item.store.welfareList!=null" <u-tag v-if="item.store.welfareList!=null" v-for="(item1,index1) in item.store.welfareList"
v-for="(item1,index1) in item.store.welfareList" :key="index1" :key="index1" :text="item1" type="warning" shape="circle"></u-tag>
:text="item1" type="warning" shape="circle"></u-tag>
</view> </view>
<view class="box-bottom"> <view class="box-bottom">
<view class="box-bottom-anniu"> <view class="box-bottom-anniu">
@ -78,14 +80,14 @@
return { return {
title: '', title: '',
// //
storeList:[], storeList: [],
list:[], list: [],
// //
storeName:"", storeName: "",
map:{ map: {
lon:"", lon: "",
lat:"", lat: "",
storeId:"", storeId: "",
} }
} }
}, },
@ -100,16 +102,17 @@
}, },
methods: { methods: {
// //
queryStore(val){ queryStore(val) {
this.list = [] this.list = []
this.storeList.forEach(item => { 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) this.list.push(item)
} }
}) })
}, },
// //
getLonLat(){ getLonLat() {
let _this = this; let _this = this;
wx.getLocation({ wx.getLocation({
type: 'gcj02', // 使 type: 'gcj02', // 使
@ -121,26 +124,26 @@
} }
}) })
}, },
getList(data){ getList(data) {
let _this = this; let _this = this;
request({ request({
url: "business/storeInformation/store/queryStores", url: "business/storeInformation/store/queryStores",
method: 'post', method: 'post',
data: data, data: data,
}).then((res)=>{ }).then((res) => {
_this.storeList = res.data _this.storeList = res.data
_this.list = _this.storeList _this.list = _this.storeList
}) })
}, },
// //
toRefuelOil(data){ toRefuelOil(data) {
console.log(data) console.log(data)
}, },
// //
toRefuel(data){ toRefuel(data) {
// console.log(data) // console.log(data)
uni.setStorageSync("storeId",data.id) uni.setStorageSync("storeId", data.id)
uni.setStorageSync("chainStoreId",data.chainStoreId) uni.setStorageSync("chainStoreId", data.chainStoreId)
uni.navigateTo({ uni.navigateTo({
url: '/pages/refuel/refuel' url: '/pages/refuel/refuel'
}) })
@ -234,7 +237,7 @@
.touxiang { .touxiang {
width: 45px; width: 45px;
height: 45px; height: 45px;
border-radius: 50%;
overflow: hidden; overflow: hidden;
image { image {
@ -244,6 +247,7 @@
} }
.box-top-size { .box-top-size {
width: 80%;
margin-left: 5px; margin-left: 5px;
} }
@ -310,4 +314,4 @@
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
} }
</style> </style>