|
|
@@ -1,36 +1,29 @@
|
|
|
<template>
|
|
|
<view class="item-cmd_bx">
|
|
|
- <view class="img_bx">
|
|
|
- <app-img :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
|
|
|
+ <view class="img_bx" @click="addEvents">
|
|
|
+ <app-img :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
|
|
|
</view>
|
|
|
<view class="cmd-info_bx">
|
|
|
- <view class="tit">{{ info.itemName || "" }}</view>
|
|
|
- <view class="kc">库存{{ info.stock }}</view>
|
|
|
+ <view class="tit" @click="addEvents">{{ info.itemName || "" }}</view>
|
|
|
+ <view class="kc" @click="addEvents">库存 {{ info.stock }}</view>
|
|
|
<view class="num-open_bx">
|
|
|
- <view class="price">¥{{ info.price }}</view>
|
|
|
+ <view class="price">¥{{ showPrice }}</view>
|
|
|
<view class="open-bx" v-if="type == COMMODITY_TYPE.COMMON">
|
|
|
- <i
|
|
|
- class="iconfont iconjian"
|
|
|
- @click="delEvent"
|
|
|
- v-if="bigCount > 0 || smallCount > 0"
|
|
|
- ></i>
|
|
|
- <text class="num" @click="customNum" v-if="bigCount > 0 || smallCount > 0">
|
|
|
+ <i class="iconfont iconjian" :class="delAnimationData?'animation':''" @click="delEvent" v-if="bigCount > 0 || smallCount > 0"></i>
|
|
|
+ <text class="num" @click="customNum">
|
|
|
<text v-if="bigCount > 0 || smallCount > 0">{{ `${bigCount}` }}</text>
|
|
|
<text v-if="smallCount > 0">/</text>
|
|
|
<text v-if="smallCount > 0">{{ `${smallCount}` }}</text>
|
|
|
</text>
|
|
|
- <i class="iconfont iconzeng" @click="addEvent"></i>
|
|
|
+ <i class="iconfont iconzeng" :class="addAnimationData?'animation':''" @click="addEvents"></i>
|
|
|
</view>
|
|
|
<view class="open-bx" v-else-if="type == COMMODITY_TYPE.CHANGE">
|
|
|
- <input
|
|
|
- class="change-input"
|
|
|
- :value="autoPrice"
|
|
|
- type="digit"
|
|
|
- placeholder="自动调价"
|
|
|
- @change="changePriceEvent"
|
|
|
- />
|
|
|
- <i class="iconfont iconcachu edit" v-if="info.priceLabel==2" @click="removeEvent"></i>
|
|
|
- <i class="iconfont iconcachu" v-else></i>
|
|
|
+ <allSelectInput :isActive="isAloneAllActive" :isFocus="isAloneAllFocus" :value="changeAutoPrice" :placeholder="'自动调价'"
|
|
|
+ @deleteInputVal="deleteInputVal" @initAllInput="initAloneAllInput" @moveAllInput="moveAllInput">
|
|
|
+ </allSelectInput>
|
|
|
+ <!--<input class="change-input" v-model="changeAutoPrice" type="digit" placeholder="自动调价" selection-start="0" selection-end="1" />-->
|
|
|
+ <i :class="isShowSucceed?'position iconfont iconjihuo':'position'" ></i>
|
|
|
+ <view class="btn-box" @click="changePriceEvent">确定</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -40,11 +33,18 @@
|
|
|
<script>
|
|
|
import { COMMODITY_TYPE } from "@/utils/declare";
|
|
|
import AppImg from "@/components/app-img";
|
|
|
+import { autoPriceByIdApi, changePriceByIdApi } from '@/api/product/index'
|
|
|
+import productMins from "@/mixins/productContrapose";
|
|
|
+import animationMins from "@/mixins/animation";
|
|
|
+
|
|
|
+import allSelectInput from "@/components/module/allSelectInput";
|
|
|
+import allSelectInputMins from "@/mixins/allSelectInput";
|
|
|
export default {
|
|
|
name: "Commodity",
|
|
|
components: {
|
|
|
- AppImg
|
|
|
+ AppImg,allSelectInput
|
|
|
},
|
|
|
+ mixins: [productMins,animationMins,allSelectInputMins],
|
|
|
props: {
|
|
|
info: {
|
|
|
required: true,
|
|
|
@@ -65,32 +65,84 @@ export default {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
},
|
|
|
- autoPrice: {}
|
|
|
+ autoPrice: {},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- COMMODITY_TYPE
|
|
|
+ COMMODITY_TYPE,
|
|
|
+ // isAllActive: false,
|
|
|
+ // isAllFocus: false,
|
|
|
+ isAloneAllActive: false,
|
|
|
+ isAloneAllFocus: false,
|
|
|
+
|
|
|
+ isShowSucceed:false,
|
|
|
+ changeAutoPrice:'',
|
|
|
+ showPrice:0.00,
|
|
|
+ ifFocus:false
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
+ mounted() {
|
|
|
+ if(this.info.priceLabel == 2){
|
|
|
+ this.changeAutoPrice = this.info.price
|
|
|
+ }
|
|
|
+ this.showPrice = this.info.price
|
|
|
+ },
|
|
|
methods: {
|
|
|
- addEvent() {
|
|
|
+ //input点击删除按键
|
|
|
+ deleteInputVal(){
|
|
|
+ this.isAloneAllActive=false;
|
|
|
+ this.changeAutoPrice = '';
|
|
|
+ },
|
|
|
+ //离开input
|
|
|
+ moveAllInput(e){
|
|
|
+ this.isAloneAllActive=false;
|
|
|
+ this.isAloneAllFocus=false;
|
|
|
+ if(e==''){return}
|
|
|
+ this.changeAutoPrice = e;
|
|
|
+ },
|
|
|
+ addEvents() {
|
|
|
+ this.animationFun('add');
|
|
|
+ // let params = {
|
|
|
+ // ...this.info,
|
|
|
+ // bigCount: this.bigCount,
|
|
|
+ // smallCount: this.smallCount
|
|
|
+ // };
|
|
|
+ // this.$emit("add", this.info,params);
|
|
|
this.$emit("add", this.info);
|
|
|
},
|
|
|
delEvent() {
|
|
|
+ this.animationFun('del');
|
|
|
this.$emit("del", this.info);
|
|
|
},
|
|
|
-
|
|
|
- removeEvent() {
|
|
|
- this.$emit("remove", this.info);
|
|
|
- },
|
|
|
- changePriceEvent(event) {
|
|
|
- const {
|
|
|
- detail: { value }
|
|
|
- } = event;
|
|
|
- this.$emit("changePrice", this.info, value);
|
|
|
+ async changePriceEvent(event) {
|
|
|
+ this.isFocus = false;
|
|
|
+ let self = this
|
|
|
+ await changePriceByIdApi({
|
|
|
+ productId: this.info.id,
|
|
|
+ price: this.changeAutoPrice
|
|
|
+ }).then(res => {
|
|
|
+ if(res.code == 1){
|
|
|
+ this.showPrice = res.data.price
|
|
|
+ this.isShowSucceed = true
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.isShowSucceed = false
|
|
|
+ },1000)
|
|
|
+ }else{
|
|
|
+ self.$msg(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
customNum() {
|
|
|
+ // if(!this.info.bigCount){
|
|
|
+ if(!this.bigCount && !this.smallCount){
|
|
|
+ let params = {
|
|
|
+ ...this.info,
|
|
|
+ bigCount: this.bigCount,
|
|
|
+ smallCount: this.smallCount
|
|
|
+ };
|
|
|
+ this.$emit("addOneEvent", this.info,params);
|
|
|
+ }
|
|
|
this.$emit("customNum", {
|
|
|
...this.info,
|
|
|
bigCount: this.bigCount,
|
|
|
@@ -137,8 +189,15 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
& .iconfont {
|
|
|
+ //margin-left: 15rpx;
|
|
|
color: #3385ff;
|
|
|
- font-size: 50px;
|
|
|
+ font-size: 42px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .position{
|
|
|
+ display: block;
|
|
|
+ width: 70rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.iconcachu {
|
|
|
margin: 0 6px 0 20px;
|
|
|
@@ -150,13 +209,14 @@ export default {
|
|
|
& > .num {
|
|
|
display: inline-block;
|
|
|
width: 120rpx;
|
|
|
+ height:45rpx;
|
|
|
text-align:center;
|
|
|
margin: 0 8px;
|
|
|
- color: #5C5C5C;
|
|
|
+ color: #868686;
|
|
|
border-radius: 22px;
|
|
|
background-color: #f5f5f5;
|
|
|
- padding: 10px 0;
|
|
|
- font-size: 32rpx;
|
|
|
+ padding: 3px 0;
|
|
|
+ font-size: 25rpx;
|
|
|
}
|
|
|
.change-input {
|
|
|
width: 164px;
|
|
|
@@ -166,10 +226,20 @@ export default {
|
|
|
background: #ffffff;
|
|
|
border: 1px solid #dddddd;
|
|
|
border-radius: 4px;
|
|
|
- font-size: 28px;
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #3385ff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
</style>
|