755 lines
23 KiB
Vue
755 lines
23 KiB
Vue
<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="!isPayOk"
|
||
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>
|
||
<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 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
|
||
: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>
|
||
</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,
|
||
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: ''
|
||
}
|
||
},
|
||
watch: {
|
||
async couponId(value) {
|
||
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) {
|
||
this.cartId = opts.cartId
|
||
this.isGroupBuy = opts.isGroupBuy === '1'
|
||
// this.couponId = opts.couponId || 0
|
||
this.discount = opts.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: {
|
||
// 团购价计算
|
||
computedTravelGroupPrice(useDefaultCouponId) {
|
||
const params = {
|
||
key: this.orderKey,
|
||
couponId: this.couponId
|
||
}
|
||
computedSojoumGroupBuyGiftOrderPrice(params).then(res => {
|
||
this.computedResult = res.data.result
|
||
this.couponList = res.data.result.couponList
|
||
this.payPrice = res.data.result.payPrice
|
||
this.$forceUpdate()
|
||
if(useDefaultCouponId) {
|
||
this.couponId = res.data.result.defaultCouponId || 0
|
||
}
|
||
})
|
||
},
|
||
handleShowCover() {
|
||
this.showCoverPicker = true
|
||
},
|
||
showCouponsPopup() {
|
||
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(!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
|
||
this.coverList = [...res.data.giftCardTemplates, res.data.specialGiftCardTemplate]
|
||
this.cartId = res.data.cartInfo[0].id
|
||
this.giftNotice = res.data.giftCardGiftNotice
|
||
this.orderKey = res.data.orderKey
|
||
this.goodsInfo = res.data.cartInfo[0]
|
||
this.templateId = res.data.specialGiftCardTemplate.id
|
||
this.defaultIndex = this.coverList.findIndex(item => item.id === this.templateId)
|
||
console.log(this.defaultIndex, 'defaultIndex');
|
||
this.selectedCover = res.data.specialGiftCardTemplate.cover
|
||
this.giftImage = res.data.specialGiftCardTemplate.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.isPayOk = true
|
||
setTimeout(() => {
|
||
this.isPayOk = false
|
||
},10)
|
||
this.$forceUpdate()
|
||
},
|
||
/**
|
||
* 计算价格
|
||
* @param {Number} num 数量
|
||
* @param {Boolean} f 有值时 couponId不取默认值
|
||
*/
|
||
computedPrice(num, f) {
|
||
const params = {
|
||
cartId: this.cartId,
|
||
couponId: this.couponId,
|
||
cartNum : num
|
||
}
|
||
if(this.discount) {
|
||
params.discount = this.discount
|
||
}
|
||
getGiftCardSendOrderAmount(this.orderKey, params).then(res => {
|
||
this.couponList = res.data.result.couponList
|
||
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)
|
||
this.coverList = res.data.giftCardTemplates.map(e => e.id).includes(res.data.specialGiftCardTemplate.id) ? [...temp] : [...temp, res.data.specialGiftCardTemplate]
|
||
this.giftNotice = res.data.giftCardGiftNotice
|
||
this.orderKey = res.data.orderKey
|
||
this.goodsInfo = res.data.cartInfo[0]
|
||
this.templateId = res.data.specialGiftCardTemplate.id
|
||
this.selectedCover = res.data.specialGiftCardTemplate.cover
|
||
this.giftImage = res.data.specialGiftCardTemplate.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
|
||
})
|
||
},
|
||
/**
|
||
* 确认赠送
|
||
* @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.couponId,
|
||
payType: this.payType,
|
||
} : {
|
||
orderKey: this.orderKey,
|
||
from: 'routine',
|
||
cartId: this.cartId,
|
||
couponId: this.couponId,
|
||
recipientsNum: this.goodsInfo.cartNum,
|
||
templateId: this.templateId,
|
||
message : this.message || '礼笺轻启，礼藏心意',
|
||
cover: this.selectedCover,
|
||
canTransfer: this.canTransfer ? 1 : 0,
|
||
isBlind: this.isBlind ? 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.isPayOk = true;
|
||
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.isPayOk = true;
|
||
|
||
}).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: 100rpx;
|
||
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;
|
||
}
|
||
</style> |