|
|
@@ -0,0 +1,301 @@
|
|
|
+<template>
|
|
|
+ <view class="item-cmd_bx" @click="customNum(info.variety)">
|
|
|
+ <view class="img_bx" style="background:#eeeeee" @click.stop="showBigImg">
|
|
|
+ <image :src="info.cover" lazy-load="true" :lazy-load-margin="0" v-if="isImg"></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.presell == 1">预售</text>
|
|
|
+ {{ info.itemName}}
|
|
|
+ </view>
|
|
|
+ <view class="kc num-open_bx flex-space">
|
|
|
+ <view>
|
|
|
+ <view class="flex-space" style="color:#333333;position:absolute;top:13upx;">
|
|
|
+ <block v-if="info.ratioType == 0">
|
|
|
+ {{info.ratio}}{{info.smallUnit}}/{{info.bigUnit}}
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ 若干{{info.smallUnit}}/{{info.bigUnit}}
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="text-align: right" >
|
|
|
+ <view class="open-bx" >
|
|
|
+ <i class="iconfont iconjian" :class="delAnimationData?'animation':''" @click.stop="delEvent(info.variety)" v-if="bigCount > 0 || smallCount > 0"></i>
|
|
|
+ <text class="num">
|
|
|
+ <text v-if="bigCount > 0" style="font-weight:bold;color:#3385ff;">{{ `${bigCount}` }}</text>
|
|
|
+ <text v-if="smallCount > 0" >{{ `${smallCount}` }}</text>
|
|
|
+ </text>
|
|
|
+ <i class="iconfont iconzeng" :class="addAnimationData?'animation':''" @click.stop="addEvents(info.variety)"></i>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { COMMODITY_TYPE } from "@/utils/declare";
|
|
|
+import AppImg from "@/components/app-img";
|
|
|
+import { changePriceByIdApi } from '@/api/product/index'
|
|
|
+import animationMins from "@/mixins/animation";
|
|
|
+import allSelectInput from "@/components/module/allSelectInput";
|
|
|
+import allSelectInputMins from "@/mixins/allSelectInput";
|
|
|
+export default {
|
|
|
+ name: "Commodity",
|
|
|
+ components: {
|
|
|
+ AppImg,allSelectInput
|
|
|
+ },
|
|
|
+ mixins: [animationMins,allSelectInputMins],
|
|
|
+ props: {
|
|
|
+ info: {
|
|
|
+ required: true,
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: COMMODITY_TYPE.COMMON
|
|
|
+ },
|
|
|
+ bigCount: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ scrollTop: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ smallCount: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ discount:{
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ showStock:{
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ autoPrice: {},
|
|
|
+ offPrice: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ offVerifyRepertory: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ COMMODITY_TYPE,
|
|
|
+ isImg:false,
|
|
|
+ isAlterMoney:false,
|
|
|
+ isAloneAllActive: false,
|
|
|
+ isAloneAllFocus: false,
|
|
|
+ isShowSucceed:false,
|
|
|
+ changeAutoPrice:'',
|
|
|
+ showPrice:0.00,
|
|
|
+ ifFocus:false,
|
|
|
+ showMaxStock:230,//囤货时显示的最大库存
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.isImg = true;
|
|
|
+ },100)
|
|
|
+ if(this.info.priceLabel == 2){
|
|
|
+ this.changeAutoPrice = this.info.price
|
|
|
+ }
|
|
|
+ this.showPrice = this.info.price;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //input点击删除按键
|
|
|
+ deleteInputVal(){
|
|
|
+ this.isAloneAllActive=false;
|
|
|
+ this.changeAutoPrice = '';
|
|
|
+ },
|
|
|
+ //离开input
|
|
|
+ moveAllInput(e){
|
|
|
+ this.isAloneAllActive=false;
|
|
|
+ this.isAloneAllFocus=false;
|
|
|
+ // if(e==''){return}
|
|
|
+ this.changeAutoPrice = e?e:0;
|
|
|
+ if(this.isAlterMoney){
|
|
|
+ this.isAlterMoney = false;
|
|
|
+ // let self = this
|
|
|
+ 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{
|
|
|
+ this.$msg(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showBigImg(){
|
|
|
+ this.$emit("showBigCover", this.info);
|
|
|
+ },
|
|
|
+ addEvents(variety) {
|
|
|
+ const ratio = Number(this.info.ratio);
|
|
|
+ if(this.offVerifyRepertory){
|
|
|
+ if(this.info.stock<=0){
|
|
|
+ uni.showToast({title:'没有货了',icon:'none'})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (Number(this.bigCount) * ratio + Number(this.smallCount) >Number(this.info.bigNum) * ratio + Number(this.info.smallNum)) {
|
|
|
+ this.$msg("库存只剩"+this.info.bigNum);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.animationFun('add');
|
|
|
+ this.$emit("add", this.info);
|
|
|
+ },
|
|
|
+ delEvent(variety) {
|
|
|
+ this.animationFun('del');
|
|
|
+ console.log(this.info,'this.info')
|
|
|
+ this.$emit("del", this.info);
|
|
|
+ },
|
|
|
+ changePriceEvent(event) {
|
|
|
+ this.isFocus = false;
|
|
|
+ this.isAlterMoney = true;
|
|
|
+
|
|
|
+ },
|
|
|
+ customNum(variety) {
|
|
|
+
|
|
|
+ if(this.info.stock<=0){
|
|
|
+ uni.showToast({title:'没有货了',icon:'none'})
|
|
|
+ return
|
|
|
+ }
|
|
|
+ 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,
|
|
|
+ smallCount: this.smallCount
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</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: 30upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width:380upx;
|
|
|
+ }
|
|
|
+ & .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;
|
|
|
+ top:60upx;
|
|
|
+ font-weight:550;
|
|
|
+ }
|
|
|
+ & .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:40upx;
|
|
|
+ line-height:40upx;
|
|
|
+ text-align:center;
|
|
|
+ margin: 0 8upx;
|
|
|
+ color: #868686;
|
|
|
+ border-radius: 22upx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ font-size: 24upx;
|
|
|
+ }
|
|
|
+ .change-input {
|
|
|
+ width: 164upx;
|
|
|
+ height: 60upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ text-align: center;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px 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>
|
shish