1530 lines
46 KiB
Vue
1530 lines
46 KiB
Vue
<template>
|
||
<view
|
||
v-if="isLoad && ((goodsInfo.productInfo && goodsInfo.productInfo.storeName) || isGroupBuy)"
|
||
class="gift-page"
|
||
>
|
||
<view class="top-card" v-if="!isPayOk">
|
||
<view class="top-tab-nav-wrap">
|
||
<view
|
||
:class="{'active': selectCoverType === 'default'}"
|
||
class="item item1"
|
||
@click="toggleSelectCoverType('default')"
|
||
>
|
||
<view class="txt">选择礼包封面</view>
|
||
<image :src="webUrl + '/page/gift/gift-tab01.png'" class="tab-img"></image>
|
||
</view>
|
||
<view
|
||
:class="{'active': selectCoverType === 'ai'}"
|
||
class="item item2"
|
||
@click="toggleSelectCoverType('ai')"
|
||
>
|
||
<view class="txt">AI生成礼包封面</view>
|
||
<image :src="webUrl + '/page/gift/gift-tab02.png'" class="tab-img"></image>
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="selectCoverType === 'default'"
|
||
class="v12-justify-between"
|
||
style="margin-top: -1px;"
|
||
@click="handleShowCover"
|
||
>
|
||
<image class="popCover" :src="popupCover" mode="widthFix" lazy-load="false"></image>
|
||
</view>
|
||
<view
|
||
v-if="selectCoverType === 'ai'"
|
||
class="ai-cover-wrap"
|
||
>
|
||
<view class="ai-cover-body">
|
||
<view class="ai-cover-container">
|
||
<view v-if="!showAiImgHistoryListSelect">
|
||
<view v-if="showGenerateBtn" class="prompt">
|
||
<textarea
|
||
v-model.trim="aiCoverDesc"
|
||
:maxlength="300"
|
||
placeholder="请描述你想生成的图片"
|
||
class="prompt-textarea"
|
||
/>
|
||
<p class="prompt-tips">{{ aiCoverDesc.length }}/300</p>
|
||
</view>
|
||
<view v-else class="imgs-list-wrap">
|
||
<view
|
||
v-for="(item, index) in aiCoverImgsList"
|
||
:key="index"
|
||
class="img-item"
|
||
>
|
||
<image
|
||
:src="item.cover"
|
||
:class="{
|
||
'active': item.id === selectedAiCoverImage.id
|
||
}"
|
||
mode="heightFix"
|
||
class="img-image"
|
||
@click="handleSelectAiCover(item)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view
|
||
:class="{'scrollable': aiHistoryCoverImgsList.length > 3}"
|
||
class="imgs-list-wrap"
|
||
>
|
||
<view
|
||
v-for="(item, index) in aiHistoryCoverImgsList"
|
||
:key="index"
|
||
class="img-item"
|
||
>
|
||
<image
|
||
:src="item.cover"
|
||
:class="{
|
||
'active': item.id === selectedAiCoverImage.id
|
||
}"
|
||
mode="heightFix"
|
||
class="img-image"
|
||
@click="handleSelectAiHistoryCover(item)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ai-cover-bottom">
|
||
<block v-if="!showAiImgHistoryListSelect">
|
||
<view v-if="showGenerateBtn" class="btn-wrap">
|
||
<view
|
||
v-if="!aiCoverGenerateLoading && aiHistoryCoverImgsList.length > 0"
|
||
class="btn btn2"
|
||
@click="toggleShowAiImgHistoryListSelect(true)"
|
||
>
|
||
历史图片
|
||
</view>
|
||
<view class="btn" @click="handleGenerateAiCover">
|
||
{{ aiCoverGenerateLoading ? '礼包封面生成中...' : 'AI生成礼包封面' }}
|
||
<image v-if="!aiCoverGenerateLoading" :src="webUrl + '/page/gift/gift-tab-icon01.png'" class="icon"></image>
|
||
</view>
|
||
<image
|
||
v-if="aiCoverGenerateLoading && settingInfo.giftCardT2ILoadingGif"
|
||
:src="settingInfo.giftCardT2ILoadingGif"
|
||
class="loading-img"
|
||
/>
|
||
</view>
|
||
<view v-else class="btn-wrap">
|
||
<view class="btn" @click="handleShowAiCover">
|
||
预览
|
||
</view>
|
||
<view class="btn btn2" @click="handleGenerateAgain">
|
||
重新生成
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="btn-wrap">
|
||
<view class="btn" @click="handleShowAiHistoryCoverPicker">
|
||
预览
|
||
</view>
|
||
<view class="btn btn2" @click="toggleShowAiImgHistoryListSelect(false)">
|
||
使用AI生成
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</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="payNowToSendGift">付款并赠送</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"
|
||
/>
|
||
<AiCoverPicker
|
||
:show.sync="showAiCoverPicker"
|
||
:list="aiCoverImgsList"
|
||
:index="aiDefaultIndex"
|
||
@confirm="onAiCoverConfirm"
|
||
/>
|
||
<AiHistoryCoverPicker
|
||
:show.sync="showAiHistoryCoverPicker"
|
||
:list="aiHistoryCoverImgsList"
|
||
:index="aiHistoryDefaultIndex"
|
||
@confirm="onAiHistoryCoverConfirm"
|
||
/>
|
||
<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,
|
||
aiGiftImageGenerate,
|
||
aiGiftImageStatus,
|
||
aiGiftImageHistory
|
||
} from '@/api/gift'
|
||
import {
|
||
getAiSystemInfoSetting
|
||
} from '@/api/public'
|
||
import { weappPay } from "@/libs/wechat";
|
||
import {mapGetters} from "vuex";
|
||
import giftTips from './components/giftTips.vue'
|
||
import CoverPicker from './components/CoverPicker.vue'
|
||
import AiCoverPicker from './components/AiCoverPicker.vue'
|
||
import AiHistoryCoverPicker from './components/AiHistoryCoverPicker.vue'
|
||
import PayPicker from './components/PayPicker.vue';
|
||
import CouponsPopup from "@/components/CouponsPopup.vue"
|
||
export default {
|
||
components: {
|
||
giftTips,
|
||
CoverPicker,
|
||
AiCoverPicker,
|
||
AiHistoryCoverPicker,
|
||
PayPicker,
|
||
passkeyborad,
|
||
CouponsPopup
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
isLoad: false,
|
||
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: {},
|
||
skipCouponIdWatch: false,
|
||
couponList: {
|
||
unusable: [],
|
||
usable: []
|
||
},
|
||
couponTitle: '',
|
||
showPopup: false,
|
||
// 盲盒礼包图片
|
||
blindImage: '',
|
||
// 是否为旅居团购礼品
|
||
isGroupBuy: false,
|
||
popupCover: '',
|
||
showInput: true,
|
||
// 是否为县区抽奖礼品
|
||
isCountyLotteryGift: false,
|
||
// 县域抽奖弹窗
|
||
showLotteryGiftPopup: false,
|
||
isEligibleForDraw: false,
|
||
// 封面切换: default/ai
|
||
selectCoverType: 'default',
|
||
aiCoverImgsList: [
|
||
/*
|
||
{
|
||
id: 15,
|
||
cover: 'https://resource.xdd618.com/1/20251202/1764661118796_中秋 2礼品卡1202.png',
|
||
image: 'https://resource.xdd618.com/1/20251202/1764661118797_中秋2 对话框封面.png'
|
||
},
|
||
{
|
||
id: 23,
|
||
cover: 'https://resource.xdd618.com/1/20251202/1764661193306_中秋 3礼品卡1202.png',
|
||
image: 'https://resource.xdd618.com/1/20251202/1764661193306_中秋3 对话框封面.png'
|
||
},
|
||
{
|
||
id: 41,
|
||
cover: 'https://resource.xdd618.com/1/20251202/1764661506015_特色好礼礼品卡1202.png',
|
||
image: 'https://resource.xdd618.com/1/20250902/1756781423380_特色好礼对话框封面定稿.png'
|
||
}
|
||
*/
|
||
],
|
||
showGenerateBtn: true,
|
||
aiCoverGenerateLoading: false,
|
||
settingInfo: {},
|
||
aiCoverDesc: '',
|
||
selectedAiCoverImage: {},
|
||
showAiCoverPicker: false,
|
||
pollInterval: null,
|
||
aiDefaultIndex: 0,
|
||
aiHistoryDefaultIndex: 0,
|
||
showAiHistoryCoverPicker: false,
|
||
aiHistoryCoverImgsList: [],
|
||
showAiImgHistoryListSelect: false
|
||
}
|
||
},
|
||
watch: {
|
||
async couponId(value) {
|
||
if (this.skipCouponIdWatch) {
|
||
this.skipCouponIdWatch = false
|
||
return
|
||
}
|
||
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]
|
||
})
|
||
getAiSystemInfoSetting().then(res => {
|
||
const { success, data } = res
|
||
if (success) {
|
||
this.settingInfo = data
|
||
this.aiCoverDesc = data.giftCardT2IPromptTemplate || ''
|
||
}
|
||
})
|
||
},
|
||
onUnload() {
|
||
this.clearIntervalPoll()
|
||
},
|
||
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: {
|
||
// 封面类型切换
|
||
toggleSelectCoverType(type) {
|
||
if (this.selectCoverType === type) return
|
||
this.selectCoverType = type
|
||
},
|
||
// 获取商品以前使用过的AI礼品卡图片
|
||
aiGiftImageHistoryReq() {
|
||
aiGiftImageHistory({
|
||
productId: this.goodsInfo.productId
|
||
}).then(res => {
|
||
const { success, data } = res
|
||
if (success && data) {
|
||
this.aiHistoryCoverImgsList = data || []
|
||
this.aiHistoryCoverImgsList.map(historyItem => {
|
||
historyItem.cover = historyItem.coverUrl,
|
||
historyItem.image = historyItem.shareUrl,
|
||
historyItem.name = historyItem.name || ''
|
||
})
|
||
}
|
||
})
|
||
},
|
||
handleGenerateAiCover() {
|
||
if (!this.aiCoverDesc || !this.aiCoverDesc.trim()) {
|
||
uni.showToast({
|
||
title: '请先配置文生图提示词',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (this.aiCoverGenerateLoading) return
|
||
if (this.pollInterval) return
|
||
// 点击生成后，禁用按钮，防止重复点击
|
||
this.aiCoverGenerateLoading = true
|
||
aiGiftImageGenerate({
|
||
prompt: this.aiCoverDesc,
|
||
productId: this.goodsInfo.productId
|
||
}).then(res => {
|
||
const { success, data } = res
|
||
if (success) {
|
||
this.aiDefaultIndex = 0
|
||
this.selectedAiCoverImage = {}
|
||
this.aiCoverImgsList = []
|
||
// 轮询查询状态
|
||
this.pollAiImageGenerateStatus()
|
||
}
|
||
}).catch(() => {
|
||
this.aiCoverGenerateLoading = false
|
||
})
|
||
},
|
||
pollAiImageGenerateStatus() {
|
||
const _this = this
|
||
this.pollInterval = setInterval(() => {
|
||
aiGiftImageStatus({
|
||
productId: _this.goodsInfo.productId
|
||
}).then(res => {
|
||
const { success, data } = res
|
||
if (success && data) {
|
||
// status: 0=生成中 / 1=成功 / 2=失败（无任何记录时为 null）
|
||
if (data.status === 1 || data.status === 2) {
|
||
_this.clearIntervalPoll()
|
||
}
|
||
if (data.status === 1 && data.groups && data.groups.length) {
|
||
_this.selectedAiCoverImage = data.groups[0]
|
||
_this.aiCoverImgsList = []
|
||
data.groups.map(item => {
|
||
_this.aiCoverImgsList.push({
|
||
id: item.id,
|
||
cover: item.coverUrl,
|
||
image: item.shareUrl,
|
||
name: item.name || ''
|
||
})
|
||
})
|
||
_this.selectedAiCoverImage = _this.aiCoverImgsList[0]
|
||
// 封面图片
|
||
_this.selectedCover = _this.selectedAiCoverImage.cover
|
||
// 分享对话图片
|
||
_this.giftImage = _this.selectedAiCoverImage.image
|
||
console.log(_this.selectedCover)
|
||
console.log(_this.giftImage)
|
||
_this.showGenerateBtn = false
|
||
_this.aiCoverGenerateLoading = false
|
||
}
|
||
} else {
|
||
_this.aiCoverGenerateLoading = false
|
||
_this.showGenerateBtn = true
|
||
}
|
||
}).catch(() => {
|
||
_this.aiCoverGenerateLoading = false
|
||
_this.showGenerateBtn = true
|
||
})
|
||
}, 2000)
|
||
},
|
||
clearIntervalPoll() {
|
||
if (this.pollInterval) {
|
||
clearInterval(this.pollInterval)
|
||
this.pollInterval = null
|
||
}
|
||
},
|
||
handleGenerateAgain() {
|
||
this.aiDefaultIndex = 0
|
||
this.selectedAiCoverImage = {}
|
||
this.aiCoverImgsList = []
|
||
this.showGenerateBtn = true
|
||
this.aiCoverGenerateLoading = false
|
||
},
|
||
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
|
||
},
|
||
setCouponIdSilently(value) {
|
||
if (this.couponId === value) return
|
||
this.skipCouponIdWatch = true
|
||
this.couponId = value
|
||
},
|
||
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.setCouponIdSilently(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.setCouponIdSilently(0)
|
||
}
|
||
} else if(useDefaultCouponId) {
|
||
this.setCouponIdSilently(res.data.result.defaultCouponId || 0)
|
||
}
|
||
})
|
||
},
|
||
handleShowCover() {
|
||
this.showCoverPicker = true
|
||
},
|
||
handleShowAiCover() {
|
||
this.showAiCoverPicker = true
|
||
},
|
||
handleShowAiHistoryCoverPicker() {
|
||
this.showAiHistoryCoverPicker = true
|
||
},
|
||
toggleShowAiImgHistoryListSelect(show) {
|
||
this.showAiImgHistoryListSelect = show
|
||
this.selectedAiCoverImage = {}
|
||
this.selectedCover = ''
|
||
this.giftImage = ''
|
||
this.templateId = ''
|
||
this.aiHistoryDefaultIndex = 0
|
||
this.aiDefaultIndex = 0
|
||
if (show) {
|
||
if (this.aiHistoryCoverImgsList.length > 0 && this.aiHistoryDefaultIndex === 0) {
|
||
const index = this.aiHistoryCoverImgsList.findIndex(item => item.isLastSelected)
|
||
if (index !== -1) {
|
||
this.aiHistoryDefaultIndex = index
|
||
}
|
||
this.handleSelectAiHistoryCover(this.aiHistoryCoverImgsList[this.aiHistoryDefaultIndex])
|
||
}
|
||
}
|
||
},
|
||
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.setCouponIdSilently(0)
|
||
this.couponTitle = ''
|
||
if(this.isGroupBuy) {
|
||
this.computedTravelGroupPrice(false)
|
||
} else {
|
||
this.computedPrice(this.goodsInfo.cartNum, 1)
|
||
}
|
||
return
|
||
}
|
||
this.setCouponIdSilently(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
|
||
if (this.selectCoverType === 'ai') {
|
||
this.selectedCover = this.selectedAiCoverImage.cover
|
||
this.giftImage = this.selectedAiCoverImage.image
|
||
this.templateId = this.selectedAiCoverImage.id
|
||
}
|
||
this.setCouponIdSilently('')
|
||
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.setCouponIdSilently(0)
|
||
}
|
||
} else if(!f) {
|
||
this.setCouponIdSilently(res.data.result.defaultCouponId || 0)
|
||
this.$forceUpdate()
|
||
}
|
||
this.payPrice = res.data.result.payPrice
|
||
this.computedResult = res.data.result
|
||
this.$forceUpdate()
|
||
})
|
||
},
|
||
payNowToSendGift() {
|
||
if (this.selectCoverType === 'default') {
|
||
this.showPayPicker = true
|
||
return
|
||
}
|
||
if (this.selectCoverType === 'ai') {
|
||
if (!this.selectedAiCoverImage.id) {
|
||
uni.showToast({
|
||
title: '请生成礼包封面再操作',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
} else {
|
||
this.showPayPicker = true
|
||
}
|
||
return
|
||
}
|
||
},
|
||
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
|
||
},
|
||
onAiCoverConfirm(cover) {
|
||
// 封面图片
|
||
this.selectedCover = cover.cover
|
||
// 分享对话图片
|
||
this.giftImage = cover.image
|
||
if (this.selectCoverType === 'ai') {
|
||
this.selectedAiCoverImage = cover
|
||
this.aiDefaultIndex = this.aiCoverImgsList.findIndex(item => item.id === cover.id)
|
||
}
|
||
},
|
||
onAiHistoryCoverConfirm(cover) {
|
||
// 封面图片
|
||
this.selectedCover = cover.cover
|
||
// 分享对话图片
|
||
this.giftImage = cover.image
|
||
if (this.selectCoverType === 'ai') {
|
||
this.selectedAiCoverImage = cover
|
||
this.aiHistoryDefaultIndex = this.aiHistoryCoverImgsList.findIndex(item => item.id === cover.id)
|
||
}
|
||
},
|
||
handleSelectAiCover(cover) {
|
||
this.selectedAiCoverImage = cover
|
||
this.aiDefaultIndex = this.aiCoverImgsList.findIndex(item => item.id === cover.id)
|
||
this.selectedCover = cover.cover
|
||
this.giftImage = cover.image
|
||
this.templateId = cover.id
|
||
},
|
||
handleSelectAiHistoryCover(cover) {
|
||
this.selectedAiCoverImage = cover
|
||
this.aiHistoryDefaultIndex = this.aiHistoryCoverImgsList.findIndex(item => item.id === cover.id)
|
||
this.selectedCover = cover.cover
|
||
this.giftImage = cover.image
|
||
this.templateId = cover.id
|
||
},
|
||
showTips() {
|
||
this.$refs.giftTips.showTips = true
|
||
},
|
||
|
||
getGift() {
|
||
const params = {
|
||
cartId: this.cartId,
|
||
}
|
||
this.loading = true
|
||
getGiftCardSendOrderConfirm(params).then(res => {
|
||
const data = res.data
|
||
const temp = this.isGroupBuy ? data.giftCardTemplates : data.giftCardTemplates.filter(e => e.isTravelGroup === 0)
|
||
const hasSpecial = data.giftCardTemplates.map(e => e.id).includes(data.specialGiftCardTemplate.id)
|
||
const initialCoverList = hasSpecial ? [...temp] : [...temp, data.specialGiftCardTemplate]
|
||
const goodsInfo = data.cartInfo[0]
|
||
const { coverList, template } = this.adjustCoverListForProductStory(initialCoverList, goodsInfo && goodsInfo.productInfo, data.specialGiftCardTemplate)
|
||
this.coverList = coverList
|
||
this.giftNotice = data.giftCardGiftNotice
|
||
this.orderKey = data.orderKey
|
||
this.goodsInfo = goodsInfo
|
||
this.syncCountyLotteryGiftFlag(goodsInfo)
|
||
this.templateId = template.id
|
||
this.selectedCover = template.cover
|
||
this.giftImage = template.image
|
||
this.blindImage = data.giftCardBlindBoxShareImage
|
||
this.defaultIndex = this.coverList.findIndex(item => item.id === this.templateId)
|
||
// if(!this.couponId) {
|
||
// this.couponId = data.couponList.usable[0] && data.couponList.usable[0].id || ''
|
||
// }
|
||
this.computedPrice(this.goodsInfo.cartNum)
|
||
this.aiGiftImageHistoryReq()
|
||
this.isLoad = true
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
isDrawEligible(flag) {
|
||
return flag === true || flag === 1 || flag === '1' || flag === 'true'
|
||
},
|
||
handleGiftPaySuccess(data) {
|
||
if (data.giftCard) {
|
||
this.selectedCover = data.giftCard.cover || this.selectedCover
|
||
this.giftImage = data.giftCard.giftCardImage || this.giftImage
|
||
}
|
||
this.isPayOk = true
|
||
this.isEligibleForDraw = this.isDrawEligible(data.isEligibleForDraw)
|
||
if (this.isCountyLotteryGift && this.isEligibleForDraw) {
|
||
this.showLotteryGiftPopup = true
|
||
}
|
||
this.aiGiftImageHistoryReq()
|
||
},
|
||
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.selectCoverType === 'default' ? this.templateId : '',
|
||
aiGiftImageId: this.selectCoverType === 'default' ? '' : this.selectedAiCoverImage.id,
|
||
cover: this.selectedCover,
|
||
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.selectCoverType === 'default' ? this.templateId : '',
|
||
aiGiftImageId: this.selectCoverType === 'default' ? '' : this.selectedAiCoverImage.id,
|
||
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);
|
||
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);
|
||
|
||
}).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
|
||
});
|
||
// Fix bug#6073-订单超时后需自动刷新该页面
|
||
if (err.res.statusCode === 5113) {
|
||
if(this.isGroupBuy) {
|
||
this.getGroupBuyInfo()
|
||
} else {
|
||
this.getGift()
|
||
}
|
||
}
|
||
}).finally(() => {
|
||
this.isShowPayPwdPop = false;
|
||
this.$refs.payPwdPop.clear();//清空支付密码
|
||
this.$refs.payPwdPop.close();//关闭支付密码弹窗
|
||
});
|
||
},
|
||
getGroupBuyInfo() {
|
||
const params = {
|
||
travelGroupProductId: this.cartId
|
||
}
|
||
this.isLoad = false
|
||
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)
|
||
this.isLoad = 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{
|
||
margin: 32rpx auto 68rpx auto;
|
||
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;
|
||
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%;
|
||
}
|
||
.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;
|
||
}
|
||
.top-tab-nav-wrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.item1 {
|
||
.txt {
|
||
left: -24rpx;
|
||
}
|
||
}
|
||
.item2 {
|
||
.txt {
|
||
padding-left: 32rpx;
|
||
}
|
||
}
|
||
.item {
|
||
position: relative;
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
line-height: 80rpx;
|
||
&.active {
|
||
color: #fff;
|
||
.tab-img {
|
||
display: block;
|
||
}
|
||
}
|
||
.txt {
|
||
position: relative;
|
||
z-index: 5;
|
||
}
|
||
.tab-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
.ai-cover-wrap {
|
||
padding: 20rpx;
|
||
margin-top: -1px;
|
||
box-sizing: border-box;
|
||
border-radius: 40rpx 0 40rpx 40rpx;
|
||
background-color: #C52932;
|
||
.ai-cover-body {
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 40rpx;
|
||
background-color: #fff;
|
||
}
|
||
.ai-cover-container {
|
||
.prompt {
|
||
.prompt-textarea {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 0 20rpx 12rpx 20rpx;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
}
|
||
.prompt-tips {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.imgs-list-wrap {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: baseline;
|
||
gap: 24rpx;
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
&.scrollable {
|
||
justify-content: flex-start;
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
}
|
||
}
|
||
.img-image {
|
||
display: block;
|
||
height: 176rpx;
|
||
flex-shrink: 0;
|
||
&.active {
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
}
|
||
.ai-cover-bottom {
|
||
margin-top: 12rpx;
|
||
.btn-wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.loading-img {
|
||
display: block;
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
.btn + .btn {
|
||
margin-left: 20rpx;
|
||
}
|
||
.btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
border-radius: 40rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0 32rpx;
|
||
border: 2rpx solid #c52733;
|
||
color: #fff;
|
||
background: #c52733;
|
||
.icon {
|
||
display: block;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
.btn2 {
|
||
background: #fff;
|
||
color: #c52733;
|
||
border: 2rpx solid #c52733;
|
||
}
|
||
}
|
||
}
|
||
</style>
|