fix:优化小程序radio点击效果

pull/8/head
kele 2023-03-21 19:03:23 +08:00
parent e6dfc3979a
commit 6e39585ef3
9 changed files with 141 additions and 156 deletions

View File

@ -58,29 +58,28 @@
</uni-forms-item> </uni-forms-item>
</view> </view>
</uni-forms> </uni-forms>
<radio-group @change="onChange" v-if="state.protocol?.status == 1"> <label class="ss-flex ss-m-t-20" v-if="state.protocol?.status == 1" @tap="onChange">
<label class="ss-flex ss-m-t-20"> <radio
<radio :checked="state.isAgree"
:checked="state.isAgree" color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" style="transform: scale(0.6)"
style="transform: scale(0.6)" @tap.stop="onChange"
/> />
<view class="agreement-text ss-flex"> <view class="agreement-text ss-flex">
<view class="ss-m-r-4">勾选代表同意</view> <view class="ss-m-r-4">勾选代表同意</view>
<view <view
class="tcp-text" class="tcp-text"
@tap.stop=" @tap.stop="
sheep.$router.go('/pages/public/richtext', { sheep.$router.go('/pages/public/richtext', {
id: state.protocol.id, id: state.protocol.id,
title: state.protocol.title, title: state.protocol.title,
}) })
" "
> >
{{ state.protocol.title }} {{ state.protocol.title }}
</view>
</view> </view>
</label> </view>
</radio-group> </label>
<su-fixed bottom placeholder> <su-fixed bottom placeholder>
<view class="submit-box ss-flex ss-row-center ss-p-30"> <view class="submit-box ss-flex ss-row-center ss-p-30">
<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="submit"> <button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="submit">

View File

@ -27,18 +27,14 @@
<view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40"> <view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
<view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id"> <view class="goods-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id">
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<radio-group <label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item.id)">
@change="onSelectSingle(item.id)" <radio
class="check-box ss-flex ss-col-center ss-p-l-10" :checked="state.selectedIds.includes(item.id)"
> color="var(--ui-BG-Main)"
<label class="radio ss-flex"> style="transform: scale(0.8)"
<radio @tap.stop="onSelectSingle(item.id)"
:checked="state.selectedIds.includes(item.id)" />
color="var(--ui-BG-Main)" </label>
style="transform: scale(0.8)"
/>
</label>
</radio-group>
<s-goods-item <s-goods-item
:title="item.goods.title" :title="item.goods.title"
:img="item.sku_price.image || item.goods.image" :img="item.sku_price.image || item.goods.image"
@ -64,16 +60,15 @@
<su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false"> <su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"> <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
<view class="footer-left ss-flex ss-col-center"> <view class="footer-left ss-flex ss-col-center">
<radio-group @change="onSelectAll" class="check-box ss-flex ss-col-center ss-p-r-30"> <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
<label class="radio ss-flex"> <radio
<radio :checked="state.isAllSelected"
:checked="state.isAllSelected" color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" style="transform: scale(0.8)"
style="transform: scale(0.8)" @tap.stop="onSelectAll"
/> />
<view class="ss-m-l-8"> 全选 </view> <view class="ss-m-l-8"> 全选 </view>
</label> </label>
</radio-group>
<text>合计</text> <text>合计</text>
<view class="text-price price-text"> <view class="text-price price-text">
{{ state.totalPriceSelected }} {{ state.totalPriceSelected }}

View File

@ -199,10 +199,10 @@
</view> </view>
<view <view
class="notice-item ss-flex ss-row-between" class="notice-item ss-flex ss-row-between"
v-if="state.orderInfo.promo_discount_fee > 0" v-if="state.orderInfo.total_discount_fee > 0"
> >
<text class="title">优惠金额</text> <text class="title">优惠金额</text>
<text class="detail">¥{{ state.orderInfo.promo_discount_fee }}</text> <text class="detail">¥{{ state.orderInfo.total_discount_fee }}</text>
</view> </view>
<view class="notice-item all-rpice-item ss-flex ss-m-t-20"> <view class="notice-item all-rpice-item ss-flex ss-m-t-20">
<text class="title">{{ <text class="title">{{

View File

@ -5,28 +5,25 @@
<text class="modal-title ss-m-b-20">选择提现方式</text> <text class="modal-title ss-m-b-20">选择提现方式</text>
</view> </view>
<view class="modal-content ss-flex-1 ss-p-b-100"> <view class="modal-content ss-flex-1 ss-p-b-100">
<view <radio-group @change="onChange">
class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center" <label
v-for="(item, index) in typeList" class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center"
:key="index" v-for="(item, index) in typeList"
> :key="index"
<view class="container-icon ss-flex ss-m-r-20"> >
<image :src="sheep.$url.static(item.icon)" /> <view class="container-icon ss-flex ss-m-r-20">
</view> <image :src="sheep.$url.static(item.icon)" />
<view class="ss-flex-1">{{ item.title }}</view> </view>
<view class="radio"> <view class="ss-flex-1">{{ item.title }}</view>
<radio-group @change="onChange">
<label class="radio"> <radio
<radio :value="item.value"
:value="item.value" color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" :checked="item.value === state.currentValue"
:checked="item.value === state.currentValue" :disabled="!methods.includes(item.value)"
:disabled="!methods.includes(item.value)" />
/> </label>
</label> </radio-group>
</radio-group>
</view>
</view>
</view> </view>
<view class="modal-footer ss-flex ss-row-center ss-col-center"> <view class="modal-footer ss-flex ss-row-center ss-col-center">
<button class="ss-reset-button save-btn" @tap="onConfirm"></button> <button class="ss-reset-button save-btn" @tap="onConfirm"></button>

View File

@ -32,24 +32,23 @@
:key="item.id" :key="item.id"
> >
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<radio-group <label
class="check-box ss-flex ss-col-center ss-p-l-10" class="check-box ss-flex ss-col-center ss-p-l-10"
@change="onSelect(item.goods_id)" v-if="state.editMode"
v-show="state.editMode" @tap="onSelect(item.goods_id)"
> >
<label class="radio"> <radio
<radio :checked="state.selectedCollectList.includes(item.goods_id)"
:checked="state.selectedCollectList.includes(item.goods_id)" color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" style="transform: scale(0.8)"
style="transform: scale(0.8)" @tap.stop="onSelect(item.goods_id)"
/> />
</label> </label>
</radio-group>
<s-goods-item <s-goods-item
:title="item.goods.title" :title="item.goods.title"
:img="item.goods.image" :img="item.goods.image"
price="666" :price="item.goods.price[0]"
skuText="123" :skuText="item.goods.subtitle"
priceColor="#FF3000" priceColor="#FF3000"
:titleWidth="400" :titleWidth="400"
@tap=" @tap="
@ -66,16 +65,15 @@
<su-fixed bottom :val="0" placeholder v-show="state.editMode"> <su-fixed bottom :val="0" placeholder v-show="state.editMode">
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"> <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
<view class="footer-left ss-flex ss-col-center"> <view class="footer-left ss-flex ss-col-center">
<radio-group @change="onSelectAll"> <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
<label class="check-box ss-flex ss-col-center ss-p-r-30"> <radio
<radio :checked="state.selectAll"
:checked="state.selectAll" color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" style="transform: scale(0.7)"
style="transform: scale(0.7)" @tap.stop="onSelectAll"
/> />
<view> 全选 </view> <view> 全选 </view>
</label> </label>
</radio-group>
</view> </view>
<view class="footer-right"> <view class="footer-right">
<button <button

View File

@ -35,24 +35,23 @@
:key="item.id" :key="item.id"
> >
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<radio-group <label
v-show="state.editMode"
class="check-box ss-flex ss-col-center ss-p-l-10" class="check-box ss-flex ss-col-center ss-p-l-10"
@change="onSelect(item.goods_id)" v-if="state.editMode"
@tap="onSelect(item.goods_id)"
> >
<label class="radio"> <radio
<radio :checked="state.selectedCollectList.includes(item.goods_id)"
:checked="state.selectedCollectList.includes(item.goods_id)" color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" style="transform: scale(0.8)"
style="transform: scale(0.8)" @tap.stop="onSelect(item.goods_id)"
/> />
</label> </label>
</radio-group>
<s-goods-item <s-goods-item
:title="item.goods.title" :title="item.goods.title"
:img="item.goods.image" :img="item.goods.image"
price="666" :price="item.goods.price[0]"
skuText="123" :skuText="item.goods.subtitle"
priceColor="#FF3000" priceColor="#FF3000"
:titleWidth="400" :titleWidth="400"
@tap=" @tap="
@ -69,16 +68,15 @@
<su-fixed bottom :val="0" placeholder v-show="state.editMode"> <su-fixed bottom :val="0" placeholder v-show="state.editMode">
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"> <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
<view class="footer-left ss-flex ss-col-center"> <view class="footer-left ss-flex ss-col-center">
<radio-group @change="onSelectAll"> <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
<label class="check-box ss-flex ss-col-center ss-p-r-30"> <radio
<radio :checked="state.selectAll"
:checked="state.selectAll" color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" style="transform: scale(0.7)"
style="transform: scale(0.7)" @tap.stop="onSelectAll"
/> />
<view>全选</view> <view>全选</view>
</label> </label>
</radio-group>
</view> </view>
<view class="footer-right"> <view class="footer-right">
<button <button
@ -140,11 +138,11 @@
page, page,
}); });
if (res.error === 0) { if (res.error === 0) {
let orderList = _.concat(state.pagination.data, res.data.data); let orderList = _.concat(state.pagination.data, res.data.data);
state.pagination = { state.pagination = {
...res.data, ...res.data,
data: orderList, data: orderList,
}; };
if (state.pagination.current_page < state.pagination.last_page) { if (state.pagination.current_page < state.pagination.last_page) {
state.loadStatus = 'more'; state.loadStatus = 'more';
} else { } else {
@ -190,7 +188,7 @@
state.editMode = false; state.editMode = false;
state.selectedCollectList = []; state.selectedCollectList = [];
state.selectAll = false; state.selectAll = false;
state.pagination = pagination state.pagination = pagination;
getData(); getData();
} }
} }

View File

@ -75,31 +75,30 @@
v-if="['accountLogin', 'smsLogin', 'smsRegister'].includes(authType)" v-if="['accountLogin', 'smsLogin', 'smsRegister'].includes(authType)"
class="agreement-box ss-flex ss-row-center" class="agreement-box ss-flex ss-row-center"
> >
<radio-group @change="onChange" class="ss-flex ss-col-center"> <label class="radio ss-flex ss-col-center" @tap="onChange">
<label class="radio ss-flex"> <radio
<radio :checked="state.protocol"
:checked="state.protocol" color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" style="transform: scale(0.8)"
style="transform: scale(0.8)" @tap.stop="onChange"
/> />
<view class="agreement-text ss-flex ss-col-center ss-m-l-8"> <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
我已阅读并遵守 我已阅读并遵守
<view <view
class="tcp-text" class="tcp-text"
@tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)" @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)"
> >
{{ appInfo.user_protocol.title }} {{ appInfo.user_protocol.title }}
</view>
<view class="agreement-text"></view>
<view
class="tcp-text"
@tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)"
>
{{ appInfo.privacy_protocol.title }}
</view>
</view> </view>
</label> <view class="agreement-text"></view>
</radio-group> <view
class="tcp-text"
@tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)"
>
{{ appInfo.privacy_protocol.title }}
</view>
</view>
</label>
</view> </view>
<view class="safe-box"></view> <view class="safe-box"></view>
</view> </view>

View File

@ -19,15 +19,14 @@
<view v-for="(item, index) in state.couponInfo.can_use" :key="index"> <view v-for="(item, index) in state.couponInfo.can_use" :key="index">
<s-coupon-list :data="item" type="user" :disabled="false"> <s-coupon-list :data="item" type="user" :disabled="false">
<template #default> <template #default>
<radio-group @change="radioChange(item.id)" class="ss-flex ss-col-center"> <label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
<label class="radio"> <radio
<radio color="var(--ui-BG-Main)"
color="var(--ui-BG-Main)" style="transform: scale(0.8)"
style="transform: scale(0.8)" :checked="state.couponId == item.id"
:checked="state.couponId == item.id" @tap.stop="radioChange(item.id)"
/> />
</label> </label>
</radio-group>
</template> </template>
</s-coupon-list> </s-coupon-list>
</view> </view>

View File

@ -100,9 +100,9 @@
} }
.unit-text { .unit-text {
font-size: 16rpx; font-size: 24rpx;
color: #000000; color: #343434;
line-height: 16rpx; line-height: 24rpx;
} }
} }
} }