uni-app 分段选择器组件

Posted 2023-04-02

参考技术A <template>

<view>

<view class="topview">

<!--分段器  导航跳转不同组件 -->

<view class="uni-padding-wrap uni-common-mt">

<uni-segmented-control :current="current"

:values="items.map(v => v.title)"

style-type="text"

:active-color="activeColor"

@clickItem="onClickItem"></uni-segmented-control>

</view>

</view>

<view class="content">

<view v-if="current === 0">

<!-- 导航组件页面 -->

<co-shebaoview

:isShow="isShowClass"

:param="cParamList"

@seldelect="seldelects"

@selpay="selpays"></co-shebaoview>

</view>

<view v-if="current === 1">

<!-- 导航组件页面 -->

<co-pingzhengview

:isShow="isShowClassP"

:param="cParamListP"

@seldelectP="seldelectP"

@selpayP="selpayP"></co-pingzhengview>

</view>

</view>

</view>

</template>

<script>

// 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用

// 引入

// import coshebaoview from "../../components/co-shebaoview/co-shebaoview.vue";

// import copingzhengview from "../../components/co-pingzhengview/co-pingzhengview.vue";

export default

// 注册组件

// components:

// coshebaoview,

// copingzhengview

// ,

data ()

return

// 上个页面传递数据

djxh: '',

<script>

// 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用

// 引入

// import coshebaoview from "../../components/co-shebaoview/co-shebaoview.vue";

// import copingzhengview from "../../components/co-pingzhengview/co-pingzhengview.vue";

export default

// 注册组件

// components:

// coshebaoview,

// copingzhengview

// ,

data ()

return

// 上个页面传递数据

djxh: '',

nsrsbh: '',

xm: '',

sfzjhm: '',

// 分段选择器数据

items: [

title: "待缴税费"

,



title: "待缴凭证"

,

],

current: 0,

colorIndex: 0,

activeColor: '#168DE9',

//传递给页面数据

isShowClass: true,

isShowClassP: true,

cParamList: [],

cParamListP: [],

indexs: 0,

ztlx: '2'



,

methods:

//获取查询数据 待缴

getdataSB ()

var me = this

let url = this.configURL.hnserverUrl + '/dzswj/externalService/JSONNOLOGIN/sscx_sscx'

//获取存储值

const value = uni.getStorageSync('carinfo_key');

//判断当前是否有该存储值

if (value.isLogin)

//读取存储对象对应的值

me.xm = value.userInfo.xm

me.sfzjhm = value.userInfo.sfzjhm

me.djxh = value.userInfo.djxh



this.http.httpRequest(url, 'POST',

xm: me.xm,

djxh: me.aes_encrypt(me.djxh),

nsrsbh: me.aes_encrypt(me.sfzjhm),

ywlx: 'qsxx',

// S 税 F 费 不写好像都查询

cxlx: '',

// 企业 1 个人2

ztlx: me.ztlx

).then(res =>

console.log("==========获取待缴数据========")

console.log(res)

me.cParamList = []

if (res.status === "Y")

if (res.o)

me.isShowClass = false

me.cParamList = res.o

else

me.isShowClass = true

uni.showToast(

title: '暂无数据！',

duration: 2000

)



else

me.isShowClassP = true

if (me.configURL.isNullstr(res.msg.msg))

uni.showToast(

title: "数据请求失败！",

duration: 2000

)

else

uni.showToast(

title: res.msg.msg,

duration: 2000

)





)

,

onLoad (option)

console.log('onLoad=====>数据加载')

this.xm = this.aes_decrypt(option.xm);

this.sfzjhm = this.aes_decrypt(option.sfzjhm);

if (!this.configURL.isNullstr(option.ztlx))

this.ztlx = option.ztlx



,

onShow ()

//获取存储值

const value = uni.getStorageSync('carinfo_key');

//判断当前是否有该存储值

if (value.isLogin)

if (value.userInfo.sfzjhm === this.sfzjhm)

if (this.current === 0)

console.log('待缴税费费onLoad')

this.getdataSB()

else

console.log('待缴凭证onLoad')

this.getdataPZ()



else

this.getLogin();



else

this.getLogin();



,

onReady ()

console.log('onReady=====>界面渲染完成')





</script>

<style lang="scss">

@import url("daijiaoSF.css");

</style>

nsrsbh: '',

xm: '',

sfzjhm: '',

// 分段选择器数据

items: [

title: "待缴税费"

,



title: "待缴凭证"

,

],

current: 0,

colorIndex: 0,

activeColor: '#168DE9',

//传递给页面数据

isShowClass: true,

isShowClassP: true,

cParamList: [],

cParamListP: [],

indexs: 0,

ztlx: '2'



,

methods:

//获取查询数据 待缴

getdataSB ()



// 作废

seldelectP (e)

console.log('作废成功', e)

this.getdataPZ()

,

//申报

selpayP (e)

console.log('点击了申报e=====>', e)

var arrlist = this.cParamListP[e]

console.log('点击了申报arrlist=====>', arrlist)

// var canshu = '?pzxh=' + arrlist.dzsphm +

// '&nsrsbh=' + this.sfzjhm +

// '&swjgdm=' + arrlist.swjgDm +

// '&username=' + this.xm +

// '&djxh=' + this.djxh +

// '&SorF=' + arrlist.feiOrShui +

// '&navdelta=' + '1' +

// '&bqybtse=' + arrlist.yhdpzje;

var datas =

"pzxh": arrlist.dzsphm,

"nsrsbh": this.sfzjhm,

"swjgdm": arrlist.swjgDm,

"username": this.xm,

"djxh": this.djxh,

"SorF": arrlist.feiOrShui,

"navdelta": '1',

"bqybtse": arrlist.yhdpzje



uni.navigateTo(

url: '../carinfo/paySelect/paySelect?params=' + this.aes_encrypt(JSON.stringify(datas))

)

,

// 隐私登录

getLogin ()

let url = this.configURL.hnserverUrl + '/dzswj/login'

var username = this.xm

var password = this.sfzjhm

const value = uni.getStorageSync('carinfo_key');

//判断当前是否有该存储值

if (value.isLogin)

//读取存储对象对应的值

username = value.userInfo.xm

password = value.userInfo.sfzjhm



this.http.httpRequest(url, 'POST',

username: username,

password: password,

mobileLogin: "on",

loginType: "1",

t: "30",

khdlx: "applet",

).then(res =>

console.log("login接到的数据===", res)

if (res.status === "Y")

const ures = res.o

var storeusers = ;

storeusers.loginName = ures.loginName;

storeusers.sfsmrz = ures.sfsmrz;

storeusers.sessionid = ures.sessionid;

if (ures.sfsmrz === 'Y' && ures.smrzBean)

storeusers.djxh = this.aes_decrypt(ures.smrzBean.djxh);

storeusers.sfzjhm = this.aes_decrypt(ures.smrzBean.zjhm);

storeusers.xm = this.aes_decrypt(ures.smrzBean.xm);



uni.setStorage(

key: 'carinfo_key',

data:

//保存的内容

userInfo: storeusers,

sessionid: ures.sessionid,

userid: storeusers.sfzjhm,

isLogin: true,

sessiontimeout: 'N'

,

success: () =>

this.getdataSB()



);

else

uni.showToast(

title: "暂无数据！",

duration: 2000

)



)

,

,

onLoad (option)

console.log('onLoad=====>数据加载')

this.xm = this.aes_decrypt(option.xm);

this.sfzjhm = this.aes_decrypt(option.sfzjhm);

if (!this.configURL.isNullstr(option.ztlx))

this.ztlx = option.ztlx



,

onShow ()

//获取存储值

const value = uni.getStorageSync('carinfo_key');

//判断当前是否有该存储值

if (value.isLogin)

if (value.userInfo.sfzjhm === this.sfzjhm)

if (this.current === 0)

console.log('待缴税费费onLoad')

this.getdataSB()

else

console.log('待缴凭证onLoad')

this.getdataPZ()



else

this.getLogin();



else

this.getLogin();



,

onReady ()

console.log('onReady=====>界面渲染完成')





</script>

<style lang="scss">

@import url("daijiaoSF.css");

</style>

uni-app支持的css选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容，仅 vue 页面生效
::before	view::before	在 view 组件前边插入内容，仅 vue 页面生效

注意：

• 在 uni-app 中不能使用 * 选择器。
• 微信小程序自定义组件中仅支持 class 选择器

• page 相当于 body 节点，例如：

  <!-- 设置页面背景颜色，使用 scoped 会导致失效 -->
  page 
    background-color:#ccc;
  

   

365个夜晚，我希望做到两天更一篇博客。加油，小白！