love/public/themes/simpleboot3/love/userwall/detail.html

<extend name="public@base"/>
<block name="css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/userwall.css">
    <style>
    </style>
</block>
<block name="body">
    <!--头图-->
    <div class="image_box">
        <div class="back_box">
            <span>
                <van-icon name="arrow-left" class="text-white" @click="toBack" size="30px"></van-icon>
            </span>
        </div>
        <div class="rq">
            <img src="__TMPL__/public/assets/images/userwall/rq.svg">
            人气：{{user.star}}
        </div>
        <img :src="main_image" class="image" @click="toIntro"/>
    </div>

    <!--简介-->
    <div class="detail_describe">
        <div class="fl">
            <h3 class="ws">
                <span class="fz22">{{user.realname ? user.realname : user.username}}</span>
                <span class="fz16 text-gray">(ID:{{user.id}})</span>
            </h3>
            <p class="fz16 mt10">
                <van-icon
                        :class="[user.sex == 1 ? 'icon-xingbie-nan text-blue' : 'icon-xingbie-nv text-pink','iconfont']"></van-icon>
                {{user.age}}岁
                ·
                {{user.high}}CM
            </p>
        </div>
        <div class="fr mr20" @click="clickFavorite">
            <van-icon name="star" :style="{color: is_favorite ? '#FF589B' : '#AAB8C2'}" size="35px"></van-icon>
            <p class="fz14 text-center">收藏</p>
        </div>
        <div class="clear"></div>
    </div>

    <van-tabs v-model="active" class="mt10">
        <!--基本资料-->
        <van-tab :key="0">
            <template #title>
                <span class="fz16">资料</span>
            </template>
            <div class="plr5 mt10 pb10">
                <div class="br8 bg-white bsd">
                    <dl class="p15 pb10 cursor">
                        <dt class="fb fz16 pb5 pr" @click="showDetail">
                            <span class="bg-pink inline_block vam mr5 t_1 pr dian br"></span> 基本资料
                            <span class="pa rt">
                                <span class="show-more">查看更多</span>
                                <van-icon name="arrow"></van-icon>
                            </span>
                        </dt>
                        <dd class="fz14 pt10">
                            <span class="ptb5 bg_span plr8 br mb5 dib">{{user.high ? user.high + 'CM' : '身高保密'}}</span>
                            <span class="ptb5 bg_span plr8 br mb5 dib">{{user.weight ? user.weight + 'KG' : '体重保密'}}</span>
                            <span class="ptb5 bg_span plr8 br mb5 dib">{{user.education}}</span>
                        </dd>
                    </dl>
                    <dl class="p15 pb10">
                        <dt class="fb fz16 pb5 pr" @click="mating_show = true">
                            <span class="bg-pink inline_block vam mr5 t_1 pr dian br"></span> 择偶要求
                            <span class="pa rt">
                                <span class="show-more">查看更多</span>
                                <van-icon name="arrow"></van-icon>
                            </span>
                        </dt>
                        <dd class="fz14 pt10">
                            <span class="ptb5 bg_span plr8 br mb5 dib">年龄：{{mating_age}}</span>
                            <span class="ptb5 bg_span plr8 br mb5 dib">身高：{{mating_high}}</span>
                            <span class="ptb5 bg_span plr8 br mb5 dib">体重：{{mating_weight}}</span>
                        </dd>
                    </dl>
                    <dl class="p15 pb10">
                        <dt class="fb fz16 pb5 pr">
                            <span class="bg-pink inline_block vam mr5 t_1 pr dian br"></span> 爱情宣言
                        </dt>
                        <dd class="fz14 pb10 pt10 p-textarea">{{user.signature}}</dd>
                    </dl>
                </div>
            </div>
        </van-tab>
        <!--相册-->
        <van-tab :key="0">
            <template #title>
                <span class="fz16">相册</span>
            </template>
            <div class="bg-white">
                <van-grid :border="false" :column-num="3">
                    <van-grid-item v-for="(image,index) in images">
                        <van-image :src="image" @click="photos(index)"></van-image>
                    </van-grid-item>
                </van-grid>
            </div>
        </van-tab>
    </van-tabs>

    <!--收到的礼物-->
    <div class="plr5 mt10 pb10">
        <div class="br8 bg-white bsd">
            <dl class="p15 pb10 cursor">
                <dt class="fb fz16 pb5 pr" @click="showGift">
                    <span class="bg-pink inline_block vam mr5 t_1 pr dian br"></span> 收到礼物
                    <span class="pa rt">
                        <van-icon name="arrow"></van-icon>
                    </span>
                </dt>
                <dd class="fz14 pt10">
                    <van-grid :column-num="5" :border="false">
                        <van-grid-item @click="showGift">
                            <van-icon name="point-gift" size="45" color="#FF589B"></van-icon>
                            <span>送礼物</span>
                        </van-grid-item>
                        <van-grid-item v-for="value in user_gift">
                            <van-image :src="value.gift.image"></van-image>
                            <span>{{value.gift.name}}</span>
                        </van-grid-item>
                    </van-grid>
                </dd>
            </dl>
        </div>
    </div>

    <!--基本资料-->
    <van-popup v-model="detail_show" position="right" :style="{width: '100%',height: '100%'}">
        <van-nav-bar
                left-text="返回"
                @click-left="onClickLeft"
        >
            <template #title>
                <span class="fz18">{{user.username}}资料</span>
            </template>
        </van-nav-bar>
        <h3 class="fn fz16 color_red mb10 pt20 plr12">详细资料</h3>
        <van-cell-group>
            <van-cell title="UID" :value="user.id"></van-cell>
            <van-cell title="姓名" :value="user.username ? user.username : '对方还未填写'"></van-cell>
            <van-cell title="性别" :value="user.sex_text"></van-cell>
            <van-cell title="年龄" :value="user.age + '岁'"></van-cell>
            <van-cell title="身高" :value="user.high ? user.high + 'CM' : '保密'"></van-cell>
            <van-cell title="体重" :value="user.weight ? user.weight + 'KG' : '保密'"></van-cell>
            <van-cell title="婚姻状况" :value="user.marry"></van-cell>
            <van-cell title="学历" :value="user.education"></van-cell>
            <van-cell title="年收入" :value="user.income"></van-cell>
            <van-cell title="工作单位" :value="user.company"></van-cell>
            <van-cell title="职务" :value="user.job"></van-cell>
            <van-cell title="身份类型" :value="user.id_type"></van-cell>
            <van-cell title="家庭成员" :value="user.family.toString()"></van-cell>
            <van-cell title="籍贯" :value="user.native"></van-cell>
            <van-cell title="民族" :value="user.nation"></van-cell>
            <van-cell title="兴趣爱好" :value="user.hobby"></van-cell>
        </van-cell-group>
        <div class="split-block"></div>
        <h3 class="fn fz16 color_red mb10 pt20 plr12">工作生活</h3>
        <van-cell-group>
            <van-cell title="是否有房" :value="user.have_house"></van-cell>
            <van-cell title="是否有车" :value="user.have_car"></van-cell>
            <van-cell title="婚后是否愿意与父母同住" :value="user.with_parent_live"></van-cell>
            <van-cell title="宗教信仰" :value="user.faith"></van-cell>
            <van-cell title="是否吸烟" :value="user.smoke"></van-cell>
            <van-cell title="是否喝酒" :value="user.drink"></van-cell>
        </van-cell-group>
    </van-popup>

    <!--择偶要求-->
    <van-popup v-model="mating_show" position="right" :style="{width: '100%',height: '100%'}">
        <van-nav-bar
                left-text="返回"
                @click-left="mating_show = false"
        >
            <template #title>
                <span class="fz18">择偶要求</span>
            </template>
        </van-nav-bar>
        <van-cell-group>
            <van-cell title="年龄" :value="mating_age"></van-cell>
            <van-cell title="身高" :value="mating_high"></van-cell>
            <van-cell title="体重" :value="mating_weight"></van-cell>
            <van-cell title="籍贯" :value="mating.native"></van-cell>
            <van-cell title="学历" :value="mating.education"></van-cell>
            <van-cell title="年收入" :value="mating.income"></van-cell>
            <van-cell title="身份类型" :value="mating.id_type"></van-cell>
            <van-cell title="是否有房" :value="mating.have_house"></van-cell>
            <van-cell title="是否有车" :value="mating.have_car"></van-cell>
            <van-cell title="婚后是否愿意与父母同住" :value="mating.with_parent_live"></van-cell>
            <van-cell title="是否吸烟" :value="mating.smoke"></van-cell>
            <van-cell title="是否喝酒" :value="mating.drink"></van-cell>
        </van-cell-group>
    </van-popup>

    <!--送礼物-->
    <van-popup v-model="gift_show" round position="bottom">
        <div class="br8 bg-white bsd">
            <dl>
                <dt class="fz16 p15" style="border-bottom:1px solid #eee;">
                    送TA礼物，更好地表达你的心意
                </dt>
                <dd class="fz14 plr8 gift-grid">
                    <van-grid :column-num="4" :border="false">
                        <van-grid-item v-for="(item) in gift" @click="giveGift(item.id)">
                            <van-image :src="item.image"></van-image>
                            <span class="mt5 fz12">{{item.name}}</span>
                            <p class="color_red ws mt10 fz12">{{item.money == 0 ? '免费' : item.money}}</p>
                        </van-grid-item>
                    </van-grid>
                </dd>
            </dl>
        </div>
    </van-popup>

    <!--底部-->
    <div style="width:100%;height:50px;"></div>
    <div class="detail_bottom bg-white">
        <div class="bottom_grid" @click="toHome">
            <van-icon name="home-o" size="25px"></van-icon>
            <span>首页</span>
        </div>
        <div class="bottom_grid" @click="clickSelect">
            <van-icon name="like" :style="{color: is_select ? '#FF589B' : '#AAB8C2'}" size="25px"></van-icon>
            <span>表明心意</span>
        </div>
        <div class="bottom_grid" @click="showGift">
            <van-icon name="point-gift-o" size="25px"></van-icon>
            <span>送礼物</span>
        </div>
        <div class="bottom_chat bg-pink" @click="chat">
            <van-icon name="chat-o" size="25px"></van-icon>
            {{is_friend ? '开始聊天' : '聊天邀请'}}
        </div>
    </div>

    <!--图片预览-->
    <van-image-preview
            v-model="image_show"
            :images="images"
            :start-position="image_index"
    >
    </van-image-preview>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    user: {$user},
                    mating: {$mating},
                    gift: {$gift},
                    user_gift: {$user_gift},
                    active: 0,
                    image_show: false,
                    image_index: 0,
                    gift_show: false,
                    detail_show: false,
                    mating_show: false,
                    is_favorite: {$is_favorite},
                    is_select: {$is_select},
                    is_friend: {$is_friend},
                };
            },
            methods: {
                photos(index) {
                    this.image_index = index;
                    this.image_show = true;
                },
                showGift() {
                    this.gift_show = true;
                },
                toHome() {
                    location.href = '/';
                },
                showDetail() {
                    this.detail_show = true;
                },
                onClickLeft() {
                    this.detail_show = false;
                },
                toBack() {
                    history.back();
                },
                chat() {
                    if ("{$user_id}" == this.user.id) {
                        this.$toast('不能与自己聊天');
                        return false;
                    }
                    let self = this;
                    $.post("{:url('chat')}", {id: this.user.id}, function (json) {
                        if (json.code == 1) {
                            location.href = json.url;
                        } else {
                            self.$toast(json.msg);
                        }
                    }, 'json');
                },
                toIntro() {
                    if ("{$user_id}" == this.user.id) {
                        location.href = "{:url('my/intro')}";
                    }
                },
                clickSelect() {
                    let self = this;
                    $.post("{:url('select')}", {id: self.user.id}, function (json) {
                        self.$toast(json.msg);
                        if (json.code == 1) {
                            self.is_select = !self.is_select;
                        }
                    }, 'json');
                },
                clickFavorite() {
                    let self = this;
                    $.post("{:url('favorite')}", {id: self.user.id}, function (json) {
                        self.$toast(json.msg);
                        if (json.code == 1) {
                            self.is_favorite = !self.is_favorite;
                        }
                    }, 'json');
                },
                giveGift(id) {
                    let self = this;
                    $.post("{:url('giveGift')}", {to_id: self.user.id, gift_id: id}, function (json) {
                        self.$toast(json.msg);
                        $.post("{:url('userGift')}", {id: self.user.id}, function (json) {
                            self.gift_show = false;
                            self.user_gift = json.data;
                        }, 'json')
                    }, 'json');
                },
                //多列选择器值
                getMatingValue(min, max, ext) {
                    if (min === '' || max === '') {
                        return '';
                    }

                    if (min === 0 && max === 0) {
                        return '不限';
                    }

                    let min_ext = min + ext;
                    if (min === 0) {
                        min_ext = '不限';
                    }
                    let max_ext = max + ext;
                    if (max === 0) {
                        max_ext = '不限';
                    }
                    return `${min_ext}-${max_ext}`;
                },
            },
            computed: {
                main_image() {
                    if (this.user.main_image) {
                        return this.user.main_image
                    } else {
                        if ("{$user_id}" == this.user.id) {
                            return '__TMPL__/public/assets/images/userwall/my_header.jpg';
                        } else {
                            return '__TMPL__/public/assets/images/userwall/no_image.png';
                        }
                    }
                },
                //年龄
                mating_age() {
                    return this.getMatingValue(this.mating.min_age, this.mating.max_age, '岁');
                },

                //身高
                mating_high() {
                    return this.getMatingValue(this.mating.min_high, this.mating.max_high, 'CM');
                },

                //体重
                mating_weight() {
                    return this.getMatingValue(this.mating.min_weight, this.mating.max_weight, 'KG');
                },
                images() {
                    let images = [];
                    for (let i = 0; i < this.user.more.length; i++) {
                        if (this.user.more[i]) {
                            images.push(this.user.more[i].url);
                        }
                    }
                    return images;
                },
            }
        });
    </script>
</block>