完成优惠券页面
This commit is contained in:
@@ -2,7 +2,8 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<view class="header">
|
||||
<text class="title">{{ item.title }}</text>
|
||||
<text class="title" v-if="item.couponType == 5">消费赠券</text>
|
||||
<text v-else>{{ item.title }}</text>
|
||||
<text class="id">ID:83713</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
@@ -16,14 +17,23 @@
|
||||
</text>
|
||||
<text class="title">总发放</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="item" v-if="item.couponType == 5">
|
||||
<text class="info">{{ item.giftNum }}</text>
|
||||
<text class="title">已领取</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="info">{{ item.useNum }}</text>
|
||||
<text class="title">已使用</text>
|
||||
<view class="title">
|
||||
<text class="t">已赠送</text>
|
||||
<text class="l" @click="toDetail(item)">详情</text>
|
||||
</view>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="item">
|
||||
<text class="info">{{ item.giftNum }}</text>
|
||||
<text class="title">已领取</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="info">{{ item.useNum }}</text>
|
||||
<text class="title">已使用</text>
|
||||
</view>
|
||||
</template>
|
||||
<view class="item">
|
||||
<text class="info">
|
||||
<template v-if="item.giveNum == -10086">无限</template>
|
||||
@@ -44,6 +54,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
@@ -52,6 +64,11 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const emits = defineEmits(['delete', 'editor']);
|
||||
|
||||
// 去领取详情
|
||||
function toDetail(item) {
|
||||
go.to('PAGES_COUPON_GET_DETAIL', { couponId: item.couponGiftList[0].couponId });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -100,6 +117,16 @@ const emits = defineEmits(['delete', 'editor']);
|
||||
.title {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
.l {
|
||||
font-size: 24upx;
|
||||
color: #318afe;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
|
||||
const props = defineProps({
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '添加'
|
||||
default: '保存'
|
||||
},
|
||||
showCancel: {
|
||||
type: Boolean,
|
||||
|
||||
190
components/my-components/my-select-coupon.vue
Normal file
190
components/my-components/my-select-coupon.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view @click="show = true">
|
||||
<slot v-if="$slots.default"></slot>
|
||||
<view v-else class="choose-goods u-flex u-row-between">
|
||||
<text class="color-999" v-if="!modelValue">请选择商品</text>
|
||||
<text class="color-333 u-m-r-32 u-line-1" v-else>{{ goodsName }}</text>
|
||||
<up-icon size="14" name="arrow-down"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<up-popup :show="show" :round="20" mode="bottom">
|
||||
<view class="">
|
||||
<view class="top u-flex u-row-between">
|
||||
<text class="font-bold u-font-32 color-333">{{ title }}</text>
|
||||
<up-icon size="18" name="close" @click="show = false"></up-icon>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true" style="max-height: 50vh" @scroll="scroll" :scroll-top="scrollTop">
|
||||
<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)" :class="[selGoods && selGoods.id == item.id ? 'selected' : '']">
|
||||
<view class="u-flex u-row-between">
|
||||
<view class="u-flex gap-20">
|
||||
<!-- <view class="u-flex" @click.stop="preview(item)">
|
||||
<up-image :src="item.coverImg" width="80rpx" height="80rpx"></up-image>
|
||||
</view> -->
|
||||
<text class="u-font-32 color-333">{{ item.title }}</text>
|
||||
</view>
|
||||
<!-- <text class="u-font-32 color-red u-p-l-30">¥{{ item.lowPrice }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="bottom">
|
||||
<view class="btn cancel" @click="close">{{ cancelText }}</view>
|
||||
<view class="btn success" @click="confirm">{{ confirmText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { couponPage } from '@/http/api/market/index.js';
|
||||
const show = ref(false);
|
||||
const modelValue = defineModel({
|
||||
type: String,
|
||||
default: ''
|
||||
});
|
||||
|
||||
const goodsName = defineModel('goodsName', {
|
||||
type: String,
|
||||
default: ''
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '选择优惠券'
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认'
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
}
|
||||
});
|
||||
|
||||
const selGoods = ref('');
|
||||
function itemClick(item) {
|
||||
if (selGoods.value && selGoods.value.id == item.id) {
|
||||
selGoods.value = '';
|
||||
return;
|
||||
}
|
||||
selGoods.value = item;
|
||||
}
|
||||
const list = ref([]);
|
||||
|
||||
const scrollTop = ref(0);
|
||||
function scroll(e) {
|
||||
scrollTop.value = e.detail.scrollTop;
|
||||
}
|
||||
function preview(item) {
|
||||
uni.previewImage({
|
||||
urls: item.images || [item.coverImg]
|
||||
});
|
||||
}
|
||||
watch(
|
||||
() => modelValue.value,
|
||||
(newVal, oldVal) => {
|
||||
console.log(newVal, oldVal);
|
||||
selGoods.value = list.value.find((item) => item.id == newVal);
|
||||
console.log(selGoods.value);
|
||||
if (selGoods.value) {
|
||||
goodsName.value = selGoods.value.title;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => list.value.length,
|
||||
(newVal, oldVal) => {
|
||||
selGoods.value = list.value.find((item) => item.id == modelValue.value);
|
||||
console.log(selGoods.value);
|
||||
if (selGoods.value) {
|
||||
modelValue.value = selGoods.value.id;
|
||||
goodsName.value = selGoods.value.title;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function close() {
|
||||
show.value = false;
|
||||
}
|
||||
function confirm() {
|
||||
if (!selGoods.value) {
|
||||
uni.showToast({
|
||||
title: '请选择优惠券',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
modelValue.value = selGoods.value.id;
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
const emits = defineEmits(['load']);
|
||||
|
||||
onMounted(() => {
|
||||
couponPage({ page: 1, size: 500 }).then((res) => {
|
||||
list.value = res.records;
|
||||
emits('load', list.value);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.popup-content {
|
||||
background: #fff;
|
||||
width: 640rpx;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
.top {
|
||||
padding: 40rpx 48rpx;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
.bottom {
|
||||
padding: 48rpx 52rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
gap: 50rpx;
|
||||
.btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 18rpx 60rpx;
|
||||
border-radius: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border: 2rpx solid transparent;
|
||||
&.success {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
&.cancel {
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: 0 4rpx 0 0 #00000005;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
padding: 10rpx 30rpx;
|
||||
border: 1px solid #d9d9d9;
|
||||
margin: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 0 10px transparent;
|
||||
&.selected {
|
||||
border-color: $my-main-color;
|
||||
box-shadow: 0 0 10px $my-main-color;
|
||||
}
|
||||
}
|
||||
.choose-goods {
|
||||
display: flex;
|
||||
padding: 24rpx;
|
||||
align-items: center;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
background: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="my-select-goods">
|
||||
<view class="radio-wrap">
|
||||
<u-radio-group v-model="foodType">
|
||||
<u-radio-group v-model="foodType" @change="foodTypeChange">
|
||||
<u-radio v-for="item in radioList" :key="item.value" :label="item.label" :name="item.value" :customStyle="customStyle"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
@@ -90,6 +90,12 @@ const radioList = ref([
|
||||
}
|
||||
]);
|
||||
|
||||
const emits = defineEmits('foodTypeChange');
|
||||
function foodTypeChange(e) {
|
||||
console.log('foodTypeChange', e);
|
||||
emits('foodTypeChange', e);
|
||||
}
|
||||
|
||||
const foodType = defineModel('foodType', {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
|
||||
Reference in New Issue
Block a user