2022.12.8号笔记

福源表单中把数据根据接口文档向后端传输

1.把选择框的内容写成对象的形式

columns: [
		{ text: '书香福地', id: 0 },
		{ text: '心愿福递', id: 1 }
	],

2.根据选择确认框 调用确认函数按钮

onConfirm(value, index) {
					console.log(value)
					console.log(index)
					this.fuDiType = value.text  // 把内容给data中的fuDiType
					this.fuDiTypeId = value.id  // 把对象的id给data中的fuDiTypeId

					this.showPicker = false  // 收起弹出框
				},

data中的原始数据
	fuDiType: '书香福地',
	fuDiTypeId: 0,

4.调用接口把form表单中的数据给后端

ajax_post(
		'',  //中转地址
		{
			api: '', //  详细接口
			apimode: '',
			// 下面这个this是拿的data中的数据
			apidata: `{fuDiType:${this.fuDiTypeId},name:'${values.name}',phoneNumber:'${values.phoneNumber}',fuDiAddress:'${values.fuDiAddress}',bookName:'${values.bookName}'}`
						},
						
						
						${this.fuDiTypeId}  //这句话的意思是吧data中的id给到后端

问题总结 链接接口问题

res 返回结果进行判断 访问成功 后端给成功标识后进行判断 进行逻辑的书写

代码的展示例子

(res) => {
    if (res.errCode === '0000') {   //判断条件   一定要res打印出来看看是啥样的在进行判断
        console.log('成功')
        this.dataList = res.data
    } else {
        console.log('失败了')
    }
}

问题总结 后端返回来数字类型的数据 如何在前端进行展示出对应的结果

错误思想 if （）{}else if(){}else if(){}

正确思想 因为是vue项目中的数据 可以直接使用 v-if进行开发 代码例子

<span v-if="item.targetAudience===0">群众</span>
<span v-else-if="item.targetAudience===1">党员</span>
<span v-else-if="item.targetAudience===2">志愿者</span>

//  通过v-if进行动态添加标签 来判定那个数据进行展示

吸底操作流程

给他一个div 里面套个button按钮

.submit{  
        position: fixed;   //固定定位
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%; 
        height: 1.12rem;
        padding: 0.1rem 0.3rem 0.14rem;
        background: #fff; 
    }
    .submit button{
        font-size: 0.34rem;
        line-height: 0.88rem;
        border-radius: 0.44rem;  //圆角
        color: #fff;
        background: #EC3233;
        width: 100%;
        border: none;     //边框不显示
        cursor: pointer;     // 鼠标移动上去  有不同的变化
    }

去掉 cell标签的下划线

用自带的属性进行配置 ：border=false

/* 把所有的下划线都去掉了 */

/* [class*=‘van-hairline’]::after {

border: none;

} */

<van-cell-group :border="false">
   <van-cell title="姓名" :value="item.backName" />
</van-cell-group>