2024.7.16
This commit is contained in:
魏啾
@@ -1,36 +1,659 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='false' :title='"歌曲列表"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'></navseat>
|
||||
<view class="search flex-between">
|
||||
<view class="">
|
||||
|
||||
<view class="searchinput flex-between">
|
||||
<input type="text" class="searchinput_input" placeholder-style="color:#FFFFFF" @input="onInput"
|
||||
v-model="keyWord" placeholder="搜索" />
|
||||
<!-- <view class="searchinputu-icon" @click="init_fn"> -->
|
||||
<u-icon name="search" @click="init_fn" color="#fff" size="48"></u-icon>
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
||||
<!-- <image class="searchimage" @click="clickrecord"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/index.png" mode="aspectFill"></image> -->
|
||||
</view>
|
||||
<view class="contentclass">
|
||||
|
||||
<scroll-view scroll-y="true" id="demo" style="width:100%;" :style="{'height':Height}" @scroll="handleScroll"
|
||||
show-scrollbar="false" @scrolltolower="lower">
|
||||
<view class="contentclass">
|
||||
<view class="contentclassbox">
|
||||
<view class="contentclassboxitem flex-between" v-for="(item,index) in list" :key="index">
|
||||
<view class="contentclassboxleft flex-start">
|
||||
<!-- <image class="contentclassboxleftimage" :src="item.img" mode="aspectFill"></image> -->
|
||||
<view class="onecontentclassboxleft flex-colum-start">
|
||||
<text class="onecontentclassboxleft_one">{{item.name}}</text>
|
||||
<text class="onecontentclassboxleft_tow">{{item.originSinger}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentclassboxright" @click="clicshowpopupk(item)">
|
||||
点歌
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
|
||||
v-if="is_end" mode="aspectFill"></image>
|
||||
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
|
||||
</scroll-view>
|
||||
<!-- <image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
|
||||
v-if="is_end" mode="aspectFill"></image>
|
||||
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" /> -->
|
||||
<!-- <view class="contentclass">
|
||||
<view class="contentclassbox">
|
||||
<view class="contentclassboxitem flex-between" v-for="(item,index) in list" :key="index">
|
||||
<view class="contentclassboxleft flex-start">
|
||||
<image class="contentclassboxleftimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="onecontentclassboxleft flex-colum-start">
|
||||
<text class="onecontentclassboxleft_one">{{item.name}}</text>
|
||||
<text class="onecontentclassboxleft_tow">{{item.originSinger}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentclassboxright" @click="clicshowpopupk(item)">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
|
||||
v-if="is_end" mode="aspectFill"></image>
|
||||
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
|
||||
</view> -->
|
||||
<view class="positionfixed">
|
||||
<view class="positionfixedimage flex-colum">
|
||||
<image class="positionfixedimage_image"
|
||||
:src="songimg?songimg:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/mei.png'"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<view class="positionfixedbox flex-between">
|
||||
<view class="positionfixedbox_item flex-colum">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/yue.png" mode="aspectFill">
|
||||
</image>
|
||||
<view class="positionfixedbox_itemtexto">
|
||||
<u-notice-bar style="width: 100rpx;" :text="songName" :iconshow='false'
|
||||
color='rgba(255, 255, 255, 0.73)' fontSize='24' bgColor='transparent'></u-notice-bar>
|
||||
<!-- <text class="">{{songName || '暂无人点歌，快来...'}}</text> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="positionfixedbox_item flex-colum" @click="clickrecord">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/yidian.png"
|
||||
mode="aspectFill"></image>
|
||||
<text>已点</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="showpopup = false" mode="center" :round="24" bgColor="transparent">
|
||||
<view class="contentu-popup">
|
||||
<view class="contentuPopupOne">
|
||||
点歌
|
||||
</view>
|
||||
<view class="contentuPopupitem flex-between">
|
||||
<view class="contentuPopupitemone">
|
||||
点歌人昵称：
|
||||
</view>
|
||||
<view class="contentuPopupiteminput">
|
||||
<input type="text" v-model="fromName" placeholder="您的称呼" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentuPopupitem flex-between">
|
||||
<view class="contentuPopupitemone">
|
||||
你想点给谁：
|
||||
</view>
|
||||
<view class="contentuPopupiteminput">
|
||||
<input type="text" v-model="toName" placeholder="TA的称呼" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentuPopupitem flex-between">
|
||||
<view class="contentuPopupitemone">
|
||||
您的祝福语：
|
||||
</view>
|
||||
<view class="contentuPopupiteminput">
|
||||
<input type="text" v-model="note" placeholder=" " />
|
||||
</view>
|
||||
<!-- <view class="contentuPopupiteminput">
|
||||
<u--textarea style="font-size: 24rpx;" v-model="note" placeholder=" "></u--textarea>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="contentupopupboutton flex-between">
|
||||
<view class="contentupopupbouttonO" @click="showpopup = false">
|
||||
取消
|
||||
</view>
|
||||
<view class="contentupopupbouttonT" @tap="$u.debounce(clickervicesongpost, 500)">
|
||||
立刻支付
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Height: '',
|
||||
songId: '',
|
||||
fromName: '',
|
||||
toName: '',
|
||||
note: '',
|
||||
showpopup: false,
|
||||
list: [],
|
||||
is_end: false,
|
||||
keyWord: '',
|
||||
form: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loadmore',
|
||||
},
|
||||
shopId: "11",
|
||||
songName: '', //正在播放歌曲名字
|
||||
songimg: '',
|
||||
timer: null //定时器
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
// 隐藏首页按钮
|
||||
if (e.q) {
|
||||
this.shopId = this.getQueryString(decodeURIComponent(e.q), 'shopId')
|
||||
}
|
||||
uni.hideHomeButton();
|
||||
|
||||
|
||||
},
|
||||
onLoad() {},
|
||||
computed: {},
|
||||
mounted() {},
|
||||
onShow() {},
|
||||
methods: {}
|
||||
onShow() {
|
||||
if (!uni.cache.get('miniAppOpenId')) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
try {
|
||||
let res = await this.api.businessopenId({
|
||||
code: data.code, //临时登录凭证
|
||||
})
|
||||
if (res.code == 0) {
|
||||
console.log(res)
|
||||
uni.cache.set('miniAppOpenId', res.data)
|
||||
this.init_fn()
|
||||
// uni.cache.set('userInfo', res.data.userInfo);
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.init_fn()
|
||||
}
|
||||
this.createTimer() //单独每20秒请求一次
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
onHide() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
// onReachBottom() {
|
||||
// this.cashierService()
|
||||
// },
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.GetTop()
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
handleScroll(e) {
|
||||
console.log(e.detail.scrollTop)
|
||||
},
|
||||
lower() {
|
||||
console.log('触底加载')
|
||||
this.cashierService()
|
||||
},
|
||||
createTimer() {
|
||||
this.timer = setInterval(() => {
|
||||
this.apisongsinging()
|
||||
}, 20000)
|
||||
},
|
||||
async apisongsinging() { //查看现在是否有人点歌
|
||||
let {
|
||||
data
|
||||
} = await this.api.songsinging()
|
||||
console.log(data)
|
||||
this.songName = data.songName ? data.songName : '暂无人点歌，快来...'
|
||||
this.songimg = data.img
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onInput(e) {
|
||||
this.handleClick();
|
||||
},
|
||||
handleClick: _.debounce(function() {
|
||||
this.init_fn();
|
||||
// 函数执行内容
|
||||
}, 600),
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.size = 10
|
||||
this.form.status = 'loadmore'
|
||||
this.cashierService()
|
||||
this.apisongsinging()
|
||||
},
|
||||
// 列表
|
||||
async cashierService() {
|
||||
let res = await this.api.cashierServicesong({
|
||||
keyWord: this.keyWord,
|
||||
size: this.form.size,
|
||||
page: this.form.page,
|
||||
shopId: this.shopId,
|
||||
})
|
||||
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
if (this.form.page == 1 && res.data.list.length == 0) {
|
||||
this.list = []
|
||||
this.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
if (this.form.page == 1) {
|
||||
this.list = res.data.list
|
||||
} else {
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
}
|
||||
this.form.status = 'loading';
|
||||
if (res.data.pageNum >= res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
// 唤起弹框
|
||||
clicshowpopupk(item) {
|
||||
this.fromName = ''
|
||||
this.toName = ''
|
||||
this.note = ''
|
||||
this.showpopup = true
|
||||
this.songId = item.id
|
||||
},
|
||||
async clickervicesongpost(item) {
|
||||
let res = await this.api.cashierServicesongpost({
|
||||
songId: this.songId,
|
||||
fromName: this.fromName,
|
||||
toName: this.toName,
|
||||
note: this.note,
|
||||
shopId: this.shopId,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
this.showpopup = false
|
||||
uni.hideLoading()
|
||||
this.init_fn()
|
||||
// uni.switchTab({
|
||||
// url: '/pages/order/order'
|
||||
// });
|
||||
}, 500)
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
setTimeout(res => {
|
||||
this.showpopup = false
|
||||
uni.hideLoading()
|
||||
// uni.switchTab({
|
||||
// url: '/pages/order/order'
|
||||
// });
|
||||
}, 500)
|
||||
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
var screenHeight = data.safeArea.height
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('#demo').boundingClientRect(res => {
|
||||
console.log(res)
|
||||
this.Height = screenHeight - res.top - 10 + 'px'
|
||||
}).exec();
|
||||
this.$u.getRect('.contentclass').then(res => {
|
||||
console.log(res, 111)
|
||||
// this.Height = screenHeight - res.top + 'px'
|
||||
// console.log(this.Height)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
clickrecord() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chooseasong/record?shopId=' + this.shopId
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss">
|
||||
// page {
|
||||
|
||||
// }
|
||||
:deep(.u-notice__left-icon) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
.search{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/background.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
||||
padding: 12rpx 28rpx;
|
||||
|
||||
.searchinput {
|
||||
padding: 0rpx 32rpx;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||||
|
||||
.searchinput_input {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
flex: auto;
|
||||
|
||||
}
|
||||
|
||||
.searchinputu-icon {
|
||||
background: #000;
|
||||
padding: 10rpx 24rpx;
|
||||
background: #333333;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.searchimage {
|
||||
margin-left: 40rpx;
|
||||
width: 45.25rpx;
|
||||
height: 50.12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclass {
|
||||
padding: 0rpx 28rpx 166rpx 28rpx;
|
||||
overflow: auto;
|
||||
|
||||
.contentclassbox {
|
||||
width: 100%;
|
||||
padding: 12rpx 24rpx;
|
||||
// background: #FFFFFF;
|
||||
|
||||
.contentclassboxitem {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.contentclassboxleft {
|
||||
.contentclassboxleftimage {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.onecontentclassboxleft {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.onecontentclassboxleft_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onecontentclassboxleft_tow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclassboxright {
|
||||
padding: 8rpx 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #FFF6FF;
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
border: 2rpx solid #FCF4FF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
width: 95%;
|
||||
height: 166rpx;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
padding: 0 16rpx;
|
||||
transform: translate(-50%, 0);
|
||||
border-radius: 80rpx 80rpx 0 0;
|
||||
background: rgba(129, 125, 207, 0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
// .positionfixedimage::before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// width: 50px;
|
||||
// height: 50px;
|
||||
// top: 100rpx;
|
||||
// left: -50px;
|
||||
// background: radial-gradient(circle at 0 0, transparent 50px, rgba(129, 125, 207, 0.2) 50px);
|
||||
// backdrop-filter: blur(20px);
|
||||
// }
|
||||
|
||||
// .positionfixedimage::after {
|
||||
// content: "";
|
||||
// width: 180%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, 0);
|
||||
// top: 0;
|
||||
// z-index: -1;
|
||||
// content: '';
|
||||
// border-radius: 0 0 50% 50%; //顶部圆弧，底部圆弧： 0 0 50% 50%
|
||||
// background: #000000;
|
||||
// }
|
||||
|
||||
.positionfixedimage {
|
||||
position: absolute;
|
||||
top: -70rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: #000000;
|
||||
z-index: 9;
|
||||
|
||||
.positionfixedimage_image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
animation: rotate 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
/* 动画开始时旋转0度 */
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
/* 动画结束时旋转360度 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixedbox {
|
||||
padding: 44rpx 74rpx 42rpx 74rpx;
|
||||
|
||||
.positionfixedbox_item {
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
text {
|
||||
margin-top: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.positionfixedbox_itemtexto {
|
||||
width: 100rpx;
|
||||
padding: 0 0;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
// animation: aniMove 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes aniMove {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentu-popup {
|
||||
width: 694rpx;
|
||||
padding: 32rpx 24rpx 32rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(129, 125, 207, 0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
.contentuPopupOne {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.contentuPopupitem {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.contentuPopupitemone {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.contentuPopupiteminput {
|
||||
margin-left: 16rpx;
|
||||
flex: auto;
|
||||
padding-bottom: 8rpx;
|
||||
border-bottom: 2rpx solid rgba(255, 255, 255, 0.5);
|
||||
|
||||
input {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentupopupboutton {
|
||||
padding: 32rpx 70rpx 0 70rpx;
|
||||
|
||||
.contentupopupbouttonO {
|
||||
width: 196rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contentupopupbouttonT {
|
||||
width: 196rpx;
|
||||
height: 56rpx;
|
||||
background: linear-gradient(180deg, #8864EB 0%, #B349CC 100%);
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
line-height: 56rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
237
pages/chooseasong/record.vue
Normal file
237
pages/chooseasong/record.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='false' :title='"点单记录"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'
|
||||
iconcolor="#fff">
|
||||
</navseat>
|
||||
<view class="content">
|
||||
<scroll-view scroll-y="true" id="demo" style="width:100%;" :style="{'height':Height}" show-scrollbar="false"
|
||||
@scrolltolower="lower">
|
||||
<view class="contentbox" v-for="(item,index) in list" :key="index">
|
||||
<view class="contentboxtop flex-between">
|
||||
<text class="contentboxtopname">{{item.name}}</text>
|
||||
<text v-if="item.state == '-1'" class="contentboxtopname_weizhifu">未支付</text>
|
||||
<text v-if="item.state == '0'">已取消</text>
|
||||
<view class="contentboxtopone" v-if="item.state == '1'">
|
||||
<text class="contentboxtopone_one">前面还有{{item.preCount}}首</text>
|
||||
<text class="contentboxtopone_tow">已支付</text>
|
||||
</view>
|
||||
<text class="contentboxtopnametow" v-if="item.state == '2'">演唱中</text>
|
||||
<text class="contentboxtopnametowthere" v-if="item.state == '3'">已演唱</text>
|
||||
</view>
|
||||
<view class="contentboxtopO">
|
||||
¥{{item.price}}
|
||||
</view>
|
||||
<view class="contentboxtopT">
|
||||
下单时间：{{$u.timeFormat(item.create_time,'yyyy-mm-dd hh:MM') || '无'}}
|
||||
</view>
|
||||
<image class="contentboxafter" src="" mode=""></image>
|
||||
</view>
|
||||
<image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
|
||||
v-if="is_end" mode="aspectFill"></image>
|
||||
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Height: '',
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loadmore',
|
||||
},
|
||||
shopId: ''
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.shopId = e.shopId
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.GetTop()
|
||||
}, 200)
|
||||
},
|
||||
onShow() {
|
||||
this.cashierService()
|
||||
},
|
||||
methods: {
|
||||
lower() {
|
||||
console.log('触底加载')
|
||||
this.cashierService()
|
||||
},
|
||||
async cashierService() {
|
||||
let res = await this.api.cashierServicerecord({
|
||||
size: this.form.size,
|
||||
page: this.form.page,
|
||||
state: '', //-1 未支付 0 已取消 1 已支付 2 演唱中 3 已演唱
|
||||
shopId: this.shopId
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
if (this.form.page == 1 && res.data.list.length == 0) {
|
||||
this.list = []
|
||||
this.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
if (this.form.page == 1) {
|
||||
this.list = res.data.list
|
||||
} else {
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
}
|
||||
this.form.status = 'loading';
|
||||
if (res.data.pageNum == res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
|
||||
}
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
this.$u.getRect('.content').then(res => {
|
||||
console.log(res, 111)
|
||||
this.Height = data.safeArea.height - 36 + 'px'
|
||||
// console.log(this.Height)
|
||||
})
|
||||
// console.log(this.Height)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/background.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx 0rpx 28rpx;
|
||||
|
||||
.contentbox:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
position: relative;
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
background: rgba(129, 125, 207, 0.2);
|
||||
border: 2px solid #828282;
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
|
||||
.contentboxafter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 482rpx;
|
||||
height: 14rpx;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/dibuyin.png);
|
||||
background-size: 100% 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.contentboxtop {
|
||||
padding: 16rpx 24rpx;
|
||||
border-bottom: 2rpx solid #F6F6F6;
|
||||
|
||||
.contentboxtopname {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.contentboxtopone {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.contentboxtopone_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #F9DDF9;
|
||||
}
|
||||
|
||||
.contentboxtopone_tow {
|
||||
margin-left: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #32AA52;
|
||||
text-shadow: 0px 6px 6px rgba(50, 170, 82, 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtopnametow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FF9C39;
|
||||
text-shadow: 0px 4px 4px rgba(255, 156, 57, 0.37);
|
||||
}
|
||||
|
||||
.contentboxtopname_weizhifu {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.37);
|
||||
}
|
||||
|
||||
.contentboxtopnametowthere {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.37);
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtopO {
|
||||
padding: 0 24rpx;
|
||||
margin-top: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.contentboxtopT {
|
||||
padding: 0rpx 24rpx 32rpx 24rpx;
|
||||
margin-top: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user