119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view class="pcard" @click="navigateTo">
|
||
|
|
<view class="imgcontainer">
|
||
|
|
<!-- <u--image :showLoading="true" :src="product.url" width="296rpx" height="218rpx"></u--image> -->
|
||
|
|
<u--image :showLoading="true" :src="product.url" width="234rpx" height="172rpx"></u--image>
|
||
|
|
</view>
|
||
|
|
<view class="infocontainer">
|
||
|
|
<view class="product-title">
|
||
|
|
<text>{{product.title}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="product-tag"><text>{{product.tag}}</text></view>
|
||
|
|
<view class="product-bottom">
|
||
|
|
<view class="product-price"><text>{{product.price}} 积分</text></view>
|
||
|
|
<view class="product-inventory"><text>库存: {{product.inventory}}</text></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
product:Object
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
navigateTo(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:"/pages/simpleshop/order/order?id="+this.product.id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.pcard{
|
||
|
|
width: 296rpx;
|
||
|
|
background: #FFF9F2;
|
||
|
|
box-shadow: 0rpx 4rpx 12rpx 0rpx #eeeeee;
|
||
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
|
|
}
|
||
|
|
.imgcontainer{
|
||
|
|
width: 296rpx;
|
||
|
|
height: 218rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.infocontainer{
|
||
|
|
/* border-top: solid;
|
||
|
|
border-top-width: 1rpx;
|
||
|
|
border-color: #e5e5e8; */
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 18rpx;
|
||
|
|
}
|
||
|
|
.product-title{
|
||
|
|
height: 28rpx;
|
||
|
|
/* font-family: D-DIN, D-DIN; */
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333333;
|
||
|
|
line-height: 28rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
}
|
||
|
|
.product-tag{
|
||
|
|
width: 108rpx;
|
||
|
|
height: 22rpx;
|
||
|
|
/* font-family: Source Han Sans, Source Han Sans; */
|
||
|
|
font-weight: 300;
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #FD0000;
|
||
|
|
line-height: 22rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
border-style: solid;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
border-width: 1rpx;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
.product-bottom{
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
.product-price{
|
||
|
|
font-family: D-DIN, D-DIN;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FD0000;
|
||
|
|
line-height: 36rpx;
|
||
|
|
text-align: start;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
.product-inventory{
|
||
|
|
/* font-family: Source Han Sans, Source Han Sans; */
|
||
|
|
font-weight: 350;
|
||
|
|
font-size: 22rpx;
|
||
|
|
color: #909090;
|
||
|
|
line-height: 24rpx;
|
||
|
|
text-align: end;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
}
|
||
|
|
</style>
|