305 lines
7.7 KiB
Vue
305 lines
7.7 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 商品信息展示区 -->
|
||
<view class="card">
|
||
<image class="cover" :src="record.travelGroupOrderInfo.travelGroupProduct.mainImage" mode="aspectFill" />
|
||
<view class="info">
|
||
<view class="title">{{ record.travelGroupOrderInfo.travelGroupProduct.name }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商家联系信息与二维码 -->
|
||
<view class="section">
|
||
<view class="code">核销码：{{ record.verifyCode }}</view>
|
||
<view class="qrcode-wrap">
|
||
<image class="qrcode" :src="record.verifyQrCode" mode="widthFix" />
|
||
</view>
|
||
<view class="notice v12-primary-text v12-font-24">注：请提前和商家确认入住时间</view>
|
||
</view>
|
||
<!-- 操作按钮 -->
|
||
<view class="actions">
|
||
<button class="primary v12-font-32" @click="goGiftList">您已领取礼包，去查看</button>
|
||
</view>
|
||
<!-- 商家联系方式 -->
|
||
<view class="contact-section">
|
||
<view class="contact-btn phone-btn" @click="showPop('phone')">
|
||
<view class="btn-icon">
|
||
<u-icon :name="webUrl + '/home/pho.png'" size="16" />
|
||
</view>
|
||
<view class="btn-text">商家电话</view>
|
||
</view>
|
||
<view class="contact-btn wechat-btn" @click="showPop('wechat')">
|
||
<view class="btn-icon">
|
||
<u-icon :name="webUrl + '/home/wx.png'" size="16" />
|
||
</view>
|
||
<view class="btn-text">商家微信</view>
|
||
</view>
|
||
</view>
|
||
<u-popup :show="showPhonePopup" mode="center" round="10" :safe-area-inset-bottom="false">
|
||
<view class="phone-popup">
|
||
<view class="phone-title">{{ title }}</view>
|
||
<view class="phone-number">{{ popContent || '暂无'}}</view>
|
||
<view class="phone-actions v12-align-center" v-if="title === '商家电话'">
|
||
<!-- <button class="action-btn cancel" @click="showPhonePopup = false">取消</button>
|
||
<button class="action-btn call" @click="makePhoneCall">立即拨打</button> -->
|
||
<view class="v12-font-28 v12-primary-text v12-primary-border v12-radius-100 v12-font-28 v12-primary-text v12-px-2" @click="contactMerchant('phone')">立即拨打</view><view class="v12-font-28 v12-dark-border v12-radius-100 v12-px-2" @click="showPhonePopup = false">取消</view>
|
||
</view>
|
||
<view class="phone-actions v12-align-center" v-if="title === '商家微信'">
|
||
<!-- <button class="action-btn cancel" @click="showPhonePopup = false">取消</button>
|
||
<button class="action-btn call" @click="makePhoneCall">立即拨打</button> -->
|
||
<view class="v12-font-28 v12-primary-text v12-primary-border v12-radius-100 v12-px-2" @click="contactMerchant('wechat')">立即复制</view><view class="v12-font-28 v12-dark-border v12-radius-100 v12-px-2" @click="showPhonePopup = false">取消</view>
|
||
</view>
|
||
<view class="phone-actions v12-align-center" v-if="title === '平台电话'" >
|
||
<!-- <button class="action-btn cancel" @click="showPhonePopup = false">取消</button>
|
||
<button class="action-btn call" @click="makePhoneCall">立即拨打</button> -->
|
||
<view v-if="title === '平台电话'" class="v12-font-28 v12-primary-text v12-primary-border v12-radius-100 v12-px-2" @click="contactMerchant('phone')">立即拨打</view><view class="v12-font-28 v12-dark-border v12-radius-100 v12-px-2" @click="showPhonePopup = false">取消</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ReceiveDone',
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
showPhonePopup: false,
|
||
popContent: '',
|
||
title: '',
|
||
// 模态窗口状态管理
|
||
showPhoneModal: false,
|
||
showWechatModal: false,
|
||
record: {}
|
||
}
|
||
},
|
||
onLoad(query) {
|
||
// 可扩展：如果后续需要从 query 读取数据，可在此处理
|
||
this.record = JSON.parse(decodeURIComponent(query.obj))
|
||
console.log(this.record);
|
||
|
||
},
|
||
methods: {
|
||
showPop(type) {
|
||
this.showPhonePopup = true
|
||
this.title = type === 'phone' ? '商家电话' : '商家微信'
|
||
this.popContent = type === 'phone' ? this.record.merPhone : this.record.merWechat
|
||
},
|
||
contactMerchant(type) {
|
||
if (type === 'phone') {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.record.merPhone,
|
||
})
|
||
} else if (type === 'wechat') {
|
||
uni.setClipboardData({
|
||
data: this.record.merWechat,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '微信号已复制',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
goGiftList() {
|
||
this.$yrouter.push('/pkg_user/views/giftList')
|
||
},
|
||
goHome() {
|
||
uni.switchTab({ url: '/pages/home/index' })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.contact-btn{
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15rpx 30rpx;
|
||
background: #fff;
|
||
border-radius: 100rpx;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
}
|
||
.contact-section{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
margin-top: 40rpx;
|
||
}
|
||
.phone-popup {
|
||
width: 400rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 40rpx;
|
||
|
||
.phone-title {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.phone-number {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.phone-actions {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
gap: 20rpx;
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
border-radius: 40rpx;
|
||
font-size: 28rpx;
|
||
|
||
&.cancel {
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
&.call {
|
||
background-color: var(--v12-color-primary);
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.page {
|
||
padding: 24rpx 24rpx 120rpx;
|
||
}
|
||
.card {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 0;
|
||
overflow: hidden;
|
||
}
|
||
.cover {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
.info {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
}
|
||
.title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
.type {
|
||
display: inline-block;
|
||
margin-top: 8rpx;
|
||
padding: 2rpx 10rpx;
|
||
font-size: 22rpx;
|
||
color: #C52733;
|
||
border: 1rpx solid #C52733;
|
||
border-radius: 8rpx;
|
||
}
|
||
.desc {
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
.price {
|
||
margin-top: 8rpx;
|
||
font-size: 32rpx;
|
||
color: #C52733;
|
||
font-weight: 600;
|
||
}
|
||
.yen {
|
||
font-size: 26rpx;
|
||
}
|
||
.section {
|
||
margin-top: 20rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
}
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
.row {
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
.label {
|
||
color: #666;
|
||
}
|
||
.value {
|
||
font-weight: 500;
|
||
}
|
||
.code {
|
||
margin-top: 16rpx;
|
||
font-size: 28rpx;
|
||
color: #C52733;
|
||
text-align: center;
|
||
}
|
||
.qrcode-wrap {
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.qrcode {
|
||
width: 260rpx;
|
||
height: 260rpx;
|
||
}
|
||
.copy-row {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.copy-btn {
|
||
border: 1rpx solid #e5e5e5;
|
||
border-radius: 100rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
.notice {
|
||
margin-top: 16rpx;
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
text-align: center;
|
||
}
|
||
.actions {
|
||
margin-top: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.primary {
|
||
background: #C52733;
|
||
color: #fff;
|
||
border-radius: 100rpx;
|
||
padding: 0rpx 120rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.ghost {
|
||
margin-top: 16rpx;
|
||
background: #fff;
|
||
color: #C52733;
|
||
border: 1rpx solid #C52733;
|
||
border-radius: 100rpx;
|
||
padding: 14rpx 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
</style> |