新增70%静态页
yaya
parent
c25a7efa7c
commit
5a2e999eae
150
commons/base.css
150
commons/base.css
|
|
@ -1,13 +1,3 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* @media screen and (height:812px){
|
/* @media screen and (height:812px){
|
||||||
}
|
}
|
||||||
@media screen and (height:844px){
|
@media screen and (height:844px){
|
||||||
|
|
@ -18,15 +8,18 @@
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
view{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
image{vertical-align: middle;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.bottoc{margin-top: 6rpx;color: #414141;}
|
|
||||||
.opc{opacity: 0.7;}
|
|
||||||
.width100{width: 100%;}
|
.width100{width: 100%;}
|
||||||
.width55{width: 55%;}
|
.width55{width: 55%;}
|
||||||
.width50{width: 50%;}
|
.width50{width: 50%;}
|
||||||
.width49{width: 49%;}
|
.width49{width: 49%;}
|
||||||
|
.width48_8{width: 48.8%;}
|
||||||
|
.width48_7{width: 48.7%;}
|
||||||
|
.width48_6{width: 48.6%;}
|
||||||
.width48_5{width: 48.5%;}
|
.width48_5{width: 48.5%;}
|
||||||
.width48{width: 48%;}
|
.width48{width: 48%;}
|
||||||
.width47{width: 47%;}
|
.width47{width: 47%;}
|
||||||
|
|
@ -41,17 +34,40 @@
|
||||||
.width25{width: 25%;}
|
.width25{width: 25%;}
|
||||||
|
|
||||||
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
|
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
|
||||||
.posir{position: relative;}
|
|
||||||
.posia{position: absolute;}
|
|
||||||
.poszy{position: fixed;left: 0;right: 0;z-index: 3;}
|
|
||||||
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
|
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
|
||||||
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
||||||
|
.poszy{position: fixed;left: 0;right: 0;z-index: 3;}
|
||||||
|
.posi-sticky{position: sticky;top: 0;z-index: 2;background-color: #FFFFFF;}
|
||||||
|
.posir{position: relative;}
|
||||||
|
.posia{position: absolute;}
|
||||||
.posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;}
|
.posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;}
|
||||||
.syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
.posia-xzy{position: absolute;right: 0;left: 0;bottom: 0;z-index: 1;}
|
||||||
.posi-sticky{position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;}
|
.posia-sy20{position: absolute;top: 20rpx;right: 20rpx;}
|
||||||
|
|
||||||
|
.overflow{overflow: hidden;}
|
||||||
|
.overflow-s{overflow: hidden;overflow-y:scroll;}
|
||||||
|
.overflow-s::-webkit-scrollbar{display:none;}
|
||||||
|
|
||||||
|
/* 盒子阴影 */
|
||||||
|
.boxshow1{box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);}
|
||||||
|
.boxshowb{box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, .1);}
|
||||||
|
.boxshowt{box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, .1);}
|
||||||
|
.boxshow2{box-shadow: 0 0 10rpx rgba(167, 167, 167, .1);}
|
||||||
|
|
||||||
|
|
||||||
|
/* 背景色透明 */
|
||||||
|
.bac1{background-color: rgba(0, 0, 0, .1);}
|
||||||
|
.bac2{background-color: rgba(0, 0, 0, .2);}
|
||||||
|
.bac3{background-color: rgba(0, 0, 0, .3);}
|
||||||
|
.bac4{background-color: rgba(0, 0, 0, .4);}
|
||||||
|
.bac5{background-color: rgba(0, 0, 0, .5);}
|
||||||
|
.bac6{background-color: rgba(0, 0, 0, .6);}
|
||||||
|
.bac7{background-color: rgba(0, 0, 0, .7);}
|
||||||
|
.bac8{background-color: rgba(0, 0, 0, .8);}
|
||||||
|
.bac9{background-color: rgba(0, 0, 0, .9);}
|
||||||
|
|
||||||
.dis{display: flex;}
|
.dis{display: flex;}
|
||||||
|
.disjc{display: flex;justify-content: center;}
|
||||||
.disac{display: flex;align-items: center;}
|
.disac{display: flex;align-items: center;}
|
||||||
.disja{display: flex;justify-content: space-around;}
|
.disja{display: flex;justify-content: space-around;}
|
||||||
.disjb{display: flex;justify-content: space-between;}
|
.disjb{display: flex;justify-content: space-between;}
|
||||||
|
|
@ -61,6 +77,7 @@
|
||||||
.fc{flex-direction: column;}
|
.fc{flex-direction: column;}
|
||||||
.fw{flex-wrap: wrap;}
|
.fw{flex-wrap: wrap;}
|
||||||
.fe{justify-content: flex-end;}
|
.fe{justify-content: flex-end;}
|
||||||
|
.ae{align-items: flex-end;}
|
||||||
.flexs{flex-shrink: 0;}
|
.flexs{flex-shrink: 0;}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -74,6 +91,7 @@ button:after{content: none!important;}
|
||||||
.tbot{border-top: 2rpx solid #EEEEEE;}
|
.tbot{border-top: 2rpx solid #EEEEEE;}
|
||||||
.borbot-df{border: 2rpx solid #DFDFDF;}
|
.borbot-df{border: 2rpx solid #DFDFDF;}
|
||||||
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
||||||
|
.borbot-f{border: 2rpx solid #FFFFFF;}
|
||||||
.bleft {border-left: 2rpx solid #EEEEEE;}
|
.bleft {border-left: 2rpx solid #EEEEEE;}
|
||||||
.bbt-d9{border-bottom: 2rpx solid #d9d9d9;}
|
.bbt-d9{border-bottom: 2rpx solid #d9d9d9;}
|
||||||
|
|
||||||
|
|
@ -154,7 +172,9 @@ button:after{content: none!important;}
|
||||||
.col3{color: #333333;}
|
.col3{color: #333333;}
|
||||||
.col34{color: #343434;}
|
.col34{color: #343434;}
|
||||||
.col6{color: #666666;}
|
.col6{color: #666666;}
|
||||||
|
.col26{color: #262626;}
|
||||||
.colf8{color: #F85050;}
|
.colf8{color: #F85050;}
|
||||||
|
.col-e42417{color: #e42417;}
|
||||||
.col9{color: #999999;}
|
.col9{color: #999999;}
|
||||||
.pcol{color: #3875F6;}
|
.pcol{color: #3875F6;}
|
||||||
.col2c{color: #2C2C2C;}
|
.col2c{color: #2C2C2C;}
|
||||||
|
|
@ -163,11 +183,13 @@ button:after{content: none!important;}
|
||||||
.colB3{color: #B3B3B3;}
|
.colB3{color: #B3B3B3;}
|
||||||
.col5b{color: #5B5B5B;}
|
.col5b{color: #5B5B5B;}
|
||||||
.colpeili{color: #868695;}
|
.colpeili{color: #868695;}
|
||||||
|
.col-969696{color: #969696;}
|
||||||
|
|
||||||
|
|
||||||
/* 字体位置 */
|
/* 字体位置 */
|
||||||
.tright{text-align: right;}
|
.tright{text-align: right;}
|
||||||
.tcenter{text-align: center;}
|
.tcenter{text-align: center;}
|
||||||
|
.tline-through{text-decoration: line-through;}
|
||||||
|
|
||||||
/* 文字空两格 */
|
/* 文字空两格 */
|
||||||
.tindent{text-indent: 2em;}
|
.tindent{text-indent: 2em;}
|
||||||
|
|
@ -207,13 +229,32 @@ button:after{content: none!important;}
|
||||||
|
|
||||||
|
|
||||||
/* 圆角 */
|
/* 圆角 */
|
||||||
|
.radius4{border-radius: 4rpx;}
|
||||||
|
.radius6{border-radius: 6rpx;}
|
||||||
|
.radius8{border-radius: 8rpx;}
|
||||||
.radius10{border-radius: 10rpx;}
|
.radius10{border-radius: 10rpx;}
|
||||||
.radius15{border-radius: 15rpx;}
|
.radius12{border-radius: 12rpx;}
|
||||||
|
.radius14{border-radius: 14rpx;}
|
||||||
|
.radius16{border-radius: 16rpx;}
|
||||||
|
.radius18{border-radius: 18rpx;}
|
||||||
.radius20{border-radius: 20rpx;}
|
.radius20{border-radius: 20rpx;}
|
||||||
|
.radius22{border-radius: 22rpx;}
|
||||||
|
.radius24{border-radius: 24rpx;}
|
||||||
|
.radius26{border-radius: 26rpx;}
|
||||||
|
.radius28{border-radius: 28rpx;}
|
||||||
.radius30{border-radius: 30rpx;}
|
.radius30{border-radius: 30rpx;}
|
||||||
.radius35{border-radius: 35rpx;}
|
.radius32{border-radius: 32rpx;}
|
||||||
|
.radius34{border-radius: 34rpx;}
|
||||||
|
.radius36{border-radius: 36rpx;}
|
||||||
|
.radius38{border-radius: 38rpx;}
|
||||||
.radius40{border-radius: 40rpx;}
|
.radius40{border-radius: 40rpx;}
|
||||||
.radius45{border-radius: 45rpx;}
|
.radius42{border-radius: 42rpx;}
|
||||||
|
.radius44{border-radius: 44rpx;}
|
||||||
|
.radius46{border-radius: 46rpx;}
|
||||||
|
.radius48{border-radius: 48rpx;}
|
||||||
|
.radius50{border-radius: 50rpx;}
|
||||||
|
.radius_50{border-radius: 50%;}
|
||||||
|
.radius_100{border-radius: 100%;}
|
||||||
|
|
||||||
/* 上下左右---外边距 */
|
/* 上下左右---外边距 */
|
||||||
.mar10{margin: 10rpx;}
|
.mar10{margin: 10rpx;}
|
||||||
|
|
@ -299,32 +340,89 @@ button:after{content: none!important;}
|
||||||
.mar-y50{margin-right: 50rpx;}
|
.mar-y50{margin-right: 50rpx;}
|
||||||
|
|
||||||
/* 上下左右---内边距 */
|
/* 上下左右---内边距 */
|
||||||
|
.pad2{padding: 2rpx;}
|
||||||
|
.pad4{padding: 4rpx;}
|
||||||
|
.pad6{padding: 6rpx;}
|
||||||
|
.pad8{padding: 8rpx;}
|
||||||
.pad10{padding: 10rpx;}
|
.pad10{padding: 10rpx;}
|
||||||
|
.pad12{padding: 12rpx;}
|
||||||
|
.pad14{padding: 14rpx;}
|
||||||
|
.pad16{padding: 16rpx;}
|
||||||
|
.pad18{padding: 18rpx;}
|
||||||
.pad20{padding: 20rpx;}
|
.pad20{padding: 20rpx;}
|
||||||
.pad25{padding: 25rpx;}
|
.pad22{padding: 22rpx;}
|
||||||
|
.pad24{padding: 24rpx;}
|
||||||
|
.pad26{padding: 26rpx;}
|
||||||
|
.pad28{padding: 28rpx;}
|
||||||
.pad30{padding: 30rpx;}
|
.pad30{padding: 30rpx;}
|
||||||
.pad32{padding: 32rpx;}
|
.pad32{padding: 32rpx;}
|
||||||
|
.pad34{padding: 34rpx;}
|
||||||
.pad36{padding: 36rpx;}
|
.pad36{padding: 36rpx;}
|
||||||
|
.pad38{padding: 38rpx;}
|
||||||
.pad40{padding: 40rpx;}
|
.pad40{padding: 40rpx;}
|
||||||
|
.pad42{padding: 42rpx;}
|
||||||
|
.pad44{padding: 44rpx;}
|
||||||
|
.pad46{padding: 46rpx;}
|
||||||
|
.pad48{padding: 48rpx;}
|
||||||
.pad50{padding: 50rpx;}
|
.pad50{padding: 50rpx;}
|
||||||
/* 上下---内边距 */
|
/* 上下---内边距 */
|
||||||
|
.pad-sx2{padding-top: 2rpx;padding-bottom: 2rpx;}
|
||||||
|
.pad-sx4{padding-top: 4rpx;padding-bottom: 4rpx;}
|
||||||
|
.pad-sx6{padding-top: 6rpx;padding-bottom: 6rpx;}
|
||||||
|
.pad-sx8{padding-top: 8rpx;padding-bottom: 8rpx;}
|
||||||
.pad-sx10{padding-top: 10rpx;padding-bottom: 10rpx;}
|
.pad-sx10{padding-top: 10rpx;padding-bottom: 10rpx;}
|
||||||
|
.pad-sx12{padding-top: 12rpx;padding-bottom: 12rpx;}
|
||||||
|
.pad-sx14{padding-top: 14rpx;padding-bottom: 14rpx;}
|
||||||
|
.pad-sx16{padding-top: 16rpx;padding-bottom: 16rpx;}
|
||||||
|
.pad-sx16{padding-top: 18rpx;padding-bottom: 18rpx;}
|
||||||
.pad-sx20{padding-top: 20rpx;padding-bottom: 20rpx;}
|
.pad-sx20{padding-top: 20rpx;padding-bottom: 20rpx;}
|
||||||
.pad-sx25{padding-top: 25rpx;padding-bottom: 25rpx;}
|
.pad-sx22{padding-top: 22rpx;padding-bottom: 22rpx;}
|
||||||
|
.pad-sx24{padding-top: 24rpx;padding-bottom: 24rpx;}
|
||||||
|
.pad-sx26{padding-top: 26rpx;padding-bottom: 26rpx;}
|
||||||
|
.pad-sx28{padding-top: 28rpx;padding-bottom: 28rpx;}
|
||||||
.pad-sx30{padding-top: 30rpx;padding-bottom: 30rpx;}
|
.pad-sx30{padding-top: 30rpx;padding-bottom: 30rpx;}
|
||||||
.pad-sx32{padding-top: 32rpx;padding-bottom: 32rpx;}
|
.pad-sx32{padding-top: 32rpx;padding-bottom: 32rpx;}
|
||||||
|
.pad-sx34{padding-top: 34rpx;padding-bottom: 34rpx;}
|
||||||
.pad-sx36{padding-top: 36rpx;padding-bottom: 36rpx;}
|
.pad-sx36{padding-top: 36rpx;padding-bottom: 36rpx;}
|
||||||
|
.pad-sx38{padding-top: 38rpx;padding-bottom: 38rpx;}
|
||||||
.pad-sx40{padding-top: 40rpx;padding-bottom: 40rpx;}
|
.pad-sx40{padding-top: 40rpx;padding-bottom: 40rpx;}
|
||||||
.pad-sx50{padding-top: 50rpx;padding-bottom: 50rpx;}
|
.pad-sx50{padding-top: 50rpx;padding-bottom: 50rpx;}
|
||||||
/* 左右---内边距 */
|
/* 左右---内边距 */
|
||||||
|
.pad-zy2{padding-left: 2rpx;padding-right: 2rpx;}
|
||||||
|
.pad-zy4{padding-left: 4rpx;padding-right: 4rpx;}
|
||||||
|
.pad-zy6{padding-left: 6rpx;padding-right: 6rpx;}
|
||||||
|
.pad-zy8{padding-left: 8rpx;padding-right: 8rpx;}
|
||||||
.pad-zy10{padding-left: 10rpx;padding-right: 10rpx;}
|
.pad-zy10{padding-left: 10rpx;padding-right: 10rpx;}
|
||||||
|
.pad-zy12{padding-left: 12rpx;padding-right: 12rpx;}
|
||||||
|
.pad-zy14{padding-left: 14rpx;padding-right: 14rpx;}
|
||||||
|
.pad-zy16{padding-left: 16rpx;padding-right: 16rpx;}
|
||||||
|
.pad-zy18{padding-left: 18rpx;padding-right: 18rpx;}
|
||||||
.pad-zy20{padding-left: 20rpx;padding-right: 20rpx;}
|
.pad-zy20{padding-left: 20rpx;padding-right: 20rpx;}
|
||||||
.pad-zy25{padding-left: 25rpx;padding-right: 25rpx;}
|
.pad-zy22{padding-left: 22rpx;padding-right: 22rpx;}
|
||||||
|
.pad-zy24{padding-left: 24rpx;padding-right: 24rpx;}
|
||||||
|
.pad-zy26{padding-left: 26rpx;padding-right: 26rpx;}
|
||||||
|
.pad-zy28{padding-left: 28rpx;padding-right: 28rpx;}
|
||||||
.pad-zy30{padding-left: 30rpx;padding-right: 30rpx;}
|
.pad-zy30{padding-left: 30rpx;padding-right: 30rpx;}
|
||||||
.pad-zy32{padding-left: 32rpx;padding-right: 32rpx;}
|
.pad-zy32{padding-left: 32rpx;padding-right: 32rpx;}
|
||||||
|
.pad-zy34{padding-left: 34rpx;padding-right: 34rpx;}
|
||||||
.pad-zy36{padding-left: 36rpx;padding-right: 36rpx;}
|
.pad-zy36{padding-left: 36rpx;padding-right: 36rpx;}
|
||||||
|
.pad-zy38{padding-left: 38rpx;padding-right: 38rpx;}
|
||||||
.pad-zy40{padding-left: 40rpx;padding-right: 40rpx;}
|
.pad-zy40{padding-left: 40rpx;padding-right: 40rpx;}
|
||||||
|
.pad-zy42{padding-left: 42rpx;padding-right: 42rpx;}
|
||||||
|
.pad-zy44{padding-left: 44rpx;padding-right: 44rpx;}
|
||||||
|
.pad-zy46{padding-left: 46rpx;padding-right: 46rpx;}
|
||||||
|
.pad-zy48{padding-left: 48rpx;padding-right: 48rpx;}
|
||||||
.pad-zy50{padding-left: 50rpx;padding-right: 50rpx;}
|
.pad-zy50{padding-left: 50rpx;padding-right: 50rpx;}
|
||||||
|
.pad-zy52{padding-left: 52rpx;padding-right: 52rpx;}
|
||||||
|
.pad-zy54{padding-left: 54rpx;padding-right: 54rpx;}
|
||||||
|
.pad-zy56{padding-left: 56rpx;padding-right: 56rpx;}
|
||||||
|
.pad-zy58{padding-left: 58rpx;padding-right: 58rpx;}
|
||||||
|
.pad-zy60{padding-left: 60rpx;padding-right: 60rpx;}
|
||||||
|
.pad-zy62{padding-left: 62rpx;padding-right: 62rpx;}
|
||||||
|
.pad-zy64{padding-left: 64rpx;padding-right: 64rpx;}
|
||||||
|
.pad-zy66{padding-left: 66rpx;padding-right: 66rpx;}
|
||||||
|
.pad-zy68{padding-left: 68rpx;padding-right: 68rpx;}
|
||||||
|
.pad-zy70{padding-left: 70rpx;padding-right: 70rpx;}
|
||||||
/* 上---内边距 */
|
/* 上---内边距 */
|
||||||
.pad-s10{padding-top: 10rpx;}
|
.pad-s10{padding-top: 10rpx;}
|
||||||
.pad-s20{padding-top: 20rpx;}
|
.pad-s20{padding-top: 20rpx;}
|
||||||
|
|
@ -390,7 +488,7 @@ scroll-view ::-webkit-scrollbar {
|
||||||
width: 30rpx;
|
width: 30rpx;
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
border: 2rpx solid #000000;
|
border: 2rpx solid #aaaaaa;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.active-item{
|
.active-item{
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
:ifTitle="ifTitle"
|
:ifTitle="ifTitle"
|
||||||
:ifCenter="ifTitleCenter"
|
:ifCenter="ifTitleCenter"
|
||||||
:backgroudColor="backgroundc"></status-nav>
|
:backgroudColor="backgroundc"></status-nav>
|
||||||
<view class="" :style="{paddingBottom: '70px'}">
|
<view class="" :style="{paddingBottom: '140rpx'}">
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<view class="disjbac fw">
|
||||||
|
<view @tap="goDetail(index)" class="radius8 bacf pad12 boxshow1 width48_6 mar-s20 flexs" v-for="(item,index) in 2" :key="index">
|
||||||
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 226rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
|
<view class="fon24 pad-zy8 disjb fc" style="color: #262626;">
|
||||||
|
<view class="clips2 mar-sx10" style="height: 64rpx;">动作教学动作教学动作教学动作教学Jj</view>
|
||||||
|
<view class="disjbac ae pad-x10">
|
||||||
|
<view class="">
|
||||||
|
<span class="bold colf8">￥199.00</span>
|
||||||
|
<span class="fon20 mar-z10 tline-through" style="color: #969696;">￥220.00</span>
|
||||||
|
</view>
|
||||||
|
<view v-if="index%2==0" class="radius18 pad-zy12 disjcac flexs fon20" style="color: #f37617;border: 2rpx solid #f37617;">购买</view>
|
||||||
|
<view v-else class="radius16 pad-zy10 disjcac colf flexs fon20" style="border: 2rpx solid #f37617;background-color: #f37617;">去学习</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"list",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
goDetail(id){
|
||||||
|
this.$emit('goDetail',id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="status-box" :style="{marginBottom: marginBottom}">
|
<view class="status-box" :style="{marginBottom: marginBottom,paddingTop:statusBarHeight+'px'}">
|
||||||
<!-- 头部状态栏 start -->
|
|
||||||
<view class="status-nav" :style="{background: backgroudColor,height:navBarHeight,paddingTop:statusBarHeight+'px'}">
|
|
||||||
<!-- 头部背景图片 -->
|
<!-- 头部背景图片 -->
|
||||||
<image class="backImg" src="/static/public/icon-head.png" mode=""></image>
|
<image class="backImg" src="/static/public/icon-head.png" mode=""></image>
|
||||||
|
<!-- 头部状态栏 start -->
|
||||||
|
<view class="status-nav" :style="{background: backgroudColor,height:navBarHeight}">
|
||||||
<!-- 返回键 start -->
|
<!-- 返回键 start -->
|
||||||
<view class="disjcac left-box" @tap="backEv" v-if="ifReturn" :style="{height: navBarHeight}" >
|
<view class="disjcac left-box" @tap="backEv" v-if="ifReturn" :style="{height: navBarHeight}" >
|
||||||
<slot name="leftcontent">
|
<slot name="leftcontent">
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
:style="{
|
:style="{
|
||||||
color: titleColor,
|
color: titleColor,
|
||||||
justifyContent: ifCenter ? 'center' : '',
|
justifyContent: ifCenter ? 'center' : '',
|
||||||
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
|
padding: ifCenter ? '0px' : `${ifReturn ? '0 60' : '0 30'}rpx`}">
|
||||||
<view class="title-box" :class="['','clips1','clips2'][clipNumber*1]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">
|
<view class="title-box" :class="['','clips1','clips2'][clipNumber*1]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">
|
||||||
<!-- 有网络 -->
|
<!-- 有网络 -->
|
||||||
<view v-if="ifTitle && ifNet" >{{navBarTitle}}</view>
|
<view v-if="ifTitle && ifNet" >{{navBarTitle}}</view>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="tabBlock" v-if="list.length > 0">
|
<view class="tabBlock" v-if="list.length > 0">
|
||||||
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
|
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
|
||||||
<view class="tab" id="tab_list">
|
<view class="tab" id="tab_list" :style="{justifyContent: between?'space-between':''}">
|
||||||
<!-- 循环体 -->
|
<!-- 循环体 -->
|
||||||
<view v-for="(item, index) in list" :key="index"
|
<view v-for="(item, index) in list" :key="index"
|
||||||
:class="['tab__item', {'tab__item--active': currentIndex === index}]"
|
:class="['tab__item', {'tab__item--active': currentIndex === index}]"
|
||||||
:style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item"
|
:style="{color: (currentIndex === index ? `${itemColor}`: ''),marginRight:customPadding?'80rpx':'0'}" id="tab_item"
|
||||||
@click="select(item, index)">
|
@click="select(item, index)">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<view v-if="!showTitleSlot">{{item.title}}</view>
|
<view v-if="!showTitleSlot">{{item.title}}</view>
|
||||||
|
|
@ -44,6 +44,14 @@
|
||||||
lineAnimated: { // 是否展示下划线动画
|
lineAnimated: { // 是否展示下划线动画
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
},
|
||||||
|
ifBetween: {//是否均分两端
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
ifPadding:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -52,7 +60,9 @@
|
||||||
lineStyle: {},
|
lineStyle: {},
|
||||||
scrollLeft: 0,
|
scrollLeft: 0,
|
||||||
tabsScrollLeft: 0,
|
tabsScrollLeft: 0,
|
||||||
duration: 0.3
|
duration: 0.3,
|
||||||
|
between:true,
|
||||||
|
customPadding:false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -70,7 +80,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.currentIndex = this.value
|
this.currentIndex = this.value;
|
||||||
|
this.between = this.ifBetween;
|
||||||
|
this.customPadding = this.ifPadding;
|
||||||
this.setTabList()
|
this.setTabList()
|
||||||
if (!this.lineAnimated) {
|
if (!this.lineAnimated) {
|
||||||
this.duration = 0
|
this.duration = 0
|
||||||
|
|
@ -138,7 +150,6 @@
|
||||||
.tab {
|
.tab {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
// padding-bottom: 15rpx;
|
// padding-bottom: 15rpx;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,6 @@
|
||||||
return {
|
return {
|
||||||
bcurrent: 0, // 默认当前选中项
|
bcurrent: 0, // 默认当前选中项
|
||||||
isShowVideo:false, // 是否显示视频
|
isShowVideo:false, // 是否显示视频
|
||||||
autoplay:false, // 是否开启自动轮播
|
|
||||||
isVedio:uni.getStorageSync('is_vedio') // 是否是视频
|
isVedio:uni.getStorageSync('is_vedio') // 是否是视频
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,20 @@
|
||||||
const tools = {
|
const tools = {
|
||||||
|
/**
|
||||||
|
* @description 课程详情
|
||||||
|
*/
|
||||||
|
goDetail(id) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/course-detail/course-detail?id=${id}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @description 页面跳转
|
||||||
|
*/
|
||||||
|
goPage(path) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:path
|
||||||
|
})
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* @description 获取字符串中的数字
|
* @description 获取字符串中的数字
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
135
pages.json
135
pages.json
|
|
@ -47,6 +47,78 @@
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "my-course/my-course",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "my-integral/my-integral",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "my-order/my-order",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "my-data/my-data",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "my-vedio/my-vedio",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "my-extend/my-extend",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "my-address/my-address",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "my-sign/my-sign",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -54,6 +126,69 @@
|
||||||
"root": "pagesB",
|
"root": "pagesB",
|
||||||
"pages": [
|
"pages": [
|
||||||
|
|
||||||
|
{
|
||||||
|
"path" : "course-detail/course-detail",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "buy-now/buy-now",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "shop-detail/shop-detail",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "cart/cart",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "confirm-order/confirm-order",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "order-detail/order-detail",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "add-address/add-address",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="pad-x180">
|
<view>
|
||||||
<status-container :ifReturn="false" titlet="课程列表">
|
<status-container :ifReturn="false" titlet="课程列表">
|
||||||
<view slot="content" style="margin-top: -20rpx;">
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
||||||
|
<view class="pad-sx26 pad-zy20" style="border-bottom: 2rpx solid #fcede8;">
|
||||||
|
<view class="radius40 pad-sx2 disjbac pad-zy20" style="background-color: #fff6f5;border: 2rpx solid #ece6e6;">
|
||||||
|
<input type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3">
|
||||||
|
<image class="flexs" src="/static/tabbar/icon-search.png" mode="" style="width: 28rpx;height: 28rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab current='0'></foot-tab>
|
<foot-tab current='0'></foot-tab>
|
||||||
|
|
@ -14,10 +30,14 @@
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
|
import list from '@/components/list.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{'foot-tab' :footTab,swiperTab},
|
components:{'foot-tab' :footTab,swiperTab,list,pitera},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||||
|
// newtop:uni.getSystemInfoSync().statusBarHeight + (140 / 750 * uni.getSystemInfoSync().windowWidth),
|
||||||
current:0,
|
current:0,
|
||||||
dataList:[
|
dataList:[
|
||||||
{title:'课堂讲解'},
|
{title:'课堂讲解'},
|
||||||
|
|
@ -35,6 +55,12 @@
|
||||||
clickTab(index){
|
clickTab(index){
|
||||||
this.current = index;
|
this.current = index;
|
||||||
},
|
},
|
||||||
|
// 去课程详情
|
||||||
|
goDetail(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/course-detail/course-detail?id=${id}`
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="pad-x180">
|
<view>
|
||||||
|
<view class="" :style="{paddingTop:statusBarHeight+'px'}">
|
||||||
|
<image src="/static/tabbar/my-back.png" mode="" class="width100 posia" style="top: 0;z-index: -1;" lazy-load :style="{height:newHeight+'px'}"></image>
|
||||||
|
<view class="disac colf fon42" style="height: 42px;padding: 0 30rpx;">个人中心</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac colf pad-zy40 mar-sx30">
|
||||||
|
<view class="disac">
|
||||||
|
<image class="radius_100 flexs" src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" lazy-load style="width: 100rpx;height: 100rpx;border: 6rpx solid #FFFFFF;background-color: #FFFFFF;"></image>
|
||||||
|
<view class="fon32 mar-z20">郑珊珊12562</view>
|
||||||
|
</view>
|
||||||
|
<view class="disac pad-zy12 pad-sx8 radius4" style="border: 2rpx solid #fccf6d;">
|
||||||
|
<image src="/static/tabbar/icon-rili.png" mode="" style="width: 24rpx;height: 24rpx;" lazy-load></image>
|
||||||
|
<view class="fon24 mar-z10" @tap="$toolAll.tools.goPage('/pagesA/my-sign/my-sign')">签到</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy30">
|
||||||
|
<view class="disjbac pad-sx30" style="background: linear-gradient(to bottom, #fefcfc 0%, #f8efed 100%);border-radius: 24rpx 24rpx 0 0;">
|
||||||
|
<view class="width33 disjcac fc">
|
||||||
|
<view class="fon20" style="color: #3e3e3e;">我的积分</view>
|
||||||
|
<view class="fon36 bold">99999</view>
|
||||||
|
</view>
|
||||||
|
<view class="width33 disjcac fc" style="border-left: 2rpx solid #f1e8e7;border-right: 2rpx solid #f1e8e7;">
|
||||||
|
<view class="fon20" style="color: #3e3e3e;">我的优惠券(张)</view>
|
||||||
|
<view class="fon36 bold">99</view>
|
||||||
|
</view>
|
||||||
|
<view class="width33 disjcac">
|
||||||
|
<view class="fon24 col-e42417 radius30 flexs disjcac" style="width: 180rpx;height: 60rpx;border: 2rpx solid #e42417;">积分商城</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<view class="posir bacf disac fw pad-x50 boxshow2" style="z-index: 1;">
|
||||||
|
<view @tap="chooseFun(index)" class="width25 disjcac fc flexs mar-s50" v-for="(item,index) in funList" :key="index">
|
||||||
|
<view class="">
|
||||||
|
<image class="radius_100" :src="item.src" mode="" style="width: 86rpx;height: 86rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon24 col26 mar-s20">{{item.title}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab current='4'></foot-tab>
|
<foot-tab current='4'></foot-tab>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -12,14 +51,39 @@
|
||||||
components:{'foot-tab' :footTab},
|
components:{'foot-tab' :footTab},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||||
|
newHeight:uni.getSystemInfoSync().screenHeight,
|
||||||
|
funList:[
|
||||||
|
{src:'/static/tabbar/icon-set.png',title:'个人资料'},
|
||||||
|
{src:'/static/tabbar/icon-course.png',title:'我的课程'},
|
||||||
|
{src:'/static/tabbar/icon-order.png',title:'我的订单'},
|
||||||
|
{src:'/static/tabbar/icon-panh.png',title:'我的练习视频'},
|
||||||
|
{src:'/static/tabbar/icon-coupon.png',title:'我的优惠券'},
|
||||||
|
{src:'/static/tabbar/icon-score.png',title:'我的积分'},
|
||||||
|
{src:'/static/tabbar/icon-address.png',title:'我的地址'},
|
||||||
|
{src:'/static/tabbar/icon-znz.png',title:'我的推广'},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
chooseFun(index){
|
||||||
|
let list = [
|
||||||
|
'/pagesA/my-data/my-data',
|
||||||
|
'/pagesA/my-course/my-course',
|
||||||
|
'/pagesA/my-order/my-order',
|
||||||
|
'/pagesA/my-vedio/my-vedio',
|
||||||
|
'/pagesA/my-coupon/my-coupon',
|
||||||
|
'/pagesA/my-integral/my-integral',
|
||||||
|
'/pagesA/my-address/my-address',
|
||||||
|
'/pagesA/my-extend/my-extend',
|
||||||
|
]
|
||||||
|
uni.navigateTo({
|
||||||
|
url:list[index]
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,53 @@
|
||||||
<view class="" style="margin-top: -20rpx;">
|
<view class="" style="margin-top: -20rpx;">
|
||||||
<swiper-pu newBottom="20rpx" newHeight="460rpx"></swiper-pu>
|
<swiper-pu newBottom="20rpx" newHeight="460rpx"></swiper-pu>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
||||||
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="pad-zy20 pad-s25">
|
||||||
|
<view class="radius8 bacf pad10 boxshow1">
|
||||||
|
<view class="posir">
|
||||||
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 518rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
|
<view class="posia-xzy bac5 fon24 colf pad18">
|
||||||
|
<view class="clips1">动作教学动作教学动作教学动作教学</view>
|
||||||
|
<view class="disjbac ae">
|
||||||
|
<view class="">
|
||||||
|
<span class="bold">￥199.00</span>
|
||||||
|
<span class="fon20 colf8 mar-z20 tline-through">￥220.00</span>
|
||||||
|
</view>
|
||||||
|
<view class="radius18 pad-zy12 pad-sx4 borbot-f disjcac">购买</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 两列列表 start -->
|
||||||
|
<list @goDetail="goCourseDetail"></list>
|
||||||
|
<!-- 两列列表 end -->
|
||||||
|
|
||||||
|
<!-- 推荐视频 start -->
|
||||||
|
<view class="disjb ae mar-s40 mar-x20">
|
||||||
|
<view class="fon32 bold colb">推荐视频</view>
|
||||||
|
<view class="fon20" style="color: #bbb4b3;">更多+</view>
|
||||||
|
</view>
|
||||||
|
<view class="radius8 bacf pad10 boxshow1 mar-x30" v-for="(item,index) in 2" :key="index">
|
||||||
|
<view class="posir disjcac">
|
||||||
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
|
<image class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon24 pad-sx16 disjcac" style="color: #262626;">
|
||||||
|
<view class="clips2">动作教学动作教学动作教学动作教学动作教学动作教学</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 推荐视频 end -->
|
||||||
|
<!-- 推荐商品 start -->
|
||||||
|
<view class="disjb ae mar-s40">
|
||||||
|
<view class="fon32 bold colb">推荐商品</view>
|
||||||
|
<view class="fon20" style="color: #bbb4b3;">更多+</view>
|
||||||
|
</view>
|
||||||
|
<list @goDetail="goShopDetail"></list>
|
||||||
|
<!-- 推荐商品 end -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab></foot-tab>
|
<foot-tab></foot-tab>
|
||||||
|
|
@ -17,14 +62,17 @@
|
||||||
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
||||||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
import list from '@/components/list.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTab,
|
'foot-tab' :footTab,
|
||||||
swiperTab,
|
swiperTab,
|
||||||
swiperPu
|
swiperPu,
|
||||||
|
list
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
||||||
current:0,
|
current:0,
|
||||||
dataList:[
|
dataList:[
|
||||||
{title:'课堂讲解'},
|
{title:'课堂讲解'},
|
||||||
|
|
@ -49,6 +97,18 @@
|
||||||
// tab点击事件
|
// tab点击事件
|
||||||
clickTab(index){
|
clickTab(index){
|
||||||
this.current = index;
|
this.current = index;
|
||||||
|
},
|
||||||
|
// 去课程详情
|
||||||
|
goCourseDetail(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/course-detail/course-detail?id=${id}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 去商品详情
|
||||||
|
goShopDetail(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/shop-detail/shop-detail?id=${id}`
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="pad-x160">
|
<view>
|
||||||
<status-container :ifReturn="false" titlet="商城列表">
|
<status-container :ifReturn="false" titlet="产品列表">
|
||||||
<view slot="content">
|
<view slot="content">
|
||||||
|
<view class="posi-sticky" :style="{top:newtop+'px'}" style="margin-top: -20rpx;">
|
||||||
|
<swiper-tab id="tab" :ifBetween="false" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
|
|
@ -13,17 +22,39 @@
|
||||||
<script>
|
<script>
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
|
import list from '@/components/list.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTab,
|
'foot-tab' :footTab,
|
||||||
|
swiperTab,
|
||||||
|
list,
|
||||||
|
pitera
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||||
|
current:0,
|
||||||
|
dataList:[
|
||||||
|
{title:'全部'},
|
||||||
|
{title:'机械'},
|
||||||
|
{title:'书籍'},
|
||||||
|
{title:'鞋子'},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// tab点击事件
|
||||||
|
clickTab(index){
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
// 去商品详情
|
||||||
|
goDetail(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/shop-detail/shop-detail?id=${id}`
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<status-container :ifReturn="false" titlet="视频列表">
|
<status-container :ifReturn="false" titlet="视频列表">
|
||||||
<view slot="content">
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
||||||
|
<view class="pad-sx26 pad-zy20" style="box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.1);">
|
||||||
|
<view class="radius40 pad-sx2 disjbac pad-zy20" style="background-color: #fff6f5;border: 2rpx solid #ece6e6;">
|
||||||
|
<input type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3">
|
||||||
|
<image class="flexs" src="/static/tabbar/icon-search.png" mode="" style="width: 28rpx;height: 28rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in 2" :key="index">
|
||||||
|
<view class="posir disjcac">
|
||||||
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
|
<image class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy10">
|
||||||
|
<view class="fon24 pad-sx16 clips2" style="color: #262626;">动作教学动作教学动作教学动作教学动作教学动作教学</view>
|
||||||
|
<view class="disjbac fon20">
|
||||||
|
<view class="disac" style="color: #aaaaaa;">
|
||||||
|
<image class="mar-y10" src="/static/tabbar/icon-look.png" mode="" style="width: 33rpx;height: 25rpx;" lazy-load></image>3021
|
||||||
|
</view>
|
||||||
|
<view class="" style="color: #7f7f7f;">2022.07.22</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
|
|
@ -13,12 +38,15 @@
|
||||||
<script>
|
<script>
|
||||||
// 底部组件
|
// 底部组件
|
||||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTab,
|
'foot-tab' :footTab,
|
||||||
|
pitera
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
||||||
dataList:[],
|
dataList:[],
|
||||||
ifloading:false,
|
ifloading:false,
|
||||||
flag:true
|
flag:true
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="我的地址" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf"></view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
pitera
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,27 +1,107 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="pad-x160">
|
<view>
|
||||||
<status-container titlet="我的优惠券">
|
<status-container titlet="我的优惠券" returnc="#FFFFFF">
|
||||||
<view slot="content">
|
<view slot="content">
|
||||||
|
<view class="posi-sticky" :style="{top:newtop+'px'}" style="margin-top: -20rpx;">
|
||||||
|
<swiper-tab id="tab" :ifBetween="false" :ifPadding="true" :list="tabList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20 mar-s30">
|
||||||
|
<view class="bacf radius12 pad-sx20 fon24 mar-x20" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<view class="disac">
|
||||||
|
<view class="flexs col-e42417 dis pad-z20" style="min-width: 180rpx;" :style="{color:current!=0?'#c0c0c0':'#e42417'}">
|
||||||
|
<view class="">￥</view>
|
||||||
|
<view class="fon66 bold">{{item.price}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="width100 pad-zy20 posir">
|
||||||
|
<view class="disjbac" style="border-bottom: 2rpx dashed #e4e4e4;">
|
||||||
|
<view class="line-h40 pad-x10">
|
||||||
|
<view class="">{{item.title}}</view>
|
||||||
|
<view class="fon20" style="color: #747474;">有限期：{{item.time}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="flexs mar-z20 radius26 colf disjcac" style="width: 124rpx;height: 52rpx;" :style="{backgroundColor:current!=0?'#c0c0c0':'#f37717'}">去使用</view>
|
||||||
|
</view>
|
||||||
|
<view class="disac fon20 pad-s20" style="color: #747474;">
|
||||||
|
<span @tap="lookDetail(index)">详细信息</span>
|
||||||
|
<view @tap="lookDetail(index)" class="icon icon-return fon20 mar-z10" :class="item.show?'isshow':'noshow'"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 图标 -->
|
||||||
|
<view class="posia" v-if="current!=0" style="position: absolute;right: 120rpx;top: 60rpx;">
|
||||||
|
<image v-if="current==1" src="/static/tabbar/icon-used.png" style="width: 90rpx;height: 86rpx;" mode="" lazy-load></image>
|
||||||
|
<image v-if="current==2" src="/static/tabbar/icon-overduce.png" style="width: 90rpx;height: 86rpx;" mode="" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="item.show" class="fon20 line-h36 pad-zy20 pad-s20" style="color: #898989;">
|
||||||
|
<view class="">时间：2022.07.11 00:00:00 - 2022.07.30 23:59:59</view>
|
||||||
|
<view class="">来源：秒杀抢卷所得</view>
|
||||||
|
<view class="">渠道：全部渠道可</view>
|
||||||
|
<view class="disac">编号：全部渠道可
|
||||||
|
<image class="mar-z10" src="/static/tabbar/icon-bh.png" mode="" style="width: 22rpx;height: 22rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 底部组件
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
export default {
|
export default {
|
||||||
|
components:{
|
||||||
|
swiperTab,
|
||||||
|
pitera
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||||
|
current:0,
|
||||||
|
tabList:[
|
||||||
|
{title:'待使用'},
|
||||||
|
{title:'已使用'},
|
||||||
|
{title:'已过期'}
|
||||||
|
],
|
||||||
|
dataList:[
|
||||||
|
{price:10,title:'【满减卷】满100元减10元抵扣卷',time:'2022.07.11-2022.07.30',show:false},
|
||||||
|
{price:10,title:'【满减卷】满100元减10元抵扣卷',time:'2022.07.11-2022.07.30',show:false},
|
||||||
|
{price:10,title:'【满减卷】满100元减10元抵扣卷',time:'2022.07.11-2022.07.30',show:false},
|
||||||
|
{price:10,title:'【满减卷】满100元减10元抵扣卷',time:'2022.07.11-2022.07.30',show:false},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// tab点击事件
|
||||||
|
clickTab(index){
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
// 去商品详情
|
||||||
|
goDetail(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesB/shop-detail/shop-detail?id=${id}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 查看优惠券详情
|
||||||
|
lookDetail(index){
|
||||||
|
if(this.dataList[index].show){
|
||||||
|
this.dataList[index].show = false;
|
||||||
|
} else {
|
||||||
|
this.dataList.forEach(item=>item.show=false);
|
||||||
|
this.dataList[index].show = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.used-item{
|
||||||
|
border-top: 2rpx solid ;
|
||||||
|
}
|
||||||
|
.noshow{transform: rotate(-90deg);transition: all .3s linear;}
|
||||||
|
.isshow{transform: rotate(90deg);transition: all .3s linear;}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="我的课程" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="pad-zy30 bacf pad-x30">
|
||||||
|
<view class="pad-sx30 disac fon24 bbot" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<image class="flexs" :src="item.imgsrc" mode="aspectFill" style="width: 228rpx;height: 160rpx;"></image>
|
||||||
|
<view class="disjbac fc width100 mar-z20" style="height: 160rpx;">
|
||||||
|
<view class="fon26 col26 width100">
|
||||||
|
<view class="clips2">{{item.title}}</view>
|
||||||
|
<view class="fon20 mar-s10" style="color: #7f7f7f;">{{item.time}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac width100">
|
||||||
|
<view class="fon24">￥{{item.price}}</view>
|
||||||
|
<view class="disjcac fon22 radius26" style="width: 144rpx;height: 52rpx;color: #f37717;border: 2rpx solid #f37717;">点击学习</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
swiperTab,
|
||||||
|
pitera
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList:[
|
||||||
|
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'思通造化随通而行为术基础动作教学思通造化随通而行为术基础动作教学',time:'2022.07.20 12:12:12',price:'199.00'},
|
||||||
|
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'思通造化随通而行为术基础动作教学思通造化随通而行为术基础动作教学',time:'2022.07.20 12:12:12',price:'199.00'},
|
||||||
|
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'思通造化随通而行为术基础动作教学思通造化随通而行为术基础动作教学',time:'2022.07.20 12:12:12',price:'199.00'},
|
||||||
|
{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'思通造化随通而行为术基础动作教学思通造化随通而行为术基础动作教学',time:'2022.07.20 12:12:12',price:'199.00'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.used-item{
|
||||||
|
border-top: 2rpx solid ;
|
||||||
|
}
|
||||||
|
.noshow{transform: rotate(-90deg);transition: all .3s linear;}
|
||||||
|
.isshow{transform: rotate(90deg);transition: all .3s linear;}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="基本资料" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="pad-zy30 bacf">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="我的推广" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf"></view>
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
pitera
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="积分收支明细" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="padding-bottom: 0;">
|
||||||
|
<view class="posi-sticky boxshow2" :style="{top:newtop+'px'}" style="margin-top: -20rpx;">
|
||||||
|
<view class="bbot disjbac pad-zy40 pad-sx30">
|
||||||
|
<view class="fon26">积分：6548</view>
|
||||||
|
<view class="disac pad-zy12 pad-sx8 radius6" style="border: 2rpx solid #adadad;">
|
||||||
|
<image src="/static/tabbar/icon-score-rili.png" mode="" style="width: 24rpx;height: 24rpx;" lazy-load></image>
|
||||||
|
<view class="fon24 mar-z10" style="color: #adadad;">签到</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<swiper-tab id="tab" :ifBetween="false" :ifPadding="true" :list="tabList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||||
|
</view>
|
||||||
|
<view class="mar-s30 bacf pad-zy40 pad-sx20 boxshow2">
|
||||||
|
<view class="pad-sx20 col26 bbot" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<view class="fon26 disjbac">
|
||||||
|
<view class="">{{item.title}}</view>
|
||||||
|
<view class="col-e42417">{{item.price}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="fon20" style="color: #8b8b8b;">{{item.time}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
swiperTab,
|
||||||
|
pitera
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||||
|
current:0,
|
||||||
|
tabList:[
|
||||||
|
{title:'全部'},
|
||||||
|
{title:'已获取'},
|
||||||
|
{title:'已消耗'}
|
||||||
|
],
|
||||||
|
dataList:[
|
||||||
|
{price:10,title:'签到',time:'2022.07.11-2022.07.30'},
|
||||||
|
{price:10,title:'分享',time:'2022.07.11-2022.07.30'},
|
||||||
|
{price:10,title:'推荐消费',time:'2022.07.11-2022.07.30'},
|
||||||
|
{price:10,title:'课程抵扣',time:'2022.07.11-2022.07.30'},
|
||||||
|
{price:10,title:'商品抵扣',time:'2022.07.11-2022.07.30'},
|
||||||
|
{price:10,title:'签到',time:'2022.07.11-2022.07.30'},
|
||||||
|
{price:10,title:'分享',time:'2022.07.11-2022.07.30'},
|
||||||
|
{price:10,title:'推荐消费',time:'2022.07.11-2022.07.30'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// tab点击事件
|
||||||
|
clickTab(index){
|
||||||
|
this.current = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="我的订单" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
||||||
|
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
|
export default {
|
||||||
|
components:{swiperTab,pitera},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||||
|
// newtop:uni.getSystemInfoSync().statusBarHeight + (140 / 750 * uni.getSystemInfoSync().windowWidth),
|
||||||
|
current:0,
|
||||||
|
dataList:[
|
||||||
|
{title:'全部'},
|
||||||
|
{title:'待付款'},
|
||||||
|
{title:'待收货'},
|
||||||
|
{title:'已完成'},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// tab点击事件
|
||||||
|
clickTab(index){
|
||||||
|
this.current = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="" :style="{paddingTop:statusBarHeight+'px'}">
|
||||||
|
<image src="/static/tabbar/my-back.png" mode="" class="width100 posia" style="top: 0;z-index: -1;" lazy-load :style="{height:newHeight+'px'}"></image>
|
||||||
|
<view class="disac colf fon42" style="height: 42px;padding: 0 30rpx;"><view class="icon icon-return fon38 colf"></view>每日签到</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy30">
|
||||||
|
<view class="disjbac pad-sx30" style="background: linear-gradient(to bottom, #fefcfc 0%, #f8efed 100%);border-radius: 24rpx 24rpx 0 0;">
|
||||||
|
<view class="width33 disjcac fc">
|
||||||
|
<view class="fon20" style="color: #3e3e3e;">我的积分</view>
|
||||||
|
<view class="fon36 bold">99999</view>
|
||||||
|
</view>
|
||||||
|
<view class="width33 disjcac fc" style="border-left: 2rpx solid #f1e8e7;border-right: 2rpx solid #f1e8e7;">
|
||||||
|
<view class="fon20" style="color: #3e3e3e;">我的优惠券(张)</view>
|
||||||
|
<view class="fon36 bold">99</view>
|
||||||
|
</view>
|
||||||
|
<view class="width33 disjcac">
|
||||||
|
<view class="fon24 col-e42417 radius30 flexs disjcac" style="width: 180rpx;height: 60rpx;border: 2rpx solid #e42417;">积分商城</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<view class="posir bacf disac fw pad-zy10 boxshow2 pad-x30" style="z-index: 1;">
|
||||||
|
<view @tap="chooseFun(index)" class="disjbac bbot width100 pad-sx20 pad-zy30" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<view class="fon24 col-e42417">{{item.price}}</view>
|
||||||
|
<view class="fon20" style="color: #676767;">{{item.time}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||||
|
newHeight:uni.getSystemInfoSync().screenHeight,
|
||||||
|
dataList:[
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
{price:10,time:'2022.07.23'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="我的练习视频" returnc="#FFFFFF">
|
||||||
|
<view slot="content">
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in 2" :key="index">
|
||||||
|
<view class="posir disjcac">
|
||||||
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
|
<image class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
<view class="fon24 pad20" style="color: #7f7f7f;">2022.07.23 12:12:12</view>
|
||||||
|
</view>
|
||||||
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
pitera
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList:[],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="地址新增" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf"></view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="课程购买" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf pad30 fon24 boxshowb">
|
||||||
|
<view class="disac bbot pad-x30">
|
||||||
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" class="flexs mar-y20" style="width: 228rpx;height: 160rpx;" lazy-load></image>
|
||||||
|
<view class="disjb fc pad-s10 pad-x20" style="height: 160rpx;">
|
||||||
|
<view class="fon26 col26 clips2">武，止戈为武；术，思通造化、随通而 行为术基础动作教学</view>
|
||||||
|
<view class="col-e42417 dis ae">
|
||||||
|
<view class="bold">￥199.00</view>
|
||||||
|
<view class="tline-through fon20 col-969696 mar-z10">￥220.00</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bbot pad-sx30">
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="">商品金额</view>
|
||||||
|
<view class="">￥199.00</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac mar-s30">
|
||||||
|
<view class="">优惠券抵扣</view>
|
||||||
|
<view class="disjbac col-e42417">-￥10.00 <i class="icon icon-next fon20" style="color: #7f7f7f;"></i></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bacf mar-s30 disjbac fon24 pad-sx20 pad-zy30 boxshowb">
|
||||||
|
<view class="">支付方式</view>
|
||||||
|
<view class="">微信支付</view>
|
||||||
|
</view>
|
||||||
|
<!-- 立即购买 -->
|
||||||
|
<view class="posixzy bacf pad-sx20 disjbac pad-zy30 boxshowt">
|
||||||
|
<view class="fon30 col-e42417 bold">￥189.00</view>
|
||||||
|
<view class="fon24 colf radius32 disjcac" style="background-color: #f37617;width: 184rpx;height: 64rpx;">去支付</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 底部组件
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
export default {
|
||||||
|
components:{'foot-tab' :footTab},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="购物车" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf boxshowb posi-sticky" :style="{top:newtop+'px'}">
|
||||||
|
<view class="pad-zy30 pad-sx24 disjbac pad-zy30 pad-sx20">
|
||||||
|
<view class="fon26 col26">四川省成都市武侯区</view>
|
||||||
|
<image src="/static/tabbar/icon-edit.png" mode="" style="width: 26rpx;height: 28rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bacf mar-s30 pad-zy30 pad-x30 boxshowb">
|
||||||
|
<view class="disac animated pad-sx30 bbot" :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}" v-for="(item,index) in datalist" :key="index">
|
||||||
|
<!-- 选择 -->
|
||||||
|
<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
|
||||||
|
<!-- 商品图片 -->
|
||||||
|
<image @tap="chooseEv(index)" class="flexs mar-zy20" :src="item.imgsrc" mode="aspectFill" style="width: 194rpx;height: 136rpx;" lazy-load></image>
|
||||||
|
<view class="disjb fc width100" style="height: 136rpx;">
|
||||||
|
<view @tap="goDetail(item.id)">
|
||||||
|
<!-- 商品标题 -->
|
||||||
|
<view class="fon24 clips2 col26">{{item.title}}{{datalist.length}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac">
|
||||||
|
<!-- 商品价格 -->
|
||||||
|
<view class="fon24 col-e42417 bold">￥{{$toolAll.tools.addXiaoShu(item.price)}}</view>
|
||||||
|
<!-- 商品数量 -->
|
||||||
|
<view class="disac overflow" style="height: 50rpx;">
|
||||||
|
<!-- 减数量 -->
|
||||||
|
<view class="borbot-df disjcac radius4" @tap="addCutEv(index,0)" style="color: #d1d1d1;width: 50rpx;height: 50rpx;">
|
||||||
|
<i class="icon icon-cut fon20" :style="{backgroundColor: item.num==minNum || !ifManage ? '#FFFFFF' : '#000000'}"></i>
|
||||||
|
</view>
|
||||||
|
<!-- 实际数量 -->
|
||||||
|
<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput" v-model="item.num">
|
||||||
|
<!-- 加数量 -->
|
||||||
|
<view class="borbot-df disjcac radius4" @tap="addCutEv(index,1)" style="color: #d1d1d1;width: 50rpx;height: 50rpx;">
|
||||||
|
<i class="icon icon-add fon20" :style="{backgroundColor: item.num==maxNum || !ifManage ? '#FFFFFF' : '#000000'}"></i>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 热门产品推荐 -->
|
||||||
|
<view class="pad-zy30 mar-x30 mar-s40">
|
||||||
|
<view class="disjcac" style="border-bottom: 2rpx solid #ebe3e2;">
|
||||||
|
<view class="col26 fon30 pad-zy14" style="background-color: #fff6f5;margin-bottom: -20rpx;">热门产品推荐</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
<list @goDetail="goDetail"></list>
|
||||||
|
</view>
|
||||||
|
<!-- 底部导航 -->
|
||||||
|
<view class="disjbac bacf pad20 posixzy fon24 boxshowt">
|
||||||
|
<view class="disac" @tap="chooseAllEv">
|
||||||
|
<view class="flexs mo-item mar-y10" :class="ifSelectAll ? 'active-item' : ''"></view>
|
||||||
|
<span>全选</span>
|
||||||
|
</view>
|
||||||
|
<view class="disac">
|
||||||
|
<view class="">合计：<span class="fon38 colf8 bold">￥{{allPrice}}</span></view>
|
||||||
|
<view @tap="goConfirmOrder" class="fon24 radius32 colf disjcac mar-z20" style="width: 184rpx;height: 64rpx;background-color: #f37617;">去支付</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 底部组件
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
import list from '@/components/list.vue';
|
||||||
|
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
||||||
|
export default {
|
||||||
|
components:{'foot-tab' :footTab,list,swiperPu},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||||
|
richText:'',
|
||||||
|
ifLogin:false,
|
||||||
|
datalist:[
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
|
||||||
|
],
|
||||||
|
ifSelectAll:false,//是否全选
|
||||||
|
originalNum:0,//当前输入框原值
|
||||||
|
maxNum:20,//最大可输入数量
|
||||||
|
minNum:1,//最小可输入数量
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 开启banner图自动轮播
|
||||||
|
this.$store.commit('setAutoplay',true);
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
// 关闭banner图自动轮播
|
||||||
|
this.$store.commit('setAutoplay',false);
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
// 总价及合计
|
||||||
|
allPrice() {
|
||||||
|
let allPrice = 0;
|
||||||
|
this.datalist.forEach(item=>{
|
||||||
|
if(item.ifcheck) {
|
||||||
|
allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this.$toolAll.tools.addXiaoShu(allPrice);
|
||||||
|
},
|
||||||
|
// 要删除的数量
|
||||||
|
delNum() {
|
||||||
|
let delNum = 0;
|
||||||
|
this.datalist.forEach(item=>{
|
||||||
|
if(item.ifcheck) {
|
||||||
|
delNum += 1;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return delNum;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 前往确认订单页
|
||||||
|
goConfirmOrder(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesB/confirm-order/confirm-order'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 全选事件
|
||||||
|
chooseAllEv(){
|
||||||
|
this.ifSelectAll = !this.ifSelectAll;
|
||||||
|
this.datalist.forEach(item=>item.ifcheck = this.ifSelectAll ? true : false);
|
||||||
|
},
|
||||||
|
// 选中事件
|
||||||
|
chooseEv(index) {
|
||||||
|
this.datalist[index].ifcheck = !this.datalist[index].ifcheck;
|
||||||
|
this.judgeSelectAllEv();
|
||||||
|
},
|
||||||
|
// 判断全选中是否被选中
|
||||||
|
judgeSelectAllEv() {
|
||||||
|
let exit = this.datalist.findIndex(item=>item.ifcheck==false);
|
||||||
|
if(exit!=-1) {
|
||||||
|
this.ifSelectAll = false
|
||||||
|
} else {
|
||||||
|
this.ifSelectAll = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 去商品详情事件
|
||||||
|
goDetail(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesB/shop-detail/shop-detail'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 数量加减事件
|
||||||
|
addCutEv(index,num) {
|
||||||
|
// 不在管理状态下：可进行加减
|
||||||
|
if(num) {
|
||||||
|
// 加 ，如果当前商品数量不等于最大值
|
||||||
|
if(this.datalist[index].num != this.maxNum) {
|
||||||
|
this.datalist[index].num++;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 减 ，如果当前商品数量大于最小值
|
||||||
|
if(this.datalist[index].num > this.minNum) {
|
||||||
|
this.datalist[index].num--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(this.allPrice,'总价');
|
||||||
|
},
|
||||||
|
// 输入框获取焦点事件
|
||||||
|
focusEv(num) {
|
||||||
|
// 储存当前商品的原始数值
|
||||||
|
this.originalNum = num;
|
||||||
|
},
|
||||||
|
// 输入框失去焦点事件
|
||||||
|
blurEv(index,e) {
|
||||||
|
// 失去焦点时，获取当前输入框里的数值
|
||||||
|
let currentNum = e.detail.value*1;
|
||||||
|
// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
|
||||||
|
this.datalist[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.countInput{width: 68rpx;border-top: 2rpx solid #DFDFDF;border-bottom: 2rpx solid #DFDFDF;border-radius: 4rpx;height: 50rpx;box-sizing: border-box;}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="确认订单" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf disjbac fon24 pad-sx20 pad-zy30 boxshowb">
|
||||||
|
<view class="fon20 line-h40">
|
||||||
|
<view class="" style="color: #676767;">四川省成都市武侯区</view>
|
||||||
|
<view class="fon26">成华奥园广场三期6栋1418-1419</view>
|
||||||
|
<view class="">郑珊珊 182****1234</view>
|
||||||
|
</view>
|
||||||
|
<view class="icon icon-next fon28" style="color: #777777;"></view>
|
||||||
|
</view>
|
||||||
|
<view class="bacf mar-s30 pad30 fon24 boxshowb">
|
||||||
|
<view class="disac bbot pad-x30">
|
||||||
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" mode="aspectFill" class="flexs mar-y20" style="width: 228rpx;height: 160rpx;" lazy-load></image>
|
||||||
|
<view class="disjb fc pad-sx10 fon24" style="height: 160rpx;">
|
||||||
|
<view class="col26 clips2">武，止戈为武；术，思通造化、随通而 行为术基础动作教学</view>
|
||||||
|
<view class="col26 disjbac">
|
||||||
|
<view class="">￥199.00</view>
|
||||||
|
<view style="letter-spacing: 6rpx;">X2</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bbot pad-sx30">
|
||||||
|
<view class="disjbac">
|
||||||
|
<view class="">商品金额</view>
|
||||||
|
<view class="">￥199.00</view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac mar-s30">
|
||||||
|
<view class="">优惠券抵扣</view>
|
||||||
|
<view class="disjbac col-e42417">-￥10.00 <view class="icon icon-next fon28 mar-z10" style="color: #777777;"></view></view>
|
||||||
|
</view>
|
||||||
|
<view class="disjbac mar-s30">
|
||||||
|
<view class="">积分抵扣</view>
|
||||||
|
<view class="disjbac col-e42417">-￥10.00 <view class="icon icon-next fon28 mar-z10" style="color: #777777;"></view></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="disje pad-s30 pad-x10 pad-y30">
|
||||||
|
合计：￥1168.00
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 立即购买 -->
|
||||||
|
<view class="posixzy bacf pad-sx20 disjbac pad-zy30 boxshowt">
|
||||||
|
<view class="fon24">合计：<span class="col-e42417 fon34 bold">￥189.00</span></view>
|
||||||
|
<view class="fon24 colf radius32 disjcac" style="background-color: #f37617;width: 184rpx;height: 64rpx;">去支付</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 底部组件
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
export default {
|
||||||
|
components:{'foot-tab' :footTab},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="课程详情" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf">
|
||||||
|
<view class="fon32 tcenter pad-s50">课程一：棍术讲解</view>
|
||||||
|
<view class="pad30 posir disjcac">
|
||||||
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
|
<image class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||||
|
</view>
|
||||||
|
<view class="mar-zy30 bbot pad-x10">
|
||||||
|
<span class="fon28 bold posir pad-x10">
|
||||||
|
课程介绍
|
||||||
|
<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
|
||||||
|
</span>
|
||||||
|
</view>
|
||||||
|
<view class="mar-zy30 pad-sx20 bbot">
|
||||||
|
<view class="disjbac ae pad-x20" style="color: #262626;">
|
||||||
|
<view class="fon24">教练：万老师</view>
|
||||||
|
<view class="fon20">2022.07.22</view>
|
||||||
|
</view>
|
||||||
|
<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text>
|
||||||
|
</view>
|
||||||
|
<view class="disjcac pad-sx40">
|
||||||
|
<view class="disjcac fon28 radius34"
|
||||||
|
style="width: 290rpx;height: 68rpx;border: 2rpx solid #e42417;color: #e42417;"
|
||||||
|
@tap="$toolAll.tools.goPage('/pagesB/buy-now/buy-now')">立即购买</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pad-zy20">
|
||||||
|
<view class="disjb ae mar-s40">
|
||||||
|
<view class="fon32 bold colb">推荐课程</view>
|
||||||
|
<view class="fon20" style="color: #bbb4b3;">更多+</view>
|
||||||
|
</view>
|
||||||
|
<list></list>
|
||||||
|
</view>
|
||||||
|
<!-- 登录弹框 start -->
|
||||||
|
<view class="posAll disjc" v-if="ifLogin">
|
||||||
|
<view class="bacf radius10 posir disjcac fc pad-zy60" style="height: 256rpx;margin-top: 304rpx;">
|
||||||
|
<image src="/static/tabbar/icon-password.png" mode="" lazy-load style="width: 86rpx;height: 102rpx;"></image>
|
||||||
|
<view class="fon28 mar-s20">请登录后查看课程，<span style="color:#e42417;">去登陆</span></view>
|
||||||
|
<view class="posia-sy20" @tap="ifLogin=false"><i class="icon icon-del-white fon24" style="color: #9d9d9d;"></i></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 登录弹框 end -->
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 底部组件
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
import list from '@/components/list.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
|
export default {
|
||||||
|
components:{'foot-tab' :footTab,list,pitera},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
richText:'',
|
||||||
|
ifLogin:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="订单详情" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf"></view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<status-container titlet="产品详情" returnc="#FFFFFF">
|
||||||
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
|
<view class="bacf boxshowb">
|
||||||
|
<swiper-pu newBottom="20rpx" newHeight="520rpx"></swiper-pu>
|
||||||
|
<view class="pad-zy30 pad-sx24">
|
||||||
|
<view class="fon26 col26">武，止戈为武；术，思通造化、随通而 行为术基础动作教学</view>
|
||||||
|
<view class="col-e42417 dis ae fon24 mar-s20">
|
||||||
|
<view class="bold">￥199.00</view>
|
||||||
|
<view class="tline-through fon20 col-969696 mar-z10">￥220.00</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bacf mar-s30 pad-zy30 pad-x30">
|
||||||
|
<view class="bbot pad-x10 pad-s30">
|
||||||
|
<span class="fon28 bold posir pad-x10">
|
||||||
|
产品介绍
|
||||||
|
<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
|
||||||
|
</span>
|
||||||
|
</view>
|
||||||
|
<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text>
|
||||||
|
</view>
|
||||||
|
<!-- 购物车图标 -->
|
||||||
|
<image @tap="$toolAll.tools.goPage('/pagesB/cart/cart')" class="posia" src="/static/tabbar/icon-cart.png" mode="" lazy-load style="width: 79rpx;height: 79rpx;right: 20rpx;bottom: 160rpx;"></image>
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="posixzy bacf pad-zy30 disjbac pad-sx20">
|
||||||
|
<view class="fon30 bold col-e42417">￥189.00</view>
|
||||||
|
<view class="disac fon24 colf">
|
||||||
|
<view class="radius32 disjcac" style="background-color: #FFFFFF;color: #f37617;border: 2rpx solid #f37617; width: 184rpx;height: 64rpx;">加入购物车</view>
|
||||||
|
<view @tap="goConfirmOrder" class="radius32 disjcac mar-z10" style="background-color: #f37617;border: 2rpx solid #f37617;width: 184rpx;height: 64rpx;">立即购买</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 底部组件
|
||||||
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
|
import list from '@/components/list.vue';
|
||||||
|
import pitera from '@/components/nothing/pitera.vue';
|
||||||
|
import swiperPu from '@/components/swipers/swiper-pu.vue';
|
||||||
|
export default {
|
||||||
|
components:{'foot-tab' :footTab,list,pitera,swiperPu},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
richText:'',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// 开启banner图自动轮播
|
||||||
|
this.$store.commit('setAutoplay',true);
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
// 关闭banner图自动轮播
|
||||||
|
this.$store.commit('setAutoplay',false);
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 前往确认订单页
|
||||||
|
goConfirmOrder(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pagesB/confirm-order/confirm-order'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 484 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 486 B |
Binary file not shown.
|
After Width: | Height: | Size: 680 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 487 B |
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 662 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Loading…
Reference in New Issue