You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2186 lines
53 KiB

3 years ago
<template>
3 years ago
<view :class="showPop?'noscroll content':'content'">
3 years ago
<view class="detailTop">
<image class="banner" mode="scaleToFill" :src="info.active_playbill || '/static/750x500.jpg'"></image>
</view>
<view class="toptitle">
<view class="h3">{{info.active_name}}</view>
<view class="dataGroup">
<view class="dataCol">
<image mode="heightFix" src="../../static/icon_liulan@2x.png"></image>
<text class="bot">{{viewCounts}}</text>
3 years ago
</view>
</view>
<view class="discuss">
<view class="starBox">
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
</view>
</view>
<view class="shopInfo" v-if="false">
<view class="tit">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
</view>
</view>
<view class="shopInfo" v-if="false">
<view class="tit">
<image mode="heightFix" src="../../static/icon_dizhi.png"></image>
<text>{{info.shop.address}}</text>
</view>
<view class="add_detail">
<view class="add_l">暂无</view>
<view class="add_r" @click="">
<text class="iconfont icon-dianhua"></text>
<text>电话</text>
</view>
</view>
</view>
</view>
3 years ago
<!-- <view class="shops">
3 years ago
<view class="shop">
<image class="pic" src="../../static/shop-logo.png"></image>
<view class="infos">
<view class="name">{{info.shop.name}}</view>
<view class="date-txt" v-if="false"> 09:00-18:00</view>
<view class="txt" v-if="true">{{info.shop.address}}</view>
</view>
</view>
3 years ago
</view> -->
<view class="activeinfo">
<view class="active">
<u-row gutter="16" class="infos">
<u-col span="12">
<view>
活动关联方:
</view>
</u-col>
<view v-for="company in info.companyList">
<u-col span="4">
{{company.type_name}}
</u-col>
<u-col span="8">
{{company.name}}
</u-col>
</view>
</u-row>
</view>
3 years ago
</view>
2 years ago
<view class="activeinfo" v-if="info.active_tag == '上' || !info.active_tag">
3 years ago
<view class="active">
2 years ago
<view>
活动信息:
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
开始时间
</view>
<view class="viewlast" v-if="info.start_date">
<view>{{$u.timeFormat(new Date(info.start_date.replace(/-/g,'/')), 'yyyy年mm月dd日')}} {{info.start_time}}</view>
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
结束时间
</view>
<view class="viewlast" v-if="info.end_date">
<view>{{$u.timeFormat(new Date(info.end_date), 'yyyy年mm月dd日')}} {{info.end_time}}</view>
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_dizhi.png"></image>
活动地点:
</view>
<view class="viewlast" v-if="info.address">
{{info.address}}
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_xingming@2x.png"></image>
活动人数:
</view>
<view class="viewlast" v-if="info.member_sum">
{{info.member_sum}}
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_xingming@2x.png"></image>
已报名数:
</view>
<view class="viewlast" v-if="info.total">
{{info.start_member_sum+info.total}}
</view>
</view>
<block v-if="info.template!='新'">
<view>
报名信息:
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
开始时间
</view>
<view class="viewlast" v-if="info.apply_start">
<view>{{$u.timeFormat(new Date(info.apply_start.replace(/-/g,'/')), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
截止时间
</view>
<view class="viewlast" v-if="info.apply_end">
<view>{{$u.timeFormat(new Date(info.apply_end.replace(/-/g,'/')), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
</view>
</view>
</block>
<!-- <u-row gutter="16">
3 years ago
<u-col span="12">
<view>
活动信息:
</view>
</u-col>
3 years ago
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
开始时间
</view>
</u-col>
<u-col span="8" v-if="info.start_date">
3 years ago
<view>{{$u.timeFormat(new Date(info.start_date.replace(/-/g,'/')), 'yyyy年mm月dd日')}} {{info.start_time}}</view>
3 years ago
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
结束时间
</view>
3 years ago
</u-col>
3 years ago
<u-col span="8" v-if="info.start_date">
3 years ago
<view>{{$u.timeFormat(new Date(info.end_date), 'yyyy年mm月dd日')}} {{info.end_time}}</view>
3 years ago
</u-col>
3 years ago
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_dizhi.png"></image>
活动地点:
</view>
3 years ago
</u-col>
3 years ago
<u-col span="8" v-if="info.address">
3 years ago
{{info.address}}
</u-col>
3 years ago
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_xingming@2x.png"></image>
3 years ago
活动人数:
3 years ago
</view>
3 years ago
</u-col>
3 years ago
<u-col span="8" v-if="info.member_sum">
3 years ago
{{info.member_sum}}
</u-col>
2 years ago
<block style="display: flex;">
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_xingming@2x.png"></image>
已报名数:
</view>
</u-col>
<u-col span="8" v-if="info.total">
{{info.start_member_sum+info.total}}
</u-col>
</block>
<block v-if="info.template!='新'">
<u-col span="12">
<view>
报名信息:
</view>
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
开始时间
</view>
</u-col>
<u-col span="8" v-if="info.apply_start">
<view>{{$u.timeFormat(new Date(info.apply_start.replace(/-/g,'/')), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
截止时间
</view>
</u-col>
<u-col span="8" v-if="info.apply_end">
<view>{{$u.timeFormat(new Date(info.apply_end.replace(/-/g,'/')), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
</u-col>
</block>
</u-row> -->
3 years ago
</view>
</view>
3 years ago
<view class="details">
<view class="detail">
<view class="tit" v-if="false"></view>
<view class="txts">
<u-parse :html="info.content"></u-parse>
</view>
</view>
</view>
2 years ago
<view class="activeinfo" v-if="info.active_tag=='下'">
<view class="active">
2 years ago
<view>
活动信息:
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
开始时间
</view>
<view class="viewlast" v-if="info.start_date">
<view>{{$u.timeFormat(new Date(info.start_date.replace(/-/g,'/')), 'yyyy年mm月dd日')}} {{info.start_time}}</view>
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
结束时间
</view>
<view class="viewlast" v-if="info.end_date">
<view>{{$u.timeFormat(new Date(info.end_date), 'yyyy年mm月dd日')}} {{info.end_time}}</view>
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_dizhi.png"></image>
活动地点:
</view>
<view class="viewlast" v-if="info.address">
{{info.address}}
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_xingming@2x.png"></image>
活动人数:
</view>
<view class="viewlast" v-if="info.member_sum">
{{info.member_sum}}
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_xingming@2x.png"></image>
已报名数:
</view>
<view class="viewlast" v-if="info.total">
{{info.start_member_sum+info.total}}
</view>
</view>
<block v-if="info.template!='新'">
<view>
报名信息:
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
开始时间
</view>
<view class="viewlast" v-if="info.apply_start">
<view>{{$u.timeFormat(new Date(info.apply_start.replace(/-/g,'/')), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
</view>
</view>
<view class='viewchild'>
<view class="viewfirst">
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
截止时间
</view>
<view class="viewlast" v-if="info.apply_end">
<view>{{$u.timeFormat(new Date(info.apply_end.replace(/-/g,'/')), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
</view>
</view>
</block>
<!-- <u-row gutter="16">
2 years ago
<u-col span="12">
<view>
活动信息:
</view>
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
开始时间
</view>
</u-col>
<u-col span="8" v-if="info.start_date">
<view>{{$u.timeFormat(new Date(info.start_date.replace(/-/g,'/')), 'yyyy年mm月dd日')}} {{info.start_time}}</view>
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
结束时间
</view>
</u-col>
<u-col span="8" v-if="info.start_date">
<view>{{$u.timeFormat(new Date(info.end_date), 'yyyy年mm月dd日')}} {{info.end_time}}</view>
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_dizhi.png"></image>
活动地点:
</view>
</u-col>
<u-col span="8" v-if="info.address">
{{info.address}}
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_xingming@2x.png"></image>
活动人数:
</view>
</u-col>
<u-col span="8" v-if="info.member_sum">
{{info.member_sum}}
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_xingming@2x.png"></image>
已报名数:
</view>
</u-col>
2 years ago
<u-col span="8" v-if="info.total">
2 years ago
{{info.start_member_sum+info.total}}
</u-col>
2 years ago
<block v-if="info.template!='新'">
<u-col span="12">
<view>
报名信息:
</view>
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
开始时间
</view>
</u-col>
<u-col span="8" v-if="info.apply_start">
<view>{{$u.timeFormat(new Date(info.apply_start.replace(/-/g,'/')), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
</u-col>
<u-col span="4">
<view>
<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
截止时间
</view>
</u-col>
<u-col span="8" v-if="info.apply_end">
<view>{{$u.timeFormat(new Date(info.apply_end.replace(/-/g,'/')), 'yyyy年mm月dd日 hh:MM:ss')}}</view>
</u-col>
</block>
</u-row> -->
2 years ago
</view>
</view>
3 years ago
<!--为您推荐-->
<view class="introBox hasMenu">
<view class="normal_tit padding_20">最近活动</view>
<block v-for="(item,index) in activityList">
<view class="intro_column" @tap="id = item.id,loadInfo()" :data-id="item.id">
<view class="imgOuter">
<image mode="aspectFill" :src="item.active_playbill"></image>
<view class="i_intro" v-if="item.active_tag">{{item.active_tag}}</view>
</view>
<view class="columnInfo">
<view class="title">{{item.active_name}}</view>
<view class="discuss">
<view class="starBox">
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png">
</image>
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png">
</image>
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png">
</image>
2 years ago
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png">
3 years ago
</image>
2 years ago
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png">
3 years ago
</image>
</view>
</view>
<view class="subInfo">{{item.start_date}} ~ {{item.end_date}}</view>
3 years ago
<view class="menu"><text class="hui"></text>{{item.great_services?item.great_services:""}}</view>
3 years ago
</view>
</view>
</block>
</view>
<view class="footer">
<view class="menuLink">
<navigator url="/pages/home/home" open-type="switchTab">
<view class="menuCol">
<text class="iconfont icon-home"></text>
<text>首页</text>
</view>
</navigator>
<view class="menuCol" @click="shareOpen">
<text class="iconfont icon-Share"></text>
<text>分享</text>
</view>
3 years ago
<!-- @click="jumpToWeChatCustomerService" -->
<button open-type="contact" class="menuCol" style="display: flex;
3 years ago
flex-direction: column;
line-height: inherit;
background: none; padding: unset;">
<text class="iconfont icon-Icon_customerservice"></text>
<text>客服</text>
</button>
</view>
3 years ago
<view :class="isOrder?'buyBtn':'noBtn buyBtn'" @click="toBuy">{{isOrderText}}</view>
3 years ago
</view>
<u-popup v-model="showPop" mode="bottom" closeable="true">
<view class="buyBox">
<view class="title">请输入您的联系方式</view>
<scroll-view scroll-y="true" style="height: 700rpx;padding-bottom: 40rpx;">
<view class="formCol">
<view>姓名<text style="color:red">*</text></view>
<view class="formRight"><input type="text" v-model="form.name" placeholder="会员姓名"></view>
</view>
<view class="formCol">
<view>手机号码<text style="color:red">*</text></view>
<view class="formRight"><input type="text" v-model="form.phone" placeholder="请输入手机号码"></view>
</view>
<view class="formCol">
<view>性别</view>
<view class="formRight">
<radio-group @change="e => form.sex = ['男','女'][e]"
style="display: flex;align-items: center;">
<label v-for="(item, index) in ['','']" :key="index"
style="display: flex;align-items: center;margin-right: 30rpx;">
<view>
<radio :value="item" :checked="item === form.sex" />
</view>
<view>{{item}}</view>
</label>
</radio-group>
</view>
</view>
3 years ago
<view class="formCol">
<view>宝宝生日/预产期<text style="color:red">*</text></view>
<view class="formRight">
<picker mode="date" :value="form.budget_date" @change="bindDateChange">
<view class="uni-input">{{form.budget_date}}</view>
</picker>
</view>
</view>
<view class="formCol">
<view>所属区域<text style="color:red">*</text></view>
<view class="formRight">
<picker :value="rindex" @change="bindRegionChange" :range="arrRegion">
<view class="uni-input">{{arrRegion[rindex]}}</view>
</picker>
<!-- <input type="text" v-if="rindex!=0" v-model="form.address" style="margin-top: 10rpx;"
placeholder="请输入具体街道/地址"> -->
</view>
</view>
3 years ago
<view class="formCol">
2 years ago
<view>地址<text style="color:red"></text></view>
3 years ago
<view class="formRight"><input type="text" v-model="form.address" placeholder="地址"></view>
</view>
<view class="formCol">
3 years ago
<view>建卡医院<text style="color:red">*</text></view>
3 years ago
<view class="formRight">
3 years ago
<picker :value="hindex" @change="bindHospitalChange" :range="arrHospital">
<view class="uni-input">{{arrHospital[hindex]}}</view>
3 years ago
</picker>
3 years ago
<input type="text" v-if="arrHospital[hindex]==''" v-model="info.hospital"
style="margin-top: 10rpx;" placeholder="请输入具体建卡医院">
</view>
</view>
<view class="formCol">
<view>备注信息</view>
<view class="formRight">
<u-input v-model="form.member_comment" border="true" type="textarea" placeholder="备注信息" />
3 years ago
</view>
</view>
3 years ago
3 years ago
</scroll-view>
<view class="payBtn" @click="toBuy"></view>
</view>
</u-popup>
<uni-popup ref="shareCode" :mask-click="true" type="bottom" class="shareBox">
<view class="codeOuter">
<view class="shareCon" @click="shareClose">
<canvas style="width:80%;margin-left:10%;position: absolute;"
:style="{ height:(shareHeight*scare) + 'px', marginTop:(cropperH-(shareHeight*scare))/2+'rpx'}"
canvas-id="firstCanvas" id="firstCanvas"></canvas>
<!-- <image class="shareBg" mode="widthFix" src="../../static/bg_haibao@2x.png"></image> -->
<!-- <image class="code" src="../../static/300_qr.png"></image> -->
</view>
<view class="shareBott" :style="{display: shareBtnDisplay}">
<button class="shareCol" @click="shareClose" open-type="share"
style="border-radius:0;flex:1;">发给朋友</button>
<button class="shareCol" @click="save" style="border-radius:0;flex:1;">保存相册</button>
</view>
</view>
</uni-popup>
<u-popup v-model="showPhone" mode="center" closeable="false">
<view class="userBox" style="padding: 20rpx;">
<view class="userInfoContent" style="padding: 80rpx;font-size: 28rpx;">
<text class="">为了更好的提供服务请授权您的手机号</text>
</view>
<view class="userBoxBottom">
<button class="userBoxBottomCol btnuserBoxBottomCol" style="border-radius:0;flex:1;"
open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
</view>
<view class="userBoxBottomPass" v-if="showPass" @click="toPassGetPhone"> >> </view>
</view>
</u-popup>
<u-popup v-model="showUser" mode="center" closeable="true">
<view class="userBox" style="padding: 20rpx;">
<view class="userInfoContent" style="padding: 80rpx;font-size: 28rpx;">
<text class="">为了更好的提供服务请授权您的微信昵称</text>
</view>
<view class="userBoxBottom">
<button class="userBoxBottomCol btnuserBoxBottomCol" @click="getUserProfile"
style="border-radius:0;flex:1;">授权</button>
<button class="userBoxBottomCol" @click="touserInfoClose"
style="border-radius:0;flex:1;">关闭</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
let sysInfo = uni.getSystemInfoSync();
let SCREEN_WIDTH = sysInfo.screenWidth
let SCREEN_HEIGHT = sysInfo.screenHeight;
let WindowHeight = sysInfo.windowHeight;
let windowWidth = sysInfo.windowWidth;
import {
weixin
} from '@/utils/weixin.js';
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
activityList: [],
id: "",
showPass: false,
info: {},
viewCounts:'',
3 years ago
dataList: [],
form: {
merchant_id: "",
member_id: "",
active_id: "",
active_name: '',
name: "",
sex: "",
phone: "",
budget_date: '',
3 years ago
address: '',
spread_member_id:''
3 years ago
},
3 years ago
2 years ago
arrHospital: ["请选择建卡医院", "市立医院", "苏大附一院", "苏大附二院","附二浒关院区", "中医院", "第五人民医院", "苏州市第七人民医院", "明基医院", "九龙医院", "娄葑医院",
3 years ago
"吴中人民医院", "甪直人民医院", "相城人民医院", "相城区第二人民医院", "吴江第一人民医院", "吴江第二人民医院", "盛泽医院", "其他"
],
arrRegion: ["请选择区域", "吴中区", "吴江区", "姑苏区", "工业园区", "高新区", "相城区", "昆山", "常熟", "张家港", "太仓"],
3 years ago
rindex: 0,
hindex: 0,
3 years ago
isOrder:false,
isOrderText:"",
3 years ago
openid: "",
showPop: false,
cardActive: 0,
img: '',
user_info: {
promotion: ''
},
shareBtnDisplay: 'none',
// 动态的宽高
cropperW: SCREEN_WIDTH,
cropperH: SCREEN_HEIGHT,
packages: [],
sharePath: "",
scare: 1,
shareHeight: 500,
imgAvatar: "",
poster: "",
showUser: false,
showPhone: false,
}
},
onShareAppMessage() {
return {
title: this.info.name,
3 years ago
path: "pages/active/detail?id=" + this.info.id + "&promotion_id=" + this
3 years ago
.user_info.id,
imageUrl: this.img
}
},
onShow() {
var that = this;
console.log("01.onShow", that);
weixin.getOpenidInfo(info => {
console.log("02.getOpenidInfo", info);
that.user_info = info.user_info;
that.openid = that.user_info.openid;
that.form.member_id = that.user_info.id
that.form.name = that.user_info.name || that.user_info.wechat_nickname;
that.form.phone = that.user_info.phone;
if (weixin.isNull(info.user_info.wechat_nickname) || weixin.isNull(info.user_info.avatar)) {
that.showUser = true;
} else {
that.form.member_name = info.user_info.wechat_nickname;
}
that.loadInfo();
that.getActivityList()
}, true);
},
onLoad(options) {
var that = this;
this.id = options.id;
3 years ago
console.log("this.id",this.id)
3 years ago
const scene = decodeURIComponent(options.scene);
console.log(scene)
if (!weixin.isNull(scene)) {
3 years ago
this.form.active_id = weixin.getParam(scene, "id");
3 years ago
this.id = weixin.getParam(scene, "id");
this.form.promotion = this.promotion_id = weixin.getParam(scene, "promotion_id");
uni.setStorageSync("base_promotion_id", this.promotion_id);
}
if (!weixin.isNull(options.id))
3 years ago
this.form.active_id = options.id;
3 years ago
if (!weixin.isNull(options.promotion_id)) {
this.form.promotion = options.promotion_id;
uni.setStorageSync("base_promotion_id", options.promotion_id)
}
3 years ago
3 years ago
},
methods: {
3 years ago
// 跳转微信客服
jumpToWeChatCustomerService() {
this.openWeChatCustomerService("https://work.weixin.qq.com/kfid/kfccc6609d51a87324d?enc_scene=ENC5n1b6XBY2paqReUMjwNmTGay8jwTZQuyn17jL8n5xK9T7ZwfJx36T5EHqVbFWTzP8s", "wwe480a61872b54394");
},
// 打开微信客服
openWeChatCustomerService (
weiXinCustomerServiceUrl = "",
corpId = "",
showMessageCard = false,
sendMessageTitle = "",
sendMessagePath = "",
sendMessageImg = ""
) {
if (!weiXinCustomerServiceUrl || !corpId)
return Toast("请配置好客服链接或者企业ID");
// eslint-disable-next-line no-undef
wx.openCustomerServiceChat({
// 客服信息
extInfo: {
url: weiXinCustomerServiceUrl, // 客服链接 https://work.weixin.qq.com/xxxxxxxx
},
corpId, // 企业ID wwed1ca4d3597eXXXX
showMessageCard, // 是否发送小程序气泡消息
sendMessageTitle, // 气泡消息标题
sendMessagePath, // 气泡消息小程序路径(一定要在小程序路径后面加上“.html”pages/index/index.html
sendMessageImg, // 气泡消息图片
success(res) {
console.log("success", JSON.stringify(res));
},
fail(err) {
console.log("fail", JSON.stringify(err));
// eslint-disable-next-line no-undef
return wx.showToast({
title: err.errMsg,
icon: "none"
});
},
});
},
3 years ago
getActivityList() {
weixin.request({
api: "/api/member/active-list",
data: {
page: 1,
page_size: 3
},
utilSuccess: res => {
this.activityList = res.data
},
utilFail: err => {
console.log(err);
}
})
},
toPassGetPhone() {
this.showPhone = false;
this.showPop = true;
},
touserInfoClose() {
this.showUser = false;
},
getUserProfile() {
var that = this;
weixin.getUserProfile((res) => {
console.log(res)
weixin.request({
api: '/api/member/update-wechat-info',
method: 'POST',
data: {
nickname: res.nickName,
avatar: res.avatarUrl
},
utilSuccess: function(r) {
console.log(r)
if (r.status == 1) {
weixin.getOpenidInfo(openidInfo => {
that.user_info.wechat_nickname = openidInfo.user_info
.wechat_nickname;
that.user_info.avatar = openidInfo.user_info.avatar;
}, true)
that.showUser = false;
} else {
uni.showToast({
title: r.data.msg,
duration: 2000,
icon: 'none'
})
}
}
})
})
},
getPhoneNumber(e) {
let that = this;
if (e.detail.iv) {
weixin.getOpenidInfo(r => {
var user_info = r.user_info;
console.log(user_info)
uni.request({
url: this.baseUrl + '/api/member/get-phone-by-openid',
method: 'POST',
data: {
sessionKey: user_info.session_key,
iv: e.detail.iv,
encryptedData: e.detail.encryptedData,
openid: user_info.wechat_openid,
},
success: (r) => {
if (r.data.status == 1) {
that.showPass = false;
weixin.getOpenidInfo(openidInfo => {
uni.setStorageSync("userInfo", openidInfo)
that.form.phone = openidInfo.user_info.phone;
}, true);
} else {
uni.showToast({
title: r.data.msg,
duration: 2000,
icon: 'none'
})
that.showPass = true;
}
that.showPhone = false;
that.showPop = true;
}
})
})
}
},
3 years ago
bindRegionChange: function(e) {
this.rindex = e.target.value;
this.form.area = this.arrRegion[e.target.value];
},
bindHospitalChange: function(e) {
this.hindex = e.target.value;
if (this.arrHospital[e.target.value] != '其他') {
this.form.hospital = this.arrHospital[e.target.value];
}
},
3 years ago
getPoster: function() {
var that = this;
uni.getImageInfo({
src: that.info.active_playbill || '../../static/750x500.jpg', // 头像
success: res => {
that.poster = res.path;
that.getAvatar();
}
});
},
getAvatar: function() {
let userProfile = uni.getStorageSync('user_profile');
if (!weixin.isNull(userProfile)) {
console.log(userProfile.avatarUrl)
console.log(this.imgAvatar)
uni.getImageInfo({
src: userProfile.avatarUrl, // 头像
success: rlogo => {
this.imgAvatar = rlogo.path;
console.log(this.imgAvatar)
this.draw();
}
});
} else {
this.imgAvatar = "/static/avatar.jpg";
console.log(this.imgAvatar)
this.draw();
}
},
shareOpen() {
uni.showLoading({
title: '加载中'
});
var that = this;
this.$refs.shareCode.open();
this.getPoster();
},
draw: function() {
var that = this;
uni.request({
url: this.baseUrl + '/api/member/get-wxa-qrcode',
method: 'GET',
data: {
3 years ago
path: 'pages/active/detail',
3 years ago
scene: 'id=' + this.info.id + '&promotion_id=' + this.user_info.id
},
success: r => {
if (r.data.status === 1) {
uni.getImageInfo({
src: this.baseUrl + r.data.data, // 二维码
success: res => {
var ctx = uni.createCanvasContext('firstCanvas')
var w = SCREEN_WIDTH * 0.8;
var h = this.shareHeight * this.scare;
// ctx.fillStyle = '#fff';
// ctx.fillRect(0, 0, 214, 342);
ctx.drawImage('../../static/bg_haibao@2x.jpg', 0, 0,
w, h
); //(SCREEN_HEIGHT - 50 - SCREEN_WIDTH * 0.8 * 1.65) /2, SCREEN_WIDTH * 0.8, SCREEN_WIDTH * 0.8 * 1.5);
2 years ago
ctx.drawImage('../../static/bg_haibao1.png', 20, 40,
3 years ago
w -
40, h - 100);
/* SCREEN_WIDTH *
0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) /
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.6 * 1.5); */
2 years ago
ctx.drawImage(this.poster, 20, 40,
3 years ago
w -
40, (h - 60 - 60) * 0.5);
/* SCREEN_WIDTH * 0.15, (SCREEN_HEIGHT - SCREEN_WIDTH *
0.6 * 1.65) /
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.695 / 1.6); */
2 years ago
// ctx.font = "22rpx bold";
// // 设置颜色
// ctx.fillStyle = "#fff";
// // 绘制文字参数要写的字x坐标y坐标
// ctx.fillText(this.info.active_name, 20, 50);
3 years ago
ctx.font = "16rpx bold";
// 设置颜色
ctx.fillStyle = "#000";
// 绘制文字参数要写的字x坐标y坐标
2 years ago
let active_title = this.info.template=='新'?'课程':'活动'
ctx.fillText(active_title, 40, (h + 50) * 0.5 -10);
3 years ago
ctx.font = "14rpx bold";
// 设置颜色
ctx.fillStyle = "#3377b7";
// 绘制文字参数要写的字x坐标y坐标
let packagesFirst = this.info
2 years ago
let active_time = this.info.template=='新'?'上课时间:':'活动时间:'
let active_add = this.info.template=='新'?'上课地点:':'活动地点:'
let active_name = this.info.active_name.length>17?this.info.active_name.substring(0,17):this.info.active_name
let active_name1 = this.info.active_name.length>17?this.info.active_name.substring(17,this.info.active_name.length):''
ctx.fillText("" + active_name, 40, (h + 50) * 0.5 + 20 );
ctx.fillText("" + active_name1, 40, (h + 50) * 0.5 + 40 );
ctx.fillText(active_time + this.info.start_date+' '+this.info.start_time, 40, (h + 50) * 0.5 + 50 + 20);
// ctx.fillText("结束时间:" + this.info.end_date, 40, (h + 50) * 0.5 + 50 + 40);
let address = this.info.address.length>14?this.info.address.substring(0,14):this.info.address
let address1 = this.info.address.length>14?this.info.address.substring(14,this.info.address.length):''
ctx.fillText(active_add + address, 40, (h + 50) * 0.5 + 50 + 40);
ctx.fillText(address1, 40, (h + 50) * 0.5 + 50 + 60);
// ctx.fillText(active_add + this.info.apply_end, 40, (h + 50) * 0.5 + 60 + 60);
// let user_info = uni.getStorageSync("user_info_yunyubang");
// let userProfile = uni.getStorageSync('user_profile');
// var img = this.imgAvatar;
// uni.getImageInfo({
// src: userProfile.avatarUrl, // 头像
// success: rlogo => {
// img = rlogo.path;
// }
// });
// that.circleImg(ctx,
// img,
// 40, h - 50 - w * 0.15,
// w * 0.15 / 2);
// ctx.font = "12rpx normal";
// // 设置颜色
// ctx.fillStyle = "#000";
// // 绘制文字参数要写的字x坐标y坐标
// // if(packagesFirst.template!='新'){
// // }
// if (!weixin.isNull(this.user_info.name))
// ctx.fillText(this.user_info.name,
// 40, h - 40);
// else
// ctx.fillText("",
// 40, h - 40);
this.circleImg(ctx, res.path, w - 40 - w * 0.2, h - 65 -
3 years ago
w *
0.2, w * 0.2 / 2);
2 years ago
3 years ago
ctx.draw(),
// r: 半径
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
fileType: 'jpg',
success: (res) => {
this.shareBtnDisplay =
'flex'
uni.hideLoading();
this.img = this.info
.poster;
this.sharePath = res
.tempFilePath;
},
})
}, 100)
}
})
} else {
uni.hideLoading()
this.$refs.shareCode.close()
this.alert(r.data.msg)
}
}
})
},
circleImg: function(ctx, img, x, y, r) {
ctx.save()
var d = 2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
},
shareClose() {
this.$refs.shareCode.close()
},
open() {
this.$refs.popup.open('top')
},
close() {
this.$refs.popup.close()
},
//保存图片时h5端不能直接保存只能通过预览长按保存
save() {
let _this = this;
// #ifdef H5
uni.previewImage({
urls: [_this.sharePath]
})
// #endif
// #ifdef APP-PLUS||MP-WEIXIN
uni.saveImageToPhotosAlbum({
filePath: _this.sharePath,
success: function() {
_this.$refs.shareCode.close()
_this.alert('保存成功')
}
});
// #endif
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
3 years ago
getNowTime(){
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hours = date.getHours()
let minutes = date.getMinutes()
let seconds =date.getSeconds()
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
3 years ago
bindDateChange: function(e) {
this.form.budget_date = e.target.value
},
3 years ago
compareDate(d1, d2) {
let reg = new RegExp('-', 'g')
return ((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))
},
3 years ago
toBuy() {
3 years ago
if(!this.isOrder){
return
}
3 years ago
let user_info = weixin.getUserInfoCache();
3 years ago
3 years ago
if (weixin.isNull(user_info.user_info.phone)) {
this.showPhone = true;
return false;
//this.getUserProfile();
}
if (weixin.isNull(this.form.name) || weixin.isNull(this.form.address) || weixin.isNull(this.form
.budget_date) || weixin.isNull(this.form
.phone)) {
this.showPop = true;
2 years ago
if (weixin.isNull(this.form.name)||this.form.name=='微信用户') {
this.alert('请输入真实会员姓名')
3 years ago
return
}
3 years ago
if (weixin.isNull(this.form.area)) {
this.alert('请选择区域')
return
}
if (weixin.isNull(this.form.hospital)) {
this.alert('请选择建卡医院')
return
}
3 years ago
if (weixin.isNull(this.form.budget_date)) {
this.alert('请选择预产日期')
return
}
if (weixin.isNull(this.form.phone)) {
this.alert('请填写手机号')
return
}
2 years ago
// if (weixin.isNull(this.form.address)) {
// this.alert('请填写地址')
// return
// }
3 years ago
return false;
}
// 此处用法为在js中调用需要写uni.$u.throttle()
uni.$u.throttle(this.joinActive, 1000);
},
joinActive() {
this.form.merchant_id = this.info.shop_id
this.form.active_id = this.info.id
this.form.active_name = this.info.active_name
3 years ago
if(this.form.promotion){
this.form.spread_member_id = this.form.promotion
}
2 years ago
// this.form.member_id = 14521
3 years ago
console.log(this.form)
3 years ago
// return
3 years ago
weixin.request({
method: 'POST',
api: "/api/member/active-apply",
data: this.form,
utilSuccess: res => {
3 years ago
console.log("res",res)
setTimeout(function(){
uni.showToast({
icon:'success',
title:res.msg,
duration:3000
})
},500)
3 years ago
this.showPop = false
},
utilFail: err => {
console.log(err,'err');
3 years ago
setTimeout(function(){
uni.showToast({
icon:'none',
title:err,
duration:3000
})
},500)
3 years ago
}
})
},
gotoDetail: function(e) {
var id = e.currentTarget.dataset.id
uni.navigateTo({
url: "../shopDetail/shopDetail?id=" + id
})
},
loadInfo: function() {
3 years ago
let that = this
that.loadView()
3 years ago
weixin.request({
api: '/api/member/active-show/',
method: 'GET',
data: {
id: this.id
},
utilSuccess: r => {
//r.data.poster = this.baseUrl + r.data.poster;
3 years ago
if(r.company_ids){
r.companyList = JSON.parse(r.company_ids)
}
3 years ago
this.info = r;
3 years ago
let apply_end = r.apply_end
let apply_start = r.apply_start
let enddate = r.end_date+" "+r.end_time
3 years ago
let nowtime = that.getNowTime()
2 years ago
if(r.audit_status==2){
that.isOrder = false
that.isOrderText = "不可报名"
return
}
3 years ago
if(that.compareDate(apply_start,nowtime)){
that.isOrder = false
that.isOrderText = "报名未开始"
}else if(that.compareDate(nowtime,apply_end)||that.compareDate(nowtime,enddate)){
3 years ago
that.isOrder = false
that.isOrderText = "报名截止"
}else{
that.isOrder = true
that.isOrderText = "立即参加"
}
3 years ago
},
utilFail: r => {
console.log(r);
}
})
},
loadPage: function() {
var that = this;
weixin.request({
bindThis: that,
api: '/api/member/get-products',
customLoading: false,
data: {
page: 1,
page_size: 3
},
utilSuccess: function(r) {
var res = r.data.data;
for (var m of res) {
m.poster = (weixin.isNull(m.poster) ? "../../static/750x500.jpg" :
m.poster_url)
if (m.created_at.indexOf('T') > 0)
m.created_at = m.created_at.split("T")[0] + " " + m.created_at.split("T")[
1]
.split(".")[0]
}
that.dataList = res;
},
utilFail: function(res) {
util.alert(res);
}
});
},
loadView: function() {
var that = this;
weixin.request({
bindThis: that,
api: '/api/member/other/pv-count',
customLoading: false,
data: {
url:'/api/member/active-show',
body:'id='+that.id
},
utilSuccess: function(r) {
console.log("r",r)
that.viewCounts = r.total
},
utilFail: function(res) {
util.alert(res);
}
});
3 years ago
}
}
}
</script>
<style lang="scss" scoped>
button::after {
border: none
}
3 years ago
.noscroll{
overflow: hidden;
position: fixed;
}
3 years ago
.userBoxBottomPass {
font-size: 28rpx;
text-align: center;
padding: 20rpx 0rpx;
}
.payBtn {
width: 90%;
height: 100rpx;
color: #fff;
font-size: 30rpx;
text-align: center;
line-height: 100rpx;
text-align: center;
background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
margin: 0 auto;
border-radius: 20rpx;
}
.buyBox {
width: 690rpx;
background: #fff;
border-radius: 20rpx;
margin: 30rpx auto;
padding-bottom: 20rpx;
.title {
font-size: 30rpx;
color: #333;
padding: 30rpx;
}
.formCol {
font-size: 28rpx;
color: #666;
padding: 0 30rpx;
margin: 20rpx auto;
.formRight {
margin: 30rpx 0;
input {
width: 100%;
height: 80rpx;
line-height: 80rpx;
border: 1rpx solid #dadada;
border-radius: 8rpx;
font-size: 28rpx;
color: #666;
padding: 0 20rpx;
box-sizing: border-box;
}
.uni-input {
width: 100%;
height: 80rpx;
line-height: 80rpx;
border: 1rpx solid #dadada;
border-radius: 8rpx;
font-size: 28rpx;
color: #666;
padding: 0 20rpx;
box-sizing: border-box;
}
}
}
}
.footer {
width: 100%;
height: 112rpx;
background: #FFFFFF;
box-shadow: 0px -1rpx 0px 0px #DEDEDE;
padding: 0 30rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
.menuLink {
display: flex;
justify-content: flex-start;
align-items: center;
color: #333;
.menuCol {
margin: 0 30rpx;
font-size: 20rpx;
text {
display: block;
}
.iconfont {
font-size: 36rpx;
margin-bottom: 6rpx;
}
}
}
3 years ago
.buyBtn{
3 years ago
width: 220rpx;
height: 72rpx;
background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
border-radius: 36rpx;
font-size: 28rpx;
font-weight: 500;
text-align: center;
line-height: 72rpx;
color: #fff;
}
3 years ago
.noBtn{
background: linear-gradient(90deg, #ddd 0%, #ddd 100%);
}
3 years ago
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #F6F6F6;
margin-bottom: 100px;
}
.shopInfo {
padding: 25rpx 0;
border-top: 1rpx solid #EAEAEA;
.tit {
display: flex;
justify-content: flex-start;
align-items: center;
align-content: center;
font-size: 28rpx;
font-weight: 400;
color: #333333;
image {
display: block;
width: 24rpx;
height: 24rpx;
margin-right: 13rpx;
}
}
.add_detail {
color: #999;
font-size: 28rpx;
padding: 10rpx 0 0 36rpx;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
.iconfont {
color: #FF578A;
}
.add_l {
width: 65%;
}
.add_r {
padding: 0 34rpx;
border-left: 1rpx solid #EAEAEA;
}
.add_r text {
display: block;
text-align: center;
}
}
}
.userBoxBottom {
.userBoxBottomCol {
font-size: 28rpx;
}
.btnuserBoxBottomCol {
background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
border-radius: 36rpx;
font-size: 28rpx;
font-weight: 500;
text-align: center;
line-height: 72rpx;
color: #fff;
}
}
.detailTop {
width: 750rpx;
.banner {
display: block;
width: 100%;
height: 500rpx;
}
}
.infoTop {
position: relative;
width: 100%;
height: 88rpx;
background: #FF97AA;
.price {
position: absolute;
left: 0;
bottom: 0;
width: 400rpx;
height: 124rpx;
border-radius: 0 40rpx 0 0;
color: #fff;
.priceBg {
display: block;
width: 100%;
height: 124rpx;
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
.two-price {
display: inline-block;
margin-top: 22rpx;
margin-left: 20rpx;
font-size: 24rpx;
line-height: 56rpx;
position: relative;
z-index: 10;
.large {
font-size: 56rpx;
}
.del {
display: inline-block;
margin-left: 10rpx;
text-decoration: line-through;
}
}
.surplus {
display: inline-block;
width: 102rpx;
height: 32rpx;
line-height: 32rpx;
background: rgba(51, 51, 51, 0.2);
border-radius: 16rpx;
font-size: 24rpx;
text-align: center;
margin-left: 20rpx;
position: relative;
z-index: 10;
}
}
.times {
position: absolute;
top: 13rpx;
right: 30rpx;
display: flex;
align-items: center;
color: #fff;
font-size: 24rpx;
.djs {
padding-right: 10rpx;
}
.num {
display: inline-block;
margin-left: 8rpx;
margin-right: 8rpx;
padding: 5rpx;
background: #333333;
border-radius: 4rpx;
}
}
}
.discuss {
display: flex;
justify-content: flex-start;
margin: 25rpx 0;
position: relative;
align-items: center;
align-content: center;
.dis_l {
font-size: 28rpx;
color: #333;
font-weight: 500;
padding-top: 5rpx;
margin-right: 32rpx;
}
.starBox {
display: flex;
justify-content: flex-start;
image {
display: block;
width: 26rpx;
height: 26rpx;
margin-right: 8rpx;
}
}
}
.toptitle {
width: 100%;
background: #fff;
border-radius: 24rpx 24rpx 0;
margin-top: -20rpx;
padding: 30rpx 30rpx 0 30rpx;
box-sizing: border-box;
position: relative;
z-index: 20;
.h3 {
display: inline-block;
font-size: 36rpx;
font-weight: 500;
color: #333333;
}
.dataGroup {
position: absolute;
top: 30rpx;
right: 30rpx;
.dataCol {
display: inline-block;
margin-left: 20rpx;
image {
display: block;
width: 34rpx;
height: 34rpx;
margin: 0 auto;
}
.bot {
display: block;
font-size: 20rpx;
width: 60rpx;
text-align: center;
}
}
}
.tags {
.txt {
padding: 8rpx;
background: rgba(255, 177, 62, 0.1);
border-radius: 4rpx;
font-size: 20rpx;
color: #FF7E4C;
display: inline-block;
margin-right: 10rpx;
}
}
.normalPrice {
display: flex;
justify-content: space-between;
align-items: flex-end;
align-content: flex-end;
font-size: 24rpx;
color: #999;
.price {
flex: 1;
color: #FF578A;
.big {
font-size: 56rpx;
font-weight: 500;
margin-right: 10rpx;
}
.small {
color: #999;
}
}
.r_info {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
.leaveNum {
margin-left: 24rpx;
}
.shareMoney {
max-width: 136rpx;
height: 28rpx;
border: 2rpx solid #FF578A;
border-radius: 4rpx;
line-height: 28rpx;
font-size: 20rpx;
margin-right: 10rpx;
padding-right: 10rpx;
color: #FF578A;
display: flex;
flex-direction: flex-start;
text {
background: #FF578A;
color: #fff;
padding: 0 10rpx;
}
}
}
}
.shareIntro {
display: flex;
border-top: 1rpx solid #DEE4E7;
justify-content: space-between;
align-items: center;
align-content: center;
font-size: 28rpx;
color: #666;
padding: 25rpx 0;
margin-top: 25rpx;
.title {
width: 90rpx;
padding: 0 8rpx;
height: 32rpx;
line-height: 32rpx;
background: #FF578A;
border-radius: 6rpx;
font-size: 20rpx;
color: #fff;
margin-right: 32rpx;
}
}
}
.summary {
width: 100%;
margin-top: 15rpx;
background: #fff;
padding-bottom: 40rpx;
.tit {
line-height: 32rpx;
font-size: 32rpx;
font-weight: 500;
color: #333333;
margin-top: 35rpx;
margin-left: 30rpx;
}
.wrap {
margin-top: 40rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
.item {
width: 170rpx;
.iconfont {
text-align: center;
font-size: 34rpx;
color: #FF578A;
}
.grey-txt {
text-align: center;
font-size: 24rpx;
color: #999999;
margin: 10rpx auto;
}
.black-txt {
text-align: center;
font-size: 24rpx;
color: #333333;
}
}
}
}
.shops {
background: #fff;
margin-top: 10rpx;
padding: 15rpx 30rpx;
box-sizing: border-box;
.shop {
box-sizing: border-box;
padding: 25rpx 0;
border-bottom: 1rpx solid #EAEAEA;
.pic {
width: 120rpx;
height: 120rpx;
display: inline-block;
}
.infos {
position: relative;
width: 540rpx;
margin-left: 24rpx;
display: inline-block;
vertical-align: top;
.name {
font-size: 32rpx;
font-weight: 500;
color: #333333;
line-height: 32rpx;
}
.starts {
margin: 20rpx 0;
height: 20rpx;
line-height: 20rpx;
.iconfont {
color: #FF578A;
font-size: 20rpx;
display: inline-block;
margin-right: 7rpx;
height: 100%;
line-height: 20rpx;
}
}
.txt {
font-size: 24rpx;
color: #666666;
line-height: 24rpx;
}
.reply {
position: absolute;
top: 45rpx;
right: 0;
font-size: 24rpx;
color: #666666;
line-height: 24rpx;
.iconfont {
padding-left: 7rpx;
font-size: 24rpx;
color: #999;
}
}
.date-txt {
font-size: 24rpx;
color: #666666;
line-height: 24rpx;
margin: 20rpx 0;
}
}
}
.shop:last-child {
border-bottom: 0;
}
}
3 years ago
.activeinfo{
margin-top: 10rpx;
padding: 30rpx 30rpx 30rpx 30rpx;
background: #fff;
width: 100%;
box-sizing: border-box;
2 years ago
.viewchild{
display: flex;
justify-content: space-between;
.viewfirst{
width:30%;
image{
width: 26rpx;
height: 26rpx;
display: inline-block;
margin-right: 12rpx;
}
}
.viewlast{
width:70%
}
}
3 years ago
u-col{
image{
2 years ago
width: 26rpx;
height: 26rpx;
display: inline-block;
margin-right: 12rpx;
3 years ago
}
3 years ago
}
}
3 years ago
.details {
margin-top: 10rpx;
padding: 0 30rpx 30rpx 30rpx;
background: #fff;
width: 100%;
box-sizing: border-box;
.tit {
font-size: 32rpx;
font-weight: 500;
color: #333333;
line-height: 32rpx;
margin-top: 30rpx;
}
.txts {
margin-top: 33rpx;
.txt {
display: block;
font-size: 28rpx;
color: #333333;
line-height: 45rpx;
}
}
image {
width: 100%;
margin-top: 30rpx;
}
}
.introBox {
width: 710rpx;
margin: 20rpx auto 0 auto;
border-radius: 16rpx;
background: #fff;
padding: 0 35rpx;
box-sizing: border-box;
}
.introBox .intro_column:last-child {
border-bottom: none;
}
.intro_column {
display: flex;
justify-content: flex-start;
padding: 20rpx 0;
border-bottom: 2rpx solid #EAEAEA;
.imgOuter {
width: 260rpx;
height: 210rpx;
position: relative;
image {
width: 260rpx;
height: 210rpx;
border-radius: 5rpx;
}
.i_intro {
position: absolute;
top: 0;
left: 0;
//width: 68rpx;
padding: 0rpx 10rpx;
height: 32rpx;
background: #FF578A;
border-radius: 5rpx 0px 18rpx 5rpx;
font-size: 22rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 32rpx;
text-align: center;
}
}
.columnInfo {
width: 360rpx;
margin-left: 22rpx;
.discuss {
margin: 13rpx 0 !important;
}
.menu {
font-size: 24rpx;
color: #333;
margin-top: 10rpx;
.hui {
margin-right: 8rpx;
display: inline-block;
width: 30rpx;
height: 30rpx;
background: #FF753E;
border-radius: 2rpx;
font-size: 22rpx;
color: #FFFFFF;
text-align: center;
line-height: 30rpx;
}
}
.title {
width: 100%;
font-size: 30rpx;
font-weight: bold;
color: #333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tags text {
height: 28rpx;
background: rgba(255, 177, 62, 0.1);
border-radius: 4rpx;
line-height: 28rpx;
font-size: 20rpx;
padding: 0 10rpx;
margin-right: 10rpx;
color: #FF753E;
}
.subInfo {
width: 100%;
font-size: 24rpx;
color: #999;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 5rpx;
.font_red {
margin-left: 10rpx;
}
}
.price {
display: flex;
justify-content: flex-start;
align-items: center;
align-content: center;
margin-top: 8rpx;
text {
margin-right: 10rpx;
}
.shareMoney {
height: 28rpx;
border: 2rpx solid #FF578A;
border-radius: 4rpx;
line-height: 28rpx;
font-size: 20rpx;
margin-right: 10rpx;
padding-right: 10rpx;
color: #FF578A;
display: flex;
flex-direction: flex-start;
text {
background: #FF578A;
color: #fff;
padding: 0 10rpx;
}
}
.free {
height: 28rpx;
background: #FF753E;
border-radius: 4rpx;
line-height: 28rpx;
font-size: 20rpx;
padding: 0 10rpx;
margin-right: 10rpx;
color: #fff;
}
}
}
}
.termBox {
width: 750rpx;
height: 200rpx;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0) 100%);
border-radius: 40rpx 40rpx 0px 0px;
margin-top: 20rpx;
.termOuter {
display: flex;
align-items: center;
align-content: center;
justify-content: flex-start;
.termCol {
width: 27%;
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: #333333;
padding-top: 36rpx;
.iconfont {
font-size: 24rpx;
color: #666666;
line-height: 28rpx;
margin-left: 8rpx;
}
}
.termCol.cur {
color: #FF578A;
.iconfont {
color: #FF578A;
}
}
.termCol:last-child {
width: 19%;
}
}
}
.shareBox {
background: rgba(0, 0, 0, 0.5);
}
.codeOuter {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
// padding-top: 13vh;
box-sizing: border-box;
position: relative;
}
.shareCon {
// width: 500rpx;
// margin: 0 auto;
//position: absolute;
//top: 45%;
//left: 50%;
// transform: translate(-50%, -50%);
.code {
width: 300rpx;
height: 300rpx;
display: block;
position: absolute;
left: 50%;
margin-left: -150rpx;
top: 50%;
margin-top: -150rpx;
}
}
.shareBott {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: flex-start;
.shareCol {
width: 50%;
height: 100rpx;
text-align: center;
line-height: 100rpx;
font-size: 30rpx;
background: #FF578A;
color: #fff;
}
.shareCol:first-child {
background: #e8e8e8;
color: #666;
}
}
</style>