feat: 首页优化
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@@ -1,6 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import SupplierHome from '@/view/index.vue'
|
||||
import JoyfulSelectionLayout from '@/view/joyful-selection/layout.vue'
|
||||
import JoyfulSelectionHome from '@/view/joyful-selection/index.vue'
|
||||
import JoyfulSelectionProductList from '@/view/joyful-selection/products/index.vue'
|
||||
import JoyfulSelectionProductDetail from '@/view/joyful-selection/product-detail/index.vue'
|
||||
@@ -23,18 +24,24 @@ Vue.use(Router)
|
||||
export default new Router({
|
||||
routes: [
|
||||
{ path: '/', component: SupplierHome },
|
||||
{ path: '/joyful-selection', component: JoyfulSelectionHome },
|
||||
{ path: '/joyful-selection/products', component: JoyfulSelectionProductList },
|
||||
{ path: '/joyful-selection/product-detail', component: JoyfulSelectionProductDetail },
|
||||
{ path: '/joyful-selection/cart', component: JoyfulSelectionCart },
|
||||
{ path: '/joyful-selection/cart/edit', component: JoyfulSelectionCartEdit },
|
||||
{ path: '/joyful-selection/checkout', component: JoyfulSelectionCheckout },
|
||||
{ path: '/joyful-selection/payment', component: JoyfulSelectionPayment },
|
||||
{ path: '/joyful-selection/payment-confirm', component: JoyfulSelectionPaymentConfirm },
|
||||
{ path: '/joyful-selection/payment-success', component: JoyfulSelectionPaymentSuccess },
|
||||
{ path: '/joyful-selection/orders', component: JoyfulSelectionOrders },
|
||||
{ path: '/joyful-selection/profile', component: JoyfulSelectionProfile },
|
||||
{ path: '/joyful-selection/points', component: JoyfulSelectionPoints },
|
||||
{
|
||||
path: '/joyful-selection',
|
||||
component: JoyfulSelectionLayout,
|
||||
children: [
|
||||
{ path: '', component: JoyfulSelectionHome },
|
||||
{ path: 'products', component: JoyfulSelectionProductList },
|
||||
{ path: 'product-detail', component: JoyfulSelectionProductDetail },
|
||||
{ path: 'cart', component: JoyfulSelectionCart },
|
||||
{ path: 'cart/edit', component: JoyfulSelectionCartEdit },
|
||||
{ path: 'checkout', component: JoyfulSelectionCheckout },
|
||||
{ path: 'payment', component: JoyfulSelectionPayment },
|
||||
{ path: 'payment-confirm', component: JoyfulSelectionPaymentConfirm },
|
||||
{ path: 'payment-success', component: JoyfulSelectionPaymentSuccess },
|
||||
{ path: 'orders', component: JoyfulSelectionOrders },
|
||||
{ path: 'profile', component: JoyfulSelectionProfile },
|
||||
{ path: 'points', component: JoyfulSelectionPoints }
|
||||
]
|
||||
},
|
||||
{ path: '/home-living', component: HomeLiving },
|
||||
{ path: '/happy-shopping', component: HappyShopping },
|
||||
{ path: '/fresh-fruit', component: FreshFruit },
|
||||
|
||||
@@ -1,3 +1,50 @@
|
||||
<template><main class="checkout-page"><van-nav-bar title="确认订单" left-arrow @click-left="$router.back()"/><van-cell-group inset><van-cell title="收货人：张三 138****8888" label="浙江省杭州市余杭区文一西路 888 号 1203 室" is-link/></van-cell-group><van-cell-group inset title="配送方式"><van-cell title="预计送达：5月20日（周二）" value="快速配送 免邮"/></van-cell-group><van-cell-group inset><van-card v-for="item in goods" :key="item" :title="item" price="69.90" :thumb="teaImage" num="1"/></van-cell-group><van-field v-model="remark" label="订单备注" placeholder="选填，给商家留言"/><section class="amount"><p>商品金额 <b>¥287.90</b></p><p>运费 <b>¥0.00</b></p><p>优惠券 <b>暂无优惠券</b></p></section><van-submit-bar :price="28790" button-text="提交订单" @submit="$router.push('/joyful-selection/payment')"/></main></template>
|
||||
<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionCheckout',data:()=>({teaImage,remark:'',goods:['简约北欧风陶瓷餐具套装','便携式榨汁机 家用小型','智能声波电动牙刷']})}</script>
|
||||
<style scoped>.checkout-page{min-height:100vh;padding-bottom:60px;background:#f7f7f7}.van-cell-group{margin:10px 12px}.amount{margin:10px 12px;padding:10px 16px;border-radius:10px;background:#fff;font-size:13px}.amount p{display:flex;justify-content:space-between}.amount b{font-weight:normal}.van-submit-bar{bottom:0}</style>
|
||||
<template>
|
||||
<main class="checkout-page">
|
||||
<van-nav-bar title="确认订单" left-arrow @click-left="$router.back()" />
|
||||
<van-cell-group inset>
|
||||
<van-cell title="收货人：张三 138****8888" label="浙江省杭州市余杭区文一西路 888 号 1203 室" is-link />
|
||||
</van-cell-group>
|
||||
<van-cell-group inset title="配送方式">
|
||||
<van-cell title="预计送达：5月20日（周二）" value="快速配送 免邮" />
|
||||
</van-cell-group>
|
||||
<van-cell-group inset>
|
||||
<van-card
|
||||
v-for="item in goods"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:desc="item.desc"
|
||||
:price="item.price"
|
||||
:thumb="item.image"
|
||||
num="1"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<van-field v-model="remark" label="订单备注" placeholder="选填，给商家留言" />
|
||||
<section class="amount">
|
||||
<p>商品金额 <b>¥297.90</b></p>
|
||||
<p>运费 <b>¥0.00</b></p>
|
||||
<p>优惠券 <b>暂无优惠券</b></p>
|
||||
</section>
|
||||
<van-submit-bar :price="29790" button-text="提交订单" @submit="$router.push('/joyful-selection/payment')" />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { joyfulProducts } from '../../product-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionCheckout',
|
||||
data: () => ({
|
||||
remark: '',
|
||||
goods: joyfulProducts.slice(0, 3)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.checkout-page { min-height: 100vh; padding-bottom: 60px; background: #f7f7f7; }
|
||||
.van-cell-group { margin: 10px 12px; }
|
||||
.amount { margin: 10px 12px; padding: 10px 16px; border-radius: 10px; background: #fff; font-size: 13px; }
|
||||
.amount p { display: flex; justify-content: space-between; }
|
||||
.amount b { font-weight: normal; }
|
||||
.van-submit-bar { bottom: 0; }
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,42 @@
|
||||
<template><main class="edit-page"><van-nav-bar title="购物车" right-text="完成" @click-right="$router.push('/joyful-selection/cart')"/><section><van-card v-for="item in goods" :key="item" :title="item" price="69.90" :thumb="teaImage"><template #footer><van-stepper v-model="count" theme="round" button-size="22"/></template></van-card></section><van-submit-bar button-text="删除" @submit="remove"><van-checkbox v-model="checked">全选</van-checkbox></van-submit-bar></main></template>
|
||||
<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';import {Toast} from 'vant';export default{name:'JoyfulSelectionCartEdit',data:()=>({teaImage,checked:false,count:1,goods:['简约北欧风陶瓷餐具套装','便携式榨汁机 家用小型','智能声波电动牙刷','大容量双肩电脑背包']}),methods:{remove(){Toast('请选择要删除的商品')}}}</script>
|
||||
<style scoped>.edit-page{min-height:100vh;padding-bottom:60px;background:#f7f7f7}.edit-page section{padding:0 12px}.edit-page .van-card{margin-top:10px;border-radius:10px;background:#fff}</style>
|
||||
<template>
|
||||
<main class="edit-page">
|
||||
<van-nav-bar title="购物车" right-text="完成" @click-right="$router.push('/joyful-selection/cart')" />
|
||||
<section>
|
||||
<van-card
|
||||
v-for="item in goods"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:desc="item.desc"
|
||||
:price="item.price"
|
||||
:thumb="item.image"
|
||||
>
|
||||
<template #footer><van-stepper v-model="item.count" theme="round" button-size="22" /></template>
|
||||
</van-card>
|
||||
</section>
|
||||
<van-submit-bar button-text="删除" @submit="remove">
|
||||
<van-checkbox v-model="checked">全选</van-checkbox>
|
||||
</van-submit-bar>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'vant'
|
||||
import { joyfulProducts } from '../../product-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionCartEdit',
|
||||
data: () => ({
|
||||
checked: false,
|
||||
goods: joyfulProducts.map(item => ({ ...item, count: 1 }))
|
||||
}),
|
||||
methods: {
|
||||
remove() { Toast('请选择要删除的商品') }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-page { min-height: 100vh; padding-bottom: 60px; background: #f7f7f7; }
|
||||
.edit-page section { padding: 0 12px; }
|
||||
.edit-page .van-card { margin-top: 10px; border-radius: 10px; background: #fff; }
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,42 @@
|
||||
<template><main class="cart-page"><van-nav-bar title="购物车" right-text="编辑" @click-right="$router.push('/joyful-selection/cart/edit')"/><van-notice-bar text="满 199 元包邮，快去凑单吧～" left-icon="info-o"/><section class="cart-list"><van-card v-for="item in goods" :key="item.name" :title="item.name" :price="item.price" :thumb="teaImage"><template #tags><van-tag plain type="danger">精选</van-tag></template><template #footer><van-stepper v-model="item.count" theme="round" button-size="22"/></template></van-card></section><van-submit-bar :price="28790" button-text="去结算（3）" @submit="$router.push('/joyful-selection/checkout')"><van-checkbox v-model="checked">全选</van-checkbox></van-submit-bar><van-tabbar route><van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item></van-tabbar></main></template>
|
||||
<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionCart',data:()=>({teaImage,checked:true,goods:[{name:'简约北欧风陶瓷餐具套装',price:'69.90',count:1},{name:'便携式榨汁机 家用小型',price:'89.00',count:1},{name:'智能声波电动牙刷',price:'129.00',count:1}]})}</script>
|
||||
<style scoped lang="less">.cart-page{min-height:100vh;padding-bottom:106px;background:#f7f7f7}.cart-list{padding:0 12px}.cart-list .van-card{margin-top:10px;border-radius:10px;background:#fff}.cart-list ::v-deep .van-card__price{color:#ff5b20;font-weight:bold}.van-submit-bar{bottom:50px}</style>
|
||||
<template>
|
||||
<main class="cart-page">
|
||||
<van-nav-bar title="购物车" right-text="编辑" @click-right="$router.push('/joyful-selection/cart/edit')" />
|
||||
<van-notice-bar text="满 199 元包邮，快去凑单吧～" left-icon="info-o" />
|
||||
<section class="cart-list">
|
||||
<van-card
|
||||
v-for="item in goods"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:desc="item.desc"
|
||||
:price="item.price"
|
||||
:thumb="item.image"
|
||||
>
|
||||
<template #tags><van-tag plain type="danger">{{ item.tag }}</van-tag></template>
|
||||
<template #footer><van-stepper v-model="item.count" theme="round" button-size="22" /></template>
|
||||
</van-card>
|
||||
</section>
|
||||
<van-submit-bar :price="29790" button-text="去结算（3）" @submit="$router.push('/joyful-selection/checkout')">
|
||||
<van-checkbox v-model="checked">全选</van-checkbox>
|
||||
</van-submit-bar>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { joyfulProducts } from '../product-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionCart',
|
||||
data: () => ({
|
||||
checked: true,
|
||||
goods: joyfulProducts.slice(0, 3).map(item => ({ ...item, count: 1 }))
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.cart-page { min-height: 100vh; padding-bottom: 106px; background: #f7f7f7; }
|
||||
.cart-list { padding: 0 12px; }
|
||||
.cart-list .van-card { margin-top: 10px; border-radius: 10px; background: #fff; }
|
||||
.cart-list ::v-deep .van-card__price { color: #ff5b20; font-weight: bold; }
|
||||
.van-submit-bar { bottom: 50px; }
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template><main class="confirm-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section><p>支付金额</p><b>¥ 287.90</b></section><van-popup v-model="show" round position="bottom" :style="{height:'42%'}" :close-on-click-overlay="false"><article><h2>确认支付</h2><p>您即将使用微信支付</p><p>支付金额 <b>¥287.90</b></p><div><van-button round @click="$router.back()">取消</van-button><van-button round type="danger" @click="$router.push('/joyful-selection/payment-success')">确认支付</van-button></div></article></van-popup></main></template>
|
||||
<template><main class="confirm-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section><p>支付金额</p><b>¥ 297.90</b></section><van-popup v-model="show" round position="bottom" :style="{height:'42%'}" :close-on-click-overlay="false"><article><h2>确认支付</h2><p>您即将使用微信支付</p><p>支付金额 <b>¥297.90</b></p><div><van-button round @click="$router.back()">取消</van-button><van-button round type="danger" @click="$router.push('/joyful-selection/payment-success')">确认支付</van-button></div></article></van-popup></main></template>
|
||||
<script>export default{name:'JoyfulSelectionPaymentConfirm',data:()=>({show:true})}</script>
|
||||
<style scoped>.confirm-page{min-height:100vh;background:#f7f7f7;text-align:center}.confirm-page section{margin:15px;padding:30px;border-radius:12px;background:#fff}.confirm-page section b{font-size:26px}.confirm-page article{padding:20px;text-align:center}.confirm-page article p{color:#666;font-size:13px}.confirm-page article div{display:flex;gap:10px;margin-top:40px}.confirm-page article .van-button{flex:1}</style>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template><main class="success-page"><van-icon name="checked" color="#20bd58" size="68"/><h2>支付成功</h2><b>¥ 287.90</b><section><p>订单编号 <span>YX2024051812345678</span></p><p>支付方式 <span>微信支付</span></p><p>支付时间 <span>2024-05-18 14:35:28</span></p></section><div><van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button><van-button round type="danger" @click="$router.push('/joyful-selection')">继续购物</van-button></div></main></template>
|
||||
<template><main class="success-page"><van-icon name="checked" color="#20bd58" size="68"/><h2>支付成功</h2><b>¥ 297.90</b><section><p>订单编号 <span>YX2024051812345678</span></p><p>支付方式 <span>微信支付</span></p><p>支付时间 <span>2024-05-18 14:35:28</span></p></section><div><van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button><van-button round type="danger" @click="$router.push('/joyful-selection')">继续购物</van-button></div></main></template>
|
||||
<script>export default{name:'JoyfulSelectionPaymentSuccess'}</script>
|
||||
<style scoped>.success-page{min-height:100vh;padding:80px 30px;text-align:center;background:#fff}.success-page h2{margin:15px 0 10px;font-size:17px}.success-page>b{font-size:22px}.success-page section{margin-top:42px;text-align:left;color:#888;font-size:12px}.success-page section p{display:flex;justify-content:space-between}.success-page section span{color:#333}.success-page>div{display:flex;gap:10px;margin-top:35px}.success-page .van-button{flex:1}</style>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<template><main class="payment-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section class="pay-total"><p>支付金额</p><b>¥ 287.90</b></section><van-cell-group inset title="订单信息"><van-cell title="订单编号" value="YX2024051812345678"/><van-cell title="收货人" value="张三 138****8888"/></van-cell-group><van-radio-group v-model="payType"><van-cell-group inset title="支付方式"><van-cell title="微信支付" icon="wechat-pay" clickable @click="payType='wechat'"><template #right-icon><van-radio name="wechat"/></template></van-cell><van-cell title="支付宝支付" icon="alipay" clickable @click="payType='alipay'"><template #right-icon><van-radio name="alipay"/></template></van-cell><van-cell title="银联支付" icon="credit-pay" clickable @click="payType='union'"><template #right-icon><van-radio name="union"/></template></van-cell><van-cell title="余额支付（余额：¥32.00）" icon="gold-coin-o" clickable @click="payType='balance'"><template #right-icon><van-radio name="balance"/></template></van-cell></van-cell-group></van-radio-group><van-button class="pay-button" round type="danger" block @click="$router.push('/joyful-selection/payment-confirm')">立即支付 ¥287.90</van-button></main></template>
|
||||
<template><main class="payment-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section class="pay-total"><p>支付金额</p><b>¥ 297.90</b></section><van-cell-group inset title="订单信息"><van-cell title="订单编号" value="YX2024051812345678"/><van-cell title="收货人" value="张三 138****8888"/></van-cell-group><van-radio-group v-model="payType"><van-cell-group inset title="支付方式"><van-cell title="微信支付" icon="wechat-pay" clickable @click="payType='wechat'"><template #right-icon><van-radio name="wechat"/></template></van-cell><van-cell title="支付宝支付" icon="alipay" clickable @click="payType='alipay'"><template #right-icon><van-radio name="alipay"/></template></van-cell><van-cell title="银联支付" icon="credit-pay" clickable @click="payType='union'"><template #right-icon><van-radio name="union"/></template></van-cell><van-cell title="余额支付（余额：¥32.00）" icon="gold-coin-o" clickable @click="payType='balance'"><template #right-icon><van-radio name="balance"/></template></van-cell></van-cell-group></van-radio-group><van-button class="pay-button" round type="danger" block @click="$router.push('/joyful-selection/payment-confirm')">立即支付 ¥297.90</van-button></main></template>
|
||||
<script>export default{name:'JoyfulSelectionPayment',data:()=>({payType:'wechat'})}</script>
|
||||
<style scoped>.payment-page{min-height:100vh;background:#f7f7f7}.pay-total{padding:25px;text-align:center;background:#fff}.pay-total p{margin:0;color:#666;font-size:13px}.pay-total b{display:block;margin-top:10px;font-size:26px}.van-cell-group{margin:10px 12px}.pay-button{position:fixed;right:16px;bottom:20px;left:16px;width:calc(100% - 32px)}</style>
|
||||
|
||||
@@ -6,23 +6,23 @@
|
||||
<div class="hero-copy">
|
||||
<h1>品质生活 悦享好物</h1>
|
||||
<p>精选好物，悦享品质生活</p>
|
||||
<van-button size="mini" round @click="$router.push('/joyful-selection/products')">立即抢购</van-button>
|
||||
<van-button size="mini" round @click="$router.push('/joyful-selection/products')">立即选购</van-button>
|
||||
</div>
|
||||
<van-image class="hero-art" :src="supplierImage" fit="contain" />
|
||||
</section>
|
||||
|
||||
<van-grid :column-num="5" :border="false" class="category-grid">
|
||||
<van-grid-item v-for="item in categories" :key="item.name" @click="$router.push('/joyful-selection/products')">
|
||||
<template #icon>
|
||||
<div class="category-icon" :style="{ backgroundColor: item.background }"><van-icon :name="item.icon"
|
||||
:color="item.color" /></div>
|
||||
<div class="category-icon" :style="{ backgroundColor: item.background }">
|
||||
<van-icon :name="item.icon" :color="item.color" />
|
||||
</div>
|
||||
</template>
|
||||
<template #text><span class="category-title">{{ item.name }}</span></template>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
|
||||
<section class="product-section">
|
||||
<header class="section-head"><b>今日特惠</b><a @click="$router.push('/joyful-selection/products')">更多 ›</a></header>
|
||||
<header class="section-head"><b>限时秒杀</b><a @click="$router.push('/joyful-selection/products')">更多 ›</a></header>
|
||||
<div class="product-row">
|
||||
<article v-for="item in flashProducts" :key="item.name" @click="goProductDetail(item)">
|
||||
<van-image :src="item.image" fit="cover" />
|
||||
@@ -45,26 +45,17 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<van-tabbar route active-color="#ff5b20" inactive-color="#777">
|
||||
<van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item>
|
||||
<van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item>
|
||||
<van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item>
|
||||
<van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import supplierImage from '@/assets/supplier-icons/joyful-selection.png'
|
||||
import teaImage from '@/assets/joyful-selection/products/tea-set.png'
|
||||
import { joyfulProducts } from './product-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionHome',
|
||||
data() {
|
||||
const productImages = [teaImage, teaImage, teaImage, teaImage]
|
||||
return {
|
||||
keyword: '',
|
||||
supplierImage,
|
||||
categories: [
|
||||
{ name: '精选推荐', icon: 'like', color: '#ff6e8a', background: '#fff0f3' },
|
||||
{ name: '居家生活', icon: 'shop-o', color: '#54b8e6', background: '#e9f8ff' },
|
||||
@@ -77,23 +68,13 @@ export default {
|
||||
{ name: '超值专区', icon: 'label', color: '#ec8c3d', background: '#fff4e9' },
|
||||
{ name: '全部分类', icon: 'apps-o', color: '#989898', background: '#f5f5f5' }
|
||||
],
|
||||
flashProducts: [
|
||||
{ name: '香氛洗护', price: '59.9', image: productImages[0] },
|
||||
{ name: '品质茶具', price: '99.0', image: productImages[1] },
|
||||
{ name: '绿植盆栽', price: '39.9', image: productImages[2] },
|
||||
{ name: '声波牙刷', price: '129.0', image: productImages[3] }
|
||||
],
|
||||
hotProducts: [
|
||||
{ name: '护颈枕', price: '89.0', image: productImages[2] },
|
||||
{ name: '简约花瓶', price: '59.0', image: productImages[0] },
|
||||
{ name: '香薰礼盒', price: '69.0', image: productImages[1] },
|
||||
{ name: '轻享水杯', price: '49.0', image: productImages[3] }
|
||||
]
|
||||
flashProducts: joyfulProducts,
|
||||
hotProducts: [joyfulProducts[2], joyfulProducts[0], joyfulProducts[1], joyfulProducts[3]]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goProductDetail(item) {
|
||||
this.$router.push({ path: '/joyful-selection/product-detail', query: { title: item.name, price: item.price } })
|
||||
this.$router.push({ path: '/joyful-selection/product-detail', query: { id: item.id } })
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -129,52 +110,46 @@ export default {
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 108px;
|
||||
min-height: 100px;
|
||||
margin: 10px 10px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(114deg, #8c77fb 0%, #c2b9ff 100%);
|
||||
background-image: url('~@/assets/joyful-selection/hero-bg.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 21px 0 0 18px;
|
||||
color: #26214f;
|
||||
width: 52%;
|
||||
padding: 20px 0 13px 18px;
|
||||
color: #3a348d;
|
||||
}
|
||||
|
||||
.hero-copy h1 {
|
||||
margin: 0;
|
||||
color: #4b40b5;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
margin: 5px 0 11px;
|
||||
color: #5f579e;
|
||||
margin: 5px 0 10px;
|
||||
color: #7068bd;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.hero-copy .van-button {
|
||||
min-width: 53px;
|
||||
height: 19px;
|
||||
min-width: 58px;
|
||||
height: 20px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
background: #6f5ee9;
|
||||
}
|
||||
|
||||
.hero-art {
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
bottom: -8px;
|
||||
width: 119px;
|
||||
height: 119px;
|
||||
filter: drop-shadow(0 10px 8px rgba(72, 58, 176, .2));
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
margin: 8px 10px 9px;
|
||||
overflow: hidden;
|
||||
@@ -183,7 +158,7 @@ export default {
|
||||
}
|
||||
|
||||
.category-grid ::v-deep .van-grid-item__content {
|
||||
padding: 10px 0 7px;
|
||||
padding: 8px 0 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -193,20 +168,20 @@ export default {
|
||||
|
||||
.category-icon {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.category-icon .van-icon {
|
||||
font-size: 18px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
margin-top: 6px;
|
||||
color: #4d4d4d;
|
||||
font-size: 9px;
|
||||
}
|
||||
@@ -254,12 +229,19 @@ export default {
|
||||
|
||||
.product-row .van-image {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-row ::v-deep .van-image__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -288,12 +270,4 @@ export default {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.joy-home ::v-deep .van-tabbar-item__icon {
|
||||
margin-bottom: 2px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.joy-home ::v-deep .van-tabbar-item__text {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<main class="joyful-layout">
|
||||
<router-view />
|
||||
<van-tabbar v-if="showTabbar" route active-color="#ff5b20" inactive-color="#777">
|
||||
<van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item>
|
||||
<van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item>
|
||||
<van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item>
|
||||
<van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JoyfulSelectionLayout',
|
||||
computed: {
|
||||
showTabbar() {
|
||||
return ['/joyful-selection', '/joyful-selection/products', '/joyful-selection/cart', '/joyful-selection/profile'].includes(this.$route.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.joyful-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.joyful-layout ::v-deep .van-tabbar-item__icon {
|
||||
margin-bottom: 2px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.joyful-layout ::v-deep .van-tabbar-item__text {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
import bluetoothEarbudsImage from '@/assets/joyful-selection/products/bluetooth-earbuds.png'
|
||||
import miniOvenImage from '@/assets/joyful-selection/products/mini-oven.png'
|
||||
import smartSpeakerImage from '@/assets/joyful-selection/products/smart-speaker.png'
|
||||
import giftBoxImage from '@/assets/joyful-selection/products/gift-box.png'
|
||||
|
||||
export const joyfulProducts = [
|
||||
{
|
||||
id: 'bluetooth-earbuds',
|
||||
name: '小米蓝牙耳机 Air2 SE',
|
||||
desc: '轻盈半入耳，通勤运动都好听',
|
||||
detail: '舒适半入耳设计，配合便携充电盒，日常通勤、运动和在线会议都能保持清晰稳定的聆听体验。',
|
||||
price: '69.90',
|
||||
originPrice: '99.90',
|
||||
category: '数码家电',
|
||||
tag: '积分兑换',
|
||||
image: bluetoothEarbudsImage
|
||||
},
|
||||
{
|
||||
id: 'mini-oven',
|
||||
name: '奶油白家用迷你烤箱',
|
||||
desc: '小巧不占地，早餐烘焙好帮手',
|
||||
detail: '紧凑台式机身搭配可视化炉门，适合烤吐司、蛋挞和小份点心，让厨房日常更轻松。',
|
||||
price: '129.00',
|
||||
originPrice: '169.00',
|
||||
category: '居家生活',
|
||||
tag: '新品上架',
|
||||
image: miniOvenImage
|
||||
},
|
||||
{
|
||||
id: 'smart-speaker',
|
||||
name: '黑曜智能音箱 Pro',
|
||||
desc: '语音唤醒，沉浸听感',
|
||||
detail: '圆柱一体式声学结构，支持语音互动和日常音乐播放，适合卧室、书房与办公桌面使用。',
|
||||
price: '99.00',
|
||||
originPrice: '139.00',
|
||||
category: '数码家电',
|
||||
tag: '热门推荐',
|
||||
image: smartSpeakerImage
|
||||
},
|
||||
{
|
||||
id: 'gift-box',
|
||||
name: '橙意惊喜礼盒',
|
||||
desc: '精致包装，送礼更有心意',
|
||||
detail: '亮橙礼盒搭配丝带包装，适合节日福利、积分兑换礼和日常心意礼赠场景。',
|
||||
price: '59.90',
|
||||
originPrice: '89.90',
|
||||
category: '食品饮料',
|
||||
tag: '品质精选',
|
||||
image: giftBoxImage
|
||||
}
|
||||
]
|
||||
|
||||
export const getJoyfulProduct = id => joyfulProducts.find(item => item.id === id) || joyfulProducts[0]
|
||||
@@ -1,17 +1,20 @@
|
||||
<template>
|
||||
<main class="detail-page">
|
||||
<van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" />
|
||||
<van-image class="product-image" :src="teaImage" fit="cover" />
|
||||
<van-image class="product-image" :src="product.image" fit="cover" />
|
||||
<section class="product-info">
|
||||
<h1>{{ productTitle }}</h1>
|
||||
<p>精选优质瓷土，简约百搭，为品质生活增添仪式感</p>
|
||||
<div><b>¥{{ productPrice }}</b><del>¥89.90</del><van-tag type="danger" plain>精选</van-tag></div>
|
||||
<h1>{{ product.name }}</h1>
|
||||
<p>{{ product.detail }}</p>
|
||||
<div><b>¥{{ product.price }}</b><del>¥{{ product.originPrice }}</del><van-tag type="danger" plain>{{ product.tag }}</van-tag></div>
|
||||
</section>
|
||||
<van-cell-group inset title="商品服务">
|
||||
<van-cell title="正品保障" value="极速发货 · 售后无忧" />
|
||||
<van-cell title="配送" value="满 99 元免配送费" />
|
||||
</van-cell-group>
|
||||
<section class="detail-content"><h2>商品详情</h2><p>精致器型与温润釉色，适合日常用餐、下午茶与礼赠场景。</p></section>
|
||||
<section class="detail-content">
|
||||
<h2>商品详情</h2>
|
||||
<p>{{ product.desc }}</p>
|
||||
</section>
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" text="客服" dot />
|
||||
<van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="$router.push('/joyful-selection/cart')" />
|
||||
@@ -23,13 +26,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import teaImage from '@/assets/joyful-selection/products/tea-set.png'
|
||||
import { getJoyfulProduct } from '../product-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionProductDetail',
|
||||
data: () => ({ teaImage }),
|
||||
computed: {
|
||||
productTitle() { return this.$route.query.title || '简约北欧风陶瓷餐具套装' },
|
||||
productPrice() { return this.$route.query.price || '69.90' }
|
||||
product() { return getJoyfulProduct(this.$route.query.id) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,319 @@
|
||||
<template><main class="product-page"><van-nav-bar title="商品列表" left-arrow @click-left="$router.back()"/><van-tabs v-model="active" color="#715ef1"><van-tab v-for="tab in tabs" :key="tab" :title="tab"/></van-tabs><section class="layout"><aside><span v-for="category in categories" :key="category" :class="{active: category===selected}" @click="selected=category">{{ category }}</span></aside><div class="goods"><van-card v-for="item in goods" :key="item.name" :title="item.name" :desc="item.desc" :price="item.price" :thumb="teaImage" @click="goProductDetail(item)"><template #tags><van-tag plain type="danger">精选</van-tag></template><template #footer><van-button icon="cart-o" size="mini" round type="danger" @click.stop="$router.push('/joyful-selection/cart')"/></template></van-card></div></section><van-tabbar route><van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item></van-tabbar></main></template>
|
||||
<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionProductList',data:()=>({teaImage,active:0,selected:'推荐',tabs:['综合','销量','价格','筛选'],categories:['推荐','居家生活','数码家电','美妆个护','食品饮料','母婴玩具','服饰鞋包','运动户外'],goods:[{name:'简约北欧风陶瓷餐具套装',desc:'精致实用，悦享生活',price:'69.90'},{name:'便携式榨汁机 家用小型',desc:'鲜榨果汁随时享',price:'89.00'},{name:'100%纯棉舒适四件套',desc:'柔软亲肤，安心睡眠',price:'179.00'},{name:'智能声波电动牙刷',desc:'高频洁净，呵护口腔',price:'129.00'}]}),methods:{goProductDetail(item){this.$router.push({path:'/joyful-selection/product-detail',query:{title:item.name,price:item.price}})}}}</script>
|
||||
<style scoped lang="less">.product-page{min-height:100vh;padding-bottom:56px;background:#fff}.layout{display:flex}.layout aside{width:86px;flex:none;background:#f7f7f7}.layout aside span{display:block;padding:16px 8px;text-align:center;color:#666;font-size:12px}.layout aside .active{background:#fff;color:#ff5b20;font-weight:bold}.goods{flex:1;min-width:0;padding:0 9px}.goods .van-card{margin:10px 0;background:#fff}.goods ::v-deep .van-card__price{color:#ff5b20;font-weight:bold}</style>
|
||||
<template>
|
||||
<main class="product-page">
|
||||
<div class="fixed-top">
|
||||
<van-nav-bar title="商品列表" left-arrow @click-left="$router.back()" />
|
||||
<van-tabs v-model="active" color="#ff5b20" title-active-color="#ff5b20" title-inactive-color="#333">
|
||||
<van-tab v-for="tab in tabs" :key="tab" :title="tab" />
|
||||
</van-tabs>
|
||||
</div>
|
||||
|
||||
<section class="layout">
|
||||
<aside>
|
||||
<span
|
||||
v-for="category in categories"
|
||||
:key="category"
|
||||
:class="{ active: category === selected }"
|
||||
@click="selected = category"
|
||||
>
|
||||
{{ category }}
|
||||
</span>
|
||||
</aside>
|
||||
|
||||
<div class="goods">
|
||||
<article v-for="item in visibleGoods" :key="item.id" class="goods-item" @click="goProductDetail(item)">
|
||||
<van-image class="goods-thumb" :src="item.image" fit="cover" />
|
||||
<div class="goods-info">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<van-tag class="goods-tag" plain type="danger">{{ item.tag }}</van-tag>
|
||||
<div class="goods-bottom">
|
||||
<b>¥{{ item.price }}</b>
|
||||
<span>已售{{ item.sales }}</span>
|
||||
<button type="button" class="cart-button" @click.stop="$router.push('/joyful-selection/cart')">
|
||||
<van-icon name="cart-o" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { joyfulProducts } from '../product-data'
|
||||
|
||||
const productImages = joyfulProducts.map(item => item.image)
|
||||
|
||||
const categorySeeds = {
|
||||
居家生活: [
|
||||
['cream-oven', '奶油白家用迷你烤箱', '小巧不占地，早餐烘焙好帮手', '129.00', '1.2万件', productImages[1]],
|
||||
['cotton-bedding', '100%纯棉舒适四件套', '柔软亲肤，安心睡眠', '179.00', '6453件', productImages[1]],
|
||||
['aroma-gift', '橙意香薰礼盒套装', '淡雅留香，装点居家空间', '59.90', '8321件', productImages[3]],
|
||||
['desktop-vase', '简约北欧陶瓷花瓶', '清新配色，点亮桌面角落', '39.90', '3180件', productImages[3]]
|
||||
],
|
||||
数码家电: [
|
||||
['earbuds-air2', '小米蓝牙耳机 Air2 SE', '轻盈半入耳，通勤运动都好听', '69.90', '1.2万件', productImages[0]],
|
||||
['smart-speaker-pro', '黑曜智能音箱 Pro', '语音唤醒，沉浸听感', '99.00', '2.1万件', productImages[2]],
|
||||
['electric-toothbrush', '智能声波电动牙刷', '高频洁净，呵护口腔', '129.00', '2.1万件', productImages[0]],
|
||||
['dual-charger', '双口快充充电器 30W', '小巧便携，多设备快充', '69.00', '5632件', productImages[2]]
|
||||
],
|
||||
美妆个护: [
|
||||
['skin-care-box', '植萃保湿护肤礼盒', '水润修护，清爽不粘腻', '99.90', '4820件', productImages[3]],
|
||||
['aroma-wash', '香氛洗护旅行套装', '温和清洁，清新留香', '59.90', '7932件', productImages[3]],
|
||||
['makeup-mirror', '便携补光化妆镜', '高清镜面，随时补妆', '49.90', '3651件', productImages[2]],
|
||||
['hand-cream', '滋润护手霜三支装', '细腻滋养，轻柔香气', '39.90', '5280件', productImages[3]]
|
||||
],
|
||||
食品饮料: [
|
||||
['orange-gift', '橙意惊喜零食礼盒', '精致包装，送礼更有心意', '59.90', '6324件', productImages[3]],
|
||||
['coffee-cup', '咖啡随行杯组合', '锁温防漏，醇香随行', '49.90', '3520件', productImages[0]],
|
||||
['tea-snack', '下午茶点心礼盒', '多种风味，一盒满足', '69.90', '4891件', productImages[3]],
|
||||
['fruit-drink', '轻享果饮礼盒', '清爽酸甜，聚会常备', '79.90', '2976件', productImages[3]]
|
||||
],
|
||||
母婴玩具: [
|
||||
['baby-bottle', '安心防摔儿童水杯', '轻巧易握，出门好携带', '39.90', '4250件', productImages[0]],
|
||||
['toy-blocks', '益智拼搭积木套装', '色彩柔和，陪伴成长', '89.00', '2186件', productImages[3]],
|
||||
['kids-night-light', '柔光儿童陪伴夜灯', '温和光线，安心入睡', '69.90', '3548件', productImages[2]],
|
||||
['baby-towel', '纯棉柔软浴巾两件装', '亲肤吸水，日常必备', '59.90', '2761件', productImages[1]]
|
||||
],
|
||||
服饰鞋包: [
|
||||
['laptop-backpack', '大容量双肩电脑背包', '分区收纳，通勤出行轻松装', '149.00', '1.6万件', productImages[3]],
|
||||
['mini-bag', '轻巧通勤斜挎小包', '简洁百搭，日常实用', '79.90', '5321件', productImages[3]],
|
||||
['silk-scarf', '柔软撞色丝巾礼盒', '细腻亲肤，点亮穿搭', '69.90', '2680件', productImages[3]],
|
||||
['canvas-tote', '简约帆布托特包', '大容量开口，随手能装', '49.90', '6412件', productImages[3]]
|
||||
],
|
||||
运动户外: [
|
||||
['sport-bottle', '运动便携保温水杯', '长效锁温，户外随行', '49.90', '7342件', productImages[0]],
|
||||
['neck-massager', '筋膜放松按摩仪 Mini', '轻巧便携，舒缓酸胀', '99.00', '3921件', productImages[2]],
|
||||
['camping-light', '户外便携露营灯', '多档照明，夜晚更安心', '79.00', '2568件', productImages[2]],
|
||||
['fitness-band', '弹力健身拉力带套装', '居家训练，轻松塑形', '29.90', '4396件', productImages[1]]
|
||||
]
|
||||
}
|
||||
|
||||
const goods = Object.entries(categorySeeds).flatMap(([category, items]) =>
|
||||
items.map(([id, name, desc, price, sales, image]) => ({
|
||||
id,
|
||||
name,
|
||||
desc,
|
||||
price,
|
||||
sales,
|
||||
image,
|
||||
category,
|
||||
tag: '赠品'
|
||||
}))
|
||||
)
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionProductList',
|
||||
data: () => ({
|
||||
active: 0,
|
||||
selected: '推荐',
|
||||
tabs: ['综合', '销量', '价格↕', '筛选⌄'],
|
||||
categories: ['推荐', '居家生活', '数码家电', '美妆个护', '食品饮料', '母婴玩具', '服饰鞋包', '运动户外'],
|
||||
goods
|
||||
}),
|
||||
computed: {
|
||||
visibleGoods() {
|
||||
return this.selected === '推荐'
|
||||
? this.goods.slice(0, 10)
|
||||
: this.goods.filter(item => item.category === this.selected)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goProductDetail(item) {
|
||||
this.$router.push({ path: '/joyful-selection/product-detail', query: { id: item.id } })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.product-page {
|
||||
min-height: 100vh;
|
||||
padding: 90px 0 56px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.fixed-top ::v-deep .van-nav-bar {
|
||||
height: 46px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fixed-top ::v-deep .van-nav-bar__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fixed-top ::v-deep .van-tabs__wrap {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.fixed-top ::v-deep .van-tab {
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fixed-top ::v-deep .van-tab--active {
|
||||
color: #ff5b20;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fixed-top ::v-deep .van-tabs__line {
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: #ff5b20;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.layout aside {
|
||||
position: sticky;
|
||||
top: 90px;
|
||||
width: 78px;
|
||||
height: calc(100vh - 146px);
|
||||
flex: none;
|
||||
overflow-y: auto;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.layout aside span {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layout aside .active {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
color: #222;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.layout aside .active::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background: #ff5b20;
|
||||
content: '';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.goods {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 10px 12px;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
min-height: 96px;
|
||||
gap: 10px;
|
||||
padding: 0 0 13px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.goods-item + .goods-item {
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.goods-thumb {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
flex: none;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.goods-info h3 {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
min-height: 34px;
|
||||
margin: 0 0 5px;
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.goods-tag {
|
||||
width: fit-content;
|
||||
transform: scale(.86);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.goods-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.goods-bottom b {
|
||||
color: #ff5b20;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.goods-bottom span {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-left: 9px;
|
||||
color: #aaa;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cart-button {
|
||||
display: flex;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #ff7a3c;
|
||||
border-radius: 50%;
|
||||
color: #ff5b20;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 6px rgba(255, 91, 32, .12);
|
||||
}
|
||||
|
||||
.cart-button .van-icon {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,59 @@
|
||||
<template><main class="profile-page"><section class="profile-top"><van-image round width="48" height="48" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/><div><b>张三</b><p>欢迎来到悦享优选</p></div><van-icon name="ellipsis"/></section><section class="asset"><div><small>我的积分</small><b>2368</b></div><div><small>成长值</small><b>3680</b></div><div><small>优惠券</small><b>5</b></div></section><section class="panel"><div class="panel-title">我的订单 <span @click="$router.push('/joyful-selection/orders')">全部订单 ›</span></div><van-grid :column-num="5" :border="false"><van-grid-item icon="balance-pay" text="待付款"/><van-grid-item icon="logistics" text="待发货"/><van-grid-item icon="send-gift-o" text="待收货"/><van-grid-item icon="todo-list-o" text="已完成"/><van-grid-item icon="after-sale" text="售后"/></van-grid></section><section class="panel"><div class="panel-title">我的服务</div><van-grid :column-num="4" :border="false"><van-grid-item icon="star-o" text="我的收藏"/><van-grid-item icon="clock-o" text="浏览记录"/><van-grid-item icon="location-o" text="收货地址"/><van-grid-item icon="coupon-o" text="优惠券"/><van-grid-item icon="gift-o" text="积分商城" @click="$router.push('/joyful-selection/points')"/><van-grid-item icon="service-o" text="客户服务"/><van-grid-item icon="edit" text="意见反馈"/><van-grid-item icon="setting-o" text="设置"/></van-grid></section><van-tabbar route><van-tabbar-item icon="wap-home-o" to="/joyful-selection">首页</van-tabbar-item><van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item><van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item><van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item></van-tabbar></main></template>
|
||||
<script>export default{name:'JoyfulSelectionProfile'}</script>
|
||||
<style scoped>.profile-page{min-height:100vh;padding-bottom:50px;background:#f7f7f7}.profile-top{display:flex;align-items:center;gap:12px;padding:24px 20px;background:linear-gradient(135deg,#dcd8ff,#f9f8ff)}.profile-top div{flex:1}.profile-top b{font-size:17px}.profile-top p{margin:4px 0 0;color:#777;font-size:11px}.asset{display:flex;margin:-3px 12px 12px;padding:14px;border-radius:10px;background:#fff}.asset div{display:grid;flex:1;gap:6px;text-align:center}.asset small{color:#777;font-size:11px}.asset b{color:#ff5b20}.panel{margin:10px 12px;border-radius:10px;background:#fff}.panel-title{padding:13px;font-size:13px;font-weight:bold}.panel-title span{float:right;color:#999;font-size:11px;font-weight:normal}.panel ::v-deep .van-grid-item__text{font-size:10px}</style>
|
||||
<template>
|
||||
<main class="profile-page">
|
||||
<section class="profile-top">
|
||||
<van-image round width="48" height="48" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
|
||||
<div><b>张三</b><p>欢迎来到悦享优选</p></div>
|
||||
<van-icon name="ellipsis" />
|
||||
</section>
|
||||
<section class="asset">
|
||||
<div><small>我的积分</small><b>2368</b></div>
|
||||
<div><small>成长值</small><b>3680</b></div>
|
||||
<div><small>优惠券</small><b>5</b></div>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<div class="panel-title">我的订单 <span @click="$router.push('/joyful-selection/orders')">全部订单 ›</span></div>
|
||||
<van-grid :column-num="5" :border="false">
|
||||
<van-grid-item icon="balance-pay" text="待付款" />
|
||||
<van-grid-item icon="logistics" text="待发货" />
|
||||
<van-grid-item icon="send-gift-o" text="待收货" />
|
||||
<van-grid-item icon="todo-list-o" text="已完成" />
|
||||
<van-grid-item icon="after-sale" text="售后" />
|
||||
</van-grid>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<div class="panel-title">我的服务</div>
|
||||
<van-grid :column-num="4" :border="false">
|
||||
<van-grid-item icon="star-o" text="我的收藏" />
|
||||
<van-grid-item icon="clock-o" text="浏览记录" />
|
||||
<van-grid-item icon="location-o" text="收货地址" />
|
||||
<van-grid-item icon="coupon-o" text="优惠券" />
|
||||
<van-grid-item icon="gift-o" text="积分商城" @click="$router.push('/joyful-selection/points')" />
|
||||
<van-grid-item icon="service-o" text="客户服务" />
|
||||
<van-grid-item icon="edit" text="意见反馈" />
|
||||
<van-grid-item icon="setting-o" text="设置" />
|
||||
</van-grid>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'JoyfulSelectionProfile'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-page { min-height: 100vh; padding-bottom: 70px; background: #f7f7f7; }
|
||||
.profile-top { display: flex; align-items: center; gap: 12px; padding: 24px 20px; background: linear-gradient(135deg, #dcd8ff, #f9f8ff); }
|
||||
.profile-top div { flex: 1; }
|
||||
.profile-top b { font-size: 17px; }
|
||||
.profile-top p { margin: 4px 0 0; color: #777; font-size: 11px; }
|
||||
.asset { display: flex; margin: -3px 12px 12px; padding: 14px; border-radius: 10px; background: #fff; }
|
||||
.asset div { display: grid; flex: 1; gap: 6px; text-align: center; }
|
||||
.asset small { color: #777; font-size: 11px; }
|
||||
.asset b { color: #ff5b20; }
|
||||
.panel { margin: 10px 12px; border-radius: 10px; background: #fff; }
|
||||
.panel-title { padding: 13px; font-size: 13px; font-weight: bold; }
|
||||
.panel-title span { float: right; color: #999; font-size: 11px; font-weight: normal; }
|
||||
.panel ::v-deep .van-grid-item__text { font-size: 10px; }
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,48 @@
|
||||
<template><main class="orders-page"><van-nav-bar title="我的订单" left-arrow @click-left="$router.back()"/><van-tabs v-model="active"><van-tab v-for="tab in tabs" :key="tab" :title="tab"/></van-tabs><section><article v-for="order in orders" :key="order.id"><header><span>订单号：{{ order.id }}</span><b :class="order.status">{{ order.status }}</b></header><van-card title="简约北欧风陶瓷餐具套装" desc="共 3 件商品" price="287.90" :thumb="teaImage"/><footer><span>合计：<b>¥287.90</b></span><van-button size="small" round plain type="danger">查看详情</van-button></footer></article></section></main></template>
|
||||
<script>import teaImage from '@/assets/joyful-selection/products/tea-set.png';export default{name:'JoyfulSelectionOrders',data:()=>({teaImage,active:0,tabs:['全部','待付款','待发货','待收货','已完成','售后'],orders:[{id:'YX2024051812345678',status:'待发货'},{id:'YX2024051509876543',status:'待收货'},{id:'YX2024051211223344',status:'已完成'}]})}</script>
|
||||
<style scoped>.orders-page{min-height:100vh;background:#f7f7f7}.orders-page section{padding:0 12px}.orders-page article{margin-top:10px;border-radius:10px;background:#fff}.orders-page header,.orders-page footer{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;color:#999;font-size:11px}.orders-page header b{color:#ff5b20}.orders-page .已完成{color:#27ae60}.orders-page footer b{color:#222}.orders-page .van-card{background:#fff}</style>
|
||||
<template>
|
||||
<main class="orders-page">
|
||||
<van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
|
||||
<van-tabs v-model="active">
|
||||
<van-tab v-for="tab in tabs" :key="tab" :title="tab" />
|
||||
</van-tabs>
|
||||
<section>
|
||||
<article v-for="order in orders" :key="order.id">
|
||||
<header><span>订单号：{{ order.id }}</span><b :class="order.status">{{ order.status }}</b></header>
|
||||
<van-card
|
||||
:title="order.product.name"
|
||||
desc="共 3 件商品"
|
||||
price="297.90"
|
||||
:thumb="order.product.image"
|
||||
/>
|
||||
<footer><span>合计：<b>¥297.90</b></span><van-button size="small" round plain type="danger">查看详情</van-button></footer>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { joyfulProducts } from '../../product-data'
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionOrders',
|
||||
data: () => ({
|
||||
active: 0,
|
||||
tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '售后'],
|
||||
orders: [
|
||||
{ id: 'YX2024051812345678', status: '待发货', product: joyfulProducts[0] },
|
||||
{ id: 'YX2024051509876543', status: '待收货', product: joyfulProducts[1] },
|
||||
{ id: 'YX2024051211223344', status: '已完成', product: joyfulProducts[2] }
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.orders-page { min-height: 100vh; background: #f7f7f7; }
|
||||
.orders-page section { padding: 0 12px; }
|
||||
.orders-page article { margin-top: 10px; border-radius: 10px; background: #fff; }
|
||||
.orders-page header, .orders-page footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #999; font-size: 11px; }
|
||||
.orders-page header b { color: #ff5b20; }
|
||||
.orders-page .已完成 { color: #27ae60; }
|
||||
.orders-page footer b { color: #222; }
|
||||
.orders-page .van-card { background: #fff; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user