|
|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <view class="item-cmd_bx" @click="showAddModelFn()">
|
|
|
+
|
|
|
+ <button @click.stop="copyCreate(info)" class="admin-button-com mini-btn default"
|
|
|
+ style="position:absolute;bottom:20upx;font-size:24upx;left:0upx;z-index:20;">复制新建</button>
|
|
|
+
|
|
|
+ <view class="img_bx" style="background:#eeeeee">
|
|
|
+ <image :src="info.cover" lazy-load="true" :lazy-load-margin="0"></image>
|
|
|
+ </view>
|
|
|
+ <view class="cmd-info_bx">
|
|
|
+ <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.frontHide && info.frontHide == 1">隐</text>
|
|
|
+ <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 || "" }}
|
|
|
+ <text v-if="info.variety && info.variety ==1" class="show-color"></text>
|
|
|
+ </view>
|
|
|
+ <view class="kc" style="position:absolute;top:55upx;">
|
|
|
+ <block v-if="info.ratioType == 0">{{info.ratio}}{{info.smallUnit}}/{{info.bigUnit}}</block>
|
|
|
+ <block v-else>若干{{info.smallUnit}}/{{info.bigUnit}}</block>
|
|
|
+ </view>
|
|
|
+ <view class="kc num-open_bx flex-end">
|
|
|
+ <view class="price" style="position:absolute;top:55upx;font-weight:bold;">
|
|
|
+ ￥{{ parseFloat(info.price) }}
|
|
|
+ </view>
|
|
|
+ <view style="text-align: right;margin-right:20upx;" >
|
|
|
+ <view class="open-bx" >
|
|
|
+ <i class="iconfont iconjian" @click.stop="reduceItemFn()" v-if="bigCount > 0 || smallCount > 0"></i>
|
|
|
+ <text class="num" >
|
|
|
+ <text style="font-weight:bold;color:#3385ff;" v-if="bigCount > 0">{{ `${bigCount}` }}</text>
|
|
|
+ <text v-if="smallCount > 0">{{ `${smallCount}` }}</text>
|
|
|
+ </text>
|
|
|
+ <i class="iconfont iconzeng" @click.stop="addItemFn()"></i>
|
|
|
+ </view>
|
|
|
+ <text v-if="Number(info.stock) > Number(info.stockWarning)" style="color:#333;margin-right:65upx;">还剩 {{ parseFloat(info.stock) }}</text>
|
|
|
+ <text v-else style="color:red;font-weight:bold;margin-right:65upx;">还剩 {{ parseFloat(info.stock) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Commodity",
|
|
|
+ components: {},
|
|
|
+ mixins: [],
|
|
|
+ props: {
|
|
|
+ info: {
|
|
|
+ required: true,
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scrollTop: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ autoPrice: {},
|
|
|
+ isActive: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ checkStock: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ isAlterPrice: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ selectJobType:{
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ifFocus:false,
|
|
|
+ bigCount:0,
|
|
|
+ smallCount:0,
|
|
|
+ userPrice:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ info:{
|
|
|
+ handler(newValue){
|
|
|
+ this.bigCount = newValue.bigCount
|
|
|
+ this.smallCount = newValue.smallCount
|
|
|
+ this.userPrice = newValue.userPrice
|
|
|
+ },
|
|
|
+ deep:true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.bigCount = this.info.bigCount
|
|
|
+ this.smallCount = this.info.smallCount
|
|
|
+ this.userPrice = this.info.userPrice
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ copyCreate(info){
|
|
|
+ this.pageTo({url: '/admin/item/copy?id='+info.id})
|
|
|
+ },
|
|
|
+ addItemFn () {
|
|
|
+ if(this.info && this.info.variety == 1 && this.selectJobType == 'bill'){
|
|
|
+ //小菊多颜色选择页
|
|
|
+ this.$emit("goToSpecialVariety", this.info);
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.$emit("replaceItemFn", this.info,0,'add')
|
|
|
+ },
|
|
|
+ reduceItemFn() {
|
|
|
+ if(this.info && this.info.variety == 1 && this.selectJobType == 'bill'){
|
|
|
+ //小菊多颜色选择页
|
|
|
+ this.$emit("goToSpecialVariety", this.info);
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.$emit("replaceItemFn", this.info,0,'sub')
|
|
|
+ },
|
|
|
+ showAddModelFn() {
|
|
|
+ if(this.info && this.info.variety == 1 && this.selectJobType == 'bill'){
|
|
|
+ //小菊多颜色选择页
|
|
|
+ this.$emit("goToSpecialVariety", this.info);
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.$emit("showAddModelFn", { ...this.info, bigCount: this.bigCount, smallCount: this.smallCount, userPrice: this.userPrice})
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.item-cmd_bx {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .img_bx {
|
|
|
+ height: 140upx;
|
|
|
+ width: 140upx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0upx;
|
|
|
+ top: 0upx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cmd-info_bx {
|
|
|
+ padding-left: 160upx;
|
|
|
+ padding-bottom: 30upx;
|
|
|
+ & .tit {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width:380upx;
|
|
|
+ }
|
|
|
+ .show-color{
|
|
|
+ display:inline-block;
|
|
|
+ width:25upx;
|
|
|
+ height:25upx;
|
|
|
+ background-color:rgb(9, 199, 9);
|
|
|
+ border-radius:15upx;
|
|
|
+ border:none;
|
|
|
+ margin-left:16upx;
|
|
|
+ }
|
|
|
+ & .kc {
|
|
|
+ position: relative;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24upx;
|
|
|
+ .price{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .num-open_bx {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ & .price {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #ff2842;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ & .open-bx {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ & .iconfont {
|
|
|
+ color: #3385ff;
|
|
|
+ font-size: 55upx;
|
|
|
+ }
|
|
|
+ .position{
|
|
|
+ display: block;
|
|
|
+ width: 70upx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .iconcachu {
|
|
|
+ margin: 0 6upx 0 20upx;
|
|
|
+ color: #ccc;
|
|
|
+ &.edit {
|
|
|
+ color: #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > .num {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100upx;
|
|
|
+ height:50upx;
|
|
|
+ line-height:50upx;
|
|
|
+ text-align:center;
|
|
|
+ margin: 0 20upx;
|
|
|
+ color: #868686;
|
|
|
+ border-radius: 22upx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ .change-input {
|
|
|
+ width: 164upx;
|
|
|
+ height: 60upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ text-align: center;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1upx solid #dddddd;
|
|
|
+ border-radius: 4upx;
|
|
|
+ font-size: 25upx;
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ width: 100upx;
|
|
|
+ height: 60upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #3385ff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
