Task：礼品赠送/送礼
This commit is contained in:
modendeveloper
@@ -13,8 +13,8 @@
|
||||
:circular="true"
|
||||
:indicator-dots="false"
|
||||
@change="onChange"
|
||||
previous-margin="120rpx"
|
||||
next-margin="120rpx"
|
||||
previous-margin="160rpx"
|
||||
next-margin="160rpx"
|
||||
class="cover-swiper"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in list" :key="index" >
|
||||
@@ -29,6 +29,7 @@
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">红包封面在对方领取时展示</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
@@ -66,12 +67,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tips{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.cover-swiper{
|
||||
height: 540rpx;
|
||||
}
|
||||
.cover-picker {
|
||||
padding: 30rpx;
|
||||
.cover-title {
|
||||
padding: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
@@ -16,10 +16,57 @@
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="v12-pa-2 ">
|
||||
<textarea class="v12-font-28 v12-secondary-dark-text" placeholder="礼笺轻启，礼藏心意" name="" id="" cols="30" rows="10"></textarea>
|
||||
<textarea
|
||||
v-model="message"
|
||||
class="v12-font-28 v12-secondary-dark-text"
|
||||
placeholder="礼笺轻启，礼藏心意"
|
||||
cols="30"
|
||||
rows="10"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="gift-good-card">
|
||||
<view>
|
||||
<image :src="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">
|
||||
{{ goodsInfo.productInfo.storeName }}
|
||||
</view>
|
||||
<view class="gift-sku">
|
||||
{{ 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">{{ goodsInfo.productInfo.otPrice }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-number-box
|
||||
v-model="goodsInfo.cartNum"
|
||||
:max="goodsInfo['productInfo']['attrInfo']['stock']"
|
||||
integer
|
||||
disabledInput
|
||||
iconStyle="color: #fff"
|
||||
class="num-step"
|
||||
>
|
||||
<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>
|
||||
<view class="num-input tc v12-num-input">{{ goodsInfo['cartNum'] }}</view>
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="gift-good-card"></view>
|
||||
<view class="swich-btn">
|
||||
<view class="v12-font-28 v12-dark-text">是否支持好友转赠</view>
|
||||
<view>
|
||||
@@ -55,6 +102,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
canTransfe: false,
|
||||
message: '',
|
||||
cartId: '',
|
||||
couponId: '',
|
||||
coverList: [],
|
||||
@@ -97,12 +145,76 @@ export default {
|
||||
this.orderKey = res.data.orderKey
|
||||
this.goodsInfo = res.data.cartInfo[0]
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 确认赠送
|
||||
* @param {*}
|
||||
*/
|
||||
confirmGift() {
|
||||
const params = {
|
||||
orderKey: this.orderKey,
|
||||
cartId: this.cartId,
|
||||
couponId: this.couponId,
|
||||
cover: this.selectedCover,
|
||||
canTransfe: this.canTransfe
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.info-wrap{
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.v12-num-input{
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
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;
|
||||
border: 1px solid #E6E6E6;
|
||||
background-color: 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;
|
||||
@@ -143,9 +255,12 @@ export default {
|
||||
background: #d2d2d2;
|
||||
}
|
||||
.gift-good-card{
|
||||
height: 240rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.swich-btn{
|
||||
|
||||
Reference in New Issue
Block a user