czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
魏啾
2024-04-30 18:27:43 +08:00
parent 25acfbeb91
commit 3b85017f91
24 changed files with 2846 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

910
pages/product/index.vue Normal file
View File

@@ -0,0 +1,910 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat :opacity='opacity' :title='titlename' :titleshow='false'></navseat>
<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>
</view>
<view class="towcontent">
<view class="onetowcontent flex-between">
<view class="onetowcontent_one flex-start">
<view class="onetowcontent_oneo">
到手￥
</view>
<view class="onetowcontent_onet">
12.00
</view>
<view class="onetowcontent_oneth">
8折
</view>
<view class="onetowcontent_onefour">
￥15.00
</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>
</view>
<view class="after"></view>
</view>
<view class="towtowcontent">
<view class="towtowcontent_one">
书亦烧仙草|青提烧仙草
</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>
</view>
</view>
<view class="therecontent">
<view class="onetherecontent flex-between">
<view class="onetherecontent_o">
通用门店
</view>
<view class="onetherecontent_t flex-start">
<view class="">
15家店可用
</view>
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
</view>
</view>
<view class="towtherecontent flex-between">
<view class="towtherecontent_o">
书亦烧仙草（西安龙首门店）
</view>
<u-icon name="phone-fill" color="#333333" size="50"></u-icon>
</view>
<view class="theretherecontent">
营业时间：周一至周日 10:00-21:00
</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
</view>
<view class="fourtherecontent_t">
龙首印象城向西20米
</view>
</view>
</view>
<view class="fourcontent">
<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>
<view class="fourcontent_th_tow flex-start">
<view class="fourcontent_th_towo">
（1份）
</view>
<view class="fourcontent_th_towt">
￥12.00
</view>
</view>
</view>
</view>
<view class="fivecontent">
<view class="fivecontentone">
购买须知
</view>
<view class="fivecontenitem">
<view class="fivecontenitemone">
使用日期
</view>
<view class="fivecontenitemtow">
购买15天内有效
</view>
</view>
<view class="fivecontenitem">
<view class="fivecontenitemone">
可用时间
</view>
<view class="fivecontenitemtow">
全天可用
</view>
</view>
<view class="fivecontenitem">
<view class="fivecontenitemone">
预约方式
</view>
<view class="fivecontenitemtow">
无需预约，高峰期需等位
</view>
</view>
<view class="fivecontenitem">
<view class="fivecontenitemone">
退款说明
</view>
<view class="fivecontenitemtow">
此为限时限量特惠产品，请在规定期限内使用，使用期限
内可申请全额退款，逾期未使用自动全额退款。
</view>
</view>
<view class="fivecontenitem">
<view class="fivecontenitemone">
使用规则
</view>
<view class="fivecontenitemtow">
不可使用包间
本单发票由商家提供，详情请咨询商家
堂食外带均可
1.购买：本券购买后，无需复制券码，进入书亦烧仙草小APP/
程序【我的-兑换卡券】点击【获取美团券】即可。
2.使用：请登录书亦烧仙草APP/小程序,选择对应商品，结算时
券会自动抵扣。
3.限1件商品使用，不可抵扣配送费、奶油等附加费用，如遇门
店原料不足无法供应时，或售罄，您可视情况更换核销门店或
退款处理。
4.适用范围：部分门店不可用，最终已下单时系统结算为准。
5.售后服务：如有疑问请致电400-888-1717。
团购用户可享受店内其他所有优惠
使用优惠券购买团单，有效期以优惠券规则为准
每人每天最多购买2张美团券
无需预约，消费高峰期可能需要等位
</view>
</view>
</view>
<view class="sixcontent flex-start" @click="showpopup = true">
<view>
价格说明
</view>
<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
</view>
</view>
<view class="bottomcontent flex-between">
<view class="bottomcontent_texttop flex-start">
附近推荐
</view>
<view class="bottomcontent_textright flex-start">
去首页
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
</view>
</view>
<view class="fivecontentes">
<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index">
<view class="fivecontent_item_nav flex-start">
<image :src="item.shopImage" mode="aspectFill"></image>
<view class="fivecontent_item_nav_left">
<view class="fivecontent_item_nav_lefttop flex-between">
<view>
{{item.shopName}}
</view>
<view>
龙首.{{item.distances}}m
</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>
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
</view>
</view>
</view>
</view>
<view class="fivecontent_item_box">
<view class="fivecontent_item_boxitem flex-between">
<image :src="item.image" mode=""></image>
<view class="fivecontent_item_boxitemleft flex-colum-start">
<view class="fivecontent_item_boxitemleftone flex-between">
<view>{{item.productName}}</view>
<text>已抢{{item.realSalesNumber}}份</text>
</view>
<view class="flex-start flexstartboxfttow">
<view class="fivecontent_item_boxitemlefttow flex-start"
v-for="(c,index2) in item.proTag" :key="index2"
:style="{'background':c.backColor,'color':c.backColor}">
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
:src="c.shareImg" mode="aspectFill"></image>
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
</view>
</view>
<view class="indexboxitemleftthere flex-colum-start">
<view class="indexboxitemleftthereabsolute">
马上抢
</view>
<view class="indexboxitemlefttheretext flex-start">
<view class="indexboxitemlefttheretextone">
<text>¥</text>
<text>{{item.salePrice}}</text>
</view>
<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>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<u-popup :show="showpopup" :round="40" @close="showpopup = false">
<view class="classshowpopup">
<view class="classshowpopuptop">
价格说明
</view>
<view class="classshowpopupabsolute">
<u-icon name="close" color="#333333" size="28"></u-icon>
</view>
<view class="classshowpopupitem">
<view class="classshowpopupitemone">
团购价
</view>
<view class="classshowpopupitemtow">
指团购商品/服务的销售价格，是用户最终决定是否购买商品/服务
的依据。
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import navseat from '@/components/navseat.vue'
export default {
components: {
navseat
},
data() {
return {
titlename: '今日上新',
opacity: false,
showpopup:false,
form: {
address: '', //地址
type: '', //品类
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
other: '', //附近1KM 1选中 0不选中
page: 1, //页数
size: 10, //页容量
status: 'loadmore'
},
};
},
onPageScroll(e) {
if (e.scrollTop <= 44) { //搜索导航栏
this.opacity = false
} else {
this.opacity = true
}
},
};
</script>
<style scoped lang="scss">
page {
background: #F9F9F9;
}
.content {
.onecontent {
width: 100%;
height: 490rpx;
position: relative;
z-index: 9;
.after {
position: absolute;
bottom: 40rpx;
right: 0;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
z-index: 8;
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
}
.onecontentimage {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 2;
}
}
.towcontent {
position: relative;
margin-top: -40rpx;
width: 100%;
z-index: 10;
background: #F9F9F9;
padding: 32rpx 28rpx;
border-radius: 40rpx 0 0rpx 0rpx;
.onetowcontent {
position: relative;
width: 100%;
padding: 24rpx 24rpx 48rpx 24rpx;
background: linear-gradient(87deg, #FE6560 0%, #FD5976 100%);
border-radius: 24rpx 24rpx 0 0;
.after {
position: absolute;
bottom: 24rpx;
right: 0;
width: 24rpx;
height: 24rpx;
line-height: 24rpx;
text-align: center;
z-index: 8;
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 24rpx, #fff 24rpx);
}
.onetowcontent_one {
.onetowcontent_oneo {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 32rpx;
color: #FFFFFF;
}
.onetowcontent_onet {
margin-left: 4rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
}
.onetowcontent_oneth {
margin-left: 4rpx;
padding: 2rpx 16rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #FFFFFF;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 20rpx;
color: #FFFFFF;
}
.onetowcontent_onefour {
margin-left: 4rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
}
}
.onetowcontent_tow {
image {
width: 10.82rpx;
height: 14.06rpx;
}
text {
margin-left: 5rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
}
background: rgba(129, 79, 39, 0.14);
border-radius: 24rpx 24rpx 24rpx 24rpx;
padding: 4rpx 18rpx;
}
}
.towtowcontent {
position: relative;
padding: 0 24rpx;
z-index: 11;
width: 100%;
margin-top: -24rpx;
border-radius: 24rpx 0 24rpx 24rpx;
background: #FFFFFF;
.towtowcontent_one {
padding-top: 32rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 32rpx;
color: #333333;
padding-bottom: 24rpx;
border-bottom: 2rpx solid #E5E5E5;
}
.towtowcontent_tow {
padding: 24rpx 0;
.flex-center {
margin-left: 16rpx;
.towtowcontent_towimage {
width: 24rpx;
height: 24rpx;
}
.towtowcontent_towtext {
margin-left: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
}
}
.therecontent {
width: 100%;
padding: 32rpx 24rpx;
background: #FFFFFF;
margin-top: 32rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
.onetherecontent {
.onetherecontent_o {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.onetherecontent_t {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
.towtherecontent {
margin-top: 32rpx;
.towtherecontent_o {
width: 364rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
.theretherecontent {
padding: 16rpx 0 24rpx 0;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
border-bottom: 2rpx solid #E5E5E5;
}
.fourtherecontent {
padding-top: 24rpx;
.fourtherecontentimage {
width: 24rpx;
height: 24rpx;
}
.fourtherecontent_o {
margin-left: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.fourtherecontent_t {
margin-left: 12rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
}
.fourcontent {
margin-top: 32rpx;
padding: 32rpx 24rpx;
width: 100%;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
.fourcontent_o {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.fourcontent_t {
margin-top: 32rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
.fourcontent_th {
margin-top: 32rpx;
.fourcontent_th_one {
view:nth-child(1) {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
view:nth-child(2) {
margin-left: 8rpx;
padding: 4rpx 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF5053;
background: #FFD6D7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
}
}
.fourcontent_th_tow {
.fourcontent_th_towo {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 32rpx;
color: #999999;
}
.fourcontent_th_towt {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
}
}
.fivecontent {
margin-top: 32rpx;
padding: 32rpx 24rpx;
width: 100%;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
.fivecontentone {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
.fivecontenitem {
margin-top: 32rpx;
.fivecontenitemone {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
.fivecontenitemtow {
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
}
}
.sixcontent {
padding: 0rpx 24rpx 32rpx 24rpx;
width: 100%;
background: #FFFFFF;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
}
.bottomcontent{
padding: 0 28rpx;
.bottomcontent_texttop{
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.bottomcontent_texttop::before{
content: '';
display: inline-block;
width: 4rpx;
height: 22rpx;
background: #333333;
margin-right: 10rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
.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;
font-weight: 400;
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;
font-size: 28rpx;
color: #333333;
}
}
.flexstartboxfttow {
.fivecontent_item_boxitemlefttow {
margin-left: 16rpx;
margin-top: 8rpx;
width: max-content;
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;
font-weight: 400;
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;
padding-left: 16rpx;
width: 100%;
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;
right: 12rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 24rpx;
color: #FFFFFF;
}
.indexboxitemlefttheretext {
.indexboxitemlefttheretextone {
text {
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
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;
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
font-weight: normal;
color: #999999;
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;
color: #333333;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 16rpx;
color: #FFFFFF;
}
}
}
}
}
}
}
}
.classshowpopup{
position: relative;
width: 100%;
background: #FFFFFF;
border-radius: 40rpx 40rpx 0rpx 0rpx;
padding: 48rpx 28rpx 28rpx 28rpx;
.classshowpopuptop{
text-align: center;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 36rpx;
color: #333333;
width: 100%;
}
.classshowpopupabsolute{
position: absolute;
top: 55rpx;
right: 28rpx;
}
.classshowpopupitem{
margin-top: 32rpx;
.classshowpopupitemone{
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
.classshowpopupitemtow{
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
}
}
}
</style>