chenkainan
/
yandu_WeChat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

美食

master
shaojing 1 year ago
parent
9abe2fa830
commit
0222cbdd24
4 changed files with 469 additions and 553 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      pages.json
  2. 678
      subPackages/food/foodDetail.vue
  3. 224
      subPackages/food/foodOrder.vue
  4. 22
      subPackages/food/taocanDetail.vue

24
pages.json
View File

@ -82,33 +82,41 @@
},
{
"path": "ticketBooking/ticketBooking",
"style" :
{
"style": {
"navigationBarTitleText": "门票预订",
"navigationStyle": "custom"
}
},
{
"path": "ticketBooking/detail",
"style" :
{
"style": {
"navigationBarTitleText": "景区详情"
}
},
{
"path": "ticketBooking/order",
"style" :
{
"style": {
"navigationBarTitleText": "门票预订"
}
},
{
"path": "hotelHomestay/hotelHomestay",
"style" :
{
"style": {
"navigationBarTitleText": "酒店民宿",
"navigationStyle": "custom"
}
},
{
"path": "food/taocanDetail",
"style": {
"navigationBarTitleText": "套餐详情"
}
},
{
"path": "food/foodOrder",
"style": {
"navigationBarTitleText": "订单填写"
}
}
]
}],

678
subPackages/food/foodDetail.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="bg" id="bg" v-if="info">
<view class="bg" v-if="info">
<view class="swipe-box">
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="3000" circular indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff">
<swiper-item v-if="info && info.videourl">
@ -12,6 +12,8 @@
@play="play"
@error="videoErrorCallback"
controls
width="100%"
heigth="100%"
></video>
</swiper-item>
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id">
@ -21,6 +23,65 @@
</swiper-item>
</swiper>
</view>
<view class="box">
<view class="top-box">
<view class="line-style">
<view class="title text-overflowRows">
{{info.title}}
</view>
<view class="collect">
<image :src="showImg('/uploads/20240827/8a55a8936b9324fa1c7b85c2da9c015b.png')" mode="" v-if="info.is_collect == 0" @click="collect"></image>
<image v-else :src="showImg('/uploads/20240827/6bf73216f19c756961496031f8aed053.png')" mode="" @click="collect"></image>
<view style="padding-top: 3rpx;">收藏</view>
</view>
</view>
<view class="top-info">
<view class="flex-between" style="margin-bottom: 22.33rpx;">
<view class="phone">
<image class="left-icon" :src="showImg('/uploads/20240827/2de3c2594f825f1be57f69323cad4279.png')" mode=""></image>
<text style="margin-right: 28rpx;">联系电话</text>
<text>{{info.tel}}</text>
</view>
<image class="right-icon" :src="showImg('/uploads/20240827/9d3a4a1b72e909c161e755f06402d132.png')" mode=""></image>
</view>
<view class="flex-between">
<view class="address">
<image class="left-icon" :src="showImg('/uploads/20240827/3d357e6e562de9395f373dc380a790a7.png')" mode=""></image>
<text style="margin-right: 28rpx;">商家地址</text>
<text class="text-overflow" style="width: 380rpx;">{{info.address}}</text>
</view>
<image class="right-icon" :src="showImg('/uploads/20240827/5b19517f2a630f3a766ea03ac621a3be.png')" mode=""></image>
</view>
</view>
</view>
<view class="box-title">美食下单</view>
<view class="item" v-for="item in sku" :key="item.goods_id">
<image class="img" :src="showImg(item.image)" mode=""></image>
<view class="content">
<view class="content-top flex-between">
<view class="center">
<view class="item-title text-overflowRows">
{{item.title}}
</view>
<image class="right" :src="showImg('/uploads/20240827/0e777c1006a15612a0d449178472fd13.png')" mode=""></image>
</view>
<view class="price">{{item.price/100}}</view>
</view>
<view class="content-bottom flex-between">
<view class="tags">
<view class="tag" v-for="tag in item.specifications_new_tag.split(',').slice(0,3)">
{{tag}}
<text class="shu">|</text>
</view>
</view>
<view class="order" @click="order(item)">购买</view>
</view>
</view>
</view>
<view class="box-title">商家简介</view>
<view class="text-box" v-html="formateRichText(info.price_content)"></view>
</view>
</view>
</template>
@ -32,27 +93,13 @@
id: null,
info: null,
sku: [],
productIndex: 0,
businessInfo: [],
isCollect: 0,
showLength: 0,
buyNum: 1,
reserve_content: null,
// 主要内容列表
navsList: [
{ name: "产品特色",id:'cpts' },
{ name: "费用说明",id:'fysm' },
{ name: "预订须知",id:'ydxz' },
{ name: "游客点评",id:'comment' }
],
navIndex:0, //导航栏选中下标
commentList: [],
commentNum: ''
};
},
onLoad(option) {
this.id = option.id;
this.getDetail();
this.getSpecificationsByGoodsId()
},
methods: {
getDetail() {
@ -77,7 +124,7 @@
// 收藏
collect() {
this.Post({
type: 3,
type: 16,
id: this.id
},
'/api/scenic/collect'
@ -94,9 +141,7 @@
});
},
order(item) {
let goods = this.sku[this.productIndex]
goods.buyNum = this.buyNum
uni.setStorageSync('order', JSON.stringify(goods)); //规格
uni.setStorageSync('order', JSON.stringify(item)); //规格
uni.setStorageSync('info', JSON.stringify(this.info)); //商品
uni.navigateTo({
url: '/subPackages/oneplus/oneplusOrder'
@ -113,25 +158,8 @@
.bg {
min-height: 100vh;
overflow-x: hidden;
background: #f2f4f7;
padding-bottom: 210rpx;
}
view {
box-sizing: border-box;
}
button {
margin: 0;
padding: 0;
outline: none;
border-radius: 0;
background-color: transparent;
line-height: inherit;
}
button::after {
border: none;
background: #F7F7F7;
padding-bottom: 50rpx;
}
.swipe-box {
@ -170,549 +198,183 @@
}
}
.price-box1 {
padding: 24rpx 30rpx;
.box {
padding: 0 26.67rpx;
margin-top: -26rpx;
position: relative;
}
.price-box {
z-index: 9;
position: relative;
margin-top: -20rpx;
width: 750rpx;
background: #ffffff;
.top-box {
width: 697rpx;
height: 267rpx;
background: #FFFFFF;
border-radius: 20rpx;
.price-zan {
padding: 22rpx 26.67rpx 39rpx 25rpx;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
.price {
display: flex;
.present-price {
font-size: 42rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(248, 74, 86, 1);
&:before {
content: '¥';
display: inline-block;
font-size: 26rpx;
}
&:after {
content: '起';
display: inline-block;
font-size: 24rpx;
font-family: PingFangSC;
font-weight: 400;
color: #8D8D8D;
}
}
}
}
.tag {
margin-bottom: 40.67rpx;
margin-top: 20rpx;
display: flex;
align-items: center;
.tag-item {
background: rgba(254, 180, 25, .14);
border-radius: 18rpx;
margin-right: 18rpx;
font-size: 24rpx;
.title {
width: 550rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FEB419;
padding: 0 16rpx;
}
}
.title {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
font-size: 31rpx;
color: #000000;
margin-top: 20rpx;
margin: 3rpx 0 0 2rpx;
}
}
.notice {
padding: 40rpx 30rpx;
width: 710rpx;
background: #ffffff;
border-radius: 16rpx;
margin: 0 auto;
margin-top: 20rpx;
.notice-title {
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-bottom: 40rpx;
}
.collect image {
width: 48rpx;
height: 48rpx;
}
.tab {
width: 750rpx;
height: 88rpx;
background: #ffffff;
box-shadow: 0px 1rpx 0px 0px rgba(227, 229, 232, 1);
.line-style {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
position: fixed;
top: 0;
.tab-item {
height: 88rpx;
position: relative;
line-height: 88rpx;
.tab-text {
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #393b3e;
}
.act-text {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFang;
font-weight: 500;
font-size: 23rpx;
color: #000000;
}
.tab-line {
width: 60rpx;
height: 6rpx;
background: #08c59b;
border-radius: 3rpx;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-30rpx, 0);
}
}
}
.more {
width: 100%;
height: 93rpx;
line-height: 93rpx;
text-align: center;
border-top: solid 1rpx rgba(227, 229, 232, 1);
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4D526C;
margin-top: 50rpx;
}
.xzPopup {
width: 750rpx;
padding: 33rpx 26rpx 20rpx;
box-sizing: border-box;
background-color: #FFFFFF;
position: relative;
max-height: 70vh;
overflow-y: auto;
view {
padding: 0 20rpx;
box-sizing: border-box;
margin-top: 35rpx;
}
img {
width: 32rpx;
height: 32rpx;
position: absolute;
top: 33rpx;
right: 27rpx;
}
}
.comment {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: bold;
color: #6B0500;
margin-top: 28rpx;
}
.btn-list {
position: fixed;
bottom: 0;
width: 750rpx;
height: 180rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
display: flex;
justify-content: space-between;
padding: 30rpx 50rpx 0 50rpx;
.left-box {
display: flex;
align-items: flex-start;
.img-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 64rpx;
image {
width: 48rpx;
height: 48rpx;
}
.text {
font-size: 24rpx;
font-family: PingFangSC;
font-weight: 400;
color: #666666;
}
}
}
.btn-buy {
width: 254rpx;
height: 78rpx;
background: linear-gradient(90deg, #F84A56, #FF9834);
border-radius: 40rpx;
text-align: center;
line-height: 78rpx;
font-size: 32rpx;
font-family: PingFangSC;
.top-info {
font-family: PingFang;
font-weight: 500;
color: #FFFFFF;
}
}
.popup-content {
background-color: white;
padding: 0rpx 39rpx 51rpx 39rpx;
height: auto;
border-radius: 20rpx 20rpx 0 0 ;
}
.bottom-productImg {
display: flex;
margin-bottom: 23rpx;
}
.bottom-productImg img {
width: 218rpx;
height: 179rpx;
background: #666666;
border-radius: 13rpx;
}
.right-content {
margin: 10rpx 0 0 41rpx;
}
.bottom-productPrice {
font-size: 40rpx;
color: #FC524B;
&:before{
content: "￥";
font-size: 26rpx;
}
}
.bottom-content {
width: 331rpx;
font-size: 27rpx;
font-family: PingFang SC;
font-weight: 400;
color: #666666;
}
.botProduct {
width: 320rpx;
// height: 78rpx;
border-radius: 13rpx;
background-color: #F5F5F5;
font-size: 29rpx;
font-family: PingFang SC;
font-weight: 400;
color: #333333;
line-height: 78rpx;
text-align: center;
margin-bottom: 25rpx;
display: inline-block;
color: #000000;
}
.botProduct:nth-child(even) {
margin-right: 30rpx;
.left-icon {
width: 26.67rpx;
height: 26.67rpx;
margin-right: 8.67rpx;
}
.botProducts {
// border: 1rpx solid #00AAFF;
background-color:rgba(254, 180, 25, 1);
color: rgba(0, 0, 0, 1);
.right-icon {
width: 30.67rpx;
height: 30.67rpx;
}
.buy-num {
font-size: 29rpx;
font-family: PingFang SC;
font-weight: 400;
color: #333333;
// border-top: 1rpx solid #CCCCCC;
padding: 39rpx 0;
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
}
.buy-num .number-btn {
display: flex;
}
.buy-num .number-btn view {
.phone, .address {
display: flex;
justify-content: center;
align-items: center;
width: 69rpx;
height: 69rpx;
border: 1rpx solid #CCCCCC;
border-radius: 7rpx;
}
.buy-num .number-btn>view text {
font-size: 46rpx;
.box-title {
margin: 52rpx 0 26rpx 12rpx;
font-family: PingFang;
font-weight: bold;
font-size: 37rpx;
color: #000000;
}
.buy-btn {
width: 670rpx;
height: 78rpx;
text-align: center;
line-height: 78rpx;
background: linear-gradient(90deg, #F84A56, #FF9834);
border-radius: 40rpx;
font-size: 34rpx;
font-family: PingFangSC;
font-weight: 500;
color: #FFFFFF;
}
.btn-box{
width: 750rpx;
height: 151rpx;
.item {
margin-bottom: 33.33rpx;
width: 697rpx;
height: 167rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6,0,1,0.1);
border-radius: 13rpx;
padding: 6.67rpx 24rpx 6.67rpx 6.67rpx;
display: flex;
align-items: center;
justify-content: center;
}
.sp{
width: 100%;
height: 30rpx;
font-size: 32rpx;
font-family: PingFangSC;
font-weight: 400;
color: #060001;
line-height: 30rpx;
border-top: solid 2rpx #ccc;
margin: 60rpx 0;
padding-top: 30rpx;
}
.guige {
padding: 42rpx 0;
border-top: 1rpx solid #D8D8D8;
.img {
width: 161rpx;
height: 153rpx;
background: #87CD93;
border-radius: 10rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.select-box {
// width: 100%;
height: 113rpx;
border-top: 1rpx solid #D8D8D8;
padding-left: 38rpx;
padding-right: 32rpx;
font-size: 31rpx;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
.content {
width: 580rpx;
padding: 20.67rpx 0 19.33rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.left {
display: flex;
}
.specifications {
margin-left: 27.33rpx;
font-size: 31rpx;
font-family: PingFang SC;
font-weight: 500;
color: #888888;
white-space: nowrap;
width: 500rpx;
overflow: hidden;
}
.content-top {
.right {
width: 15.33rpx;
height: 27.33rpx;
}
.text-box {
width: 710rpx;
margin: 22rpx 20rpx;
background: #FFFFFF;
position: relative;
border-radius: 13rpx;
}
.tab-box {
display: flex;
justify-content: space-around;
align-items: center;
font-size: 29rpx;
font-family: PingFangSC;
font-weight: 400;
color: #333333;
height: 85.33rpx;
line-height: 85.33rpx;
}
.seld-nav {
font-size: 33rpx;
font-family: PingFangSC;
.item-title {
margin-right: 13.33rpx;
font-family: PingFang;
font-weight: bold;
font-size: 31rpx;
color: #000000;
// border-bottom: 5rpx solid #FEB419;
max-width: 286rpx;
}
.line {
width: 47rpx;
height: 5rpx;
background: #FEB419;
border-radius: 3rpx;
margin-top: -10rpx;
.right {
width: 12rpx;
height: 20rpx;
}
.comment-box{
width: 710rpx;
height: auto;
background: #FFFFFF;
border-radius: 13rpx;
margin: 24rpx auto 0;
padding: 0 20rpx;
.comment-title{
border-bottom: 1rpx solid #D9D9D9;
height: 95rpx;
.center {
display: flex;
align-items: center;
font-size: 35rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
.comment-icon{
width: 32rpx;
height: 32rpx;
margin-right: 14rpx;
}
.comment-rate{
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
color: #D62828;
margin-left: 10rpx;
}
.comment-num{
font-size: 27rpx;
font-family: PingFang SC;
font-weight: 400;
color: #999999;
}
.tags {
font-family: PingFang;
font-weight: 500;
font-size: 23rpx;
color: #666666;
display: flex;
}
.comment-item{
padding: 37rpx 0;
border-bottom: 1rpx solid #CCCCCC;
.comment-avatar{
width: 57rpx;
height: 57rpx;
border-radius: 50%;
margin-right: 15rpx;
.order {
width: 133rpx;
height: 53rpx;
background: linear-gradient(90deg, #F4A61F ,#FD6F34);
border-radius: 27rpx;
font-family: PingFang;
font-weight: bold;
font-size: 31rpx;
color: #FFFFFF;
text-align: center;
line-height: 53rpx;
}
.comment-name{
font-size: 21rpx;
font-family: PingFang SC;
font-weight: 400;
color: #666666;
.price {
width: 133rpx;
text-align: center;
font-family: PingFang;
font-weight: bold;
font-size: 36rpx;
color: #EE3E3B;
}
.comment-time {
font-family: PingFangSC;
font-weight: 400;
.price::before {
content: "￥";
font-size: 24rpx;
color: #999999;
}
.comment-content{
margin-top: 30rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
.text-box {
width: 697rpx;
min-height: 953rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 36.67rpx 52.67rpx 26rpx 30rpx;
}
.comment-imgs{
margin-top: 34rpx;
overflow-x: auto;
white-space: nowrap;
.comment-img{
width: 147rpx;
height: 147rpx;
border-radius: 13rpx;
margin-right: 15rpx;
}
.shu {
margin: 0 4rpx;
}
.comment-imgs::-webkit-scrollbar {
.tag:last-child .shu {
display: none;
}
}
.empty-box {
text-align: center;
padding: 98rpx 0;
font-size: 28rpx;
color: #999999;
}
.content-more{
height: 98rpx;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 27rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
}
</style>

224
subPackages/food/foodOrder.vue
View File

@ -0,0 +1,224 @@
<template>
<view class="bg">
<view class="box">
<view class="info">
<image class="img" src="" mode=""></image>
<view class="main">
<view class="title text-overflowRows">
名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称
</view>
<view class="main-bottom">
<view class="price">
9.9
</view>
<view class="num-box">
<view class="del">-</view>
<view class="num">1</view>
<view class="add">+</view>
</view>
</view>
</view>
</view>
<view class="msg-box">
<view class="left-text">
优惠券
</view>
<view class="coupon" v-if="!coupon">
暂无可用优惠券
<image class="rightIcon" :src="showImg('/uploads/20240827/96dee582e7ce3b8293e659bb1dc87433.png')" mode=""></image>
</view>
</view>
<view class="name-box">
<view class="left-text">
联系人：
</view>
<input type="text" placeholder="输入您的名字" />
</view>
<view class="phone-box">
<view class="" style="display: flex;">
<view class="left-text">
手机号：
</view>
<input type="number" />
</view>
<image class="cha" :src="showImg('/uploads/20240827/5e5970926e92a2109da55bfe32a47e4b.png')" mode=""></image>
</view>
</view>
<view class="bottom">
</view>
</view>
</template>
<script>
export default {
data() {
return {
coupon:null,
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.bg {
background: #F7F7F7;
min-height: 100vh;
padding: 26rpx 25.33rpx 168rpx;
}
.box {
width: 699rpx;
// height: 553rpx;
background: #FFFFFF;
border-radius: 13rpx;
padding: 28rpx 21.33rpx 0;
}
.bottom {
height: 148rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
padding: 20.67rpx 26.67rpx 40.67rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.img {
width: 167rpx;
height: 160rpx;
background: #666666;
border-radius: 7rpx;
margin-right: 29.33rpx;
flex-shrink: 0;
}
.info {
display: flex;
margin-bottom: 22rpx;
}
.main {
padding-top: 8.67rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.title {
width: 429rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 33rpx;
color: #333333;
}
.main-bottom {
display: flex;
justify-content: space-between;
}
.num-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
font-family: PingFang SC;
font-weight: 400;
font-size: 33rpx;
color: #000000;
}
.price::before {
content: "￥";
font-size: 24rpx;
}
.del {
width: 47rpx;
height: 47rpx;
background: #E8E8E8;
border-radius: 50%;
font-family: PingFang SC;
font-weight: 400;
font-size: 34rpx;
color: #999999;
text-align: center;
line-height: 47rpx;
}
.add {
width: 47rpx;
height: 47rpx;
background: #71B580;
border-radius: 50%;
font-family: PingFang SC;
font-weight: 400;
font-size: 34rpx;
color: #FFFFFF;
text-align: center;
line-height: 47rpx;
}
.num {
margin: 0 29rpx;
}
.msg-box {
padding: 42rpx 0;
border-bottom: 1rpx solid #CCC;
display: flex;
justify-content: space-between;
}
.name-box {
padding: 42rpx 0;
display: flex;
border-bottom: 1rpx solid #CCC;
}
.phone-box {
padding: 42rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.rightIcon {
width: 10.67rpx;
height: 20rpx;
margin-left: 19.33rpx;
}
.left-text {
font-family: PingFang SC;
font-weight: 500;
font-size: 31rpx;
color: #000000;
}
.coupon {
font-family: PingFang SC;
font-weight: 400;
font-size: 27rpx;
color: #999999;
}
.cha {
width: 26rpx;
height: 25.33rpx;
}
input {
margin-left: 20rpx;
}
</style>

22
subPackages/food/taocanDetail.vue
View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
Write Preview
Loading…
Cancel
Save