2024.7.16
This commit is contained in:
魏啾
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1 +1,2 @@
|
|||||||
/unpackage
|
/unpackage
|
||||||
|
node_modules/
|
||||||
70
App.vue
70
App.vue
@@ -8,75 +8,7 @@
|
|||||||
},
|
},
|
||||||
onShow: function() {
|
onShow: function() {
|
||||||
this.$store.dispatch("HeightActions"); //获取随时获取页面的高度
|
this.$store.dispatch("HeightActions"); //获取随时获取页面的高度
|
||||||
// console.log('App Show');
|
|
||||||
try {
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
// uni.getSystemInfo({
|
|
||||||
// success: (res) => {
|
|
||||||
// let system = res;
|
|
||||||
// if (system.platform == 'ios') {
|
|
||||||
// console.log('ios', 64);
|
|
||||||
// uni.request({
|
|
||||||
// url: uni.conf.baseUrl + '/api/systemConfig/updateSystemVersion?platformCode=' + 1,
|
|
||||||
// method: 'POST',
|
|
||||||
// // header: {
|
|
||||||
// // userId: uni.getStorageSync('userId'),
|
|
||||||
// // token: uni.getStorageSync('token'),
|
|
||||||
// // myLoginName: uni.getStorageSync('myLoginName')
|
|
||||||
// // },
|
|
||||||
// success: (res) => {
|
|
||||||
// let datares = res.data;
|
|
||||||
// // uni.showToast({
|
|
||||||
// // title: res.message || res.msg,
|
|
||||||
// // icon: "none",
|
|
||||||
// // })
|
|
||||||
// // console.log(datares, '11111111')
|
|
||||||
// if (datares.code == 200) {
|
|
||||||
// uni.is_update = datares.data.versionCode; //是版本号，判断是否升级
|
|
||||||
// uni.is_force = datares.data.forceUpdate; //是否强制更新 1：强制 0：未强制
|
|
||||||
// uni.versionName = datares.data.versionName; //是版本号 显示版本号
|
|
||||||
// uni.is_wgt = 0; //是热更新 目前好像没有该功能
|
|
||||||
// uni.updateUrlApp = datares.data.url; //是下载地址
|
|
||||||
// uni.update_content = datares.data.updateInfo; //版本说明
|
|
||||||
// // uni.pro.switchTab('index/index');
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// fail: (res) => {
|
|
||||||
// // uni.showToast({
|
|
||||||
// // title: res.message || res.msg,
|
|
||||||
// // icon: "none",
|
|
||||||
// // })
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// } else {
|
|
||||||
// console.log(res, 66);
|
|
||||||
// uni.request({
|
|
||||||
// url: uni.conf.baseUrl + '/api/systemConfig/updateSystemVersion?platformCode=' + 0,
|
|
||||||
// method: 'POST',
|
|
||||||
// // header: {
|
|
||||||
// // userId: uni.getStorageSync('userId'),
|
|
||||||
// // token: uni.getStorageSync('token'),
|
|
||||||
// // myLoginName: uni.getStorageSync('myLoginName')
|
|
||||||
// // },
|
|
||||||
// success: (res) => {
|
|
||||||
// let datares = res.data;
|
|
||||||
// console.log(res);
|
|
||||||
// if (datares.code == 200) {
|
|
||||||
// uni.is_update = datares.data.versionCode; //是版本号，判断是否升级
|
|
||||||
// uni.is_force = datares.data.forceUpdate; //是否强制更新 1：强制 0：未强制
|
|
||||||
// uni.versionName = datares.data.versionName; //是版本号 显示版本号
|
|
||||||
// uni.is_wgt = 0; //是热更新 目前好像没有该功能
|
|
||||||
// uni.updateUrlApp = datares.data.url; //是下载地址
|
|
||||||
// uni.update_content = datares.data.updateInfo; //版本说明
|
|
||||||
// // uni.pro.switchTab('index/index');
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// #endif
|
|
||||||
} catch (e) {}
|
|
||||||
},
|
},
|
||||||
onHide: function() {
|
onHide: function() {
|
||||||
// console.log('App Hide');
|
// console.log('App Hide');
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ export default {
|
|||||||
return uni.api.post("/login/app/login", data);
|
return uni.api.post("/login/app/login", data);
|
||||||
},
|
},
|
||||||
productqueryProduct(data) { //获取商品信息
|
productqueryProduct(data) { //获取商品信息
|
||||||
return uni.api.post("/product/queryProduct", data,false);
|
return uni.api.post("/product/queryProduct", data, false);
|
||||||
},
|
},
|
||||||
// 下单详情
|
// 下单详情
|
||||||
getproductorderConfirm(data) {
|
getproductorderConfirm(data) {
|
||||||
@@ -84,7 +84,7 @@ export default {
|
|||||||
return uni.api.get("/order/getYhqDouble", data);
|
return uni.api.get("/order/getYhqDouble", data);
|
||||||
},
|
},
|
||||||
productqueryProductSku(data) { //通过选中的商品规格查询价格
|
productqueryProductSku(data) { //通过选中的商品规格查询价格
|
||||||
return uni.api.get("/product/queryProductSku", data,false);
|
return uni.api.get("/product/queryProductSku", data, false);
|
||||||
},
|
},
|
||||||
logingetPhoneNumber(data) { //小程序获取手机号
|
logingetPhoneNumber(data) { //小程序获取手机号
|
||||||
return uni.api.post("/login/getPhoneNumber", data);
|
return uni.api.post("/login/getPhoneNumber", data);
|
||||||
@@ -167,6 +167,22 @@ export default {
|
|||||||
return uni.api.get("/pay/getShopByMember", data, false);
|
return uni.api.get("/pay/getShopByMember", data, false);
|
||||||
},
|
},
|
||||||
loginmpdifyPwd(data) { // 修改资金密码
|
loginmpdifyPwd(data) { // 修改资金密码
|
||||||
return uni.api.get("login/mpdifyPwd", data);
|
return uni.api.get("/login/mpdifyPwd", data);
|
||||||
},
|
},
|
||||||
|
cashierServicesong(data) { // 获取所有歌曲，支持搜索及分页
|
||||||
|
return uni.api.get("/song", data,false);
|
||||||
|
},
|
||||||
|
cashierServicerecord(data) { // 点歌记录
|
||||||
|
return uni.api.get("/song/record", data);
|
||||||
|
},
|
||||||
|
cashierServicesongpost(data) { // 点歌
|
||||||
|
return uni.api.post("/song", data);
|
||||||
|
},
|
||||||
|
businessopenId(data) { // 获取openId
|
||||||
|
return uni.api.get("/login/wx/business/openId", data);
|
||||||
|
},
|
||||||
|
songsinging(data) { // 获取正在演唱的歌曲
|
||||||
|
return uni.api.get("/song/singing", data, false);
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="navbarcontent">
|
||||||
<!-- 导航栏 -->
|
<!-- 导航栏 -->
|
||||||
<view class="navbar" :class="{active:opacity}">
|
<view class="navbar" :class="{active:opacity}">
|
||||||
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||||
@@ -17,21 +17,23 @@
|
|||||||
<!-- 标题搜索框 -->
|
<!-- 标题搜索框 -->
|
||||||
<view class="flex-between" @click="clicknavigateBack">
|
<view class="flex-between" @click="clicknavigateBack">
|
||||||
<view class="navbar_tow_one flex-start" v-if="iconshow">
|
<view class="navbar_tow_one flex-start" v-if="iconshow">
|
||||||
<u-icon name="arrow-left" color="#000" size="40"></u-icon>
|
<u-icon name="arrow-left" :color="iconcolor" size="40"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<!-- #ifndef MP-WEIXIN -->
|
<!-- #ifndef MP-WEIXIN -->
|
||||||
<view class="navbar_tow_tow" v-if="opacity || titleshow">
|
<view class="navbar_tow_tow" v-if="opacity || titleshow" :style="{color: namecolor}">
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
<view class="navbar_tow_tow" v-if="opacity || titleshow"
|
<view class="navbar_tow_tow" v-if="opacity || titleshow"
|
||||||
:style="{'padding-left':HeighT.custwidth-14 + 'px'}">
|
:style="{'padding-left':HeighT.custwidth-14 + 'px',color: namecolor}">
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
{{title}}
|
{{title}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="" v-if="heightshow" :style="{height:Topdistance +'px'}">
|
||||||
|
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -48,17 +50,29 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
|
namecolor: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
opacity: {
|
opacity: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
titleshow: {
|
titleshow: {//标题是否显示
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
iconshow: {
|
heightshow: {//是否要占位高度
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
iconshow: {//返回键是否显示
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
},
|
||||||
|
iconcolor:{//返回键颜色
|
||||||
|
type: String,
|
||||||
|
default: '#000'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -93,10 +107,11 @@
|
|||||||
background: #F9F9F9;
|
background: #F9F9F9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.navbarcontent {
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
@@ -168,7 +183,6 @@
|
|||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ const baseUrlwws = 'ws://cashier.sxczgkj.cn/cashierService'
|
|||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef APP || MP-WEIXIN
|
// #ifdef APP || MP-WEIXIN
|
||||||
const baseUrl = debug ? proxyApi : 'https://cashier.sxczgkj.cn/cashierService' // 线上、、
|
const baseUrl = debug ? proxyApi : 'https://cashier.sxczgkj.cn/cashierService' // 线上
|
||||||
const baseUrlwws = debug ? proxyApiwws : 'wss://cashier.sxczgkj.cn/netty' // 线上
|
const baseUrlwws = debug ? proxyApiwws : 'wss://cashier.sxczgkj.cn/netty' // 线上
|
||||||
// const baseUrl = 'https://cashier.sxczgkj.cn/cashierService' // 线上
|
// const baseUrl = 'https://cashier.sxczgkj.cn/cashierService' // 线上
|
||||||
// const baseUrlwws = 'wss://cashier.sxczgkj.cn/netty' // 线上/
|
// const baseUrlwws = 'wss://cashier.sxczgkj.cn/netty' // 线上/
|
||||||
|
|||||||
28
pages.json
28
pages.json
@@ -3,7 +3,8 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -158,6 +159,20 @@
|
|||||||
"navigationBarTextStyle": "white"
|
"navigationBarTextStyle": "white"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/order_food/goodsList_scroll",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/order_food/goodsList_swiper",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTextStyle": "white"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/make/list",
|
"path": "pages/make/list",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -204,7 +219,16 @@
|
|||||||
"path": "pages/chooseasong/index",
|
"path": "pages/chooseasong/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "歌曲列表",
|
"navigationBarTitleText": "歌曲列表",
|
||||||
"navigationBarTextStyle": "black"
|
"navigationBarTextStyle": "white",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/chooseasong/record",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "点单记录",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,36 +1,659 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
<!-- 占位符导航栏 -->
|
||||||
|
<navseat :opacity='false' :title='"歌曲列表"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'></navseat>
|
||||||
<view class="search flex-between">
|
<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>
|
</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>
|
||||||
<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>
|
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import navseat from '@/components/navseat.vue'
|
||||||
|
import _ from 'lodash'
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {
|
||||||
data() {
|
navseat
|
||||||
return {};
|
},
|
||||||
|
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: {},
|
computed: {},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
onShow() {},
|
onShow() {
|
||||||
methods: {}
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style lang="scss">
|
||||||
|
// page {
|
||||||
|
|
||||||
|
// }
|
||||||
|
:deep(.u-notice__left-icon) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.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%;
|
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>
|
</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>
|
||||||
283
pages/index/indexs - 副本.vue
Normal file
283
pages/index/indexs - 副本.vue
Normal file
@@ -0,0 +1,283 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- <u-swiper :list="banners" height="460" radius="0" :indicator="banners.length > 1" imgMode="widthFix"></u-swiper> -->
|
||||||
|
|
||||||
|
<view class="container">
|
||||||
|
<view class="after"></view>
|
||||||
|
<view class="onecontent flex-between">
|
||||||
|
<view class="onecontentone flex-start">
|
||||||
|
<image :src="userInfo.headImg" mode="aspectFill">
|
||||||
|
<text>{{userInfo.nickName || '无'}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="onecontenttow flex-start">
|
||||||
|
<view class="onecontenttowring flex-colum" @click="memberindex(0)">
|
||||||
|
<text class="onecontenttowringone">{{usershopUserinfo.amount || '0.00'}}</text>
|
||||||
|
<text class="onecontenttowringtow">余额</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="onecontenttowring flex-colum">
|
||||||
|
<text class="onecontenttowringone">282</text>
|
||||||
|
<text class="onecontenttowringtow">积分</text>
|
||||||
|
</view> -->
|
||||||
|
<view class="onecontenttowring flex-colum" @click="memberindex(1)">
|
||||||
|
<image class="onecontenttowringone image"
|
||||||
|
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/rwm.png" mode="aspectFill">
|
||||||
|
</image>
|
||||||
|
<text class="onecontenttowringtow">会员码</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="towcontent flex-between">
|
||||||
|
<view class="towcontentitem flex-colum" @click="scanCodehandle(0)">
|
||||||
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/Instore.png" mode="widthFix"
|
||||||
|
style="width: 86.88rpx; height: 140.94rpx;"></image>
|
||||||
|
<text class="towcontentitemtext">店内就餐</text>
|
||||||
|
</view>
|
||||||
|
<view class="towcontentitem flex-colum" @click="scanCodehandle(1)">
|
||||||
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/takeaway.png" mode="widthFix"
|
||||||
|
style="width: 164rpx; height: 164rpx"></image>
|
||||||
|
<text class="towcontentitemtext">会员充值</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="footer-banner">
|
||||||
|
<!-- <u-swiper :list="footerBanners" radius="20" height="274" :indicator="banners.length > 1"
|
||||||
|
imgMode="widthFix"></u-swiper> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
banners: ['https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/banner1.png'],
|
||||||
|
footerBanners: ['https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/footer_banner1.png'],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
usershopUserinfo: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
amount: '',
|
||||||
|
shopName: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
userInfo: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
scanCodehandle(i) {
|
||||||
|
if (i == 0) {
|
||||||
|
uni.scanCode({
|
||||||
|
success: (res) => {
|
||||||
|
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||||
|
uni.cache.set('tableCode', tableCode)
|
||||||
|
if (tableCode) {
|
||||||
|
uni.pro.navigateTo('order_food/order_food')
|
||||||
|
}
|
||||||
|
// let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||||
|
// if (tableCode) {
|
||||||
|
// uni.pro.navigateTo('order_food/order_food', {
|
||||||
|
// tableCode: tableCode,
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url:'/pages/order_food/order_food'
|
||||||
|
// })
|
||||||
|
} else {
|
||||||
|
// uni.pro.navigateTo('pay_code/pay_code?shopInfo=', {
|
||||||
|
// shopName: this.usershopUserinfo.shopName,
|
||||||
|
// amount: this.usershopUserinfo.amount,
|
||||||
|
// shopId: uni.cache.get('shopUser')
|
||||||
|
// })
|
||||||
|
uni.pro.navigateTo('member/memberdetails', {
|
||||||
|
shopId_id: uni.cache.get('shopUser'),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
memberindex(i) {
|
||||||
|
if (i == 0) {
|
||||||
|
uni.pro.navigateTo('member/memberdetails', {
|
||||||
|
shopId_id: uni.cache.get('shopUser'),
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// uni.pro.navigateTo('pay_code/pay_code?shopInfo=', {
|
||||||
|
// shopName: this.usershopUserinfo.shopName,
|
||||||
|
// amount: this.usershopUserinfo.amount,
|
||||||
|
// shopId: uni.cache.get('shopUser')
|
||||||
|
// })
|
||||||
|
let data = {
|
||||||
|
shopName: this.usershopUserinfo.shopName,
|
||||||
|
amount: this.usershopUserinfo.amount,
|
||||||
|
shopId: uni.cache.get('shopUser')
|
||||||
|
}
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/pay_code/pay_code?shopInfo=' + JSON.stringify(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
getQueryString(url, name) { //解码
|
||||||
|
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||||
|
var r = url.substr(1).match(reg)
|
||||||
|
if (r != null) {
|
||||||
|
return r[2]
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
// / 更换头像
|
||||||
|
onChooseAvatar(e) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '上传中',
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
console.log(e.detail.avatarUrl)
|
||||||
|
let file = e.detail.avatarUrl;
|
||||||
|
uploadImage(file, 'avatar',
|
||||||
|
result => {
|
||||||
|
//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
|
||||||
|
// let objAge = {
|
||||||
|
// 'url': result,
|
||||||
|
// 'extname': 'png',
|
||||||
|
// 'name': 'imgss.png'
|
||||||
|
// };
|
||||||
|
// this.userlist.avatar.push(objAge)
|
||||||
|
this.userInfo.avatar = result
|
||||||
|
console.log(this.userInfo.avatar)
|
||||||
|
uni.hideLoading()
|
||||||
|
}, result => {
|
||||||
|
uni.hideLoading()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
page {
|
||||||
|
background: #F6F8FA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
border-radius: 0 0 0 40rpx;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 28rpx;
|
||||||
|
|
||||||
|
.after {
|
||||||
|
position: absolute;
|
||||||
|
top: 46rpx;
|
||||||
|
right: 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #f9f9f9 40rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.onecontent {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -86rpx;
|
||||||
|
position: relative;
|
||||||
|
height: 172rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 14rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
|
||||||
|
.onecontentone {
|
||||||
|
image {
|
||||||
|
width: 108rpx;
|
||||||
|
height: 108rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 2rpx solid #707070;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
margin-left: 12rpx;
|
||||||
|
width: 146rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.onecontenttow {
|
||||||
|
.onecontenttowring {
|
||||||
|
margin-left: 32rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.onecontenttowringone {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 42rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onecontenttowringtow {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.towcontent {
|
||||||
|
margin-top: 48rpx;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||||
|
height: 314rpx;
|
||||||
|
padding: 0 90rpx 0 120rpx;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
height: 188rpx;
|
||||||
|
width: 2rpx;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -1rpx;
|
||||||
|
background: #D8D8D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.towcontentitem {
|
||||||
|
.towcontentitemtext {
|
||||||
|
margin-top: 26rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-banner {
|
||||||
|
margin-top: 48upx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,58 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="content">
|
||||||
<u-swiper :list="banners" height="460" radius="0" :indicator="banners.length > 1" imgMode="widthFix"></u-swiper>
|
<view class="contentbox">
|
||||||
<view class="container">
|
<view class="contentboxitem flex-between">
|
||||||
<view class="after"></view>
|
<view class="contentboxitemleft flex-colum" @click="scanCodehandle(0)">
|
||||||
<view class="onecontent flex-between">
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xdiancan.png" mode="aspectFill">
|
||||||
<view class="onecontentone flex-start">
|
</image>
|
||||||
<image :src="userInfo.headImg" mode="aspectFill">
|
<text class="contentboxitemlefttextone">点餐</text>
|
||||||
<text>{{userInfo.nickName || '无'}}</text>
|
<text class="contentboxitemlefttexttow">在线点不排队</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="onecontenttow flex-start">
|
<view class="contentboxitemright" @click="scanCodehandle(1)">
|
||||||
<view class="onecontenttowring flex-colum" @click="memberindex(0)">
|
<view class="contentboxitemright_item flex-between">
|
||||||
<text class="onecontenttowringone">{{usershopUserinfo.amount || '0.00'}}</text>
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xvip.png" mode="aspectFill">
|
||||||
<text class="onecontenttowringtow">余额</text>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="onecontenttowring flex-colum">
|
|
||||||
<text class="onecontenttowringone">282</text>
|
|
||||||
<text class="onecontenttowringtow">积分</text>
|
|
||||||
</view> -->
|
|
||||||
<view class="onecontenttowring flex-colum" @click="memberindex(1)">
|
|
||||||
<image class="onecontenttowringone image"
|
|
||||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/rwm.png" mode="aspectFill">
|
|
||||||
</image>
|
</image>
|
||||||
<text class="onecontenttowringtow">会员码</text>
|
<view class="contentboxitemright_itembox flex-colum">
|
||||||
|
<text>会员</text>
|
||||||
|
<text>入会项权益</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="contentboxitemright_item flex-between" @click="memberindex(0)">
|
||||||
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xchong.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
<view class="contentboxitemright_itembox flex-colum">
|
||||||
|
<text>充值</text>
|
||||||
|
<text>充值享更多优惠</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="towcontent flex-between">
|
|
||||||
<view class="towcontentitem flex-colum" @click="scanCodehandle(0)">
|
|
||||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/Instore.png" mode="widthFix"
|
|
||||||
style="width: 86.88rpx; height: 140.94rpx;"></image>
|
|
||||||
<text class="towcontentitemtext">店内就餐</text>
|
|
||||||
</view>
|
|
||||||
<view class="towcontentitem flex-colum" @click="scanCodehandle(1)">
|
|
||||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/takeaway.png" mode="widthFix"
|
|
||||||
style="width: 164rpx; height: 164rpx"></image>
|
|
||||||
<text class="towcontentitemtext">会员充值</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="footer-banner">
|
|
||||||
<!-- <u-swiper :list="footerBanners" radius="20" height="274" :indicator="banners.length > 1"
|
|
||||||
imgMode="widthFix"></u-swiper> -->
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
banners: ['https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/banner1.png'],
|
|
||||||
footerBanners: ['https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/footer_banner1.png'],
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
usershopUserinfo: {
|
usershopUserinfo: {
|
||||||
@@ -81,23 +63,10 @@
|
|||||||
if (tableCode) {
|
if (tableCode) {
|
||||||
uni.pro.navigateTo('order_food/order_food')
|
uni.pro.navigateTo('order_food/order_food')
|
||||||
}
|
}
|
||||||
// let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
|
||||||
// if (tableCode) {
|
|
||||||
// uni.pro.navigateTo('order_food/order_food', {
|
|
||||||
// tableCode: tableCode,
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// uni.navigateTo({
|
|
||||||
// url:'/pages/order_food/order_food'
|
|
||||||
// })
|
|
||||||
} else {
|
} else {
|
||||||
// uni.pro.navigateTo('pay_code/pay_code?shopInfo=', {
|
|
||||||
// shopName: this.usershopUserinfo.shopName,
|
|
||||||
// amount: this.usershopUserinfo.amount,
|
|
||||||
// shopId: uni.cache.get('shopUser')
|
|
||||||
// })
|
|
||||||
uni.pro.navigateTo('member/memberdetails', {
|
uni.pro.navigateTo('member/memberdetails', {
|
||||||
shopId_id: uni.cache.get('shopUser'),
|
shopId_id: uni.cache.get('shopUser'),
|
||||||
})
|
})
|
||||||
@@ -109,11 +78,6 @@
|
|||||||
shopId_id: uni.cache.get('shopUser'),
|
shopId_id: uni.cache.get('shopUser'),
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
// uni.pro.navigateTo('pay_code/pay_code?shopInfo=', {
|
|
||||||
// shopName: this.usershopUserinfo.shopName,
|
|
||||||
// amount: this.usershopUserinfo.amount,
|
|
||||||
// shopId: uni.cache.get('shopUser')
|
|
||||||
// })
|
|
||||||
let data = {
|
let data = {
|
||||||
shopName: this.usershopUserinfo.shopName,
|
shopName: this.usershopUserinfo.shopName,
|
||||||
amount: this.usershopUserinfo.amount,
|
amount: this.usershopUserinfo.amount,
|
||||||
@@ -169,114 +133,86 @@
|
|||||||
background: #F6F8FA;
|
background: #F6F8FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.content {
|
||||||
border-radius: 0 0 0 40rpx;
|
.contentbox {
|
||||||
position: relative;
|
|
||||||
padding: 0 28rpx;
|
|
||||||
|
|
||||||
.after {
|
|
||||||
position: absolute;
|
|
||||||
top: 46rpx;
|
|
||||||
right: 0;
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
line-height: 40rpx;
|
|
||||||
text-align: center;
|
|
||||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #f9f9f9 40rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
.onecontent {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: -86rpx;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 172rpx;
|
width: 100%;
|
||||||
background: #FFFFFF;
|
height: 1046rpx;
|
||||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/shuangbackground.png) no-repeat;
|
||||||
border-radius: 14rpx;
|
background-size: 100% 100%;
|
||||||
padding: 0 30rpx;
|
padding: 0 24rpx;
|
||||||
|
|
||||||
.onecontentone {
|
.contentboxitem {
|
||||||
image {
|
position: absolute;
|
||||||
width: 108rpx;
|
bottom: 0;
|
||||||
height: 108rpx;
|
width: 90%;
|
||||||
background: #FFFFFF;
|
left: 50%;
|
||||||
border: 2rpx solid #707070;
|
transform: translate(-50%, 50%);
|
||||||
border-radius: 50%;
|
padding: 38rpx 0 26rpx 0;
|
||||||
}
|
background: rgba(255, 255, 255, 0.98);
|
||||||
|
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
|
||||||
text {
|
.contentboxitemleft {
|
||||||
margin-left: 12rpx;
|
width: 50%;
|
||||||
width: 146rpx;
|
border-right: 2rpx solid #623618;
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.onecontenttow {
|
image {
|
||||||
.onecontenttowring {
|
width: 134rpx;
|
||||||
margin-left: 32rpx;
|
height: 134rpx;
|
||||||
height: 110rpx;
|
}
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
.onecontenttowringone {
|
.contentboxitemlefttextone {
|
||||||
|
margin-top: 10rpx;
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.contentboxitemlefttexttow {
|
||||||
width: 42rpx;
|
margin-top: 2rpx;
|
||||||
height: 42rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.onecontenttowringtow {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #666666;
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentboxitemright {
|
||||||
|
width: 50%;
|
||||||
|
padding: 0 60rpx 0 34rpx;
|
||||||
|
|
||||||
|
.contentboxitemright_item:nth-child(2) {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentboxitemright_item {
|
||||||
|
image {
|
||||||
|
width: 96rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentboxitemright_itembox {
|
||||||
|
text:nth-child(1) {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
text:nth-child(2) {
|
||||||
|
margin-top: 2rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.towcontent {
|
|
||||||
margin-top: 48rpx;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
|
||||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|
||||||
height: 314rpx;
|
|
||||||
padding: 0 90rpx 0 120rpx;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
height: 188rpx;
|
|
||||||
width: 2rpx;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -1rpx;
|
|
||||||
background: #D8D8D8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.towcontentitem {
|
|
||||||
.towcontentitemtext {
|
|
||||||
margin-top: 26rpx;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-banner {
|
|
||||||
margin-top: 48upx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -256,7 +256,7 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
init_fn() {
|
init_fn() {
|
||||||
this.list = []
|
// this.list = []
|
||||||
this.groupList = []
|
this.groupList = []
|
||||||
this.is_end = false
|
this.is_end = false
|
||||||
this.form.page = 1
|
this.form.page = 1
|
||||||
@@ -288,6 +288,7 @@
|
|||||||
if (res.data.pages < this.form.page) {
|
if (res.data.pages < this.form.page) {
|
||||||
this.form.status = 'nomore'
|
this.form.status = 'nomore'
|
||||||
if (this.form.page == 1 && res.data.list.length == 0) {
|
if (this.form.page == 1 && res.data.list.length == 0) {
|
||||||
|
this.list = []
|
||||||
this.is_end = true
|
this.is_end = true
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
@@ -295,7 +296,11 @@
|
|||||||
this.form.status = 'loading';
|
this.form.status = 'loading';
|
||||||
this.form.page = ++this.form.page;
|
this.form.page = ++this.form.page;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.list = [...this.list, ...res.data.list];
|
if (this.form.page == 1) {
|
||||||
|
this.list = res.data.list
|
||||||
|
} else {
|
||||||
|
this.list = [...this.list, ...res.data.list];
|
||||||
|
}
|
||||||
this.form.status = 'loading';
|
this.form.status = 'loading';
|
||||||
if (res.data.pageNum == res.data.pages) {
|
if (res.data.pageNum == res.data.pages) {
|
||||||
this.form.status = 'nomore';
|
this.form.status = 'nomore';
|
||||||
@@ -303,6 +308,7 @@
|
|||||||
this.form.status = 'loading';
|
this.form.status = 'loading';
|
||||||
}
|
}
|
||||||
}, 500)
|
}, 500)
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async getorderList() {
|
async getorderList() {
|
||||||
|
|||||||
92
pages/order_food/goodsList.vue
Normal file
92
pages/order_food/goodsList.vue
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="t1">点击下方链接体验</view>
|
||||||
|
<navigator url="goodsList_scroll" hover-class="hover">
|
||||||
|
<view class="title">
|
||||||
|
<text>滚动式联动</text>
|
||||||
|
<text class="link">立即体验</text></view>
|
||||||
|
<view class="content">
|
||||||
|
<view>
|
||||||
|
优点：滚动流畅度很好，全平台兼容
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
缺点：因为需要计算高度的原因，需要在页面初始化时将所有商品信息返回，若是有大量的数据，不太建议这样做，会影响到打开时的加载速度
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<navigator url="goodsList_swiper" hover-class="hover">
|
||||||
|
<view class="title">
|
||||||
|
<text>轮播式联动</text>
|
||||||
|
<text class="link">立即体验</text>
|
||||||
|
</view>
|
||||||
|
<view class="content">
|
||||||
|
<view>
|
||||||
|
优点：左侧导航与主内容区域联动性好且可以随意调整右侧内容的高度
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
缺点：因H5平台浏览器众多，体验欠佳，不建议在H5平台使用。
|
||||||
|
<text style="color: red;">双向联动有BUG，仅支持左侧联动</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<view class="t2">
|
||||||
|
<view>因数据不可控的原因，请各位开发者们选择适合自己的模板使用，各有优缺点，选择适合自己的才是最好的。</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.t1{
|
||||||
|
padding-top: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #e50000;
|
||||||
|
}
|
||||||
|
.t2{
|
||||||
|
padding: 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ee0000;
|
||||||
|
|
||||||
|
>view{
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
navigator{
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin: 30rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border:#e5e5e5 solid 1px;
|
||||||
|
|
||||||
|
.title{
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-bottom:#e5e5e5 solid 1px;
|
||||||
|
color:#333;
|
||||||
|
font-size: 32rpx;
|
||||||
|
|
||||||
|
.link{
|
||||||
|
color: #09f;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
line-height: 48rpx;
|
||||||
|
color:#999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
391
pages/order_food/goodsList_scroll.vue
Normal file
391
pages/order_food/goodsList_scroll.vue
Normal file
@@ -0,0 +1,391 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 顶部面板 -->
|
||||||
|
<view class="top--panel">
|
||||||
|
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
|
||||||
|
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
||||||
|
<view>这里顶部内容占位区域，不需要则删除</view>
|
||||||
|
<view>可添加需放在页面顶部的内容，比如banner图</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 滚动区域 -->
|
||||||
|
<view class="scroll-panel" id="scroll-panel">
|
||||||
|
<view class="list-box">
|
||||||
|
<view class="list-boxafter" v-if="isFixed"></view>
|
||||||
|
<view class="left">
|
||||||
|
<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
|
||||||
|
:scroll-into-view="leftIntoView" :scroll-with-animation="false">
|
||||||
|
<view class="item" v-for="(item,index) in leftArray" :key="index"
|
||||||
|
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
|
||||||
|
@tap="leftTap">{{item}}</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<view class="main">
|
||||||
|
<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
|
||||||
|
:scroll-into-view="scrollInto" :scroll-with-animation="false">
|
||||||
|
<view class="item main-item" v-for="(item,index) in mainArray" :key="index" :id="'item-'+index">
|
||||||
|
<view class="title">
|
||||||
|
<view>{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="goods" v-for="(item2,index2) in item.list" :key="index2">
|
||||||
|
<image src="@/static/logo.png" mode=""></image>
|
||||||
|
<view>
|
||||||
|
<view>第{{index2+1}}个商品标题</view>
|
||||||
|
<view class="describe">第{{index2+1}}个商品的描述内容</view>
|
||||||
|
<view class="money">第{{index2+1}}个商品的价格</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 底部面板 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
|
||||||
|
<!-- <view class="bottom-panel">
|
||||||
|
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
||||||
|
<view>这里底部内容占位区域，不需要则删除</view>
|
||||||
|
<view>可添加需放在页面底部的内容，比如购物车栏目</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollHeight: 400,
|
||||||
|
scrollTopSize: 0, //距离顶部的高度
|
||||||
|
fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
|
||||||
|
leftArray: [],
|
||||||
|
mainArray: [],
|
||||||
|
topArr: [],
|
||||||
|
leftIndex: 0,
|
||||||
|
scrollInto: '',
|
||||||
|
isFixed: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
console.log(e)
|
||||||
|
if (e.scrollTop >= this.scrollTopSize) { //控制大图层
|
||||||
|
this.isFixed = false;
|
||||||
|
} else {
|
||||||
|
this.isFixed = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
/* 计算左侧滚动位置定位 */
|
||||||
|
leftIntoView() {
|
||||||
|
return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
|
||||||
|
setTimeout(() => {
|
||||||
|
/* 等待滚动区域初始化完成 */
|
||||||
|
this.initScrollView().then(() => {
|
||||||
|
/* 获取列表数据，你的代码从此处开始 */
|
||||||
|
this.getListData();
|
||||||
|
})
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* 初始化滚动区域 */
|
||||||
|
initScrollView() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let view = uni.createSelectorQuery().select('#scroll-panel');
|
||||||
|
view.boundingClientRect(res => {
|
||||||
|
this.scrollTopSize = res.top;
|
||||||
|
this.scrollHeight = 1000;
|
||||||
|
console.log(res, res.top, res.height)
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve();
|
||||||
|
}, 100);
|
||||||
|
}).exec();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 获取列表数据 */
|
||||||
|
getListData() {
|
||||||
|
// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
|
/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
||||||
|
uni.showLoading();
|
||||||
|
|
||||||
|
// 模拟数据
|
||||||
|
let mockData = () => {
|
||||||
|
let [left, main] = [
|
||||||
|
[],
|
||||||
|
[]
|
||||||
|
];
|
||||||
|
|
||||||
|
let size = Math.floor(Math.random() * 40);
|
||||||
|
size = size < 20 ? 20 : size;
|
||||||
|
for (let i = 0; i < size; i++) {
|
||||||
|
left.push(`${i+1}类商品`);
|
||||||
|
|
||||||
|
let list = [];
|
||||||
|
let r = Math.floor(Math.random() * 10);
|
||||||
|
r = r < 5 ? 5 : r;
|
||||||
|
for (let j = 0; j < r; j++) {
|
||||||
|
list.push(j);
|
||||||
|
}
|
||||||
|
main.push({
|
||||||
|
title: `第${i+1}类商品标题`,
|
||||||
|
list
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
left,
|
||||||
|
main
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
let res = mockData();
|
||||||
|
let {
|
||||||
|
left,
|
||||||
|
main
|
||||||
|
} = res;
|
||||||
|
// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
|
||||||
|
resolve({
|
||||||
|
left,
|
||||||
|
main
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
}).then((res) => {
|
||||||
|
console.log('-----------请求接口返回数据示例-------------');
|
||||||
|
console.log(res);
|
||||||
|
|
||||||
|
uni.hideLoading();
|
||||||
|
this.leftArray = res.left;
|
||||||
|
this.mainArray = res.main;
|
||||||
|
|
||||||
|
// DOM 挂载后 再调用 getElementTop 获取高度的方法。
|
||||||
|
setTimeout(() => {
|
||||||
|
this.getElementTop();
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 获取元素顶部信息 */
|
||||||
|
getElementTop() {
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
|
let view = uni.createSelectorQuery().selectAll('.main-item');
|
||||||
|
view.boundingClientRect(data => {
|
||||||
|
resolve(data);
|
||||||
|
}).exec();
|
||||||
|
}).then((res) => {
|
||||||
|
let topArr = res.map((item) => {
|
||||||
|
return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
|
||||||
|
});
|
||||||
|
this.topArr = topArr;
|
||||||
|
|
||||||
|
/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
|
||||||
|
let last = res[res.length - 1].height;
|
||||||
|
if (last - 20 < this.scrollHeight) {
|
||||||
|
this.fillHeight = this.scrollHeight - last + 20;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 主区域滚动监听 */
|
||||||
|
mainScroll(e) {
|
||||||
|
// 节流方法
|
||||||
|
clearTimeout(this.mainThrottle);
|
||||||
|
this.mainThrottle = setTimeout(() => {
|
||||||
|
scrollFn();
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
let scrollFn = () => {
|
||||||
|
let top = e.detail.scrollTop;
|
||||||
|
let index = 0;
|
||||||
|
/* 查找当前滚动距离 */
|
||||||
|
for (let i = (this.topArr.length - 1); i >= 0; i--) {
|
||||||
|
/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
|
||||||
|
if ((top + 2) >= this.topArr[i]) {
|
||||||
|
index = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.leftIndex = (index < 0 ? 0 : index);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 左侧导航点击 */
|
||||||
|
leftTap(e) {
|
||||||
|
let index = e.currentTarget.dataset.index;
|
||||||
|
this.scrollInto = `item-${index}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 容器 */
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
|
||||||
|
&>view {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-panel {
|
||||||
|
flex-grow: 1;
|
||||||
|
// height: 0;
|
||||||
|
// overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-panel {
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.list-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
font-size: 28rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.list-boxafter {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 200rpx;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
line-height: normal;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 32rpx;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
&+.item {
|
||||||
|
margin-top: 1px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
border-top: #d6d6d6 solid 1px;
|
||||||
|
width: 620upx;
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
right: 0;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
/* 1px像素 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #42b983;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
border-left: #42b983 solid 4px;
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-last {
|
||||||
|
height: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
background-color: #fff;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
width: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
.title {
|
||||||
|
line-height: normal;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666;
|
||||||
|
background-color: #fff;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 19;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
border-bottom: #eee solid 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
&+.goods {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&>image {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.describe {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #efba21;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
323
pages/order_food/goodsList_swiper.vue
Normal file
323
pages/order_food/goodsList_swiper.vue
Normal file
@@ -0,0 +1,323 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 顶部面板 -->
|
||||||
|
<view class="top--panel">
|
||||||
|
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
|
||||||
|
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
||||||
|
<view>这里顶部内容占位区域，不需要则删除</view>
|
||||||
|
<view>可添加需放在页面顶部的内容，比如banner图</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 滚动区域 -->
|
||||||
|
<view class="scroll-panel" id="scroll-panel">
|
||||||
|
<view class="list-box">
|
||||||
|
<view class="left">
|
||||||
|
<scroll-view scroll-y="true"
|
||||||
|
:style="{ 'height':scrollHeight }"
|
||||||
|
:scroll-into-view="leftIntoView"
|
||||||
|
:scroll-with-animation="true"
|
||||||
|
>
|
||||||
|
<view class="item"
|
||||||
|
v-for="(item,index) in leftArray"
|
||||||
|
:key="index"
|
||||||
|
:class="{ 'active':index==leftIndex }"
|
||||||
|
:id="'left-'+index"
|
||||||
|
:data-index="index"
|
||||||
|
@tap="leftTap"
|
||||||
|
>{{item}}</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<view class="main">
|
||||||
|
<swiper class="swiper" :style="{ 'height':scrollHeight }"
|
||||||
|
:current="leftIndex" @change="swiperChange"
|
||||||
|
:vertical="true" duration="200" :disable-touch="true">
|
||||||
|
<swiper-item v-for="(item,index) in mainArray" :key="index">
|
||||||
|
<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
|
||||||
|
<view class="item">
|
||||||
|
<view class="title">
|
||||||
|
<view>{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="goods" v-for="(item2,index2) in item.list" :key="index2">
|
||||||
|
<image src="/static/logo.png" mode=""></image>
|
||||||
|
<view>
|
||||||
|
<view>第{{index2+1}}个商品标题</view>
|
||||||
|
<view class="describe">第{{index2+1}}个商品的描述内容</view>
|
||||||
|
<view class="money">第{{index2+1}}个商品的价格</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 底部面板 -->
|
||||||
|
<view class="bottom-panel">
|
||||||
|
<!-- 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
|
||||||
|
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
||||||
|
<view>这里底部内容占位区域，不需要则删除</view>
|
||||||
|
<view>可添加需放在页面底部的内容，比如购物车栏目</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollHeight:'400px',
|
||||||
|
leftArray:[],
|
||||||
|
mainArray:[],
|
||||||
|
leftIndex:0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
/* 计算左侧滚动位置定位 */
|
||||||
|
leftIntoView(){
|
||||||
|
return `left-${this.leftIndex > 5 ? (this.leftIndex-5):0}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReady(){
|
||||||
|
/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
|
||||||
|
setTimeout(()=>{
|
||||||
|
/* 等待滚动区域初始化完成 */
|
||||||
|
this.initScrollView().then(()=>{
|
||||||
|
/* 获取列表数据，你的代码从此处开始 */
|
||||||
|
this.getListData();
|
||||||
|
})
|
||||||
|
},100);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* 初始化滚动区域 */
|
||||||
|
initScrollView(){
|
||||||
|
return new Promise((resolve, reject)=>{
|
||||||
|
let view = uni.createSelectorQuery().select('#scroll-panel');
|
||||||
|
view.boundingClientRect(res => {
|
||||||
|
this.scrollHeight = `${res.height}px`;
|
||||||
|
setTimeout(()=>{
|
||||||
|
resolve();
|
||||||
|
},100);
|
||||||
|
}).exec();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 获取列表数据 */
|
||||||
|
getListData(){
|
||||||
|
// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
|
||||||
|
new Promise((resolve,reject)=>{
|
||||||
|
/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
||||||
|
uni.showLoading();
|
||||||
|
setTimeout(()=>{
|
||||||
|
/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
||||||
|
uni.showLoading();
|
||||||
|
|
||||||
|
// 模拟数据
|
||||||
|
let mockData = ()=>{
|
||||||
|
let [left,main]=[[],[]];
|
||||||
|
|
||||||
|
let size = Math.floor(Math.random()*40);
|
||||||
|
size = size < 20 ? 20 : size;
|
||||||
|
for(let i=0;i<size;i++){
|
||||||
|
left.push(`${i+1}类商品`);
|
||||||
|
|
||||||
|
let list=[];
|
||||||
|
let r = Math.floor(Math.random()*10);
|
||||||
|
r = r < 20 ? 20 : r;
|
||||||
|
for(let j=0;j<r;j++){
|
||||||
|
list.push(j);
|
||||||
|
}
|
||||||
|
main.push({
|
||||||
|
title:`第${i+1}类商品标题`,
|
||||||
|
list
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
left,
|
||||||
|
main
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(()=>{
|
||||||
|
let res = mockData();
|
||||||
|
let {left,main} = res;
|
||||||
|
// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
|
||||||
|
resolve({left,main});
|
||||||
|
},1000);
|
||||||
|
},1000);
|
||||||
|
}).then((res)=>{
|
||||||
|
console.log('-----------请求接口返回数据示例-------------');
|
||||||
|
console.log(res);
|
||||||
|
|
||||||
|
uni.hideLoading();
|
||||||
|
this.leftArray=res.left;
|
||||||
|
this.mainArray=res.main;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 左侧导航点击 */
|
||||||
|
leftTap(e){
|
||||||
|
let index=e.currentTarget.dataset.index;
|
||||||
|
this.leftIndex=Number(index);
|
||||||
|
},
|
||||||
|
/* 轮播图切换 */
|
||||||
|
swiperChange(e){
|
||||||
|
let index=e.detail.current;
|
||||||
|
this.leftIndex=Number(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page{
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/* 容器 */
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
|
||||||
|
&>view{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-panel{
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-panel{
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.list-box{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
.left{
|
||||||
|
width: 200rpx;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
line-height: normal;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 32rpx;
|
||||||
|
|
||||||
|
.item{
|
||||||
|
padding: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
& + .item{
|
||||||
|
margin-top: 1px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
border-top: #d6d6d6 solid 1px;
|
||||||
|
width: 620upx;
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
right: 0;
|
||||||
|
transform:scaleY(0.5); /* 1px像素 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active{
|
||||||
|
color: #42b983;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
border-left: #42b983 solid 4px;
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-last{
|
||||||
|
height: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
background-color: #fff;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
width: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.title{
|
||||||
|
line-height: normal;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666;
|
||||||
|
background-color: #fff;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 19;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item{
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
border-bottom: #eee solid 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
& + .goods{
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > image{
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.describe{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #efba21;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -12,11 +12,11 @@
|
|||||||
<view class="left-btn">
|
<view class="left-btn">
|
||||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||||
@click="navClickHandle(1)">
|
@click="navClickHandle(1)">
|
||||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||||
@click="navClickHandle(2)">
|
@click="navClickHandle(2)">
|
||||||
<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -89,12 +89,12 @@
|
|||||||
<view class="operation-wrap" v-else>
|
<view class="operation-wrap" v-else>
|
||||||
<view class="btn" v-if="item1.cartNumber != '0'"
|
<view class="btn" v-if="item1.cartNumber != '0'"
|
||||||
@click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'')">
|
@click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'')">
|
||||||
<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
|
<u-icon :name="require('@/static/icon_sub.png')" size="36"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<text class="num">{{ item1.cartNumber }}</text>
|
<text class="num">{{ item1.cartNumber }}</text>
|
||||||
<view class="btn"
|
<view class="btn"
|
||||||
@click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')">
|
@click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')">
|
||||||
<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
|
<u-icon :name="require('@/static/icon_add.png')" size="36"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -171,7 +171,7 @@
|
|||||||
<view class="col">
|
<view class="col">
|
||||||
<text class="t">{{ shopList.storeInfo.businessTime }}</text>
|
<text class="t">{{ shopList.storeInfo.businessTime }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="col">
|
<view class="col" @click="makePhoneCall(shopList.storeInfo.phone)">
|
||||||
<text class="t">{{ shopList.storeInfo.phone }}</text>
|
<text class="t">{{ shopList.storeInfo.phone }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="col">
|
<view class="col">
|
||||||
@@ -230,19 +230,23 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
<!-- <vastwu-barrage width="750rpx" height="1300rpx" ref="vBarrage"></vastwu-barrage> -->
|
<l-barrage ref="lBarrage" @end="onEnd" :minTop='8' :maxTop='20' :avatar='barrageavatar'></l-barrage>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import navbar from '../../uni_modules/uview-ui/libs/config/props/navbar';
|
import webSocketUtils from '@/common/js/websocket.js';
|
||||||
import webSocketUtils from '@/common/js/websocket.js'
|
import orderdetail from '@/pages/order_detail/index';
|
||||||
// import vastwuBarrage from '@/components/vastwu-barrage/vastwu-barrage.vue'
|
import lBarrage from '@/components/l-barrage/l-barrage.vue'
|
||||||
export default {
|
export default {
|
||||||
// components:{vastwuBarrage},
|
components: {
|
||||||
|
orderdetail,
|
||||||
|
lBarrage
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
userInfo: uni.cache.get('userInfo'), //个人信息
|
||||||
// #ifndef MP-WEIXIN
|
// #ifndef MP-WEIXIN
|
||||||
menuInfo: uni.getSystemInfo(),
|
menuInfo: uni.getSystemInfo(),
|
||||||
// #endif
|
// #endif
|
||||||
@@ -262,12 +266,17 @@
|
|||||||
tableCode: '', //code，
|
tableCode: '', //code，
|
||||||
specifications: {},
|
specifications: {},
|
||||||
skuidname: [],
|
skuidname: [],
|
||||||
cartLists: {},
|
cartLists: {}, //购物车
|
||||||
|
orderdetailcartLists: {}, //提交订单
|
||||||
socketTicket: null,
|
socketTicket: null,
|
||||||
amountcartNumber: 0,
|
amountcartNumber: 0,
|
||||||
skuidsearch: '', //
|
skuidsearch: '', //
|
||||||
salePrice: '', //钱数
|
salePrice: '', //钱数
|
||||||
fixedtrue: true
|
fixedtrue: true,
|
||||||
|
datasocket: {}, //储存传参数据
|
||||||
|
radiovalue: '1', //选择支付方式
|
||||||
|
amountVIP: null, //余额
|
||||||
|
barrageavatar: '' //弹幕头像
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onPageScroll(e) {
|
onPageScroll(e) {
|
||||||
@@ -292,22 +301,27 @@
|
|||||||
uni.cache.set('tableCode', this.tableCode)
|
uni.cache.set('tableCode', this.tableCode)
|
||||||
}
|
}
|
||||||
uni.cache.set('types', 'types');
|
uni.cache.set('types', 'types');
|
||||||
uni.$on('message', this.getMessage)
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.countTitleTopNum(); //导航栏
|
this.countTitleTopNum(); //导航栏
|
||||||
});
|
});
|
||||||
// this.$refs.vBarrage.init([123])
|
|
||||||
},
|
},
|
||||||
onUnload() {
|
onUnload() {
|
||||||
this.socketTicket.Close()
|
this.socketTicket.Close()
|
||||||
uni.$off('message')
|
uni.$off('message')
|
||||||
},
|
},
|
||||||
|
onHide() {
|
||||||
|
this.socketTicket.Close()
|
||||||
|
uni.$off('message')
|
||||||
|
this.fixedtrue = true
|
||||||
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
setTimeout(() => {
|
uni.$on('message', this.getMessage)
|
||||||
this.productqueryShopIdByTableCode() //获取shop User id
|
this.productqueryShopIdByTableCode() //获取shop User id
|
||||||
}, 500)
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onEnd() { //回调弹幕
|
||||||
|
console.log('一波结束')
|
||||||
|
},
|
||||||
// 单独获取他的shopUserid
|
// 单独获取他的shopUserid
|
||||||
async productqueryShopIdByTableCode() {
|
async productqueryShopIdByTableCode() {
|
||||||
let res = await this.api.productqueryShopIdByTableCode({
|
let res = await this.api.productqueryShopIdByTableCode({
|
||||||
@@ -315,7 +329,7 @@
|
|||||||
})
|
})
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
uni.cache.set('shopUser', res.data)
|
uni.cache.set('shopUser', res.data)
|
||||||
this.handlemessage()
|
this.handlemessage() //监听websocket返回
|
||||||
this.productqueryProduct() //list 数据
|
this.productqueryProduct() //list 数据
|
||||||
} else {
|
} else {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -324,101 +338,87 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
getMessage(msg) { //wss 回显数据
|
getMessage(msg) { //wss 回显数据
|
||||||
// console.log(this.shopList.productInfo)
|
|
||||||
// console.log(msg.data)
|
|
||||||
// const sumValuesByKey = (arr, key) => {
|
|
||||||
// return arr.reduce((accumulator, current) => {
|
|
||||||
// const existing = accumulator.find(item => item[key] === current[key]);
|
|
||||||
// if (existing) {
|
|
||||||
// existing.number += current.number;
|
|
||||||
// } else {
|
|
||||||
// accumulator.push({
|
|
||||||
// ...current
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// return accumulator;
|
|
||||||
// }, []);
|
|
||||||
// };
|
|
||||||
// const result = sumValuesByKey(msg.data, 'productId');
|
|
||||||
// this.shopList.productInfo.forEach((item, index) => {
|
|
||||||
// if (item.id == result.categoryId) {
|
|
||||||
// item.products.forEach((item1,index1) => {
|
|
||||||
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
if (msg == 1) { // 网络在连接
|
if (msg == 1) { // 网络在连接
|
||||||
this.fixedtrue = true
|
this.fixedtrue = true
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
this.fixedtrue = false
|
this.fixedtrue = false
|
||||||
if (msg.status != 'success') {
|
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
|
||||||
uni.showToast({
|
return false
|
||||||
title: msg.msg,
|
}
|
||||||
icon: "none",
|
try {
|
||||||
})
|
if (msg.status != 'success') {
|
||||||
if (msg.msg == '桌码不存在') { //卓码不存在直接退出
|
uni.showToast({
|
||||||
this.socketTicket.Close()
|
title: msg.msg,
|
||||||
uni.$off('message')
|
icon: "none",
|
||||||
uni.navigateBack()
|
})
|
||||||
return false;
|
if (msg.msg == '桌码不存在') { //卓码不存在直接退出
|
||||||
}
|
this.socketTicket.Close()
|
||||||
} else {
|
uni.$off('message')
|
||||||
switch (msg.type) {
|
uni.navigateBack()
|
||||||
case 'sku': // sku 数量 查询这个商品的价格和数量
|
return false;
|
||||||
this.$set(this, 'amountcartNumber', msg.amount)
|
}
|
||||||
this.productqueryProduct() //list 数据
|
} else {
|
||||||
break;
|
switch (msg.type) {
|
||||||
case 'clearCart':
|
case 'sku': // sku 数量 查询这个商品的价格和数量
|
||||||
this.skuidname = []
|
this.$set(this, 'amountcartNumber', msg.amount)
|
||||||
this.showCart = false
|
this.productqueryProduct() //list 数据
|
||||||
setTimeout(() => {
|
break;
|
||||||
uni.showToast({
|
case 'clearCart':
|
||||||
title: msg.msg,
|
this.cartLists = msg
|
||||||
icon: "none",
|
this.productqueryProduct() //list 数据
|
||||||
})
|
this.skuidname = []
|
||||||
}, 500)
|
this.showCart = false
|
||||||
this.cartLists = msg
|
setTimeout(() => {
|
||||||
this.productqueryProduct() //list 数据
|
uni.showToast({
|
||||||
break;
|
title: msg.msg,
|
||||||
case 'order':
|
icon: "none",
|
||||||
console.log('clearCart')
|
})
|
||||||
this.skuidname = []
|
}, 500)
|
||||||
this.showCart = false
|
break;
|
||||||
this.cartLists = msg
|
case 'order':
|
||||||
this.productqueryProduct() //list 数据
|
this.skuidname = []
|
||||||
break;
|
this.showCart = false
|
||||||
case 'createOrder': //去结算
|
this.cartLists = msg
|
||||||
let item = JSON.stringify(msg.data)
|
this.productqueryProduct() //list 数据
|
||||||
uni.redirectTo({
|
break;
|
||||||
url: '/pages/order_detail/order_detail?tablelist=' + item
|
case 'addCart': //初始化add
|
||||||
});
|
this.cartLists = msg
|
||||||
break;
|
this.productqueryProduct() //list 数据
|
||||||
case 'queryCart': //待提交
|
break;
|
||||||
uni.redirectTo({
|
case 'addcart':
|
||||||
url: '/pages/order_detail/order_detail?tableId=' + JSON.stringify(msg.data) +
|
this.cartLists = msg
|
||||||
'&amount=' + msg.amount
|
console.log(msg, 1111)
|
||||||
});
|
this.productqueryProduct() //list 数据
|
||||||
break;
|
try {
|
||||||
case 'addcart':
|
if (msg.data.length != 0) {
|
||||||
this.cartLists = msg
|
let nums = 0
|
||||||
if (msg.data.length != 0) {
|
msg.data.forEach((item, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||||
let nums = 0
|
if (item.skuId == this.skuidsearch) {
|
||||||
msg.data.forEach((item, index, arr) => { //初始化skuidname的数据 选择第一个
|
nums = item.number
|
||||||
if (item.skuId == this.skuidsearch) {
|
}
|
||||||
nums = item.number
|
})
|
||||||
|
this.$set(this, 'amountcartNumber', nums)
|
||||||
|
} else {
|
||||||
|
this.$set(this, 'amountcartNumber', 0)
|
||||||
}
|
}
|
||||||
})
|
} catch (e) {
|
||||||
this.$set(this, 'amountcartNumber', nums)
|
//TODO handle the exception
|
||||||
} else {
|
}
|
||||||
this.$set(this, 'amountcartNumber', 0)
|
try {
|
||||||
}
|
this.barrageavatar = msg.reqData.headImg
|
||||||
this.productqueryProduct() //list 数据
|
/*插入一条弹幕*/
|
||||||
break;
|
this.$refs.lBarrage.add(
|
||||||
default:
|
`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
|
||||||
this.cartLists = msg
|
);
|
||||||
|
} catch (e) {
|
||||||
|
//TODO handle the exception
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
} catch (e) {
|
||||||
|
//TODO handle the exception
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handlemessage() {
|
handlemessage() {
|
||||||
@@ -432,12 +432,8 @@
|
|||||||
},
|
},
|
||||||
// 数据处理
|
// 数据处理
|
||||||
socketSendMsg(data) {
|
socketSendMsg(data) {
|
||||||
console.log(data, 1111)
|
|
||||||
if (this.socketTicket) {
|
if (this.socketTicket) {
|
||||||
console.log(222)
|
|
||||||
this.socketTicket.send(data);
|
this.socketTicket.send(data);
|
||||||
} else {
|
|
||||||
console.log(333)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getQueryString(url, name) { //解码
|
getQueryString(url, name) { //解码
|
||||||
@@ -449,16 +445,15 @@
|
|||||||
return null;
|
return null;
|
||||||
},
|
},
|
||||||
async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号 b是判断单规格多规格
|
async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号 b是判断单规格多规格
|
||||||
console.log(item, index, index1, a, b)
|
|
||||||
if (b == '单规格') { //没有规格为空
|
if (b == '单规格') { //没有规格为空
|
||||||
this.skuidname = []
|
this.skuidname = []
|
||||||
}
|
}
|
||||||
this.hodgepodge(item, 1, a) //获取skuid /1添加购物车
|
this.hodgepodge(item, 1, a) //获取skuid /1添加购物车
|
||||||
},
|
},
|
||||||
async cartListadd(item, index, a) {
|
async cartListadd(item, index, a) { //购物车加减
|
||||||
console.log(item, index, a)
|
|
||||||
try {
|
try {
|
||||||
const data = { //定义socket数据传参
|
const data = { //定义socket数据传参
|
||||||
|
"name": item.name,
|
||||||
"skuId": item.skuId,
|
"skuId": item.skuId,
|
||||||
"num": a == '-' ? -1 : 1, //skuId
|
"num": a == '-' ? -1 : 1, //skuId
|
||||||
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
|
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
|
||||||
@@ -466,6 +461,7 @@
|
|||||||
"shopId": uni.cache.get('shopUser'),
|
"shopId": uni.cache.get('shopUser'),
|
||||||
"userId": uni.cache.get('userInfo').id
|
"userId": uni.cache.get('userInfo').id
|
||||||
};
|
};
|
||||||
|
this.datasocket = data
|
||||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
//TODO handle the exception
|
//TODO handle the exception
|
||||||
@@ -519,8 +515,6 @@
|
|||||||
this.hodgepodge(item, 2)
|
this.hodgepodge(item, 2)
|
||||||
},
|
},
|
||||||
async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存 数量 价格等
|
async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存 数量 价格等
|
||||||
console.log(11111)
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let res = await this.api.productqueryProductSku({
|
let res = await this.api.productqueryProductSku({
|
||||||
shopId: uni.cache.get('shopUser'),
|
shopId: uni.cache.get('shopUser'),
|
||||||
@@ -538,6 +532,9 @@
|
|||||||
let data = null
|
let data = null
|
||||||
if (a == 1) { //1添加购物车 2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
|
if (a == 1) { //1添加购物车 2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
|
||||||
data = { //定义socket数据传参
|
data = { //定义socket数据传参
|
||||||
|
"nickName": this.userInfo.nickName,
|
||||||
|
"barrageavatar": this.userInfo.headImg,
|
||||||
|
'name': item.name,
|
||||||
"skuId": res.data.id,
|
"skuId": res.data.id,
|
||||||
"num": c == '-' ? -1 : 1, //数量
|
"num": c == '-' ? -1 : 1, //数量
|
||||||
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||||
@@ -547,6 +544,7 @@
|
|||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
data = { //查询这个商品的价格
|
data = { //查询这个商品的价格
|
||||||
|
"name": item.name,
|
||||||
"skuId": res.data.id,
|
"skuId": res.data.id,
|
||||||
"num": '', //数量
|
"num": '', //数量
|
||||||
"type": "sku", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
"type": "sku", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||||
@@ -556,23 +554,35 @@
|
|||||||
};
|
};
|
||||||
this.showShopsku = true //打开弹框
|
this.showShopsku = true //打开弹框
|
||||||
}
|
}
|
||||||
|
this.datasocket = data
|
||||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||||
}
|
}
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
},
|
},
|
||||||
orderdetail() { // 直接生成订单
|
orderdetail() { // 直接生成订单
|
||||||
let data = {
|
if (this.cartLists.data.length == 0) {
|
||||||
"skuId": '',
|
uni.showToast({
|
||||||
"num": '', //数量
|
title: '请先添加商品',
|
||||||
"type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
icon: 'none'
|
||||||
"couponsId": '', //优惠券ID,
|
})
|
||||||
"isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
|
return false
|
||||||
"isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
|
|
||||||
"productId": '', //商品id
|
|
||||||
"shopId": uni.cache.get('shopUser'),
|
|
||||||
"userId": uni.cache.get('userInfo').id,
|
|
||||||
}
|
}
|
||||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
uni.navigateTo({
|
||||||
|
url: '/pages/order_detail/indexs?tableId=' + JSON.stringify(this.cartLists)
|
||||||
|
});
|
||||||
|
// let data = {
|
||||||
|
// "skuId": '',
|
||||||
|
// "num": '', //数量
|
||||||
|
// "type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||||
|
// "couponsId": '', //优惠券ID,
|
||||||
|
// "isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
|
||||||
|
// "isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
|
||||||
|
// "productId": '', //商品id
|
||||||
|
// "shopId": uni.cache.get('shopUser'),
|
||||||
|
// "userId": uni.cache.get('userInfo').id,
|
||||||
|
// }
|
||||||
|
// this.datasocket = data
|
||||||
|
// uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||||
},
|
},
|
||||||
async cartclear() { //清空购物车
|
async cartclear() { //清空购物车
|
||||||
try {
|
try {
|
||||||
@@ -584,11 +594,11 @@
|
|||||||
"shopId": uni.cache.get('shopUser'),
|
"shopId": uni.cache.get('shopUser'),
|
||||||
"userId": uni.cache.get('userInfo').id
|
"userId": uni.cache.get('userInfo').id
|
||||||
};
|
};
|
||||||
|
this.datasocket = data
|
||||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
//TODO handle the exception
|
//TODO handle the exception
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
// 导航栏点击
|
// 导航栏点击
|
||||||
navClickHandle(t) {
|
navClickHandle(t) {
|
||||||
@@ -608,6 +618,12 @@
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
//打电话
|
||||||
|
makePhoneCall(phone) {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: phone //仅为示例
|
||||||
|
});
|
||||||
|
},
|
||||||
// 点击菜单商品滚动到指定为止
|
// 点击菜单商品滚动到指定为止
|
||||||
titleClickHandle(id) {
|
titleClickHandle(id) {
|
||||||
uni.createSelectorQuery()
|
uni.createSelectorQuery()
|
||||||
@@ -657,7 +673,7 @@
|
|||||||
.exec();
|
.exec();
|
||||||
}
|
}
|
||||||
this.titleTopNums = topNums;
|
this.titleTopNums = topNums;
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -687,7 +703,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-right: $paddingSize;
|
// margin-right: $paddingSize;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -943,12 +959,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
position: relative;
|
||||||
padding: 6upx 10upx;
|
padding: 6upx 10upx;
|
||||||
background-color: $color-priamry;
|
background-color: $color-priamry;
|
||||||
border-radius: 12upx;
|
border-radius: 12upx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -10px;
|
||||||
|
top: -10px;
|
||||||
|
right: -10px;
|
||||||
|
bottom: -10px;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1153,18 +1180,111 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
position: relative;
|
||||||
padding: 16upx 20upx;
|
padding: 16upx 20upx;
|
||||||
background-color: $color-priamry;
|
background-color: $color-priamry;
|
||||||
border-radius: 12upx;
|
border-radius: 12upx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -10px;
|
||||||
|
top: -10px;
|
||||||
|
right: -10px;
|
||||||
|
bottom: -10px;
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.classorderdetailshow {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.orderdetailuicon {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rpx;
|
||||||
|
left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payType {
|
||||||
|
padding: 32rpx 34rpx;
|
||||||
|
margin-top: 48rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
>view:first-child {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
>view:last-child {
|
||||||
|
margin-top: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dfs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixedview {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.flex-between {
|
||||||
|
width: 100%;
|
||||||
|
padding: 24rpx 28rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
.fixedview_one {
|
||||||
|
.fixedview_oneone {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixedview_onetow {
|
||||||
|
font-size: 44rpx;
|
||||||
|
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #F45C4C;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixedview_onethere {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixedview_tow {
|
||||||
|
background: red;
|
||||||
|
border-radius: 34rpx;
|
||||||
|
padding: 10rpx 44rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFang SC-Bold, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.shop-info-wrap {
|
.shop-info-wrap {
|
||||||
.info-wrap {
|
.info-wrap {
|
||||||
padding: $paddingSize * 2 0;
|
padding: $paddingSize * 2 0;
|
||||||
|
|||||||
@@ -75,6 +75,9 @@
|
|||||||
<view class="name">
|
<view class="name">
|
||||||
{{ item1.name }}
|
{{ item1.name }}
|
||||||
</view>
|
</view>
|
||||||
|
<view class="namess">
|
||||||
|
{{ item1.suit }}起售
|
||||||
|
</view>
|
||||||
<view class="price-wrap">
|
<view class="price-wrap">
|
||||||
<view class="price">
|
<view class="price">
|
||||||
<text class="i">￥</text>
|
<text class="i">￥</text>
|
||||||
@@ -104,7 +107,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="cart-wrap">
|
<view class="cart-wrap" v-if="cartLists.data.length != 0">
|
||||||
<view class="cart-content">
|
<view class="cart-content">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
|
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
|
||||||
@@ -885,6 +888,13 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.namess {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
color: #6b6b6b;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
.select-sku-wrap {
|
.select-sku-wrap {
|
||||||
.t {
|
.t {
|
||||||
color: #999;
|
color: #999;
|
||||||
@@ -893,7 +903,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.price-wrap {
|
.price-wrap {
|
||||||
padding-top: $paddingSize;
|
margin-top: 16rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|||||||
@@ -91,6 +91,8 @@ const store = new Vuex.Store({
|
|||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
|
Vue.prototype.windowWidth = e.windowWidth;
|
||||||
|
Vue.prototype.windowHeight = e.windowHeight;
|
||||||
statusBar = e.statusBarHeight
|
statusBar = e.statusBarHeight
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const custom = wx.getMenuButtonBoundingClientRect()
|
const custom = wx.getMenuButtonBoundingClientRect()
|
||||||
|
|||||||
@@ -95,7 +95,7 @@
|
|||||||
|
|
||||||
.u-notice-bar {
|
.u-notice-bar {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 9px 12px;
|
// padding: 9px 12px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
class="u-notice"
|
class="u-notice"
|
||||||
@tap="clickHandler"
|
@tap="clickHandler"
|
||||||
>
|
>
|
||||||
<slot name="icon">
|
<!-- <slot name="icon">
|
||||||
<view
|
<view
|
||||||
class="u-notice__left-icon"
|
class="u-notice__left-icon"
|
||||||
v-if="icon"
|
v-if="icon"
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
size="19"
|
size="19"
|
||||||
></u-icon>
|
></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</slot>
|
</slot> -->
|
||||||
<view
|
<view
|
||||||
class="u-notice__content"
|
class="u-notice__content"
|
||||||
ref="u-notice__content"
|
ref="u-notice__content"
|
||||||
|
|||||||
Reference in New Issue
Block a user