vip列表原价展示

This commit is contained in:
2022-08-11 17:22:58 +08:00
parent d6e3ebef1a
commit c0fc64054d
6 changed files with 318 additions and 2002 deletions

View File

@@ -10,8 +10,8 @@ import router from '../router'
// 基础配置 // 基础配置
const config = { const config = {
apiUrl : 'https://api.gongli.vip/api/', // 正式环境 // apiUrl : 'https://api.gongli.vip/api/', // 正式环境
// apiUrl : 'http://api.gl.shangkelian.cn/api/', // 测试 apiUrl : 'http://api.gl.shangkelian.cn/api/', // 测试
timeout : 60000 timeout : 60000
} }

View File

@@ -1,17 +1,21 @@
<template> <template>
<view class="goods-item"> <view class="goods-item">
<image :src="item.cover" mode="aspectFill" class="goods-cover" /> <view class="bg"> {{item.shop_vip.message}} </view>
<image :src="item.cover" mode="aspectFill" class="goods-cover" />
<view class="tags"> VIP </view> <view class="tags"> VIP </view>
<view class="goods-info"> <view class="goods-info">
<view class="_title">{{item.name}}</view> <view class="_title">{{item.name}}</view>
<view class="_des"> <view class="_des"> {{item.shop.name}} </view>
{{item.shop.name}} <view class="_pin" v-if="item.sales>0">
</view> <view class="_has">
<view class="_pin" v-if="item.sales>0"> <image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已换购 {{item.sales}}
<view class="_has"> <image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已换购 {{item.sales}} </view> </view>
</view> </view>
<view class="price"> <view class="price">
<view class="money">{{item.price.price_min}} <span>DT积分</span> </view> <view class="money">
{{item.price.price_min}} <span>DT积分</span>
<span class='del'>{{item.original_price}} DT积分</span>
</view>
<view class="now-pin" @click="goPin(item.goods_id)">立即领取</view> <view class="now-pin" @click="goPin(item.goods_id)">立即领取</view>
</view> </view>
</view> </view>
@@ -29,8 +33,8 @@
} }
}, },
methods: { methods: {
goPin(id) { goPin(id) {
this.$emit('goPin',id) this.$emit('goPin', id)
} }
}, },
}; };
@@ -45,22 +49,35 @@
background-color: white; background-color: white;
border-radius: 10rpx; border-radius: 10rpx;
padding: $padding; padding: $padding;
margin-bottom: 20rpx; margin-bottom: 20rpx;
position: relative; position: relative;
overflow: hidden; z-index: 0;
.tags { overflow: hidden;
position: absolute;
top: 6rpx; .bg {
left: -54rpx; position: absolute;
background: #d81e06; top: -40rpx;
color: #fff; right: -10rpx;
width: 150rpx; opacity: 0.1;
font-size: 24rpx; font-size: 130rpx;
padding: 4rpx 0; color: $main-color;
text-align: center; z-index: 1;
transform: rotate(-45deg); font-weight: bold;
font-weight: bold; }
letter-spacing:2rpx;
.tags {
position: absolute;
top: 6rpx;
left: -54rpx;
background: #d81e06;
color: #fff;
width: 150rpx;
font-size: 24rpx;
padding: 4rpx 0;
text-align: center;
transform: rotate(-45deg);
font-weight: bold;
letter-spacing: 2rpx;
} }
.goods-cover { .goods-cover {
@@ -82,17 +99,18 @@
} }
._des { ._des {
font-size: 28rpx; font-size: 26rpx;
padding: 6rpx 0; padding: 10rpx 0;
color: #4f300a; margin-bottom: 4rpx;
display: flex; color: #4f300a;
flex-direction: row; display: flex;
align-items: center; flex-direction: row;
justify-content: flex-start; align-items: center;
justify-content: flex-start;
box-sizing: border-box; box-sizing: border-box;
} }
._pin { ._pin {
font-size: 26rpx; font-size: 26rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -113,7 +131,7 @@
border-radius: 30rpx; border-radius: 30rpx;
image { image {
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
@@ -135,11 +153,20 @@
.money { .money {
font-size: 34rpx; font-size: 34rpx;
font-weight: 600; font-weight: 600;
color: #d81e06; color: #d81e06;
span{
font-size: 24rpx; span {
margin-left: 10rpx; font-size: 24rpx;
font-weight: normal; margin-left: 10rpx;
font-weight: normal;
}
.del {
text-decoration: line-through;
margin-left: 10rpx;
font-size: 24rpx;
color: #999;
font-weight: normal;
} }
} }

View File

@@ -55,7 +55,8 @@
<view class="tags"> VIP </view> <view class="tags"> VIP </view>
</view> </view>
<view class="news-title nowrap">{{item.name}}</view> <view class="news-title nowrap">{{item.name}}</view>
<view class="news-price nowrap">{{item.price.price_min}} <text>DT积分</text></view> <view class="news-price nowrap">{{item.price.price_min}} <text>DT积分</text></view>
<!-- <view class="news-price nowrap through">{{item.original_price}} <text>DT积分</text></view> -->
</view> </view>
</view> </view>
</view> </view>
@@ -70,7 +71,7 @@
<view class="card-box-item" style="{'backgrond': #FFF}" v-if="index < 4" <view class="card-box-item" style="{'backgrond': #FFF}" v-if="index < 4"
@click="$Router.push({name: 'ShopDetail', params: {ShopId: item.shop_id}})"> @click="$Router.push({name: 'ShopDetail', params: {ShopId: item.shop_id}})">
<view class="card-title">{{item.name}}</view> <view class="card-title">{{item.name}}</view>
<view class="card-subtitle"> 优质店铺 </view> <view class="card-subtitle"> {{item.type.code == 2 ? 'VIP优质店铺' : '优质店铺'}} </view>
<view class="card-btn">前往体验</view> <view class="card-btn">前往体验</view>
<image class="card-cover" :src="item.cover" mode="aspectFill" /> <image class="card-cover" :src="item.cover" mode="aspectFill" />
</view> </view>
@@ -359,12 +360,16 @@
font-size: $title-size-sm; font-size: $title-size-sm;
font-weight: bold; font-weight: bold;
color: $text-price; color: $text-price;
line-height: 40rpx; line-height: 40rpx;
text { text {
margin-left: 6rpx; margin-left: 6rpx;
font-size: 70%; font-size: 70%;
} }
}
.through{
text-decoration: line-through !important;
} }

View File

@@ -406,12 +406,14 @@
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
position: relative;
top: 5rpx;
text { text {
margin-right: $margin/2; margin-right: $margin/2;
padding-left: 6rpx; padding-left: 6rpx;
font-size: 70%; font-size: 70%;
} }
.kucun { .kucun {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long