|
|
- <template>
- <view class="card flex product product-card__view" :class="[direction]" @click="$emit('click')">
- <view class="img" :class="[ data.isRecommend ? 'is-recommend' : '']">
- <image :src="data.imgUrl" mode="aspectFill"></image>
- <image v-if="data.isRecommend" class="mark" src="@/static/image/home/mark-recommend.png"></image>
- </view>
- <view class="flex right">
- <view class="flex flex-column info">
- <view class="title">{{ data.title }}</view>
- <view>{{ data.desc }}</view>
- <view class="flex price" :class="[role]">
- <view>
- <text class="price-unit">¥</text>
- <text>{{ data.price }}</text>
- </view>
-
- <view class="flex tag" v-if="role === 'member-personal'">
- <image class="icon" src="@/static/image/home/icon-member-personal.png"></image>
- <text>个人会员价</text>
- </view>
- <view class="flex tag" v-else-if="role === 'member-business'">
- <image class="icon" src="@/static/image/home/icon-member-business.png"></image>
- <text>企业会员价</text>
- </view>
-
- </view>
- <view class="flex sales">
- <image class="icon" src="@/static/image/home/icon-sales.png"></image>
- <text>{{ `已售出 ${data.sales}单` }}</text>
- </view>
- </view>
- <template v-if="!readonly">
- <button plain class="btn" @click="goToPlaceOrder(data.id)">立即下单</button>
- </template>
- </view>
- </view>
- </template>
-
- <script>
- const TEST_DATA = {
- imgUrl: '../../static/image/home/temp-product.png',
- title: '60分钟肩颈推拿按摩',
- desc: '疏通经络 放松肌肉',
- price: 264,
- sales: 235,
- isRecommend: true,
- }
-
- export default {
- props: {
- data: {
- type: Object,
- default() {
- // todo: delete
- return TEST_DATA
- }
- },
- direction: {
- type: String,
- default: 'horizontal' // horizontal | vertical
- },
- readonly: {
- type: Boolean,
- default: false,
- }
- },
- data() {
- return {
- role: 'member-business', // member-personal | member-business
- }
- },
- methods: {
- goToPlaceOrder(id) {
- this.$utils.navigateTo(`/pages_order/product/productDetail?id=${id}`)
- }
- },
- }
- </script>
-
- <style scoped lang="scss">
- .product {
- margin-top: 20rpx;
- background-color: $uni-fg-color;
- color: #999999;
- font-size: 22rpx;
-
- .img {
- width: 164rpx;
- height: 164rpx;
- box-sizing: border-box;
- position: relative;
-
- image {
- width: 100%;
- height: 100%;
- }
-
- &.is-recommend {
- border: 3rpx solid $uni-color-light;
-
- .mark {
- position: absolute;
- top: 0;
- left: 0;
- width: 68rpx;
- height: 68rpx;
- }
- }
- }
-
- .info {
- flex: 1;
- align-items: flex-start;
- }
-
- .title {
- color: #000000;
- font-size: 28rpx;
- font-weight: 700;
- margin-bottom: 7rpx;
- }
-
- .price {
- color: #FF2A2A;
- font-size: 30rpx;
- margin-top: 7rpx;
- align-items: flex-start;
-
- &-unit {
- font-size: 18rpx;
- margin-right: 3rpx;
- }
-
- .tag {
- font-size: 18rpx;
- font-weight: 700;
- padding: 9rpx 12rpx 9rpx 19rpx;
- margin-left: 4rpx;
-
- .icon {
- width: 27rpx;
- height: 19rpx;
- margin-right: 3rpx;
- }
- }
-
- &.member-personal {
- color: $uni-color-light;
- .tag {
- background-color: rgba($color: #D8FF8F, $alpha: 0.72);
- }
- }
-
- &.member-business {
- color: #FFB465;
- .tag {
- background-color: rgba($color: #FFFBC4, $alpha: 0.72);
- }
- }
- }
-
- .sales {
- justify-content: flex-start;
- margin-top: 8rpx;
-
- .icon {
- width: 19rpx;
- height: 23rpx;
- margin-right: 4rpx;
- }
- }
-
- .btn {
- display: inline-block;
- margin: 0;
- border: none !important;
- background-color: $uni-color-light;
- color: $uni-text-color-inverse;
- font-size: 22rpx;
- line-height: 1;
- padding: 14rpx 28rpx;
- box-sizing: border-box;
- width: auto;
- height: auto;
- border-radius: 29rpx;
- }
-
- .right {
- flex: 1;
- padding-left: 14rpx;
- }
-
- &.vertical {
- padding: 23rpx 22rpx;
-
- .right {
- flex-direction: column;
- align-items: flex-start;
- padding-left: 23rpx;
- }
-
- .img {
- width: 215rpx;
- height: 215rpx;
- border-radius: 15rpx;
- overflow: hidden;
- }
-
- .price {
- .tag {
- margin-left: 15rpx;
- }
- }
-
- .btn {
- margin-top: 4rpx;
- background-image: linear-gradient(#84A73F, #D8FF8F);
- padding: 12rpx 28rpx;
- border-radius: 10rpx;
- }
- }
- }
- </style>
-
|