605 lines
13 KiB
Vue
605 lines
13 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="商品详情" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
|
title-size='36' height='36' id="navbar">
|
|
</u-navbar>
|
|
<!-- 位置选择弹窗 -->
|
|
<view class="seat-selector" :class="{ 'show': addmenflag }" v-show="addmenflag">
|
|
<view class="selector-header">
|
|
<view class="title">选择卡座位置</view>
|
|
<view class="floor-tabs">
|
|
<view v-for="floor in floors" :key="floor.id"
|
|
:class="['floor-tab', currentFloor === floor.id ? 'active' : '']"
|
|
@click="selectFloor(floor.id)">
|
|
{{floor.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="selector-content">
|
|
<view class="area-list">
|
|
<view v-for="area in areas" :key="area.id"
|
|
:class="['area-item', currentArea === area.id ? 'active' : '']" @click="selectArea(area.id)">
|
|
{{area.name}}
|
|
</view>
|
|
</view>
|
|
<view class="seat-grid">
|
|
<view v-for="seat in seats" :key="seat.id"
|
|
:class="['seat-item', currentSeat === seat.id ? 'active' : '']" @click="selectSeat(seat)">
|
|
{{seat.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="selector-footer">
|
|
<view class="btn cancel" @click="addmenflag = false">取消</view>
|
|
<view class="btn confirm" @click="confirmSeatSelection">确认</view>
|
|
</view>
|
|
</view>
|
|
<view class="mask" v-if="addmenflag"></view>
|
|
|
|
<view class="product-img-wrap">
|
|
<image class="product-img" :src="shopxqobj.skuList[0].image" mode="aspectFit"></image>
|
|
</view>
|
|
<!-- 商品信息 -->
|
|
<view class="product-info">
|
|
<view class="product-title-row">
|
|
<text class="product-title">{{shopxqobj.skuList[0].goodsName}}</text>
|
|
<text class="product-month">数量x{{shopxqobj.surplusTotal}}</text>
|
|
</view>
|
|
<view class="product-desc-row" style="border-bottom: 1px solid #797979;">
|
|
<text class="desc-label">优惠介绍</text>
|
|
<text class="desc-content">仅可在{{shopxqobj.storeName}}兑换使用</text>
|
|
</view>
|
|
<view class="product-time-row">
|
|
<text class="time-label">获得时间</text>
|
|
<text class="time-content">{{shopxqobj.createTime}}</text>
|
|
</view>
|
|
<view class="product-step-row">
|
|
<text class="step-label">使用步骤</text>
|
|
<view class="step-content">
|
|
<view class="step-item">
|
|
<u-icon name="order" size="28" color="#fff" />
|
|
<text>小程序下单</text>
|
|
</view>
|
|
<u-icon name="arrow-right" size="20" color="#fff" />
|
|
<view class="step-item">
|
|
<u-icon name="checkmark-circle" size="28" color="#fff" />
|
|
<text>自动抵扣</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="seat-selection" @click="chooseSeat">
|
|
<image class="qian" src="https://api.ccttiot.com/smartmeter/img/static/uGlQHVe71tVCmnjW8Tsu" mode="">
|
|
</image> <text>{{kazuoid}}</text>
|
|
<image class="hou" src="https://api.ccttiot.com/smartmeter/img/static/uBrspupsx9JJF7xv7oDQ"
|
|
mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="bottom-btn-wrap">
|
|
<button class="exchange-btn" @click="btnduih">立即兑换</button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
number
|
|
} from 'echarts'
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#232020",
|
|
},
|
|
addmenflag: false,
|
|
currentFloor: '',
|
|
currentArea: '',
|
|
currentSeat: '',
|
|
selectedPosition: '',
|
|
floors: [],
|
|
areas: [],
|
|
seats: [],
|
|
kazuoid: '请选择卡座',
|
|
partId: '',
|
|
fenquid: '',
|
|
zuoweiid: '',
|
|
selectedItems: [],
|
|
shopid: '',
|
|
shopxqobj:{},
|
|
channelId:''
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.shopid = option.id
|
|
this.getlouceng()
|
|
this.getxq()
|
|
this.getchannelid()
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
// 请求channelId
|
|
getchannelid(){
|
|
this.$u.get(`/app/channel/list?appId=${this.$store.state.appid}&bstType=2`).then((res) => {
|
|
if (res.code == 200) {
|
|
this.channelId = res.data[0].channelId
|
|
}
|
|
})
|
|
},
|
|
// 点击立即兑换
|
|
btnduih(){
|
|
if(this.kazuoid == '请选择卡座'){
|
|
uni.showToast({
|
|
title: '请选选择卡座信息',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
uni.showLoading({
|
|
title: '兑换中...',
|
|
mask: true
|
|
})
|
|
let skuList = []
|
|
skuList.push({
|
|
skuId:this.shopxqobj.skuList[0].id,
|
|
number:this.shopxqobj.surplusTotal
|
|
})
|
|
let data = {
|
|
vipUserId:this.shopid,
|
|
skuList:skuList
|
|
}
|
|
this.$u.post(`/app/goodsOrder/calcGoodsOrderFee`,data).then(res => {
|
|
if (res.code == 200) {
|
|
let datas = {
|
|
storeId:this.$store.state.storeId,
|
|
vipUserId:this.shopid,
|
|
payAmount:res.data.actualAmount,
|
|
shoppingList:skuList,
|
|
boothId:this.currentSeat
|
|
}
|
|
this.$u.post(`/app/goodsOrder`,datas).then(res => {
|
|
if (res.code == 200) {
|
|
let datass = {
|
|
orderNo:res.msg,
|
|
appId:this.$store.state.appid,
|
|
channelId:this.channelId
|
|
}
|
|
this.$u.post(`/app/goodsOrder/pay`,datass).then(res => {
|
|
if (res.code == 200) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '兑换成功',
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},2000)
|
|
}else{
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
}
|
|
})
|
|
}else{
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
}
|
|
})
|
|
}else{
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取兑换详情
|
|
getxq(){
|
|
this.$u.get(`/app/vipUser/detail?storeId=${this.$store.state.storeId}&id=${this.shopid}`).then(res => {
|
|
if (res.code === 200) {
|
|
this.shopxqobj = res.data
|
|
}
|
|
})
|
|
},
|
|
// 点击选择位置
|
|
confirmSeatSelection() {
|
|
const floor = this.floors.find(f => f.id === this.currentFloor)
|
|
const area = this.areas.find(a => a.id === this.currentArea)
|
|
const seat = this.seats.find(s => s.id === this.currentSeat)
|
|
if (floor && area && seat) { //判断有楼层，分区，卡座
|
|
this.selectedPosition = `${floor.name}-${area.name}-${seat.name}`
|
|
this.kazuoid = `${seat.name}`
|
|
this.boothId = `${seat.id}`
|
|
this.addmenflag = false
|
|
} else if (floor && seat) { //判断只有楼层和卡座
|
|
this.selectedPosition = `${floor.name}-${seat.name}`
|
|
this.kazuoid = `${seat.name}`
|
|
this.boothId = `${seat.id}`
|
|
this.addmenflag = false
|
|
} else {
|
|
uni.showToast({
|
|
title: '请选择完整的卡座信息',
|
|
icon: 'none',
|
|
duration:3000
|
|
})
|
|
}
|
|
},
|
|
// 查询楼层列表
|
|
getlouceng() {
|
|
this.$u.get(`/app/part/list?storeId=${this.$store.state.storeId}&pageNum=1&pageSize=99&isFloor=true`).then(
|
|
res => {
|
|
if (res.code === 200) {
|
|
this.floors = []
|
|
this.partId = res.data.partId
|
|
res.data.forEach(item => {
|
|
if (item.parentId == null) {
|
|
this.floors.push({
|
|
id: item.partId,
|
|
name: item.partName
|
|
})
|
|
}
|
|
})
|
|
if (this.floors.length > 0) {
|
|
this.fenquid = this.floors[0].id
|
|
this.currentFloor = this.floors[0].id
|
|
this.getfenqu()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 查询分区
|
|
getfenqu() {
|
|
if (this.floors.length > 0) {
|
|
this.$u.get(`/app/part/list?parentId=${this.fenquid}&pageNum=1&pageSize=99`).then(res => {
|
|
if (res.code === 200) {
|
|
this.areas = []
|
|
if (res.data) {
|
|
res.data.forEach(item => {
|
|
this.areas.push({
|
|
id: item.partId,
|
|
name: item.partName
|
|
})
|
|
})
|
|
}
|
|
if (this.areas.length > 0) { //如果有分区则进行查下去没有分区则直接拿楼层id查卡座
|
|
this.zuoweiid = this.areas[0].id
|
|
this.currentArea = this.areas[0].id
|
|
this.getkazuo()
|
|
} else {
|
|
this.getkazuo()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 查询卡座
|
|
getkazuo() {
|
|
this.$u.get(
|
|
`/app/booth/list?partId=${this.zuoweiid == undefined ? this.partId : this.zuoweiid }&pageNum=1&pageSize=99`
|
|
).then(res => {
|
|
if (res.code === 200) {
|
|
this.seats = []
|
|
res.data.forEach(item => {
|
|
this.seats.push({
|
|
id: item.boothId,
|
|
name: item.boothName
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 切换楼层
|
|
selectFloor(floorId) {
|
|
this.currentFloor = floorId
|
|
this.fenquid = floorId
|
|
this.getfenqu()
|
|
},
|
|
//切换分区
|
|
selectArea(areaId) {
|
|
this.currentArea = areaId
|
|
this.zuoweiid = areaId
|
|
this.getkazuo()
|
|
},
|
|
// 切换卡座
|
|
selectSeat(seat) {
|
|
this.currentSeat = seat.id
|
|
console.log(seat, this.currentSeat);
|
|
},
|
|
// 点击显示选择卡座位置
|
|
chooseSeat() {
|
|
this.addmenflag = true
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
page {
|
|
background-color: #111111 !important;
|
|
}
|
|
.page{
|
|
background-color: #111111 !important;
|
|
}
|
|
|
|
.duihuan-detail {
|
|
background: #111;
|
|
min-height: 100vh;
|
|
|
|
}
|
|
|
|
.product-img-wrap {
|
|
background: #232020;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 582rpx;
|
|
.product-img {
|
|
width: 280rpx;
|
|
height: 280rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.product-info {
|
|
background: #191919;
|
|
height: 822rpx;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
.product-title-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
margin-bottom: 20rpx;
|
|
border-bottom: 1px solid #797979;
|
|
padding: 40rpx 30rpx 40rpx 30rpx;
|
|
.product-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.product-month {
|
|
font-size: 24rpx;
|
|
color: #aaa;
|
|
}
|
|
}
|
|
|
|
.product-desc-row,
|
|
.product-time-row {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
padding: 28rpx 30rpx 42rpx 30rpx;
|
|
.desc-label,
|
|
.time-label {
|
|
color: #aaa;
|
|
width: 140rpx;
|
|
}
|
|
|
|
.desc-content,
|
|
.time-content {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.product-step-row {
|
|
display: flex;
|
|
padding: 28rpx 30rpx 28rpx 30rpx;
|
|
align-items: center;
|
|
.step-label {
|
|
color: #aaa;
|
|
}
|
|
|
|
.step-content {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 30rpx;
|
|
.step-item {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-btn-wrap {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 60rpx;
|
|
background: transparent;
|
|
padding: 30rpx;
|
|
|
|
.exchange-btn {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background: #ff8998;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
border-radius: 45rpx;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.mask {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #010000;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 0.5;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.seat-selector {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 58vh;
|
|
background-color: #0B0B0B;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
z-index: 999;
|
|
padding-bottom: 100rpx;
|
|
box-sizing: border-box;
|
|
transform: translateY(100%);
|
|
transition: transform 0.3s ease-out;
|
|
|
|
&.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.selector-header {
|
|
padding: 40rpx 30rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.floor-tabs {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
|
|
.floor-tab {
|
|
padding: 10rpx 40rpx;
|
|
background: #1A1A1A;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
|
|
&.active {
|
|
background: #FF8998;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.selector-content {
|
|
display: flex;
|
|
height: calc(100% - 300rpx);
|
|
|
|
.area-list {
|
|
width: 200rpx;
|
|
background: #1A1A1A;
|
|
|
|
.area-item {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
|
|
&.active {
|
|
background: #FF8998;
|
|
}
|
|
}
|
|
}
|
|
|
|
.seat-grid {
|
|
flex: 1;
|
|
padding: 20rpx;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20rpx;
|
|
overflow-y: auto;
|
|
|
|
.seat-item {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #1A1A1A;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
|
|
&.active {
|
|
background: #FF8998;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.selector-footer {
|
|
position: absolute;
|
|
bottom: 44rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
background: #0B0B0B;
|
|
|
|
.btn {
|
|
width: 45%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
|
|
&.cancel {
|
|
background: #1A1A1A;
|
|
color: #fff;
|
|
}
|
|
|
|
&.confirm {
|
|
background: #FF8998;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.seat-selection {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
color: #fff;
|
|
background-color: #111111;
|
|
padding: 15rpx;
|
|
z-index: 1;
|
|
|
|
.qian {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
.hou {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.seat-selection text {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.seat-selection image {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
</style> |