817 lines
20 KiB
Vue
817 lines
20 KiB
Vue
<template>
|
||
<view class="plants_main" :style="{height: screenHeight + 'px'}">
|
||
<nav-bar title='绿植订购'></nav-bar>
|
||
|
||
<view class="reservation_type">
|
||
<view :class="acIndex == 0? 'type_item_left_ac':'type_item_left'" @click="typeClick(0)">绿植订购</view>
|
||
<view :class="acIndex == 0? 'type_item_right':'type_item_right_ac'" @click="typeClick(1)">我的订单</view>
|
||
</view>
|
||
|
||
|
||
<template v-if="acIndex == 0">
|
||
<view class="content_nav">
|
||
<view class="left_nav">
|
||
<view class="left_nav_item" :class="leftIndex == index?'left_nav_item_ac':''" v-for="(item,index) in dataList" :key="index" @click="leftClick(item,index)">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
<view class="right_nav" v-if="dataList[leftIndex]">
|
||
<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 100%;">
|
||
<view class="right_nav_item" v-for="(item,index) in dataList[leftIndex].child" :key="index">
|
||
<image class="goods_img" @click="previewImage(item.url)" :src="item.url" mode="aspectFill"></image>
|
||
<view class="goods_info">
|
||
<view class="goods_name">{{item.greenName}}</view>
|
||
<view class="goods_pice">
|
||
<view style="color: #FC701E;font-size: 32rpx;font-weight: bold;">
|
||
<text style="font-size: 24rpx;">￥ </text> {{item.greenPrice}} / <text style="font-size: 24rpx;">{{item.unit}}</text>
|
||
</view>
|
||
<view class="goods_icon">
|
||
<image @click="jianClick(item,index,dataList[leftIndex])" v-if="item.num > 0" src="/static/firstaid/jian.png"></image>
|
||
<view v-if="item.num > 0" style="font-size: 30rpx;margin: 0 10rpx;">{{item.num}}</view>
|
||
<image @click="addClick(item,index,dataList[leftIndex])" src="/static/firstaid/addIcon.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom_btn">
|
||
<view class="info_nav">
|
||
<view style="font-weight: bold;font-size: 30rpx;">合计：
|
||
<text style="font-size: 24rpx;font-weight: 400;color: #F4772D;">￥</text> <text style="color: #F4772D;">{{totalPrice}}</text>
|
||
</view>
|
||
<view style="font-size: 26rpx;">已选 {{totalNum}} 件
|
||
<text style="margin-left: 24rpx;font-size: 24rpx;" v-if="totalNum > 0 ">配送费：{{delivery}}（满500可减)</text>
|
||
</view>
|
||
</view>
|
||
<view class="btn_nav" @click="addGoods()" v-if="!popShow"> 添加购物车</view>
|
||
<view class="btn_nav" @click="submitClick()" v-else> 提交订单</view>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-if="acIndex == 1">
|
||
<z-paging
|
||
id="paging_id"
|
||
ref="paging"
|
||
v-model="listData"
|
||
@query="queryList"
|
||
:fixed="false"
|
||
class="z-paging_nav"
|
||
:auto="false"
|
||
:style="{height: scrollH +'px'}">
|
||
<view class="card_item" v-for="(item,index) in listData" :key="index">
|
||
<view class="order_num">订单编号 {{item.greenOrderInfoList[0].orderId}}</view>
|
||
<view class="order_info">
|
||
<view class="order_img">
|
||
<view class="img_nav" v-for="(child,cindex) in item.greenOrderInfoList" :key="cindex">
|
||
<image @click="previewImage(child.url)" :src="child.url" mode="aspectFill"></image>
|
||
<view class="">{{child.greenName}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="order_tips">共{{item.num}}件</view>
|
||
</view>
|
||
<view class="order_time">
|
||
<view class="date">下单时间：{{item.createdTime}}</view>
|
||
<view class="price"><text style="font-size: 26rpx;">￥</text>{{item.usePrice}}</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</template>
|
||
|
||
<van-popup v-model="popShow" position="bottom" round class="project_nav" @close="popClose">
|
||
<view class="top">
|
||
<view class="checkbox_nav" @click="allcheckChange()">
|
||
<view class="checkbox" :class="allChecked?'checkbox_ac':''"></view>
|
||
<view>当前已选{{totalNum}}件商品</view>
|
||
</view>
|
||
<view class="delete_icon" @click="clearClick()">
|
||
<image src="/static/firstaid/delete.png"></image>
|
||
<view>清空</view>
|
||
</view>
|
||
</view>
|
||
<view class="center">
|
||
<view class="right_nav_item" v-for="(item,index) in selectList" :key="index" style="padding: 24rpx 0;" @click="rowChange(item,index)">
|
||
<view style="display: flex;align-items: center;width: 100%;">
|
||
<view class="checkbox" :class="item.checked?'checkbox_ac':''"></view>
|
||
<view style="flex: 1;display: flex;">
|
||
<image class="goods_img" :src="item.url" style="width: 140rpx;height: 140rpx;"></image>
|
||
<view class="goods_info">
|
||
<view class="goods_name">{{item.greenName}}</view>
|
||
<view class="goods_pice">
|
||
<view style="color: #FC701E;font-size: 32rpx;font-weight: bold;">
|
||
<text style="font-size: 24rpx;">￥ </text> {{item.greenPrice}} / <text style="font-size: 24rpx;">{{item.unit}}</text>
|
||
</view>
|
||
<view class="goods_icon">
|
||
<image @click.stop="carjianClick(item,index)" v-if="item.num > 0" src="/static/firstaid/jian.png"></image>
|
||
<view v-if="item.num > 0" style="font-size: 30rpx;margin: 0 10rpx;">{{item.num}}</view>
|
||
<image @click.stop="caraddClick(item,index)" src="/static/firstaid/addIcon.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</van-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navBar from "@/components/navBar/index.vue";
|
||
import {callbackRequest,accAdd,accMul} from "@/common/util.js"
|
||
import {greenList,greenType,greenOrder} from "@/common/api.js"
|
||
export default {
|
||
components: {
|
||
navBar
|
||
},
|
||
data() {
|
||
return {
|
||
scrollTop: 0,
|
||
acIndex: 0,
|
||
leftIndex: 0,
|
||
dataList: [],
|
||
totalPrice: 0,
|
||
totalNum: 0,
|
||
popShow: false,
|
||
allChecked: false,
|
||
selectList: [],
|
||
listData: [],
|
||
screenHeight: '',
|
||
scrollH: '',
|
||
delivery: 30,
|
||
discount: 1
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getList()
|
||
this.screenHeight = uni.getSystemInfoSync().safeArea.height
|
||
},
|
||
onShow() {
|
||
if(this.acIndex == 1) {
|
||
this.$nextTick(() => {
|
||
this.$refs.paging.reload()
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
queryList(pageNo, pageSize) {
|
||
let params = {
|
||
method: greenOrder,
|
||
currentPage: pageNo,
|
||
isDeleted: "0",
|
||
limit: pageSize,
|
||
userId: uni.getStorageSync('userId')
|
||
}
|
||
callbackRequest(params).then((res) => {
|
||
if (res.returnCode == 1) {
|
||
if(res.returnData.records.length > 0) {
|
||
res.returnData.records.forEach(item => {
|
||
item.num = 0
|
||
if(item.greenOrderInfoList.length > 0) {
|
||
item.greenOrderInfoList.forEach(child => {
|
||
item.num = accAdd(item.num,child.greenNum)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
if(pageNo * pageSize >= res.returnData.total) {
|
||
this.$refs.paging.completeByNoMore(res.returnData.records,true);
|
||
return
|
||
}else{
|
||
this.$refs.paging.completeByNoMore(res.returnData.records,false);
|
||
}
|
||
} else {
|
||
uni.showToast({title: res.returnMsg,icon: 'none'});
|
||
}
|
||
})
|
||
},
|
||
|
||
getType() {
|
||
return new Promise((resolve,reject) => {
|
||
let params = {
|
||
method: greenType,
|
||
dataType: 'green_flower',
|
||
isDeleted: '0'
|
||
}
|
||
callbackRequest(params).then((res) => {
|
||
if (res.returnCode == 1) {
|
||
resolve(res.returnData)
|
||
} else {
|
||
uni.showToast({title: res.returnMsg,icon: 'none'});
|
||
}
|
||
})
|
||
})
|
||
},
|
||
|
||
getList() {
|
||
let params = {
|
||
method: greenList,
|
||
isDeleted: "0",
|
||
type: '',
|
||
userId: uni.getStorageSync('userId'),
|
||
currentPage: 1,
|
||
limit: 10000
|
||
}
|
||
callbackRequest(params).then((res) => {
|
||
if (res.returnCode == 1) {
|
||
this.dataList = []
|
||
this.getType().then(typeList => {
|
||
typeList.forEach(item => {
|
||
var arr = {
|
||
name: '',
|
||
child: []
|
||
}
|
||
res.returnData.records.forEach(good => {
|
||
if(item.dataCode == good.type) {
|
||
good.num = 0
|
||
good.checked = false
|
||
arr.child.push(good)
|
||
}
|
||
})
|
||
arr.name = item.dataValue
|
||
this.dataList.push(arr)
|
||
})
|
||
this.dataList.forEach((item,index) => {
|
||
if(item.child.length <= 0) {
|
||
this.dataList.splice(index,1)
|
||
}
|
||
})
|
||
})
|
||
console.log('this.dataList',this.dataList)
|
||
} else {
|
||
uni.showToast({title: res.returnMsg,icon: 'none'});
|
||
}
|
||
})
|
||
},
|
||
|
||
submitClick() {
|
||
var isOrder = false
|
||
if(this.selectList.length <= 0) {
|
||
uni.showToast({title: '请先选择商品',icon: 'none'});
|
||
return
|
||
}
|
||
for(let i=0;i<this.selectList.length;i++) {
|
||
if(this.selectList[i].checked && this.selectList[i].num > 0) {
|
||
isOrder = true
|
||
}
|
||
}
|
||
if(!isOrder) {
|
||
uni.showToast({title: '请勾选商品数量',icon: 'none'});
|
||
return
|
||
}
|
||
this.popShow = false
|
||
|
||
this.$nextTick(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/lifeService/greenOrder?discount=' + this.discount + '&delivery=' + this.delivery,
|
||
success: res => {
|
||
this.selectList.forEach((item,index) => {
|
||
if(!item.checked || item.num <= 0) {
|
||
this.selectList.splice(index,1)
|
||
}
|
||
})
|
||
res.eventChannel.emit('selectChange', { data: this.selectList })
|
||
}
|
||
});
|
||
})
|
||
|
||
},
|
||
|
||
typeClick(num) {
|
||
this.acIndex = num
|
||
if(this.acIndex == 1) {
|
||
this.$nextTick(() => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select("#paging_id").boundingClientRect((data) => {
|
||
this.scrollH = this.screenHeight - data.top
|
||
}).exec();
|
||
this.$refs.paging.reload()
|
||
})
|
||
}
|
||
},
|
||
|
||
leftClick(row,index) {
|
||
this.leftIndex = index
|
||
},
|
||
|
||
jianClick(item,index,parent){
|
||
item.num = item.num - 1
|
||
if(item.num <= 0) {
|
||
item.checked = false
|
||
}
|
||
this.handleGoods()
|
||
},
|
||
|
||
addClick(item,index,parent) {
|
||
item.num++
|
||
item.checked = true
|
||
this.handleGoods()
|
||
},
|
||
|
||
carjianClick(item) {
|
||
item.num = item.num - 1
|
||
if(item.num == 0) {
|
||
item.checked = false
|
||
}
|
||
this.handleSelect()
|
||
},
|
||
|
||
caraddClick(item) {
|
||
item.num++
|
||
this.handleSelect()
|
||
},
|
||
|
||
addGoods() {
|
||
if(this.selectList.length <= 0) {
|
||
uni.showToast({title: '请选择商品',icon: 'none'});
|
||
return
|
||
}
|
||
this.popShow = true
|
||
this.allChecked = true
|
||
this.handleSelect()
|
||
},
|
||
|
||
allcheckChange() {
|
||
this.allChecked = !this.allChecked
|
||
if(!this.allChecked) {
|
||
this.selectList.forEach(item => {
|
||
item.checked = false
|
||
})
|
||
}else{
|
||
this.selectList.forEach(item => {
|
||
item.checked = true
|
||
})
|
||
}
|
||
},
|
||
|
||
rowChange(e,index) {
|
||
e.checked = !e.checked
|
||
this.handleSelect()
|
||
},
|
||
|
||
handleSelect() {
|
||
// 判断全选按钮状态
|
||
let isNo = true
|
||
for(let i=0;i<this.selectList.length;i++) {
|
||
if(this.selectList[i].checked) {
|
||
isNo = false
|
||
break
|
||
}
|
||
}
|
||
|
||
if(!isNo) {
|
||
this.allChecked = true
|
||
}else{
|
||
this.allChecked = false
|
||
}
|
||
|
||
this.totalNum = 0
|
||
this.totalPrice = 0
|
||
|
||
this.selectList.forEach(c => {
|
||
if(c.checked) {
|
||
if(c.num > 0) {
|
||
this.totalNum = accAdd(this.totalNum,c.num)
|
||
this.totalPrice = accAdd(this.totalPrice,accMul(c.greenPrice,c.num))
|
||
}
|
||
}
|
||
})
|
||
if(this.totalPrice < 500 && this.totalNum > 0) {
|
||
this.totalPrice = accAdd(this.totalPrice,this.delivery)
|
||
this.discount = 1
|
||
this.delivery = 30
|
||
}else{
|
||
this.discount = 2
|
||
this.delivery = 0
|
||
}
|
||
},
|
||
|
||
clearClick() {
|
||
this.selectList = []
|
||
this.allChecked = false
|
||
this.totalNum = 0
|
||
this.totalPrice = 0
|
||
this.dataList.forEach(item => {
|
||
item.child.forEach(c => {
|
||
c.num = 0
|
||
c.checked = false
|
||
})
|
||
})
|
||
console.log('this.dataList',this.dataList)
|
||
},
|
||
|
||
popClose() {
|
||
let arr = []
|
||
this.selectList.forEach(c => {
|
||
this.dataList.forEach(item => {
|
||
item.child.forEach(j => {
|
||
if(c.id == j.id) {
|
||
j.checked = c.checked
|
||
j.num = c.num
|
||
if(!c.checked) {
|
||
j.num = 0
|
||
}
|
||
}
|
||
})
|
||
})
|
||
})
|
||
},
|
||
|
||
handleGoods() {
|
||
this.totalNum = 0
|
||
this.totalPrice = 0
|
||
this.selectList = []
|
||
this.dataList.forEach(item => {
|
||
item.child.forEach(c => {
|
||
if(c.num > 0) {
|
||
this.selectList.push(c)
|
||
this.totalNum = accAdd(this.totalNum,c.num)
|
||
this.totalPrice = accAdd(this.totalPrice,accMul(c.greenPrice,c.num))
|
||
}
|
||
})
|
||
})
|
||
if(this.totalPrice < 500 && this.totalNum > 0) {
|
||
this.totalPrice = accAdd(this.totalPrice,this.delivery)
|
||
this.discount = 1
|
||
this.delivery = 30
|
||
}else{
|
||
this.discount = 2
|
||
this.delivery = 0
|
||
}
|
||
},
|
||
|
||
previewImage(img) {
|
||
uni.previewImage({
|
||
urls: [img]
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.plants_main {
|
||
width: 100%;
|
||
background: #F2F6FA;
|
||
padding-top: 100rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.reservation_type {
|
||
width: 100%;
|
||
display: flex;
|
||
height: 90rpx;
|
||
margin-top: 20rpx;
|
||
.type_item_left {
|
||
bottom: -16rpx;
|
||
flex: 1;
|
||
background-color: #E8ECF2;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #4B5B68;
|
||
line-height: 72rpx;
|
||
height: 72rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.type_item_left:before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
border-top: 72rpx solid #E8ECF2;
|
||
border-right: 36rpx solid #ffffff;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.type_item_right {
|
||
bottom: -16rpx;
|
||
flex: 1;
|
||
background-color: #E8ECF2;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #4B5B68;
|
||
line-height: 72rpx;
|
||
height: 72rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.type_item_right:before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
border-top: 72rpx solid #E8ECF2;
|
||
border-left: 36rpx solid #ffffff;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.type_item_left_ac {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
background-color: #ffffff !important;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
color: #00ADA6 !important;
|
||
border-top-left-radius: 20rpx;
|
||
border-top-right-radius: 20rpx;
|
||
}
|
||
|
||
.type_item_right_ac {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
background-color: #ffffff !important;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
color: #00ADA6 !important;
|
||
border-top-left-radius: 20rpx;
|
||
border-top-right-radius: 20rpx;
|
||
}
|
||
}
|
||
.content_nav {
|
||
margin-top: 24rpx;
|
||
height: calc(100% - 140rpx);
|
||
// padding: 24rpx;
|
||
// box-sizing: border-box;
|
||
display: flex;
|
||
.left_nav {
|
||
width: 200rpx;
|
||
height: 100%;
|
||
background-color: #F2F6FA;
|
||
padding-bottom: 130rpx;
|
||
overflow-y: auto;
|
||
.left_nav_item {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
line-height: 96rpx;
|
||
}
|
||
.left_nav_item_ac {
|
||
background: #FFFFFF;
|
||
color: #00ADA6;
|
||
position: relative;
|
||
}
|
||
.left_nav_item_ac:before {
|
||
position: absolute;
|
||
content: '';
|
||
width: 12rpx;
|
||
height: 32rpx;
|
||
background: linear-gradient( 180deg, #5BCE9D 0%, #00ADA6 100%);
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border-top-right-radius: 100%;
|
||
border-bottom-right-radius: 100%;
|
||
}
|
||
}
|
||
.right_nav {
|
||
flex: 1;
|
||
background-color: #ffffff;
|
||
padding-bottom: 130rpx;
|
||
}
|
||
}
|
||
.right_nav_item {
|
||
display: flex;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
.goods_img {
|
||
width: 176rpx;
|
||
height: 176rpx;
|
||
border-radius: 20rpx;
|
||
display: block;
|
||
}
|
||
.goods_info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
.goods_name {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #0E1A24;
|
||
}
|
||
.goods_pice {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.goods_icon {
|
||
display: flex;
|
||
// width: 140rpx;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom_btn {
|
||
z-index: 999;
|
||
padding-left: 44rpx;
|
||
width: calc(100% - 48rpx);
|
||
height: 100rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 6rpx 16rpx 2rpx #E7EFF9;
|
||
position: fixed;
|
||
bottom: 20rpx;
|
||
border-radius: 50rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.info_nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
}
|
||
.btn_nav {
|
||
width: 216rpx;
|
||
height: 100%;
|
||
background: linear-gradient( 180deg, #5BCE9D 0%, #00ADA6 100%);
|
||
border-radius: 0rpx 50rpx 50rpx 0rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
/deep/.van-overlay {
|
||
z-index: 888 !important;
|
||
}
|
||
.project_nav {
|
||
height: 70vh;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
z-index: 990 !important;
|
||
.top {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #0E1A24;
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: #F6F9FF;
|
||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
.delete_icon {
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
// flex: 1;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
display: block;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
.center {
|
||
padding: 0 0 140rpx 24rpx;
|
||
box-sizing: border-box;
|
||
height: calc(100% - 90rpx);
|
||
overflow: auto;
|
||
}
|
||
}
|
||
.checkbox_nav {
|
||
display: flex;
|
||
}
|
||
.checkbox {
|
||
height: 40rpx;
|
||
width: 40rpx;
|
||
border: 1px solid #c8c9cc;
|
||
border-radius: 50%;
|
||
margin-right: 24rpx;
|
||
}
|
||
.checkbox_ac {
|
||
position: relative;
|
||
height: 40rpx;
|
||
width: 40rpx;
|
||
color: #fff;
|
||
background-color: #1989fa;
|
||
border-color: #1989fa;
|
||
}
|
||
.checkbox_ac:before {
|
||
position: absolute;
|
||
content: "\2713";
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
/deep/.van-checkbox__label {
|
||
flex: 1;
|
||
}
|
||
.z-paging_nav {
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.card_item {
|
||
width: 100%;
|
||
min-height: 202rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
margin-top: 24rpx;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
.order_num {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #0E1A24;
|
||
}
|
||
.order_info {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 28rpx;
|
||
.order_img {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow-x: auto;
|
||
.img_nav {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 24rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #0E1A24;
|
||
view {
|
||
text-align: center;
|
||
width: 170rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
image {
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
border-radius: 20rpx;
|
||
display: block;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.order_tips {
|
||
width: 120rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #4B5B68;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.order_time {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 28rpx;
|
||
.date {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #97A5B1;
|
||
}
|
||
.price {
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #0E1A24;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 隐藏滚动条 */
|
||
.order_img::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
/* 可选，如果需要滚动条轨道也隐藏 */
|
||
.order_img::-webkit-scrollbar-track {
|
||
background-color: transparent;
|
||
}
|
||
</style> |