Skip to content

Y
yongxinda-h5
提交 1eda27be authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

优化页面展示

上级 cb07e8e0
隐藏空白字符变更
内嵌 并排
正在显示 包含 146 行增加 和 140 行删除
src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue
浏览文件 @ 1eda27be
......@@ -3,18 +3,19 @@
@touchmove.stop.prevent="moveHandle" @click.stop="stop">
<!-- 页面内容开始 -->
<view class="mask" @click="close('mask')"></view>
<view class="layer attr-content" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }"
:style="{ borderRadius: borderRadius + 'rpx ' + borderRadius + 'rpx 0 0' }">
<view class="specification-wrapper">
<scroll-view class="specification-wrapper-content" scroll-y="true">
<view class="specification-header">
<view class="specification-left">
<image class="product-img" :src="
selectShop.image ? selectShop.image : goodsInfo[goodsThumbName]
" :style="{ backgroundColor: goodsThumbBackgroundColor }" mode="aspectFill" @click="previewImage"></image>
</view>
<view class="specification-right">
<!-- <view
<view style="background-color: #f6f6f6; display: flex; justify-content: center;">
<view class="layer attr-content" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }"
:style="{ borderRadius: borderRadius + 'rpx ' + borderRadius + 'rpx 0 0' }">
<view class="specification-wrapper">
<scroll-view class="specification-wrapper-content" scroll-y="true">
<view class="specification-header">
<view class="specification-left">
<image class="product-img" :src="
selectShop.image ? selectShop.image : goodsInfo[goodsThumbName]
" :style="{ backgroundColor: goodsThumbBackgroundColor }" mode="aspectFill" @click="previewImage"></image>
</view>
<view class="specification-right">
<!-- <view
class="price-content"
:style="{ color: themeColorFn('priceColor') }"
>
......@@ -23,42 +24,42 @@
{{ priceCom }}
</text>
</view> -->
<view class="inventory" v-if="!hideStock">
{{ stockText }}：{{ stockCom }}
</view>
<view class="inventory" v-else></view>
<view class="choose" v-show="isManyCom">
已选：{{ selectArr.join(' ') }}
<view class="inventory" v-if="!hideStock">
{{ stockText }}：{{ stockCom }}
</view>
<view class="inventory" v-else></view>
<view class="choose" v-show="isManyCom">
已选：{{ selectArr.join(' ') }}
</view>
</view>
</view>
</view>
<view class="specification-content">
<view v-show="isManyCom" class="specification-item"
v-for="(item, index1) in goodsInfo[specListName]" :key="index1">
<view class="item-title">{{ item.name }}</view>
<view class="specification-content">
<view v-show="isManyCom" class="specification-item"
v-for="(item, index1) in goodsInfo[specListName]" :key="index1">
<view class="item-title">{{ item.name }}</view>
<view style="display: flex; justify-content: space-between; align-items: center;">
<view class="item-wrapper">
<view class="item-content" v-for="(item_value, index2) in item.list" :key="index2"
:class="[
item_value.ishow ? '' : 'noactived',
subIndex[index1] == index2 ? 'actived' : '',
]" :style="[
<view style="display: flex; justify-content: space-between; align-items: center;">
<view class="item-wrapper">
<view class="item-content" v-for="(item_value, index2) in item.list"
:key="index2" :class="[
item_value.ishow ? '' : 'noactived',
subIndex[index1] == index2 ? 'actived' : '',
]" :style="[
item_value.ishow ? '' : themeColorFn('disableStyle'),
item_value.ishow ? themeColorFn('btnStyle') : '',
subIndex[index1] == index2
? themeColorFn('activedStyle')
: '',
]" @click="skuClick(item_value, index1, index2)">
{{ item_value.name }}
{{ item_value.name }}
</view>
<u-input v-if="item.isPlus && item.isCustom" style="width: 170rpx;"
v-model="item.custom" placeholder="定制属性" placeholder-style="font-size: 12px"
type="text" border-color="#f4f4f4" height="50" clearable border
@blur="onBlur($event, index1)" @confirm="onConfirm($event, index1)" />
</view>
<u-input v-if="item.isPlus && item.isCustom" style="width: 170rpx;"
v-model="item.custom" placeholder="定制属性" placeholder-style="font-size: 12px"
type="text" border-color="#f4f4f4" height="50" clearable border
@blur="onBlur($event, index1)" @confirm="onConfirm($event, index1)" />
</view>
<!-- <view v-if="item.isPlus && item.isCustom">
<!-- <view v-if="item.isPlus && item.isCustom">
<u-icon name="plus-circle" color="#999" size="36" @click="onPlus(index1)"></u-icon>
</view>
<view v-if="!item.isPlus && item.isCustom" style="margin-bottom: 12rpx; width: 200rpx;">
......@@ -66,79 +67,81 @@
border-color="#2979ff" height="50" clearable border focus
@blur="onBlur($event, index1)" @confirm="onConfirm($event, index1)" />
</view> -->
</view>
</view>
</view>
<view v-if="JSON.stringify(partList) !== '[]' && partList" class="specification-item">
<view class="item-title">配件(多选)</view>
<view style="display: flex; justify-content: space-between; align-items: center;">
<view class="item-wrapper">
<view v-for="(item, index) in partList" :key="item.id" class="item-content"
:class="[item.show ? 'actived' : '']" @tap="tapParts(item, index)">
{{ item.partGoodsName }}
<view v-if="JSON.stringify(partList) !== '[]' && partList" class="specification-item">
<view class="item-title">配件(多选)</view>
<view style="display: flex; justify-content: space-between; align-items: center;">
<view class="item-wrapper">
<view v-for="(item, index) in partList" :key="item.id" class="item-content"
:class="[item.show ? 'actived' : '']" @tap="tapParts(item, index)">
{{ item.partGoodsName }}
</view>
</view>
</view>
</view>
</view>
<view class="number-box-view">
<view style="flex: 1;">数量</view>
<view style="flex: 4;text-align: right;">
<vk-data-input-number-box v-model="selectNum" :min="minBuyNum || 1" :max="maxBuyNumCom"
:step="stepBuyNum || 1" :step-strictly="stepStrictly" :positive-integer="true"
@change="numChange"></vk-data-input-number-box>
<view class="number-box-view">
<view style="flex: 1;">数量</view>
<view style="flex: 4;text-align: right;">
<vk-data-input-number-box v-model="selectNum" :min="minBuyNum || 1"
:max="maxBuyNumCom" :step="stepBuyNum || 1" :step-strictly="stepStrictly"
:positive-integer="true" @change="numChange"></vk-data-input-number-box>
</view>
</view>
</view>
</scroll-view>
<view class="close" @click="close('close')" v-if="showClose != false">
<image class="close-item" :src="closeImage"></image>
</view>
</scroll-view>
<view class="close" @click="close('close')" v-if="showClose != false">
<image class="close-item" :src="closeImage"></image>
</view>
</view>
<view class="btn-wrapper" v-if="outFoStock || mode == 4">
<view class="sure" style="color:#ffffff;background-color:#cccccc">
{{ noStockText }}
</view>
</view>
<view class="btn-wrapper" v-else-if="mode == 1">
<view class="sure add-cart" style="border-radius:38rpx 0rpx 0rpx 38rpx;" :style="{
color: themeColorFn('addCartColor'),
backgroundColor: themeColorFn('addCartBackgroundColor'),
}" @click="addCart">
{{ addCartText }}
<view class="btn-wrapper" v-if="outFoStock || mode == 4">
<view class="sure" style="color:#ffffff;background-color:#cccccc">
{{ noStockText }}
</view>
</view>
<view class="btn-wrapper" v-else-if="mode == 1">
<view class="sure add-cart" style="border-radius:38rpx 0rpx 0rpx 38rpx;" :style="{
color: themeColorFn('addCartColor'),
backgroundColor: themeColorFn('addCartBackgroundColor'),
}" @click="addCart">
{{ addCartText }}
</view>
<view class="sure" style="border-radius:0rpx 38rpx 38rpx 0rpx;" :style="{
color: themeColorFn('buyNowColor'),
backgroundColor: themeColorFn('buyNowBackgroundColor'),
}" @click="buyNow">
{{ buyNowText }}
<view class="sure" style="border-radius:0rpx 38rpx 38rpx 0rpx;" :style="{
color: themeColorFn('buyNowColor'),
backgroundColor: themeColorFn('buyNowBackgroundColor'),
}" @click="buyNow">
{{ buyNowText }}
</view>
</view>
</view>
<view class="btn-wrapper" v-else-if="mode == 2">
<view class="sure add-cart" :style="{
color: themeColorFn('addCartColor'),
backgroundColor: themeColorFn('addCartBackgroundColor'),
}" @click="addCart">
{{ addCartText }}
<view class="btn-wrapper" v-else-if="mode == 2">
<view class="sure add-cart" :style="{
color: themeColorFn('addCartColor'),
backgroundColor: themeColorFn('addCartBackgroundColor'),
}" @click="addCart">
{{ addCartText }}
</view>
</view>
</view>
<view class="btn-wrapper" v-else-if="mode == 3">
<view class="sure" :style="{
color: themeColorFn('buyNowColor'),
backgroundColor: themeColorFn('buyNowBackgroundColor'),
}" @click="buyNow">
{{ buyNowText }}
<view class="btn-wrapper" v-else-if="mode == 3">
<view class="sure" :style="{
color: themeColorFn('buyNowColor'),
backgroundColor: themeColorFn('buyNowBackgroundColor'),
}" @click="buyNow">
{{ buyNowText }}
</view>
</view>
</view>
<view class="btn-wrapper" v-else-if="mode == 5">
<view class="sure" style="width: 698rpx;" :style="{
color: themeColorFn('addCartColor'),
backgroundColor: themeColorFn('addCartBackgroundColor'),
}" @click="addProduct">
{{ addProductLine }}
<view class="btn-wrapper" v-else-if="mode == 5">
<view class="sure1" :style="{
color: themeColorFn('addCartColor'),
backgroundColor: themeColorFn('addCartBackgroundColor'),
}" @click="addProduct">
{{ addProductLine }}
</view>
</view>
</view>
</view>
<!-- 页面内容结束 -->
</view>
</template>
......@@ -1231,12 +1234,15 @@ export default {
bottom: 0;
z-index: 990;
overflow: hidden;
max-width: 420px;
margin: 0 auto;
&.show {
display: block;
.mask {
animation: showPopup 0.2s linear both;
max-width: 420px;
}
.layer {
......@@ -1280,6 +1286,7 @@ export default {
bottom: 0;
border-radius: 10rpx 10rpx 0 0;
background-color: #fff;
max-width: 420px;
.specification-wrapper {
// width: 100%;
......@@ -1468,6 +1475,18 @@ export default {
background: #fe560a;
}
.sure1 {
width: 100%;
height: 68rpx;
border-radius: 38rpx;
color: #fff;
line-height: 68rpx;
text-align: center;
font-weight: 500;
font-size: 28rpx;
background: #fe560a;
}
.sure.add-cart {
background: #ff9402;
}
......
src/pages/productLine/components/categoryPopup.vue
浏览文件 @ 1eda27be
<template>
<u-popup
v-model="show"
mode="bottom"
length="90%"
:mask-close-able="false"
closeable
@close="handleClose"
>
<u-popup v-model="show" mode="bottom" length="80%" :mask-close-able="false" closeable @close="handleClose">
<view class="u-wrap">
<!-- 搜索 -->
<view
style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;"
>
<uni-search-bar
placeholder="输入搜索商品"
bgColor="#EEEEEE"
clearButton="auto"
cancelButton="none"
@confirm="search"
/>
<view style="width: 90%; height: 50px; position: fixed; top: 0; z-index: 1; background-color: #fff;">
<uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none"
@confirm="search" />
</view>
<view class="u-menu-wrap">
<scroll-view
scroll-y
scroll-with-animation
class="u-tab-view menu-scroll-view"
:scroll-top="scrollTop"
>
<view
v-for="(item, index) in categoryList"
:key="item.id"
class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']"
:data-current="index"
@tap.stop="swichMenu(index, item.id)"
>
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
<view v-for="(item, index) in categoryList" :key="item.id" class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
@tap.stop="swichMenu(index, item.id)">
<text class="u-line-1">{{ item.name }}</text>
</view>
</scroll-view>
<view class="right-cates">
<block v-for="(item, index) in currentSubCategoryData" :key="item.id">
<view class="item-container" @tap="cateGoryGoods(item)">
<u-image
width="100rpx"
height="100rpx"
:src="
item.picUrl.split('http').length > 1
? item.picUrl
: baseUrl + item.picUrl
"
></u-image>
<u-image width="100rpx" height="100rpx" :src="
item.picUrl.split('http').length > 1
? item.picUrl
: baseUrl + item.picUrl
"></u-image>
<view class="content">
<view class="title">
<text>{{ item.name }}</text>
......@@ -63,12 +35,8 @@
</view>
</u-popup>
<search-popup
ref="searchPopupRef"
:show="showSearchPopup"
@search-close="searchClose"
@cateGoryGoods="cateGoryGoods"
/>
<search-popup ref="searchPopupRef" :show="showSearchPopup" @search-close="searchClose"
@cateGoryGoods="cateGoryGoods" />
</template>
<script setup lang="ts">
......@@ -189,11 +157,16 @@ defineExpose({
</script>
<style lang="scss" scoped>
:deep(.uni-scroll-view-content) {
// background-color: #f6f6f6;
}
.right-cates {
width: 100%;
height: 100%;
background-color: #fff;
padding: 0 24rpx;
.item-container {
box-sizing: border-box;
width: 100%;
......@@ -203,20 +176,24 @@ defineExpose({
justify-content: flex-start;
align-items: center;
border-bottom: 1rpx solid #f5f5f5;
.content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 20rpx;
.title {
display: flex;
flex-direction: column;
}
.price {
.new-price {
font-size: 32rpx;
}
.old-price {
margin-left: 10rpx;
color: #969799;
......
src/pages/productLine/productLine.vue
浏览文件 @ 1eda27be
......@@ -770,6 +770,16 @@ let reload = () => {
<style lang="scss" scoped>
$nav-heigth: var(--window-bottom);
:deep(.u-mask) {
max-width: 420px;
margin: 0 auto;
}
:deep(.u-drawer-content) {
max-width: 420px;
margin: 0 auto;
}
.add {
position: absolute;
width: 180px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论