123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421 |
- <template>
- <view class="other">
- <view class="other-1">大家还在拼</view>
-
- <view class="preferred_item" v-for="item in recommendedlist" @click.stop="ToKaiTuan(item)">
- <view class="flex_item" style="overflow: hidden;">
- <view class="tlist-img">
- <view class="leftImgIcon">AA团</view>
- <!-- <view class="leftImgIcon" v-if="sid == 129">达人团</view> -->
- <view class="img"><image :src="item.image" mode="scaleToFill"></image></view>
- </view>
- <view class="tlist-img " v-for="imgItem in item.images">
- <view class="img"><image :src="imgItem" mode="scaleToFill"></image></view>
- </view>
- </view>
- <view class="goods_name">
- <view class="goods_title flex_item">
- <view class="text">{{ item.min_people }}人团</view>
- <view class="title">{{ item.title }}</view>
- </view>
- <view class="goods-height">
- <!-- <view class="goods_num clamp">{{ item.info }}</view> -->
- <view class="flex goods-peplo">
- <view class="goods-tip flex_item">
- <view class="peplo">库存剩{{ item.percent | parseIntTo }}%</view>
- <view class="make">{{ item.mark }}</view>
- </view>
- <view class="right flex_item">
- <image src="/static/icon/hot.png" mode="aspectFill"></image>
- <text>已拼{{ item.sales }}份</text>
- </view>
- </view>
- </view>
- <view class="price flex">
- <view class="price_list">
- <view class="price-red">
- <text>单人仅付:</text>
- <text class="moneyIcon">¥</text>
- <text class="money">{{ item.price }}</text>
- <text class="moneyType">/{{ item.unit_name }}</text>
- <!-- <text class="outMoney">¥{{ item.product_price }}</text> -->
- </view>
- </view>
- <view class="img position-relative" @click.stop="ToKaiTuan(item)">去开团</view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- recommendedlist: {
- type: Array,
- default: function() {
- return {
- };
- }
- }
- },
- data() {
- return {};
- },
- filters: {
- parseIntTo(percent) {
- percent = +percent * 100;
- if (percent % 1 === 0) {
- return percent;
- } else {
- percent = percent.toFixed(1);
- return percent;
- }
- }
- },
- methods: {
- // 去开团
- ToKaiTuan(item) {
- console.log(8754847)
- let id = item.id;
- uni.navigateTo({
- url: '/pages/product/productGroup?id=' + id
- });
- },
- }
- };
- </script>
- <style lang="scss">
- .other{
- .other-1{
- font-size:27rpx;
- color:#333333;
- line-height: 55rpx;
- }
-
- .preferred_item {
- width: 100%;
- height: 100%;
- padding: 25rpx 25rpx;
- position: relative;
- background-color:
- border-radius: 15rpx;
- margin-bottom: 15rpx;
- .tlist-img {
- width: 225rpx;
- position: relative;
- margin-right: 15rpx;
- .leftImgIcon {
- position: absolute;
- top: 0;
- left: 0;
- font-size: 22rpx;
- font-family: PingFangSC;
- color: rgba(148, 71, 34, 1);
- background: rgba(254, 242, 111, 1);
- z-index: 99;
- border-radius: 5rpx;
- padding: 5rpx 10rpx;
- }
- .img {
- width: 210rpx;
- height: 210rpx;
- image {
- width: 100%;
- height: 100%;
- border-radius: 20rpx;
- }
- }
- .stock {
- margin-top: 13rpx;
- font-size: 26rpx;
- background:
- width: 100%;
- color:
- padding: 6rpx 0;
- border-radius: 5rpx;
- justify-content: center;
- align-items: center;
- position: absolute;
- left: 0;
- bottom: 0;
- .img {
- width: 20rpx;
- height: 20rpx;
- flex-shrink: 0;
- }
- .stock-num {
- padding-left: 7rpx;
- font-size: 22rpx;
- border-radius: 5rpx;
- height: 32rpx;
- line-height: 32rpx;
- }
- }
- }
- .goods_name {
- .goods_title {
- padding-top: 15rpx;
- color:rgba(0,0,0,1);
- // white-space: nowrap;
- // overflow: hidden;
- // text-overflow: ellipsis;
- font-size:32rpx;
- color: $font-color-dark;
- // height: 70rpx;
- align-items: baseline;
- .text{
- border-radius: 8rpx;
- border: 2rpx solid
- color:
- padding:0rpx 10rpx;
- font-size: 26rpx !important;
- margin-right: 15rpx;
-
- }
- .title {
- width: 80%;
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- }
- .goods-height {
- min-height: 60rpx;
- }
- .goods_num {
- font-size: 26rpx;
- color:
- padding-bottom: 15rpx;
- }
- .goods-peplo {
- height: 45rpx;
- margin-top: 15rpx;
- .right {
- color:#8e8e8e;
- font-size: 24rpx;
- width:195rpx;
- image {
- width: 30rpx;
- height: 33rpx;
- margin-right: 15rpx;
- }
- }
- .goods-tip {
- .peplo {
- background:linear-gradient(14deg,rgba(255,116,37,1),rgba(255,30,41,1));
- padding: 5rpx 10rpx;
- color:
- border-top-left-radius:8rpx;
- border-bottom-left-radius: 8rpx;
- }
- .make {
- background-color:
- color:
- border-top-right-radius: 8rpx;
- border-bottom-right-radius: 8rpx;
- }
- .make,
- .peplo {
- font-size: $font-sm;
- padding: 5rpx 10rpx;
- }
- }
- }
- .price {
- font-size: 28rpx;
- position: relative;
- padding-top: 15rpx;
- .price_list {
- .price-red {
- font-size: 30rpx !important;
- font-family: Source Han Sans CN;
- color: rgba(253, 27, 42, 1);
- font-size: $font-base;
- font-weight: bold;
- .moneyIcon {
- font-weight: normal !important;
- }
- .money {
- font-size: 58rpx;
- }
- .moneyType {
- font-weight: 400;
- }
- .outMoney {
- font-weight: 400;
- text-decoration: line-through;
- color: rgba(142, 142, 142, 1);
- }
- }
- .price-green {
- color:
- font-size: 26rpx !important;
- font-weight: bold;
- text {
- background: linear-gradient(45deg, rgba(21, 197, 52, 1), rgba(21, 197, 52, 1));
- color:
- padding: 0rpx 10rpx;
- border-radius: 7rpx;
- font-size: 24rpx !important;
- margin-left: 15rpx;
- }
- }
- }
- .img {
- width: 265rpx;
- height: 74rpx;
- line-height: 74rpx;
- // background:linear-gradient(14deg,rgba(255,116,37,1),rgba(255,30,41,1));
- background: linear-gradient(270deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
- border-radius: 99rpx;
- color:
- font-size: $font-lg;
- text-align: center;
- }
- .img1{
- background-color:
- width: 265rpx;
- height: 74rpx;
- line-height: 74rpx;
- border-radius: 99rpx;
- color:
- font-size: $font-lg;
- text-align: center;
- }
- .tomorrow {
- background:
- color:
- border-radius: 25rpx;
- padding: 10rpx 25rpx;
- }
- }
- }
- }
-
-
- .other-2{
- width: 100%;
- background:#ffffff;
- padding: 10rpx 15rpx ;
- border-radius: 20rpx;
- .content-row{
- padding: 10rpx 0;
- .row-1{
- width: 210rpx;
- position: relative;
- margin-right: 20rpx;
- text-align: center;
- .row-1-1{
- text-align: center;
- height:40rpx;
- background:#fff1ee;
- border-radius:6rpx;
- font-size:22rpx;
- font-weight:500;
- color:#fb4912;
- line-height:40rpx;
- image{
- width: 23rpx;
- height: 23rpx;
- margin-right: 5rpx;
- }
- }
- .img1{
- width:170rpx;
- height:170rpx;
- border-radius:10rpx;
- }
- .img2{
- position: absolute;
- top: 0;
- left: 16rpx;
- width:80rpx;
- height:32rpx;
- border-radius:5px;
- }
- }
- .row-2{
- padding: 20rpx 0 20rpx 0;
- width:calc(100% - 210rpx);
- position: relative;
-
- border-bottom: 1px solid
- .word-1{
- font-size:32rpx;
- font-weight:bold;
- color:#141821;
- margin-left: 10rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .word-2{
- margin-top: 10rpx;
- font-size:24rpx;
- color:#979797;
- }
- .word-3{
- margin-top: 10rpx;
- position: relative;
- font-size:20rpx;
- color:#ffffff;
- image{
- width: 235rpx;
- height: 50rpx;
- }
- .word-3-1{
- position: absolute;
- top:8px;
- left:2px;
- width: 230rpx;
- text-align: center;
- .word-3-1-1{
- display: inline-block;
- color:#FD1B2A;
- width: 50%;
- }
-
- }
- }
- .word-4{
- margin-top: 15rpx;
- font-size:23rpx;
- color:#fd1b2a;
- margin-left: 10rpx;
- text{
- font-size:23rpx;
- font-weight:bold;
- }
- .word-4-1{
- font-size:36rpx;
- }
- }
- .word-5{
- margin-top: 15rpx;
- font-size:21rpx;
- color:#868686;
- }
- .button{
- width:145rpx;
- height:60rpx;
- background:linear-gradient(14deg,#ff7425,#ff1e29);
- border-radius:30rpx;
- font-size:27rpx;
- font-weight:bold;
- color:#ffffff;
- line-height:60rpx;
- text-align: center;
-
- position: absolute;
- bottom: 20rpx;
- right: 0;
- }
- }
- }
- }
- }
- </style>
|