|
|
|
@ -1,56 +1,70 @@ |
|
|
|
<template> |
|
|
|
<view class="course-experience"> |
|
|
|
<view class="e-tab"> |
|
|
|
<view><text>未报价</text></view> |
|
|
|
<view class="active"><text>已报价</text></view> |
|
|
|
<view |
|
|
|
v-for="(e, i) in tabArr" |
|
|
|
:key="i" |
|
|
|
:class="[e.id == curTabInfo.id?'active':'']" |
|
|
|
@click="tabChange(e)" |
|
|
|
><text>{{e.name || '-'}}</text></view> |
|
|
|
<!-- <view><image></image><text>未报价</text></view> --> |
|
|
|
</view> |
|
|
|
<view class="e-unfold"> |
|
|
|
<!-- <view><text>全部展开</text><image></image></view> --> |
|
|
|
</view> |
|
|
|
<view class="e-list"> |
|
|
|
<view class="l-item" v-for="i in 5" :key="i"> |
|
|
|
<view :class="['l-item', !e.is_offer_price&&e._selectedStatus?'border':'' ]" v-for="(e, i) in exList" :key="i" @click="itemSelect(i)"> |
|
|
|
<view class="i-header"> |
|
|
|
<view class="h-icon" v-if="false"></view> |
|
|
|
<view class="h-status red" v-else>已支付</view> |
|
|
|
<view :class="['h-status', e.order_pay_status == 0?'red': '' ]" v-if="e.is_offer_price"> |
|
|
|
{{ |
|
|
|
e.order_pay_status == 0 ? '未支付': |
|
|
|
e.order_pay_status == 1 ? '已支付': '' |
|
|
|
}} |
|
|
|
</view> |
|
|
|
<view :class="['h-icon', !e._selectedStatus?'border':'']" v-else> |
|
|
|
<image v-if="e._selectedStatus" mode="aspectFit" src="/static/images/selected_c97.png"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="i-info"> |
|
|
|
<image></image> |
|
|
|
<image mode="aspectFit" :src="e.user_info.avatar_url"></image> |
|
|
|
<view> |
|
|
|
<view class="i-content"> |
|
|
|
<view class="c-line"> |
|
|
|
<text>昵称：</text>长大 |
|
|
|
<text>昵称：</text>{{e.user_info.nickname || '-'}} |
|
|
|
</view> |
|
|
|
<view class="c-line"> |
|
|
|
<text>学员姓名：</text>长大 |
|
|
|
<text>学员姓名：</text>{{e.name || '-'}} |
|
|
|
</view> |
|
|
|
<view class="c-line"> |
|
|
|
<text>性别：</text>长大 |
|
|
|
<text>性别：</text>{{e.gender || '-'}} |
|
|
|
</view> |
|
|
|
<view class="c-line"> |
|
|
|
<text>联系方式：</text>123456789789 |
|
|
|
<text>联系方式：</text>{{e.mobile || '-'}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="i-btns"> |
|
|
|
<view v-if="true" hover-class="hover-active">报价</view> |
|
|
|
<view class="b-detail" hover-class="hover-active" v-else>详情</view> |
|
|
|
</view> |
|
|
|
<view v-if="e.is_offer_price" class="b-detail" hover-class="hover-active" @click="toDetail(e)">详情</view> |
|
|
|
<view v-else hover-class="hover-active" @click.stop="toOffer(e)">报价</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="i-list"> |
|
|
|
<view class="l-line" v-for="j in 5" :key="j"> |
|
|
|
<text>课程一：</text>羽毛球技能技巧大班大班大班大班大班 |
|
|
|
</view> |
|
|
|
<!-- 20210224 pm: 没有，去了 --> |
|
|
|
<!-- <view class="i-list"> |
|
|
|
<view class="l-line" v-for="(k, j) in e.course" :key="j"> |
|
|
|
<text>课程一：</text>{{k.name || '-'}} |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
<!-- <view class="i-unfold"> |
|
|
|
<text>展开</text> |
|
|
|
<image></image> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="e-fixed-bar"> |
|
|
|
<view class="e-fixed-bar" v-if="curTabInfo.status == 0"> |
|
|
|
<view class="fb-select"> |
|
|
|
<view></view> |
|
|
|
<view :class="[isAllSelected?'':'border']"> |
|
|
|
<image v-if="isAllSelected" mode="aspectFit" src="/static/images/selected_c97.png"></image> |
|
|
|
</view> |
|
|
|
<text>全选</text> |
|
|
|
</view> |
|
|
|
<view class="fb-btn" hover-class="hover-active">召开体验课</view> |
|
|
|
@ -59,17 +73,96 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { API } from '../../../js/api' |
|
|
|
import { servers } from '../../../js/server' |
|
|
|
import util from '../../../utils/util' |
|
|
|
const tabArr = [ |
|
|
|
{ |
|
|
|
name: '未报价', |
|
|
|
status: 0, |
|
|
|
id: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '已报价', |
|
|
|
status: 1, |
|
|
|
id: 2 |
|
|
|
} |
|
|
|
] |
|
|
|
export default { |
|
|
|
computed: { |
|
|
|
isAllSelected(){ |
|
|
|
let { exList } = this; |
|
|
|
if(exList.length<=0)return false; |
|
|
|
return !exList.map(e=>(e._selectedStatus || false)).includes(false) |
|
|
|
} |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
|
|
|
|
tabArr, |
|
|
|
curTabInfo: { id: 1 }, |
|
|
|
exList: [], |
|
|
|
course_id: '', |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(){ |
|
|
|
|
|
|
|
onLoad(options){ |
|
|
|
this.getCourseList({course_id: options.course_id}); |
|
|
|
this.course_id = options.course_id; |
|
|
|
this.curTabInfo = tabArr[0]; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
toDetail(e){ |
|
|
|
let _query = { |
|
|
|
price: e.price || 0, |
|
|
|
number: e.number || 0, |
|
|
|
name: e.name, |
|
|
|
course_name: e.course.name, |
|
|
|
order_pay_status: e.order_pay_status |
|
|
|
} |
|
|
|
util.routeTo(`/pages/course/offer_info/offer_info?query=${util.jsonStr(_query)}`, 'nT'); |
|
|
|
}, |
|
|
|
toOffer(e){ |
|
|
|
let _query = { |
|
|
|
id: e.id, |
|
|
|
course_name: e.course.name, |
|
|
|
course_id: e.course.id, |
|
|
|
user_name: e.name, |
|
|
|
user_id: e.user_id, |
|
|
|
} |
|
|
|
util.routeTo(`/pages/course/offer/offer?query=${util.jsonStr(_query)}`, 'nT'); |
|
|
|
}, |
|
|
|
itemSelect(i){ |
|
|
|
let _exList = [...this.exList]; |
|
|
|
if(_exList[i].is_offer_price)return |
|
|
|
_exList[i]._selectedStatus = !_exList[i]._selectedStatus; |
|
|
|
this.exList = [..._exList]; |
|
|
|
}, |
|
|
|
tabChange: util.debounce(function(e){ |
|
|
|
let { course_id } = this; |
|
|
|
this.curTabInfo = e; |
|
|
|
this.getCourseList({ |
|
|
|
is_offer_price: e.status, |
|
|
|
course_id |
|
|
|
}) |
|
|
|
}, 300, 300), |
|
|
|
getCourseList({ |
|
|
|
course_id = '', |
|
|
|
is_offer_price = 0, |
|
|
|
}){ |
|
|
|
util.showLoad(); |
|
|
|
servers.get({ |
|
|
|
url: API.course.getOfferPriceList, |
|
|
|
data: { |
|
|
|
course_id, |
|
|
|
is_offer_price, |
|
|
|
}, |
|
|
|
failMsg: '加载失败！' |
|
|
|
}) |
|
|
|
.then(res=>{ |
|
|
|
util.hideLoad(); |
|
|
|
let _list = res.list || []; |
|
|
|
this.exList = _list; |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -127,15 +220,21 @@ export default { |
|
|
|
padding: 20upx; |
|
|
|
border-radius: 10upx; |
|
|
|
background-color: #fff; |
|
|
|
border: 2upx solid $themeColor; |
|
|
|
border: 2upx solid transparent; |
|
|
|
&.border{ |
|
|
|
border-color: $themeColor; |
|
|
|
} |
|
|
|
.i-header{ |
|
|
|
@include centerFlex(flex-end); |
|
|
|
|
|
|
|
.h-icon{ |
|
|
|
width: 36upx; |
|
|
|
height: 36upx; |
|
|
|
border: 2upx solid #9a9a9d; |
|
|
|
border-radius: 50%; |
|
|
|
overflow: hidden; |
|
|
|
&.border{ |
|
|
|
box-shadow: inset 0 0 0 2upx #9a9a9d; |
|
|
|
} |
|
|
|
>image{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -248,7 +347,13 @@ export default { |
|
|
|
width: 36upx; |
|
|
|
height: 36upx; |
|
|
|
border-radius: 50%; |
|
|
|
border: 2upx solid #9a9a9d; |
|
|
|
&.border{ |
|
|
|
box-shadow: inset 0 0 0 2upx #9a9a9d; |
|
|
|
} |
|
|
|
>image{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.fb-btn{ |
|
|
|
|
