Waiting/suke-mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

团购券详情

Browse Source
This commit is contained in:
Waiting
2024-03-16 22:02:26 +08:00
parent 351e20f0c0
commit 8b0ad91bd4
10 changed files with 536 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/pages/mall/subs/components/payment-dialog.vue
View File

@@ -1,109 +0,0 @@
<template>
<uni-popup type='bottom' ref='popupRef' :mask-click='false' @touchmove.stop.prevent=''>
<view class='popup-content c-flex-column'>
<view class='c-flex-row'>
<image :src='assetsUrl("ic_back.png")' @click.stop='close()' />
<text>选择支付方式</text>
</view>
<view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_WECHAT)'>
<image :src='assetsUrl("ic_wechat.png")' />
<text>微信支付</text>
<image :src='assetsUrl(currentType===PAYMENT_TYPE_WECHAT?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
</view>
<view class='divider' style='margin: 40rpx 0' />
<view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_BALANCE)'>
<image :src='assetsUrl("ic_balance.png")' />
<text>余额（剩余￥100）</text>
<image :src='assetsUrl(currentType===PAYMENT_TYPE_BALANCE?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
</view>
</view>
</uni-popup>
</template>
<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
const popupRef = ref();
const PAYMENT_TYPE_WECHAT = 0;
const PAYMENT_TYPE_BALANCE = 1;
const currentType = ref(PAYMENT_TYPE_WECHAT);
const emits = defineEmits(['change']);
const show = () => {
popupRef.value.open();
};
const close = () => {
popupRef.value.close();
};
const doPayment = (paymentType: number) => {
emits('change', paymentType);
currentType.value = paymentType;
switch (paymentType) {
case PAYMENT_TYPE_WECHAT:
console.log('PAYMENT_TYPE_WECHAT');
break;
case PAYMENT_TYPE_BALANCE:
console.log('PAYMENT_TYPE_BALANCE');
break;
}
close();
};
defineExpose({
show
});
</script>
<style lang='scss' scoped>
.popup-content {
background: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
padding: 38rpx 45rpx 140rpx 45rpx;
view:nth-of-type(1) {
display: flex;
margin-bottom: 70rpx;
position: relative;
image {
width: 35rpx;
height: 35rpx;
align-self: flex-start;
}
text {
font-weight: bold;
font-size: 30rpx;
color: #333333;
position: absolute;
left: 0;
right: 0;
text-align: center;
}
}
view:nth-of-type(n+2) {
image:nth-of-type(1) {
width: 47rpx;
height: 47rpx;
}
text {
align-self: center;
flex: 1;
font-weight: 400;
font-size: 30rpx;
color: #333333;
margin-left: 23rpx;
}
image:nth-of-type(2) {
width: 35rpx;
height: 35rpx;
}
}
}
</style>

215
src/pages/mall/subs/components/sku-dialog.vue
View File

@@ -1,215 +0,0 @@
<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>

24
src/pages/mall/subs/goods/goods-detail.vue
View File

@@ -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>

2
src/pages/mall/subs/order/order-confirm.vue
View File

@@ -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';