Commit e5315757 authored by 罗超's avatar 罗超

Merge branch 'master' of http://gitlab.oytour.com/viitto/mallapp into master

parents c621c4a0 2a36cb3e
<template>
<view class="guidecarOrderdetails" :style="{'height':contentHeight}">
<view class="u-skeleton-rect">
<swiper
indicator-dots
:autoplay="false"
:interval="1000"
style="height:100vw;"
>
<block v-for="(item, index) in g.pic_url" :key="index">
<swiper-item>
<video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item.pic_url"
:autoplay="false" loop muted show-play-btn :enable-progress-gesture="true"
:controls="true" :show-progress="true" :show-mute-btn="true" objectFit="cover"></video>
<image @click="previewImage(index)" style="width:100%;height:100%;" v-else :src="item.pic_url" mode=""></image>
</swiper-item>
</block>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle: "详情",
GoodsId:367471,
g:{},
imgs:[]
}
},
onLoad(option){
if(option && option.GoodsId){
this.GoodsId = option.GoodsId
}
this.init()//商品详情
},
created(){
this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
},
mounted() {
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
methods: {
init(){
uni.showLoading({
title: "加载中",
});
this.request2(
{
url: '/api/AppletGuideCar/GetAppletSDGoodsInfo',
data: {
GoodsId:this.GoodsId
}
},
(res) => {
uni.hideLoading();
this.g = res.data.goods;
this.g.pic_url.forEach((x) => {
this.imgs.push(x.pic_url);
});
}
);
},
//点击跳转
startPlay(item){
uni.navigateTo({ url: '/pages/video/index?GoodsId='+this.id+'&VideoUrl='+item.pic_url })
},
previewImage(i) {
uni.previewImage({
urls: this.imgs,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {
console.log(
"选中了第" +
(data.tapIndex + 1) +
"个按钮,第" +
(data.index + 1) +
"张图片"
);
},
fail: function (err) {
console.log(err.errMsg);
},
},
});
},
}
}
</script>
<style>
.guidecarOrderdetails{
background: #FFFFFF;
}
</style>
......@@ -15,16 +15,27 @@
</view>
</div>
<view style="padding: 10px 0 0; background: #fff;width: 100%;border-bottom: 1px solid #E2E2E2;">
<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs> -->
<wyb-drop-down
ref="dropDown"
:options="options"
@select="onItemSelect">
<!-- 自定义模式开启时,这里可以放内容 -->
</wyb-drop-down>
<view style="padding: 10px 0 0;position: relative;background: #fff;width: 100%;height: 55px;">
<view style=" border-bottom: 1px solid #E2E2E2;">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs>
</view>
<view v-if="screenshow==true" class="tanchu" >
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
style="max-height: 283px;">
<view class="tanchu_item" v-for="(item, index) in screenList" :key="index" @click="onItemSelect(item)">
<span>{{item.Name}}</span>
<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.OrderBy && current==0'></u-icon>
<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.CarBrandId && current==1'></u-icon>
</view>
</scroll-view>
</view>
</view>
<div style='display: flex;width: 100%;'>
<view v-if="screenshow==true" class="Mask" @click="screenshow=false"></view>
<div class="left-slider">
<sidebar
:active="tic"
......@@ -42,10 +53,11 @@
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
v-if="g.length > 0"
style=" height: calc(100vh - (44px+10px+50px)) ;width: calc(100vw - 85px);"
>
<view style="width: 100%;display: flex;flex-direction: column;align-items: center;padding: 10px;">
<view class="c_list_item" v-for="(x, i) in g" :key="i">
<view class="c_list_item" v-for="(x, i) in g" :key="i" @click="goDetails(x)">
<view class="itemb" >
<view class="c_t_l">
<image :src="x.cover_pic" mode="aspectFill" style="width: 100%;height: 100%;"></image>
......@@ -95,11 +107,10 @@
<script>
import sidebar from "../../components/sidebar/index.vue";
import wybDropDown from './wyb-drop-down/wyb-drop-down.vue'
export default {
components: {
sidebar,
wybDropDown
sidebar
},
data() {
return {
......@@ -108,14 +119,14 @@ export default {
pageTitle: "订车",
classList:[],
current:0,
screenshow:false,
tic:0,
msg:{
pageIndex:1,
pageSize:15,
Name:"",
GoodsType:1,
OrderBy:1,
OrderBy:0,
StartTime:'',
EndTime:'',
CarType:0,
......@@ -126,14 +137,17 @@ export default {
CarBrandId:0,
RegionIds:0
},
options: [{
header: '综合排序',
contents: ['不限','综合升序', '综合降序', '价格升序', '价格降序','评分升序','评分降序']
}, {
header: '品牌',
contents: []
}],
screenList:[],
contents:[
{'ID':0,Name:'不限'},
{'ID':1,Name:'综合升序'},
{'ID':2,Name:'综合降序'},
{'ID':3,Name:'价格升序'},
{'ID':4,Name:'价格降序'},
{'ID':5,Name:'评分升序'},
{'ID':6,Name:'评分降序'},
],
contents2:[],//品牌
list: [{name: '综合排序'}, {name: '品牌'}],
STime:'',
ETime:'',
......@@ -176,19 +190,17 @@ export default {
if(options && options.tic){
this.tic = options.tic
}
this.getCarClassList()
this.getCarClassList()//车辆类型
this.init();
this.getGuideCarBrandList()
this.getGuideCarBrandList()//车辆品牌
},
created() {
this.mainColor = this.$uiConfig.mainColor;
this.activeStyle = `background:${this.mainColor};`;
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
methods: {
init(){
......@@ -222,12 +234,11 @@ getGuideCarBrandList(){
this.BrandList = res.data;
let obj = {Name: "全部", ID: 0}
this.BrandList.unshift(obj)
console.log(this.BrandList)
let list=[];
this.BrandList.forEach(x=>{
list.push(x.Name)
list.push(x)
})
this.options[1].contents = list
this.contents2 = list
}
);
},
......@@ -253,20 +264,41 @@ getGuideCarBrandList(){
},
change(val){
console.log(val)
if(val==0){
if(val==this.current&& this.screenshow==true){
this.screenshow= false
}else{
this.screenshow= true
}
this.screenList = this.contents
}else{
if(val==this.current&& this.screenshow==true){
this.screenshow= false
}else{
this.screenshow= true
}
this.screenList = this.contents2
}
console.log(this.screenList)
this.current= val
},
onItemSelect(val){
console.log(val)
if(val.headerIndex ==0){
this.msg.OrderBy = val.contentIndex
}
if(val.headerIndex ==1){
this.msg.CarBrandId = this.BrandList[val.contentIndex].ID
if(this.current==0){
this.msg.OrderBy = val.ID;
}else{
this.msg.CarBrandId = val.ID
}
this.screenshow = false
this.msg.pageIndex=1;
this.g = [];
this.init()
this.$refs.dropDown.close() // 关闭
},
goDetails(x){//跳转商品详情
uni.navigateTo({
url:'/pages/guidecar/guidecarOrderdetails?GoodsId='+x.id
})
},
lower(e) {
......@@ -365,4 +397,21 @@ getGuideCarBrandList(){
margin-top: 10px;
background: #E2E2E2;
}
.guidecarList .Mask{
width: 100%;height: 100%;background: #000000;opacity: 0.3;position: absolute;left: 0;top: 130px;z-index: 999;
}
.guidecarList .tanchu{
width: 100%;display: flex;flex-direction: column;align-items: center;background: #FFF;position: absolute;top: 55px;left: 0;z-index: 1999;
}
.guidecarList .tanchu_item{
width: 94%;
margin-left: 3%;
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E2E2E2;
}
</style>
@font-face {font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAAsAAAAABxwAAALZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBYIFNATYCJAMQCwoABCAFhG0HPRs0BsgusG3YowCKZblG/A248I8FOyAe+Oye987uPHySFUCVQo0KTFJCRZnz739uc6TZ6xcSFkmmSfPs/p8faiVYyJAysa8jwJbrp83gaCY/j/s8l9O7q4ACmd/Ochtr0Z5+1AswDijQsQZt4QI6QW6pXcSBwSv/1nYCCqqqsdC7M5oKSRHpFxDmudwQkr2QKEbZvCA7MzUKh2Tkk93JOxzUvw//aBnyJDIpMnTQjLYt1H4v9UeQN/18GCcJYQJ3dgYpGiMSZs2mppCFiJ8qyI6iLfLyEn7P/b7mjxDH1smHZfQvjyCRErJIZWHQ2kun/J7jNIHfTzQJf4gVUvghxnw/0x4DfV5lXaBHlFVi7aO0/bxWdv6+cPdRmdlrbzn+qfO6PVN6994+P/v5PWXZ++LdvWUs9gsXP7QrtrfB91P9aflbn1u37JV5vmPHmbH/a+bW/pculdBKpMfTy/pJ27c1d3s3Ha40b4Xnb7c73PMn7hxVM+r+psb222nvS698xqM+qUXITmlvaakgkG5KhgsC6ePkJarZcby5/0ws1vn5QhH8iDY/1tYIZoAvBViBWAWwLpYq4ogxV3N5FYzKghIJClIX6MxR0m9XGMuAawnyyhwI5lRpkcqrTUZeY2QU0hpZed1QUCP9ZhdSyhKyEAugoe0OguIeIlHUK6SKe09G3q/IKOs/ZBUPKQoaEUotWUjdMDvda4XGBm2YcoTZFkWMuTZpUz1Gvg2MVVelBXNcrd0otGjafJjtYoSrK0Ys3fHKsg2DGSsKoa+zGwYBwaIVeWhtCrM2m0W1WbMZc3cqTKVQSOtlBRk2kA1McQRms5AIk8030qPvjyFuK2BYrTAW0nNoZc1tH7TQVHMA2dVHIMav3LLUDlexzAYDZlghIdDX8aKApghYNN/JgywbBbMOJBaqmnmNZkD1heeNIYZboCByVgxJSEMMGdlpW5fTVplG+0he5RqCAAAAAA==') format('woff2')
}
.iconfont {
font-family: "iconfont" !important;
margin-top: 5rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-selected:before {
content: "\e613";
}
.icon-down:before {
font-weight: bold;
content: "\e67a";
}
.icon-down-fill:before {
content: "\e701";
}
<template>
<view
class="wyb-drop-down-box"
:style="{
'--duration': duration + 'ms',
'--autoContentTop': autoContentTop}">
<view class="wyb-drop-down-container" @tap.stop.prevent @touchmove.stop.prevent>
<view
class="wyb-drop-down-header"
:style="{
zIndex: zIndex,
backgroundColor: bgColor.header}">
<view
class="wyb-drop-down-header-item"
v-for="(item,index) in options"
:key="item.header"
@tap.stop="onHeaderTap(index)"
:style="{fontSize: fontSize.header + 'rpx'}">
<text
class="wyb-drop-down-header-item-label"
:style="{
fontWeight: headerActiveIndex === index && dropOver && activeWeight ? 'bold' : 'normal',
color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}">{{item.header}}</text>
<text
v-if="dropIcon === 'fill'"
class="iconfont icon-down-fill wyb-drop-down-header-item-icon"
:class="[headerActiveIndex === index && dropOver ? 'wyb-drop-down-header-item-icon-active' : '']"
:style="{
fontSize: fontSize.header - 5 + 'rpx',
color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}" />
<text
v-if="dropIcon==='line'"
class="iconfont icon-down wyb-drop-down-header-item-icon"
:class="[headerActiveIndex === index && dropOver ? 'wyb-drop-down-header-item-icon-active' : '']"
:style="{
fontSize: fontSize.header - 5 + 'rpx',
transformOrigin: '50% 45%',
color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}" />
<view class="wyb-drop-down-vline" v-if="index !== options.length - 1" />
</view>
</view>
<scroll-view
v-if="dropDown"
class="wyb-drop-down-content"
:class="[dropOver ? 'wyb-drop-down-content-active' : '']"
:scroll-y="scroll"
:enable-flex="true"
:scroll-anchoring="true"
:style="{
zIndex: zIndex - 1,
fontSize: fontSize.content + 'rpx',
backgroundColor: bgColor.content,
borderBottomLeftRadius: radius + 'px',
borderBottomRightRadius: radius + 'px',
minHeight: minHeight + 'rpx',
height: autoHeight ? 'auto' : minHeight + 'rpx',
maxHeight: autoHeight && maxHeight ? maxHeight + 'rpx' : 'auto'}">
<view class="wyb-drop-down-content-box" v-for="(item,index) in options" :key="contentBoxKey(index)">
<view v-if="item['custom'] && headerActiveIndex === index && dropDown" class="wyb-drop-down-content-slot">
<slot></slot>
</view>
<view
v-if="!item['custom'] && headerActiveIndex === index && dropDown"
class="wyb-drop-down-content-item"
v-for="(content,zIndex) in item['contents']"
:key="content"
@tap.stop="onContentItemsTap(zIndex)">
<text
class="wyb-drop-down-content-item-label"
:style="{color: contentActiveIndexList[headerActiveIndex]['index'] === zIndex && dropOver ? activeColor: defaultColor}">
{{content}}
</text>
<text
v-if="contentActiveIndexList[headerActiveIndex]['index'] === zIndex && dropOver"
:style="{color: activeColor}"
class="iconfont icon-selected wyb-drop-down-content-item-icon" />
<view class="wyb-drop-down-line" v-if="zIndex !== options[headerActiveIndex].contents.length - 1" />
</view>
</view>
</scroll-view>
</view>
<view
v-if="dropDown"
class="wyb-drop-down-mask"
:class="[dropOver ? 'wyb-drop-down-mask-active' : '']"
@tap.stop="close"
@touchmove.stop.prevent
:style="{
zIndex: zIndex - 2,
height: screenHeight + 'px',
backgroundColor: 'rgba(0, 0, 0, ' + maskAlpha + ')'}" />
</view>
</template>
<script>
export default {
data() {
return {
dropDown: false,
dropOver: false,
duration: 100,
contents: this.options[0].contents || [0],
headerActiveIndex: 0,
contentActiveIndexList: []
}
},
computed: {
autoContentTop() {
return `${44 + this.rpxToPx(100)}px`
},
screenHeight() {
return uni.getSystemInfoSync().screenHeight
},
screenWidth() {
return uni.getSystemInfoSync().screenWidth
},
contentBoxKey() {
return function(index) {
return `option${index}`
}
}
},
props: {
options: {
type: Array,
default() {
return [{
header: 'A',
contents: ['1', '2']
}]
}
},
defaultIndexList: {
type: Array,
default() {
return []
}
},
autoHeight: {
type: Boolean,
default: true
},
minHeight: {
type: [String, Number],
default: 10
},
maxHeight: {
type: [String, Number],
default: 600
},
scroll: {
type: Boolean,
default: true
},
radius: {
type: [String, Number],
default: '0'
},
activeColor: {
type: String,
default: '#2979ff'
},
activeWeight: {
type: Boolean,
default: true
},
defaultColor: {
type: String,
default: '#333'
},
bgColor: {
type: Object,
default() {
return {
header: '#fff',
content: '#fff'
}
}
},
dropIcon: {
type: String,
default: 'fill'
},
fontSize: {
type: Object,
default() {
return {
header: 30,
content: 30
}
}
},
maskAlpha: {
type: [String, Number],
default: '0.5'
},
zIndex: {
type: Number,
default: 500
}
},
mounted() {
if (this.defaultIndexList.length === 0) {
this.options.forEach((item, index) => {
if (!item.custom) {
this.contentActiveIndexList.push({headerIndex: index, index: 0})
} else {
this.contentActiveIndexList.push({headerIndex: index, custom: true})
}
})
} else {
let i = 0
this.options.forEach((item, index) => {
if (!item.custom) {
this.contentActiveIndexList.push([...this.defaultIndexList][i])
i++
} else {
this.contentActiveIndexList.push({headerIndex: index, custom: true})
}
})
}
},
methods: {
onHeaderTap(index) {
let item = this.options[index]
if (Object.is(this.headerActiveIndex, index) && this.dropOver) {
this.close()
} else {
this.headerActiveIndex = index
if (item.custom) {
this.$emit('change', {
headerIndex: index,
header: this.options[index].header
})
}
this.dropDown = true
this.$nextTick(() => {
this.dropOver = true
this.$emit('show')
})
}
},
onContentItemsTap(index) {
this.contentActiveIndexList[this.headerActiveIndex]['index'] = index
this.$forceUpdate()
let event = {
headerIndex: this.headerActiveIndex,
header: this.options[this.headerActiveIndex]['header'],
contentIndex: index,
content: this.options[this.headerActiveIndex]['contents'][index],
contentActiveIndexList: this.contentActiveIndexList
}
this.$emit('select', event)
},
close() {
this.dropOver = false
setTimeout(() => {
this.dropDown = false
this.$emit('hide')
}, this.duration)
},
rpxToPx(rpx) {
return rpx / 750 * this.screenWidth
}
}
}
</script>
<style>
@import './iconfont.css';
.wyb-drop-down-mask {
position: fixed;
top: 44px;
/* #ifndef H5 */
top: 55px;
/* #endif */
left: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity var(--duration);
z-index: 498;
}
.wyb-drop-down-mask-active {
opacity: 1;
transition: opacity var(--duration);
}
.wyb-drop-down-header {
position: fixed;
top: 44px;
/* #ifndef H5 */
top: 55px;
/* #endif */
left: 0;
right: 0;
display: flex;
flex-direction: row;
background-color: #fff;
z-index: 500;
}
.wyb-drop-down-header-item {
flex: 1;
height: 100rpx;
font-size: 30rpx;
border-bottom: 1px solid #eee;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
}
.wyb-drop-down-header-item-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.wyb-drop-down-header-item-icon {
margin-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
transform-origin: 50% 40%;
transform: rotate(0);
transition: transform var(--duration);
}
.wyb-drop-down-header-item-icon-active {
transform: rotate(180deg);
transition: transform var(--duration);
}
.wyb-drop-down-content {
position: fixed;
top: var(--autoContentTop);
/* #ifndef H5 */
top: 105px;
/* #endif */
left: 0;
right: 0;
z-index: 499;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #fff;
/* transform: translateY(-100%); */
transition: transform var(--duration);
}
.wyb-drop-down-content-active {
transform: translateY(0);
transition: transform var(--duration);
}
.wyb-drop-down-content-item {
width: 100%;
height: 100rpx;
font-size: 30rpx;
display: flex;
flex-direction: column;
position: relative;
}
.wyb-drop-down-content-item-label {
width: 90%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding-left: 50rpx;
}
.wyb-drop-down-content-item-icon {
position: absolute;
top: 50%;
right: 40rpx;
font-size: 40rpx;
transform: translateY(-50%);
}
.wyb-drop-down-content-box {
width: 100%;
}
.wyb-drop-down-content-slot {
width: 100%;
height: 100%;
}
.wyb-drop-down-vline {
width: 1px;
height: 40rpx;
background-color: #eee;
position: absolute;
right: 0;
}
.wyb-drop-down-line {
width: 100%;
height: 1px;
background-color: #eee;
margin-left: 50rpx;
}
</style>
......@@ -37,12 +37,12 @@
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
<!-- <view style="display: flex;flex-direction: column;align-items: center;"> -->
<view>
<u-swipe-action :show="item.show" :disabled="item.disabled" :index="index" v-for="(item, index) in g" :key="item.id" @click="click" @open="open"
<u-swipe-action :show="item.show" :disabled="item.disabled" :index="index" v-for="(item, index) in g" @content-click="goUrl" :key="item.id" @click="click" @open="open"
:options="options">
<view class="share_Item u-border-bottom">
<!-- <u-avatar :src="item.Photo" size="64"></u-avatar> -->
<!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 -->
<view class="title-wrap" style="width:100%;" @click="goUrl(item.UserId)">
<view class="title-wrap" style="width:100%;">
<view class="box_top">
<u-avatar :src="item.Photo" size="64"></u-avatar>
<view class="box_r">
......@@ -143,7 +143,7 @@
GradeName: '普通会员'
}, ] //设置默认值
this.getUserMyTeamTitelListForFX()
// this.init2()
} else {
this.init()
}
......@@ -165,7 +165,6 @@
},
methods: {
open() {
},
getDirest() {
if (this.isCheckIn) {
......@@ -175,7 +174,7 @@
}
this.titleDirect=this.msg2.IsDirect
this.getUserMyTeamTitelListForFX();
this.init2(1);
},
getUserMyTeamTitelListForFX() {
uni.showLoading({
......@@ -192,7 +191,8 @@
uni.hideLoading();
this.list = res.data;
this.msg2.FXGradeId = this.list[0].Id;
this.init2()
this.current=0;
this.init2(1);
}
);
},
......@@ -214,6 +214,7 @@
}
this.init2(1);
},
//获取数据
init2(num) {
if (num == 1) {
this.g = [];
......@@ -298,7 +299,8 @@
}
},
//跳转详情
goUrl(UserId) {
goUrl(index) {
let UserId = this.g[index].UserId
uni.navigateTo({
url: '/pages/share-team/share-detail?UserId=' + UserId
});
......@@ -315,18 +317,25 @@
(res) => {
this.request2({
url: '/api/AppletUser/GerUserMyTeamTitelListForFX',
data: {}
data: {
IsDirect:this.titleDirect
}
},
(res) => {
this.list = res.data;
}
);
this.init2(1)
this.getNewTitle();
// this.init2(1)
}
);
this.g[index].show = false;
},
getNewTitle(){
this.msg2.FXGradeId = this.list[this.current].Id;
this.init2(1);
},
open(index) {
// 先将正在被操作的swipeAction标记为打开状态,否则由于props的特性限制,
// 原本为'false',再次设置为'false'会无效
......
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