Skip to content

J
jz_Travel
Commit 43c063c7 authored by 罗超's avatar 罗超
Browse files
Options

修改商品页

parent 954a0c03
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 121 deletions
components/goods/style5.vue
View file @ 43c063c7
<template> <template>
<view <view style="background-repeat: no-repeat;background-size: 100% auto;" :style="{
class="her-scoller" 'background-image': `url(${goodsInfo.bgImg})`,
:style="{ 'background-color':`${goodsInfo.backgroundColor}`,
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '', 'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
}" 'paddingTop':`${goodsInfo.bgPaddingTop!=''?goodsInfo.bgPaddingTop:0}px`,
> 'paddingBottom':`${goodsInfo.bgPaddingBottom!=''?goodsInfo.bgPaddingBottom:0}px`,
<view 'marginLeft':`${goodsInfo.bgPaddingLeft!=''?goodsInfo.bgPaddingLeft:0}px`,
class="good-five" 'marginRight':`${goodsInfo.bgPaddingRight!=''?goodsInfo.bgPaddingRight:0}px`,
@click="openGood(item)" }">
v-for="(item, gli) in goodList" <view
:key="gli" class="her-scoller">
:style="{
border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '', <view
background: class="good-five"
goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : '', @click="openGood(item)"
}" v-for="(item, gli) in goodList"
> :key="gli"
<view class="tips" v-if="goodsInfo.showGoodsTag" :style="{
><image border: goodsInfo.goodsStyle == 2 ? '1px solid rgb(226, 226, 226)' : '',
:src="goodsInfo.goodsTagPicUrl" background:
mode="widthFix" goodsInfo.goodsStyle == 1 || goodsInfo.goodsStyle == 2 ? '#FFF' : '',
style="width: 100%" }"
/></view> >
<view class="img-box-style5"> <view class="tips" v-if="goodsInfo.showGoodsTag"
<image >
style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0" <image
:mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="goodsInfo.goodsTagPicUrl"
:src="item.picUrl" mode="widthFix"
/> style="width: 100%" v-if="goodsInfo.goodsTagPicUrl.indexOf('goods-tag-xp.png')==-1"/>
</view> <span style="background: #F7DFA4;border-radius: 4rpx;padding:4rpx 8rpx;font-size: 18rpx;color: #584825;">新品首发</span>
<view class="good-info"> </view>
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ <view style="position: absolute; z-index: 2; top:135rpx;left:12rpx;right: 12rpx;display: flex;font-size: 18rpx;color:#FFF">
item.name <view style="height: 24rpx;line-height: 24prx;padding: 0 8rpx;background-color: #18A86B;">
}}</view> {{item.thirdname.split('·')[0]}}
<view class="good-sub-name" style="height: 35rpx"> </view>
<template v-if="item.subname">{{ item.subname }}</template> <view style="width:1px;flex:1;height: 24rpx;line-height: 24prx;padding: 0 8rpx;background-color: rgba(0,0,0,.4);">
</view> {{item.startDate?item.startDate:item.thirdname.split('·')[1]}}
<view class="good-price-info"> </view>
<view class="price"> </view>
<view class="good-sub-name" style="flex: 1">{{ <view class="img-box-style5">
item.thirdname <image
}}</view> style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0"
<span> :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'"
{{ goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : "" }} :src="item.picUrl"
</span> />
<!-- <span style='text-decoration: line-through;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span> --> </view>
</view> <view class="good-info">
<view <view class="good-name" v-if="goodsInfo.showGoodsName">{{
class="buy" item.name
v-if="goodsInfo.showBuyBtn" }}</view>
@click.stop="showSkuHandler(item)" <!-- <view class="good-sub-name" style="height: 35rpx">
> <template v-if="item.subname">{{ item.subname }}</template>
<u-icon </view> -->
name="cart-o" <view class="good-price-info">
size="40" <view class="price" style="display: flex; align-items: center;">
:color="mainColor" <!-- <view class="good-sub-name" style="flex: 1">{{
v-if="goodsInfo.buyBtn == 'cart'" item.thirdname
/> }}</view> -->
<u-icon <span style="width: 1px; flex:1">
name="add-o" <text style="font-weight: bold;font-size: 22rpx;color: #080A09;margin-right: 5rpx;">¥</text>
size="40" {{ goodsInfo.showGoodsPrice ? item.price : "" }}
:color="mainColor" </span>
v-else-if="goodsInfo.buyBtn == 'add'" <span style="font-size: 18rpx;color: #B99846;">
/> {{item.startCity?item.startCity:''}}
<u-button </span>
type="primary" <!-- <span style='text-decoration: line-through;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span> -->
size="mini" </view>
:ripple="true" <!-- <view
:color="goodsInfo.buttonColor" class="buy"
:custom-style="`backgroundColor:${goodsInfo.buttonColor},color:${ v-if="goodsInfo.showBuyBtn"
goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4 @click.stop="showSkuHandler(item)"
? goodsInfo.buttonColor >
: '#FFF' <u-icon
}`" name="cart-o"
:plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4" size="40"
:shape=" :color="mainColor"
goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4 v-if="goodsInfo.buyBtn == 'cart'"
? 'circle' />
: 'square' <u-icon
" name="add-o"
v-else size="40"
> :color="mainColor"
{{ goodsInfo.buyBtnText }} v-else-if="goodsInfo.buyBtn == 'add'"
</u-button> />
</view> <u-button
</view> type="primary"
</view> size="mini"
</view> :ripple="true"
<good-sku :color="goodsInfo.buttonColor"
v-if="showSku" :custom-style="`backgroundColor:${goodsInfo.buttonColor},color:${
:option-type="2" goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4
borderRadius="20" ? goodsInfo.buttonColor
v-model="showSku" : '#FFF'
:good="sku" }`"
></good-sku> :plain="goodsInfo.buyBtnStyle == 2 || goodsInfo.buyBtnStyle == 4"
<auth :shape="
v-if="showAuth" goodsInfo.buyBtnStyle == 3 || goodsInfo.buyBtnStyle == 4
@changeuserinfo="reloadUserinfo" ? 'circle'
@gbAuth="gbAuth" : 'square'
></auth> "
</view> v-else
>
{{ goodsInfo.buyBtnText }}
</u-button>
</view> -->
</view>
</view>
</view>
<good-sku
v-if="showSku"
:option-type="2"
borderRadius="20"
v-model="showSku"
:good="sku"
></good-sku>
<auth
v-if="showAuth"
@changeuserinfo="reloadUserinfo"
@gbAuth="gbAuth"
></auth>
</view>
</view>
</template> </template>
<script> <script>
import goodSku from "../goods/goodsku"; import goodSku from "../goods/goodsku";
...@@ -124,6 +143,7 @@ export default { ...@@ -124,6 +143,7 @@ export default {
}, },
created() { created() {
this.mainColor = this.$uiConfig.mainColor; this.mainColor = this.$uiConfig.mainColor;
console.log(this.goodsInfo)
}, },
methods: { methods: {
openGood(item) { openGood(item) {
...@@ -199,39 +219,44 @@ export default { ...@@ -199,39 +219,44 @@ export default {
position: relative; position: relative;
margin-right: 30rpx; margin-right: 30rpx;
display: inline-block; display: inline-block;
width: 560rpx; width: 265rpx;
box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2); /* box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2); */
border-radius: 20rpx; border-radius: 12rpx;
overflow: hidden;
} }
.her-scoller .good-five .tips { .her-scoller .good-five .tips {
width: 64rpx; width: 64rpx;
height: 64rpx; height: 64rpx;
position: absolute; position: absolute;
top: 0; top: 8rpx;
left: 0; left: 10rpx;
z-index: 4; z-index: 4;
} }
.her-scoller .good-five .img-box-style5 { .her-scoller .good-five .img-box-style5 {
/* width: 100%; */ /* width: 100%; */
height: 224rpx; height: 168rpx;
border-radius: 20rpx; border-top-right-radius: 12rpx;
border-top-left-radius: 12rpx;
overflow: hidden; overflow: hidden;
} }
.her-scoller .good-five .good-info { .her-scoller .good-five .good-info {
padding: 30rpx; padding: 18rpx;
background-color: #FFF;
} }
.her-scoller .good-five .good-info .good-name { .her-scoller .good-five .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; display: -webkit-box;
/* -webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; */ -webkit-box-orient: vertical;
white-space: nowrap; overflow: hidden;
margin-bottom: 10rpx; width: 221rpx;
font-size: 26rpx; white-space: break-spaces;
width: 100%; font-weight: bold;
font-weight: 600; font-size: 22rpx;
color: #080A09;
line-height: 30rpx;
} }
.her-scoller .good-five .good-info .good-sub-name { .her-scoller .good-five .good-info .good-sub-name {
overflow: hidden; overflow: hidden;
...@@ -248,14 +273,15 @@ export default { ...@@ -248,14 +273,15 @@ export default {
align-items: center; align-items: center;
} }
.her-scoller .good-five .good-info .good-price-info .price { .her-scoller .good-five .good-info .good-price-info .price {
color: #ff4544;
flex: 1; flex: 1;
font-size: 14px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
/* flex-direction: column; */ /* flex-direction: column; */
font-weight: 800;
font-size: 34rpx;
color: #FF3166;
} }
.her-scoller .good-five .good-info .good-price-info .buy { .her-scoller .good-five .good-info .good-price-info .buy {
width: 24px; width: 24px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment