积分商城相关页面添加
This commit is contained in:
267
scoreShop/detail/index.vue
Normal file
267
scoreShop/detail/index.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view class="color-333 u-font-28">
|
||||
<view class="top" :style="{ backgroundImage: 'url(' + imgs.bg + ')' }">
|
||||
<view class="name"> 这里是优惠券名称啊啊啊啊 </view>
|
||||
<view class="info"> 15元代金券（满200可用） </view>
|
||||
</view>
|
||||
<view class="sku">
|
||||
<view>
|
||||
<view>
|
||||
<text class="price">800</text>
|
||||
<text class="text">积分</text>
|
||||
<text class="price">+</text>
|
||||
<text class="price">9.99</text>
|
||||
<text class="text">元</text>
|
||||
</view>
|
||||
<view class="u-m-t-16 text"> 限购2份 </view>
|
||||
</view>
|
||||
<text class="text">剩余：99999</text>
|
||||
</view>
|
||||
<view class="goods-name">这里是商品名称啊啊啊啊啊</view>
|
||||
<view class="bg-f7" style="height: 24rpx"></view>
|
||||
<view class="desc">
|
||||
<view class="u-flex">
|
||||
<view class="color-666 no-wrap">领取方式</view>
|
||||
<view class="u-m-l-16">系统发放</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-16 u-col-baseline">
|
||||
<view class="color-666 no-wrap">特别说明</view>
|
||||
<view class="u-m-l-16"
|
||||
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-f7" style="height: 24rpx"></view>
|
||||
|
||||
<view class="goods-detail">
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="title">商品详情</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 72px"></view>
|
||||
<view class="fixed-bottom u-flex u-row-center">
|
||||
<view class="btn" @click="exchangeClick">立即兑换</view>
|
||||
</view>
|
||||
|
||||
<!-- 兑换确认弹窗start -->
|
||||
<modal
|
||||
v-model="modalData.show"
|
||||
title="立即兑换确认"
|
||||
@confirm="confirmExchange"
|
||||
>
|
||||
<view style="padding: 32rpx 50rpx">
|
||||
<view class="u-font-32"
|
||||
>您将消耗{800}积分，兑换商品{这里是商品名称}，是否确认兑换</view
|
||||
>
|
||||
<view class="u-m-t-20 waring u-flex u-font-32 u-col-center">
|
||||
<up-icon name="info-circle" size="16" color="#FF9900"></up-icon>
|
||||
<view class="u-m-l-24"
|
||||
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</modal>
|
||||
|
||||
<!-- 需要支付的弹窗 -->
|
||||
<up-popup
|
||||
:show="popupData.show"
|
||||
mode="bottom"
|
||||
closeOnClickOverlay
|
||||
@close="popupData.show = false"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<view class="popup-content-top">
|
||||
<text class="color-666">领取方式</text>
|
||||
<text class="u-m-l-16">需前往店铺自行兑换领取</text>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="u-flex">
|
||||
<image class="cover"></image>
|
||||
<view class="u-flex u-flex-1 u-row-between u-p-l-16 u-col-center">
|
||||
<view>
|
||||
<view class="u-font-32 font-bold">这里是商品名称</view>
|
||||
<view class="u-m-t-54 color-666">8000积分+9.99元</view>
|
||||
</view>
|
||||
<text class="color-666">X1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 waring u-flex u-col-center">
|
||||
<up-icon name="info-circle" size="16" color="#FF9900"></up-icon>
|
||||
<view class="u-m-l-16"
|
||||
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom font-bold text-right">
|
||||
<text>合计 8000积分 + ¥9.99</text>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-42 u-flex u-row-center">
|
||||
<view class="btn">确认兑换</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
<!-- 兑换确认弹窗end -->
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import modal from "@/scoreShop/components/modal.vue";
|
||||
const imgs = {
|
||||
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/9fd6a3ad2b384f6cb4e88ed6b77bd334.png",
|
||||
};
|
||||
const modalData = reactive({
|
||||
show: false,
|
||||
});
|
||||
|
||||
const popupData = reactive({
|
||||
show: false,
|
||||
});
|
||||
function exchangeClick() {
|
||||
modalData.show = true;
|
||||
}
|
||||
function confirmExchange() {
|
||||
modalData.show = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top {
|
||||
margin: 14rpx 18rpx;
|
||||
background-size: cover;
|
||||
height: 350rpx;
|
||||
box-sizing: border-box;
|
||||
padding-left: 70rpx;
|
||||
padding-top: 95rpx;
|
||||
|
||||
.name {
|
||||
color: #000000;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.info {
|
||||
color: #333333;
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 62rpx;
|
||||
}
|
||||
}
|
||||
.sku {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 36rpx;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, #ff4a63 0%, #fd1f48 100%);
|
||||
.price {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.goods-name {
|
||||
padding: 20rpx 28rpx;
|
||||
background: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
.desc {
|
||||
padding: 32rpx 28rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.goods-detail {
|
||||
padding: 32rpx;
|
||||
.title {
|
||||
position: relative;
|
||||
padding: 0 22rpx;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
width: 70rpx;
|
||||
height: 2rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(90deg, #f7f8f9 0%, #c9cbcc 100%);
|
||||
}
|
||||
&::after {
|
||||
left: 100%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
width: 70rpx;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(90deg, #c9cbcc 0%, #f7f8f9 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 2rpx);
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
.btn {
|
||||
padding: 16rpx 62rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #9c571f;
|
||||
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
|
||||
&.gray {
|
||||
background: #9999992b;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.waring {
|
||||
background-color: rgba(255, 204, 0, 0.09);
|
||||
padding: 32rpx 24rpx;
|
||||
color: #ff8d28;
|
||||
}
|
||||
.popup-content {
|
||||
font-size: 28rpx;
|
||||
min-height: 300px;
|
||||
.popup-content-top {
|
||||
padding: 32rpx 28rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.goods-info {
|
||||
padding: 44rpx 28rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
.cover {
|
||||
width: 184rpx;
|
||||
height: 184rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #d9d9d9;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
padding: 20rpx 28rpx 20rpx 20rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
padding: 22rpx 214rpx;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
border-radius: 66rpx;
|
||||
background: #e8ad7b;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
font-size: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user