Files
xdd-uniapp-new/pkg_user/views/gift/gift.vue
T

977 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="gift-page" v-if="(goodsInfo.productInfo && goodsInfo.productInfo.storeName) || isGroupBuy">
<view class="top-card" v-if="!isPayOk ">
<view class="v12-justify-between" @click="handleShowCover">
<image class="popCover" :src="popupCover" mode="widthFix" lazy-load="false"></image>
</view>
</view>
<view class="gift-good-card">
<view class="v12-align-center v12-justify-start">
<view>
<image :src="isGroupBuy ? goodsInfo.mainImage : goodsInfo.productInfo.image" mode="scaleToFill" class="cover-image"></image>
</view>
<view class="v12-ml-2 info-wrap">
<view class="v12-dark-text v12-font-bold v12-font-28 t-more">
{{ isGroupBuy ? goodsInfo.name : goodsInfo.productInfo.storeName }}
</view>
<view class="gift-sku" v-if="!isGroupBuy">
{{ goodsInfo.productInfo.attrInfo.sku }}
</view>
<view class="v12-justify-between">
<view>
<text class="v12-primary-text v12-font-bold v12-font-22"></text>
<text class="v12-primary-text v12-font-bold v12-font-30">{{ isGroupBuy ? goodsInfo.price : payPrice }}</text>
</view>
<view v-if="!isGroupBuy">
<u-number-box
v-if="showInput"
v-model="goodsInfo.cartNum"
:max="goodsInfo['productInfo']['attrInfo']['stock']"
integer
iconStyle="color: #fff"
class="num-step"
@change="numberChange"
@blur="numberBlur(goodsInfo.cartNum)"
>
<template v-slot:minus>
<view class="v12-minus-btn v12-font-bold flex jc-center ai-center">
<u-icon name="minus" size="12" color="#FFFFFF"/>
</view>
</template>
<!-- <template v-slot:input>
<input type="number" @input="numberChange" class="num-input tc v12-num-input" v-model="goodsInfo['cartNum']" />
</template> -->
<template v-slot:plus>
<view class="v12-plus-btn v12-font-bold flex jc-center ai-center v12-primary">
<u-icon name="plus" size="12" color="#FFFFFF"/>
</view>
</template>
</u-number-box>
<view v-else> x{{ goodsInfo['cartNum'] }} </view>
</view>
</view>
</view>
</view>
<u-divider v-if="isPayOk"></u-divider>
<view class="v12-font-26 v12-secondary-dark-text" v-if="isPayOk">
<!-- 赠言{{ message || '礼笺轻启礼藏心意'}} -->
</view>
</view>
<view class="act-box" v-if="!isPayOk">
<view class="swich-btn" v-if="!isPayOk">
<view class="v12-font-28 v12-dark-text">是否支持好友转赠</view>
<view>
<u-switch v-model="canTransfer" activeColor="#c52733"></u-switch>
</view>
</view>
<view class="swich-btn" v-if="!isPayOk && !isGroupBuy">
<view class="v12-font-28 v12-dark-text">打开盲盒模式朋友签收前商品信息保密</view>
<view>
<u-switch v-model="isBlind" activeColor="#c52733"></u-switch>
</view>
</view>
<view class="swich-btn" v-if="!isPayOk && !isGroupBuy && !isCountyLotteryGift">
<view class="v12-font-28 v12-dark-text">一人领取所有礼品</view>
<view>
<u-switch v-model="isOneRecipient" activeColor="#c52733"></u-switch>
</view>
</view>
</view>
<view class="price-wrap" v-if="!(isGroupBuy && isPayOk)">
<view class="v12-font-28 v12-dark-text v12-font-bold">价格明细</view>
<view class="v12-justify-between v12-align-center v12-font-28 v12-mt-1">
<view class="v12-font-24 v12-dark-text">商品总价</view>
<view>
<text class="v12-dark-text v12-font-22"></text>
<text class="v12-dark-text v12-font-30">{{ isGroupBuy ? goodsInfo.price : computedResult.totalPrice }}</text>
</view>
</view>
<view class="v12-justify-between v12-align-center v12-font-28 v12-mt-1">
<view class="v12-font-24 v12-dark-text">平台折扣</view>
<view>
-
<text class="v12-dark-text v12-font-22"></text>
<text class="v12-dark-text v12-font-30">{{ computedResult.discountPrice }}</text>
</view>
</view>
<view v-if="!isCountyLotteryGift" class="v12-justify-between v12-align-center v12-font-28 v12-mt-1">
<view class="v12-font-24 v12-dark-text v12-align-center">
<view class="">
优惠券
</view>
<view class="v12-align-center v12-ml-1" v-if="couponTitle">
<view class="v12-primary-text v12-primary-border v12-font-22 v12-radius-6 v12-px-1"></view>
<view class="v12-primary-text v12-primary-border v12-font-22 v12-radius-6 v12-px-1">{{ couponTitle }}</view>
</view>
</view>
<view @click="showCouponsPopup()" class="v12-dark-text v12-font-30">
-
<text class="v12-dark-text v12-font-22"></text>
<text class="v12-dark-text v12-font-30">{{ computedResult.couponPrice }}</text>
<text class="iconfont icon-jiantou v12-font-24 v12-dark-text"></text>
</view>
</view>
<u-divider></u-divider>
<view class="v12-justify-between v12-align-center v12-font-28 v12-mt-1">
<view class="v12-font-bold">合计</view>
<view class="">
<text class="v12-primary-text v12-font-bold v12-font-22"></text>
<text class="v12-primary-text v12-font-bold v12-font-28">{{ computedResult.payPrice }}</text>
</view>
</view>
</view>
<button v-if="isPayOk" open-type="share" class="share-btn" >
<view class="v12-font-28 v12-primary-text v12-align-center">
<u-icon :name="webUrl + '/icon/gift-primary.png'" size="18"></u-icon>
点击送给朋友</view>
<view class="share-icon" >
<u-icon :name="webUrl + '/icon/share.png'" ></u-icon>
</view>
</button>
<view class="btn-wrap v12-mt-12 v12-justify-center" v-if="!isPayOk">
<view class="gift-submit" @click="showPayPicker = true">付款并赠送</view>
</view>
<view class="btn-wrap v12-mt-14 v12-justify-center" v-if="isPayOk && !isGroupBuy">
<view class="gift-submit" @click="makeAgain">再送一份</view>
</view>
<view class="tip-wrap v12-justify-center">
<view class="tip-text v12-mr-1">好友未收下礼包将于24小时后自动退款</view>
<u-icon @click="showTips" name="error-circle" color="#666" size="28rpx"></u-icon>
</view>
<giftTips ref="giftTips" :richText="giftNotice"></giftTips>
<CoverPicker
:show.sync="showCoverPicker"
:list="coverList"
:product="goodsInfo.productInfo"
@confirm="onCoverConfirm"
:index="defaultIndex"
:message="message"
/>
<passkeyborad
ref='payPwdPop'
showMoney
v-if="isShowPayPwdPop"
:money="payPrice"
:show="isShowPayPwdPop"
@close="isShowPayPwdPop = false"
@finish="pwdPopFinish"
/>
<PayPicker
ref="payPicker"
:show.sync="showPayPicker"
@confirm="onPayConfirm"
/>
<u-popup
v-if="!isCountyLotteryGift"
:show="showPopup"
:round="10"
mode="bottom"
close-on-click-overlay
@close="close"
>
<CouponsPopup
v-if="couponList.usable && couponList.usable.length > 0 && showPopup"
:two-list="couponList"
@change="changeCoupons"
:currentPrice="computedResult.canUseCouponPrice"
@close="close"
:id="couponId"
:couponId1="couponId"
:show-tab="false"
/>
</u-popup>
<u-popup
:show="showLotteryGiftPopup"
:round="40"
mode="center"
:close-on-click-overlay="false"
bgColor="transparent"
>
<view class="lottery-gift-popup">
<view class="lottery-gift-close" @click="closeLotteryGiftPopup">
<u-icon name="close-circle" color="#111" size="24"></u-icon>
</view>
<view class="lottery-gift-icon-wrap">
<image class="ticket-icon-check" :src="webUrl + '/home/gongxi.png'" mode="widthFix"></image>
</view>
<view class="lottery-gift-title">支付成功</view>
<view class="lottery-gift-content">好友领取礼包后您才可以获得<br>抽奖码哦~</view>
<view class="lottery-gift-actions">
<button class="lottery-gift-btn home-btn" @click="goHomeFromLotteryPopup">返回首页</button>
<button open-type="share" class="lottery-gift-btn send" @click="closeLotteryGiftPopup">送给朋友</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
import {
getGiftCardSendOrderConfirm,
getGiftCardSendOrder,
getGiftCardSendOrderAmount,
getGiftCardResend,
createGroupBuyGift,
createSojoumGroupBuyGift,
fetchSojoumGroupBuyGiftCarousel,
computedSojoumGroupBuyGiftOrderPrice
} from '@/api/gift'
import { weappPay } from "@/libs/wechat";
import {mapGetters} from "vuex";
import giftTips from './components/giftTips.vue'
import CoverPicker from './components/CoverPicker.vue'
import PayPicker from './components/PayPicker.vue';
import CouponsPopup from "@/components/CouponsPopup.vue"
export default {
components: {
giftTips,
CoverPicker,
PayPicker,
passkeyborad,
CouponsPopup
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
loading: true,
isBlind: false,
isOneRecipient: false,
canTransfer: false,
message: '',
cartId: '',
couponId: '',
coverList: [],
giftNotice: '',
showCoverPicker: false,
showPayPicker: false,
selectedCover: '',
giftImage: '',
orderKey: '',
goodsInfo: {},
cover: '默认',
orderGroupInfo: {
priceGroup: {}
},
templateId: '',
isShowPayPwdPop: false,
payPassword: '',
payType: '',
isPayOk: false,
giftKey: '',
payPrice: 0,
orderId: '',
defaultIndex:0,
discount: null,
computedResult: {},
couponList: {
unusable: [],
usable: []
},
couponTitle: '',
showPopup: false,
blindImage: '',
isGroupBuy: false,
popupCover: '',
showInput: true,
isCountyLotteryGift: false,
showLotteryGiftPopup: false,
isEligibleForDraw: false
}
},
watch: {
async couponId(value) {
if (this.isCountyLotteryGift) {
this.couponTitle = ''
if (Number(value || 0) !== 0) {
this.couponId = 0
return
}
}
this.couponIndex = this.couponList['usable']?.findIndex(item => item.id === +value)
this.couponTitle = this.couponList['usable']?.[this.couponIndex]?.couponTitle
if(this.isGroupBuy) {
await this.computedTravelGroupPrice(false)
} else {
await this.computedPrice(this.goodsInfo.cartNum, 1)
}
}
},
onLoad(opts) {
const pageQuery = Object.assign({}, this.resolvePageQuery(), opts || {})
this.cartId = pageQuery.cartId
this.isGroupBuy = pageQuery.isGroupBuy === '1'
this.isCountyLotteryGift = pageQuery.from === 'countyLottery' || pageQuery.isCountyLotteryGift === '1' || !!pageQuery.drawActivityId
// this.couponId = opts.couponId || 0
this.discount = pageQuery.discount
if(this.isGroupBuy) {
this.getGroupBuyInfo()
} else {
this.getGift()
}
fetchSojoumGroupBuyGiftCarousel().then(res => {
this.popupCover = res.data[0]
})
},
computed: {
...mapGetters(["userInfo"]),
shareImage() {
return this.isBlind ? this.blindImage : this.giftImage
}
},
onShareAppMessage() {
console.log('share');
uni.updateShareMenu({
isPrivateMessage: true,
withShareTicket: true
})
return {
title: '礼笺轻启,礼藏心意',
path: `/pkg_user/views/gift/receive?code=${this.giftKey}&isTravelGroup=${this.isGroupBuy ? 1 : 0}`,
imageUrl: this.shareImage
}
},
methods: {
resolvePageQuery() {
if (this.$yroute && this.$yroute.query) {
return this.$yroute.query
}
if (this.$route && this.$route.query) {
return this.$route.query
}
if (this._route && this._route.query) {
return this._route.query
}
return {}
},
getCouponId() {
if (this.isCountyLotteryGift) return 0
return this.couponId || 0
},
isCountyLotteryCartItem(item) {
return Number(
(item && item.drawActivityId) ||
(item && item.productInfo && item.productInfo.drawActivityId) ||
0
) > 0
},
syncCountyLotteryGiftFlag(item) {
if (!this.isCountyLotteryGift && this.isCountyLotteryCartItem(item)) {
this.isCountyLotteryGift = true
}
if (!this.isCountyLotteryGift) return
this.couponTitle = ''
if (Number(this.couponId || 0) !== 0) {
this.couponId = 0
}
},
adjustCoverListForProductStory(coverList, productInfo, defaultTemplate) {
if (!productInfo || !productInfo.productStory) {
return {
coverList,
template: defaultTemplate
}
}
const list = coverList && coverList.length ? [...coverList] : []
if (!list.length) {
return {
coverList: list,
template: defaultTemplate
}
}
const storyIndex = list.findIndex(item => item && item.isShowProductStory)
if (storyIndex === -1) {
return {
coverList: list,
template: defaultTemplate
}
}
const storyCover = list.splice(storyIndex, 1)[0]
list.unshift(storyCover)
return {
coverList: list,
template: storyCover
}
},
// 团购价计算
computedTravelGroupPrice(useDefaultCouponId) {
const params = {
key: this.orderKey,
couponId: this.getCouponId()
}
computedSojoumGroupBuyGiftOrderPrice(params).then(res => {
this.computedResult = res.data.result
this.couponList = res.data.result.couponList
this.payPrice = res.data.result.payPrice
this.$forceUpdate()
if (this.isCountyLotteryGift) {
this.couponTitle = ''
if (this.couponId !== 0) {
this.couponId = 0
}
} else if(useDefaultCouponId) {
this.couponId = res.data.result.defaultCouponId || 0
}
})
},
handleShowCover() {
this.showCoverPicker = true
},
showCouponsPopup() {
if (this.isCountyLotteryGift) return
if (this.couponList.usable && this.couponList.usable.length === 0) return
if(this.isPayOk) return
this.showPopup = !this.showPopup
},
close() {
this.showPopup = !this.showPopup
},
changeCoupons(item) {
if (this.isCountyLotteryGift) return
if(!item) return
if (this.couponList.usable && this.couponList.usable.length === 0) return
this.showPopup = !this.showPopup
if(!item.id) {
this.couponId = 0
this.couponTitle = ''
if(this.isGroupBuy) {
this.computedTravelGroupPrice(false)
} else {
this.computedPrice(this.goodsInfo.cartNum, 1)
}
return
}
this.couponId = item.id
this.couponTitle = item.couponTitle
if(this.isGroupBuy) {
this.computedTravelGroupPrice(false)
} else {
this.computedPrice(this.goodsInfo.cartNum, 1)
}
},
makeAgain() {
const params = {
orderId: this.orderId,
}
getGiftCardResend(params).then(res => {
this.isPayOk = false
const temp = res.data.giftCardTemplates.filter(e => e.isTravelGroup === 0)
const hasSpecial = res.data.giftCardTemplates.map(e => e.id).includes(res.data.specialGiftCardTemplate.id)
const initialCoverList = hasSpecial ? [...temp] : [...temp, res.data.specialGiftCardTemplate]
const goodsInfo = res.data.cartInfo[0]
const { coverList, template } = this.adjustCoverListForProductStory(initialCoverList, goodsInfo && goodsInfo.productInfo, res.data.specialGiftCardTemplate)
this.coverList = coverList
this.cartId = goodsInfo.id
this.giftNotice = res.data.giftCardGiftNotice
this.orderKey = res.data.orderKey
this.goodsInfo = goodsInfo
this.syncCountyLotteryGiftFlag(goodsInfo)
this.templateId = template.id
this.defaultIndex = this.coverList.findIndex(item => item.id === this.templateId)
console.log(this.defaultIndex, 'defaultIndex');
this.selectedCover = template.cover
this.giftImage = template.image
this.couponId = ''
this.computedPrice(this.goodsInfo.cartNum)
})
},
messageChange(e) {
this.message = e.substring(0, 30)
},
numberChange(e) {
this.computedPrice(e.value)
},
numberBlur(e) {
console.log(e);
this.showInput = false
setTimeout(() => {
this.showInput = true
},10)
this.$forceUpdate()
},
/**
* 计算价格
* @param {Number} num 数量
* @param {Boolean} f 有值时 couponId不取默认值
*/
computedPrice(num, f) {
const params = {
cartId: this.cartId,
couponId: this.getCouponId(),
cartNum : num
}
if(this.discount) {
params.discount = this.discount
}
getGiftCardSendOrderAmount(this.orderKey, params).then(res => {
this.couponList = res.data.result.couponList
if (this.isCountyLotteryGift) {
this.couponTitle = ''
if (this.couponId !== 0) {
this.couponId = 0
}
} else if(!f) {
this.couponId = res.data.result.defaultCouponId || 0
this.$forceUpdate()
}
this.payPrice = res.data.result.payPrice
this.computedResult = res.data.result
this.$forceUpdate()
})
},
pwdPopFinish(payPwd) {
this.payPassword = payPwd;
this.confirmGift(true);
},
onPayConfirm(e) {
this.payType = e
this.confirmGift(false)
},
onCoverConfirm(cover) {
this.cover = cover.name
this.templateId = cover.id
this.selectedCover = cover.cover
this.giftImage = cover.image
},
showTips() {
this.$refs.giftTips.showTips = true
},
getGift() {
const params = {
cartId: this.cartId,
}
this.loading = true
getGiftCardSendOrderConfirm(params).then(res => {
const temp = this.isGroupBuy ? res.data.giftCardTemplates : res.data.giftCardTemplates.filter(e => e.isTravelGroup === 0)
const hasSpecial = res.data.giftCardTemplates.map(e => e.id).includes(res.data.specialGiftCardTemplate.id)
const initialCoverList = hasSpecial ? [...temp] : [...temp, res.data.specialGiftCardTemplate]
const goodsInfo = res.data.cartInfo[0]
const { coverList, template } = this.adjustCoverListForProductStory(initialCoverList, goodsInfo && goodsInfo.productInfo, res.data.specialGiftCardTemplate)
this.coverList = coverList
this.giftNotice = res.data.giftCardGiftNotice
this.orderKey = res.data.orderKey
this.goodsInfo = goodsInfo
this.syncCountyLotteryGiftFlag(goodsInfo)
this.templateId = template.id
this.selectedCover = template.cover
this.giftImage = template.image
this.blindImage = res.data.giftCardBlindBoxShareImage
this.defaultIndex = this.coverList.findIndex(item => item.id === this.templateId)
// if(!this.couponId) {
// this.couponId = res.data.couponList.usable[0] && res.data.couponList.usable[0].id || ''
// }
this.computedPrice(this.goodsInfo.cartNum)
}).finally(() => {
this.loading = false
})
},
isDrawEligible(flag) {
return flag === true || flag === 1 || flag === '1' || flag === 'true'
},
handleGiftPaySuccess(isEligibleForDraw = false) {
this.isPayOk = true
this.isEligibleForDraw = this.isDrawEligible(isEligibleForDraw)
if (this.isCountyLotteryGift && this.isEligibleForDraw) {
this.showLotteryGiftPopup = true
}
},
closeLotteryGiftPopup() {
this.showLotteryGiftPopup = false
},
goHomeFromLotteryPopup() {
this.showLotteryGiftPopup = false
uni.switchTab({
url: '/pages/home/index'
})
},
/**
* 确认赠送
* @param {*}
*/
confirmGift(isPay) {
if(!isPay && this.payType === 'yue') {
//先判断用户是否绑定过手机
if (this.userInfo.phone) {
//再判断用户是否设置过支付密码
if (this.userInfo.hasPwdPay) {
//显示输入支付密码
this.isShowPayPwdPop = true;
} else {
//设置支付密码
this.$yrouter.push("/pkg_user/views/payPassword?isSetMode=true");
}
} else {
//跳转到绑定手机
this.$yrouter.push("/pkg_user/views/bindPhone");
}
return
}
uni.showLoading({
title: "生成订单中"
});
const params = this.isGroupBuy ? {
key: this.orderKey,
from: 'routine',
cartId: this.cartId,
templateId: this.templateId,
message : this.message || '礼笺轻启,礼藏心意',
canTransfer: this.canTransfer ? 1 : 0,
passwordPay: this.payPassword || '',
couponId: this.getCouponId(),
payType: this.payType,
} : {
orderKey: this.orderKey,
from: 'routine',
cartId: this.cartId,
couponId: this.getCouponId(),
recipientsNum: this.goodsInfo.cartNum,
templateId: this.templateId,
message : this.message || '礼笺轻启,礼藏心意',
cover: this.selectedCover,
canTransfer: this.canTransfer ? 1 : 0,
isBlind: this.isBlind ? 1 : 0,
isOneRecipient: this.isOneRecipient ? 1 : 0,
payType: this.payType,
seckillId: this.orderGroupInfo.seckill_id,
combinationId: this.orderGroupInfo.combination_id,
bargainId: this.orderGroupInfo.bargain_id,
}
if (this.payType == 'yue') {
params.passwordPay = this.payPassword;
}
const apiFn = this.isGroupBuy ? createSojoumGroupBuyGift : getGiftCardSendOrder
apiFn(this.orderKey, params).then(res => {
uni.hideLoading();
const data = res.data;
this.giftKey = data.giftCard.code;
this.orderId = data.result.orderId || ''
switch (data.status) {
case "ORDER_EXIST":
case "EXTEND_ORDER":
uni.showToast({
title: res.msg,
icon: "none",
duration: 2000
});
break;
case "PAY_DEFICIENCY":
break;
case "PAY_ERROR":
uni.showToast({
title: res.msg,
icon: "none",
duration: 2000
});
break;
case "SUCCESS":
uni.showToast({
title: res.msg,
icon: "none",
duration: 2000
});
this.handleGiftPaySuccess(data.isEligibleForDraw);
break;
case "WECHAT_H5_PAY":
// H5支付
setTimeout(() => {
// location.href = data.result.jsConfig.mweb_url;
}, 100);
break;
case "WECHAT_PAY":
// 小程序支付
weappPay(data.result.jsConfig).then((e) => {
uni.showToast({
title: res.msg,
icon: "none",
duration: 2000
});
this.handleGiftPaySuccess(data.isEligibleForDraw);
}).catch(err => {
// this.makeAgain()
uni.showToast({
title: '支付取消,请在我的礼品卡中完成支付',
icon: "none",
duration: 3000
});
}).finally(() => {
})
break;
case "WECHAT_APP_PAY":
// APP支付
weappPay(data.result.jsConfig).finally(() => {
});
break;
}
}) .catch(err => {
console.log(err);
uni.hideLoading();
uni.showToast({
title:err.msg,
icon: "none",
duration: 2000
});
}).finally(() => {
this.isShowPayPwdPop = false;
this.$refs.payPwdPop.clear();//清空支付密码
this.$refs.payPwdPop.close();//关闭支付密码弹窗
});
},
getGroupBuyInfo() {
const params = {
travelGroupProductId: this.cartId
}
createGroupBuyGift(params).then(res => {
if (res.status === 200) {
this.coverList = res.data.giftCardTemplates || []
this.giftNotice = res.data.giftCardGiftNotice
this.templateId = res.data.giftCardTemplates[0].id || ''
this.orderKey = res.data.orderKey
this.giftImage = res.data.giftCardTemplates[0].image
this.goodsInfo = {
...res.data.travelGroupProduct,
productInfo: {
image: res.data.travelGroupProduct.mainImage,
}
}
this.giftNotice = res.data.giftCardGiftNotice
this.computedTravelGroupPrice(true)
}
})
}
}
}
</script>
<style>
.gift-page .u-number-box input {
height: 40rpx !important;
}
</style>
<style lang="less" scoped>
.custom-cover{
height: 40rpx;
}
.info-wrap{
width: 100%;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.v12-num-input{
height: 56rpx;
width: 56rpx;
border: 1px solid #E6E6E6;
line-height: 40rpx;
font-weight: bold;
font-size: 28rpx;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.v12-minus-btn{
border-radius: 28rpx 0rpx 0rpx 28rpx;
background-color: rgba(208,208,208,0.39);
border: 1px solid rgba(208,208,208,0.39);
height: 40rpx;
width: 40rpx;
font-weight: bold;
}
.v12-plus-btn{
border-radius: 0rpx 28rpx 28rpx 0rpx;
border: 1px solid #C52733;
background-color: #C52733;
height: 40rpx;
width: 40rpx;
font-weight: bold;
}
.gift-sku{
font-size: 24rpx;
color: #333333;
border-radius: 124rpx;
border: 1px solid #999999;
padding: 5rpx 10rpx;
text-align: center;
margin-top: 20rpx;
width: fit-content;
}
.cover-image{
width: 200rpx;
height: 200rpx;
background: rgba(139,33,33,0.39);
border-radius: 16rpx;
}
.tip-wrap{
position: absolute;
bottom: 50rpx;
left: 0;
margin: auto;
right: 0;
align-items: center;
}
.tip-text{
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 28rpx;
color: #666666;
line-height: 36rpx;
}
.gift-submit{
width: 240rpx;
height: 80rpx;
background: rgba(197,39,51,1);
border-radius: 16rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
font-weight: 500;
}
.gift-page{
padding: 10rpx 20rpx;
}
.top-card{
// height: 280rpx;
background: #fff;
border-radius: 16rpx;
}
.line{
width: 100%;
height: 2rpx;
background: #d2d2d2;
}
.gift-good-card{
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-top: 30rpx;
}
.swich-btn{
display: flex;
justify-content: space-between;
align-items: center;
height: 60rpx;
background: #fff;
border-radius: 30rpx;
padding: 5rpx 20rpx;
margin-top: 20rpx;
}
.share-btn{
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
border-radius: 30rpx;
padding: 5rpx 20rpx;
margin-top: 30rpx;
border: none;
}
.share-btn::after {
border: none;
}
.price-wrap{
width: 100%;
background: #fff;
border-radius: 20rpx;
margin-top: 30rpx;
padding: 20rpx;
box-sizing: border-box;
}
.act-box{
width: 710rpx;
background: #fff;
border-radius: 30rpx;
}
.popCover{
width: 100%;
border-radius: 16rpx;
}
.lottery-gift-popup{
background: #fff;
border-radius: 40rpx;
padding: 60rpx 40rpx 50rpx;
position: relative;
box-sizing: border-box;
width: 550rpx;
height: 560rpx;
}
.lottery-gift-close{
position: absolute;
top: 30rpx;
right: 30rpx;
z-index: 10;
}
.lottery-gift-icon-wrap{
display: flex;
justify-content: center;
margin-bottom: 30rpx;
}
.ticket-icon-check{
width: 100rpx;
height: 100rpx;
margin-top: 10rpx;
}
.lottery-gift-title{
text-align: center;
font-size: 48rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
}
.lottery-gift-content{
text-align: center;
color: #999;
font-size: 28rpx;
line-height: 1.6;
}
.lottery-gift-actions{
margin-top: 60rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.lottery-gift-btn{
width: 240rpx;
height: 80rpx;
line-height: 76rpx; /* 微调行高补偿边框 */
border-radius: 40rpx;
text-align: center;
font-size: 32rpx;
font-weight: 500;
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.lottery-gift-btn.home-btn{
border: 2rpx solid #c52733;
color: #c52733;
background: #fff;
}
.lottery-gift-btn.send{
border: 2rpx solid #c52733;
color: #fff;
background: #c52733;
padding: 0;
margin-left: 20rpx;
}
.lottery-gift-btn.send::after{
border: none;
}
</style>