|
|
<template>
|
|
|
<view class="page">
|
|
|
|
|
|
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
|
|
<view class="scell" v-if="list.length>0">
|
|
|
<view v-for="(item, index) in list" :key="index" class="oitem">
|
|
|
|
|
|
<view class="otop" @click="gotoInfo(item.courseTimeId)">
|
|
|
<view class="hleft">
|
|
|
<text>{{item.storeName?item.storeName:'门店'}}</text>
|
|
|
</view>
|
|
|
<view class="hright">
|
|
|
<!-- 1：待上课，2：预约中，3：待评价 ，4：已完成 ，5：已取消 -->
|
|
|
<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
|
|
|
<view v-if="item.bookStatus==1" class="ztip">教练确认</view>
|
|
|
<view v-else-if="item.bookStatus==0" class="jtip">预约中</view>
|
|
|
<view v-else-if="item.bookStatus==2" class="htip">待上课</view>
|
|
|
<view v-else-if="item.bookStatus==4" class="wtip">已完成</view>
|
|
|
<view v-else-if="item.bookStatus==3" class="ctip">已取消</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="oscon" @click="gotoInfo(item.courseTimeId)">
|
|
|
<view class="osimg imgload">
|
|
|
<image class="osimg" v-if="item.pic" :src="getimgRemoteFile(item.pic)" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<view class="osname">
|
|
|
<text class="ntxt">{{item.courseName}} {{item.claName}} </text>
|
|
|
<text class="txt"> 教练：{{item.teacherName }}</text>
|
|
|
<text class="txt">上课时间：{{ item.claDate+' '+item.startTime+'-'+item.endTime}}</text>
|
|
|
<text class="txt">教室：{{item.roomName}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="obtn">
|
|
|
<view class="omoney"></view>
|
|
|
<!-- 1：待上课，2：预约中，3：待评价 ，4：已完成 5：已取消-->
|
|
|
<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
|
|
|
<button type="primary" class="conbtn" @click="gototeacher(item)">联系教练</button>
|
|
|
<button v-if="item.orderstate==2||item.orderstate==1" type="primary" class="cancelbtn" :data-id="item.courseTimeId" @click="cancelkcdo">取消课程</button>
|
|
|
<button v-if="item.orderstate==0" type="primary" class="cancelbtn" :data-id="item.courseTimeId" @click="cancelyydo">取消预约</button>
|
|
|
<button v-if="item.orderstate==0" type="primary" class="paybtn" :data-id="item.courseTimeId" @click="checkdo($event,item)">确认上课</button>
|
|
|
<button v-if="item.orderstate==4" type="primary" class="viewbtn" :data-id="item.courseTimeId" @click="orderdo($event,item)">再次预约</button>
|
|
|
<button v-if="item.orderstate==4" type="primary" class="gzbtn" :data-id="item.courseTimeId" @click="gotoevaluate($event,item)">评价</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="list.length==0 && loadStatus=='noMore'" class="nodata"></view>
|
|
|
<uni-load-more v-if="list.length>0" iconType="circle" :status="loadStatus" />
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
<!-- 是否登录 -->
|
|
|
<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { myCache,getRemoteFile } from '../../utils/utils.js';
|
|
|
import openlogin from "../components/openlogin.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
openlogin
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
openId:"",
|
|
|
phone:"",
|
|
|
userid:"",
|
|
|
loadStatus:"more", // loading noMore
|
|
|
list:[],
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
myCache('courserefresh',0);
|
|
|
this.loadData();
|
|
|
},
|
|
|
onShow(option){
|
|
|
// 预约后重新刷新课程表
|
|
|
if(myCache('courserefresh')){
|
|
|
this.loadData();
|
|
|
myCache('courserefresh',0);
|
|
|
}
|
|
|
},
|
|
|
onReady(){
|
|
|
this.openId = myCache('openId');
|
|
|
var user = myCache('user');
|
|
|
this.userid = user.userid? user.userid:'';
|
|
|
this.phone = user.userphone;
|
|
|
if(this.userid==""||this.userid=="0"){
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/login/login`
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
setTimeout(()=>{
|
|
|
uni.stopPullDownRefresh()
|
|
|
},100);
|
|
|
},
|
|
|
methods: {
|
|
|
getimgRemoteFile(img){
|
|
|
if(img){
|
|
|
img=img.split(',')[0];
|
|
|
return getRemoteFile(img)
|
|
|
}
|
|
|
else{
|
|
|
return require("@/static/image/theme/p1.jpg")
|
|
|
}
|
|
|
},
|
|
|
getPhoneNumber(e){
|
|
|
if(e.phone){
|
|
|
this.phone = e.phone
|
|
|
}
|
|
|
if(e.userid){
|
|
|
this.userid = e.userid
|
|
|
}
|
|
|
},
|
|
|
async getOrderList() {
|
|
|
if(this.loadStatus!=="noMore")
|
|
|
{
|
|
|
uni.showLoading({
|
|
|
title: '数据加载中...'
|
|
|
});
|
|
|
const {data: res} = await uni.$http.get('/api/my/appointmentListForTeacher');
|
|
|
if(res&&res.data){
|
|
|
// 全部
|
|
|
this.loadStatus="noMore";
|
|
|
this.list=res.data;
|
|
|
this.$forceUpdate();
|
|
|
}
|
|
|
else{
|
|
|
this.loadStatus="noMore";
|
|
|
this.$forceUpdate();
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
loadData(){
|
|
|
console.log('loadData');
|
|
|
// 加载
|
|
|
if(this.loadStatus=="more") {
|
|
|
this.loadStatus="loading";
|
|
|
setTimeout(() => {
|
|
|
this.getOrderList();
|
|
|
}, 300);
|
|
|
}
|
|
|
},
|
|
|
gotoInfo(id){
|
|
|
// 预约详情
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/book/bookinfo?id=${id}`
|
|
|
});
|
|
|
},
|
|
|
// 联系教练
|
|
|
gototeacher(item){
|
|
|
var data={
|
|
|
id:item.id,
|
|
|
name:"教练A"
|
|
|
}
|
|
|
// 联系教练
|
|
|
var data=encodeURIComponent(JSON.stringify(data));
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/teacher/chat?data=${data}`
|
|
|
})
|
|
|
},
|
|
|
// 去评价
|
|
|
gotoevaluate(item){
|
|
|
var data=encodeURIComponent(JSON.stringify(item));
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/book/bookpj?data=${data}`
|
|
|
});
|
|
|
},
|
|
|
iflogin(){
|
|
|
this.openId = myCache('openId');
|
|
|
var user = myCache('user');
|
|
|
this.userid = user.userid? user.userid:'';
|
|
|
this.phone = user.userphone;
|
|
|
if(this.userid==""||this.userid=="0"||this.phone==""){
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/login/login`
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
else{
|
|
|
return true;
|
|
|
}
|
|
|
},
|
|
|
// 再次预约
|
|
|
orderdo(e,item){
|
|
|
console.log(id,item);
|
|
|
var that = this;
|
|
|
// 再次预约
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定再次预约吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.checkdodo(id,item);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 再次预约
|
|
|
async orderdodo(id,item){
|
|
|
var param={
|
|
|
"courseTimeId": item.courseTimeId
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '再次预约中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/course/bookCourse', param);
|
|
|
if(res.success){
|
|
|
uni.showToast({
|
|
|
title: '上课已预约！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 重新加载
|
|
|
this.loadData();
|
|
|
}
|
|
|
else{
|
|
|
// uni.showToast({
|
|
|
// title: res.msg? res.msg:'上课预约失败！',
|
|
|
// icon: 'error',
|
|
|
// duration: 2000
|
|
|
// });
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: res.message? res.message:'课程预约失败！',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 确认上课
|
|
|
checkdo(e,item){
|
|
|
console.log(e);
|
|
|
var id= e.currentTarget.dataset.id;
|
|
|
var that = this;
|
|
|
// 确认上课
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定上课吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.checkdodo(id,item);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 确认上课
|
|
|
async checkdodo(id,item){
|
|
|
var param={
|
|
|
"courseTimeId": item.courseTimeId,
|
|
|
"startTime": item.startTime,
|
|
|
"endTime": item.endTime
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '确定上课中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/my/confirmClass', param);
|
|
|
if(res.msg=="successed"){
|
|
|
uni.showToast({
|
|
|
title: '上课已确认！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 重新加载
|
|
|
this.loadData();
|
|
|
}
|
|
|
else{
|
|
|
uni.showToast({
|
|
|
title: res.msg? res.msg:'上课确认失败！',
|
|
|
icon: 'error',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 取消预约
|
|
|
cancelyydo(e){
|
|
|
console.log(e);
|
|
|
var id= e.currentTarget.dataset.id;
|
|
|
var that = this;
|
|
|
//取消预约
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定要取消预约吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.delyydo(id);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 取消预约
|
|
|
async delyydo(id){
|
|
|
var param={
|
|
|
"courseTimeId":id
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '取消中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/course/cancelCourse', param);
|
|
|
if(res.msg=="successed"){
|
|
|
uni.showToast({
|
|
|
title: '预约已取消！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 重新加载
|
|
|
this.loadData();
|
|
|
}
|
|
|
else{
|
|
|
uni.showToast({
|
|
|
title: res.msg? res.msg:'预约取消失败！',
|
|
|
icon: 'error',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
// 取消课程
|
|
|
cancelkcdo(e){
|
|
|
console.log(e);
|
|
|
var id= e.currentTarget.dataset.id;
|
|
|
var that = this;
|
|
|
//取消课程
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '确定要取消课程吗？',
|
|
|
cancelText: '取消',
|
|
|
confirmText: '确定',
|
|
|
success: ress => {
|
|
|
if (ress.confirm) {
|
|
|
that.delkcdo(id);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 取消课程
|
|
|
async delkcdo(id){
|
|
|
var param={
|
|
|
"courseTimeId":id
|
|
|
};
|
|
|
uni.showToast({
|
|
|
title: '取消中...',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
const {data: res} = await uni.$http.post('/api/course/cancelCourse', param);
|
|
|
if(res.msg=="successed"){
|
|
|
uni.showToast({
|
|
|
title: '课程已取消！',
|
|
|
icon: 'success',
|
|
|
duration: 2000
|
|
|
});
|
|
|
// 重新加载
|
|
|
this.loadData();
|
|
|
}
|
|
|
else{
|
|
|
uni.showToast({
|
|
|
title: res.msg? res.msg:'课程取消失败！',
|
|
|
icon: 'error',
|
|
|
duration: 2000
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
padding: 0;
|
|
|
position: relative;
|
|
|
background-image: url('@/static/image/bg.jpg');
|
|
|
background-attachment: fixed;
|
|
|
background-size: cover;
|
|
|
background-position: center center;
|
|
|
min-height: calc(100vh - var(--window-top) - var(--window-bottom));
|
|
|
}
|
|
|
.olistcon{
|
|
|
padding: 0 20rpx 20rpx 20rpx;
|
|
|
.olist{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.ocell{
|
|
|
font-size: 26rpx;
|
|
|
color:#747474;
|
|
|
padding: 10rpx 0;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
.red{
|
|
|
color:#ff3d0e;
|
|
|
}
|
|
|
.green{
|
|
|
color:#00cd00;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.swiper-box {
|
|
|
flex: 1;
|
|
|
height: calc(100vh - var(--window-top) - 130rpx) !important;
|
|
|
}
|
|
|
.swiper-item {
|
|
|
height: 100%;
|
|
|
}
|
|
|
.scrolllist{
|
|
|
height: 110rpx;
|
|
|
background: #FFF;
|
|
|
white-space: nowrap;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.tabicl{
|
|
|
min-width: 130rpx;
|
|
|
height: 100rpx;
|
|
|
line-height: 100rpx;
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
overflow: hidden;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
.ptext{
|
|
|
font-size: 30rpx;
|
|
|
text-align: center;
|
|
|
color: #000;
|
|
|
font-weight: 600;
|
|
|
height: 90rpx;
|
|
|
}
|
|
|
.cur .ptext{
|
|
|
color: #00a89b;
|
|
|
font-size: 33rpx;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.cur .pline{
|
|
|
width: 40%;
|
|
|
height: 9rpx;
|
|
|
background: #00a89b;
|
|
|
border-radius: 6rpx;
|
|
|
opacity: 1;
|
|
|
margin-left: 30%;
|
|
|
}
|
|
|
.nodata{
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 400rpx) !important;
|
|
|
line-height: calc(100vh) !important;
|
|
|
background-image: url('/static/image/no.png');
|
|
|
background-size: 52% auto;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center;
|
|
|
font-size: 28rpx;
|
|
|
text-align: center;
|
|
|
color: #00a89b;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.scell{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-start;
|
|
|
margin: 20rpx;
|
|
|
.oitem{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background-color: #FFFFFF;
|
|
|
border-radius: 6rpx;
|
|
|
padding: 20rpx;
|
|
|
width: 100%;
|
|
|
margin-bottom: 20rpx;
|
|
|
.otop{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
padding: 10rpx 0 0;
|
|
|
height: 60rpx;
|
|
|
line-height: 60rpx;
|
|
|
width: 100%;
|
|
|
.hleft{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex:1;
|
|
|
align-items: center;
|
|
|
font-size: 30rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
.hright{
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: center;
|
|
|
// <!--1：待付款，2：待发货，3：待收货 ，4：待评价 ，5：已完成，6：订单取消-->
|
|
|
.ztip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#1296db;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.jtip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#feb467;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.htip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#fc6900;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.hwtip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#FF0000;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.wtip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#43cca4;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.gtip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#0036D6;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.ftip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#6A81F1;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.ctip{
|
|
|
border-radius: 12rpx;
|
|
|
color:#888;
|
|
|
font-size: 26rpx;
|
|
|
padding: 0;
|
|
|
height: 40rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.obtn{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: flex-end;
|
|
|
border-top: 1rpx solid #eee;
|
|
|
padding: 20rpx 0 10rpx;
|
|
|
width: 100%;
|
|
|
.omoney{
|
|
|
display: flex;
|
|
|
flex:1;
|
|
|
height: 60rpx;
|
|
|
width: 100%;
|
|
|
color:#333;
|
|
|
align-items: center;
|
|
|
.omtip{
|
|
|
font-size: 36rpx;
|
|
|
color:rgb(252, 105, 0);
|
|
|
}
|
|
|
}
|
|
|
.cancelbtn{
|
|
|
background-color: #FFFFFF !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
color:#888;
|
|
|
border:1rpx solid #888;
|
|
|
}
|
|
|
.cancelbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.viewbtn{
|
|
|
background-color: #FFFFFF !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
color:#6A81F1;
|
|
|
border:1rpx solid #6A81F1;
|
|
|
}
|
|
|
.viewbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.pjbtn{
|
|
|
background-color: #FFFFFF !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid rgb(252, 105, 0);
|
|
|
color:rgb(252, 105, 0);
|
|
|
}
|
|
|
.pjbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.conbtn{
|
|
|
background-color: #f3f4ef !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid #00a89b;
|
|
|
color:#595d4d;
|
|
|
}
|
|
|
.conbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.paybtn{
|
|
|
background-color: #00a89b !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid #00a89b;
|
|
|
}
|
|
|
.paybtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.gzbtn{
|
|
|
background-color: #f5aa00 !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid #f5aa00;
|
|
|
}
|
|
|
.gzbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
.gzbtn{
|
|
|
background-color: #f5aa00 !important;
|
|
|
margin-left: 20rpx;
|
|
|
border-radius: 50rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 48rpx;
|
|
|
padding: 0 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
border:1rpx solid #f5aa00;
|
|
|
}
|
|
|
.gzbtn::after{
|
|
|
border:0 !important;
|
|
|
}
|
|
|
}
|
|
|
.oscon{
|
|
|
margin:20rpx 0;
|
|
|
border-radius: 16rpx;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
.osimg{
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
.osname{
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-left: 26rpx;
|
|
|
.ntxt{
|
|
|
font-size: 28rpx;
|
|
|
color:#000;
|
|
|
line-height: 36rpx;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
.txt{
|
|
|
font-size: 24rpx;
|
|
|
color:#666;
|
|
|
}
|
|
|
}
|
|
|
.osprice{
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
margin-right: 10rpx;
|
|
|
font-size: 30rpx;
|
|
|
color:#666;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.sitem {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
flex: 1;
|
|
|
background-color: #FFFFFF;
|
|
|
/*设置最小宽度，才会让元素排不下，导致换行排列*/
|
|
|
min-width: calc((100% - 20rpx) / 2);
|
|
|
max-width: calc((100% - 20rpx) / 2);
|
|
|
margin-right:5rpx;
|
|
|
margin-left:5rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
border-radius: 16rpx;
|
|
|
.simg{
|
|
|
width: 100%;
|
|
|
height: 360rpx;
|
|
|
.img{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
}
|
|
|
}
|
|
|
.sname{
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color: rgb(29, 29, 29);
|
|
|
padding: 16rpx;
|
|
|
}
|
|
|
.sinfo{
|
|
|
font-size: 26rpx;
|
|
|
color:rgb(116, 116, 116);
|
|
|
padding: 0 16rpx;
|
|
|
height: 60rpx;
|
|
|
line-height: 30rpx;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
text-overflow: ellipsis;
|
|
|
display:-webkit-box;
|
|
|
-webkit-box-orient:vertical;
|
|
|
-webkit-line-clamp:2;
|
|
|
}
|
|
|
.sprices{
|
|
|
padding: 0 16rpx 20rpx 16rpx;
|
|
|
font-size: 36rpx;
|
|
|
color:rgb(252, 105, 0);
|
|
|
border-radius: 0 0 16rpx 16rpx;
|
|
|
.cx{
|
|
|
font-size: 28rpx;
|
|
|
color:rgb(116, 116, 116);
|
|
|
text-decoration: line-through;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
