220 lines
6.6 KiB
Vue
220 lines
6.6 KiB
Vue
<template>
|
|
<view class="content" :style="{'--padding':index == 0?'56rpx':'20rpx'}">
|
|
<image v-if="index == 0" class="First-Img" src="https://img.agrimedia.cn/chwl/v2/20220909-164805.png" mode="">
|
|
</image>
|
|
<view class="shop-box" @click="goShop">
|
|
<view class="flex flex-space-between">
|
|
<view class="flex">
|
|
<view class="">
|
|
<u-image :src="goodsInfo.store_img" radius="10rpx" width="200rpx" height="200rpx"></u-image>
|
|
</view>
|
|
<view v-if="dataType == 0" class="" style="margin-left: 20rpx;">
|
|
<u-text size="30rpx" :bold="true" :text="goodsInfo.store_name" :lines="1"></u-text>
|
|
<u-text size="22rpx" color="#999"
|
|
:text="(goodsInfo.goods_sales == null?0:goodsInfo.goods_sales) + '销量'"></u-text>
|
|
<view class="">
|
|
<u-gap height="20rpx"></u-gap>
|
|
<view class="flex" v-for="(item1,index1) in goodsInfo.goods" :key="index1">
|
|
<view class="">
|
|
<u-text lineHeight="40rpx" :bold="true" size="30rpx" color="#FF4D03"
|
|
:text="'¥'+item1.price/100"></u-text>
|
|
</view>
|
|
|
|
<view class="" style="margin: 10rpx;">
|
|
<u-text lineHeight="40rpx" decoration="line-through" size="22rpx" color="#999"
|
|
:text="'¥'+item1.originalPrice/100"></u-text>
|
|
</view>
|
|
<view class="">
|
|
<u-text lineHeight="40rpx" lines="1" size="30rpx" :text="item1.goodsTitle"></u-text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- <view class="">
|
|
<text class="check-shop" @click="goShop">查看店铺</text>
|
|
</view> -->
|
|
</view>
|
|
<view v-if="dataType == 1" class="" style="margin-left: 20rpx;">
|
|
<u-text size="30rpx" :bold="true" :text="goodsInfo.goodsTitle" :lines="1"></u-text>
|
|
<u-gap height="10rpx"></u-gap>
|
|
<view v-if="active == 0" class="flex flex-space-between">
|
|
<view class="" style="width: 100%;">
|
|
<!-- <u-line-progress height="18rpx" activeColor="#F14E10" inactiveColor="#FE8D3D" :percentage="70" :showText="true">
|
|
</u-line-progress> -->
|
|
<u-gap height="10rpx"></u-gap>
|
|
<progress backgroundColor="#FE8D3D" activeColor="#F14E10"
|
|
:percent="goodsInfo.sales_num/goodsInfo.num" border-radius="40rpx" font-size="20rpx"
|
|
active stroke-width="3" />
|
|
</view>
|
|
<view class="flex" style="width: 180rpx;">
|
|
<view class="">
|
|
<u-text size="20rpx" text="已抢%"></u-text>
|
|
</view>
|
|
<u-count-to fontSize="20rpx" :startVal="0" :endVal="goodsInfo.sales_num/goodsInfo.num">
|
|
</u-count-to>
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex flex-space-between">
|
|
<u-gap height="26rpx"></u-gap>
|
|
</view>
|
|
<!-- <u-line-progress height="18rpx" activeColor="#F14E10" inactiveColor="#FE8D3D" :percentage="20" :showText="true">
|
|
<view class="" solt="default" style="font-size: 18rpx;line-height: 18rpx;">
|
|
已抢20%
|
|
</view>
|
|
</u-line-progress> -->
|
|
<u-text size="22rpx" lines="1" color="#999" :text="goodsInfo.address"></u-text>
|
|
<u-gap height="10"></u-gap>
|
|
<view class="">
|
|
<view class="flex">
|
|
<view class="">
|
|
<u-text lineHeight="40rpx" color="#FE2825" size="30rpx" text="秒杀价"></u-text>
|
|
</view>
|
|
<view class="">
|
|
<u-text lineHeight="40rpx" :bold="true" size="36rpx" color="#FF4D03"
|
|
:text="'¥'+goodsInfo.seckill_price/100"></u-text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="">
|
|
<u-text lineHeight="40rpx" size="24rpx" color="#666666" :text="'即将恢复￥'+goodsInfo.price/100"></u-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="dataType == 0">
|
|
|
|
<u-text align="center" size="22rpx" color="#999" :text="goodsInfo.distance + 'km'"></u-text>
|
|
</view>
|
|
<view v-if="dataType== 1" class="" style="min-width: 130rpx;">
|
|
<u-gap height="44rpx"></u-gap>
|
|
<u-text align="center" size="22rpx" color="#999"
|
|
:text="active==0?'已抢'+ goodsInfo.sales_num +'件':' '"></u-text>
|
|
<u-text align="center" size="22rpx" color="#999"
|
|
:text="(goodsInfo.distance > 999?'999+':goodsInfo.distance)+'km'"></u-text>
|
|
<u-gap height="60rpx"></u-gap>
|
|
<view style="text-align: center;">
|
|
<text @click.stop="goGoodsinfo(goodsInfo.goods_id)" v-if="active == 0"
|
|
style="margin: 0 auto;color:#ffffff;text-align: center;padding: 0 20rpx;border-radius: 20rpx;font-size: 24rpx;background-color: #FF7B2D;">抢购</text>
|
|
<view class="begin" v-else>
|
|
<image class="begin_image" src="../../static/image/begin.png"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "goods-item",
|
|
props: {
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
dataType: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
active: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
goodsInfo: {
|
|
type: Object,
|
|
default: {
|
|
store_img: '',
|
|
store_name: '',
|
|
goods_sales: 0,
|
|
goods: [],
|
|
goodsTitle: '',
|
|
sales_num: 0,
|
|
num: 0,
|
|
address: '',
|
|
seckill_price: 0,
|
|
price: 0,
|
|
distance: '',
|
|
goods_id: 0
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
goGoodsinfo(item_id) {
|
|
uni.navigateTo({
|
|
url: '../../pages/goodsInfo/goodsInfo?goods_id=' + item_id
|
|
})
|
|
|
|
},
|
|
goShop() {
|
|
uni.navigateTo({
|
|
url: '/pages/shop/shop?store_id=' + this.goodsInfo.store_id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.check-shop {
|
|
background-color: #FF4D02;
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.content {
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: var(--padding) 20rpx 20rpx 20rpx;
|
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.First-Img {
|
|
width: 322rpx;
|
|
height: 86rpx;
|
|
position: absolute;
|
|
top: -30rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 8rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 28rpx solid transparent;
|
|
border-right: 10rpx solid transparent;
|
|
border-bottom: 21rpx solid #DD6409;
|
|
z-index: -1;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 12rpx solid transparent;
|
|
border-right: 10rpx solid transparent;
|
|
border-bottom: 21rpx solid #DD6409;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.begin_image {
|
|
width: 184rpx;
|
|
height: 54rpx;
|
|
}
|
|
</style>
|