front-end/jdApp/src/pagesClient/official/warn.vue

<template>
    <view>
        <view class="warn-tit">开启微信提醒</view>
        <view class="step-view_box">
            <view 
                v-for="(item,index) in stepList"
                :key="index"
                class="step-li_box">
                <view class="step-head_box">
                   <view class="step-icon_num">
                       {{index + 1}}
                   </view>
                   <view v-if="stepList.length - 1  !== index " class="step-line"></view>
                </view>
                <view class="step-main_box">
                    <view class="step-tit">
                        {{item.title}}
                    </view>
                    <view 
                        class="step-content_box">
                        <template v-if="index === 0">
                            <view class="button-box">   

                                <button open-type='contact'
                                @bindcontact="handleContact"
                                class="admin-button-com blue big" 
                                show-message-card
                                send-message-title="识别下方二维码，关注公众号"
                                send-message-path="/pagesClient/official/warn"
                                :send-message-img="`${constant.imgUrl}/ghs/official/mind.png`">打开聊天框</button>

                            </view>
                        </template>
                        <template v-else>
                            <image class="step-img" :src="item.images" mode="widthFix"></image>
                        </template>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:'OfficialWarn',
        data(){
            return {
                stepList:[
                    {
                        title:'点击下方打开聊天框'
                    },
                    {
                        title:'点击框内右下方“开启微信提醒”卡片',
                        images:`${this.$constant.imgUrl}/ghs/official/step3.png`
                    },
                     {
                        title:'接收二维码点击长按，识别公众号关注即可',
                        images:`${this.$constant.imgUrl}/ghs/official/step2.png`
                    },
                ]
            }
        },
        methods:{
            handleContact(e){
				console.log(`${constant.imgUrl}/ghs/official/mind.png`)
                console.log('e.detail.path',e.detail.path)
                console.log('e.detail.query',e.detail.query)
            }   
        }
    }
</script>

<style lang="scss" scoped>
    .warn-tit {
        color: #040404;
        font-size: 36upx;
        font-weight: 600;
        padding:42upx 0 0  52upx;
    }
    .step-view_box {
        margin-top: 63upx;
        padding:0 25upx 0 40upx;
        & .step-li_box {
            display: flex;
            & > .step-head_box {
                position: relative;
                & > .step-icon_num {
                    width: 40upx;
                    height: 40upx;
                    border-radius: 50%;
                    background-color: $mainColor;
                    text-align: center;
                    line-height: 40upx;
                    color: #FFFFFF;
                    font-size: 28upx;
                    position: relative;
                    z-index: 50;
                }
                & > .step-line {
                    height: 100%;
                    width: 0upx;
                    border-left: 1upx dashed $mainColor;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 45;
                    
                }
            }
            & > .step-main_box {
                flex: 1;
                padding-left: 30upx;
                & .step-tit {
                    color: #141F25;
                    font-size: 32upx;
                    font-weight: 600;
                }
                & .step-content_box {
                    .button-box {
                        width: 100%;
                        padding-right: 25upx;
                          &  .admin-button-com {
                            margin: 67upx 0 85upx;
                        }
                    }
                  
                    & .step-img {
                        width: 382upx;
                        height: 566upx;
                        margin: 34upx 0 71upx;
                    }
                }
            }
        }
    }
    .admin-button-com {
        width: 100%;
    }
</style>