circulation_ancientCoins_new/pages/coinsDetail/index.vue

<template>
    <view class="coinsDetail-wrap">
        <view :class="{ 'top': id,'bottom':id }">
            <VisitorInfo :visitorInfo="detailItem" />
        </view>
        <view  v-if="!id" class="showPriceContent">
            <view :class="['showPriceWrap',detailItem.ancient_coin_status == 0 ? 'green':'orange']">
                <view class="flex-between">
                    <view class="label">{{ textObj[detailItem.ancient_coin_status] }}</view>
                    <view class="status3" v-if="detailItem.ancient_coin_status == '1' && detailItem.buying_price">进价 {{ detailItem.buying_price }}元</view>
                    <view class="flex status3" v-if="detailItem.ancient_coin_status == '2'">
                        历史:
                        <view v-if="String(detailItem.buying_price).length > 0">{{  detailItem.buying_price }}元进 </view>
                        <view v-if="String(detailItem.price).length > 0">
                            {{ detailItem.price }}元售
                        </view>
                    </view>
                </view>
                <view class="inputWrap" :class="{ 'greenBorder': price2Length > 0 && detailItem.ancient_coin_status == 0, 'orangeBorder':price2Length > 0 && detailItem.ancient_coin_status != 0 }">
                    <input type="text" placeholder="输入" :focus="isFocus" v-model="price2" >
                    <view class="unit">元</view>
                </view>
            </view>
        </view>

        <view class="list-wrap">
            <view class="list-box-com" v-if="detailItem.status =='2' && id">
                <view class="item flex-between">
                    <view :class="'left ft30'">
                        售价
                    </view>
                    <view class="right ft30">
                        <view class="flex1">
                            <input type="text" v-model="price" @blur="updatePrice('price')">
                            <view>元</view>
                        </view>
                        <img class="editImg" :src="cssUrl + 'form_edit.png'" alt="">
                    </view>
                </view>
            </view>
            <view class="list-box-com" v-if="id">
                <view class="item flex-between">
                    <view :class="'left ft30'">
                        进价
                    </view>
                    <view class="right ft30">
                        <view class="flex1">
                            <input type="text" v-model="buying_price" @blur="updatePrice('buying_price')">
                            <view>元</view>
                        </view>
                        <img class="editImg" :src="cssUrl + 'form_edit.png'" alt="">
                    </view>
                </view>
            </view>
           
            <ListBox v-if="detailItem.rating_code" leftTitle="评级部门" :rightTitle="detailItem.rating_department" />
            <ListBox v-if="detailItem.rating_code" leftTitle="评级编号" :rightTitle="detailItem.rating_code" />
            <ListBox v-if="detailItem.material" leftTitle="材质" :rightTitle="detailItem.material" />
            <ListBox v-if="detailItem.deal_with" leftTitle="处理" :rightTitle="detailItem.deal_with" />
            <ListBox v-if="detailItem.pay_for_level" leftTitle="赔付等级" :rightTitle="detailItem.pay_for_level" />
            <ListBox v-if="detailItem.grade" leftTitle="分数" :rightTitle="detailItem.grade" />
            <ListBox v-if="detailItem.size" leftTitle="尺寸" :rightTitle="detailItem.size" />
            <ListBox v-if="detailItem.remark" leftTitle="备注" :rightTitle="detailItem.remark" />
            <!-- 详情页面展示 -->
            <ListBox v-if="id" leftTitle="操作人" :rightTitle="detailItem.operator" />
        </view>

    </view>
</template>
<script>
import ListBox from '@/components/listBox.vue';
import VisitorInfo from '@/components/visitorInfo.vue';

export default {
    name: "coinsDetail",
    props: ['scanCodeDetail'],
    components: {
        VisitorInfo,
        ListBox
    },
    data() {
        return {
            textObj:{
                0:'进价：',
                '1':'售价：',
                '2':'再次入库价：',
            },
            cssUrl: this.cssUrl1,
            visitorInfo: {},
            id: '',
            detailItem: {},
            scan_code_detail: '',
            price: '',
            buying_price:'',
            price2:'',
            isFocus:false
        }
    },
    computed: {
        price2Length() {
            return this.price2.length
        }
    },
    watch: {
        scanCodeDetail(newVal, oldVal) {
            this.detailItem = { ...newVal }//更新
        }
    },
    mounted() {
        if (this.scanCodeDetail && Object.keys(this.scanCodeDetail).length > 0) {
            this.detailItem = { ...this.scanCodeDetail }
        }

    },
    onLoad(options) {
        // console.log(options,'this.$route.query-=',this.scanCodeDetail);
        const { id } = options;
        // 跳转详情页
        if (id) {
            this.id = id;
            let detailItem = uni.getStorageSync('detail')
            if (detailItem) this.detailItem = JSON.parse(detailItem)
            this.price = this.detailItem.price;
            // this.price1 = this.detailItem.price1 || ''
            this.buying_price = this.detailItem.buying_price;

        }
        // else{
        //     // 扫描后的弹出框信息
        //     // scanCodeDetail props传参
        //     this.detailItem = {...this.scanCodeDetail}
        // }
    },
    methods:{
        updatePrice(type){
            let params={
                scan_code_detail:JSON.stringify({...this.detailItem}),
                rating_code:this.detailItem.rating_code,
                rating_agency_id:this.detailItem.rating_agency_id
            }
            if(type == 'buying_price'){
                if(!this.buying_price.trim() || !this.buying_price.length)return
                params.buying_price = this.buying_price;
            }else{
                if(!this.price.trim() || !this.price.length)return
                params.price = this.price;
            }
            this.$http.req('/api/update_price', {
                ...params
            }, 'POST').then(data => {
                if (data == -1) return
                this.$pop.modelShow(data.msg)
               
            }).catch(res => {
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.flex1{
    display: flex;
    align-items: center;
    flex: 1;
    input{
        flex: 1;
        text-align: right;
    }
}
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.status3{
    font-size: 28rpx;
    font-weight: normal;
    line-height: normal;
    text-align: right;
    letter-spacing: 0.24rpx;
    color: #E81F1F;
    gap: 10rpx;
}
.label{
    color: #333333;
    font-size: 28rpx;
    letter-spacing: 0.24rpx;
}
.green{
    background: #F0F9EB; /* #F0F9EB */
    input{
        border-color: #39D067;
    }
}
.orange{
    background: #FFEFE3;
    input{
        border-color: #DCDCDC;
    }
}
.bottom{
    margin-bottom: 20rpx;
}
.showPriceContent{
    padding: 0 42rpx 24rpx 42rpx;
    background: #fff;
}
.showPriceWrap{
    padding: 24rpx;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: normal;
    line-height: normal;
    text-align: right;
    letter-spacing: 0.24rpx;
    color: #333333;
    input{
        text-align: left;
        flex: 1;
        &::placeholder{
            color: #999999;
        }
    }
    .inputWrap{
        // width: 618rpx;
        margin-top: 12rpx;
        height: 86rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22rpx 24rpx;
        align-self: stretch;
        border-radius: 10rpx;
        box-sizing: border-box;
        background: #FFFFFF;
        border: 2rpx solid #DCDCDC;
        transition: all .3s;
        font-size: 30rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0.22rpx;
        color: #000000;
    }
    .unit{
        font-family: PingFang SC;
        font-size: 30rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0.22rpx;
        color: #333333;
    }
}

.list-box-com {
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;

    .item {
        // width: 692rpx;
        box-sizing: border-box;
        margin: 0 auto;
        display: flex;
        background: #FFFFFF;
        justify-content: space-between;
        line-height: 44rpx;
        font-weight: 400;
        align-items: center;
        padding: 42rpx 0;
        margin: 0 24rpx;
        border-bottom: 2rpx solid #F0F0F0;

        .left {
            text-align: left;
            font-size: 32rpx;
            font-weight: 500;
            line-height: 44rpx;
            letter-spacing: 2rpx;
            color: #222222;
        }

        .right {
            flex-grow: 1;
            display: flex;
            justify-content: flex-end;
            font-size: 32rpx;
            font-weight: normal;
            line-height: normal;
            text-align: right;
            letter-spacing: 0.24rpx;
            color: #666666;
            gap: 24rpx;
            align-items: center;
        }
    }

}
.greenBorder {
    border: 2rpx solid #39D067 !important;
    transition: all .3s;
    background: #fff;
}
.orangeBorder {
    border: 2rpx solid rgba(253, 123, 19, 0.6) !important;
    transition: all .3s;
    background: #fff;
}

.editImg {
    width: 32rpx;
    height: 32rpx;
}

.coinsDetail-wrap {
    .list-wrap {
        padding: 0 18rpx 20rpx 18rpx;
        ;
    }

    .top {
        margin-top: 20rpx;
    }
}
</style>