174 lines
3.6 KiB
Vue
174 lines
3.6 KiB
Vue
<template>
|
|
<view class="GoodTemplate">
|
|
<view class="goods-item">
|
|
<image class="goods-img" @click="goDetail(item.goods_id)" hover-class="none" :src="item.cover"
|
|
mode="aspectFill" />
|
|
<view class="goods-info" @click="goDetail(item.goods_id)">
|
|
<view class="goods-title ellipsis-2">{{item.name}}</view>
|
|
<view class="goods-price">
|
|
<span>￥</span>{{item.price.price_min}}/权证
|
|
<span style='color: #ffaa00;'><span>点击量:</span> {{item.clicks}}</span>
|
|
</view>
|
|
</view>
|
|
<view class="exchange" v-if="exchangeShow" @click="exchange(item)">
|
|
兑换商品
|
|
</view>
|
|
</view>
|
|
<!-- <u-toast ref="uToast" /> -->
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
exchangeGoods
|
|
} from '@/apis/interfaces/coupon'
|
|
export default {
|
|
name: "GoodTemplate",
|
|
props: {
|
|
item: Object,
|
|
exchangeShow: {
|
|
type: Boolean,
|
|
default: function() {
|
|
return false;
|
|
}
|
|
},
|
|
// 只有提货券会把数据传递拖来，其他不会传过来的
|
|
couponGrantId: {
|
|
type: String,
|
|
default: function() {
|
|
return '';
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
exchange(item) {
|
|
console.error('兑换商品')
|
|
console.log(item, this.couponGrantId)
|
|
let data = {
|
|
conpon_grant_id: this.couponGrantId,
|
|
goods_id: this.item.goods_id,
|
|
goods_sku_id: this.item.skus[0].sku_id,
|
|
}
|
|
console.log(data)
|
|
uni.showModal({
|
|
title: '哎呦，提醒你',
|
|
content: '您是否确认兑换该商品',
|
|
success: (res) => {
|
|
exchangeGoods(data).then(res => {
|
|
console.log(res)
|
|
this.$refs.uToast.show({
|
|
title: res,
|
|
type: 'primary',
|
|
duration: 3000
|
|
})
|
|
wx.setStorageSync('refresh', true)
|
|
setTimeout(res => {
|
|
uni.navigateBack({})
|
|
}, 3000)
|
|
}).catch(err => {
|
|
this.$refs.uToast.show({
|
|
title: err.message,
|
|
type: 'primary',
|
|
duration: 3000
|
|
})
|
|
})
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
goDetail(id) {
|
|
this.$Router.push({
|
|
name: 'GoodsDetail',
|
|
params: {
|
|
id: id
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 商品列表
|
|
.goods-item {
|
|
width: calc(100% - 20rpx);
|
|
box-shadow: 0 0 20rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
|
border-radius: 16rpx;
|
|
// margin-left: 20rpx;
|
|
margin: 40rpx 0 0 20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.exchange {
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
right: 30rpx;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 20rpx 0 20rpx 0;
|
|
background-color: $main-color;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.goods-img {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
position: relative;
|
|
top: -20rpx;
|
|
left: -20rpx;
|
|
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.goods-info {
|
|
flex: 1;
|
|
height: 180rpx;
|
|
padding: 20rpx 20rpx 20rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-around;
|
|
box-sizing: border-box;
|
|
|
|
.goods-title {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.goods-price {
|
|
color: $main-color;
|
|
padding-top: 10rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
box-sizing: border-box;
|
|
|
|
span {
|
|
font-size: 26rpx;
|
|
// padding-right: 10rpx;
|
|
font-weight: normal;
|
|
|
|
&:nth-child(2) {
|
|
padding-left: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|