You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
550 lines
14 KiB
550 lines
14 KiB
<template> |
|
<view class="content"> |
|
<view class="content-left" :style="{backgroundImage:`url(${bgLeft})`}"> |
|
<view class="content-left content-left-black"> |
|
<view class="interval-view-one"></view> |
|
<text class="content-left-discounts"> |
|
充值 |
|
<text class="content-push-money">777</text> |
|
，立享全场 |
|
<text class="content-push-money">7</text> |
|
折 |
|
</text> |
|
<view class="interval-view-two"></view> |
|
<text class="content-left-discounts"> |
|
账户余额 |
|
<text class="content-push-money">1010.10</text> |
|
元尊享 |
|
</text> |
|
<view class="interval-view-two"></view> |
|
<text class="content-left-discounts"> |
|
会议区/茶室 |
|
</text> |
|
<view class="interval-view-three content-left-discounts-1"> |
|
<text class="content-left-discounts-2"> |
|
{{ wxtitle }} |
|
</text> |
|
</view> |
|
<view class="wx-code-view"> |
|
<image class="wx-code" :src="wxcode"></image> |
|
<view class="qrimg"> |
|
<tki-qrcode v-if="ifShow" |
|
ref="qrcode" |
|
:val="val" |
|
:size="size" |
|
:unit="unit" |
|
:onval="onval" |
|
:loadMake="loadMake" |
|
:usingComponents="true" |
|
@result="qrR" /> |
|
</view> |
|
<text class="code-remark">{{ wxtitle }}</text> |
|
</view> |
|
<view class="interval-view-four"></view> |
|
<text class="content-left-discounts content-left-discounts-botton"> |
|
添加回复 |
|
<text class="content-push-money">【 进群 】</text> |
|
即可加入 |
|
</text> |
|
<view class="interval-view-two"></view> |
|
<text class="content-left-discounts content-left-discounts-botton"> |
|
桃子湖畔高颜值的面对面群 |
|
</text> |
|
</view> |
|
</view> |
|
<view class="content-right" :style="{backgroundImage:`url(${bgRight})`}"> |
|
<view class="content-right content-right-black"> |
|
<view class="tea-view"> |
|
<view class="tea-title-view"> |
|
<image class="tea-image" src="../../static/images/cha.png"></image> |
|
<text class="tea-title">茶（Tea）</text> |
|
</view> |
|
<view class="tea-list" v-for="(tea,index) in teaList" :key="index"> |
|
<text class="tea-name"> |
|
<text class="tea-name-font" :class="tea.animation" :style="'animation-delay: ' + 0.16*indexName + 's;'" v-for="(name,indexName) in tea.name" :key="indexName"> |
|
{{ name }} |
|
</text> |
|
</text> |
|
<text class="tea-name tea-name-en"> |
|
<text class="tea-name-font" :class="tea.animation" :style="'animation-delay: ' + (0.16*(tea.name.length + indexName)) + 's;'" v-for="(nameEn,indexName) in tea.nameEn" :key="indexName"> |
|
{{ nameEn }} |
|
</text> |
|
</text> |
|
<text class="tea-money"> |
|
<text class="tea-name-font" :class="tea.animation" :style="'animation-delay: ' + (0.16*(tea.name.length + tea.nameEn.length + indexName)) + 's;'" v-for="(Imoney,indexName) in tea.money" :key="indexName"> |
|
{{ Imoney }} |
|
</text> |
|
</text> |
|
<image src="../../static/images/new.svg" class="commodity-new" v-if="tea.showNew"></image> |
|
<image src="../../static/images/dztj.svg" class="commodity-dztj" v-if="tea.showNew === '' ? false : !tea.showNew"></image> |
|
</view> |
|
</view> |
|
<view class="coffee-view"> |
|
<view class="tea-title-view"> |
|
<text class="tea-title coffee-title" @click="testAlertAn">咖啡（coffee）</text> |
|
<image class="tea-image coffee-image" src="../../static/images/kafei.png"></image> |
|
</view> |
|
<view class="tea-list" v-for="(coffee,index) in coffeeList" :key="index"> |
|
<text class="tea-name coffee-name"> |
|
<text class="tea-name-font" :class="coffee.animation" :style="'animation-delay: ' + 0.16*indexName + 's;'" v-for="(name,indexName) in coffee.name" :key="indexName"> |
|
{{ name }} |
|
</text> |
|
</text> |
|
<text class="tea-name tea-name-en coffee-name-en"> |
|
<text class="tea-name-font" :class="coffee.animation" :style="'animation-delay: ' + (0.16*(coffee.name.length + indexName)) + 's;'" v-for="(nameEn,indexName) in coffee.nameEn" :key="indexName"> |
|
{{ nameEn }} |
|
</text> |
|
</text> |
|
<text class="tea-money coffee-money"> |
|
<text class="tea-name-font" :class="coffee.animation" :style="'animation-delay: ' + (0.16*(coffee.name.length + coffee.nameEn.length + indexName)) + 's;'" v-for="(Imoney,indexName) in coffee.money" :key="indexName"> |
|
{{ Imoney }} |
|
</text> |
|
</text> |
|
</view> |
|
<!-- <view class="hot-view"> |
|
<text class="hot-title">热门推荐</text> |
|
<view class="hot-list-view"> |
|
<view class="hot-list" v-for="(hot,index) in hotList" :key="index"> |
|
<text class="hot-name">{{ hot.name }}</text> |
|
<text class="hot-nameEn">{{ hot.nameEn }}</text> |
|
<text class="hot-money">￥{{ hot.money }}</text> |
|
</view> |
|
</view> |
|
</view> --> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import bgLeft from '@/static/images/yuansuleft.jpg' |
|
import bgRight from '@/static/images/yuansuright.png' |
|
import tkiQrcode from 'tki-qrcode/components/tki-qrcode/tki-qrcode.vue' |
|
import webSocket from '@/utils/weSocket1.js' |
|
import * as api from '@/api/index/index.js' |
|
|
|
// document.title = '商品菜单' |
|
|
|
export default { |
|
components:{tkiQrcode}, |
|
data() { |
|
return { |
|
storeId:'100001', |
|
menuHtml:'', |
|
bgLeft: bgLeft, |
|
bgRight: bgRight, |
|
ifShow: true, |
|
val: 'https://u.wechat.com/MGCFEPwjKx0ZXPaED6LSwB4', // 要生成的二维码值 |
|
// val: 'http://kd.biutag.com/ukeer/59c7808b-c098-41ca-abe0-e2035ce39f78&oMt0N5KE4QbBPvovuJt6OrIk_wuI', |
|
size: 100, // 二维码大小 |
|
unit: 'upx', // 单位 |
|
onval: true, // val值变化时自动重新生成二维码 |
|
loadMake: true, // 组件加载完成后自动生成二维码 |
|
src: '', // 二维码生成后的图片地址或base64 |
|
code: '', |
|
wxcode: '', |
|
wxtitle: '扫码付款', |
|
teaList: [ |
|
{name: '正山小种（红茶）',nameEn: 'Black tea', money: '￥20.00', showNew: '', animation: ''}, |
|
{name: '南迫冰岛普洱（生茶）',nameEn: 'Puer tea', money: '￥29.99', showNew: true, animation: ''}, |
|
{name: '大红袍',nameEn: 'Wuyi oolong tea', money: '￥29.99', showNew: true, animation: ''}, |
|
{name: '雨前龙井（绿茶）',nameEn: 'Green tea', money: '￥25.99', showNew: '', animation: ''}, |
|
{name: '冻顶（乌龙茶）',nameEn: 'Dongding oolong tea', money: '￥25.99', showNew: '', animation: ''}, |
|
{name: '茉莉花茶',nameEn: 'Jasmine tea', money: '￥25.99', showNew: true, animation: ''}, |
|
{name: '荔枝红茶',nameEn: 'Lychee', money: '25.99', showNew: '', animation: ''}, |
|
{name: '玫瑰花红茶/冷萃',nameEn: 'Rose black tea', money: '￥25.99/19.99', showNew: false, animation: ''}, |
|
{name: '蜜桃乌龙茶/冷萃',nameEn: 'Peach oolong tea', money: '￥25.99/19.99', showNew: '', animation: ''}, |
|
{name: '桂花乌龙茶',nameEn: 'Osmanthus oolong tea', money: '￥25.99', showNew: '', animation: ''}, |
|
{name: '苹果乌龙茶',nameEn: 'Apple oolong tea', money: '￥29.99', showNew: '', animation: ''}, |
|
{name: '鲜牛奶',nameEn: 'Fresh Milk', money: '￥15.99', showNew: '', animation: ''}, |
|
{name: '巴旦木/混合坚果',nameEn: 'Almond/Mixed nuts', money: '￥25.99', showNew: '', animation: ''} |
|
], |
|
coffeeList: [ |
|
{name: '猿子弹咖啡(冰/热)',nameEn: 'Apesos coffee(lced/Hot)', money: '￥25.99', animation: ''}, |
|
{name: '热防弹咖啡',nameEn: 'Hot bulletproof coffee', money: '￥25.99', animation: ''}, |
|
{name: '爱尔兰冰猿',nameEn: 'lrish coffee', money: '￥49.99', animation: ''}, |
|
{name: '美式（冰/热）',nameEn: 'A mericano(lced/Hot)', money: '￥19.99', animation: ''}, |
|
{name: '卡布奇诺（热）',nameEn: 'Cappucino(Hot)', money: '￥29.99', animation: ''}, |
|
{name: '澳白（热）',nameEn: 'Flat white(Hot)', money: '￥29.99', animation: ''}, |
|
{name: '浓缩Espresso',nameEn: '', money: '', animation: ''}, |
|
{name: '（Double）(Single)',nameEn: '', money: '￥15.99/19.99', animation: ''}, |
|
{name: '手冲咖啡',nameEn: 'Pour-over coffee', money: '￥39.99', animation: ''}, |
|
{name: '拿铁（冰/热）',nameEn: 'Latte(Lced/Hot)', money: '￥29.99', animation: ''}, |
|
], |
|
hotList: [ |
|
{name: '正山小种（红茶）',nameEn: 'Black tea', money: '20.00'}, |
|
{name: '猿子弹咖啡(冰/热)',nameEn: 'Apesos coffee(lced/Hot)', money: '25.99'}, |
|
{name: '澳白（热）',nameEn: 'Flat white(Hot)', money: '29.99'}, |
|
] |
|
} |
|
}, |
|
mounted(){ |
|
this.getWxCode() |
|
}, |
|
onLoad() { |
|
//修改时请将以下代码打开注释获取店铺id |
|
// this.storeId=uni.getStorageSync("selectedStore"); |
|
//发送请求获取菜单 |
|
// this.loadMenu(); |
|
this.getWxCode() |
|
webSocket.getWebSocket(this); |
|
// this.getWxCode('https://kd.biutag.com:9903/user/weChat_or_ali/' + uni.getStorageSync('openId')); |
|
}, |
|
onShow() { |
|
// uni.setStorageSync("wxObj", this) |
|
}, |
|
methods: { |
|
loadMenu(){ |
|
let query={ |
|
storeId:this.storeId |
|
} |
|
api.showStoreMenu(query).then(res=>{ |
|
if(res.code==0){//菜单获取成功 |
|
this.menuHtml=res.data.commodityMenuHtml; |
|
}else{ |
|
uni.showToast({ |
|
title:"菜单获取失败", |
|
icon:"none" |
|
}) |
|
} |
|
}) |
|
}, |
|
qrR(res){ |
|
this.wxcode = res |
|
}, |
|
getWxCode(code){ |
|
if(code == undefined){ |
|
this.val = 'https://u.wechat.com/MGCFEPwjKx0ZXPaED6LSwB4' |
|
// this.val = 'http://kd.biutag.com/ukeer/59c7808b-c098-41ca-abe0-e2035ce39f78&oMt0N5KE4QbBPvovuJt6OrIk_wuI' |
|
this.wxtitle = '扫码进群' |
|
}else { |
|
this.val = code |
|
this.wxtitle = '扫码付款' |
|
} |
|
}, |
|
testAlertAn(){ |
|
this.teaList[5].animation = 'animation-font' |
|
}, |
|
VXCode(val){ |
|
uni.setStorageSync('id', val) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
|
|
page { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.content { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.content-left { |
|
width: 18.69%; |
|
height: 100%; |
|
/* background: url("~@/static/images/yuansuleft.jpg"); */ |
|
background-size: 100% 100%; |
|
float: left; |
|
} |
|
|
|
.content-right { |
|
width: 81.31%; |
|
height: 100%; |
|
/* background: url("../../static/images/yuansuright.png"); */ |
|
background-size: 100% 100%; |
|
float: left; |
|
} |
|
|
|
.content-left-black { |
|
width: 100%; |
|
background:rgba(0,0,0,0.7); |
|
} |
|
|
|
.content-right-black { |
|
width: 100%; |
|
background:rgba(0,0,0,0.85); |
|
} |
|
|
|
.interval-view-one { |
|
width: 100%; |
|
height: 11%; |
|
} |
|
|
|
.content-left-discounts { |
|
margin-left: 8.36%; |
|
font-size: 28%; |
|
font-family:FZLTZHK--GBK1-0; |
|
color:rgba(255,255,255,1); |
|
float: left; |
|
} |
|
|
|
.content-left-discounts-1 { |
|
width: 100%; |
|
font-size: 28%; |
|
font-family:FZLTZHK--GBK1-0; |
|
color:rgba(255,255,255,1); |
|
text-align: center; |
|
float: left; |
|
margin-top: 20%; |
|
} |
|
|
|
.content-left-discounts-2 { |
|
margin-top: 60%; |
|
} |
|
|
|
.content-push-money { |
|
color: #E26910; |
|
} |
|
|
|
.interval-view-two { |
|
width: 100%; |
|
height: 1.61%; |
|
float: left; |
|
} |
|
|
|
.interval-view-three { |
|
width: 100%; |
|
height: 4.51%; |
|
float: left; |
|
} |
|
|
|
.wx-code-view { |
|
width: 79.38%; |
|
height: 26.38%; |
|
margin-top: 8.51%; |
|
margin: 0 auto; |
|
clear: left; |
|
background: #FFFFFF; |
|
} |
|
|
|
.wx-code { |
|
width: 70.71%; |
|
height: 70.71%; |
|
margin-left: 15.08%; |
|
margin-top: 9.82%; |
|
} |
|
|
|
.code-remark { |
|
width: 100%; |
|
font-size:24%; |
|
font-family:PingFangSC-Regular; |
|
color:rgba(3,3,3,1); |
|
text-align: center; |
|
margin-top: -2%; |
|
line-height: 20.35%; |
|
float: left; |
|
} |
|
|
|
.interval-view-four { |
|
height: 4.5%; |
|
width: 100%; |
|
float: left; |
|
} |
|
|
|
.content-left-discounts-botton { |
|
margin-left: 2.78%; |
|
} |
|
|
|
.tea-view { |
|
width:57.42%; |
|
height: 100%; |
|
float: left; |
|
} |
|
|
|
.tea-title-view { |
|
width: 100%; |
|
height: 11.94%; |
|
} |
|
|
|
.tea-image { |
|
width: 7.8%; |
|
height: 87.59%; |
|
margin-top: 0; |
|
margin-left: 18.39%; |
|
float: left; |
|
} |
|
|
|
.tea-title { |
|
font-size:30%; |
|
font-family:FZLTZHK--GBK1-0; |
|
font-weight:600; |
|
color:rgba(255,255,255,1); |
|
margin-left: 10.81%; |
|
margin-top: 4.72%; |
|
float: left; |
|
} |
|
|
|
.tea-list { |
|
width: 100%; |
|
height: 6.75%; |
|
position: relative; |
|
} |
|
|
|
.tea-name { |
|
font-size:30%; |
|
font-family:FZLTZHK--GBK1-0; |
|
font-weight:600; |
|
color:rgba(255,255,255,1); |
|
position: absolute; |
|
left: 7.8%; |
|
} |
|
|
|
.tea-name-en { |
|
font-size: 20%; |
|
font-family:FZLTZHK--GBK1-0; |
|
font-weight:600; |
|
color:rgba(255,255,255,1); |
|
position: absolute; |
|
left: 39.13%; |
|
top: 16%; |
|
} |
|
|
|
.tea-money { |
|
font-size:24%; |
|
font-family:PingFangSC-Medium; |
|
font-weight:500; |
|
color:rgba(255,255,255,1); |
|
position: absolute; |
|
right: 16.38%; |
|
top: 9.58%; |
|
} |
|
|
|
.commodity-new { |
|
width: 5.46%; |
|
height: 78.68%; |
|
position: absolute; |
|
right: 10.36%; |
|
} |
|
|
|
.commodity-dztj { |
|
width: 4.01%; |
|
height: 62.29%; |
|
position: absolute; |
|
right: 11.48%; |
|
} |
|
|
|
.coffee-view { |
|
width: 42.58%; |
|
height: 100%; |
|
float: left; |
|
} |
|
|
|
.coffee-title { |
|
margin-left: 30.97%; |
|
} |
|
|
|
.coffee-image { |
|
width: 13.83%; |
|
height: 89.92%; |
|
margin-left: 3.75%; |
|
} |
|
|
|
.coffee-name { |
|
left: 0; |
|
} |
|
|
|
.coffee-name-en { |
|
left: 40.45%; |
|
} |
|
|
|
.coffee-money { |
|
right: 9.77%; |
|
} |
|
|
|
.hot-view { |
|
width: 115.33%; |
|
height: 33.7%; |
|
margin-left: -15.33%; |
|
margin-top: -3.42%; |
|
background: url(../../static/images/hua.png); |
|
background-size: 100% 100%; |
|
position: relative; |
|
} |
|
|
|
.hot-title { |
|
font-size:36%; |
|
font-family:HannotateSC-W5; |
|
font-weight:bold; |
|
color:rgba(247,128,22,1); |
|
position: absolute; |
|
left: 26.33%; |
|
top: 21.7%; |
|
} |
|
|
|
.hot-list-view { |
|
width: 100%; |
|
height: 61.27%; |
|
position: absolute; |
|
left: 0; |
|
top: 38.73%; |
|
} |
|
|
|
.hot-list { |
|
width: 100%; |
|
height: 28.25%; |
|
position: relative; |
|
} |
|
|
|
.hot-name { |
|
font-size:18%; |
|
font-family:FZLTZHK--GBK1-0; |
|
font-weight:600; |
|
color:rgba(255,255,255,1); |
|
position: absolute; |
|
left: 30.37%; |
|
} |
|
|
|
.hot-nameEn { |
|
font-size:15%; |
|
font-family:FZLTZHK--GBK1-0; |
|
font-weight:600; |
|
color:rgba(255,255,255,1); |
|
position: absolute; |
|
left: 30.37%; |
|
top: 44.44%; |
|
} |
|
|
|
.hot-money { |
|
font-size:15%; |
|
font-family:PingFangSC-Medium; |
|
font-weight:500; |
|
color:rgba(255,255,255,1); |
|
position: absolute; |
|
right: 13.03%; |
|
} |
|
|
|
.qrimg { |
|
opacity: 0; |
|
width: 0; |
|
height: 0; |
|
} |
|
|
|
.tea-name-font { |
|
float: left; |
|
} |
|
|
|
@keyframes style1 { |
|
from, 20%, 53%, 80%, to { |
|
animation-timing-function: cubic-bezier(0.5, 0.5, 1.000, 1.000); |
|
transform: translate3d(0,0.5,0.1); |
|
} |
|
40%, 43% { |
|
animation-timing-function: cubic-bezier(0.5, 0.5, 1.000, 1.000); |
|
transform: translate3d(0px, -80%, 0); |
|
} |
|
} |
|
|
|
.animation-font { |
|
animation-duration: 0.32s; |
|
animation-fill-mode: both; |
|
animation-name: style1; |
|
} |
|
|
|
|
|
</style>
|
|
|