159 lines
7.8 KiB
Vue
159 lines
7.8 KiB
Vue
|
<template>
|
||
|
|
<view class="preference_warp">
|
||
|
|
<view class="header_comm">
|
||
|
|
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
||
|
|
<view>好物优选专区</view>
|
||
|
|
<up-image src="/static/common/share.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpInviteFriends"></up-image>
|
||
|
|
</view>
|
||
|
|
<view class="preference_content_warp">
|
||
|
|
<up-swiper
|
||
|
|
:list="swiperList"
|
||
|
|
height="140"
|
||
|
|
>
|
||
|
|
</up-swiper>
|
||
|
|
<view class="preference_title">
|
||
|
|
<up-image src="/static/product/title_bg.png" width="100%" height="20" bgColor="#f1f6ff00"></up-image>
|
||
|
|
<view class="msg">好物优选</view>
|
||
|
|
</view>
|
||
|
|
<view class="preference_product">
|
||
|
|
<view class="product_item" v-for="item in productList">
|
||
|
|
<view class="product_item_left">
|
||
|
|
<up-image :src="item.url" width="100" height="100" bgColor="#f1f6ff00"></up-image>
|
||
|
|
<view class="product_item_left_bz product_item_left_bz_img" v-if="item.type === 1">
|
||
|
|
<view>爆款专区</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="product_item_right">
|
||
|
|
<view class="title_warp">{{item.name}}</view>
|
||
|
|
<view class="price_warp">
|
||
|
|
<view class="price_o_warp">
|
||
|
|
<view class="price_o_title_warp">原价</view>
|
||
|
|
<view class="price_o_value_warp">
|
||
|
|
<text>￥</text>
|
||
|
|
<text>{{item.oPrice}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="price_zq_warp">
|
||
|
|
<view class="price_lj_warp">专区立省{{item.zqPrice}}元</view>
|
||
|
|
<view class="price_ds_warp">到手￥<text style="font-size: 31rpx;">{{item.price}}</text></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
swiperList:[
|
||
|
|
'/static/home/banner03.png',
|
||
|
|
],
|
||
|
|
productList:[
|
||
|
|
{
|
||
|
|
id:1,
|
||
|
|
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||
|
|
url:"/static/common/product_def.png",
|
||
|
|
zqPrice:42.84,// 专区价格
|
||
|
|
price:424.84,// 到手价格
|
||
|
|
oPrice:466.84,// 原价价格
|
||
|
|
type:1,// 1:爆款区的 0：普通区
|
||
|
|
},{
|
||
|
|
id:2,
|
||
|
|
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||
|
|
url:"/static/common/product_def.png",
|
||
|
|
zqPrice:42.84,// 专区价格
|
||
|
|
price:424.84,// 到手价格
|
||
|
|
oPrice:466.84,// 原价价格
|
||
|
|
type:0,
|
||
|
|
},{
|
||
|
|
id:3,
|
||
|
|
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||
|
|
url:"/static/common/product_def.png",
|
||
|
|
zqPrice:42.84,// 专区价格
|
||
|
|
price:424.84,// 到手价格
|
||
|
|
oPrice:466.84,// 原价价格
|
||
|
|
type:0,
|
||
|
|
},{
|
||
|
|
id:4,
|
||
|
|
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||
|
|
url:"/static/common/product_def.png",
|
||
|
|
zqPrice:42.84,// 专区价格
|
||
|
|
price:424.84,// 到手价格
|
||
|
|
oPrice:466.84,// 原价价格
|
||
|
|
type:1,
|
||
|
|
},{
|
||
|
|
id:5,
|
||
|
|
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||
|
|
url:"/static/common/product_def.png",
|
||
|
|
zqPrice:42.84,// 专区价格
|
||
|
|
price:424.84,// 到手价格
|
||
|
|
oPrice:466.84,// 原价价格
|
||
|
|
type:0,
|
||
|
|
},{
|
||
|
|
id:6,
|
||
|
|
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||
|
|
url:"/static/common/product_def.png",
|
||
|
|
zqPrice:42.84,// 专区价格
|
||
|
|
price:424.84,// 到手价格
|
||
|
|
oPrice:466.84,// 原价价格
|
||
|
|
type:0,
|
||
|
|
},{
|
||
|
|
id:7,
|
||
|
|
name:"Michael Kors I Jodie 老花狗牙托特包手提单肩包-小号...",
|
||
|
|
url:"/static/common/product_def.png",
|
||
|
|
zqPrice:42.84,// 专区价格
|
||
|
|
price:424.84,// 到手价格
|
||
|
|
oPrice:466.84,// 原价价格
|
||
|
|
type:0,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
jumpHome(){
|
||
|
|
uni.switchTab({
|
||
|
|
url: '/pages/home/home',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 邀请好友
|
||
|
|
jumpInviteFriends(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/invite_friends/invite_friends',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.product_item_left_bz_img{
|
||
|
|
height: 32rpx;
|
||
|
|
width: 140rpx;
|
||
|
|
background-image: url("data:image/png;base64,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");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-position: center; /* 将图片居中显示 */
|
||
|
|
}
|
||
|
|
.price_o_warp{
|
||
|
|
background: #FFF5F5FF;
|
||
|
|
color: #F9241F;
|
||
|
|
}
|
||
|
|
.price_o_title_warp{
|
||
|
|
color: #F9241FFF;
|
||
|
|
}
|
||
|
|
.price_o_value_warp{
|
||
|
|
color: #F9241FFF;
|
||
|
|
}
|
||
|
|
.price_zq_warp{
|
||
|
|
color: #FFDB62FF;
|
||
|
|
background: linear-gradient(-88deg, #FA2222, #F83600);
|
||
|
|
}
|
||
|
|
.price_lj_warp{
|
||
|
|
background: #CE2300FF;
|
||
|
|
color: #FFF6ED;
|
||
|
|
}
|
||
|
|
</style>
|