uniapp【优化】(优惠券模块):更改优惠券使用规则显示方式

This commit is contained in:
15093570141
2024-10-19 11:32:58 +08:00
parent 1652f3790e
commit 635d554ea8
3 changed files with 42 additions and 38 deletions

View File

@@ -16,17 +16,11 @@
</view>
<view class="rules-mode">
<view class="use-rules" @click="handleToggleRules(index)">
<view class="tit">使用规则</view>
<view class="tit">优惠券使用规则</view>
<uv-icon v-if="item.showRules" name="arrow-up-fill" color="#aaa"
size="10"></uv-icon>
<uv-icon v-else name="arrow-down-fill" color="#aaa" size="10"></uv-icon>
</view>
<view class="use-rules" @click="handleToggleDiscount(index)">
<view class="tit">优惠方式</view>
<uv-icon v-if="item.showDiscount" name="arrow-up-fill" color="#aaa"
size="10"></uv-icon>
<uv-icon v-else name="arrow-down-fill" color="#aaa" size="10"></uv-icon>
</view>
</view>
</view>
<view class="btn-box">
@@ -34,14 +28,16 @@
</view>
</view>
</view>
<view class="rules-box" v-if="item.showRules">
<view class="tit">优惠券使用规则</view>
<view class="rules" v-for="cell, cellIndex in item.conditions" :key="cellIndex">{{ cell }}
<view v-show="item.showRules">
<view class="rules-box">
<view class="tit">优惠券使用规则</view>
<view class="rules" v-for="cell, cellIndex in item.conditions" :key="cellIndex">{{ cell }}
</view>
</view>
</view>
<view class="rules-box" v-if="item.showDiscount">
<view class="tit">优惠券优惠方式</view>
<view class="rules" v-for="cell, cellIndex in item.results" :key="cellIndex">{{ cell }}
<view class="rules-box">
<view class="tit">优惠券优惠方式</view>
<view class="rules" v-for="cell, cellIndex in item.results" :key="cellIndex">{{ cell }}
</view>
</view>
</view>
<view class="no-coupon" v-if="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums">
@@ -97,7 +93,6 @@
state.totalPages = userCoupo.otherData?.totalPages;
state.couponList = state.couponList.concat(userCoupo.data?.map(((item : any) => {
item['showRules'] = false;
item['showDiscount'] = false;
return item;
})));
uni.hideLoading();
@@ -128,15 +123,8 @@
/** 查看使用规则 */
const handleToggleRules = (index : number) => {
state.couponList[index].showDiscount = false;
state.couponList[index].showRules = !state.couponList[index].showRules;
}
/** 查看优惠方式 */
const handleToggleDiscount = (index : number) => {
state.couponList[index].showRules = false;
state.couponList[index].showDiscount = !state.couponList[index].showDiscount;
}
</script>
<style lang="scss" scoped>
@import './coupon.scss';

View File

@@ -66,8 +66,9 @@
justify-content: space-between;
.coupon-tit {
width: 440rpx;
width: 410rpx;
padding-left: 30rpx;
padding-right: 30rpx;
.name {
margin-bottom: 10rpx;
@@ -79,18 +80,24 @@
}
.time {
margin-bottom: 10rpx;
.tit {
font-size: 22rpx;
color: #aaa;
}
}
.use-rules {
.rules-mode {
display: flex;
align-items: center;
.tit {
font-size: 22rpx;
color: #aaa;
margin-right: 10rpx;
justify-content: space-between;
.use-rules {
display: flex;
align-items: center;
.tit {
font-size: 22rpx;
color: #aaa;
margin-right: 10rpx;
}
}
}
}

View File

@@ -12,7 +12,7 @@
<view class="card-box">
<image class="coupon-bg" :src="handleStaticResources('/static/images/coupon-bg.jpg')"></image>
<view class="coupon-msg">
<view class="coupon-tit" @click="handleToggleRules(index)">
<view class="coupon-tit">
<view class="name">
<text class="tit">{{ item.couponName }}</text>
</view>
@@ -20,11 +20,13 @@
<text class="tit"> 有效期{{ timeFormat(item.startTime, 'yyyy-mm-dd') }}
{{ timeFormat(item.endTime, 'yyyy-mm-dd') }}</text>
</view>
<view class="use-rules">
<view class="tit">点击查看使用规则</view>
<uv-icon v-if="item.showRules" name="arrow-up-fill" color="#aaa"
size="10"></uv-icon>
<uv-icon v-else name="arrow-down-fill" color="#aaa" size="10"></uv-icon>
<view class="rules-mode">
<view class="use-rules" @click="handleToggleRules(index)">
<view class="tit">优惠券使用规则</view>
<uv-icon v-if="item.showRules" name="arrow-up-fill" color="#aaa"
size="10"></uv-icon>
<uv-icon v-else name="arrow-down-fill" color="#aaa" size="10"></uv-icon>
</view>
</view>
</view>
<view class="btn-box">
@@ -35,9 +37,16 @@
</view>
</view>
</view>
<view class="rules-box" v-if="item.showRules">
<view class="tit">优惠券使用规则</view>
<view class="rules" v-for="cell, cellIndex in item.conditions" :key="cellIndex">{{ cell }}
<view v-show="item.showRules">
<view class="rules-box">
<view class="tit">优惠券使用规则</view>
<view class="rules" v-for="cell, cellIndex in item.conditions" :key="cellIndex">{{ cell }}
</view>
</view>
<view class="rules-box">
<view class="tit">优惠券优惠方式</view>
<view class="rules" v-for="cell, cellIndex in item.results" :key="cellIndex">{{ cell }}
</view>
</view>
</view>
</view>
@@ -55,7 +64,7 @@
import type { Response } from '@/core/models';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { handleStaticResources, handleRouteSwitchTab } from '@/core/utils';
import { EmptyEnum ,RouteSwitchTabEnum} from '@/core/enum';
import { EmptyEnum, RouteSwitchTabEnum } from '@/core/enum';
interface TabType {
id : string;