网页设计好看的网站,建设部网站监理公告,京东购物,网站功能开发需求分析目录 效果图图1图2 源码最后 这个案例是uniapp#xff0c;同样也适用Vue项目#xff0c;语法一样for循环#xff0c;点击切换
效果图
图1 图2 源码
直接代码复制查看效果
templateview classmy-helper-service-passview classtab… 目录 效果图图1图2 源码最后 这个案例是uniapp同样也适用Vue项目语法一样for循环点击切换
效果图
图1 图2 源码
直接代码复制查看效果
templateview classmy-helper-service-passview classtab-service-boxview classnew-tab-item clickgetTabIndex(index,item.supplier_grade_id) v-for(item,index) in grade_list :class{ active: currentTab index } view classbottomlinetext classbottomline-txt1{{item.name}}/textview classbottomline-txt2text{{item.upgrade_money}}/text/viewtext classbottomline-txt3免{{item.reduce_commission}}元手续费/texttext classbottomline-txt4送{{item.message_num}}条商机提醒/text/view/view/viewview classsubmit-service-boxview classsubmit-service-btn d-c-c clicksubmitServie确认开通并支付{{upgrade_money}}/view/viewview classagreement-boxview classagreement clickisRead!isReadview :classisRead?active agreement-new:agreement-new/view同意万事直帮text clickxieyi(service)《服务通服务协议》/text/view/view!-- 尊享8大服务权益 --view classequity-boxview classequity-titview classequity-tit-lft/viewview classequity-tit-txt尊享8大服务权益/viewview classequity-tit-rgt/view/viewview classequity-listview classequity-list-item!-- image srchttps://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass1.png mode/image --text classequity-list-item1可以发布/texttext classequity-list-item1{{release_num}}个服务/text/viewview classequity-list-item!-- image srchttps://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass2.png mode/image --text classequity-list-item1优质万事直帮/texttext classequity-list-item1服务标识/text/viewview classequity-list-item!-- image srchttps://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass3.png mode/image --text classequity-list-item1提现/texttext classequity-list-item1T0到账/text/view/viewview classequity-list equity-list2view classequity-list-item!-- image srchttps://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass4.png mode/image --text classequity-list-item1服务项目排名/texttext classequity-list-item1优先展示/text/viewview classequity-list-item!-- image srchttps://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass5.png mode/image --text classequity-list-item1减免{{reduce_commission}}元的/texttext classequity-list-item1订单手续费/text/viewview classequity-list-item!-- image srchttps://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass6.png mode/image --text classequity-list-item1导师在线指导/texttext classequity-list-item1接单赚钱/text/view/viewview classequity-list equity-list2view classequity-list-item!-- image srchttps://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass7.png mode/image --text classequity-list-item1享受平台站内和/texttext classequity-list-item1站外流量扶持/text/viewview classequity-list-item!-- image srchttps://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass8.png mode/image --text classequity-list-item1赠送{{message_num}}条短信/texttext classequity-list-item1服务商机提醒,包含对话和订单提醒/text/view/view/viewview classblock-btm/view/view
/templatescriptexport default {data() {return {currentTab: 0,removeobstaclesfrom: , //开通需要传的参数isRead: false,// grade_list: [],supplier_grade_id: ,payPrice:,//支付的钱数service_vip_url:,upgrade_money:,release_num:,reduce_commission:,message_num:,grade_list:[]}},mounted() {this.getVipListData();},methods: {// VIP列表getVipListData() {let self this;self.isloadding true;self._get(supplier.grade/gradeList, {}, function(res) {// 实际接口返回的现在用测试的暂且注释用下面第二个数据赋值// 第一个赋值// self.grade_list res.data.grade_list;// 接口返回的数据复制过来的let getList [{supplier_grade_id: 3,name: 1个月,upgrade_money: 188,is_default: 0,weight: 110,reduce_commission: 188,release_num: 6,message_num: 188,time: 30,is_delete: 0,app_id: 10001,create_time: 2023-09-28 13:50:54,update_time: 2023-12-29 10:25:38},{supplier_grade_id: 4,name: 3个月,upgrade_money: 388,is_default: 0,weight: 120,reduce_commission: 388,release_num: 10,message_num: 388,time: 90,is_delete: 0,app_id: 10001,create_time: 2023-10-19 15:55:03,update_time: 2023-12-29 10:25:45},{supplier_grade_id: 5,name: 12个月,upgrade_money: 688,is_default: 0,weight: 127,reduce_commission: 688,release_num: 18,message_num: 700,time: 365,is_delete: 0,app_id: 10001,create_time: 2023-12-13 09:57:32,update_time: 2023-12-29 10:37:04}]// 第二个赋值self.grade_list getList;// 接口赋值// self.supplier_grade_id res.data.grade_list[0].supplier_grade_id// self.upgrade_money res.data.grade_list[0].upgrade_money// console.log(res.data.grade_list[0].release_num,发布数量);// console.log(res.data.grade_list[0].reduce_commission,发布数量);// console.log(res.data.grade_list[0].message_num,发布数量);// self.release_num res.data.grade_list[0].release_num;// self.reduce_commission res.data.grade_list[0].reduce_commission;// self.message_num res.data.grade_list[0].message_num;// self.service_vip_url res.data.service_vip_url// 模拟复制过来的接口数据赋值self.supplier_grade_id rgetList[0].supplier_grade_idself.upgrade_money getList[0].upgrade_moneyconsole.log(getList[0].release_num,发布数量);console.log(getList[0].reduce_commission,发布数量);console.log(getList[0].message_num,发布数量);self.release_num getList[0].release_num;self.reduce_commission rgetList[0].reduce_commission;self.message_num getList[0].message_num;// self.service_vip_url res.data.service_vip_url});},getTabIndex(index,supplier_grade_id){this.currentTab index;this.upgrade_money this.grade_list[index].upgrade_money;this.release_num this.grade_list[index].release_num;this.reduce_commission this.grade_list[index].reduce_commission;this.message_num this.grade_list[index].message_num;this.supplier_grade_id supplier_grade_id;},xieyi() {// let url ;// if (type service) {// url this.service;// } else {// url this.privacy;// }let url this.service_vip_url;uni.navigateTo({url: /subPages/webview/webview?url url});},submitServie() {let self this;if (!self.isRead) {uni.showToast({title: 请同意并勾选协议内容,duration: 2000,icon: none});return;}wx.showModal({title: 提示,content: 您确认开通吗?,success: function(o) {if (o.confirm) {uni.showLoading({title: 正在处理});self._post(supplier.grade/deposit, {supplier_grade_id: self.supplier_grade_id,}, function(res) {// console.log(res.data.money,返回的余额);// console.log(res.data.order_id,开通成功);let balance res.data.money;//余额// let payPrice self.payPrice;//支付的钱数let payPrice self.upgrade_money;//支付的钱数let order_id res.data.order_iduni.navigateTo({url:/pagesB/user/index_service/my_helper_service_pass/cashier?order_id${order_id}balance${balance}payPrice${payPrice}})// console.log(balance,传余额);// console.log(payPrice,传支付的钱数);// console.log(order_id,传order_id);// let order_id res.data.order_id// uni.navigateTo({// url:/pages/user/index_service/my_helper_service_pass/cashier?order_id order_id// })});}}});}}}
/scriptstyle scopedpage {/* background: linear-gradient(180deg, #1D1F21 0%, #242629 100%); */background-color: black;}.my-helper-service-pass {background-color: black;}.tab-service-box {/* margin: 26rpx 32rpx 0 32rpx; */margin: 0 32rpx 0 32rpx;padding-top: 26rpx;box-sizing: border-box;display: flex;justify-content: space-between;}/* 下面默认未选中样式 */.new-tab-item {width: 214rpx;height: 258rpx;background: linear-gradient(180deg, #FEEFD3 0%, #E2C091 100%);border-radius: 16rpx 16rpx 16rpx 16rpx;opacity: 1;border-radius: 16rpx 16rpx 16rpx 16rpx;}.new-tab-item .bottomline {display: flex;justify-content: center;flex-direction: column;align-items: center;}.bottomline-txt1 {margin-top: 22rpx;font-size: 28rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #231F18;line-height: 52rpx;}.bottomline-txt2 {margin-top: 8rpx;font-size: 36rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #663211;line-height: 52rpx;}.bottomline-txt2 text {font-size: 48rpx;font-weight: 700;}.bottomline-txt3 {margin-top: 8rpx;font-size: 24rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #2B2B2B;line-height: 52rpx;}.bottomline-txt4 {font-size: 24rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #2B2B2B;line-height: 52rpx;}/* 下面选中样式 */.tab-service-box .active {width: 214rpx;height: 258rpx;background: #1F2123;border-radius: 16rpx 16rpx 16rpx 16rpx;opacity: 1;border: 2rpx solid;border-image: linear-gradient(180deg, rgba(164.00000542402267, 104.00000140070915, 66.00000366568565, 1), rgba(226.0000017285347, 192.00000375509262, 145.00000655651093, 1)) 2 2;display: flex;flex-direction: column;border-radius: 16rpx 16rpx 16rpx 16rpx;}.tab-service-box .active .bottomline-txt1 {margin-top: 22rpx;font-size: 28rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #FFFFFF;line-height: 52rpx;}.tab-service-box .active .bottomline-txt2 {margin-top: 8rpx;font-size: 36rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #E2C091;line-height: 52rpx;}.tab-service-box .active .bottomline-txt2 text {font-size: 48rpx;font-weight: 700;}.tab-service-box .active .bottomline-txt3 {margin-top: 8rpx;font-size: 24rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #FFFFFF;line-height: 52rpx;}.tab-service-box .active .bottomline-txt4 {font-size: 24rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #FFFFFF;line-height: 52rpx;}.submit-service-box {display: flex;justify-content: center;margin-top: 60rpx;}.submit-service-btn {width: 554rpx;height: 80rpx;background: linear-gradient(180deg, #FEF0D4 0%, #E1BF8F 100%);border-radius: 60rpx 60rpx 60rpx 60rpx;opacity: 1;font-size: 28rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 700;color: #663211;line-height: 64rpx;}.agreement-box {display: flex;justify-content: center;margin-top: 16rpx;}.agreement {font-size: 24rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #FFFFFF;line-height: 52rpx;display: flex;align-items: center;}.agreement text {font-size: 24rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #E1BF8F;line-height: 52rpx;}.agreement-new {border-radius: 50%;width: 28rpx;height: 28rpx;border: 2rpx solid #999999;background: #fff;position: relative;margin-right: 10rpx;box-sizing: border-box;}.agreement-new.active::after {content: ;width: 16rpx;height: 16rpx;background: linear-gradient(180deg, #FEF0D4 0%, #C19D6C 100%);border-radius: 50%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}.equity-box {margin: 32rpx 30rpx 0 32rpx;height: 770rpx;background: linear-gradient(117deg, #323232 0%, #1B1B1B 100%);border-radius: 20rpx 20rpx 20rpx 20rpx;opacity: 1;display: flex;flex-direction: column;/* margin-bottom: 154rpx; */}.equity-tit {display: flex;align-items: center;justify-content: center;margin-top: 28rpx !important;}.equity-tit-lft {width: 40rpx;height: 4rpx;background: linear-gradient(270deg, #E1C092 0%, rgba(216, 216, 216, 0) 100%);border-radius: 72rpx 72rpx 72rpx 72rpx;opacity: 1;margin-right: 20rpx;}.equity-tit-txt {font-size: 42rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 700;color: #F4DFBA;line-height: 64rpx;}.equity-tit-rgt {width: 40rpx;height: 4rpx;background: linear-gradient(270deg, #E1C092 0%, rgba(216, 216, 216, 0) 100%);border-radius: 72rpx 72rpx 72rpx 72rpx;opacity: 1;transform: rotate(180deg);margin-left: 20rpx;}.equity-list {margin-top: 20rpx;display: flex;/* justify-content: space-between; */justify-content: space-around;/* margin-left: 60rpx;margin-right: 66rpx; */}.equity-list-item {display: flex;flex-direction: column;justify-content: center;align-items: center;}.equity-list-item image {width: 76rpx;height: 76rpx;background: #231F18;opacity: 1;border-radius: 16rpx;margin-bottom: 12rpx;}.equity-list-item1 {font-size: 28rpx;font-family: Microsoft YaHei, Microsoft YaHei;font-weight: 400;color: #FFFFFF;line-height: 40rpx;}.equity-list2 {margin-top: 48rpx;}.block-btm {height: 154rpx;}
/style最后 感觉文章好的话记得点个心心和关注和收藏有错的地方麻烦指正一下如果需要转载,请标明出处多谢
