qimall/backend/modules/mall/views/addons/confirm-order.php

<style>
    #app{
        background-color: #ffffff;
    }
    .order_steps{
        padding: 30px;
        width: 50%;
        margin: 0 auto;
        clear: both;
    }
    .order_steps .el-step__title{
        font-size: small;
        font-weight: initial;
    }
    .el-step__icon{
        font-size: small;
        font-weight: initial;
    }
    .el-table__header thead tr th{
        background-color: rgb(242 242 242);
        height: 40px;
        line-height: 40px;
    }
    .title{
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        color: #999999;
        font-size: 18px;
        padding: 9px 0 1px 40px;
    }
    /*头像样式 start*/
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
    }
    .el-table_1_column_1 .cell { /*-2 表示在第二行*/
        display: flex;
    }
    .order_left{width: 50%; padding: 20px; float: left; }
    .order_right{width: 50%; padding-right: 40px; margin-top: 20px; text-align: right; float: right;}
    /*头像样式 end*/
    .line_5{
        width: 100%;
        height: 5px;
        clear: both;
        background-color: #f2f2f2
    }
    .on_open{
        width: 100%;
        line-height: 200px;
        text-align: center;
        color: #999;
        font-size: 25px;
    }
</style>
<div id="app" v-cloak>
        <div class="order_steps">
            <el-steps :active="active" finish-status="success">
                <el-step title="提交订单"></el-step>
                <el-step title="支付订单"></el-step>
                <el-step title="订单结果"></el-step>
            </el-steps>
        </div>
        <div class="line_5"></div>
        <div v-if="addons.mall_name">
            <div class="title">购买店铺：{{addons.mall_name}}</div>
            <div class="table-body">
                <el-table :data="tableData" style="width: 100%;    padding: 0 20px 20px 20px;" >
                    <el-table-column label="应用名称" width="500">
                        <div class="user_img">
                            <com-image width="80" height="80" :src="addons.cover ? addons.cover : addons.default_cover" fit="contain"></com-image>
                        </div>
                        <div>
                            <div style="color:#000; padding: 10px 0 5px 0; font-size: 20px;">{{addons.title}}</div>
                            <samp>{{addons.brief_introduction}}</samp>
                        </div>
                    </el-table-column>
                    <el-table-column  label="周期" >
                        <div v-if="setting.duration == '-1'">
                            {{unit[setting.unit]}}
                        </div>
                        <div v-else>
                            {{setting.duration}}{{unit[setting.unit]}}
                        </div>
                    </el-table-column>
                    <el-table-column  label="单价">
                        <template slot-scope="scope">
                            ￥{{setting.money}}
                        </template>
                    </el-table-column>
                    <el-table-column  label="数量">x1</el-table-column>
                    <el-table-column  label="小计">
                        <template slot-scope="scope">
                            ￥{{setting.money}}
                        </template>
                    </el-table-column>
                </el-table>


            </div>
            <div>
                <div class="order_left">
                    <el-checkbox v-model="checked" value="1">我已阅读并同意 </el-checkbox><span @click="payagreement_show = true"  style="color: rgb(46, 143, 244); cursor: pointer;" id="cache2">《服务协议》</span>
                </div>
                <div class="order_right">
                    <div id="u7497_text" class="text ">
                        <p style="font-size:13px; padding-bottom: 30px;">
                            <span>实际付款：</span>
                            <span style="font-size:18px;color:#E82F2F;">¥{{setting.money}}</span>
                        </p>
                    </div>
                    <el-button type="primary" :loading="loading" @click="saveAddForm()">提交订单</el-button>
                </div>
            </div>
        </div>
        <div v-else class="on_open">
            该应用未开放购买
        </div>

    <el-dialog title="服务协议" :visible.sync="payagreement_show" width="50%" :close-on-click-modal="false">
        <div flex="dir:left main:center" class="app-share" >
           <div v-html="addons.payagreement"></div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="payagreement_show = false" type="primary">关闭</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                unit:['永久','月','年'],
                loading: false,
                btnLoading:false,
                active: 1,
                type:1,
                name:'',
                checked:0,
                price_setting: {},
                setting: {},
                addons:{},
                pay_data: {},
                payagreement_show:false,
                setting_index:0,
                tableData: [{
                    date: '',
                    name: '',
                    address: ''
                }],
            };
        },
        created() {
            this.name = getQuery('name');
            this.setting_index = getQuery('setting_index');
            this.type = getQuery('type');
            this.getList();
        },
        methods: {
            getList() {
                this.loading = true;
                request({
                    params: {
                        r: 'mall/addons/confirm-order',
                        name:this.name,
                        setting_index:this.setting_index,
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.addons = e.data.data
                        this.setting = this.addons.price_setting[this.setting_index];
                        this.addons.default_cover = _diy_img_prefix+'/static/addons/icon/'+this.addons.name+'.png';
                        //this.price_setting = this.addons.price_setting;
                        console.log(this.addons,99);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });
            },
            saveAddForm(){
                if(this.checked != 1){
                    this.$message.error("请同意服务协议");
                    return;
                }
                this.loading = true;
                //navigateTo({r: 'mall/addons/confirm-pay',order_id:229});//确认支付
                request({
                    params: {
                        r: 'mall/addons/create-order'
                    },
                    method: 'post',
                    data:{name:this.name,setting_index:this.setting_index}
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.pay_data = e.data.data;
                        if(this.setting.money == 0){
                            navigateTo({r: 'mall/addons/confirm-success',order_id:this.pay_data.order.order_id});//确认支付
                        }else{
                            navigateTo({r: 'mall/addons/confirm-pay',order_id:this.pay_data.order.order_id});//确认支付
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
        }
    });
</script>