Skip to content

M
mallapp
Commit b7e27080 authored by 黄奎's avatar 黄奎
Browse files
Options

增加下拉

parent 84d1071f
Show whitespace changes
Inline Side-by-side
Showing with 675 additions and 2 deletions
components/cats/style44.vue 0 → 100644
View file @ b7e27080
<template>
<view style="position: relative;">
<!-- 新增分类科目 -->
<view class="drop-down">
<view class="classification">
<view class="classification-box" :style="{
color: classification==i ? mainColor : '',
'border-color': classification == i ? 'mainColor' : '#F0F0F0',
}" v-for="(item, i) in Theclass" :key="i" @click="subjects(item,i)">
<view class="classification-text">{{item.name}}</view>
<u-icon name="arrow" size="32" color="#444"></u-icon>
</view>
</view>
<!-- 内容 -->
<!-- <u-popup mode="top" length="auto" v-model="mask"> -->
<scroll-view scroll-y="true" style="max-height: 300rpx;" v-show="mask">
<view class="drop-down-content">
<view class="content-box" @click="content()" :style="{
color: index ? mainColor : '',
'border-color': index == i ? 'mainColor' : '#F0F0F0',
}">
<view class="content-tetx">不限</view>
</view>
<view class="content-box" :style="{
color: index2 == i ? mainColor : '',
'border-color': index2 == i ? 'mainColor' : '#F0F0F0',
}" v-for="(item, i) in subjectslist" @click="content2(item,i)">
<view class="content-tetx">{{item.CateName}}</view>
</view>
</view>
</scroll-view>
<!-- </u-popup> -->
<!-- 内容 -->
</view>
<!-- 新增分类科目结束 -->
<view class="catstyle4" style="height: 100%;">
<div class="left-slider">
<sidebar :active="tid" name="Name" :active-color="mainColor" :border="false" :list="d"
@change="changeHandler" @change2="changeHandler2"></sidebar>
</div>
<div class="right-slider">
<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true"
:style="{ height: '100%' }">
<div class="adbox" v-if="d[tid].advert_pic" @click="clickHandler(d[tid].advert_url)">
<image mode="aspectFit" :src="d[tid].advert_url" style="width: 100%; height: 100%;" />
</div>
<div class="good" v-for="(cx, ci) in g" :key="ci" @click="clickHandler(cx)">
<!-- 新加div -->
<view class="cent-box">
<div class="good-img" style="position: relative;">
<image mode="aspectFit" :src="cx.cover_pic" style="width: 100%; height: 100%;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/plugins-out.png"
v-if="cx.totalStock==0"
style="width: 100%; height: 100%;position: absolute;left:0;top:0;background: #000;opacity: 0.6;" />
</image>
</div>
<div class="good-info">
<div class="good-name">
<view
v-if="cx.marketingLogo.iswords && cx.marketingLogo.iswords==1&& cx.marketingLogo.words!=''"
class="Logo" :style="{color: cx.marketingLogo.wordsColor,
background:cx.marketingLogo.wordsBack ,}">{{cx.marketingLogo.words}}</view>
<image
v-if="cx.marketingLogo.iswords&&cx.marketingLogo.iswords==2&& cx.marketingLogo.ico!=''"
mode="heightFix" :src="cx.marketingLogo.ico"
style=" height: 12px;margin-right: 5px" />
<view
style="color: #FF4048;background: #fdf6ec;padding: 0 5px;display: inline-block;height: 32rpx;font-size: 20rpx;margin-right: 5rpx;"
v-if="cx.freeShippingFullMoneyPinkage>0 || cx.freeShippingFullNumPinkage>0">
{{cx.freeShippingFullMoneyPinkage>0 && cx.freeShippingFullNumPinkage==0?cx.freeShippingFullMoneyPinkage+'元包邮':''}}
{{cx.freeShippingFullMoneyPinkage==0 && cx.freeShippingFullNumPinkage>0?cx.freeShippingFullNumPinkage+'件包邮':''}}
</view>
{{ cx.name }}
</div>
<div class="goodprice">
<div class="left">
<!-- 新增上课日期 -->
<div v-if="cx.edudata.ClassTime&&u.TenantId==27" class="sell">
{{cx.edudata.ClassTime}}
</div>
<!-- 上课次数 -->
<div v-if="cx.edudata.ClassNum&&u.TenantId==27" class="sell">
{{cx.edudata.ClassNum}}次
</div>
<div v-if="cx.is_level==1&&u.TenantId!=27">
<!-- todo VIP价格显示-->
<u-tag size="mini" shape="circle" text="会员价" type="warning" />
<!-- <u-tag color="#f39800" type="warning">会员价</u-tag> -->
<span class="vip" v-if="u.TenantId!=27">￥{{cx.level_price}}</span>
</div>
<div v-if="u.TenantId!=27" class="price" :style="{ color: mainColor }">
{{ cx.price_content }}
</div>
<div v-if="u.TenantId!=27" class="sell">{{ cx.sales }}</div>
</div>
<div v-if="u.TenantId!=27" @click.stop="showSkuHandler(cx)" class="right">
<!-- todo 点击加入购物车-->
<u-icon name="cart-circle-o" size="44" :color="mainColor" />
</div>
</div>
</div>
</view>
<!-- 新加div -->
<view v-if="u.TenantId==27" class="Teachers">
<view class="portrait-box">
<image v-if="cx.edudata.TeacherIcon" class="portrait" mode="aspectFit"
:src="cx.edudata.TeacherIcon" />
<view v-if="cx.edudata.TeacherName" class="sell2">{{cx.edudata.TeacherName}}</view>
</view>
<!-- 价格 -->
<view class="cart-box">
<view class="vip2" :style="{ color: mainColor }">
{{ cx.price_content }}
</view>
<div @click.stop="showSkuHandler(cx)" class="right">
<!-- todo 点击加入购物车-->
<u-icon name="cart-circle-o" size="44" :color="mainColor" />
</div>
</view>
</view>
</div>
<u-divider v-if="isover" :margin-top="20" :margin-bottom="20">没有更多商品了44</u-divider>
</scroll-view>
</div>
<template v-if="u&&u.TenantId==27">
<good-sku2 v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku2>
</template>
<template v-else>
<good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
</template>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view>
<!-- 弹窗 -->
<view class="mask" v-show="mask" @click="masks()">
</view>
</view>
</template>
<script>
import goodSku from '../goods/goodsku';
import goodSku2 from '../goods/goodsku2';
import sidebar from "../sidebar/index";
import auth from '@/components/auth/index.vue';
export default {
props: ["d", "h"],
data() {
return {
Theclass: [{
name: '班级',
id: '0',
},
{
name: '类型',
id: "1"
}
],
subjectslist: [],
classification: -1,
index: true,
index2: -1,
textColor: "#F0F0F0",
mask: false,
mainColor: "",
activeStyle: "",
page: 1,
page_count: 1,
mh: 0,
g: [],
isover: false,
loading: false,
tid: -1,
active: 0,
msg: {
pageIndex: 1,
pageSize: 14,
Name: '',
GoodsType: 0,
CategoryIds: '',
OrderBy: 1,
UserId: 0,
StoreId: 0,
},
msg: {
pageIndex: 1,
pageSize: 14,
Name: '',
GoodsType: 0,
CategoryIds: '',
OrderBy: 1,
UserId: 0,
StoreId: 0,
},
sku: {},
showSku: false,
showAuth: false,
u: {},
IsEducation: 0,
};
},
components: {
sidebar,
goodSku,
goodSku2,
auth
},
created() {
this.mainColor = this.$uiConfig.mainColor;
this.activeStyle = `background:${this.mainColor};`;
this.IsEducation = uni.getStorageSync('basedata') ?
(uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall
.setting.mallStyle
.IsEducation : 0) :
0;
},
mounted() {
this.init();
this.u = uni.getStorageSync('mall_UserInfo5')
},
methods: {
// 接口
initlist(i) {
this.isover = false;
this.loading = true;
this.msg.StoreId = uni.getStorageSync("storeId") ? uni.getStorageSync("storeId").storeId : 0;
let IsOpenReserve = uni.getStorageSync("GetAppConfig") ? uni.getStorageSync("GetAppConfig").IsOpenReserve :
0
if (IsOpenReserve == 0) { //如果没开启 门店id赋值为0
this.msg.StoreId = 0
}
let url
let date = {
pageIndex: this.msg.pageIndex,
pageSize: 1000,
Name: this.msg.Name,
GoodsType: this.msg.GoodsType,
CategoryIds: this.msg.CategoryIds,
OrderBy: this.msg.OrderBy,
UserId: this.msg.UserId,
StoreId: this.msg.StoreId,
EduClassTypeId: i,
};
this.request2({
url: '/api/AppletGoods/GetClassTypeList',
data: date
},
res => {
this.loading = false;
console.log("resggg4444444", res);
if (res.resultCode == 1) {
this.subjectslist = res.data
}
uni.hideNavigationBarLoading();
}
);
},
// 弹窗
masks() {
this.mask = false
this.classification = -1
},
// 科目类型点击
subjects(item, i) {
this.classification = i
// this.mask =!this.mask
// if(!this.mask) {
// this.classification = -1
// // this.mask = true
// } else {
// this.classification = i
// }
if (this.classification == i) {
this.mask = true
} else {
this.mask = false
}
this.initlist(i)
// this.mask = !this.mask
// if(this.mask) {
// this.classification = i
// this.mask = true
// } else {
// this.classification = -1
// this.mask = false
// }
// if(this.classification = i) {
// this.mask= true
// } else {
// this.mask=!this.mask
// }
},
// 内容点击
content() {
this.index = !this.index
if (this.index) {
this.index2 = -1
this.msg.CategoryIds = ''
this.init()
}
},
content2(item, i) {
this.index2 = i
this.index = false
this.classification = -1
this.mask = false
this.msg.CategoryIds = item.CateId
this.init()
},
// 购物车
showSkuHandler(g) {
this.sku = g;
this.u = uni.getStorageSync('mall_UserInfo');
if (!this.u) {
this.u = {
nickName: '未登录',
avatarUrl: ''
};
this.showAuth = true;
} else {
this.showSku = true;
}
},
changeHandler(i) {
this.msg.CategoryIds = this.d[i].Id + '';
this.msg.page = 1;
this.tid = i;
this.g = [];
this.init();
},
changeHandler2() {
this.msg.CategoryIds = ''
this.msg.page = 1;
this.tid = -1;
this.g = [];
this.init();
},
clickHandler(item) {
if (this.IsEducation == 1) {
uni.navigateTo({
url: '/pages/school/courseInfo?GoodsId=' + item.id
});
} else {
if (item.goodsclassify == 3) {
uni.navigateTo({
url: "/pages/reserve/goodsDetails?GoodsId=" + item.id
});
} else {
uni.navigateTo({
url: "/pages/goods/goods?GoodsId=" + item.id
});
}
}
},
init() {
this.isover = false;
this.loading = true;
this.msg.StoreId = uni.getStorageSync("storeId") ? uni.getStorageSync("storeId").storeId : 0;
let IsOpenReserve = uni.getStorageSync("GetAppConfig") ? uni.getStorageSync("GetAppConfig").IsOpenReserve :
0
if (IsOpenReserve == 0) { //如果没开启 门店id赋值为0
this.msg.StoreId = 0
}
let url
if (this.IsEducation == 1) {
url = '/api/AppletSchool/GetAppletCoursePageList'
} else {
url = '/api/AppletGoods/GetAppletGoodsPageListForZY'
}
this.request2({
url: url,
data: this.msg
},
res => {
this.loading = false;
console.log("resggg", res);
if (res.resultCode == 1) {
res.data.pageData.forEach(x => {
x.marketingLogo = JSON.parse(x.marketingLogo)
x.totalStock = 0;
if (x.attr && x.attr.length > 0) {
x.attr.forEach(j => {
x.totalStock += j.stock
})
}
})
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1 || this.page_count == 0) {
this.isover = true;
}
}
uni.hideNavigationBarLoading();
}
);
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
if (!this.loading) {
this.msg.pageIndex++;
this.init();
}
} else {
this.isover = true;
}
},
reloadUserinfo() {
this.u = uni.getStorageSync('mall_UserInfo');
},
//关闭登录窗口
gbAuth() {
this.showAuth = false;
}
},
};
</script>
<style>
.classification-text {
font-weight: 600;
font-size: 24rpx;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4)
}
.drop-down-content {
display: flex;
/* justify-content: center; */
/* justify-content: space-between; */
flex-wrap: wrap;
padding-left: 20rpx;
padding-top: 25rpx;
}
.drop-down {
background-color: #fff;
width: 100vw;
padding-top: 30rpx;
z-index: 1000;
position: relative;
}
.content-box {
height: 50rpx;
background-color: #F0F0F0;
display: flex;
align-items: center;
font-size: 24rpx;
padding: 0 20rpx;
margin-right: 25rpx;
margin-bottom: 25rpx;
border-radius: 10rpx;
}
.classification {
display: flex;
width: 100%;
justify-content: space-around;
height: 80rpx;
align-items: center;
border-bottom: 1px solid #F0F0F0;
}
.classification-box {
display: flex;
align-items: center;
}
.vip2 {
font-size: 16px;
margin-right: 10rpx;
}
.Teachers {
display: flex;
justify-content: space-between;
}
.cart-box {
display: flex;
align-items: center;
}
.portrait-box {
display: flex;
align-items: center;
}
.portrait {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.cent-box {
/* background: yellow; */
width: 100%;
display: flex;
}
.catstyle4 {
display: flex;
}
.catstyle4 .left-slider {
width: 85px;
height: 100%;
background: #f5f5f5;
}
.catstyle4 .right-slider {
padding: 10px;
height: 100%;
width: 1px;
flex: 1;
}
.catstyle4 .van-tabs__line {
display: none;
}
.catstyle4 .van-tab {
height: 24px;
line-height: 24px;
margin-top: 10px;
}
.catstyle4 .van-tab--active {
border-radius: 24px;
color: #fff !important;
font-weight: 400 !important;
}
.catstyle4 .van-tabs__wrap {
padding: 0 10px;
}
.catstyle4 .good {
border-bottom: 1rpx solid #f1f1f1;
/* display: flex; */
padding: 10px 0;
}
.catstyle4 .good .good-img {
width: 77px;
height: 126rpx;
}
.catstyle4 .good .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 3px;
font-size: 14px;
/* height: 36px; */
margin-bottom: 5px;
}
.catstyle4 .good .good-info {
margin-left: 5px;
width: 1px;
flex: 1;
min-height: 70px;
}
.catstyle4 .good .good-info .goodprice {
display: flex;
align-items: flex-end;
}
.catstyle4 .good .good-info .left {
flex: 1;
width: 1px;
}
.catstyle4 .good .good-info .right {
width: 30px;
height: 30px;
display: flex;
justify-items: right;
align-items: flex-end;
}
.catstyle4 .good .good-info .left .vip {
font-size: 14px;
font-weight: 600;
color: #f39800;
}
.catstyle4 .good .good-info .goodprice .left .price {
font-size: 16px;
}
.catstyle4 .good .good-info .goodprice .left .sell {
font-size: 12px;
color: gray;
}
.sell2 {
font-size: 12px;
color: gray;
}
.catstyle4 .right-slider .adbox {
width: 100%;
height: calc(100vw - 105px / 3.37);
}
.catstyle4 .Logo {
padding: 1px 5px;
display: inline-block;
font-size: 22rpx;
margin-right: 5rpx;
border-radius: 4px;
}
</style>
components/sidebar/index.vue
View file @ b7e27080
<template>
<view class="side-box" :style="{ background: bg }">
<view>
<view
class="item"
:style="{
color: !currentIndex2 ? textColor : activeColor,
'border-color': !currentIndex2 ? 'transparent' : activeColor,
'border-bottom': border ? '1rpx solid #eee' : 'none',
'text-align': textAlign,
'background':currentIndex==i?'#FFF':''
}"
@click="change2()"
> 全部 </view
>
</view>
<view
v-for="(x, i) in list"
:key="i"
......@@ -50,11 +64,12 @@ export default {
},
active: {
type: Number,
default: 0,
default: -1,
},
},
data() {
return {
currentIndex2:true,
currentIndex:this.active
};
},
......@@ -73,6 +88,13 @@ export default {
methods: {
change(i) {
this.$emit("change", i);
this.currentIndex2 = false
},
change2() {
this.$emit("change2", 0);
this.currentIndex2 = !this.currentIndex2
this.currentIndex = -1
// console.log('4555555555',this.currentIndex)
},
},
};
......
pages/cats/cats.vue
View file @ b7e27080
......@@ -21,10 +21,16 @@
:h="(navHeight+54)"
></style3>
<style4
v-if="cstyle.Type == 1 && cstyle.Style == 4"
v-if="cstyle.Type == 1 && cstyle.Style == 4 &&u.TenantId!=27"
:d="types"
:h="(navHeight+54)"
></style4>
<!-- 新增进阶教育id27 -->
<style44
v-if="cstyle.Type == 1 && cstyle.Style == 4&&u.TenantId==27"
:d="types"
:h="(navHeight+54)"
></style44>
<style5
v-if="cstyle.Type == 2 && cstyle.Style == 1"
:d="types"
......@@ -72,6 +78,7 @@ import style1 from "@/components/cats/style1";
import style2 from "@/components/cats/style2";
import style3 from "@/components/cats/style3";
import style4 from "@/components/cats/style4";
import style44 from "@/components/cats/style44";//进阶教育id为27
import style5 from "@/components/cats/style5";
import style6 from "@/components/cats/style6";
import style7 from "@/components/cats/style7";
......@@ -83,6 +90,7 @@ import style11 from "@/components/cats/style11";
export default {
data() {
return {
u:{},
cat_style:2,
isloading: true,
pageTitle: "分类",
......@@ -112,6 +120,7 @@ export default {
style2,
style3,
style4,
style44,
style5,
style6,
style7,
......@@ -121,6 +130,7 @@ export default {
style11,
},
onLoad(option) {
this.u = uni.getStorageSync('mall_UserInfo');
this.navHeight = this.$navHeight - 2;
// this.cstyle = uni.getStorageSync("basedata")
// ? uni.getStorageSync("basedata").cat_style
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment