|
|
@@ -1,363 +1,413 @@
|
|
|
<template>
|
|
|
- <!-- 54是搜索框整体高度 52是tab的整体高度 不展示搜索框时需去除54-->
|
|
|
- <view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
|
|
|
- <!-- 头部 -->
|
|
|
- <!-- <u-navbar title="酒店民宿订单" :leftIconSize="36" bgColor="#ffffff" leftIconColor="#333333" :titleStyle="titleStyle"
|
|
|
- @leftClick="returnBack"></u-navbar> -->
|
|
|
+ <view class="pages" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
|
|
|
<c-nav-bar title="我的订单"></c-nav-bar>
|
|
|
-
|
|
|
- <TopTabs :list="list" @changeTab="changeTab" :top="mt" :placeholder="'输入关键字'" @sousuo="sousuo"></TopTabs>
|
|
|
-
|
|
|
- <view class="list">
|
|
|
- <view v-for="(item,index) in orderList" :key="index" cc v-if="FormData.orderStatus==item.orderStatus"
|
|
|
- @click.stop="orderDeatils(item)">
|
|
|
- <view class="item">
|
|
|
- <text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
|
|
|
- <text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
|
|
|
- <text class="status s2" v-if="item.orderStatus=='-2'">待付款</text>
|
|
|
- <text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
|
|
|
- <text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
|
|
|
- <text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>
|
|
|
-
|
|
|
- <view class="head">
|
|
|
- <!-- <image src="../../../static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
|
|
|
- <!-- <image src="../../../static/scenicSpots/ticketIcon.png" v-else></image> -->
|
|
|
- <image src="../../../static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
|
|
|
- <image src="../../../static/my/jd_ms.png" mode="" v-else></image>
|
|
|
- <text>酒店民宿</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="mid">
|
|
|
- <view class="name" :class="item.orderStatus=='-3'?'disabled':''">{{item.homestayName}}</view>
|
|
|
- <view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
|
|
|
- <view class="des">{{item.houseBaseName}}</view>
|
|
|
- </view>
|
|
|
- <view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>
|
|
|
-
|
|
|
- <view class="btns">
|
|
|
-
|
|
|
- <template v-if="item.orderStatus==1">
|
|
|
- <view @click.stop="toStatus0(item)">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- <!-- <view @click.stop="GoRefund(item)">
|
|
|
- 申请退订
|
|
|
- </view> -->
|
|
|
- <view @click.stop="applyAfterSales(item)">
|
|
|
- 再次预订
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="item.orderStatus==-2">
|
|
|
- <view @click.stop="toStatus0(item)">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- <view @click.stop="GoToPay(item)" style="color: #0DBFFD;">
|
|
|
- 去支付
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
-
|
|
|
- <template v-if="item.orderStatus==3||item.orderStatus==2">
|
|
|
- <!-- <view @click.stop="applyAfterSales(item)">
|
|
|
- 删除
|
|
|
- </view> -->
|
|
|
- <view @click.stop="toEvaluate(item)">
|
|
|
- 评价
|
|
|
- </view>
|
|
|
- <view @click.stop="applyAfterSales(item)">
|
|
|
- 再次预订
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-if="item.orderStatus==5||item.orderStatus==4">
|
|
|
- <!-- <view @click.stop="applyAfterSales(item)">
|
|
|
- 删除
|
|
|
- </view> -->
|
|
|
- <view @click.stop="applyAfterSales(item)">
|
|
|
- 再次预订
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-if="item.orderStatus==-1">
|
|
|
- <view @click.stop="GoRefund(item)">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- <view @click.stop="applyAfterSales(item)">
|
|
|
- 再次预订
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
- </view>
|
|
|
+ <view class="tb">
|
|
|
+ <view class="tabs">
|
|
|
+ <view v-for="(item,index) in tabList" :key="index" @tap="changeTab1(index)">
|
|
|
+ <text :class="index==current?'active':''">{{item.name}}</text>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
- <view v-else @click.stop="orderDeatils(item)">
|
|
|
- <view class="item">
|
|
|
- <text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
|
|
|
- <text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
|
|
|
- <text class="status s2" v-if="item.orderStatus=='-2'">待付款</text>
|
|
|
- <text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
|
|
|
- <text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
|
|
|
- <text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>
|
|
|
-
|
|
|
- <view class="head">
|
|
|
- <!-- <image src="../../../static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
|
|
|
- <!-- <image src="../../../static/scenicSpots/ticketIcon.png" v-else></image> -->
|
|
|
- <image src="../../../static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
|
|
|
- <image src="../../../static/my/jd_ms.png" mode="" v-else></image>
|
|
|
- <text>酒店民宿</text>
|
|
|
+ </view>
|
|
|
+ <view class="mainContain">
|
|
|
+ <view v-if="dataList.length>0" class="card" v-for="item,index in dataList" :key="index">
|
|
|
+ <view class="header">
|
|
|
+ <span style="font-weight: 700;">下单时间：{{item.orderTime}}</span>
|
|
|
+ <text v-if='item.state==0' class="orange">待支付</text>
|
|
|
+ <text v-else-if='item.state==1' class="red">已支付</text>
|
|
|
+ <text v-else-if='item.state==-1' class="red">已取消</text>
|
|
|
+ <text v-else-if='item.state==-2' class="green">退款中</text>
|
|
|
+ <text v-else-if='item.state==3' class="green">已完成</text>
|
|
|
+ <text v-else-if='item.state==-3' class="green">已退款</text>
|
|
|
+ <text v-else-if='item.state==4' class="red">待使用</text>
|
|
|
+ <text v-else-if='item.state==5' class="green">已预约</text>
|
|
|
+
|
|
|
+ <text v-else :class="statusClass[item.state]">{{status[item.state]}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="mainContent" @click="navTo(item)">
|
|
|
+ <image class="image" :src="item.pic" mode="aspectFill"></image>
|
|
|
+ <view class="middle">
|
|
|
+ <view class="title" style="display: flex; justify-content: space-between;">
|
|
|
+ <span> {{item.thingName}}</span>
|
|
|
+ <span> ￥{{item.totalPrice}}</span>
|
|
|
+ </view>
|
|
|
+ <span class='info' style="display: flex; justify-content: space-between;">
|
|
|
+ <span>
|
|
|
+ <span>{{item.userName}}</span>
|
|
|
+ <span>{{item.phone}}</span>
|
|
|
+ </span>
|
|
|
+ <span>x{{item.num}}</span>
|
|
|
+ </span>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="mid">
|
|
|
- <view class="name" :class="item.orderStatus=='0'?'disabled':''">{{item.homestayName}}</view>
|
|
|
- <view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
|
|
|
- <view class="des">{{item.houseBaseName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom" @click="handleDetail(item)" v-if="item.state==4||item.state==5">
|
|
|
+ <view class="detail del">
|
|
|
+ 核销订单
|
|
|
</view>
|
|
|
- <view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>
|
|
|
-
|
|
|
- <view class="btns">
|
|
|
-
|
|
|
- <template v-if="item.orderStatus==1">
|
|
|
- <view @click.stop="toStatus0(item)">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- <!-- <view @click.stop="GoRefund(item)">
|
|
|
- 申请退订
|
|
|
- </view> -->
|
|
|
- <view @click.stop="applyAfterSales(item)">
|
|
|
- 再次预订
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="item.orderStatus==-2">
|
|
|
- <view @click.stop="toStatus0(item)">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- <view @click.stop="GoToPay(item)" style="color: #0DBFFD;">
|
|
|
- 去支付
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-if="item.orderStatus==3||item.orderStatus==2">
|
|
|
- <!-- <view @click.stop="applyAfterSales(item)">
|
|
|
- 删除
|
|
|
- </view> -->
|
|
|
- <view @click.stop="toEvaluate(item)">
|
|
|
- 评价
|
|
|
- </view>
|
|
|
- <view @click.stop="applyAfterSales(item)">
|
|
|
- 再次预订
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-if="item.orderStatus==5||item.orderStatus==4">
|
|
|
- <!-- <view @click.stop="applyAfterSales(item)">
|
|
|
- 删除
|
|
|
- </view> -->
|
|
|
- <view @click.stop="applyAfterSales(item)">
|
|
|
- 再次预订
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-if="item.orderStatus==-1">
|
|
|
- <view @click.stop="GoRefund(item)">
|
|
|
- 取消
|
|
|
- </view>
|
|
|
- <view @click.stop="applyAfterSales(item)">
|
|
|
- 再次预订
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
+ </view>
|
|
|
+ <view class="bottom" @click="Detail(item)" v-else>
|
|
|
+ <view class="detail">
|
|
|
+ 删除订单
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- <view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="tip"> -->
|
|
|
- <!-- {{orderList.length>0?'已显示全部订单':'暂无订单'}} -->
|
|
|
- <!-- <nodata v-if="orderList.length === 0"></nodata> -->
|
|
|
- <!-- </view> -->
|
|
|
- <!-- 取消弹框 -->
|
|
|
- <!-- <u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定'
|
|
|
- confirmColor='#0cbffd' @confirm="confirm" @cancel='cancel'></u-modal> -->
|
|
|
|
|
|
|
|
|
- <!-- <u-toast ref="uToast"></u-toast> -->
|
|
|
-
|
|
|
+ </view>
|
|
|
+ <view class="nodata" v-if='dataList.length==0'>
|
|
|
+ <NoData></NoData>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- // import nodata from '@/compoments/NoData/index.vue'
|
|
|
- // import TopTabs from '@/compoments/TopTabs/topTabs.vue';
|
|
|
+ import TopTabs from '@/components/TopTabs/topTabs.vue';
|
|
|
+ // import NoData from '../../components/NoData/index.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
- // TopTabs,
|
|
|
- // nodata
|
|
|
+ TopTabs,
|
|
|
+ // NoData
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // mt: uni.getSystemInfoSync().statusBarHeight + 44,
|
|
|
h: uni.getSystemInfoSync().windowHeight,
|
|
|
mt: uni.getSystemInfoSync().statusBarHeight + 44,
|
|
|
- titleStyle: {
|
|
|
- fontSize: '36rpx',
|
|
|
- fontWeight: "bold",
|
|
|
- color: "#333333"
|
|
|
- },
|
|
|
- list: [{
|
|
|
- name: '全部'
|
|
|
- }, {
|
|
|
- name: '待付款'
|
|
|
- }, {
|
|
|
- name: '待使用'
|
|
|
- }, {
|
|
|
- name: '退款'
|
|
|
- }],
|
|
|
-
|
|
|
+ current: 0,
|
|
|
+ mysearch: '',
|
|
|
+ dataList: [],
|
|
|
+ limit: 10,
|
|
|
+ page: 1,
|
|
|
+ state: '',
|
|
|
+ homestayId: uni.getStorageSync('homestayId'),
|
|
|
+ statusClass: [
|
|
|
+ '',
|
|
|
+ 'green',
|
|
|
+ 'blue',
|
|
|
+ 'grey',
|
|
|
+ 'grey',
|
|
|
+ ],
|
|
|
+ status: [
|
|
|
+ '',
|
|
|
+ '已预订',
|
|
|
+ '已入住',
|
|
|
+ '已退房',
|
|
|
+ '已取消',
|
|
|
+ ],
|
|
|
+ // mt: uni.getSystemInfoSync().statusBarHeight + 44,
|
|
|
+ tabList: [{
|
|
|
+ name: '全部订单'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待支付'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待使用'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已完成'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '退款/售后'
|
|
|
+ },
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
-
|
|
|
+ onLoad(option) {
|
|
|
+ if (option.Type) {
|
|
|
+ const type = parseInt(option.Type) + 1
|
|
|
+ this.changeTab1(type)
|
|
|
+ } else {
|
|
|
+ this.getOrderList()
|
|
|
+ }
|
|
|
},
|
|
|
-
|
|
|
methods: {
|
|
|
-
|
|
|
-
|
|
|
+ // 去详情
|
|
|
+ navTo(item) {
|
|
|
+ console.log(item);
|
|
|
+ },
|
|
|
+ // 核销
|
|
|
+ handleDetail(item) {
|
|
|
+ console.log(item);
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ Detail(item) {
|
|
|
+ console.log(item);
|
|
|
+ },
|
|
|
+ changeTab1(index) {
|
|
|
+ this.current = index;
|
|
|
+ if (index === 0) this.state = '';
|
|
|
+ else if (index === 1) this.state = '0'
|
|
|
+ else if (index === 2) this.state = '4';
|
|
|
+ else if (index === 3) this.state = '3';
|
|
|
+ else if (index === 4) this.state = '-3';
|
|
|
+ // else this.FormData.status = '0,1,-1,2,-2,-3,3,4,5,6,7,8,9,10,11';
|
|
|
+ this.changeTab(index)
|
|
|
+ },
|
|
|
+ getOrderList(state) {
|
|
|
+ this.$api.get('/api/fishermanOrder/queryMyOrderPage', {
|
|
|
+ // fishermanId: '',
|
|
|
+ limit: this.limit,
|
|
|
+ page: this.page,
|
|
|
+ state: state ? state : ''
|
|
|
+ }).then((res => {
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ this.dataList = res.data.data.list
|
|
|
+ // this.dataList.forEach((i, index) => {
|
|
|
+ // this.dataList[index].arriveDate = i.arriveDate.slice(0, 10)
|
|
|
+ // this.dataList[index].leaveDate = i.leaveDate.slice(0, 10)
|
|
|
+ // })
|
|
|
+ console.log(this.dataList, 'this.dataList');
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }))
|
|
|
+ },
|
|
|
+ getOrderByStatusList() {
|
|
|
+ this.$api.get('/merchant/hotel/order/getMerchantOrderPageList', {
|
|
|
+ homestayId: this.homestayId,
|
|
|
+ limit: this.limit,
|
|
|
+ page: this.page,
|
|
|
+ status: 0
|
|
|
+ }).then((res => {
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ this.dataList = res.data.data.list
|
|
|
+ this.dataList.forEach((i, index) => {
|
|
|
+ this.dataList[index].arriveDate = i.arriveDate.slice(0, 10)
|
|
|
+ this.dataList[index].leaveDate = i.leaveDate.slice(0, 10)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.msg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ },
|
|
|
+
|
|
|
+ changeTab(index) {
|
|
|
+ console.log(index, 'index------');
|
|
|
+ this.tabIdx = index;
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ this.getOrderList()
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.getOrderList(0)
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ // this.getOrderByStatusList(-2)
|
|
|
+ this.getOrderList(4)
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ this.getOrderList(3)
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ this.getOrderList(-3)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less">
|
|
|
- .orderList {
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #fff;
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .pages {
|
|
|
+ background: #F9FAFC;
|
|
|
|
|
|
- .u-tabs__wrapper__nav__line {
|
|
|
- // left: 20rpx !important
|
|
|
- }
|
|
|
- }
|
|
|
+ .tb {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .u-button {
|
|
|
- height: 60rpx !important;
|
|
|
- }
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
|
|
|
- .tip {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #AAAAAA;
|
|
|
- line-height: 33rpx;
|
|
|
- margin: 56rpx 0;
|
|
|
- }
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
- page {
|
|
|
- background-color: #F5F8FA;
|
|
|
- }
|
|
|
+ .searchBoxParent {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx 24rpx 6rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .disabled {
|
|
|
- color: #AAA !important
|
|
|
- }
|
|
|
-
|
|
|
- .list {
|
|
|
- padding: 0 24rpx;
|
|
|
-
|
|
|
- .item {
|
|
|
- background-color: #fff;
|
|
|
- margin-top: 20rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 36rpx 24rpx 0;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .status {
|
|
|
- right: 24rpx;
|
|
|
- top: 40rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #AAA;
|
|
|
- position: absolute;
|
|
|
-
|
|
|
- &.s2 {
|
|
|
- color: #FF7D01;
|
|
|
- }
|
|
|
-
|
|
|
- &.s3 {
|
|
|
- color: #01B9F9
|
|
|
+ .searchBox {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .head {
|
|
|
- color: #111;
|
|
|
+ .tabs {
|
|
|
+ background: #fff;
|
|
|
+ padding: 26rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
|
|
|
- image {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- vertical-align: middle;
|
|
|
+ &>view {
|
|
|
+ width: 25%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: black;
|
|
|
+ line-height: 40rpx;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: black;
|
|
|
+ line-height: 45rpx;
|
|
|
}
|
|
|
|
|
|
- text {
|
|
|
- vertical-align: middle;
|
|
|
+ .active::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 50rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ background: #007A69;
|
|
|
+ bottom: -26rpx;
|
|
|
+ left: 60%;
|
|
|
+ margin-left: -42rpx;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .mid {
|
|
|
- padding: 24rpx 50rpx 40rpx 56rpx;
|
|
|
- border-bottom: 1rpx solid #EFEFEF;
|
|
|
+ .green {}
|
|
|
|
|
|
- .name {
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
+ .mainContain {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0 20rpx;
|
|
|
|
|
|
- .date {
|
|
|
- margin: 30rpx 0;
|
|
|
- color: #AAAAAA;
|
|
|
- }
|
|
|
+ .nodata {
|
|
|
+ background: white;
|
|
|
|
|
|
- .des {
|
|
|
- color: #AAAAAA;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .btns {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
+ .card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px #f3f3f3 solid;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: indianred;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ color: #1372FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grey {
|
|
|
+ color: #4C5F76;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orange {
|
|
|
+ color: #FF9100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainContent {
|
|
|
+ border-bottom: 1px #f3f3f3 solid;
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 0;
|
|
|
+
|
|
|
+
|
|
|
+ // justify-content: space-evenly;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ width: 198rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .middle {
|
|
|
+ padding-top: 16rpx;
|
|
|
+ color: #777777;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: space-between;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ padding-top: 30rpx;
|
|
|
+ color: #777777;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+
|
|
|
+ &>span {
|
|
|
+ margin-top: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ color: red;
|
|
|
+ text-align: center;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ align-self: center;
|
|
|
+ font-size: 29rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
|
|
|
- &>view {
|
|
|
- // margin: 24rpx 0 0 24rpx;
|
|
|
- margin: 24rpx;
|
|
|
- width: 148rpx;
|
|
|
- height: 56rpx;
|
|
|
- border: 1rpx solid #EFEFEF;
|
|
|
- border-radius: 28rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .price {
|
|
|
- position: absolute;
|
|
|
- right: 24rpx;
|
|
|
- bottom: 144rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #111;
|
|
|
- font-weight: 600;
|
|
|
+ .bottom {
|
|
|
+ // padding: 30rpx 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .detail {
|
|
|
+
|
|
|
+ // border: 1rpx solid darkgrey;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: darkgrey;
|
|
|
+ padding: 13rpx 34rpx;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: Regular;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .del {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: darkgrey;
|
|
|
+ padding: 13rpx 34rpx;
|
|
|
+ background-color: #007A69;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: Regular;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .ml12 {
|
|
|
- height: 56rpx;
|
|
|
- width: 148rpx;
|
|
|
- line-height: 56rpx;
|
|
|
- display: inline-block;
|
|
|
- margin-left: 24rpx;
|
|
|
- }
|
|
|
</style>
|
2912631854@qq.com