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