YXGJ/cloud/commodityAdjustment/detail.vue

<template>
    <view>
        <swiper class="swiper">
            <swiper-item v-for="item in files" :key="item.attachmentid">
                <u--image :src="item.cover" :lazy-load="true" width="100vw" :height="tovw(377)"
                    @click.stop="previewImg(item.url)">
                    <template v-slot:loading>
                        <u-loading-icon color="red" />
                    </template>
                </u--image>
            </swiper-item>
        </swiper>

        <view class="head">
            <view class="name">{{ detail.name || '--' }}</view>
            <text class="model u-line-1" v-if="detail.model">型号：{{ detail.model }}</text>
            <text class="subtitle u-line-1" v-if="detail.subtitle">{{detail.subtitle}}</text>
        </view>

        <!-- <text class="descript">注：价格不能超过4000元/台</text> -->
        <view class="price-content">
            <view class="item-box">
                <text class="price-label">付款方式：</text>
                <u-radio-group v-model="detail.pricetype"
                    @change="init()">
                    <u-radio :customStyle="{marginRight:tovw(50)}" key="一口价" label="一口价" name="一口价" />
                    <u-radio :customStyle="{}" key="阶梯价" label="阶梯价" name="阶梯价" />
                </u-radio-group>
            </view>
            <AForm ref="form" :form="form" @isUncomplete="isUncomplete"></AForm>
        </view>
        <view :style="{height: tovw(80)}" ></view>
        <view class="footer">
            <view class="add" :class="uncomplete ? 'forbidden' : ''" hover-class="navigator-hover"
                @click="uncomplete || loading ? '' : submit()">
                <u-loading-icon v-if="loading" />
                <block v-else>
                    {{  '保存' }}
                </block>
            </view>
        </view>
    </view>
</template>

<script>
import AForm from '../../components/my_form2.vue'
import { viewImage, formattedFiles } from "../../utils/settleFiles"
export default {
    components:{AForm},
    data () {
        return {
            files:[],
            detail: {
                sa_fadid:'',
            },
            form:[],
            uncomplete:false,
            loading:false,
        }
    },
    onLoad (options) {
        this.detail.sa_fadid = options.id
        this.getDetail()
    },
    methods: {
        isUncomplete(uncomplete,actions) {
            console.log(uncomplete,'验证');
            this.uncomplete = uncomplete;
        },
        submit() {
            this.loading = true;
            let that = this;
            // let is = this.$refs.form.list.some(v=> {
            //     if (v.inputmode == 'digit' && v.value > 4000) {
            //         uni.showToast({
            //             title:'价格<=4000元'
            //         })
            //         return true
            //     } else {
            //         false
            //     }
            // })
            // if (is) return this.loading = false
            this.$refs.form.submit().then(data => {
                let form = Object.assign({},that.detail,data)
                this.$Http.basic({
                    "id": 20240428154102,
                    "content": form
                }).then(async res => {
                    this.loading = false;
                    console.log("修改信息", res)
                    if (this.cutoff(res.msg)) return;
                    that.getDetail()
                    uni.showToast({
                        title:'修改成功'
                    })
                    this.$Http.editProduct()
                    setTimeout(() => {
                        uni.navigateBack()
                    },400)
                })
            })
        },
        previewImg(url) {
            viewImage(url)
        },
        getDetail() {
            this.$Http.basic({
                "id": "20240428154202",
                "content": {
                    "sa_fadid": this.detail.sa_fadid
                }
            }).then(res => {
                if (this.cutoff(res.msg)) return;
                this.files = formattedFiles(res.data.attinfos_pic.map(v => v.attinfos[0])).map((v, i) => {
                    if (v.fileType == 'image') v.cover = this.getSpecifiedImage(v, 'compressed')
                    if (i == 0) res.data.cover = v.cover;
                    return v
                })
                this.detail = res.data;
                this.detail.isonsale = this.detail.isonsale+''
                this.init()
                console.log(this.files,this.detail,'数据');
                uni.setNavigationBarTitle({
                    title: '编辑商品'
                });
            })

        },
        async init () {
            let form
            if (this.detail.pricetype == '一口价') {
                form = [{
                    key: "price",
                    type: "text",
                    inputmode:'digit',
                    label: "价格（元/",
                    isMust: true,//是否必填
                    value: "",
                    descript:'官方指导价：',
                },{
                    key: "tag",
                    type: "text",
                    inputmode:'text',
                    label: "标签",
                    isMust: false,//是否必填
                    value: "",
                    paddingBottom:15,
                    borderRadius:true,
                    descript:'官方建议：'
                },{
                    key: "isonsale",
                    type: "radio",
                    options:[{label:'上架',name:'1',marginRight:50},{label:'下架',name:'0'}],
                    label: "状态",
                    isMust: true,//是否必填
                    value: "",
                }]
            } else {
                form = [{
                    key: "price_rebate",
                    type: "text",
                    inputmode:'digit',
                    label: "总部返利价（元/",
                    isMust: true,//是否必填
                    value: "",
                    descript:'官方指导价：',
                },{
                    key: "price_original",
                    type: "text",
                    inputmode:'digit',
                    label: "原价（元/",
                    isMust: true,//是否必填
                    value: "",
                    paddingBottom:15,
                    descript:'官方指导价：',
                },{
                    key: "price_store",
                    type: "text",
                    inputmode:'digit',
                    label: "店面最低价（元/",
                    isMust: true,//是否必填
                    value: "",
                    paddingBottom:15,
                    descript:'官方指导价：',
                },{
                    key: "price_deposit",
                    type: "text",
                    inputmode:'digit',
                    label: "定金（元/",
                    isMust: true,//是否必填
                    value: "",
                    paddingBottom:15,
                    descript:'官方指导价：',
                },{
                    key: "isonsale",
                    type: "radio",
                    options:[{label:'上架',name:'1',marginRight:50},{label:'下架',name:'0'}],
                    label: "状态",
                    isMust: true,//是否必填
                    value: "",
                }]
            }
            
            form = form.map(v => {
                if (v.key == 'tag') v.descript = v.descript + this.detail.officialinfo[v.key]
                if (v.key != 'isonsale' && v.key != 'tag') {
                    v.descript = v.descript + this.detail.officialinfo[v.key]
                    v.label = v.label + this.detail.unitname + '）'
                }
                v.value = this.detail[v.key] || v.value
                return v
            })
            this.form = form
            console.log(this.form,'value');

        },
    },
}
</script>

<style lang="scss">
.swiper {
    width: 100vw;
    height: 377px;
}
.descript {
    font-weight: 400;
    font-size: 14px;
    color: #E3041F;
    padding-left: 10px;
}
.price-content {
    background: #ffffff;
    margin-top: 10px;
    .item-box {
        display: flex;
        align-content: center;
        align-items: center;
        padding: 15px 0 0 10px;
        .price-label {
            margin-right: 10px;
            color: #666666;
        }
    }
}
.head {
    position: relative;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    .name {
        width: 280px;
        height: 24px;
        line-height: 24px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
    }
    text {
        font-weight: 400;
        font-size: 12px;
        color: #999999;
    }
    .model {
        margin-bottom: 5px;
    }
}
.footer {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    padding: 5px 10px;
    z-index: 5;
    display: flex;
    .add {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45px;
        background: #C30D23;
        border-radius: 5px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #FFFFFF;
    }

    .forbidden {
        opacity: .6;
    }
}
</style>