851 lines
22 KiB
Vue
851 lines
22 KiB
Vue
<template>
|
|
<view>
|
|
<view class="storeInformation_middleNav">
|
|
<view class="storeInformation_middle_navBar">
|
|
<ul class="storeInformation_middle_navBar_ul">
|
|
<li :class="{'navActive':navActive === index}" v-for="(item,index) in dishNav"
|
|
@click="onDish(item,index)">{{item.name}}</li>
|
|
</ul>
|
|
</view>
|
|
</view>
|
|
<!-- 内容切换 -->
|
|
<!-- 全部状态 -->
|
|
<view v-if="navActive==0" ref="scrollContainer">
|
|
<view v-if="goodsList == ''" style="text-align: center;">
|
|
<text>暂无订单</text>
|
|
</view>
|
|
<view class="content" v-for="item in goodsList" :key="item">
|
|
<view class="content_all" @click="goTOdetail(item.id)">
|
|
<view style="display: flex;">
|
|
<view class="content_lef">
|
|
<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
|
|
</view>
|
|
<view class="content_zhonjia">
|
|
<view class="content_content">
|
|
{{item.businessVO.businessName}}
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod == 0">
|
|
堂食
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod == 1">
|
|
自提
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content_right" v-if="item.state == 0">
|
|
未支付
|
|
</view>
|
|
<view class="content_right" v-if="item.state == 1">
|
|
已完成
|
|
</view>
|
|
<view class="content_right" v-if="item.state == 2">
|
|
已退款
|
|
</view>
|
|
</view>
|
|
<view class="on_all" @click="goTOdetail(item.id)">
|
|
<view class="on_left">
|
|
<view>
|
|
<view class="on_left_top">
|
|
<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
|
|
<text>取餐号</text>
|
|
</view>
|
|
<view class="on_left_numbers" v-if="item.pickupCode == null">
|
|
无取餐号
|
|
</view>
|
|
<view class="on_left_number">
|
|
{{item.pickupCode}}
|
|
</view>
|
|
<!-- <view class="on_left_under">
|
|
排在第{{item.pickupCode}}位
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
|
|
<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
|
|
<view class="on_zhonjia_kuai">
|
|
<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
|
|
<view class="on_zhonjia_text">
|
|
{{s.dishesVO.dishesName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="on_right">
|
|
<view class="on_right_money">
|
|
￥{{item.totalPrice}}
|
|
</view>
|
|
<view class="on_right_number">
|
|
共{{item.orderDetailsVOList[0].quantity}}件
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="under" v-if="item.state===0">
|
|
<button class="under_btn" @click="goPay(item.id)">去支付</button>
|
|
<button class="under_btns" @click="goCancel(item.id)">取消订单</button>
|
|
</view>
|
|
<view class="under" v-if="item.state===1">
|
|
<button class="under_btn" @click="goToEvaluate(item.id)">去评价</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 未支付状态 -->
|
|
<view v-if="navActive==1">
|
|
<view v-if="goodsList == ''" style="text-align: center;">
|
|
<text>暂无订单</text>
|
|
</view>
|
|
<view class="content" v-for="item in goodsList" :key="item">
|
|
<view>
|
|
<view class="content_all" @click="goTOdetail(item.id)">
|
|
<view style="display: flex;">
|
|
<view class="content_lef">
|
|
<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
|
|
</view>
|
|
<view class="content_zhonjia">
|
|
<view class="content_content">
|
|
{{item.businessVO.businessName}}
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod ==0">
|
|
堂食
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod ==1">
|
|
自提
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content_right" v-if="item.state == 0">
|
|
未支付
|
|
</view>
|
|
</view>
|
|
<view class="on_all" @click="goTOdetail(item.id)">
|
|
<view class="on_left">
|
|
<view>
|
|
<view class="on_left_top">
|
|
<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
|
|
<text>取餐号</text>
|
|
</view>
|
|
<view class="on_left_numbers" v-if="item.pickupCode == null">
|
|
无取餐号
|
|
</view>
|
|
<view class="on_left_number">
|
|
{{item.pickupCode}}
|
|
</view>
|
|
<!-- <view class="on_left_under">
|
|
排在第{{item.pickupCode}}位
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
|
|
<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
|
|
<view class="on_zhonjia_kuai">
|
|
<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
|
|
<view class="on_zhonjia_text">
|
|
{{s.dishesVO.dishesName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="on_right">
|
|
<view class="on_right_money">
|
|
￥{{item.totalPrice}}
|
|
</view>
|
|
<view class="on_right_number">
|
|
共{{item.orderDetailsVOList[0].quantity}}件
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="under" v-if="item.state===0">
|
|
<button class="under_btn" @click="goPay(item.id)">去支付</button>
|
|
<button class="under_btns" @click="goCancel(item.id)">取消订单</button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<!-- 已完成状态 -->
|
|
<view v-if="navActive==2">
|
|
<view v-if="goodsList == ''" style="text-align: center;">
|
|
<text>暂无订单</text>
|
|
</view>
|
|
<view class="content" v-for="item in goodsList" :key="item">
|
|
<view class="content_all" @click="goTOdetail(item.id)">
|
|
<view style="display: flex;">
|
|
<view class="content_lef">
|
|
<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
|
|
</view>
|
|
<view class="content_zhonjia">
|
|
<view class="content_content">
|
|
{{item.businessVO.businessName}}
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod ==0">
|
|
堂食
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod ==1">
|
|
自提
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content_right" v-if="item.state == 1">
|
|
已完成
|
|
</view>
|
|
</view>
|
|
<view class="on_all" @click="goTOdetail(item.id)">
|
|
<view class="on_left">
|
|
<view>
|
|
<view class="on_left_top">
|
|
<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
|
|
<text>取餐号</text>
|
|
</view>
|
|
<view class="on_left_number">
|
|
{{item.pickupCode}}
|
|
</view>
|
|
<!-- <view class="on_left_under">
|
|
排在第{{item.pickupCode}}位
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
|
|
<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
|
|
<view class="on_zhonjia_kuai">
|
|
<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
|
|
<view class="on_zhonjia_text">
|
|
{{s.dishesVO.dishesName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="on_right">
|
|
<view class="on_right_money">
|
|
￥{{item.totalPrice}}
|
|
</view>
|
|
<view class="on_right_number">
|
|
共{{item.orderDetailsVOList[0].quantity}}件
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="under" v-if="item.state===1">
|
|
<button class="under_btn" @click="goToEvaluate(item.id)">去评价</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 已取消的状态 -->
|
|
<view v-if="navActive==3">
|
|
<view v-if="goodsList == ''" style="text-align: center;">
|
|
<text>暂无订单</text>
|
|
</view>
|
|
<view class="content" v-for="item in goodsList" :key="item">
|
|
<view class="content_all" @click="goTOdetail(item.id)">
|
|
<view style="display: flex;">
|
|
<view class="content_lef">
|
|
<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
|
|
</view>
|
|
<view class="content_zhonjia">
|
|
<view class="content_content">
|
|
{{item.businessVO.businessName}}
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod == 0">
|
|
堂食
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod ==1">
|
|
自提
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content_right" v-if="item.state == 3">
|
|
已取消
|
|
</view>
|
|
</view>
|
|
<view class="on_all" @click="goTOdetail(item.id)">
|
|
<view class="on_left">
|
|
<view>
|
|
<view class="on_left_top">
|
|
<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
|
|
<text>取餐号</text>
|
|
</view>
|
|
<view class="on_left_number">
|
|
{{item.pickupCode}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
|
|
<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
|
|
<view class="on_zhonjia_kuai">
|
|
<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
|
|
<view class="on_zhonjia_text">
|
|
{{s.dishesVO.dishesName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="on_right">
|
|
<view class="on_right_money">
|
|
￥{{item.totalPrice}}
|
|
</view>
|
|
<view class="on_right_number">
|
|
共{{item.orderDetailsVOList[0].quantity}}件
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 退款状态 -->
|
|
<view v-if="navActive==4">
|
|
<view v-if="goodsList == ''" style="text-align: center;">
|
|
<text>暂无订单</text>
|
|
</view>
|
|
<view class="content" v-for="item in goodsList" :key="item">
|
|
<view class="content_all" @click="goTOdetail(item.id)">
|
|
<view style="display: flex;">
|
|
<view class="content_lef">
|
|
<img :src="item.businessVO.businessAvatar" class="content_biaoti_img">
|
|
</view>
|
|
<view class="content_zhonjia">
|
|
<view class="content_content">
|
|
{{item.businessVO.businessName}}
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod ==0">
|
|
堂食
|
|
</view>
|
|
<view class="content-tag" v-if="item.pickupMethod ==1">
|
|
自提
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content_right" v-if="item.state == 2">
|
|
已退款
|
|
</view>
|
|
</view>
|
|
<view class="on_all" @click="goTOdetail(item.id)">
|
|
<view class="on_left">
|
|
<view>
|
|
<view class="on_left_top">
|
|
<uni-icons type="notification-filled" size="21" color="#2493F1"></uni-icons>
|
|
<text>取餐号</text>
|
|
</view>
|
|
<view class="on_left_number">
|
|
{{item.pickupCode}}
|
|
</view>
|
|
<!-- <view class="on_left_under">
|
|
排在第{{item.pickupCode}}位
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
|
|
<view class="on_zhonjia" v-for="s in item.orderDetailsVOList" :key="s">
|
|
<view class="on_zhonjia_kuai">
|
|
<img :src="s.dishesVO.dishesImage" class="on_zhonjia_img">
|
|
<view class="on_zhonjia_text">
|
|
{{s.dishesVO.dishesName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="on_right">
|
|
<view class="on_right_money">
|
|
￥{{item.totalPrice}}
|
|
</view>
|
|
<view class="on_right_number">
|
|
共{{item.orderDetailsVOList[0].quantity}}件
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted,ref } from 'vue'
|
|
import { apiImageUrl } from '../../api/api';
|
|
import { onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app'
|
|
import { number } from 'echarts';
|
|
onMounted(() => {
|
|
getGoodsList(currentPage.value, '')
|
|
console.log(currentPage.value, "生命周期的")
|
|
wx.removeStorageSync('businessId')
|
|
// if(!isPaid.value){
|
|
// staratCountDown()
|
|
// }
|
|
})
|
|
const navActive = ref(0)
|
|
const orderId = ref()
|
|
// 下拉刷新
|
|
onPullDownRefresh(()=>{
|
|
currentPage.value = 1;
|
|
navActive.value = 0
|
|
getGoodsList(currentPage.value, '')
|
|
uni.stopPullDownRefresh();//处理完逻辑停止刷新
|
|
})
|
|
// 导航
|
|
const dishNav : any = ref([
|
|
{ id: 1, name: '全部' },
|
|
{ id: 2, name: '未支付' },
|
|
{ id: 3, name: '已完成' },
|
|
{ id: 4, name: '已取消' },
|
|
{ id: 5, name: '退款' }
|
|
])
|
|
const states : any = ref(['', 0, 1, 3, 2])
|
|
/**
|
|
*
|
|
* 全部 待支付 餐品完成 导航切换
|
|
*/
|
|
let n = 10
|
|
const goodsList = ref([])
|
|
const currentPage = ref(1)
|
|
const onDish = (res : any, index : number) => {
|
|
navActive.value = index
|
|
currentPage.value = 1
|
|
getGoodsList(currentPage.value, states.value[navActive.value])
|
|
}
|
|
const getGoodsList = (page : number, state : any) => {
|
|
console.log(state)
|
|
uni.request({
|
|
url: apiImageUrl + 'orders/my/page',
|
|
method: 'POST',
|
|
header: {
|
|
// 读取JSESSIONID
|
|
'cookie': wx.getStorageSync("cookie")
|
|
},
|
|
data: {
|
|
current: page,
|
|
pageSize: 10,
|
|
state: state,
|
|
sortField: "createTime",//倒序
|
|
sortOrder: "descend"//倒序
|
|
},
|
|
success: (res : any) => {
|
|
console.log(res.data.data.records, 111111111)
|
|
if (page === 1) {
|
|
goodsList.value = res.data.data?.records
|
|
} else {
|
|
goodsList.value = goodsList.value.concat(res.data.data.records);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
// 监听页面滚动到底部事件，触发加载更多数据
|
|
onReachBottom(() => {
|
|
n = n + 1
|
|
currentPage.value += 1; // 加载下一页
|
|
getGoodsList(currentPage.value, states.value[navActive.value]);
|
|
console.log(currentPage.value, "底部触底的")
|
|
});
|
|
// 支付的逻辑
|
|
const appid = ref()
|
|
const nonceStr = ref()
|
|
const packageVal = ref()
|
|
const paySign = ref()
|
|
const signType = ref()
|
|
const timeStamp = ref()
|
|
|
|
// const countdown = ref(15*60)
|
|
// const timer = ref(null)
|
|
// const isPaid = ref(false)
|
|
const goPay = (s : number) => {
|
|
console.log(s, 2222);
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否支付订单',
|
|
success: (res : any) => {
|
|
console.log(res, "成功之后的信息")
|
|
if (res.confirm) {
|
|
uni.request({
|
|
url: apiImageUrl + 'wechat/payment/create',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
},
|
|
data: {
|
|
id: s
|
|
},
|
|
success: (res : any) => {
|
|
console.log(res, "0000000")
|
|
if (res.data.code === 1) {
|
|
appid.value = res.data.data.appId
|
|
nonceStr.value = res.data.data.nonceStr
|
|
packageVal.value = res.data.data.packageVal
|
|
paySign.value = res.data.data.paySign
|
|
signType.value = res.data.data.signType
|
|
timeStamp.value = res.data.data.timeStamp
|
|
wx.requestPayment({
|
|
timeStamp: timeStamp.value,
|
|
nonceStr: nonceStr.value,
|
|
package: packageVal.value,
|
|
signType: signType.value,
|
|
paySign: paySign.value,
|
|
success: function (res) {
|
|
// isPaid.value = true;
|
|
uni.navigateTo({
|
|
url: `/pages/waitOrder/waitOrder?id=${orderId.value}`
|
|
})
|
|
},
|
|
fail: function (err) {
|
|
console.log(err)
|
|
uni.showToast({
|
|
title: '支付失败'
|
|
})
|
|
}
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '订单已超时，无法支付'
|
|
})
|
|
}
|
|
},
|
|
fail: (res : any) => {
|
|
console.log(res, 11111111111111)
|
|
}
|
|
})
|
|
} else if (res.cancel) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '支付失败'
|
|
})
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
// const staratCountDown = ()=>{
|
|
// timer.value = setInterval(()=>{
|
|
// countdown.value -= 1
|
|
// if(countdown.value <= 0){
|
|
// clearInterval(timer.value)
|
|
// const goCancels = (id) => {
|
|
// uni.request({
|
|
// url: apiImageUrl + 'orders/cancel',
|
|
// method: 'POST',
|
|
// header: {
|
|
// 'cookie': wx.getStorageSync('cookie')
|
|
// },
|
|
// data: {
|
|
// id: id
|
|
// },
|
|
// success: (res : any) => {
|
|
// console.log(res, "取消订单的res")
|
|
// currentPage.value = 1
|
|
// navActive.value = 3
|
|
// getGoodsList(currentPage.value, 3);
|
|
// },
|
|
// fail: (res : any) => {
|
|
// console.log(res, 11111111111111)
|
|
// }
|
|
// })
|
|
// }
|
|
// }
|
|
// },1000)
|
|
// }
|
|
// 取消订单
|
|
const goCancel = (id) => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否取消订单',
|
|
success: (res : any) => {
|
|
console.log(res, "成功之后的信息")
|
|
if (res.confirm) {
|
|
uni.request({
|
|
url: apiImageUrl + 'orders/cancel',
|
|
method: 'POST',
|
|
header: {
|
|
'cookie': wx.getStorageSync('cookie')
|
|
},
|
|
data: {
|
|
id: id
|
|
},
|
|
success: (res : any) => {
|
|
console.log(res, "取消订单的res")
|
|
currentPage.value = 1
|
|
navActive.value = 3
|
|
getGoodsList(currentPage.value, 3);
|
|
},
|
|
fail: (res : any) => {
|
|
console.log(res, 11111111111111)
|
|
}
|
|
})
|
|
} else if (res.cancel) {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '请去支付'
|
|
})
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
// 点击跳转到订单详情
|
|
const goTOdetail = (id : any) => {
|
|
uni.navigateTo({
|
|
url: `/pages/waitOrder/waitOrder?id=${id}`
|
|
})
|
|
}
|
|
// 点击跳转的评价页面
|
|
const goToEvaluate =(id:number) =>{
|
|
console.log(id)
|
|
uni.navigateTo({
|
|
url:`/subpkg/goodsEvaluate/goodsEvaluate?id=${id}`
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F4F4F4;
|
|
}
|
|
|
|
.changenav {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
display: flex;
|
|
background-color: #fff;
|
|
|
|
.text {
|
|
width: 300rpx;
|
|
height: 70rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 75rpx;
|
|
|
|
text {
|
|
padding: 0 0 10rpx 0;
|
|
border-bottom: 6rpx solid #2493F1;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.content {
|
|
background-color: #fff;
|
|
// background-color: salmon;
|
|
width: 700rpx;
|
|
margin: 30rpx auto;
|
|
border-radius: 20rpx;
|
|
padding: 1rpx 0 30rpx 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.content_all {
|
|
width: 700rpx;
|
|
height: 120rpx;
|
|
// margin: 40rpx 0 0 50rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
// background-color: #2493F1;
|
|
.content_lef {
|
|
margin-left: 20rpx;
|
|
width: 100rpx;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// background-color: darkcyan;
|
|
}
|
|
|
|
.content_biaoti_img {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
|
|
}
|
|
|
|
.content_zhonjia {
|
|
width: 200rpx;
|
|
height: 120rpx;
|
|
margin: 7rpx 0 0 6rpx;
|
|
|
|
.content_content {
|
|
margin-top: 10rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.content-tag {
|
|
width: 100rpx;
|
|
height: 32rpx;
|
|
margin-top: 10rpx;
|
|
background-color: #F0F8FF;
|
|
font-size: 20rpx;
|
|
border: 1rpx solid #2493F1;
|
|
border-radius: 4rpx;
|
|
text-align: center;
|
|
color: #2493F1;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.content_right {
|
|
// background-color: deeppink;
|
|
width: 124rpx;
|
|
height: 100rpx;
|
|
font-size: 28rpx;
|
|
color: #2493F1;
|
|
font-weight: 500;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
line-height: 100rpx;
|
|
margin-left: 100rpx;
|
|
}
|
|
}
|
|
|
|
.on_all {
|
|
display: flex;
|
|
border-top: 1rpx solid #F4F4F4;
|
|
}
|
|
|
|
.on_left {
|
|
width: 200rpx;
|
|
height: 150rpx;
|
|
margin: 30rpx 0 0 40rpx;
|
|
border: 1rpx solid #2493F1;
|
|
border-radius: 10rpx;
|
|
|
|
.on_left_top {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
|
|
text {
|
|
height: 40rpx;
|
|
font-size: 26rpx;
|
|
color: #2493F1;
|
|
font-weight: 600;
|
|
line-height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.on_left_number {
|
|
font-size: 52rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.on_left_numbers {
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.on_left_under {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.scroll {
|
|
white-space: nowrap;
|
|
width: 50%;
|
|
height: 220rpx;
|
|
}
|
|
|
|
.on_zhonjia {
|
|
display: flex;
|
|
margin: 30rpx 0 0 20rpx;
|
|
display: inline-flex;
|
|
/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.on_zhonjia_kuai {
|
|
width: 150upx;
|
|
height: 150upx;
|
|
margin-right: 10rpx;
|
|
|
|
.on_zhonjia_img {
|
|
width: 150upx;
|
|
height: 150upx;
|
|
border-radius: 8upx;
|
|
}
|
|
|
|
.on_zhonjia_text {
|
|
font-size: 24rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
/* 在文本溢出时显示省略号 */
|
|
}
|
|
}
|
|
}
|
|
|
|
.on_right {
|
|
width: 200rpx;
|
|
height: 150rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.on_right_money {
|
|
text-align: center;
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.on_right_number {
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
align-content: center;
|
|
}
|
|
}
|
|
|
|
.under {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.under_btn {
|
|
width: 180rpx;
|
|
height: 56rpx;
|
|
background-color: #2493F1;
|
|
font-size: 28rpx;
|
|
border-radius: 28rpx;
|
|
color: #fff;
|
|
float: right;
|
|
line-height: 56rpx;
|
|
margin: 4rpx 6rpx 0 0;
|
|
}
|
|
|
|
.under_btns {
|
|
width: 180rpx;
|
|
height: 56rpx;
|
|
background-color: #bdb9b8;
|
|
font-size: 28rpx;
|
|
border-radius: 28rpx;
|
|
color: #fff;
|
|
float: right;
|
|
line-height: 56rpx;
|
|
margin: 4rpx 10rpx 0 0;
|
|
}
|
|
|
|
.navActive {
|
|
border-bottom: 4px solid rgba(37, 136, 255, 1);
|
|
}
|
|
|
|
.storeInformation_middleNav {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: #fff;
|
|
height: 80rpx;
|
|
width: 760rpx;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
|
|
.storeInformation_middle_navBar_ul {
|
|
width: 760rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
// gap: 60px;
|
|
|
|
.li {
|
|
width: 150rpx;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.li:hover {
|
|
width: 150rpx;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
}
|
|
}
|
|
</style> |