团购券详情
This commit is contained in:
@@ -1,11 +1,515 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='swiper-container'>
|
||||
<swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
|
||||
<swiper-item v-for='(item,index) in bannerList' :key='index'>
|
||||
<image :src='assetsUrl("test_bg.png")' />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class='indicator'>
|
||||
<text>{{ swiperIndex + 1 }}</text>
|
||||
<text>/{{ bannerList.length }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='countdown c-flex-row'>
|
||||
<view class='super-second-kill'>
|
||||
超级\n秒杀
|
||||
</view>
|
||||
<view class='price c-flex-column' style='flex: 1'>
|
||||
<text>52</text>
|
||||
<text>￥65</text>
|
||||
</view>
|
||||
<view class='countdown-time c-flex-column'>
|
||||
<view class='c-flex-row'>180天
|
||||
<text class='time'>23</text>
|
||||
:
|
||||
<text class='time'>23</text>
|
||||
:
|
||||
<text class='time'>23</text>
|
||||
</view>
|
||||
<text>距离活动结束仅剩</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='goods-info-view c-flex-column'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='goods-price accent-text-color'>39.89</text>
|
||||
<text>销量2653</text>
|
||||
</view>
|
||||
|
||||
<view class='c-flex-row'>
|
||||
<text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装</text>
|
||||
<view class='share-button c-flex-column'>
|
||||
<image :src='assetsUrl("ic_share.png")'></image>
|
||||
<button class='btn' plain open-type='share'>分享</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='goods-sku-view c-flex-column'>
|
||||
<view class='c-flex-row' @click.stop='showSkuDialog'>
|
||||
<text>选择</text>
|
||||
<text>规格 颜色/尺码</text>
|
||||
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
|
||||
<text>共1种颜色可选</text>
|
||||
</view>
|
||||
<view class='divider' style='width:auto;height: 0.5rpx;margin-left: 100rpx' />
|
||||
<view class='c-flex-row' @click.stop='showSkuDialog'>
|
||||
<text>参数</text>
|
||||
<text>品牌 风格 季节 款号</text>
|
||||
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='recommend-view c-flex-column'>
|
||||
<text>浏览此商品的客户还浏览了</text>
|
||||
<scroll-view scroll-x>
|
||||
<view style='display: inline-block' v-for='(item, index) in [1, 2, 3, 4]'
|
||||
:key='index'>
|
||||
<view class='recommend-item c-flex-column'>
|
||||
<image :src='assetsUrl("test_bg.png")' />
|
||||
<text>女童夏装套装…</text>
|
||||
<text class='goods-price'>22</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class='goods-detail c-flex-column'>
|
||||
<text>商品详情</text>
|
||||
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
|
||||
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
|
||||
<image :src='assetsUrl("test_bg.png")' mode='aspectFill' />
|
||||
</view>
|
||||
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<view class='small-button-view' @click.stop='goBack'>
|
||||
<view class='small-button-item'>
|
||||
<image :src='assetsUrl("ic_goods_store.png")' />
|
||||
<text>商家</text>
|
||||
</view>
|
||||
|
||||
<view class='small-button-item' @click.stop='goPath("/pages/mine/subs/order/order-list")'>
|
||||
<image :src='assetsUrl("ic_goods_order.png")' />
|
||||
<text>订单</text>
|
||||
</view>
|
||||
|
||||
<view class='small-button-item'>
|
||||
<view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
|
||||
<image :src='assetsUrl("ic_goods_shoppingcart.png")' />
|
||||
<text>12</text>
|
||||
</view>
|
||||
<text>购物车</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='primary-button-view c-flex-row'>
|
||||
<view class='add-shoppingcart-button' @click.stop='addShoppingCart'>加入购物车</view>
|
||||
<view class='place-order-button' @click.stop='placeOrder'>立即下单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<sku-dialog ref='skuDialogRef' />
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { goPath } from '@/utils';
|
||||
import SkuDialog from '@/components/sku-dialog.vue';
|
||||
|
||||
const skuDialogRef = ref();
|
||||
|
||||
const bannerList = ref([1, 2, 3, 4]);
|
||||
const swiperIndex = ref(0);
|
||||
|
||||
const swiperChange = (e: any) => {
|
||||
swiperIndex.value = e.detail.current;
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const showSkuDialog = () => {
|
||||
skuDialogRef.value.show();
|
||||
};
|
||||
|
||||
const addShoppingCart = () => {
|
||||
uni.showToast({
|
||||
title: '加入购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
|
||||
const placeOrder = () => {
|
||||
goPath('/pages/mall/subs/order/order-confirm');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
position: relative;
|
||||
|
||||
.swiper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 750rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 750rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background: rgba(1, 1, 1, 0.5);
|
||||
border-radius: 45rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
padding: 5rpx 25rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.countdown {
|
||||
display: flex;
|
||||
height: 130rpx;
|
||||
position: relative;
|
||||
padding: 15rpx 30rpx;
|
||||
background: #F32B2B;
|
||||
background-image: url("../../../static/images/bg_groupbuy_countdown.png");
|
||||
background-size: 100% 100%;
|
||||
|
||||
.super-second-kill {
|
||||
display: flex;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #FFFFFF;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
margin-right: 23rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #FFFFFF;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
font-size: 55rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(1):before {
|
||||
content: '¥ ';
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-time {
|
||||
color: #FFFFFF;
|
||||
align-items: center;
|
||||
|
||||
view:nth-of-type(1) {
|
||||
margin-bottom: 20rpx;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 7rpx 7rpx 7rpx 7rpx;
|
||||
color: #F32B2B;
|
||||
}
|
||||
|
||||
.time:nth-of-type(1){
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
.time:nth-of-type(3){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
text:not(.time):nth-of-type(1) {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-info-view {
|
||||
background: #FFFFFF;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
view:nth-of-type(1) {
|
||||
text:nth-of-type(1) {
|
||||
display: flex;
|
||||
font-size: 40rpx;
|
||||
text-align: center;
|
||||
align-items: flex-end;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-price:before {
|
||||
content: "¥";
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 5rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
view:nth-of-type(2) {
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.share-button {
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #00000000;
|
||||
font-size: 24rpx;
|
||||
color: #636566;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-sku-view {
|
||||
background: #FFFFFF;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
view:nth-of-type(n+1) {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 105rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
width: 100rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 13rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(3) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
top: 80rpx;
|
||||
left: 100rpx;
|
||||
}
|
||||
}
|
||||
|
||||
view:nth-of-type(1) {
|
||||
align-items: flex-start;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-view {
|
||||
background: #FFFFFF;
|
||||
padding: 20rpx 30rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
white-space: nowrap;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.recommend-item {
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #F32B2B;
|
||||
}
|
||||
|
||||
.goods-price:before {
|
||||
content: "¥";
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-view {
|
||||
background: #FFFFFF;
|
||||
padding: 20rpx 30rpx 78rpx 33rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.small-button-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
margin-right: 35rpx;
|
||||
|
||||
.small-button-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shoppingcart-count {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: -15rpx;
|
||||
right: -20rpx;
|
||||
min-width: 35rpx;
|
||||
min-height: 30rpx;
|
||||
background: #F32B2B;
|
||||
color: #FFFFFF;
|
||||
padding: 2rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary-button-view {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
|
||||
.add-shoppingcart-button {
|
||||
display: flex;
|
||||
width: 224rpx;
|
||||
height: 80rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #FFE2E2;
|
||||
color: #F32B2B;
|
||||
border-radius: 40rpx 0 0 40rpx;
|
||||
}
|
||||
|
||||
.place-order-button {
|
||||
display: flex;
|
||||
width: 198rpx;
|
||||
height: 80rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F32B2B;
|
||||
color: #FFFFFF;
|
||||
border-radius: 0 40rpx 40rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
background: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
|
||||
text {
|
||||
margin: 20rpx 30rpx;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<scroll-view class='scroll-view'>
|
||||
<view class='c-flex-column' v-for='(item, index) in 10' :key='index'>
|
||||
<view class='item c-flex-row'>
|
||||
<view class='item c-flex-row' @click.stop='goPath("/pages/common/groupbuy/detail")'>
|
||||
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
|
||||
<view class='c-flex-column' style='flex: 1'>
|
||||
<view class='goods-name'>女童夏装套装洋气装短袖阔腿裤短…</view>
|
||||
@@ -35,6 +35,7 @@
|
||||
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { getGroupBuyList } from '@/api/groupbuy';
|
||||
import { goPath } from '@/utils';
|
||||
|
||||
const tabIndex = ref(0);
|
||||
|
||||
@@ -83,7 +84,7 @@ onLoad((e) => {
|
||||
background: #FFFFFF;
|
||||
|
||||
.item {
|
||||
padding: 40rpx 30rpx;
|
||||
padding: 20rpx 30rpx 40rpx 30rpx;
|
||||
background: #FFFFFF;
|
||||
position: relative;
|
||||
|
||||
|
||||
@@ -53,12 +53,12 @@ const register = () => {
|
||||
.content {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background: #F32B2B;
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -68,8 +68,9 @@ const register = () => {
|
||||
.card-view {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
margin: 230px 50rpx 0 50rpx;
|
||||
margin: 0 50rpx;
|
||||
padding: 40rpx;
|
||||
top: 600rpx;
|
||||
position: relative;
|
||||
|
||||
.mobile-view {
|
||||
|
||||
@@ -56,6 +56,13 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class='goods-detail c-flex-column'>
|
||||
<text>商品详情</text>
|
||||
<image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
|
||||
<image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
|
||||
<image :src='assetsUrl("test_bg.png")' mode='aspectFill'/>
|
||||
</view>
|
||||
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<view class='small-button-view' @click.stop='goBack'>
|
||||
<view class='small-button-item'>
|
||||
@@ -89,7 +96,7 @@
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { goPath } from '@/utils';
|
||||
import SkuDialog from '../components/sku-dialog.vue';
|
||||
import SkuDialog from '@/components/sku-dialog.vue';
|
||||
|
||||
const skuDialogRef = ref();
|
||||
|
||||
@@ -390,4 +397,19 @@ const placeOrder = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
background: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
text {
|
||||
margin: 20rpx 30rpx;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -101,7 +101,7 @@
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import PaymentDialog from '../components/payment-dialog.vue';
|
||||
import PaymentDialog from '@/components/payment-dialog.vue';
|
||||
import CouponDialog from '@/pages/mall/subs/components/coupon-dialog.vue';
|
||||
import { goPath } from '@/utils';
|
||||
|
||||
|
||||
BIN
src/static/images/bg_groupbuy_countdown.png
Normal file
BIN
src/static/images/bg_groupbuy_countdown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Reference in New Issue
Block a user