[‘我的资产-我的优惠券’]

components/goods-template/goods-template.vue

@@ -0,0 +1,173 @@
+<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>