|
|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+<view class="product">
|
|
|
+ <view class="item-cmd_bx">
|
|
|
+ <view class="img_bx" @click.stop="pageTo({url: '/admin/item/detail',query: {id: info.id}})">
|
|
|
+ <view v-if="info.status == 2" class="sold-out">
|
|
|
+ <view class="sold-out-xj">已下架</view>
|
|
|
+ </view>
|
|
|
+ <image :src="info.cover" style="width:160upx;height:160upx;" lazy-load="true" :lazy-load-margin="0"></image>
|
|
|
+ </view>
|
|
|
+ <view class="cmd-info_bx" @click.stop="checkEvent">
|
|
|
+ <view class="tit">
|
|
|
+ <text style="font-size:22upx;border:1upx solid #3385ff;color:white;background-color:#3385ff;margin-right:5upx;padding-left:5upx;padding-right:5upx;"
|
|
|
+ v-if="info.presell == 1">预售</text>
|
|
|
+ {{ info.name || "" }}
|
|
|
+ </view>
|
|
|
+ <view class="kc">￥{{ parseFloat(info.price) }}</view>
|
|
|
+ <view class="num-open_bx">
|
|
|
+ <view>
|
|
|
+ <view class="open-bx" >
|
|
|
+ <text style="color:#333333;" v-if="info.ratioType == 0">{{info.ratio}}{{info.smallUnit}}/{{info.bigUnit}}</text>
|
|
|
+ <text style="color:#333333;" v-else>若干{{info.smallUnit}}/{{info.bigUnit}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="details-select">
|
|
|
+ <text class="iconfont iconxuanzhong" v-if="isCheck"> </text>
|
|
|
+ <text class="iconfont iconweixuanzhong" v-else> </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "outItem",
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ isPrice: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ isEdit: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ info: {
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isCheck:false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkEvent() {
|
|
|
+ this.isCheck = this.isCheck == true ? false : true
|
|
|
+ this.$emit("checkItem", this.info,this.isCheck)
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.product{
|
|
|
+ height:230upx;
|
|
|
+ .level-price{
|
|
|
+ display:flex;
|
|
|
+ color:rgb(75, 74, 74);
|
|
|
+ text-align: right;
|
|
|
+ font-size:24upx;
|
|
|
+ justify-content:space-around;
|
|
|
+ }
|
|
|
+}
|
|
|
+.item-cmd_bx {
|
|
|
+ height:160upx;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .img_bx {
|
|
|
+ height: 160upx;
|
|
|
+ width: 160upx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0upx;
|
|
|
+ top: 0upx;
|
|
|
+ .sold-out{
|
|
|
+ z-index:998;
|
|
|
+ width:160upx;
|
|
|
+ height:160upx;
|
|
|
+ background-color:black;
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ opacity: 0.6;
|
|
|
+ color:white;
|
|
|
+ text-align:center;
|
|
|
+ .sold-out-xj{
|
|
|
+ line-height:160upx;
|
|
|
+ font-size:28upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cmd-info_bx {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 177upx;
|
|
|
+ .details-select {
|
|
|
+ margin-right: 30upx;
|
|
|
+ position: absolute;
|
|
|
+ top:65upx;
|
|
|
+ right:70upx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 40upx;
|
|
|
+ color: #dddddd;
|
|
|
+ }
|
|
|
+ .iconxuanzhong {
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ &:before{
|
|
|
+ content: ' ';
|
|
|
+ height: 22upx;
|
|
|
+ width: 22upx;
|
|
|
+ border-width: 2upx 2upx 0 0;
|
|
|
+ border-color: #b2b2b2;
|
|
|
+ border-style: solid;
|
|
|
+ -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
|
|
+ transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -12upx;
|
|
|
+ right: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .tit {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ padding-top: 0upx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width:360upx;
|
|
|
+ }
|
|
|
+ .show-color{
|
|
|
+ position:absolute;
|
|
|
+ top:84upx;
|
|
|
+ right:190upx;
|
|
|
+ display:inline-block;
|
|
|
+ width:25upx;
|
|
|
+ height:25upx;
|
|
|
+ background-color:rgb(9, 199, 9);
|
|
|
+ border-radius:15upx;
|
|
|
+ border:none;
|
|
|
+ margin-left:8upx;
|
|
|
+ }
|
|
|
+ & .kc {
|
|
|
+ color:red;
|
|
|
+ font-size: 31upx;
|
|
|
+ padding: 17upx 0 24upx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ & .num-open_bx {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ & .price {
|
|
|
+ font-size: 30upx;
|
|
|
+ color: red;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ & .open-bx {
|
|
|
+ color:#999999;
|
|
|
+ width:300upx;
|
|
|
+ text{
|
|
|
+ font-size: 24upx;
|
|
|
+ }
|
|
|
+ *.warn {
|
|
|
+ color: $redColor;
|
|
|
+ }
|
|
|
+ .hd-price-area{
|
|
|
+ width:190upx;
|
|
|
+ position: absolute;
|
|
|
+ top:37upx;
|
|
|
+ right:-10upx;
|
|
|
+ .change-input {
|
|
|
+ width: 150upx;
|
|
|
+ height: 60upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ text-align: center;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1upx solid #b4b4b4;
|
|
|
+ border-radius: 4upx;
|
|
|
+ font-size: 25upx;
|
|
|
+ color:#777777;
|
|
|
+ display:inline-block;
|
|
|
+ }
|
|
|
+ .change-text{
|
|
|
+ font-size:22upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sk-price-area{
|
|
|
+ width:190upx;
|
|
|
+ position: absolute;
|
|
|
+ top:100upx;
|
|
|
+ right:-10upx;
|
|
|
+ .change-input {
|
|
|
+ width: 150upx;
|
|
|
+ height: 60upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ text-align: center;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1upx solid #b4b4b4;
|
|
|
+ border-radius: 4upx;
|
|
|
+ font-size: 25upx;
|
|
|
+ color:#777777;
|
|
|
+ display:inline-block;
|
|
|
+ }
|
|
|
+ .change-text{
|
|
|
+ font-size:22upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
shish