caimei-applets-caimei/pages/user/order/order-contract.vue

<template>
    <view class="container clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5" />
        <view class="container-content tui-skeleton" v-else>
            <!-- <view class="text-h1 center">销售合同</view> -->
            <view class="text-h1">甲方(卖方)：【厦门盛德至善医疗科技有限公司】</view>
            <view class="text-h1">乙方(买方)：【{{ clubInfo.name }}】</view>
            <view class="text-h1">丙方(平台方)：【深圳市采美网络技术有限公司】</view>
            <view class="text-h1">鉴于：</view>
            <view class="text-p">
                1、丙方系美容行业的电子商务平台运营商，其开发运营的交易平台（www.caimei365.com），采美CRM管理系统和商城小程序（以下简称“丙方平台”或“平台”）是提供美容产品仪器供应商、美容机构、医疗美容机构以及服务商合作和交易平台，丙方平台的运作规则包括
                <text @click.stop="this.$api.navigateTo('/pages/service/service?id=1023&title=用户协议')">
                    《用户协议》
                </text>、
                <text @click.stop="this.$api.navigateTo('/pages/service/service?id=1013&title=隐私权政策')">
                    《隐私权政策》
                </text>、
                以及交易和结算规则、其他由丙方不时公布的平台规则（以下简称“平台规则”）。
            </view>
            <view class="text-p">
                2、甲方是丙方平台的注册供应商会员，并已提供相关资质和通过电子方式确认接受丙方平台规则、
                <text @click.stop="this.$api.navigateTo('/pages/service/service?id=1035&title=供应商合作协议')">
                    《供应商合作协议》
                </text>、
                并受该等文件的约束。
            </view>
            <view class="text-p">
                3、乙方是丙方平台的注册机构会员，并已提供相关资质和通过电子方式确认接受丙方平台规则、
                <text @click.stop="this.$api.navigateTo('/pages/service/service?id=1016&title=医美机构合作协议')">
                    《医美机构合作协议》
                </text>
                并受该等文件的约束。
            </view>
            <view class="text-p">根据《中华人民共和国民法典》等相关法律、法规的规定，甲乙丙三方在平等自愿的基础上，就乙方在丙方平台采购甲方销售的产品和/或服务，达成以下合作内容：</view>

            <view class="text-h1">一、乙方向甲方采购订单详情：</view>
            <!-- 订单商品信息 -->
            <template v-if="contractType === 1">
                <view class="text-h1">订单日期：{{ formattedDate }}</view>
            </template>
            <template v-else>
                <view class="text-h1" v-if="contractType === 2">订单编号：【{{ orderData.shopOrderNo }}】</view>
                <view class="text-h1">订单日期：{{ orderTime(orderData.orderTime) }}</view>
            </template>
            <template v-if="contractType === 1">
                <cm-contract-goods ref="goods" v-if="!skeletonShow" :goodsData.sync="goodsData" />
            </template>
            <template v-else>
                <cm-contract-order ref="goods" v-if="!skeletonShow" :orderData="orderData" />
            </template>

            <view class="text-h1">二、付款方式</view>
            <view class="text-p">
                乙方应通过丙方的线上交易系统将相应的全额货款汇入甲方收款账号，或经丙方同意通过线下支付方式将相应的全额货款汇入甲方指定收款账号；甲方确认收到货款后的5个工作日内安排发货；甲方按货款金额向乙方开具发票，发票地址以乙方注册邮箱地址或通信地址为准。
            </view>
            <view class="text-p">甲方收款帐户信息：</view>
            <view class="text-p">单位名称：厦门盛德至善医疗科技有限公司</view>
            <view class="text-p">开户银行： 招商银行股份有限公司厦门海沧支行</view>
            <view class="text-p">账号：592909949010001</view>
            <view class="text-h1">三、产品交付方式：</view>
            <view class="text-p">运输：产品经由合规冷链运输，运费由甲方承担，产品的附件及相关材料应随产品一并交付乙方。</view>
            <view class="text-h1">四、产品所有权及产品毁损、灭失风险转移</view>
            <view class="text-p">
                产品所有权及产品毁损、灭失的风险自乙方签收货物之日起转移，货物签收以物流签收信息为准，除有质量问题外。产品发出后，因乙方的原因致使产品不能按期交付，产品毁损、灭失的风险责任由乙方自行负责。
            </view>
            <view class="text-h1">五、验收及退换货</view>
            <view class="text-p">
                1、乙方收货时应在现场验收。乙方在收货时，应检查产品有无破损或缺少，如发现异常，应在收货时当场与承运人一起出具书面证明，并书面通知甲方办理相关事宜；如收货后当日未通知则视为乙方已收到全部合格产品。收货时，以物流信息显示签收作为收货凭证，不再进行纸质签收或返回物流签收单。
            </view>
            <view class="text-p">
                2、乙方无故拒绝接受货物的，应承担因此给甲方造成的损失，除本协议明确约定外，损失赔偿范围包括但不限于：直接或间接损失、调查费用支出、诉讼费用、仲裁费用、聘请诉讼仲裁代理人的费用以及其他因违约行为所支出的必要费用。
            </view>
            <view class="text-p">
                3、乙方在收货后如发现产品质量问题的当日通过平台向甲方提出书面申请，经甲方审查符合退换货条件的给予退换货，退换货时间为从书面申请受理之日起30天内完成退换货。
            </view>
            <view class="text-h1">六：广告合规要求</view>
            <view class="text-p">
                1、乙方后续为货物自行设计制作的广告须取得广告批文方可发布，且不得侵犯第三方合法权益。乙方如使用甲方提供材料开展宣传的，不得擅自添加、删减、篡改甲方提供的材料内容。
            </view>
            <view class="text-p">
                2、乙方应依法开展产品宣传及产品销售，不得通过夸大产品功效、虚构事实或虚假宣传等方式宣传、销售合作产品。否则因此造成的一切责任（包括但不限于民事赔偿、刑事责任、行政处罚等）均由乙方一力承担。若因乙方的违法宣传，给甲方造成损失的，由乙方承担赔偿责任（包括但不限于甲方支出的诉讼费、律师费、保全费、交通费等）。
            </view>
            <view class="text-h1">七、特别约定</view>
            <view class="text-p">
                1、甲乙丙三方确认，丙方仅为甲乙双方的网上交易活动提供交易平台，并非交易行为的参与方，丙方不承担甲乙双方买卖交易项下任何法律责任。如甲乙双方产生争议的，丙方可以出面协调，但丙方的协调不具有强制性。在甲乙双方争议期间，如款项存放在丙方的线上交易分账系统中，丙方有权根据实际情况决定将款项留存，待甲乙双方争议解决后予以支付，丙方不承担该等原因下未支付或迟延支付款项产生的任何责任。
            </view>
            <view class="text-h1">八、违约责任</view>
            <view class="text-p">
                1、在本协议有效期限内，乙方不得将本协议条款中的全部或部分权利、义务转让给任何第三方；若乙方将本协议条款中的权利义务转让给第三方，甲方有权单方解除协议；若因第三方导致甲方权利受到损害的，甲方除可以要求第三方进行损害赔偿之外，仍可以要求乙方承担责任。
            </view>
            <view class="text-p">
                2、因乙方无正当合理的理由退货或拒收货物造成的相应损失（包括甲方损失和乙方损失）由乙方承担。
            </view>
            <view class="text-p">
                3、因乙方行为扰乱甲方市场环境的，甲方有权单方解除本协议，并要求乙方赔偿因此产生的损失。
            </view>
            <view class="text-p">
                4、本协议所述的甲方损失包括但不限于甲方的直接损失、间接损失以及维权所支付的诉讼费、律师费、公证费、鉴定费、差旅费等费用。
            </view>
            <view class="text-h1">九、不可抗力</view>
            <view class="text-p">
                1、如果双方中的任何一方因为不可抗力（如：战争、火灾、台风、洪水、地震）而被迫停止或推迟协议的执行，则协议执行相应延迟，延迟的时间等于不可抗力发生作用的时间。
            </view>
            <view class="text-p">
                2、因不可抗力因素导致的甲乙双方未能按本协议约定履行相应的权利义务的，甲乙双方免除相应的责任，但双方应采取必要的措施以减少造成的损失。出现不可抗力情形的一方，应在不可抗力发生之日起三日内向对方发出出现不可抗力情形的书面通知，并提供相应的证明。
            </view>
            <view class="text-p">
                3、如不可抗力及其影响无法终止或消除而致使合同任何一方丧失继续履行协议的能力或不可抗力的影响连续二十天以上时，任何一方均有权通知对方无责解除本协议。双方根据已完成进度据实结算。
            </view>
            <view class="text-h1">十、保密条款</view>
            <view class="text-p">
                本协议有效期内，甲、乙、丙、三方对本协议内容，特别是供货价格及销售政策等信息，均负有严格保密的义务，不得以任何形式泄露给第三方，否则应承担违约责任并赔偿损失。
            </view>
            <view class="text-h1">十一、其它约定事项</view>
            <view class="text-p">
                1、乙方可以在丙方平台下载甲方所经营产品的《中华人民共和国医疗器械注册证》及本企业的《营业执照》、《医疗器械生产许可证》及其他授权证明，如需要加盖甲方公章的纸质复印件可以通过丙方平台向甲方索取，
            </view>
            <view class="text-p">
                2、甲方可以在丙方平台下载乙方的《营业执照》、《医疗机构执业许可证》，如需要加盖甲方公章的纸质复印件可以通过丙方平台向乙方索取。
            </view>
            <view class="text-p">
                3、本协议的附件与本协议具同等法律效力，是本协议不可分割的组成部分。
            </view>
            <view class="text-h1">十二、争议解决</view>
            <view class="text-p">
                合同执行过程中发生争议的，三方友好协商，协商不成的，任何一方有权向甲方所在地人民法院提起诉讼。
            </view>
            <view class="text-h1">十三、其他</view>
            <view class="text-p">
                甲乙丙三方通过丙方平台订立本合同，本合同一经三方完成电子签章程序，即具备法律效力。任何一方均可在丙方平台之上获取合同文本。
            </view>
            <view class="text-p">（以下无正文）</view>
            
        </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import cmContractGoods from './components/cm-contract-goods'
    import cmContractOrder from './components/cm-contract-order'
    export default {
        components: {
            cmContractGoods,
            cmContractOrder
        },
        data() {
            return {
                StaticUrl: this.$Static,
                isIphoneX: this.$store.state.isIphoneX,
                skeletonShow: true,
                clubInfo: {},
                invoiceData: {
                    type: 0, //发票类型 0 不开发票 1 普通发票 2 增值税发票
                    headingType: 0, //抬头类型 0 个人 1 单位
                    invoiceTitle: '', //发票抬头
                    corporationTaxNum: '', //单位税号
                    registeredAddress: '', //单位地址
                    registeredPhone: '', //注册电话
                    openBank: '', //开户银行
                    bankAccountNo: '' //银行账号
                },
                formattedDate: '',
                goodsData: [],
                orderData: {},
                contractType: ''

            }
        },
        onLoad(option) {
            if (option.type) { this.contractType = option.type * 1 }
            console.log('contractType', this.contractType)
            if (this.contractType === 1) {
                this.goodsData = JSON.parse(option.goods)
                this.initStorage()
                console.log('goods', this.goods)
                const today = new Date()
                // 格式化为 "YYYY年M月D日"（月份和日期不补零）
                this.formattedDate = `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`
                console.log(this.formattedDate) // 示例输出：2025年5月27日
            } else {
                console.log('shopOrderId', option.shopOrderId)
                this.initOrderDetaile(option.shopOrderId)
            }
         
        },
        methods: {
            // 获取订单详情
            async initOrderDetaile(shopOrderId) {
            	try {
            		this.clubInfo = await this.$api.getStorage()
            		const { data } = await this.OrderService.QueryOrderDetails({ shopOrderId: shopOrderId, userId: this.clubInfo.userId })
            		this.orderData = data.shopOrder
                    setTimeout(() => {
                        this.skeletonShow = false
                    }, 500)
            	} catch (error) {
            		console.log('获取订单详情异常~')
            	}
            },
            async initStorage() {
                // 初始化信息
                try {
                    this.clubInfo = await this.$api.getStorage()
                    setTimeout(() => {
                        this.skeletonShow = false
                    }, 500)
                    // this.getUseInvoice(this.clubInfo.userId)
                } catch (e) {
                    console.log('初始化信息异常~')
                }
            },
            //获取发票信息
            async getUseInvoice(userId) {
                try {
                    const res = await this.OrderService.GetFindInvoice({ userId: userId })
                    this.invoiceData = { ...this.invoiceData, ...res.data }
                    console.log('invoiceData', this.invoiceData)
                } catch (error) {
                    console.log('error', error)
                }
            },
            orderTime(time){
               // 按空格拆分取日期部分，再按"-"拆分
               const [datePart] = time.split(' ')
               const [year, month, day] = datePart.split('-')
               // 去除月份和日的首部零，并拼接成目标格式
               const result = `${year}年${parseInt(month)}月${parseInt(day)}日`
               console.log(result) 
               return result
            }
        },
        onHide() {

        },
        onShow() {

        }
    }
</script>

<style lang="scss">
    page {
        background-color: #FFFFFF;
    }

    .container {
        width: 100%;
        height: auto;
    }

    .container-content {
        width: 100%;
        box-sizing: border-box;
        padding: 24rpx;
        text-align: justify;
        font-size: $font-size-26;
        color: #666666;
        line-height: 58rpx;

        .text-h1 {
            font-size: $font-size-28;
            text-align: left;
            font-weight: 600;
            color: #333333;

            &.center {
                text-align: center;
            }
        }

        .text-p {
            font-size: 27rpx;
            text-align: justify;
            text-indent: 24rpx;
            color: #666666;
            line-height: 52rpx;

            text {
                color: #1890f9;
            }
        }

        .text-flex {
            width: 100%;
            height: 168rpx;
            display: flex;
            justify-content: space-between;

            &.first {
                margin-top: 120rpx;
            }

            .flex-p {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                font-size: $font-size-26;
                color: #666666;
                margin: 0 20rpx;
                line-height: 48rpx;
            }
        }
    }

    .empty-container-image {
        width: 260rpx;
        height: 260rpx;
        margin-top: -300rpx;
    }
</style>