刚开始用的v-model没成功
错误的代码：
<template>
<view class="container">
<view class="top" style="height: 10%; margin-bottom: 20rpx; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);">
<view class="box" style="flex: 1; background-color: #4CAF50; display: flex; ">
<!-- 第一个盒子的背景颜色，包含图片和文字 -->
<image src="/static/zjgyl.png" class="image"></image>
<view class="text">仲景</view> <!-- 添加一句话的文本内容 -->
</view>
<view class="box" style="flex: 2; background-color: #4CAF50;">
<!-- 第二个盒子的背景颜色，里面放置四个不同颜色的子盒子 -->
<!-- 第一个子盒子 -->
<view class="inner-box"
style="background-color: #fafafa; margin: 20rpx 20rpx 15rpx 20rpx; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<view class="sub-inner-box">
<image src="/static/money.png" class="icon"></image> <!-- 图标1 -->
<text class="icon-text">收银</text> <!-- 文本1 -->
</view>
</view>
<!-- 第二个子盒子 -->
<view class="inner-box"
style="background-color: #fafafa; margin: 20rpx 20rpx 15rpx 20rpx; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<view class="sub-inner-box" @click="tqdzsy">
<image src="/static/memberber.png" class="icon"></image> <!-- 图标2 -->
<text class="icon-text">添加会员</text> <!-- 文本2 -->
</view>
</view>
<!-- 第三个子盒子 #dddddd-->
<view class="inner-box"
style="background-color: #fafafa; margin: 20rpx 20rpx 15rpx 20rpx; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<view class="sub-inner-box" @click="toUrl(`/pages/menstore/store/index`)">
<image src="/static/sstore.png" class="icon"></image>
<text class="icon-text">门店管理</text>
</view>
</view>
</view>
</view>
<!-- 录入会员的弹窗-->
<uni-popup id="popupOther" ref="popupOther" type="dialog">
<view class="common-dialog">
<view class="log-title">录入新的会员</view>
<view class="form-row">
<view class="form-row-tt" style="font-size: 34rpx;">用户名：</view>
<view class="form-row-dd">
<input type="text" v-model="toOther.amount" placeholder="请输入金额" />
</view>
</view>
<!-- <text class="tip-text">本次转出数量将另外扣减10%，从账户一并扣减</text> -->
<view class="form-row">
<view class="form-row-tt" style="font-size: 34rpx;">手机号：</view>
<view class="form-row-dd">
<input type="text" v-model="toOther.othersPhone" placeholder="请输入对方手机号" />
</view>
</view>
<view style="margin-left: 30rpx;">
<view style="font-size: 34rpx;">推荐人：</view>
<view>
<radio-group v-model="isReffer">
<view class="radio-item">
<label>
<radio value="1" /> 本人推荐（员工）
</label>
</view>
<view class="radio-item">
<label>
<radio value="2" /> 门店推荐（店长）
</label>
</view>
<view class="radio-item">
<label>
<radio value="3" @change="updateInputVisibility('3')" /> 自输入推荐人手机号
</label>
<input v-if="showInput" type="text" v-model="isRefferphone" placeholder="请输入推荐人手机号" />
</view>
</radio-group>
</view>
</view>
<view class="form-row">
<view class="form-row-dd">
<!-- <view class="tip-text" style="color: red;">如无推荐人手机号，默认门店推荐人手机号</view> -->
</view>
</view>
<view class="log-footer">
<button @click="otherClose" class="cancel">取消</button>
<button @click="otherConfirm" class="ok">确定</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
isReffer: '1', // 默认选中第一个
isRefferphone: '',
showInput: false,
toOther: { //转给别人
paymentCode: '',
amount: null,
othersPhone: null
},
};
},
watch: {
isReffer(newVal) {
this.showInput = newVal === '3';
},
},
methods: {
tqdzsy() {
// 强制刷新组件
this.isReffer = ''; // 先设置为一个不同的值
this.$nextTick(() => {
this.isReffer = '1'; // 然后立即设置回默认值
this.showInput = false;
this.$refs.popupOther.open();
});
},
otherConfirm() {
// if (!this.toOther.amount) {
// this.common.UshowToast('请输入金额');
// } else if (!this.toOther.othersPhone) {
// this.common.UshowToast('请输入对方手机号');
// } else if (!this.toOther.paymentCode) {
// this.common.UshowToast('请输入支付密码');
// } else {
// this.ajax.post(this.jk.qtTransferMoney, this.toOther).then(res => {
// if (res.status == 200) {
// this.common.UshowToast(res.message);
// this.toOther.amount = this.toOther.paymentCode = this.toOther.othersPhone = null;
// this.$refs.popupOther.close();
// location.reload();
// }
// })
// }
},
otherClose() {
this.$refs.popupOther.close()
},
updateInputVisibility(value) {
this.isReffer = value;
this.showInput = value === '3';
},
}
};
</script>
<style lang="less">
// 刚开始基本样式
.container {
display: flex;
flex-direction: column;
height: 100vh;
/* 设置容器高度占满整个视窗 */
background-color: #f0f0f0;
}
.top {
width: 100%;
background-color: #4CAF50;
/* 顶部区域的背景颜色，可根据需求修改 */
display: flex;
/* 使用flex布局 */
justify-content: space-between;
/* 平均分布子元素 */
}
.box {
height: 100%;
/* 子盒子高度与父盒子相同 */
display: flex;
/* 使用flex布局 */
align-items: center;
/* 垂直居中子元素 */
}
.image {
width: 120rpx;
/* 设置图片宽度，根据需要调整 */
height: 120rpx;
/* 设置图片高度，根据需要调整 */
margin-right: 10rpx;
/* 设置图片右侧的间距，根据需要调整 */
margin-left: 10rpx;
/* 设置图片右侧的间距，根据需要调整 */
}
.text {
font-size: 40rpx;
/* 设置文本的字体大小，根据需要调整 */
}
/* 子盒子样式和底部样式保持不变 */
.sub-box {
flex: 1;
height: 100%;
}
/* 内部盒子样式 */
.inner-box {
background-color: #ff5733;
margin: 10rpx;
display: flex;
justify-content: space-around;
}
/* .sub-inner-box {
width: 50px;
height: 50px;
} */
.bottom {
display: flex;
flex-direction: row;
flex: 1;
}
.left {
width: 30%;
/* background-color: white; */
}
.avatariimage {
height: 120rpx;
width: 120rpx;
}
.right {
width: 70%;
background-color: white;
}
/* 图标样式 */
.icon {
margin-top: 5px;
width: 50rpx;
height: 50rpx;
}
.icon-text {
font-size: 30rpx;
text-align: center;
margin-top: 10px;
/* 文本距离图标的上边距 */
}
/* 修改sub-inner-box样式 */
.sub-inner-box {
display: flex;
flex-direction: column;
align-items: center;
margin: 5rpx;
/* 垂直居中子元素 */
width: 60px;
height: 55px;
/* 让子盒子的高度自适应内容 */
}
// 商品选择滚动条
.center-cut-menu {
width: 100%;
height: 100rpx;
box-sizing: border-box;
.scroll-view {
height: 100rpx;
white-space: nowrap;
.scroll-item {
height: 100rpx;
padding: 0 20rpx;
display: inline-block;
text-align: center;
.item-text {
font-size: 30rpx;
line-height: 100rpx;
&.active {
color: #1468FF;
}
}
}
}
}
// 会员登录弹窗
.but {
width: 30%;
height: 150rpx;
text-align: center;
line-height: 150rpx;
border: 2rpx solid #fff;
}
.list,
.recommend {
margin-top: 40rpx;
.con {
background-color: white;
display: flex;
justify-content: space-between;
border-radius: 10px;
margin: 0 36rpx 20rpx 36rpx;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
.img {
width: 90px;
height: 90px;
border-top-left-radius: 20rpx;
border-bottom-left-radius: 20rpx;
}
.right {
position: relative;
width: calc(100% - 110px);
uni-view {
font-size: 24rpx;
color: #575858;
}
.title {
color: #101010;
font-size: 28rpx;
font-weight: bold;
margin-top: 10rpx;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
}
}
// 添加会员弹窗样式
.common-dialog {
background-color: #FFFFFF;
border-radius: 5px;
width: 100%;
/* 调整宽度 */
max-width: 1600rpx;
/* 设置最大宽度，以防弹窗过大 */
margin: auto;
/* 水平居中弹窗 */
.log-title {
/* 增加标题字体大小 */
padding: 15px 0;
/* 增加标题的上下间距 */
text-align: center;
background-color: #4CAF50;
color: white;
font-size: 50rpx;
font-weight: 600;
}
.log-footer {
display: flex;
padding: 10rpx 0;
button {
background-color: #FFFFFF;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
color: #3cc51f;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
cursor: pointer;
border-radius: 0;
font-size: 40rpx;
&:after {
border-radius: 0;
border: 1px solid #eee;
}
}
.cancel {
color: black;
}
.ok {
color: rgb(0, 122, 255);
}
}
}
// 购物车
.shop-cart-list {
.shop-cart-list-item {
display: flex;
background-color: #FFFFFF;
margin-bottom: 10rpx;
padding: 40rpx 20rpx;
font-size: 28rpx;
.radio {
line-height: 180rpx;
margin-right: 20rpx;
}
.img {
width: 180rpx;
height: 180rpx;
flex-shrink: 0;
}
.desc {
width: 100%;
padding: 0 20rpx;
.title {
color: #101010;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.num {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
.price {
font-size: 36rpx;
color: #FF1616;
font-weight: bold;
}
.shu {
color: #888888;
.jian,
.jia,
.num {
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
display: inline-block;
text-align: center;
color: #333333;
}
.jian,
.jia {
border: 1px solid #333333;
border-radius: 100%;
}
.disable {
border-color: #888888;
color: #888888;
}
}
}
}
}
}
</style>用这个代码，发现问题一：第一个按钮默认不亮，问题二：点击第三个按钮没出现输入框。
解决方法：不用v-model
在您的代码中，使用了 v-model="isReffer" 来实现 <radio-group> 的双向绑定，这通常是正确的用法。然而，如果您发现它在 uni-app 中不起作用，可能是因为 uni-app 的某些特定行为或限制。
在 uni-app 中，某些原生 HTML 元素的行为可能与标准的 Vue.js 略有不同。如果标准的 v-model 绑定在 <radio-group> 上不起作用，您可以尝试手动实现双向绑定。这通常涉及到监听单选按钮的变化，并相应地更新数据。
<radio> 元素使用了 :checked 绑定，这将确保单选按钮的选中状态与 isReffer 的值相匹配。@change 事件监听器 onRadioGroupChange 更新 isReffer 的值，以反映用户的选择。
这种方法可以在 uni-app 中更准确地控制单选按钮的行为，并确保数据与用户界面保持同步。
下面是正确的代码
<template>
<view class="container">
<view class="top" style="height: 10%; margin-bottom: 20rpx; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);">
<view class="box" style="flex: 1; background-color: #4CAF50; display: flex; ">
<!-- 第一个盒子的背景颜色，包含图片和文字 -->
<image src="/static/zjgyl.png" class="image"></image>
<view class="text">仲景</view> <!-- 添加一句话的文本内容 -->
</view>
<view class="box" style="flex: 2; background-color: #4CAF50;">
<!-- 第二个盒子的背景颜色，里面放置四个不同颜色的子盒子 -->
<!-- 第一个子盒子 -->
<view class="inner-box"
style="background-color: #fafafa; margin: 20rpx 20rpx 15rpx 20rpx; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<view class="sub-inner-box">
<image src="/static/money.png" class="icon"></image> <!-- 图标1 -->
<text class="icon-text">收银</text> <!-- 文本1 -->
</view>
</view>
<!-- 第二个子盒子 -->
<view class="inner-box"
style="background-color: #fafafa; margin: 20rpx 20rpx 15rpx 20rpx; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<view class="sub-inner-box" @click="tqdzsy">
<image src="/static/memberber.png" class="icon"></image> <!-- 图标2 -->
<text class="icon-text">添加会员</text> <!-- 文本2 -->
</view>
</view>
<!-- 第三个子盒子 #dddddd-->
<view class="inner-box"
style="background-color: #fafafa; margin: 20rpx 20rpx 15rpx 20rpx; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<view class="sub-inner-box" @click="toUrl(`/pages/menstore/store/index`)">
<image src="/static/sstore.png" class="icon"></image>
<text class="icon-text">门店管理</text>
</view>
</view>
</view>
</view>
<!-- 录入会员的弹窗-->
<uni-popup id="popupOther" ref="popupOther" type="dialog">
<view class="common-dialog">
<view class="log-title">录入新的会员</view>
<view class="form-row" style="margin-top: 30rpx;">
<view class="form-row-tt" style="font-size: 50rpx;">用户名：</view>
<view class="form-row-dd">
<input type="text" v-model="othersname" style="font-size: 40rpx;" placeholder="请输入会员姓名" />
</view>
</view>
<!-- <text class="tip-text">本次转出数量将另外扣减10%，从账户一并扣减</text> -->
<view class="form-row" style="margin-top: 30rpx;">
<view class="form-row-tt" style="font-size: 50rpx;">手机号：</view>
<view class="form-row-dd">
<input type="text" v-model="othersPhone" style="font-size: 40rpx;" placeholder="请输入会员手机号" />
</view>
</view>
<view style="margin-left: 30rpx; margin-top: 30rpx;">
<view style="font-size: 50rpx;">推荐人：</view>
<view>
<radio-group @change="onRadioGroupChange">
<view class="radio-item">
<label class="uni-radio">
<radio value="1" :checked="isReferrer === '1'" />
<text style="font-size: 34rpx;">本人推荐（员工）</text>
</label>
</view>
<view class="radio-item">
<label class="uni-radio">
<radio value="2" :checked="isReferrer === '2'" />
<text style="font-size: 34rpx;">门店推荐（店长）</text>
</label>
</view>
<view class="radio-item">
<label class="uni-radio">
<radio value="3" :checked="isReferrer === '3'" />
<text style="font-size: 34rpx;">自输入推荐人手机号</text>
</label>
<view class="form-row" v-if="showInput">
<view class="form-row-tt" style="font-size: 34rpx;">推荐人手机号：</view>
<view class="form-row-dd">
<input type="text" v-model="referrerPhone" placeholder="请输入推荐人手机号" />
</view>
</view>
</view>
</radio-group>
</view>
</view>
<view class="form-row">
<view class="form-row-dd">
<!-- <view class="tip-text" style="color: red;">如无推荐人手机号，默认门店推荐人手机号</view> -->
</view>
</view>
<view class="log-footer">
<button @click="othererpClose" class="cancel">取消</button>
<button @click="othererpConfirm" class="ok">确定</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
isReferrer: '1', // 默认选中第一个
referrerPhone: '',
showInput: false,
othersname: null,
othersPhone: null
};
},
watch: {
isReferrer(newVal) {
this.showInput = newVal === '3';
},
},
methods: {
onRadioGroupChange(event) {
// 更新 isReferrer 值
this.isReferrer = event.target.value;
},
tqdzsy() {
// 强制刷新组件
this.isReferrer = ''; // 先设置为一个不同的值
this.$nextTick(() => {
this.isReferrer = '1'; // 然后立即设置回默认值
this.showInput = false;
this.$refs.popupOther.open();
});
},
othererpConfirm() {
if (!this.othersname) {
this.common.UshowToast('请输入会员姓名');
} else if (!this.othersPhone) {
this.common.UshowToast('请输入会员手机号');
} else if (this.isReferrer === '3' && !this.referrerPhone) {
this.common.UshowToast('请输入推荐人手机号');
} else {
let data = {
userName: this.othersname,
phone: this.othersPhone,
isReferrer: this.isReferrer,
referrerPhone: this.isReferrer === '3' ? this.referrerPhone : null,
};
this.ajax.post(this.jk.erpAddCfUser, data).then(res => {
if (res.status == 200) {
this.common.UshowToast(res.message);
this.isReferrer = '1';
this.referrerPhone = '';
this.othersname = '';
this.othersPhone = '';
this.$refs.popupOther.close();
location.reload();
}
});
}
},
othererpClose() {
this.$refs.popupOther.close()
},
}
};
</script>
<style lang="less">
// 刚开始基本样式
.container {
display: flex;
flex-direction: column;
height: 100vh;
/* 设置容器高度占满整个视窗 */
background-color: #f0f0f0;
}
.top {
width: 100%;
background-color: #4CAF50;
/* 顶部区域的背景颜色，可根据需求修改 */
display: flex;
/* 使用flex布局 */
justify-content: space-between;
/* 平均分布子元素 */
}
.box {
height: 100%;
/* 子盒子高度与父盒子相同 */
display: flex;
/* 使用flex布局 */
align-items: center;
/* 垂直居中子元素 */
}
.image {
width: 120rpx;
/* 设置图片宽度，根据需要调整 */
height: 120rpx;
/* 设置图片高度，根据需要调整 */
margin-right: 10rpx;
/* 设置图片右侧的间距，根据需要调整 */
margin-left: 10rpx;
/* 设置图片右侧的间距，根据需要调整 */
}
.text {
font-size: 40rpx;
/* 设置文本的字体大小，根据需要调整 */
}
/* 子盒子样式和底部样式保持不变 */
.sub-box {
flex: 1;
height: 100%;
}
/* 内部盒子样式 */
.inner-box {
background-color: #ff5733;
margin: 10rpx;
display: flex;
justify-content: space-around;
}
.bottom {
display: flex;
flex-direction: row;
flex: 1;
}
s .left {
width: 30%;
/* background-color: white; */
}
.avatariimage {
height: 120rpx;
width: 120rpx;
}
.right {
width: 70%;
background-color: white;
}
/* 图标样式 */
.icon {
margin-top: 5px;
width: 50rpx;
height: 50rpx;
}
.icon-text {
font-size: 30rpx;
text-align: center;
margin-top: 10px;
/* 文本距离图标的上边距 */
}
/* 修改sub-inner-box样式 */
.sub-inner-box {
display: flex;
flex-direction: column;
align-items: center;
margin: 5rpx;
/* 垂直居中子元素 */
width: 60px;
height: 55px;
/* 让子盒子的高度自适应内容 */
}
// 添加会员弹窗样式
.common-dialog {
background-color: #FFFFFF;
border-radius: 5px;
width: 100%;
/* 调整宽度 */
max-width: 1600rpx;
/* 设置最大宽度，以防弹窗过大 */
margin: auto;
/* 水平居中弹窗 */
.log-title {
/* 增加标题字体大小 */
padding: 15px 0;
/* 增加标题的上下间距 */
text-align: center;
background-color: #4CAF50;
color: white;
font-size: 63rpx;
font-weight: 600;
}
.log-footer {
display: flex;
padding: 10rpx 0;
button {
background-color: #FFFFFF;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
color: #3cc51f;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
cursor: pointer;
border-radius: 0;
font-size: 40rpx;
&:after {
border-radius: 0;
border: 1px solid #eee;
}
}
.cancel {
color: black;
}
.ok {
color: rgb(0, 122, 255);
}
}
}
</style>这是正确的代码并且里面还对输入的数据做了校验。
问题小建议：
uniapp自带的组件不好用
推荐你可以找一个第三方的ui库
他们会封装一些双向绑定的
用着比他自带的好用
像这个group-radio组件 其实按照我们写vue的习惯 一个双向绑定就搞定了 他就非得在change里面修改数据 然后radio还得判断
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
