优化
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='search-view'>
|
||||
<view class='search-input'>
|
||||
<view class='search-input' @click.stop='goPath("/pages/mall/subs/search/index")'>
|
||||
<image :src=' assetsUrl("ic_search.png")'></image>
|
||||
<input placeholder='输入名称、款号搜索' />
|
||||
</view>
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<swiper class='swiper' :interval='1500' :duration='1000'>
|
||||
<swiper-item v-for='(item,index) in bannerList' :key='index'>
|
||||
<image src='/static/images/test_bg.png' />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class='swiper-container'>
|
||||
<swiper class='swiper' :interval='1500' :duration='1000' @change='swiperChange'>
|
||||
<swiper-item v-for='(item,index) in bannerList' :key='index'>
|
||||
<image src='/static/images/test_bg.png' />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class='indicator'>
|
||||
<text>{{ swiperIndex + 1 }}</text>
|
||||
<text>/{{ bannerList.length }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='goods-info-view c-flex-column'>
|
||||
<view class='c-flex-row'>
|
||||
@@ -16,7 +22,7 @@
|
||||
<text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装</text>
|
||||
<view class='share-button c-flex-column'>
|
||||
<image :src='assetsUrl("ic_share.png")'></image>
|
||||
<text>分享</text>
|
||||
<button class='btn' plain open-type='share'>分享</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -51,13 +57,13 @@
|
||||
</view>
|
||||
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<view class='small-button-view'>
|
||||
<view class='small-button-view' @click.stop='goBack'>
|
||||
<view class='small-button-item'>
|
||||
<image :src='assetsUrl("ic_goods_store.png")' />
|
||||
<text>商家</text>
|
||||
</view>
|
||||
|
||||
<view class='small-button-item'>
|
||||
<view class='small-button-item' @click.stop='goPath("/pages/mine/subs/order/order-list")'>
|
||||
<image :src='assetsUrl("ic_goods_order.png")' />
|
||||
<text>订单</text>
|
||||
</view>
|
||||
@@ -88,6 +94,15 @@ import SkuDialog from '../components/sku-dialog.vue';
|
||||
const skuDialogRef = ref();
|
||||
|
||||
const bannerList = ref([1, 2, 3, 4]);
|
||||
const swiperIndex = ref(0);
|
||||
|
||||
const swiperChange = (e: any) => {
|
||||
swiperIndex.value = e.detail.current;
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
const showSkuDialog = () => {
|
||||
skuDialogRef.value.show();
|
||||
@@ -110,14 +125,38 @@ const placeOrder = () => {
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 750rpx;
|
||||
.swiper-container {
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
.swiper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 750rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 750rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
background: rgba(1, 1, 1, 0.5);
|
||||
border-radius: 45rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
padding: 5rpx 25rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,16 +198,19 @@ const placeOrder = () => {
|
||||
.share-button {
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #636566;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #00000000;
|
||||
font-size: 24rpx;
|
||||
color: #636566;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-show='tabIndex==1' class='address-view c-flex-column'>
|
||||
<view v-show='tabIndex==1' class='address-view c-flex-column'
|
||||
@click.stop='goPath("/pages/mine/subs/address/address-list")'>
|
||||
<view class='user-info c-flex-row'>
|
||||
<text>默认</text>
|
||||
<text>黄先生</text>
|
||||
@@ -102,6 +103,7 @@
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import PaymentDialog from '../components/payment-dialog.vue';
|
||||
import CouponDialog from '@/pages/mall/subs/components/coupon-dialog.vue';
|
||||
import { goPath } from '@/utils';
|
||||
|
||||
const couponDialogRef = ref();
|
||||
const paymentDialogRef = ref();
|
||||
@@ -144,9 +146,16 @@ const payment = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.tab:nth-of-type(1) {
|
||||
border-radius: 10rpx 0 0 0;
|
||||
}
|
||||
|
||||
.tab:nth-of-type(2) {
|
||||
border-radius: 0 10rpx 0 0;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx 0 10rpx 0;
|
||||
}
|
||||
|
||||
.tab:nth-of-type(1) image {
|
||||
|
||||
109
src/pages/mall/subs/search/index.vue
Normal file
109
src/pages/mall/subs/search/index.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='search-view'>
|
||||
<view class='search-input'>
|
||||
<image :src='assetsUrl("ic_search.png")' />
|
||||
<input placeholder='输入名称、款号搜索' />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class='goods-list' :scroll-y='true' type='custom'>
|
||||
<grid-view type='masonry' :cross-axis-count='2'>
|
||||
<view v-for='(item, index) in goodsList' :key='index' class='goods-item'
|
||||
@click.stop='goPath(`/pages/mall/subs/goods/goods-detail?goodsId=${item.goodsId}`)'>
|
||||
<image class='goods-image' :src='item.images' />
|
||||
<text class='goods-name'>{{ item.goodsName }}</text>
|
||||
<text class='goods-price'>¥{{ item.price }}</text>
|
||||
<image class='add-image' :src='assetsUrl("ic_add_goods.png")' />
|
||||
</view>
|
||||
</grid-view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { goPath } from '@/utils';
|
||||
|
||||
import { GoodsBean } from '@/api/goods/types';
|
||||
|
||||
const goodsList = ref<GoodsBean[]>([1, 2, 3, 4, 1, 2, 2, 2]);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: white;
|
||||
padding: 19rpx 30rpx;
|
||||
|
||||
.search-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: #F7F7F7;
|
||||
padding: 17rpx 23rpx;
|
||||
font-size: 26rpx;
|
||||
width: 100%;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
background: white;
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background: #666666;
|
||||
padding: 10rpx 10rpx;
|
||||
flex: 1;
|
||||
|
||||
.goods-image {
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
max-height: 200rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #F32B2B;
|
||||
}
|
||||
|
||||
.add-image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user