Style:图标更换

This commit is contained in:
linxi
2025-10-31 16:44:24 +08:00
parent 5c1561fe9e
commit eebe0f217b
8 changed files with 273 additions and 56 deletions
+25 -3
View File
@@ -55,15 +55,27 @@
</view>
</view>
<view v-if="isTravelGroup">
<view class="btn-wrap">
<view class="btn-wrap" v-if="card.isOverReceive === 0 && card.isUserReceive === 0">
<button class="share-btn v12-white-text v12-primary" @click="setShowAddressForm(true)">
填写地址并收下
</button>
<button open-type="share" class="share-btn v12-white v12-primary-text v12-d-flex" >
<button v-if="card.canTransfer !== 0" open-type="share" class="share-btn v12-white v12-primary-text v12-d-flex" >
点击转赠给好友
<u-icon :name="webUrl + '/icon/share.png'" ></u-icon>
</button>
</view>
<view v-if="card.isUserReceive === 1" @click="toHome" style="z-index: 10; display: flex;flex-direction: column;align-items: center;">
<view class="address-btn v12-white-text v12-primary">
礼包已被领取
</view>
<view class="info-btn v12-text-center v12-font-32 v12-mt-3" style="z-index: 10">去商城看看>></view>
</view>
<view v-if="card.isUserReceive === 1" style="z-index: 10; display: flex;flex-direction: column;align-items: center;">
<view style="width: fit-content;" class="address-btn v12-white-text v12-primary" @click="toOrder">
您已领取礼包去看看>>
</view>
<view class="info-btn v12-text-center v12-font-32 v12-mt-3" @click.stop="searchGift">我也要送礼</view>
</view>
</view>
<view class="tips">
<view class="tip-text v12-mr-1" @click="showTips">
@@ -165,6 +177,16 @@ export default {
// 分享到微信好友
},
toOrder() {
if (this.isTravelGroup) {
this.$yrouter.push({
path: '/pkg_product/views/sojoumOrderDetails',
query: {
id: this.order,
isView: 1
}
})
return
}
this.$yrouter.push({
path: "/pages/order/OrderDetails/index",
query: {
@@ -231,7 +253,7 @@ export default {
title: '领取成功',
icon: 'success'
});
uni.redirectTo({ url: '/pkg_user/views/gift/receiveDone' })
uni.navigateTo({ url: '/pkg_user/views/gift/receiveDone?obj=' + JSON.stringify(res.data) })
}).catch(() => {
uni.showToast({
title: '领取失败,请重试',
+1 -1
View File
@@ -290,7 +290,7 @@ export default {
})
return {
title: '礼笺轻启,礼藏心意',
path: `/pkg_user/views/gift/receive?code=${this.giftKey}`,
path: `/pkg_user/views/gift/receive?code=${this.giftKey}&isTravelGroup=${this.isGroupBuy}`,
imageUrl: this.shareImage
}
},
+1 -1
View File
@@ -53,7 +53,7 @@ export default {
})
return {
title: '礼笺轻启,礼藏心意',
path: `/pkg_user/views/gift/receive?code=${this.giftCard.code}`,
path: `/pkg_user/views/gift/receive?code=${this.giftCard.code}&isTravelGroup=${this.isTravelGroup}`,
imageUrl: this.giftCard.image
}
},
+149 -35
View File
@@ -2,24 +2,60 @@
<view class="page">
<!-- 商品信息展示区 -->
<view class="card">
<image class="cover" :src="mock.product.image" mode="aspectFill" />
<image class="cover" :src="record.travelGroupOrderInfo.travelGroupProduct.mainImage" mode="aspectFill" />
<view class="info">
<view class="title">{{ mock.product.name }}</view>
<view class="title">{{ record.travelGroupOrderInfo.travelGroupProduct.name }}</view>
</view>
</view>
<!-- 商家联系信息与二维码 -->
<view class="section">
<view class="code">核销码{{ mock.verify.code }}</view>
<view class="code">核销码{{ record.verifyCode }}</view>
<view class="qrcode-wrap">
<image class="qrcode" :src="mock.verify.qrcode" mode="widthFix" />
<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" @click="goGiftList">您已领取礼包去查看</button>
<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" @click="contactMerchant('phone')">立即拨打</view> | <view class="v12-font-28" @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" @click="contactMerchant('wechat')">立即复制</view> | <view class="v12-font-28" @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" @click="contactMerchant('phone')">立即拨打</view> | <view class="v12-font-28" @click="showPhonePopup = false">取消</view>
</view>
</view>
</u-popup>
</view>
</template>
@@ -28,41 +64,58 @@ export default {
name: 'ReceiveDone',
data() {
return {
mock: {
product: {
image: 'https://resource.xdd618.com/1/202501020/1760933080303_%E5%A4%A7%E7%90%86%E9%86%92%E6%9D%A5%20(5).jpg',
name: '醒来客栈大床房3晚',
type: 'countyFamous',
desc: '迎曦楼大床房37-48㎡,房间设计温馨,设施齐全,柔软的床铺和明亮的空间,收容您所有的疲惫。',
price: 1887
},
order: {
id: '1981535966489214976',
start: '2025-12-05',
end: '2025-12-08',
minDays: 4
},
contact: {
wechat: '19187244812'
},
verify: {
code: '966489214976',
qrcode: 'https://shop.xdd618.com/api/file/qrcode/966489214976_yshop.jpg'
}
}
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: {
copyWechat() {
uni.setClipboardData({
data: this.mock.contact.wechat,
success: () => {
uni.showToast({ title: '微信号已复制', icon: 'success' })
}
})
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,
success: () => {
console.log('///');
uni.showToast({
title: '正在拨打电话',
icon: 'none'
})
},
fail: () => {
uni.showToast({
title: '拨打失败',
icon: 'none'
})
}
})
} else if (type === 'wechat') {
uni.setClipboardData({
data: this.record.merWechat,
success: () => {
uni.showToast({
title: '微信号已复制',
icon: 'success'
})
}
})
}
},
goGiftList() {
this.$yrouter.push('/pkg_user/views/giftList')
@@ -75,6 +128,67 @@ export default {
</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;
}
@@ -189,7 +303,7 @@ export default {
background: #C52733;
color: #fff;
border-radius: 100rpx;
padding: 0rpx 40rpx;
padding: 0rpx 120rpx;
font-size: 28rpx;
}
.ghost {