前端开发:微信小程序功能记录 2段产品sku代码段

前言: 学习永不止步 ....

成果图片以下,如果想简单,vant里面是有sku框架的,当时是因为不符合我所需要的,就自己纯手写了一个.

这个并非淘宝sku,把所有数据都便利出来的那种,这种是类型为主,来决定次数显示多少.

以下是代码和思路

uview组件的Popup 做弹窗框

html代码

     <u-popup v-model="CourseSele" mode="bottom" border-radius="30">  <view><div class="courseSku"><div class="courseSku-wrap"><div class="courseSku-title"><div class="courseSku-img" ><img :src="d.cover" id="courseImg"/></div><div class="courseSku-price"><span>¥</span>{{(courseMoneyA / 100).toFixed(2)}}</div></div><div class="courseSku-content"><div class="courseSku-ct-wrap"><div class="courseSku-ct-title">课程类型</div><div class="courseSku-ct-crType"><div class="courseSku-ct-crTypes" v-for="(j,index) of courseContent" :key="index":class="{active:courseIndex==index}"@click="clickCourse(index)"><span>{{j.specsName}}</span></div></div></div><div class="courseSku-ct-wrapA"><div class="courseSku-ct-title">课程次数</div><div class="courseSku-ct-crNumber"><div class="courseSku-ct-crNumbers" v-for="(c,index) of numberList" :key="index" :class="{active:categoryIndex==index}"@click="clickCategory(index)"><span>{{c.courseSize}}次</span></div></div></div></div><div class="courseSku-foot"><div class="courseSku-foot-top"><div class="courseSku-ct-title">单次课程价格</div><div><u-number-box v-model="courseOnePrice" @change="OnePriceChange":min="0" :max="999":disabled="isDisabled":disabled-input="true"></u-number-box></div></div><div class="courseSku-foot-Tips">温馨提示: 学员根据实际情况可增减次数, 默认为0次</div></div><div class="courseSku-button"><div class="courseSku-bto-A" @click="Goshoppcart"> <span>加入购物车</span></div><div class="courseSku-bto-B" @click="Gocheckout"><span>立即购买</span></div></div></div></div></view></u-popup>

js代码段

OnePriceChange(e) { //单次课费加减按钮let aanumber = this.numberList[this.categoryIndex].onePriceif (aanumber === 0) {this.isDisabled = true;this.courseNb = 0;this.$refs.us.show({ title: "此课程没有单次课程，不可再加" });return;} else {this.isDisabled = false;this.courseNb = e.value;let aa = this.numberList[this.categoryIndex].onePrice;let aaa = this.numberList[this.categoryIndex].price;let bb = aa * e.valuelet cc = bb + aaathis.courseMoneyA =  cc;}},clickCategory(index){ //课程次数选择的索引值this.categoryIndex = index;this.courseNumber = this.numberList[this.categoryIndex];this.courseMoneyA = this.numberList[this.categoryIndex].price;this.courseOneMoney = this.numberList[this.categoryIndex].onePrice;this.courseTypeId = this.numberList[this.categoryIndex].id;let aa = this.courseOneMoney;let aaa = this.courseMoneyA;let bb = aa * this.courseNb;let cc = bb + aaa;this.courseMoneyA =  cc;},clickCourse(index){ //课程类型选择的索引值this.courseIndex = index;this.courseType = this.courseContent[this.courseIndex];let arr = [];for(let i=0; i<this.courseContent[this.courseIndex].specsList.length; i++){arr.push(this.courseContent[index].specsList[i])}this.numberList = arrthis.courseMoneyA = this.numberList[this.categoryIndex].price;this.courseOneMoney = this.numberList[this.categoryIndex].onePrice;this.courseNumber = this.numberList[0];this.courseTypeId = this.numberList[this.categoryIndex].id;let aa = this.courseOneMoney;let aaa = this.courseMoneyA;let bb = aa * this.courseNb;let cc = bb + aaa;this.courseMoneyA =  cc;},

css代码段

.courseSku {box-sizing: border-box;padding: 0 30rpx;width: 100%;
}
.courseSku-title {width: 100%;padding: 20rpx 0;color: #FF570D;display: flex;align-items: center;font-size: 35rpx;
}
.courseSku-price {padding-left: 30rpx;
}
.courseSku-title img {width: 300rpx;height: 150rpx;border-radius: 25rpx;
}
.courseSku-title span {font-size: 25rpx;
}
.courseSku-ct-wrap {width: 100%;margin-bottom: 10rpx;
}
.courseSku-ct-wrapU {width: 100%;margin-bottom: 10rpx;
}
.courseSku-ct-wrapA {width: 100%;margin-bottom: 70rpx;
}
.courseSku-ct-title {font-weight: 600;padding-bottom: 10rpx;
}.courseSku-foot-top {display: flex;justify-content: space-between;align-items: center;
}
.courseSku-foot-Tips {color: #FD682D;font-size: 25rpx;padding: 20rpx 0;font-weight: 600;
}.courseSku-ct-crNumber {width: 100%;display: flex;padding-top: 10rpx;flex-wrap: wrap;
}
.courseSku-ct-crNumbers {border: 4rpx solid #C8C8C8;border-radius: 10rpx;color: #9D9D9D;text-align: center;font-size: 30rpx;margin-right: 25rpx;margin-bottom: 25rpx;
}
.courseSku-ct-crNumbers span {padding: 10rpx;
}
.courseSku-ct-crType {width: 100%;display: flex;padding-top: 10rpx;flex-wrap: wrap;
}
.courseSku-ct-crTypes {border: 4rpx solid #C8C8C8;border-radius: 10rpx;color: #9D9D9D;text-align: center;font-size: 30rpx;margin-right: 25rpx;margin-bottom: 25rpx;
}
.courseSku-ct-crTypes span {padding: 10rpx;
}.courseSku-button {display: flex;width: 100%;padding-bottom: 30rpx;
}
.courseSku-bto-A {width: 50%;border-right: 1px solid #fff;background-image: linear-gradient(-13deg,rgb(206, 206, 206) 44%,rgba(27, 184, 206, 0) 100%);color: #fff;text-align: center;border-top-left-radius: 50rpx;border-bottom-left-radius: 50rpx;padding: 25rpx 0;font-weight: 500;
}.courseSku-bto-B {width: 50%;background-image: linear-gradient(-13deg,rgba(27, 184, 206, 0.78) 44%,rgba(27, 184, 206, 0) 100%);color: #fff;text-align: center;border-top-right-radius: 50rpx;border-bottom-right-radius: 50rpx;padding: 25rpx 0;font-weight: 500;
}

简单来说,就是处理好用户的点击事件然后进行价格联动而已

以上

搞定,收工..........

前端开发:微信小程序功能记录 2段产品sku代码段相关推荐

前端开发----微信小程序入门级教程（前篇）
前言前段时间,凭借着出生牛犊不怕虎的劲头,凭借着一点Java基础和前端入门的知识水平,买了域名和服务器准备搭建自己的一个技术站点,初衷是旨在打造自己成为一个T形全站工程师.后经过各种百度,各种折腾终 ...
我为什么要开发微信小程序来记录成长锻炼成绩
我家里有两个孩子,一个刚上一年级,一个幼儿园.在当前国家提倡减负的背景下,鼓励大家参加益智健身的活动,体育活动明显增加了.还有一份体育评分标准,如下<小学一年级测试项目及评分标准>: 小学 ...
微信小程序优惠劵功能（包含用户需求，axure原型设计，数据库设计，后台功能，微信小程序功能）
1.用户需求优惠券功能有: 1.后台可以设置优惠券和查看已发出优惠券的状态 2.平台自动给新用户发放优惠劵,或者手动给某些用户发放优惠券 3.用户在小程序中手动领取优惠券 4.用户中心新增" ...
Taro开发微信小程序实现简单的登录退出功能
Taro是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架,还有我发现从某度上搜索的结果首页居然看不到Taro框架的任何信息,但是谷歌首页就直接给出了结果,Taro使用文档.我是准备 ...
视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
公开课丨前端实战来了！如何开发微信小程序？
微信小程序对于我们的生活影响非常的大,不仅用户可以通过小程序得到很多便利,企业通过小程序也可以做好品牌的推广和产品的销售.小程序开发相对于App开发,更快捷.推广成本更低,越来越多的企业想要开发自己的 ...
前端实战系列：如何开发微信小程序
[课程简介] 小程序开发相对于App开发,开发快捷推广成本低,依托微信平台非常好推广,市面上很多企业现在都想开发自己的小程序.本次课程带大家开发一个小程序,从账号注册到编写全流程讲解,实现一个< ...

前端开发:微信小程序功能记录 2段产品sku代码段

前端开发:微信小程序功能记录 2段产品sku代码段相关推荐

最新文章

热门文章

前端开发:微信小程序功能记录 2段 产品sku代码段

前端开发:微信小程序功能记录 2段 产品sku代码段相关推荐

最新文章

热门文章

前端开发:微信小程序功能记录 2段产品sku代码段

前端开发:微信小程序功能记录 2段产品sku代码段相关推荐