团购券详情
This commit is contained in:
215
src/components/sku-dialog.vue
Normal file
215
src/components/sku-dialog.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<uni-popup ref='popupRef' type='bottom' :mask-click='false' @touchmove.stop.prevent=''>
|
||||
<view class='content'>
|
||||
<view class='c-flex-row' style='align-items: flex-start'>
|
||||
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
|
||||
<view class='c-flex-column' style='flex: 1'>
|
||||
<text class='goods-name'>女童夏装套装洋气装短袖阔…</text>
|
||||
<text class='goods-price'>29.90</text>
|
||||
</view>
|
||||
<image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
|
||||
</view>
|
||||
<view class='sku-view c-flex-column'>
|
||||
<view class='sku-title'>颜色</view>
|
||||
<view class='sku-color-list c-flex-row'>
|
||||
<view class='sku-item' :class='{"sku-item-active":currentColorIndex==index,"sku-item-disabled":index==3}'
|
||||
v-for='(item, index) in skuColorList' :key='index'
|
||||
@click='colorChange(index)'>
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='sku-title' style='margin-top: 43rpx'>尺码</view>
|
||||
<view class='sku-color-list c-flex-row'>
|
||||
<view class='sku-item' :class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":index==3}'
|
||||
v-for='(item, index) in skuSizeList' :key='index'
|
||||
@click='sizeChange(index)'>
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='c-flex-row' style='margin-top: 52rpx'>
|
||||
<text class='sku-title'>购买数量</text>
|
||||
|
||||
<view class='count-change-view c-flex-row'>
|
||||
<view class='count-image' @click.stop='countChange(false)'>
|
||||
<image :src='assetsUrl("ic_reduce.png")' />
|
||||
</view>
|
||||
<text>{{ goodsCount }}</text>
|
||||
<view class='count-image' @click.stop='countChange(true)'>
|
||||
<image :src='assetsUrl("ic_plus.png")' />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class='primary-button' @click='confirm'>确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const popupRef = ref();
|
||||
const skuColorList = ref(['黑色', '白色']);
|
||||
const currentColorIndex = ref(0);
|
||||
const skuSizeList = ref(['120cm', '130cm', '140cm', '150cm', '160cm', '170cm']);
|
||||
const currentSizeIndex = ref(0);
|
||||
const goodsCount = ref(1);
|
||||
|
||||
const show = () => {
|
||||
popupRef.value.open();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
popupRef.value.close();
|
||||
};
|
||||
|
||||
const colorChange = (index: number) => {
|
||||
currentColorIndex.value = index;
|
||||
};
|
||||
|
||||
const sizeChange = (index: number) => {
|
||||
currentSizeIndex.value = index;
|
||||
};
|
||||
|
||||
const countChange = (isPlus: boolean) => {
|
||||
if(isPlus) {
|
||||
goodsCount.value++;
|
||||
} else {
|
||||
if(goodsCount.value > 0) {
|
||||
goodsCount.value--;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const confirm = () => {
|
||||
popupRef.value.close();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding: 23rpx 30rpx 78rpx 30rpx;
|
||||
|
||||
.goods-image {
|
||||
width: 186rpx;
|
||||
height: 186rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-top: -50rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #D95554;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.goods-price:before {
|
||||
content: '¥';
|
||||
font-size: 28rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.close-image {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
|
||||
.sku-view {
|
||||
margin-top: 30rpx;
|
||||
|
||||
.sku-title {
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sku-color-list {
|
||||
display: grid;
|
||||
grid-template-columns:repeat(4, 1fr);
|
||||
margin-top: 20rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.sku-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F2F2F2;
|
||||
border-radius: 26rpx;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
padding: 7rpx 32rpx;
|
||||
}
|
||||
|
||||
.sku-item-active {
|
||||
@extend .sku-item;
|
||||
background: #FFF1F1;
|
||||
color: #D95554;
|
||||
}
|
||||
|
||||
.sku-item-disabled {
|
||||
@extend .sku-item;
|
||||
background: #F2F2F2;
|
||||
color: #BEBEBE;
|
||||
}
|
||||
|
||||
.count-change-view {
|
||||
.count-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
background: #FBFBFB;
|
||||
|
||||
image {
|
||||
width: 15rpx;
|
||||
height: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.count-image:nth-of-type(2) image {
|
||||
width: 17rpx;
|
||||
height: 17rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
display: flex;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
background: #F2F2F2;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
width: 100%;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user