首页更新

This commit is contained in:
魏啾
2024-05-07 17:23:52 +08:00
parent 3b85017f91
commit a9832d38af
12 changed files with 707 additions and 286 deletions

View File

@@ -0,0 +1,137 @@
<template>
<view class="content">
<view class="contentitem" v-for="(item,index) in list" :key="index">
<view class="contentitemone flex-between">
<view class="contentitemone_o">
{{item.shopName}}{{(item.chainName)}}
</view>
<u-icon name="phone-fill" color="#333333" size="50" @click="clickphone(item.phone)"></u-icon>
</view>
<view class="contentitemtow">
营业时间{{item.businessTime}}
</view>
<view class="contentitemthere flex-start">
<view class="contentitemthere_o" v-if="index == 0">
最近
</view>
<image class="contentitemthere_image"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/d.png" mode="aspectFill"></image>
<view class="contentitemthere_t">
距您{{item.distances}}km<text v-if="item.address">,{{item.address}}</text>
</view>
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
shopName: '',
list:[]
};
},
onLoad(e) {
this.shopName = e.name
this.distirictcomShopList()
},
onShow() {},
methods: {
//打电话
clickphone(e) {
uni.makePhoneCall({
phoneNumber: e
});
},
async distirictcomShopList() {
let res = await this.api.distirictcomShopList({
lng: uni.cache.get('getLocationstorage').lng,
lat: uni.cache.get('getLocationstorage').lat,
address: uni.cache.get('getLocationstorage').address,
distanceInKm: '',
page: 1,
size: 10,
shopName: this.shopName
})
if (res.code == 0) {
this.list = res.data
}
},
clickproduct(item) {
uni.pro.navigateTo('product/index', item)
},
}
};
</script>
<style scoped lang="scss">
page {
background: #fff;
}
.content {
padding: 0 24rpx;
.contentitem:nth-child(1) {
border-top: none;
}
.contentitem {
padding: 32rpx 0;
width: 100%;
border-top: 2rpx solid #E5E5E5;
.contentitemone {
.contentitemone_o {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
}
.contentitemtow {
margin-top: 16rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 24rpx;
color: #999999;
}
.contentitemthere {
margin-top: 16rpx;
.contentitemthere_o {
padding: 2rpx 12rpx;
background: #FFF9E1;
border-radius: 4rpx 4rpx 4rpx 4rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF9125;
}
.contentitemthere_image {
width: 24rpx;
height: 24rpx;
}
.contentitemthere_t {
margin-left: 8rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
text{
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
}
}
}
</style>

View File

@@ -5,8 +5,9 @@
<view class="onecontent">
<!-- 小内切圆 -->
<view class="after"></view>
<image class="onecontentimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/nav.png"
mode=""></image>
<!-- <image class="onecontentimage" :src="listdata.images"
mode=""></image> -->
<u-swiper class="onecontentimage" :list="listdata.images" height='490'></u-swiper>
</view>
<view class="towcontent">
<view class="onetowcontent flex-between">
@@ -15,30 +16,30 @@
到手
</view>
<view class="onetowcontent_onet">
12.00
{{listdata.salePrice}}
</view>
<view class="onetowcontent_oneth">
8
{{listdata.discount}}
</view>
<view class="onetowcontent_onefour">
15.00
{{listdata.originPrice}}
</view>
</view>
<view class="onetowcontent_tow flex-center">
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/h.png" mode="aspectFill">
</image>
<text>已售620</text>
<text>已售{{listdata.realSalesNumber}}</text>
</view>
<view class="after"></view>
</view>
<view class="towtowcontent">
<view class="towtowcontent_one">
书亦烧仙草|青提烧仙草
{{listdata.shopName}}|{{listdata.productName}}
</view>
<view class="towtowcontent_tow flex-start">
<view class="flex-center">
<image class="towtowcontent_towimage" src="@/static/avatar.png" mode="aspectFill"></image>
<text class="towtowcontent_towtext">随时退</text>
<view class="flex-center" v-for="(item,index) in listdata.noticeTag" :key="index">
<image class="towtowcontent_towimage" :src="item.shareImg" mode="aspectFill"></image>
<text class="towtowcontent_towtext">{{item.name}}</text>
</view>
</view>
</view>
@@ -48,29 +49,29 @@
通用门店
</view>
<view class="onetherecontent_t flex-start">
<view class="">
15家店可用
<view class="" v-if="listdata.shopNum" @click="productgeneralstore(listdata.shopName)">
{{listdata.shopNum}}家店可用
</view>
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
</view>
</view>
<view class="towtherecontent flex-between">
<view class="towtherecontent_o">
书亦烧仙草西安龙首门店
{{listdata.shopName || ''}}<text v-if="listdata.chainName">{{listdata.chainName}}门店</text>
</view>
<u-icon name="phone-fill" color="#333333" size="50"></u-icon>
<u-icon name="phone-fill" color="#333333" size="50" @click="clickphone(listdata.phone)"></u-icon>
</view>
<view class="theretherecontent">
营业时间周一至周日 10:00-21:00
营业时间{{listdata.businessTime}}
</view>
<view class="fourtherecontent flex-start">
<image class="fourtherecontentimage"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/d.png" mode="aspectFill"></image>
<view class="fourtherecontent_o">
30.0km
{{listdata.distances}}km
</view>
<view class="fourtherecontent_t">
龙首印象城向西20米
{{listdata.address}}
</view>
</view>
</view>
@@ -78,27 +79,30 @@
<view class="fourcontent_o">
套餐详情
</view>
<view class="fourcontent_t">
饮品
</view>
<view class="fourcontent_th flex-between">
<view class="fourcontent_th_one flex-start">
<view>
青提烧仙草
</view>
<view>
网友推荐TOP5
</view>
<view v-for="(item,index) in listdata.productList" :key="index">
<view class="fourcontent_t">
{{item.title}}
</view>
<view class="fourcontent_th_tow flex-start">
<view class="fourcontent_th_towo">
1
<view class="fourcontent_th flex-between" v-for="(item1,index1) in item.goods" :key="index1">
<view class="fourcontent_th_one flex-start">
<view>
{{item1.name}}
</view>
<view v-for="(item2,index2) in item1.proTag" :style="{'background':item.backColor,'color':item.fontColor}" :key="index2">
{{item2.name}}
</view>
</view>
<view class="fourcontent_th_towt">
12.00
<view class="fourcontent_th_tow flex-start">
<view class="fourcontent_th_towo">
{{item1.unitName}}
</view>
<view class="fourcontent_th_towt">
{{item1.lowPrice}}
</view>
</view>
</view>
</view>
</view>
<view class="fivecontent">
<view class="fivecontentone">
@@ -109,7 +113,7 @@
使用日期
</view>
<view class="fivecontenitemtow">
购买15天内有效
{{listdata.purchaseNotice.dateUsed || '无'}}
</view>
</view>
<view class="fivecontenitem">
@@ -117,7 +121,7 @@
可用时间
</view>
<view class="fivecontenitemtow">
全天可用
{{listdata.purchaseNotice.availableTime || '无'}}
</view>
</view>
<view class="fivecontenitem">
@@ -125,7 +129,7 @@
预约方式
</view>
<view class="fivecontenitemtow">
无需预约高峰期需等位
{{listdata.purchaseNotice.bookingType || '无'}}
</view>
</view>
<view class="fivecontenitem">
@@ -133,8 +137,7 @@
退款说明
</view>
<view class="fivecontenitemtow">
此为限时限量特惠产品请在规定期限内使用使用期限
内可申请全额退款逾期未使用自动全额退款
{{listdata.purchaseNotice.refundPolicy || '无'}}
</view>
</view>
<view class="fivecontenitem">
@@ -168,7 +171,7 @@
<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
</view>
</view>
<view class="bottomcontent flex-between">
<!-- <view class="bottomcontent flex-between">
<view class="bottomcontent_texttop flex-start">
附近推荐
</view>
@@ -176,7 +179,7 @@
去首页
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
</view>
</view>
</view> -->
<view class="fivecontentes">
<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index">
<view class="fivecontent_item_nav flex-start">
@@ -191,11 +194,10 @@
</view>
</view>
<view class="fivecontent_item_nav_lefttopstart flex-start">
<view class="fivecontent_item_nav_leftlang flex-start"
v-for="(s,index1) in item.shopTag" :key="index1"
:style="{'background':s.backColor,'color':s.backColor}">
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg"
:src="s.shareImg" mode="aspectFill"></image>
<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
:key="index1" :style="{'background':s.backColor,'color':s.backColor}">
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg" :src="s.shareImg"
mode="aspectFill"></image>
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
</view>
</view>
@@ -230,23 +232,23 @@
<view class="indexboxitemlefttheretexttow">
¥{{item.discount}}
</view>
</view>
<view class="indexboxitemleftthere_countdown flex-between">
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}</text>
<view class="indexboxitemleftthere_countdowntexts">
<uni-countdown @timeup="updateCity" :show-day="false"
:day="item.end_times.d" :hour="item.end_times.h"
:minute="item.end_times.m" :second="item.end_times.s"
:indexs='index' color="#FFFFFF" border-color="#00B26A"
splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
<uni-countdown @timeup="updateCity" :show-day="false" :day="item.end_times.d"
:hour="item.end_times.h" :minute="item.end_times.m"
:second="item.end_times.s" :indexs='index' color="#FFFFFF"
border-color="#00B26A" splitorColor="#FFFFFF"
:font-size="7"></uni-countdown>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
@@ -264,8 +266,25 @@
团购价
</view>
<view class="classshowpopupitemtow">
指团购商品/服务的销售价格是用户最终决定是否购买商品/服务
的依据
{{listdata.purchaseNotice.groupPurInfo || '无'}}
</view>
<view class="classshowpopupitemone">
门市价/划线价
</view>
<view class="classshowpopupitemtow">
{{listdata.purchaseNotice.marketPriceInfo || '无'}}
</view>
<view class="classshowpopupitemone">
折扣
</view>
<view class="classshowpopupitemtow">
{{listdata.purchaseNotice.discountInfo || '无'}}
</view>
<view class="classshowpopupitemone">
平台温馨提示
</view>
<view class="classshowpopupitemtow">
{{listdata.purchaseNotice.platformTips || '无'}}
</view>
</view>
</view>
@@ -281,18 +300,18 @@
},
data() {
return {
titlename: '今日上新',
titlename: '详情',
opacity: false,
showpopup:false,
form: {
address: '', //地址
type: '', //品类
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
other: '', //附近1KM 1选中 0不选中
page: 1, //页数
size: 10, //页容量
status: 'loadmore'
showpopup: true,
indexform: {},
listdata: {
},
list1: [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
]
};
},
onPageScroll(e) {
@@ -302,6 +321,37 @@
this.opacity = true
}
},
onLoad(e) {
console.log(e)
this.indexform = e
this.onLoadInfo()
},
methods: {
//打电话
clickphone(e){
uni.makePhoneCall({
phoneNumber: e
});
},
// 通用门店
productgeneralstore(name){
uni.pro.navigateTo('product/generalstore',{
name
})
},
async onLoadInfo() { //详情接口
let res = await this.api.productproductInfo({
productId: this.indexform.id,
lng: uni.cache.get('getLocationstorage').lng,
lat: uni.cache.get('getLocationstorage').lat
})
try {
this.listdata = res.data
} catch (e) {
//TODO handle the exception
}
}
}
};
</script>
@@ -399,6 +449,7 @@
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
text-decoration: line-through;
}
}
@@ -433,6 +484,9 @@
background: #FFFFFF;
.towtowcontent_one {
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
padding-top: 32rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
@@ -491,6 +545,9 @@
margin-top: 32rpx;
.towtherecontent_o {
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
width: 364rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
@@ -642,15 +699,18 @@
color: #333333;
}
}
.bottomcontent{
.bottomcontent {
padding: 0 28rpx;
.bottomcontent_texttop{
.bottomcontent_texttop {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.bottomcontent_texttop::before{
.bottomcontent_texttop::before {
content: '';
display: inline-block;
width: 4rpx;
@@ -659,56 +719,58 @@
margin-right: 10rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
.bottomcontent_textright{
.bottomcontent_textright {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
.fivecontentes {
padding: 0 28rpx;
overflow: auto;
.fivecontent_item:nth-child(1) {
margin-top: 0;
}
.fivecontent_item {
margin-top: 32rpx;
padding: 24rpx 32rpx;
width: 100%;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
.fivecontent_item_nav {
image {
width: 60rpx;
height: 60rpx;
border-radius: 8rpx;
}
.fivecontent_item_nav_left {
flex: auto;
margin-left: 12rpx;
.fivecontent_item_nav_lefttop {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
.fivecontent_item_nav_lefttopstart {
margin-top: 8rpx;
.fivecontent_item_nav_leftlang {
margin-left: 12rpx;
width: max-content;
padding: 4rpx 10rpx;
background: #FFF9E1;
border-radius: 4rpx 4rpx 4rpx 4rpx;
.fivecontent_item_nav_leftlangtext {
margin-left: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -716,47 +778,47 @@
font-size: 16rpx;
color: #F9A511;
}
.fivecontent_item_nav_leftlangimage {
width: 10.82rpx;
height: 14.06rpx;
}
}
.fivecontent_item_nav_leftlang:nth-child(1) {
margin-left: 0;
}
}
}
}
.fivecontent_item_box {
margin-top: 20rpx;
border-top: 2rpx solid #E5E5E5;
padding-top: 14rpx;
.fivecontent_item_boxitem {
image {
width: 192rpx;
height: 192rpx;
border-radius: 12rpx;
}
.fivecontent_item_boxitemleft {
margin-left: 24rpx;
flex: auto;
.fivecontent_item_boxitemleftone {
width: 100%;
text {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
view {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
@@ -764,7 +826,7 @@
color: #333333;
}
}
.flexstartboxfttow {
.fivecontent_item_boxitemlefttow {
margin-left: 16rpx;
@@ -773,7 +835,7 @@
padding: 4rpx 10rpx;
background: #FFF9E1;
border-radius: 4rpx 4rpx 4rpx 4rpx;
.fivecontent_item_boxitemlefttowtext {
margin-left: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
@@ -781,21 +843,21 @@
font-size: 16rpx;
color: #F9A511;
}
.fivecontent_item_boxitemlefttowimage {
width: 10.82rpx;
height: 14.06rpx;
}
}
.fivecontent_item_boxitemlefttow:nth-child(1) {
margin-left: 0;
background: #FFD6D7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
}
.indexboxitemleftthere {
position: relative;
margin-top: 30rpx;
@@ -804,7 +866,7 @@
height: 88rpx;
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
background-size: 100% 100%;
.indexboxitemleftthereabsolute {
position: absolute;
top: 14rpx;
@@ -814,7 +876,7 @@
font-size: 24rpx;
color: #FFFFFF;
}
.indexboxitemlefttheretext {
.indexboxitemlefttheretextone {
text {
@@ -822,17 +884,17 @@
font-weight: normal;
color: #FF5053;
}
text:nth-child(2) {
font-weight: bold;
font-size: 34rpx;
}
text:nth-child(1) {
font-size: 24rpx;
}
}
.indexboxitemlefttheretexttow {
margin-left: 12rpx;
font-size: 20rpx;
@@ -842,18 +904,18 @@
text-decoration: line-through;
}
}
.indexboxitemleftthere_countdown {
width: 100%;
padding-right: 7rpx;
.indexboxitemleftthere_countdowntext {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.indexboxitemleftthere_countdowntexts {
font-family: Roboto, Roboto;
font-weight: 400;
@@ -869,15 +931,17 @@
}
}
}
}
.classshowpopup{
.classshowpopup {
position: relative;
width: 100%;
background: #FFFFFF;
border-radius: 40rpx 40rpx 0rpx 0rpx;
padding: 48rpx 28rpx 28rpx 28rpx;
.classshowpopuptop{
.classshowpopuptop {
text-align: center;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
@@ -885,20 +949,24 @@
color: #333333;
width: 100%;
}
.classshowpopupabsolute{
.classshowpopupabsolute {
position: absolute;
top: 55rpx;
right: 28rpx;
}
.classshowpopupitem{
.classshowpopupitem {
margin-top: 32rpx;
.classshowpopupitemone{
.classshowpopupitemone {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
.classshowpopupitemtow{
.classshowpopupitemtow {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;