1048 lines
21 KiB
Vue
1048 lines
21 KiB
Vue
<script setup lang="ts">
|
||
import sort from "./sort.vue"
|
||
import Shopdetils from "./Shopdetails.vue"
|
||
import { apiImageUrl } from '../../API/api'
|
||
import { ref, onMounted, computed, onUnmounted, watch, nextTick } from 'vue'
|
||
import { url } from "inspector";
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
|
||
|
||
const currentIndex = ref(0);
|
||
const tabs = ref([
|
||
{ name: '点餐' },
|
||
{ name: '评价' },
|
||
{ name: '商家信息' }
|
||
]);
|
||
|
||
|
||
const sortKey = ref(0);
|
||
|
||
const switchTab = (index) => {
|
||
currentIndex.value = index;
|
||
// 当切换到点餐时刷新sort组件
|
||
if (index === 0) {
|
||
sortKey.value++; // 每次切换时改变key值
|
||
}
|
||
};
|
||
|
||
//评论
|
||
const historyList = ref([])
|
||
|
||
const talk = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/talk/talk'
|
||
})
|
||
}
|
||
|
||
const quantity = ref(1);
|
||
|
||
const showRight = ref(null);
|
||
|
||
const showDrawer = () => {
|
||
if (showRight.value) {
|
||
showRight.value.open();
|
||
}
|
||
};
|
||
|
||
const closeDrawer = () => {
|
||
if (showRight.value) {
|
||
showRight.value.close();
|
||
}
|
||
};
|
||
|
||
|
||
const isLiked = ref(false);
|
||
const collectState=()=>{
|
||
const businessItem=uni.getStorageSync("businessItem")
|
||
uni.request({
|
||
url:apiImageUrl+'/api/business/my/getById',
|
||
method:'GET',
|
||
data:{
|
||
businessId:businessItem
|
||
},
|
||
success(res) {
|
||
// console.log(res.data.data.isCollected);
|
||
// if(res.data.data.isCollected===true){
|
||
// const likeStarImg='../../static/small/starSelected.png'
|
||
// isLiked.value = false;
|
||
// }else if(res.data.data.isCollected===false){
|
||
// const likeStarImg='../../static/small/star.png'
|
||
// isLiked.value = true;
|
||
// }
|
||
isLiked.value = Boolean(res.data.data.isCollected);
|
||
|
||
|
||
},
|
||
fail(error) {
|
||
console.log(error);
|
||
}
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
collectState()
|
||
});
|
||
|
||
const toggleLike = () => {
|
||
const originalState = isLiked.value;
|
||
// 立即切换状态提供即时反馈
|
||
isLiked.value = !originalState;
|
||
|
||
const action = originalState ? 'delete' : 'add';
|
||
|
||
uni.request({
|
||
url: `${apiImageUrl}/api/collect/${action}`,
|
||
method: 'POST',
|
||
data: {
|
||
businessId: uni.getStorageSync('businessItem') || '0'
|
||
},
|
||
header: {
|
||
'cookie': uni.getStorageSync("cookie") || ''
|
||
},
|
||
success(res) {
|
||
if (res.data.code !== 200) {
|
||
console.log(res);
|
||
// 操作失败时恢复原始状态
|
||
// isLiked.value = originalState;
|
||
// uni.showToast({
|
||
// title: res.data.msg || '操作失败',
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// });
|
||
// return;
|
||
}
|
||
uni.showToast({
|
||
title: originalState ? '已取消收藏' : '收藏成功',
|
||
duration: 2000
|
||
});
|
||
},
|
||
fail() {
|
||
// 请求失败时恢复原始状态
|
||
isLiked.value = originalState;
|
||
uni.showToast({
|
||
title: '网络错误，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
|
||
const cartItems = ref([]);
|
||
|
||
|
||
const updateCart = (newCartItems) => {
|
||
cartItems.value = newCartItems; // 更新购物车数据
|
||
console.log('更新后的购物车:', cartItems.value);
|
||
// cartItems.value = uni.getStorageSync('cartItems') || [];
|
||
uni.setStorageSync('cartItems', newCartItems);
|
||
};
|
||
|
||
onMounted(() => {
|
||
cartItems.value = uni.getStorageSync('cartItems') || [];
|
||
});
|
||
|
||
const deleteItem = (index) => {
|
||
cartItems.value.splice(index, 1);
|
||
uni.setStorageSync('cartItems', cartItems.value);
|
||
};
|
||
onMounted(() => {
|
||
cartItems.value = uni.getStorageSync('cartItems') || [];
|
||
});
|
||
|
||
const incrementQuantity = (index) => {
|
||
if (cartItems.value[index].quantity < 9) {
|
||
cartItems.value[index].quantity++;
|
||
}
|
||
};
|
||
|
||
const decrementQuantity = (index) => {
|
||
if (cartItems.value[index].quantity > 1) {
|
||
cartItems.value[index].quantity--;
|
||
}
|
||
};
|
||
|
||
// 计算金额
|
||
const totalAmount = computed(() => {
|
||
return cartItems.value.reduce((total, item) => {
|
||
return total + (item.dishesPrice * item.quantity);
|
||
}, 0);
|
||
});
|
||
|
||
|
||
const account = () => {
|
||
let businessid = uni.getStorageSync('businessItem') || '1830063677349658625';
|
||
const orderDetails = cartItems.value.map(item => ({
|
||
attributeNames: "小份",
|
||
dishesId: item.id,
|
||
quantity: item.quantity
|
||
}));
|
||
|
||
const data = {
|
||
businessId: String(businessid),
|
||
notes: "",
|
||
orderDetailAddRequest: orderDetails,
|
||
payMethod: 0,
|
||
phone: "15946398466",
|
||
pickupMethod: 0,
|
||
pickupTime: "",
|
||
totalPrice: totalAmount.value,
|
||
userName: "沙箱账号"
|
||
}
|
||
data.businessId = String(data.businessId)
|
||
uni.request({
|
||
url: apiImageUrl + '/api/orders/add',
|
||
method: 'POST',
|
||
data: data,
|
||
header: {
|
||
'cookie': uni.getStorageSync("cookie") || ''
|
||
},
|
||
success(res) {
|
||
console.log(res);
|
||
console.log('Success:', res.data.data);
|
||
const orderId = res.data.data;
|
||
//createPayment(orderId);
|
||
uni.setStorageSync("notPay",orderId);
|
||
uni.navigateTo({
|
||
url: '/pages/goToPay/goToPay'
|
||
});
|
||
},
|
||
fail() {
|
||
console.error('Error:', '请求失败');
|
||
}
|
||
});
|
||
};
|
||
|
||
|
||
const createPayment = (orderId) => {
|
||
console.log('Total amount to pay:', totalAmount.value);
|
||
my.request({
|
||
url: apiImageUrl + '/api/Alipay/payment/create',
|
||
method: 'GET',
|
||
data: {
|
||
id: orderId
|
||
},
|
||
header: {
|
||
'Content-Type': 'application/json',
|
||
'cookie': uni.getStorageSync("cookie") || ''
|
||
},
|
||
success: function (result) {
|
||
console.log(result);
|
||
console.log(result.data.data);
|
||
uni.setStorageSync("tradeNo",result.data.data)
|
||
my.tradePay({
|
||
tradeNO: result.data.data,
|
||
success: (res) => {
|
||
console.log('成功调用')
|
||
console.log(res);
|
||
console.log(res.resultCode);
|
||
if(res.resultCode==6001){
|
||
console.log("我是6001");
|
||
uni.setStorageSync("notPay",orderId);
|
||
uni.navigateTo({
|
||
url: '/pages/goToPay/goToPay'
|
||
});
|
||
}
|
||
else if(res.resultCode==9000){
|
||
uni.setStorageSync('orderId', orderId);
|
||
uni.navigateTo({
|
||
url: '/pages/testFive/testFive'
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
fail: (res) => {
|
||
my.alert({
|
||
content: JSON.stringify(res),
|
||
})
|
||
console.log('失败');
|
||
console.log(res);
|
||
}
|
||
|
||
});
|
||
|
||
|
||
}
|
||
})
|
||
};
|
||
|
||
const merchantId = ref();
|
||
|
||
const getMerchantIdFromUrl = () => {
|
||
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1];
|
||
|
||
|
||
console.log('Current page options:', currentPage.options);
|
||
if (currentPage && currentPage.options && currentPage.options.merchantId) {
|
||
merchantId.value = currentPage.options.merchantId;
|
||
console.log(`Merchant ID received: ${merchantId.value}`);
|
||
} else {
|
||
console.error('Could not retrieve merchantId from URL.');
|
||
}
|
||
};
|
||
|
||
|
||
onMounted(() => {
|
||
getMerchantIdFromUrl()
|
||
});
|
||
|
||
watch(merchantId, (newValue) => {
|
||
uni.$emit('merchantIdChanged', newValue);
|
||
});
|
||
|
||
|
||
|
||
/* shopdetail */
|
||
const businessMessage=ref(uni.getStorageSync("Mybusiness"))
|
||
console.log(businessMessage.value);
|
||
|
||
// 评论
|
||
const review=()=>{
|
||
const businessId=uni.getStorageSync("businessItem")
|
||
uni.request({
|
||
url:apiImageUrl+'/api/level/list/business',
|
||
method:'POST',
|
||
data:{
|
||
id:businessId
|
||
},
|
||
success(res) {
|
||
console.log(res.data.data);
|
||
historyList.value=res.data.data
|
||
},
|
||
fail() {
|
||
console.log("失败");
|
||
}
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
review();
|
||
});
|
||
// 公告
|
||
// 定义响应式数据
|
||
const contentDetail = ref('');
|
||
|
||
// 定义异步请求的方法
|
||
const fetchContentItem = async () => {
|
||
const businessId = uni.getStorageSync("businessItem");
|
||
try {
|
||
const res = await uni.request({
|
||
url: apiImageUrl+'/api/businessInfo/list',
|
||
method: 'POST',
|
||
data: {
|
||
id: businessId,
|
||
}
|
||
});
|
||
console.log(res.data.data.content);
|
||
contentDetail.value = res.data.data.content; // 更新响应式变量
|
||
} catch (err) {
|
||
console.error(err);
|
||
}
|
||
};
|
||
|
||
// 页面加载时调用该方法
|
||
onMounted(() => {
|
||
fetchContentItem();
|
||
});
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<scroll-view scroll-y class="preview">
|
||
<!-- 商户轮播图 -->
|
||
<view class="preview">
|
||
<swiper :circular="true" :autoplay="true" :interval="3000" indicator-dots>
|
||
<swiper-item>
|
||
<image mode="aspectFill" class="image"
|
||
src="https://ts1.cn.mm.bing.net/th/id/R-C.8f2db93b542db8adf6c850762c1cce4d?rik=erpuvqVy64IJzQ&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50044%2f9286.jpg_wh860.jpg&ehk=dnizwrPBuCaHnaxfih%2fryK7p%2fXZMbmolNORKknXvL%2bI%3d&risl=&pid=ImgRaw&r=0">
|
||
</image>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<image mode="aspectFill" class="image"
|
||
src="https://img95.699pic.com/photo/50127/2949.jpg_wh860.jpg"></image>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<image mode="aspectFill" class="image"
|
||
src="https://img95.699pic.com/photo/50070/9636.jpg_wh860.jpg"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- 店铺标题-->
|
||
<view class="priceTitle">
|
||
<view class="meta">
|
||
<text class="symbol">店铺详情</text>
|
||
</view>
|
||
</view>
|
||
<!-- 店铺公告 -->
|
||
<view class="notice">
|
||
<uni-notice-bar show-icon scrollable
|
||
:text="contentDetail" />
|
||
</view>
|
||
<!-- 商品详情 -->
|
||
<view class="tab-menu">
|
||
<view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{active: currentIndex === index}"
|
||
@click="switchTab(index)">
|
||
{{ tab.name }}
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<block v-if="currentIndex === 0">
|
||
<sort
|
||
:key="sortKey"
|
||
@update-cart="updateCart"
|
||
:merchant-id="merchantId"
|
||
:active-tab="currentIndex"
|
||
></sort>
|
||
</block>
|
||
<block v-if="currentIndex === 1">
|
||
<view class="container">
|
||
<view class="history-list">
|
||
<view class="history-item" v-for="(item, index) in historyList" :key="index">
|
||
<view class="history-info">
|
||
<image class="history-img" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.jHUH4s7TQ48X_B-1iozuJgHaHa?rs=1&pid=ImgDetMain"></image>
|
||
<view class="nameTime">
|
||
<text class="history-title">匿名用户</text>
|
||
<text class="time">{{ item.createTime.substr(0, 19).replace('T', ' ') }}</text>
|
||
</view>
|
||
<view class="star">
|
||
<text class="history-sale">{{ item.rating }}</text>
|
||
<uni-rate :readonly="true" :value="item.rating" active-color="#13c2c2" :is-fill="false"
|
||
color="#13c2c2"/>
|
||
</view>
|
||
</view>
|
||
<view class="extend">
|
||
<text @click="reviewUser(item)">{{ item.review }}</text>
|
||
<template v-if="item.businessReview && item.businessReview.trim() !== ''">
|
||
<view class="businessReviewTitle">
|
||
商家回复
|
||
</view>
|
||
<text class="businessReview">{{ item.businessReview }}</text>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-if="currentIndex === 2">
|
||
<view class="aboutMessage1">
|
||
<view class="title1">店铺信息</view>
|
||
<view class="message1">
|
||
<view class="messageItem1">地址：{{businessMessage.address}}</view>
|
||
<view class="messageItem1">营业时间：早7：00-晚20：30</view>
|
||
<view class="messageItem1">联系电话：{{businessMessage.businessPhone}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="title1">图片详情</view>
|
||
<view class="aboutImg1">
|
||
<view class="imgLeft1">
|
||
<image :src="businessMessage.businessAvatar"></image>
|
||
<image src="https://ts1.cn.mm.bing.net/th/id/R-C.68978afc71576a94a1d50ef5016dbd9e?rik=cDDsy5SLmDvDHQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50075%2f0779.jpg_wh1200.jpg&ehk=FG4Hd5S711LYcuLBIcDagQyk4KhcH1oIfqyk1MWUOyg%3d&risl=&pid=ImgRaw&r=0" class="img1"></image>
|
||
</view>
|
||
<view class="imgRight1">
|
||
<image src="https://bpic.588ku.com/back_origin_min_pic/21/03/30/251617b5c1ad3b0c7ae62fb8b51dfbbd.jpg" class="img1"></image>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 用户操作 -->
|
||
<view class="toolbar">
|
||
<view class="icons">
|
||
<button class="icons-button" @click="toggleLike">
|
||
<text class="icon-heart">
|
||
<image :src="isLiked ? '../../static/small/starSelected.png' : '../../static/small/star.png'"
|
||
style="width: 20px;height: 20px;" />
|
||
</text>
|
||
{{ isLiked ? '已收藏' : '收藏店铺' }}
|
||
</button>
|
||
|
||
|
||
<button class="icons-button" open-type="contact" @click="talk">
|
||
<text class="icon-handset">
|
||
<img src="../../static/small/service.png" style="width: 20px;height: 20px;" />
|
||
</text>
|
||
联系商家
|
||
</button>
|
||
</view>
|
||
<view class="buttons">
|
||
<view class="addcart" @click="showDrawer('showRight')">
|
||
<p>购物车</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--购物车详情-->
|
||
<view class="example-body">
|
||
<uni-drawer ref="showRight" mode="left" :mask-click="true" @change="change($event,'showRight')">
|
||
<view class="scroll-view">
|
||
<scroll-view class="scroll-view-box" scroll-y="true">
|
||
<view class="info-content" v-for="(item,index) in cartItems" :key="index">
|
||
<view class="card">
|
||
<view class="containerShow">
|
||
<view class="img">
|
||
<image :src="item.dishesImage" class="imageItem"></image>
|
||
</view>
|
||
<view class="delete-button">
|
||
<image src="../../static/small/cha.png" @click="deleteItem(index)" alt="Delete"
|
||
style="width: 15px;height: 15px;" />
|
||
</view>
|
||
<view class="message">
|
||
<view class="titleCard">{{item.dishesName}}</view>
|
||
<view class="moneCard">￥{{item.dishesPrice}}</view>
|
||
<view class="quantity-selector">
|
||
<view class="jia" @click="decrementQuantity(index)">-</view>
|
||
<text class="quantity-value">{{ item.quantity }}</text>
|
||
<view class="jian" @click="incrementQuantity(index)">+</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button type="primary" class="sum" @click="account">
|
||
<text>立即结算￥{{ totalAmount }}</text>
|
||
</button>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-drawer>
|
||
</view>
|
||
</template>
|
||
<style lang="scss">
|
||
.priceTitle {
|
||
width: 100%;
|
||
height: 50px;
|
||
background-color: #4095e5;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
padding-left: 5px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
line-height: 60rpx;
|
||
margin: 0 10rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
|
||
position: relative;
|
||
z-index: 9;
|
||
|
||
.item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #262626;
|
||
}
|
||
|
||
.cursor {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 18%;
|
||
height: 6rpx;
|
||
padding: 0 50rpx;
|
||
background-color: #4095e5;
|
||
transition: all 0.4s;
|
||
}
|
||
}
|
||
|
||
.preview {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.preview image {
|
||
width: 100%;
|
||
}
|
||
|
||
page {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.viewport {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search {
|
||
padding: 0 30rpx 20rpx;
|
||
background-color: #fff;
|
||
|
||
.input {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 64rpx;
|
||
padding-left: 26rpx;
|
||
color: #8b8b8b;
|
||
font-size: 28rpx;
|
||
border-radius: 32rpx;
|
||
background-color: #f3f4f4;
|
||
}
|
||
}
|
||
|
||
.icon-search {
|
||
&::before {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.categories {
|
||
flex: 1;
|
||
min-height: 400rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.primary {
|
||
overflow: hidden;
|
||
width: 180rpx;
|
||
flex: none;
|
||
background-color: #f6f6f6;
|
||
|
||
.item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 96rpx;
|
||
font-size: 26rpx;
|
||
color: #595c63;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 42rpx;
|
||
bottom: 0;
|
||
width: 96rpx;
|
||
border-top: 1rpx solid #e3e4e7;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background-color: #fff;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 8rpx;
|
||
height: 100%;
|
||
background-color: #ed0a3f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content{
|
||
height: 100vh;
|
||
margin-bottom: 40px;
|
||
}
|
||
.primary .item:last-child::after,
|
||
.primary .active::after {
|
||
display: none;
|
||
}
|
||
|
||
.secondary {
|
||
background-color: #fff;
|
||
|
||
.carousel {
|
||
height: 200rpx;
|
||
margin: 0 30rpx 20rpx;
|
||
border-radius: 4rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.panel {
|
||
margin: 0 30rpx 0rpx;
|
||
}
|
||
|
||
.title {
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
border-bottom: 1rpx solid #f7f7f8;
|
||
|
||
.more {
|
||
float: right;
|
||
padding-left: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.more {
|
||
&::after {
|
||
font-family: 'erabbit' !important;
|
||
content: '\e70c';
|
||
}
|
||
}
|
||
|
||
.section {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 20rpx 0;
|
||
|
||
.goods {
|
||
width: 150rpx;
|
||
margin: 0rpx 30rpx 20rpx 0;
|
||
|
||
&:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
image {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
}
|
||
|
||
.name {
|
||
padding: 5rpx;
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.price {
|
||
padding: 5rpx;
|
||
font-size: 18rpx;
|
||
color: #cf4444;
|
||
}
|
||
|
||
.number {
|
||
font-size: 24rpx;
|
||
margin-left: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.toolbar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
background-color: #fff;
|
||
height: 100rpx;
|
||
padding: 0 20rpx var(--window-bottom);
|
||
border-top: 1rpx solid #eaeaea;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: content-box;
|
||
|
||
.buttons {
|
||
display: flex;
|
||
|
||
&>view {
|
||
width: 220rpx;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
border-radius: 72rpx;
|
||
}
|
||
|
||
.addcart {
|
||
background-color: #4095e5;
|
||
}
|
||
|
||
.buynow,
|
||
.payment {
|
||
background-color: #4095e5;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.icons {
|
||
padding-right: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
|
||
.icons-button {
|
||
flex: 1;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
padding: 0;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
font-size: 20rpx;
|
||
color: #333;
|
||
background-color: #fff;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
text {
|
||
display: block;
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-menu {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10px 0;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #4095e5;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.container {
|
||
align-items: center;
|
||
width: 90%;
|
||
height: 100vh;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.history-list {
|
||
width: 95%;
|
||
background-color: #fff;
|
||
margin-bottom: 5px;
|
||
border-radius: 15px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.history-item {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.history-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%; /* 设置为正圆形 */
|
||
margin-right: 10px;
|
||
padding-right: 50px;
|
||
}
|
||
|
||
.history-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.nameTime {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.history-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
width: 170px;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
padding-top: 5px;
|
||
}
|
||
|
||
.star {
|
||
display: inline-block;
|
||
line-height: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.history-sale {
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
float: right;
|
||
display: inline-block;
|
||
line-height: 15px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.extend {
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.example-body {
|
||
padding: 10px;
|
||
}
|
||
|
||
.scroll-view {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
height: 100%;
|
||
/* #endif */
|
||
flex: 1
|
||
}
|
||
|
||
|
||
.scroll-view-box {
|
||
flex: 1;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.info {
|
||
padding: 15px;
|
||
color: #666;
|
||
}
|
||
|
||
.info-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.info-content {
|
||
padding: 5px 15px;
|
||
}
|
||
|
||
.card {
|
||
width: 100%;
|
||
height: 100px;
|
||
border-radius: 15px;
|
||
background-image: -webkit-linear-gradient(top, #fff, #B0D3F4);
|
||
}
|
||
|
||
.containerShow {
|
||
padding: 7px;
|
||
position: relative;
|
||
}
|
||
|
||
.img {
|
||
width: 60px;
|
||
height: 40px;
|
||
display: inline-block;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.imageItem {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 15px;
|
||
margin: auto 0;
|
||
}
|
||
|
||
.message {
|
||
width: 110px;
|
||
height: 88px;
|
||
float: right;
|
||
display: inline-block;
|
||
|
||
}
|
||
|
||
.quantity-selector {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.quantity-value {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.titleCard {
|
||
font-size: 16px;
|
||
padding-bottom: 3px;
|
||
}
|
||
|
||
.moneyCard {
|
||
font-size: 15px;
|
||
color: #666;
|
||
padding: 0;
|
||
}
|
||
|
||
.jia,
|
||
.jian {
|
||
background-color: #fff;
|
||
padding: 3px 5px 3px 5px;
|
||
border: 1px solid #999;
|
||
}
|
||
|
||
.sum {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.containerShow:last-child {
|
||
padding-bottom: 150px;
|
||
}
|
||
|
||
.delete-button {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
/* shopdetail */
|
||
.title1 {
|
||
width: 100%;
|
||
height: 60px;
|
||
font-size: 20px;
|
||
color: #000;
|
||
padding-left: 5px;
|
||
line-height: 60px;
|
||
}
|
||
.message1 {
|
||
width: 80%;
|
||
height: 200rpx;
|
||
margin: 0 auto;
|
||
}
|
||
.messageItem1 {
|
||
font-size: 18px;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
.aboutImg1 {
|
||
width: 90%;
|
||
height: 100vh;
|
||
margin: 0 auto;
|
||
}
|
||
.imgLeft1 {
|
||
float: left;
|
||
width: 48%;
|
||
height: 100vh;
|
||
}
|
||
.imgRight1 {
|
||
float: right;
|
||
width: 48%;
|
||
height: 100vh;
|
||
}
|
||
.img1 {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.businessReview {
|
||
background-color: rgba(#1fd4f8, 0.2);
|
||
border-radius: 15px;
|
||
padding: 10px;
|
||
margin: 5px;
|
||
display: block;
|
||
}
|
||
.businessReviewTitle {
|
||
color: #000;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin: 8px;
|
||
}
|
||
</style> |