|
|
@@ -3,12 +3,8 @@
|
|
|
<view class="bg-f1 h-100vh">
|
|
|
<view class="pt-f left-0 w-100 p-0-32 bg-white z1000" :style="'height: 132rpx;top:0'">
|
|
|
<view>
|
|
|
- <view class="fz-34 fw-b pt-20">
|
|
|
- 三体2:黑暗森林
|
|
|
- </view>
|
|
|
- <view class="mt-10 fz-28 color-666">
|
|
|
- 2021年1月22日 国语3D
|
|
|
- </view>
|
|
|
+ <view class="fz-34 fw-b pt-20">{{ MoviceInfo.movieName }}</view>
|
|
|
+ <view class="mt-10 fz-28 color-666">{{ SeatInfo.showTime }} {{ SeatInfo.showVersionType }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<movable-area :style="'height:'+(seatRow*40+350)+'rpx;width: 100vw;top:'+(rpxNum*132)+'px'" class="pt-f left-0">
|
|
|
@@ -31,18 +27,22 @@
|
|
|
</movable-area>
|
|
|
<view class="pt-f bottom-bar left-0 dp-f fd-cr z1000">
|
|
|
<view class="bg-white p-all-32">
|
|
|
- <view class="dp-f ai-c jc-c fz-28 color-333 mb-20" v-if="SelectNum===0">
|
|
|
+ <view class="seatNo_box flex_r flex_ac" v-if="optArr.length">
|
|
|
+ <view class="ti">已选</view>
|
|
|
+ <view class="seatNos">
|
|
|
+ <view class="seatNo" v-for="(optItem,optindex) in optArr" :key="optindex" @click="delSelectItem(optItem)">
|
|
|
+ <view>{{ optItem.seatNo }}</view>
|
|
|
+ <view class="Price">{{ optItem.Price }}</view>
|
|
|
+ <view class="ico iconfont"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="dp-f ai-c jc-c fz-28 color-333 mb-20" v-else>
|
|
|
推荐选座
|
|
|
<view style="width: 106rpx;height: 60rpx;" class="b-1 br-5 dp-f ai-c jc-c fz-28 ml-20" v-for="(n,numindex) in 4" :key="n" @click="smartChoose(numindex+1)">
|
|
|
{{numindex+1}}人
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="dp-f ai-c fw-w fz-28 color-333 mb-20" v-if="SelectNum>0">
|
|
|
- <text>已选</text>
|
|
|
- <view class="p-all-10 b-1 br-5 dp-f ai-c jc-c fz-28 ml-20" v-for="(optItem,optindex) in optArr" :key="optindex">
|
|
|
- {{optItem.RowNum+'排'+optItem.ColumnNum+'座'}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
<view style="width: 686rpx;height: 90rpx;" class="dp-f jc-c ai-c br-10 fz-34 color-fff" :class="SelectNum>0?'bg-red-1':'bg-unbtn'" @click="buySeat">
|
|
|
{{SelectNum>0?('¥ '+aPrice+' 确认座位'):'请选座位'}}
|
|
|
</view>
|
|
|
@@ -84,12 +84,15 @@ export default {
|
|
|
mArr: [], //排数提示
|
|
|
optArr: [], //选中的座位数组。
|
|
|
isWXAPP: false,
|
|
|
+
|
|
|
+ aPrice: 0, //合计价格
|
|
|
+
|
|
|
+ restrictions: 0, //每次下单最多可选座位个数
|
|
|
+ MoviceInfo: uni.getStorageSync("chooseMovice"), //所选影片信息
|
|
|
+ SeatInfo: uni.getStorageSync("SeatInfo"), //所选场次信息
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- aPrice() {
|
|
|
- return this.SelectNum * 36
|
|
|
- },
|
|
|
rpxNum() {
|
|
|
return this.boxWidth / 750
|
|
|
},
|
|
|
@@ -97,7 +100,7 @@ export default {
|
|
|
return 750 / this.boxWidth
|
|
|
},
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ onLoad(da) {
|
|
|
let that = this
|
|
|
//获取宽度
|
|
|
uni.getSystemInfo({
|
|
|
@@ -108,25 +111,34 @@ export default {
|
|
|
//#endif
|
|
|
}
|
|
|
})
|
|
|
- that.initData()
|
|
|
+ that.initData(da)
|
|
|
},
|
|
|
methods: {
|
|
|
- async initData() {
|
|
|
+ async initData(da) {
|
|
|
let arr = []
|
|
|
- let res = await post("local/getSeat",{showId:"bb27ce9b64c86d460007"})
|
|
|
- if(res.code == 0){
|
|
|
+ let res = await post("local/getSeat", da)
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.restrictions = res.data.data.restrictions
|
|
|
let da = res.data.data.seats
|
|
|
for (let it of da) {
|
|
|
+ let pa = {}
|
|
|
+ for (let p of this.SeatInfo.areaPrice) {
|
|
|
+ pa[p.area] = p.showPrice
|
|
|
+ }
|
|
|
+
|
|
|
+ // let xy = it.seatNo.replace(/[^0-9]/ig, ",").split(",");
|
|
|
+ let xy = it.seatNo.split("座")[0].split("排")
|
|
|
arr.push({
|
|
|
YCoord: it.rowNo,
|
|
|
XCoord: it.columnNo,
|
|
|
SeatCode: it.seatId,
|
|
|
Status: it.status == "N" ? 0 : it.status == "LK" ? 2 : -1,
|
|
|
- RowNum: it.seatNo.slice(0,1),
|
|
|
- ColumnNum: it.seatNo.slice(2,3)
|
|
|
+ RowNum: xy[0], ColumnNum: xy[1],
|
|
|
+ seatNo: it.seatNo,
|
|
|
+ Price: pa[it.areaId] || this.SeatInfo.showPrice
|
|
|
})
|
|
|
}
|
|
|
- }
|
|
|
+ } else return
|
|
|
|
|
|
//假数据说明:SeatCode座位编号,RowNum-行号,ColumnNum-纵号,YCoord-Y坐标,XCoord-X坐标,Status-状态
|
|
|
let row = 0
|
|
|
@@ -166,18 +178,15 @@ export default {
|
|
|
let seat = this.seatList.slice()
|
|
|
let arr = this.seatArray.slice()
|
|
|
for (let num in seat) {
|
|
|
- let status = 2 //-1为非座位,0为未购座位,1为已选座位(绿色),2为已购座位(红色)
|
|
|
- if (seat[num].Status === 0) {
|
|
|
- status = 0
|
|
|
- } else if (seat[num].Status === -1) {
|
|
|
- status = -1
|
|
|
- }
|
|
|
+ let status = seat[num].Status //-1为非座位,0为未购座位,1为已选座位(绿色),2为已购座位(红色)
|
|
|
if (seat[num].YCoord) {
|
|
|
arr[parseInt(seat[num].YCoord) - this.minRow][parseInt(seat[num].XCoord) - this.minCol] = {
|
|
|
type: status,
|
|
|
SeatCode: seat[num].SeatCode,
|
|
|
+ seatNo: seat[num].seatNo,
|
|
|
RowNum: seat[num].RowNum,
|
|
|
- ColumnNum: seat[num].ColumnNum
|
|
|
+ ColumnNum: seat[num].ColumnNum,
|
|
|
+ Price: seat[num].Price
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -185,7 +194,7 @@ export default {
|
|
|
let mArr = []
|
|
|
for (let i in arr) {
|
|
|
let m = ''
|
|
|
- if(arr[i][0]){
|
|
|
+ if (arr[i][0]) {
|
|
|
for (let n of arr[i]) {
|
|
|
if (n.SeatCode) {
|
|
|
m = n.RowNum
|
|
|
@@ -245,7 +254,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- console.log(oldArray);
|
|
|
+ uni.setStorageSync("confirmOrder",{ oldArray, m: this.MoviceInfo, s: this.SeatInfo })
|
|
|
+ this.goto("/pagesB/cinema/confirmOrder")
|
|
|
},
|
|
|
//处理座位选择逻辑
|
|
|
handleChooseSeat: function(row, col) {
|
|
|
@@ -259,6 +269,10 @@ export default {
|
|
|
this.SelectNum--
|
|
|
this.getOptArr(newArray[row][col], 0)
|
|
|
} else if (seatValue === 0) {
|
|
|
+ if(this.SelectNum == this.restrictions){
|
|
|
+ uni.showToast({ title: `单次购票限制${this.restrictions}张`, icon: "none" });
|
|
|
+ return
|
|
|
+ }
|
|
|
newArray[row][col].type = 1
|
|
|
this.SelectNum++
|
|
|
this.getOptArr(newArray[row][col], 1)
|
|
|
@@ -282,6 +296,20 @@ export default {
|
|
|
}
|
|
|
this.optArr = optArr.slice()
|
|
|
},
|
|
|
+ delSelectItem(va){
|
|
|
+ let arr = [];
|
|
|
+ for (let a of this.optArr) {
|
|
|
+ if (va.SeatCode == a.SeatCode) {
|
|
|
+ this.optArr.remove(a)
|
|
|
+ }else arr.push(a.seatNo)
|
|
|
+ }
|
|
|
+ this.SelectNum--;
|
|
|
+ for (let i of this.seatArray) {
|
|
|
+ for (const it of i) {
|
|
|
+ if (va.SeatCode == it.SeatCode) it.type = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
//推荐选座,参数是推荐座位数目,
|
|
|
smartChoose: function(num) {
|
|
|
// 先重置
|
|
|
@@ -303,7 +331,7 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
//提示用户无合法位置可选
|
|
|
- alert('无合法位置可选!')
|
|
|
+ // alert('无合法位置可选!')
|
|
|
|
|
|
},
|
|
|
|
|
|
@@ -416,10 +444,63 @@ export default {
|
|
|
}
|
|
|
this.seatArray = oldArray;
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ optArr: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(da) {
|
|
|
+ this.aPrice = 0;
|
|
|
+ for (let p of da) {
|
|
|
+ this.aPrice = this.$h.Add(this.aPrice,p.Price)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.seatNo_box{
|
|
|
+ padding: 26rpx 0;
|
|
|
+ .ti{
|
|
|
+ // width: 100rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ .seatNos{
|
|
|
+ // width: calc(100% - 100rpx);
|
|
|
+ margin-bottom: -8rpx;
|
|
|
+ }
|
|
|
+ .seatNo{
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba($color: #000, $alpha: 0.05);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 4rpx 50rpx 4rpx 18rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ position: relative;
|
|
|
+ &:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .Price{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #E8627B;
|
|
|
+ &::before{
|
|
|
+ content: "¥";
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ico{
|
|
|
+ position: absolute;
|
|
|
+ right: 8rpx;
|
|
|
+ top: 26rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.p-all-10 {
|
|
|
padding: 10rpx;
|
|
|
}
|
|
|
@@ -433,11 +514,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
.bg-unbtn {
|
|
|
- background-color: #f9abb3;
|
|
|
+ background-color: #EA525F;
|
|
|
}
|
|
|
|
|
|
.bg-red-1 {
|
|
|
- background-color: #F45664;
|
|
|
+ background-color: #E8627B;
|
|
|
}
|
|
|
|
|
|
.br-10 {
|
|
|
@@ -479,6 +560,7 @@ export default {
|
|
|
|
|
|
.dp-ib {
|
|
|
display: inline-block;
|
|
|
+ margin: 0 2rpx;
|
|
|
}
|
|
|
|
|
|
.mt-20 {
|