1
This commit is contained in:
魏啾
@@ -56,17 +56,17 @@
|
||||
methods: {
|
||||
scanCodehandle(i) {
|
||||
if (i == 0) {
|
||||
uni.pro.navigateTo('order_food/goodsList_scroll')
|
||||
// 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')
|
||||
// }
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
uni.pro.navigateTo('order_food/goodsList_scroll')
|
||||
// uni.pro.navigateTo('order_food/order_food')
|
||||
}
|
||||
|
||||
// }
|
||||
// })
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (this.usershopUserinfo.isVip == 0) {
|
||||
// 跳转到开通页面
|
||||
|
||||
957
pages/order/confirm_order.vue
Normal file
957
pages/order/confirm_order.vue
Normal file
@@ -0,0 +1,957 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat class="navbar" :opacity='opacitys' :backColor="'#E8AD7B'" :title='toplist.name' :titleshow='true'></navseat>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #E8AD7B;position: fixed;top: 0;width: 100%;z-index: 9'}"></view>
|
||||
<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #E8AD7B;'}"></view>
|
||||
<!-- #endif -->
|
||||
<!-- 头部内容 -->
|
||||
<view class="head">
|
||||
<view class="head_bg"></view>
|
||||
<view class="tips">
|
||||
<image class="informIcon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/informIcon.png" mode="widthFix"/>
|
||||
<text class="informText">温馨提示：请适量点餐，避免浪费</text>
|
||||
</view>
|
||||
<!-- <view class="tabBox"> -->
|
||||
<!-- <view class="tab">
|
||||
<view :class="is_type==(index+1)?'tab_item'+is_type+' tab_item active ':'tab_item'" v-for="(item,index) in is_typeList" :key="index" @click="tabClick(index+1)">
|
||||
<view></view>
|
||||
<image class="icon" :src="is_type==(index+1)?item.url_active:item.url" mode="aspectFill"/>
|
||||
<text class="title" :class="{active:is_type==(index+1)}">{{item.title}}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 送餐到桌 -->
|
||||
<!-- <view class="table" v-if="is_type==1">
|
||||
<view>
|
||||
<text class="title">桌台</text>
|
||||
</view>
|
||||
<view class="value"> {{ tableValue }} </view>
|
||||
</view> -->
|
||||
<!-- 打包外带 -->
|
||||
<!-- <view class="pack" v-else>
|
||||
<view class="top">
|
||||
<text class="title">后海&双屿</text>
|
||||
<text class="address">浐灞生态区灞河东路东三环至欧亚大道段商业用房09号</text>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<view class="lable">取餐时间</view><view class="text">立即取餐</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
|
||||
<view class="lable">预留电话</view><view class="getPhone text"><u-input class="inputVal" v-model="order.phone" input-align="right" placeholder="请输入预留电话以便联系您" ></u-input><text class="getBtn">获取手机号</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
<!-- 订单内容区域 -->
|
||||
<view class="content_box">
|
||||
<view class="content">
|
||||
<view class="title"> {{ listinfo.name }} </view>
|
||||
<view class="list_item" v-for="(item,index) in listinfo.details" :key="item.id">
|
||||
<view class="left">
|
||||
<image class="img" :src="item.coverImg" mode="aspectFill"/>
|
||||
<view class="center">
|
||||
<text class="center_title"> {{item.name}} </text>
|
||||
<text class="type"> {{ item.skuName}} </text>
|
||||
<text class="num"> X{{ item.totalNumber}} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price"> ￥{{ item.totalAmount}} </view>
|
||||
</view>
|
||||
<!-- <view class="favorable" v-for="(item,index) in favorable" :key="index">
|
||||
<view class="favorable_left">
|
||||
<image class="icon" :src="item.url" mode="aspectFill"/>
|
||||
<text class="name"> {{ item.name }} </text>
|
||||
</view>
|
||||
<view class="favorable_right"><text class="favorable_right_text">暂无可用优惠券</text> <u-icon name="arrow-right" color="#575B66" size="28"></u-icon></view>
|
||||
</view> -->
|
||||
<view class="totalPrice">
|
||||
<text style="margin-bottom: 5rpx;">小计￥</text>
|
||||
<text class="totalPriceNum"> {{listinfo.payAmount}} </text>
|
||||
</view>
|
||||
<!-- <u-divider color="#fa3534" half-width="200" border-color="#6d6d6d">姑苏城外寒山寺</u-divider> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单备注 -->
|
||||
<view class="remark">
|
||||
<view class="remark_bg">
|
||||
<view class="remark_title">订单备注</view>
|
||||
<u-textarea class="remark_value" placeholder="请填写口味、偏好等要求" :type="'textarea'" v-model="remark" :border="false" :clearable="true"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="paymentMethod">
|
||||
<view class="paymentMethod_content">
|
||||
<view class="paymentMethod_title">支付方式</view>
|
||||
<u-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChange" :size="28"
|
||||
placement="column">
|
||||
<block v-for="(item,index) in paymentMethodList" :key="index">
|
||||
<view class="method_list" @click="groupChange(index+1)">
|
||||
<view class="method_list_top">
|
||||
<view class="method_list_top_left">
|
||||
<image class="icon" :src="item.url" mode="widthFix"/>
|
||||
<text class="name"> {{ item.name }} </text>
|
||||
</view>
|
||||
<u-radio activeColor="#E8AD7B" icon-size="36" size="36" :name="index+1">
|
||||
</u-radio>
|
||||
</view>
|
||||
<view class="method_list_bom" v-if="item.type == 1">
|
||||
<text class="balance">会员卡余额 ￥{{amountVIP?amountVIP.amount:0}}</text>
|
||||
<text class="topUpNow" @click="goRecharge">去充值</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
|
||||
</u-radio-group>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="bottom_left">
|
||||
<text style="margin-bottom: 5rpx;">实付金额</text>
|
||||
<text class="totalAmount">￥{{ listinfo.payAmount }} </text>
|
||||
</view>
|
||||
<view class="paymentBtnText" @tap="$u.debounce(showpopupclickdd, 500)" v-if="listinfoid && listinfo"> {{ paymentBtnText }} </view>
|
||||
<view class="paymentBtnText" @tap="$u.debounce(orderdetail, 500)" v-else> {{ paymentBtnText }} </view>
|
||||
</view>
|
||||
|
||||
<!-- 支付密码 -->
|
||||
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
import payPassword from '@/components/payPassword.vue'
|
||||
export default {
|
||||
components: {
|
||||
payPassword,
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
opacitys: false,
|
||||
toplist: {
|
||||
name: '确认订单'
|
||||
},
|
||||
is_type: 1,
|
||||
is_typeList: [
|
||||
{ title: "送餐到桌", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1_active.png"},
|
||||
{ title: "打包外带", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2_active.png"},
|
||||
],
|
||||
orderList: [
|
||||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||||
{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
|
||||
],
|
||||
favorable: [
|
||||
{ name: "优惠券", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
|
||||
{ name: "团购优惠", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
|
||||
],
|
||||
paymentMethodList:[
|
||||
{ name: "会员卡支付", type: "1", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png"},
|
||||
{ name: "微信支付", type: "2", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png"},
|
||||
],
|
||||
order: {
|
||||
phone: "",
|
||||
},
|
||||
cartLists: [],
|
||||
listinfo: {
|
||||
details: [],
|
||||
payAmount: 0,
|
||||
name: "",
|
||||
},
|
||||
tableValue: "A203", // 桌台号
|
||||
totalPrice: 0, // 小计金额
|
||||
totalAmount: 20, // 支付金额
|
||||
remark: "", // 备注
|
||||
radiovalue: 1, // 支付方式
|
||||
ispws: false, // 输入支付密码
|
||||
amountVIP: null, // 会员信息
|
||||
listinfoid: null,
|
||||
paymentBtnText: "会员卡支付",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
onUnload() {
|
||||
console.log(this)
|
||||
this.socketTicket.Close()
|
||||
uni.$off('getMessage')
|
||||
this.ispws = false
|
||||
},
|
||||
onHide() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
},
|
||||
onLoad(e) {
|
||||
this.listinfo.name = JSON.parse(e.storeInfo).shopName;
|
||||
},
|
||||
onShow() {
|
||||
uni.$on('message', this.getMessage)
|
||||
if (this.listinfoid) {
|
||||
this.orderorderInfo()
|
||||
} else {
|
||||
this.handlemessage()
|
||||
}
|
||||
this.getAount()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 消息监听
|
||||
* @param {Object} msg
|
||||
*/
|
||||
getMessage(msg) {
|
||||
if (msg == 1) { // 网络在连接
|
||||
return false
|
||||
}
|
||||
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
|
||||
return false
|
||||
}
|
||||
if (msg.status != 'success') {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
return false;
|
||||
|
||||
} else {
|
||||
switch (msg.type) {
|
||||
case 'createOrder':
|
||||
this.listinfoid = msg.data.id
|
||||
uni.$off('getMessage')
|
||||
this.orderorderInfo(1)
|
||||
break;
|
||||
case 'addCart':
|
||||
console.log("商品列表===",msg)
|
||||
this.listinfo.details = msg.data;
|
||||
this.listinfo.payAmount = msg.amount;
|
||||
|
||||
break;
|
||||
case 'order':
|
||||
uni.navigateBack()
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '您的小伙伴已下单了哦~~'
|
||||
})
|
||||
}, 1000)
|
||||
break;
|
||||
case 'addcart':
|
||||
/*插入一条弹幕*/
|
||||
this.$refs.lBarrage.add(
|
||||
`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
|
||||
);
|
||||
break;
|
||||
}
|
||||
this.$set(this, 'cartLists', msg)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听送餐/打包切换
|
||||
* @param {Object} val
|
||||
*/
|
||||
tabClick ( val ) {
|
||||
this.is_type = val;
|
||||
console.log(this.is_type)
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听支付方式切换
|
||||
* @param {Object} n
|
||||
*/
|
||||
groupChange(n) {
|
||||
this.radiovalue = n;
|
||||
this.paymentBtnText = n==1?'会员卡支付':'微信支付'
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化socket
|
||||
*/
|
||||
handlemessage() {
|
||||
//调用前先判断是否有socket正在进行 先关闭后链接
|
||||
this.socketTicket ? this.socketTicket.Close() : null
|
||||
this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
|
||||
tableId: uni.cache.get('tableCode'),
|
||||
shopId: uni.cache.get('shopUser'),
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
"type": "connect",
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 数据处理
|
||||
* @param {Object} data
|
||||
*/
|
||||
socketSendMsg(data) {
|
||||
if (this.socketTicket) {
|
||||
this.socketTicket.send(data);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取会员信息
|
||||
*/
|
||||
async getAount() {
|
||||
let res = await this.api.shopUserInfo({
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
console.log("会员信息===",res)
|
||||
this.amountVIP = res.data
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询订单信息
|
||||
* @param {Object} i
|
||||
*/
|
||||
async orderorderInfo(i) {
|
||||
console.log(this.listinfo)
|
||||
let res = await this.api.orderorderInfo({
|
||||
orderId: this.listinfoid
|
||||
})
|
||||
if (res.code == 0) {
|
||||
console.log(res)
|
||||
// this.listinfo = res.data
|
||||
if (i == 1) { //请求完了详情在去调支付
|
||||
this.showpopupclickdd()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 去充值
|
||||
*/
|
||||
goRecharge() {
|
||||
// 判断是否绑定手机,只有下单时候有,会员列表肯定有
|
||||
// console.log(this.amountVIP.isVip, '调试1')
|
||||
if (this.amountVIP.isVip == 0) {
|
||||
// 跳转到开通页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/member/activatedmemberone?shopId=' + uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('/pages/member/index', {
|
||||
shopId: uni.cache.get('shopUser')
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生成订单
|
||||
*/
|
||||
orderdetail() {
|
||||
console.log(this.radiovalue)
|
||||
let data = {
|
||||
"skuId": '',
|
||||
"num": '', //数量
|
||||
"type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||
"remark": this.remark,
|
||||
"couponsId": '', //优惠券ID,
|
||||
"isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
|
||||
"isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
|
||||
"productId": '', //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
}
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
},
|
||||
|
||||
/**
|
||||
* 去支付
|
||||
*/
|
||||
showpopupclickdd() {
|
||||
console.log(this.radiovalue)
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// radiovalue为2是微信支付
|
||||
if (this.radiovalue == 2) {
|
||||
this.showpopupclickdds() //微信支付
|
||||
} else {
|
||||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||||
// console.log(isPwd,'是否设置了支付密码')
|
||||
if (uni.cache.get('userInfo').isPwd == 0) {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
this.ispws = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.payPwd.onPayUp();
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 微信支付
|
||||
*/
|
||||
async showpopupclickdds() {
|
||||
console.log(this.listinfoid)
|
||||
let res = await this.api.payorderPay({
|
||||
orderId: this.listinfoid
|
||||
}) //判断是否支付成功
|
||||
if (res.code == 0) {
|
||||
|
||||
// #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) => {
|
||||
let _this = this
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
// uni.cache.set('shopUser', '') //删除shopUser
|
||||
_this.paymodfiyOrderInfo()
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + _this
|
||||
.listinfoid
|
||||
});
|
||||
},
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 支付完成后请求
|
||||
*/
|
||||
async paymodfiyOrderInfo() {
|
||||
let res = await this.api.paymodfiyOrderInfo({
|
||||
orderId: this.listinfoid,
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 余额支付
|
||||
* @param {Object} pwd
|
||||
*/
|
||||
async accountPayevent(pwd) {
|
||||
this.ispws = false
|
||||
let res = await this.api.accountPay({
|
||||
orderId: this.listinfoid,
|
||||
memberId: this.amountVIP.id,
|
||||
pwd: pwd
|
||||
})
|
||||
if (res.code == 0) {
|
||||
// data ->1 支付成功
|
||||
// ->2 余额不足
|
||||
// ->3 未设置支付密码，
|
||||
// ->4 不是会员，
|
||||
if (res.data == 1) {
|
||||
this.showToastUppop('支付成功')
|
||||
let _this = this
|
||||
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + _this
|
||||
.listinfoid
|
||||
});
|
||||
},
|
||||
})
|
||||
|
||||
} else if (res.data == 2) {
|
||||
this.showToastUppop('余额不足')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
} else if (res.data == 3) {
|
||||
this.showToastUppop('未设置支付密码')
|
||||
setTimeout(() => {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
}, 1500)
|
||||
|
||||
} else if (res.data == 4) {
|
||||
this.showToastUppop('非会员请充值')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
showToastUppop(title) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title,
|
||||
success: () => {
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.head{
|
||||
width: 100%;
|
||||
padding: $uni-spacing-row-base;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.head_bg{
|
||||
height: 456rpx;
|
||||
background: linear-gradient( 180deg, #E8AD7B 0%, #F5F5F5 100%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.tips{
|
||||
width: 100%;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
background: #FFF8E8;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
padding: 0 16rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.informIcon{
|
||||
width: 26.7rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.informText{
|
||||
font-size: $uni-font-size-base;
|
||||
color: #FF803D;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.tabBox{
|
||||
width: 100%;
|
||||
margin-top: 52rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.tab{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 22rpx;
|
||||
background-color: $uni-bg-color;
|
||||
.tab_item{
|
||||
width: 50%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FEFBF8;
|
||||
border-radius: 22rpx 22rpx 0 0;
|
||||
position: relative;
|
||||
.title{
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.title.active{
|
||||
color: #E8AD7B;
|
||||
}
|
||||
.icon{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 16rpx;
|
||||
position:relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.tab_item.active{
|
||||
background-color: #fff;
|
||||
}
|
||||
// .tab_item.active:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: -4px;
|
||||
// width: 40px;
|
||||
// height: 26px;
|
||||
// background: orange;
|
||||
// }
|
||||
.tab_item.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
transform: skewX(0deg);
|
||||
}
|
||||
.tab_item1.active:before{
|
||||
border-radius: 22rpx 40rpx 0 0;
|
||||
}
|
||||
.tab_item2.active:before{
|
||||
border-radius: 40rpx 22rpx 0 0;
|
||||
}
|
||||
}
|
||||
.table{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
height: 90rpx;
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 0 0 22rpx 22rpx;
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #E8AD7B;
|
||||
}
|
||||
.value{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.pack{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 0 0 22rpx 22rpx;
|
||||
.top{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 8rpx;
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.address{
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item{
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
.lable{
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
.getPhone{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.u-input{
|
||||
width: 340rpx;
|
||||
border: none;
|
||||
input{
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
|
||||
}
|
||||
.input-placeholder{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text,.getBtn{
|
||||
color: #E8AD7B;
|
||||
}
|
||||
.getBtn{
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid #E8AD7B;
|
||||
padding: 8rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_box{
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.content{
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 32rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.list_item{
|
||||
display: flex;
|
||||
margin-bottom: 32rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
.left{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.img{
|
||||
width: 142rpx;
|
||||
height: 142rpx;
|
||||
margin-right: 34rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.center{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.center_title{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.type{
|
||||
margin: 12rpx 0 10rpx 0;
|
||||
}
|
||||
.type,.num{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.price{
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.favorable{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 32rpx;
|
||||
.favorable_left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.name{
|
||||
font-size: 28rpx;
|
||||
font-weight: 400rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.favorable_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.favorable_right_text{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 400rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.totalPrice{
|
||||
padding: 32rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #E5E5E5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
.totalPriceNum{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.remark{
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 30rpx;
|
||||
.remark_bg{
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 22rpx;
|
||||
padding: 32rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
.remark_title{
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.u-textarea{
|
||||
height: 148rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10rpx;
|
||||
padding: 32rpx 22rpx!important;
|
||||
box-sizing: border-box;
|
||||
textarea{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.paymentMethod{
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 30rpx;
|
||||
padding-bottom: 246rpx;
|
||||
.paymentMethod_content{
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 22rpx;
|
||||
padding:30rpx 0;
|
||||
box-sizing: border-box;
|
||||
.paymentMethod_title{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.method_list{
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
.method_list_top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.method_list_top_left{
|
||||
display: flex;
|
||||
.icon{
|
||||
width: 54rpx!important;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
.name{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.method_list_bom{
|
||||
display: flex;
|
||||
.balance{
|
||||
margin-right: 20rpx;
|
||||
margin-left: 70rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.topUpNow{
|
||||
color: #FF803D;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.method_list:nth-child(odd){
|
||||
border-bottom: 2rpx solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom{
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0,0,0,0.1);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 50rpx 82rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
.bottom_left{
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
align-items: flex-end;
|
||||
.totalAmount{
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
.paymentBtnText{
|
||||
width: 216rpx;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
background: #E8AD7B;
|
||||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -67,14 +67,20 @@
|
||||
<view class="shop-item" v-for="(item1,index1) in item.products" :key="item1.id">
|
||||
<view class="cover langcover" style="width:180rpx; height: 180rpx;"
|
||||
@click.stop="clickspecifications(item1,index,index1)">
|
||||
<c-image style="position: absolute;z-index:2;"
|
||||
<!-- <c-image style="position: absolute;z-index:2;"
|
||||
:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" width="180"
|
||||
height="180"></c-image>
|
||||
height="180"></c-image> -->
|
||||
<image style="position: absolute;z-index:2;width: 180rpx; height: 180rpx;"
|
||||
:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"
|
||||
:lazy-load='true'></image>
|
||||
</view>
|
||||
<view class="info" style="display: flex;flex-direction: column;justify-content: center;">
|
||||
<view class="name">
|
||||
{{ item1.name }}
|
||||
</view>
|
||||
<view class="namess" v-if="item1.suit>1">
|
||||
起售：{{ item1.suit }}
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
@@ -104,7 +110,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart-wrap">
|
||||
<view class="cart-wrap" v-if="cartListsdatashow">
|
||||
<view class="cart-content">
|
||||
<view class="left">
|
||||
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
|
||||
@@ -276,7 +282,8 @@
|
||||
datasocket: {}, //储存传参数据
|
||||
radiovalue: '1', //选择支付方式
|
||||
amountVIP: null, //余额
|
||||
barrageavatar: '' //弹幕头像
|
||||
barrageavatar: '', //弹幕头像
|
||||
cartListsdatashow: false //是否显示购物车
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
@@ -315,8 +322,37 @@
|
||||
this.fixedtrue = true
|
||||
},
|
||||
onShow() {
|
||||
uni.$on('message', this.getMessage)
|
||||
this.productqueryShopIdByTableCode() //获取shop User id
|
||||
if (!uni.cache.get('token')) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
try {
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async (infoRes) => {
|
||||
uni.cache.set('weixincode', data.code);
|
||||
let res = await this.api.userwxlogin({
|
||||
code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
rawData: infoRes.rawData
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('token', res.data.token);
|
||||
uni.cache.set('miniAppOpenId', res.data.userInfo
|
||||
.miniAppOpenId)
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.$on('message', this.getMessage)
|
||||
this.productqueryShopIdByTableCode() //获取shop User id
|
||||
}
|
||||
},
|
||||
fail: (err) => {}
|
||||
});
|
||||
} catch (e) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.$on('message', this.getMessage)
|
||||
this.productqueryShopIdByTableCode() //获取shop User id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEnd() { //回调弹幕
|
||||
@@ -330,7 +366,7 @@
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('shopUser', res.data)
|
||||
this.handlemessage() //监听websocket返回
|
||||
this.productqueryProduct() //list 数据
|
||||
// this.productqueryProduct() //list 数据
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.pro.switchTab('index/index')
|
||||
@@ -416,6 +452,8 @@
|
||||
}
|
||||
break;
|
||||
}
|
||||
console.log(this.cartLists.data, 1111111)
|
||||
this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
@@ -567,6 +605,10 @@
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopList.storeInfo)
|
||||
});
|
||||
return;
|
||||
uni.navigateTo({
|
||||
url: '/pages/order_detail/indexs?tableId=' + JSON.stringify(this.cartLists)
|
||||
});
|
||||
@@ -885,6 +927,13 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.namess {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24upx;
|
||||
font-weight: 300;
|
||||
color: #a5a5a5;
|
||||
}
|
||||
|
||||
.select-sku-wrap {
|
||||
.t {
|
||||
color: #999;
|
||||
@@ -893,7 +942,7 @@
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
padding-top: $paddingSize;
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -48,7 +48,7 @@
|
||||
<view class="left"
|
||||
:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
|
||||
<view class="item" v-for="(item, index) in shopList.productInfo" :key="item.id"
|
||||
:class="{ active: titleTopNumIndex == index }" @click="titleClickHandle(item.id,index)">
|
||||
:class="{ active: titleTopNumIndex == index }" @click="titleClickHandle(item.id)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -267,8 +267,6 @@
|
||||
showShopInfo: false,
|
||||
showShopsku: false,
|
||||
titleTopNumIndex: 0,
|
||||
titleTopNumIndexFalg: true,
|
||||
timer: null,
|
||||
titleTopNums: [],
|
||||
showCart: false,
|
||||
tableCode: '', //code，
|
||||
@@ -302,7 +300,6 @@
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
}
|
||||
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad(e) {
|
||||
@@ -564,7 +561,6 @@
|
||||
}
|
||||
return res
|
||||
})
|
||||
console.log(this.specifications.tagSnap)
|
||||
this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
this.skuidname.push(val.children[0])
|
||||
})
|
||||
@@ -633,6 +629,10 @@
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopList.storeInfo)
|
||||
});
|
||||
return;
|
||||
uni.navigateTo({
|
||||
url: '/pages/order_detail/indexs?tableId=' + JSON.stringify(this.cartLists)
|
||||
});
|
||||
@@ -691,9 +691,7 @@
|
||||
});
|
||||
},
|
||||
// 点击菜单商品滚动到指定为止
|
||||
titleClickHandle(id, index) {
|
||||
this.titleTopNumIndexFalg = false;
|
||||
this.titleTopNumIndex = index;
|
||||
titleClickHandle(id) {
|
||||
uni.createSelectorQuery()
|
||||
.select('#wrapper')
|
||||
.boundingClientRect((data) => {
|
||||
@@ -716,8 +714,7 @@
|
||||
},
|
||||
// 计算滚动到那个标题
|
||||
countScrollTitle: _.throttle(function(top) {
|
||||
|
||||
if (this.titleTopNums.length > 1 && this.titleTopNumIndexFalg) {
|
||||
if (this.titleTopNums.length > 1) {
|
||||
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
||||
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
||||
this.titleTopNumIndex = i;
|
||||
@@ -727,13 +724,6 @@
|
||||
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
||||
}
|
||||
}
|
||||
//这里必须要每次滚动前 清除一次
|
||||
clearTimeout(this.timer)
|
||||
// 如果停留则表示滚动结束 一旦空了1s就判定为滚动结束
|
||||
this.timer = setTimeout(() => {
|
||||
this.titleTopNumIndexFalg = true;
|
||||
// console.log('结束滚动')
|
||||
}, 1000)
|
||||
}, 100),
|
||||
// 统计每个标题到顶部的距离
|
||||
countTitleTopNum() {
|
||||
@@ -742,9 +732,9 @@
|
||||
uni.createSelectorQuery()
|
||||
.select(`#title${i.id}`)
|
||||
.boundingClientRect((res) => {
|
||||
topNums.push(res.top - this.menuInfo.top - this.menuInfo.height - this
|
||||
.paddingBtmSize * 8 -
|
||||
this.tabHeadHeight + 40);
|
||||
topNums.push(res.top + this.menuInfo.top + this.menuInfo.height + this
|
||||
.paddingBtmSize -
|
||||
this.tabHeadHeight - this.tabHeadHeight / 2);
|
||||
})
|
||||
.exec();
|
||||
}
|
||||
|
||||
765
pages/order_food/order_goods.vue
Normal file
765
pages/order_food/order_goods.vue
Normal file
@@ -0,0 +1,765 @@
|
||||
<template>
|
||||
<view id="wrapper">
|
||||
<view v-if="fixedtrue"
|
||||
style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
|
||||
<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
|
||||
<text style="margin-left10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
|
||||
<!-- <u-loadmore status="loading" fontSize="50" iconSize="30"/> -->
|
||||
</view>
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat class="navbar" :opacity='opacitys' :title='toplist.name' :titleshow='true'></navseat>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #FFFFFF;position: fixed;top: 0;width: 100%;z-index: 9'}"></view>
|
||||
<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #FFFFFF;'}"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- <view class="shop-cover" :style="{ height: `${menuInfo.top + menuInfo.height + paddingBtmSize * 8}px` }">
|
||||
<image class="img" :src="shopList.storeInfo.coverImg" mode="aspectFill"></image>
|
||||
</view> -->
|
||||
|
||||
<view class="list-container">
|
||||
|
||||
<view class="shopInfo">
|
||||
<image class="shopTitle" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/title.png" mode="widthFix"/>
|
||||
<view class="shopName">{{ shopList.storeInfo.shopName }}</view>
|
||||
<view class="shopDistance">{{ shopList.storeInfo.shopName }}</view>
|
||||
<view class="shopDetail flex-between">
|
||||
<text class="shopTime">营业时间：{{ shopList.storeInfo.shopName }}</text>
|
||||
<view class="flex-end">查看 <u-icon style="margin-left: 15rpx;" name="arrow-down" color="#575B66" size="28"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="signatureDish dishes">
|
||||
<view class="signatureDish_title"></view>
|
||||
<scroll-view scroll-x class="scroll-view">
|
||||
<view class="signatureDish_list">
|
||||
<view class="signatureDish_item" v-for="(item,index) in signatureDish_list" :key="index">
|
||||
<image class="signatureDish_img" :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" mode="aspectFill"/>
|
||||
<view class="signatureDish_name"> {{ item.name}}</view>
|
||||
<view class="signatureDish_sort"> {{ item.name}}</view>
|
||||
<view class="signatureDish_introduce"> {{ item.name}}</view>
|
||||
<view class="signatureDish_sell"> {{ item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</div>
|
||||
|
||||
<view class="tab-content">
|
||||
<view class="left-wrap">
|
||||
<view class="left"
|
||||
:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
|
||||
<view class="item" v-for="(item, index) in shopList.productInfo" :key="item.id"
|
||||
:class="{ active: titleTopNumIndex == index }" @click="titleClickHandle(item.id)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view class="item-wrap" v-for="(item,index) in shopList.productInfo" :key="item.id">
|
||||
<view class="title-wrap" :id="`title${item.id}`"></view>
|
||||
<view class="title"
|
||||
:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
|
||||
<!-- -->
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="" v-if="item.products.length == 0">
|
||||
空
|
||||
</view>
|
||||
<view class="shop-item" v-for="(item1,index1) in item.products" :key="item1.id">
|
||||
<view class="cover langcover" style="width:180rpx; height: 180rpx;"
|
||||
@click.stop="clickspecifications(item1,index,index1)">
|
||||
<c-image style="position: absolute;z-index:2;"
|
||||
:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" width="180"
|
||||
height="180"></c-image>
|
||||
</view>
|
||||
<view class="info" style="display: flex;flex-direction: column;justify-content: center;">
|
||||
<view class="name">
|
||||
{{ item1.name }}
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{ item1.lowPrice }}</text>
|
||||
<text class="i">起</text>
|
||||
</view>
|
||||
<view class="sku-wrap" v-if="item1.productSkuResult != null"
|
||||
@click.stop="clickspecifications(item1,index,index1)">
|
||||
<text class="t">选规格</text>
|
||||
<text class="dot num" v-if="item1.cartNumber != '0'">{{item1.cartNumber}}</text>
|
||||
</view>
|
||||
<view class="operation-wrap" v-else>
|
||||
<view class="btn" v-if="item1.cartNumber != '0'"
|
||||
@click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon :name="require('@/static/icon_sub.png')" size="36"></u-icon>
|
||||
</view>
|
||||
<text class="num">{{ item1.cartNumber }}</text>
|
||||
<view class="btn"
|
||||
@click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon :name="require('@/static/icon_add.png')" size="36"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart-wrap">
|
||||
<view class="cart-content">
|
||||
<view class="left">
|
||||
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
|
||||
mode="aspectFit" @click="showCart = !showCart">
|
||||
</image>
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{cartLists.amount||'0.00'}}</text>
|
||||
</view>
|
||||
<view class="btn" @tap="$u.debounce(orderdetail, 500)">
|
||||
<text class="t">提交订单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购物车 -->
|
||||
<u-popup :show="showCart" :round="20" :zIndex="98" :overlayStyle="{ zIndex: 98 }" @close="showCart = false">
|
||||
<view class="cart-list-wrap">
|
||||
<view class="cart-header">
|
||||
<view class="clear" @click="cartclear">
|
||||
<u-icon name="trash" color="#999"></u-icon>
|
||||
<text class="t">清空购物车</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="scroll-view">
|
||||
<view class="list-wrap">
|
||||
<view class="shop-item" v-for="(item,index) in cartLists.data" :key="item.id">
|
||||
<view class="cover">
|
||||
<c-image :src="item.coverImg" width="120" height="120"></c-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="select-sku-wrap">
|
||||
<text class="t">{{ item.skuName }}</text>
|
||||
</view>
|
||||
<view class="price-wrap" style="padding-top: 0;">
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{ item.salePrice }}</text>
|
||||
<text class="i">起</text>
|
||||
</view>
|
||||
<view class="operation-wrap">
|
||||
<view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')">
|
||||
<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
|
||||
</view>
|
||||
<text class="num" v-if="item.number">{{ item.number }}</text>
|
||||
<view class="btn" @click="cartListadd(item,index,'+')">
|
||||
<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 门店详情 -->
|
||||
<u-popup :show="showShopInfo" :round="20" @close="showShopInfo = false">
|
||||
<view class="shop-info-wrap">
|
||||
<view class="info-wrap">
|
||||
<image :src="shopList.storeInfo.coverImg" mode="aspectFill" class="img"></image>
|
||||
<text class="t">{{ shopList.storeInfo.shopName }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
<text class="t">{{ shopList.storeInfo.businessTime }}</text>
|
||||
</view>
|
||||
<view class="col" @click="makePhoneCall(shopList.storeInfo.phone)">
|
||||
<text class="t">{{ shopList.storeInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="col">
|
||||
<text class="t">{{ shopList.storeInfo.address }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="close" @click="showShopInfo = false">
|
||||
<text class="t">关闭</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<!-- 规格 -->
|
||||
<u-popup :show="showShopsku" :round="20" mode="bottom" @close="showShopsku = false"
|
||||
:safeAreaInsetBottom='false'>
|
||||
<view class="shop_sku">
|
||||
<view class="positionabsolute">
|
||||
<u-icon name="close-circle-fill" @click="showShopsku = false" color="#a3aaa3" size="60"></u-icon>
|
||||
</view>
|
||||
<image class="shop_skucimage" :src="specifications.coverImg" mode="widthFix"></image>
|
||||
<view class="shop_sku_name">
|
||||
{{specifications.name}}
|
||||
</view>
|
||||
<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index"
|
||||
v-if="specifications.tagSnap">
|
||||
<view class="shop_sku_box_name">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="shop_sku_box_item" v-for="(item1,index1) in item.children" :key="index1"
|
||||
@click="morloe(item1,index,index1,item)"
|
||||
:class=" item.start === index1 ?'shop_sku_box_item_selected':'' ">
|
||||
{{item1}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
|
||||
已选规格：<view class="shop_skuselectname">{{skuidname.toString()}}</view>
|
||||
</view>
|
||||
<view class="shop_bottom flex-between">
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{salePrice}}</text>
|
||||
<text class="i">起</text>
|
||||
</view>
|
||||
<view class="operation-wrap">
|
||||
<view class="btn"
|
||||
@click="cartadd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')">
|
||||
<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
|
||||
</view>
|
||||
<text class="num">{{amountcartNumber}}</text>
|
||||
<view class="btn"
|
||||
@click="cartadd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
|
||||
<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<l-barrage ref="lBarrage" @end="onEnd" :minTop='8' :maxTop='20' :avatar='barrageavatar'></l-barrage>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import webSocketUtils from '@/common/js/websocket.js';
|
||||
import orderdetail from '@/pages/order_detail/index';
|
||||
import lBarrage from '@/components/l-barrage/l-barrage.vue'
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
orderdetail,
|
||||
lBarrage,
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
opacitys: false,
|
||||
toplist: {
|
||||
name: ''
|
||||
},
|
||||
userInfo: uni.cache.get('userInfo'), //个人信息
|
||||
// #ifndef MP-WEIXIN
|
||||
menuInfo: uni.getSystemInfo(),
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||||
// #endif
|
||||
signatureDish_list: [],
|
||||
|
||||
|
||||
paddingBtmSize: 6,
|
||||
tabHeadHeight: 50,
|
||||
isFixed: false,
|
||||
shopList: {}, //数据类型
|
||||
active: 0,
|
||||
showShopInfo: false,
|
||||
showShopsku: false,
|
||||
titleTopNumIndex: 0,
|
||||
titleTopNums: [],
|
||||
showCart: false,
|
||||
tableCode: '', //code，
|
||||
specifications: {},
|
||||
skuidname: [],
|
||||
cartLists: {}, //购物车
|
||||
orderdetailcartLists: {}, //提交订单
|
||||
socketTicket: null,
|
||||
amountcartNumber: 0,
|
||||
skuidsearch: '', //
|
||||
salePrice: '', //钱数
|
||||
fixedtrue: true,
|
||||
datasocket: {}, //储存传参数据
|
||||
radiovalue: '1', //选择支付方式
|
||||
amountVIP: null, //余额
|
||||
barrageavatar: '' //弹幕头像
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
|
||||
this.isFixed = true;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
});
|
||||
} else {
|
||||
this.isFixed = false;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
}
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e.q) {
|
||||
this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
|
||||
uni.cache.set('tableCode', this.tableCode)
|
||||
}
|
||||
uni.cache.set('types', 'types');
|
||||
this.$nextTick(() => {
|
||||
this.countTitleTopNum(); //导航栏
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
},
|
||||
onHide() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
this.fixedtrue = true
|
||||
},
|
||||
onShow() {
|
||||
uni.$on('message', this.getMessage)
|
||||
this.productqueryShopIdByTableCode() //获取shop User id
|
||||
},
|
||||
methods: {
|
||||
onEnd() { //回调弹幕
|
||||
console.log('一波结束')
|
||||
},
|
||||
// 单独获取他的shopUserid
|
||||
async productqueryShopIdByTableCode() {
|
||||
let res = await this.api.productqueryShopIdByTableCode({
|
||||
code: uni.cache.get('tableCode')
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('shopUser', res.data)
|
||||
this.handlemessage() //监听websocket返回
|
||||
this.productqueryProduct() //list 数据
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.pro.switchTab('index/index')
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
getMessage(msg) { //wss 回显数据
|
||||
if (msg == 1) { // 网络在连接
|
||||
this.fixedtrue = true
|
||||
return false
|
||||
}
|
||||
this.fixedtrue = false
|
||||
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
|
||||
return false
|
||||
}
|
||||
try {
|
||||
if (msg.status != 'success') {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
if (msg.msg == '桌码不存在') { //卓码不存在直接退出
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
uni.navigateBack()
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
switch (msg.type) {
|
||||
case 'sku': // sku 数量 查询这个商品的价格和数量
|
||||
this.$set(this, 'amountcartNumber', msg.amount)
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'clearCart':
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
this.skuidname = []
|
||||
this.showCart = false
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
}, 500)
|
||||
break;
|
||||
case 'order':
|
||||
this.skuidname = []
|
||||
this.showCart = false
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'addCart': //初始化add
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'addcart':
|
||||
this.cartLists = msg
|
||||
console.log(msg, 1111)
|
||||
this.productqueryProduct() //list 数据
|
||||
try {
|
||||
if (msg.data.length != 0) {
|
||||
let nums = 0
|
||||
msg.data.forEach((item, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
if (item.skuId == this.skuidsearch) {
|
||||
nums = item.number
|
||||
}
|
||||
})
|
||||
this.$set(this, 'amountcartNumber', nums)
|
||||
} else {
|
||||
this.$set(this, 'amountcartNumber', 0)
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
try {
|
||||
this.barrageavatar = msg.reqData.headImg
|
||||
/*插入一条弹幕*/
|
||||
this.$refs.lBarrage.add(
|
||||
`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
|
||||
);
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
handlemessage() {
|
||||
this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
|
||||
this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
|
||||
tableId: uni.cache.get('tableCode'),
|
||||
shopId: uni.cache.get('shopUser'),
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
"type": "connect",
|
||||
})
|
||||
},
|
||||
// 数据处理
|
||||
socketSendMsg(data) {
|
||||
if (this.socketTicket) {
|
||||
this.socketTicket.send(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;
|
||||
},
|
||||
async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号 b是判断单规格多规格
|
||||
if (b == '单规格') { //没有规格为空
|
||||
this.skuidname = []
|
||||
}
|
||||
this.hodgepodge(item, 1, a) //获取skuid /1添加购物车
|
||||
},
|
||||
async cartListadd(item, index, a) { //购物车加减
|
||||
try {
|
||||
const data = { //定义socket数据传参
|
||||
"name": item.name,
|
||||
"skuId": item.skuId,
|
||||
"num": a == '-' ? -1 : 1, //skuId
|
||||
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
|
||||
"productId": item.productId, //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
this.datasocket = data
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async productqueryProduct() { //list 数据
|
||||
let res = await this.api.productqueryProduct({
|
||||
code: uni.cache.get('tableCode'),
|
||||
productGroupId: ''
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.shopList = res.data
|
||||
this.signatureDish_list = res.data.productInfo[0].products
|
||||
this.$nextTick(() => {
|
||||
this.countTitleTopNum();
|
||||
});
|
||||
}
|
||||
},
|
||||
clickspecifications(item1, index, index1) {
|
||||
this.skuidname = []
|
||||
this.specifications = item1
|
||||
this.specifications.indexa = index
|
||||
this.specifications.indexb = index1
|
||||
try {
|
||||
if (item1.productSkuResult == null) {
|
||||
// 但但单个规格弹框的处理
|
||||
this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
|
||||
} else {
|
||||
// 多规格数据处理
|
||||
this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
|
||||
let res = {
|
||||
id: item1.id, //商品id
|
||||
name: item.name,
|
||||
start: 0,
|
||||
children: item.value.split(",")
|
||||
}
|
||||
return res
|
||||
})
|
||||
this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
this.skuidname.push(val.children[0])
|
||||
})
|
||||
this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async morloe(e, index, index1, item) {
|
||||
this.specifications.tagSnap[index]['start'] = index1
|
||||
this.skuidname.splice(index, 1, e) //替换skuidname的数据
|
||||
this.hodgepodge(item, 2)
|
||||
},
|
||||
async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存 数量 价格等
|
||||
try {
|
||||
let res = await this.api.productqueryProductSku({
|
||||
shopId: uni.cache.get('shopUser'),
|
||||
productId: item.id, //商品id
|
||||
spec_tag: this.skuidname.join(",")
|
||||
})
|
||||
if (res.stockNumber == 0) {
|
||||
uni.showToast({
|
||||
title: '暂无库存',
|
||||
icon: "none",
|
||||
})
|
||||
} else {
|
||||
this.skuidsearch = res.data.id // 储存skuid 用于筛选数量
|
||||
this.salePrice = res.data.salePrice // 价格
|
||||
let data = null
|
||||
if (a == 1) { //1添加购物车 2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
|
||||
data = { //定义socket数据传参
|
||||
"nickName": this.userInfo.nickName,
|
||||
"barrageavatar": this.userInfo.headImg,
|
||||
'name': item.name,
|
||||
"skuId": res.data.id,
|
||||
"num": c == '-' ? -1 : 1, //数量
|
||||
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||
"productId": item.id, //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
} else {
|
||||
data = { //查询这个商品的价格
|
||||
"name": item.name,
|
||||
"skuId": res.data.id,
|
||||
"num": '', //数量
|
||||
"type": "sku", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||
"productId": item.id, //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
this.showShopsku = true //打开弹框
|
||||
}
|
||||
this.datasocket = data
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
orderdetail() { // 直接生成订单
|
||||
if (this.cartLists.data.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先添加商品',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopList.storeInfo)
|
||||
});
|
||||
return;
|
||||
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() { //清空购物车
|
||||
try {
|
||||
const data = { //定义socket数据传参
|
||||
"skuId": '',
|
||||
"num": '', //skuId
|
||||
"type": "clearCart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
|
||||
"productId": '', //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
this.datasocket = data
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
// 导航栏点击
|
||||
navClickHandle(t) {
|
||||
switch (t) {
|
||||
case 1:
|
||||
// 返回
|
||||
this.socketTicket.Close()
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
// 显示商家信息
|
||||
this.showShopInfo = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
//打电话
|
||||
makePhoneCall(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone //仅为示例
|
||||
});
|
||||
},
|
||||
// 点击菜单商品滚动到指定为止
|
||||
titleClickHandle(id) {
|
||||
uni.createSelectorQuery()
|
||||
.select('#wrapper')
|
||||
.boundingClientRect((data) => {
|
||||
//目标节点
|
||||
uni.createSelectorQuery()
|
||||
.select(`#title${id}`)
|
||||
.boundingClientRect((res) => {
|
||||
const scrollTop = res.top - data.top;
|
||||
const offsetNum = this.menuInfo.top + this.menuInfo.height + this
|
||||
.paddingBtmSize +
|
||||
this.tabHeadHeight - 1;
|
||||
//最外层盒子节点
|
||||
uni.pageScrollTo({
|
||||
scrollTop: scrollTop - offsetNum
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
// 计算滚动到那个标题
|
||||
countScrollTitle: _.throttle(function(top) {
|
||||
if (this.titleTopNums.length > 1) {
|
||||
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
||||
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
||||
this.titleTopNumIndex = i;
|
||||
}
|
||||
}
|
||||
if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
|
||||
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
||||
}
|
||||
}
|
||||
}, 100),
|
||||
// 统计每个标题到顶部的距离
|
||||
countTitleTopNum() {
|
||||
let topNums = [];
|
||||
for (let i of this.shopList.productInfo) {
|
||||
uni.createSelectorQuery()
|
||||
.select(`#title${i.id}`)
|
||||
.boundingClientRect((res) => {
|
||||
topNums.push(res.top + this.menuInfo.top + this.menuInfo.height + this
|
||||
.paddingBtmSize -
|
||||
this.tabHeadHeight - this.tabHeadHeight / 2);
|
||||
})
|
||||
.exec();
|
||||
}
|
||||
this.titleTopNums = topNums;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#wrapper{
|
||||
background-color: #fff;
|
||||
}
|
||||
.shopInfo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
.shopTitle{
|
||||
width: 382rpx;
|
||||
margin: 0 auto 30rpx auto;
|
||||
}
|
||||
.shopName{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.shopDistance{
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.shopDetail{
|
||||
margin-top: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
.shopTime{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signatureDish{
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
.signatureDish_list{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.signatureDish_item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 30rpx;
|
||||
.signatureDish_img{
|
||||
width: 340rpx;
|
||||
height: 204rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user