793 lines
18 KiB
Vue
793 lines
18 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import sort from "./sort.vue"
|
||
|
|
import Shopdetils from "./Shopdetails.vue"
|
||
|
|
//import details from "./details.vue"
|
||
|
|
import { apiImageUrl } from '../../API/api'
|
||
|
|
|
||
|
|
import { ref, onMounted, computed, onUnmounted, watch } from 'vue'
|
||
|
|
import { url } from "inspector";
|
||
|
|
|
||
|
|
|
||
|
|
const currentIndex = ref(0);
|
||
|
|
const tabs = ref([
|
||
|
|
{ name: '点餐' },
|
||
|
|
{ name: '评价' },
|
||
|
|
{ name: '商家信息' }
|
||
|
|
]);
|
||
|
|
|
||
|
|
|
||
|
|
const switchTab = (index) => {
|
||
|
|
currentIndex.value = index;
|
||
|
|
};
|
||
|
|
//评论
|
||
|
|
const historyList = ref([
|
||
|
|
{
|
||
|
|
imgUrl: 'https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg',
|
||
|
|
title: '大表哥',
|
||
|
|
sale: '8.0',
|
||
|
|
star: '4',
|
||
|
|
time: '刚才',
|
||
|
|
message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
|
||
|
|
title: '美食猎人',
|
||
|
|
sale: '8.0',
|
||
|
|
star: '4',
|
||
|
|
time: '刚才',
|
||
|
|
message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgUrl: 'https://img.zcool.cn/community/0189d85c3c421aa80121fbb0284f6c.jpg@1280w_1l_2o_100sh.jpg',
|
||
|
|
title: '吃货小能手',
|
||
|
|
sale: '8.0',
|
||
|
|
star: '4',
|
||
|
|
time: '刚才',
|
||
|
|
message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.b3a7697d2793ba094a861d546c31190d?rik=NevOIW4XmkUuMA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50069%2f5445.jpg_wh1200.jpg&ehk=wuLPicg%2b9wXz8QAwp%2fAVFBtJQ6loBUiVfQZu2bbZODA%3d&risl=&pid=ImgRaw&r=0',
|
||
|
|
title: '午夜觅食者',
|
||
|
|
sale: '8.0',
|
||
|
|
star: '4',
|
||
|
|
time: '1分钟前',
|
||
|
|
message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgUrl: 'https://img.zcool.cn/community/0192885d01b363a801213ec27c862a.jpg@1280w_1l_2o_100sh.jpg',
|
||
|
|
title: '素食爱好者',
|
||
|
|
sale: '8.0',
|
||
|
|
star: '4',
|
||
|
|
time: '40min',
|
||
|
|
message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgUrl: 'https://img.zcool.cn/community/018aab5cc14900a801214168fdffc2.jpg@1280w_1l_2o_100sh.jpg',
|
||
|
|
title: '加班狗',
|
||
|
|
sale: '8.0',
|
||
|
|
star: '4',
|
||
|
|
time: '40min',
|
||
|
|
message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgUrl: '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',
|
||
|
|
title: '甜品达人',
|
||
|
|
sale: '8.0',
|
||
|
|
star: '4',
|
||
|
|
time: '40min',
|
||
|
|
message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
imgUrl: 'https://img95.699pic.com/photo/50093/6813.jpg_wh860.jpg',
|
||
|
|
title: '快餐侠',
|
||
|
|
sale: '8.0',
|
||
|
|
star: '4',
|
||
|
|
time: '40min',
|
||
|
|
message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
|
||
|
|
},
|
||
|
|
])
|
||
|
|
|
||
|
|
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 likeImageSrc = ref('../../static/small/star.png');
|
||
|
|
|
||
|
|
const toggleLike = () => {
|
||
|
|
isLiked.value = !isLiked.value;
|
||
|
|
likeImageSrc.value = isLiked.value ? '../../static/small/star.png' : '../../static/small/starSelected.png';
|
||
|
|
console.log(isLiked.value ? '点赞成功' : '取消点赞成功');
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const cartItems = ref([]);
|
||
|
|
|
||
|
|
|
||
|
|
const updateCart = (newCartItems) => {
|
||
|
|
cartItems.value = newCartItems; // 更新购物车数据
|
||
|
|
console.log('更新后的购物车:', cartItems.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
cartItems.value = uni.getStorageSync('cartItems') || [];
|
||
|
|
});
|
||
|
|
|
||
|
|
const deleteItem = (index) => {
|
||
|
|
cartItems.value.splice(index, 1);
|
||
|
|
};
|
||
|
|
|
||
|
|
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 = () => {
|
||
|
|
console.log('Total amount to pay:', totalAmount.value);
|
||
|
|
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/account/account?totalAmount=${encodeURIComponent(totalAmount.value.toString())}`
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
</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="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 @update-cart="updateCart" :merchant-id="merchantId"></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="item.imgUrl"></image>
|
||
|
|
<view class="nameTime">
|
||
|
|
<text class="history-title">{{ item.title }}</text>
|
||
|
|
<text class="time">{{item.time}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="star">
|
||
|
|
<text class="history-sale">{{ item.sale }}</text>
|
||
|
|
<uni-rate :readonly="true" :value="item.star" active-color="#13c2c2"
|
||
|
|
:is-fill="false" color="#13c2c2" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="extend">
|
||
|
|
<text>{{item.message}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<block v-if="currentIndex === 2">
|
||
|
|
<Shopdetils></Shopdetils>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<!-- 用户操作 -->
|
||
|
|
<view class="toolbar">
|
||
|
|
<view class="icons">
|
||
|
|
<button class="icons-button">
|
||
|
|
<text class="icon-heart" @click="toggleLike">
|
||
|
|
<image :src="likeImageSrc" style="width: 20px;height: 20px;" />
|
||
|
|
</text>
|
||
|
|
收藏
|
||
|
|
</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 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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
padding: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.history-list {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.history-item {
|
||
|
|
padding: 10px 0px 10px 5px;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.history-img {
|
||
|
|
width: 200rpx;
|
||
|
|
height: 100rpx;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: 24rpx;
|
||
|
|
color: #999;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
</style>
|