|
|
<template>
|
|
|
<view :class="showPop?'noscroll content':'content'">
|
|
|
<view class="detailTop">
|
|
|
<image class="banner" :src="info.poster"></image>
|
|
|
</view>
|
|
|
<view class="toptitle">
|
|
|
<view class="h3">{{info.name}}</view>
|
|
|
<view class='price'>
|
|
|
<text class="font_red" v-if="info.price > 0">￥{{info.price}}</text>
|
|
|
<text class="free" v-else>免费</text>
|
|
|
</view>
|
|
|
<view class="dataGroup">
|
|
|
<view class="dataCol">
|
|
|
<image mode="heightFix" src="../../static/icon_liulan@2x.png"></image>
|
|
|
<text class="bot">{{viewCounts}}</text>
|
|
|
</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.merchant.address}}</text>
|
|
|
</view>
|
|
|
<view class="add_detail">
|
|
|
<view class="add_l">暂无</view>
|
|
|
<view class="add_r" @click="">
|
|
|
<text class="iconfont icon-dianhua"></text>
|
|
|
<text @click="calltel">电话：<text style="color:#bf617c">{{tel}}</text>
|
|
|
</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="shops" v-if="info.can_buy===1">
|
|
|
<view class="shop">
|
|
|
<image class="pic" src="../../static/shop-logo.png"></image>
|
|
|
<view class="infos">
|
|
|
<view class="name">{{info.merchant.username}}</view>
|
|
|
<view class="date-txt" v-if="false">周一至周日 09:00-18:00</view>
|
|
|
<view class="add_r starts" @click="">
|
|
|
<text class="iconfont icon-dianhua"></text>
|
|
|
<text @click="calltel">电话：<text style="color:#bf617c">{{tel}}</text>
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="txt">{{info.merchant.address}}</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="details">
|
|
|
<view class="detail">
|
|
|
<view class="tit" v-if="false">商品详情</view>
|
|
|
<view class="txts">
|
|
|
<u-parse class='parseHtml' :html="info.content"></u-parse>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!--为您推荐-->
|
|
|
<view class="introBox hasMenu">
|
|
|
<view class="normal_tit padding_20">附近商家</view>
|
|
|
<block v-for="(item,index) in dataList">
|
|
|
<view class="intro_column" @tap="gotoDetail" :data-id="item.id">
|
|
|
<view class="imgOuter">
|
|
|
<image mode="aspectFill" :src="item.poster"></image>
|
|
|
<view class="i_intro">{{item.product_type.name}}</view>
|
|
|
</view>
|
|
|
<view class="columnInfo">
|
|
|
<view class="title">{{item.username}}</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="subInfo">{{item.merchant.address}}</view>
|
|
|
<view class="menu"><text class="hui">惠</text>{{item.merchant.name}}</view>
|
|
|
</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>
|
|
|
<button open-type="contact" class="menuCol" style="display: flex;
|
|
|
flex-direction: column;
|
|
|
line-height: inherit;
|
|
|
background: none; padding: unset;">
|
|
|
<text class="iconfont icon-Icon_customerservice"></text>
|
|
|
<text>客服</text>
|
|
|
</button>
|
|
|
</view>
|
|
|
<block v-if="info.can_buy===1">
|
|
|
<view class="buyBtn" v-if="info.state=='active'" @click="toBuy">{{buyName}}</view>
|
|
|
<view class="buyBtn buyNoBtn" v-else>{{buyName}}</view>
|
|
|
</block>
|
|
|
</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.member_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>宝宝生日/预产期<text style="color:red">*</text></view>
|
|
|
<view class="formRight">
|
|
|
<picker mode="date" :value="form.due_date" @change="bindDateChange">
|
|
|
<view class="uni-input">{{form.due_date}}</view>
|
|
|
</picker>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="formCol" v-if="modelList.length>1">
|
|
|
<view>产品型号<text style="color:red">*</text></view>
|
|
|
<view class="formRight">
|
|
|
<picker :value="mindex" @change="bindModelChange" :range="modelList">
|
|
|
<view class="uni-input">{{modelList[mindex]}}</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>
|
|
|
<view style="display: flex;align-items: center;">
|
|
|
<text v-if="info.product_type.name==='实物' && rindex!=0" style="color:red">*</text>
|
|
|
<input type="text" :required="info.product_type.name==='实物'?true:false" v-if="rindex!=0" v-model="form.address" style="margin-top: 10rpx;"
|
|
|
placeholder="请输入具体街道/地址">
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="formCol">
|
|
|
<view>建卡医院</view>
|
|
|
<view class="formRight">
|
|
|
<picker :value="hindex" @change="bindHospitalChange" :range="arrHospital">
|
|
|
<view class="uni-input">{{arrHospital[hindex]}}</view>
|
|
|
</picker>
|
|
|
|
|
|
<input type="text" v-if="arrHospital[hindex]=='其他'" v-model="form.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="备注信息" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</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 {
|
|
|
id: "",
|
|
|
tel: "18550406975",
|
|
|
showPass: false,
|
|
|
info: {},
|
|
|
viewCounts:'',
|
|
|
dataList: [],
|
|
|
buyName:'',
|
|
|
mindex:0,
|
|
|
modelList:['请选择产品型号'],
|
|
|
form: {
|
|
|
product_type: "product",
|
|
|
product_id: "",
|
|
|
due_date: "",
|
|
|
phone: '',
|
|
|
member_name: "",
|
|
|
member_comment: "",
|
|
|
promotion: "",
|
|
|
model_name:'',
|
|
|
region: '',
|
|
|
address: '',
|
|
|
hospital: ''
|
|
|
},
|
|
|
arrHospital: ["请选择建卡医院","苏大附一院", "吴中人民医院","市立医院", "苏大附二院", "附二浒关院区","中医院", "第五人民医院", "苏州市第七人民医院", "明基医院", "九龙医院", "娄葑医院",
|
|
|
"甪直人民医院", "相城人民医院", "相城区第二人民医院", "吴江第一人民医院", "吴江第二人民医院", "盛泽医院", "其他"
|
|
|
],
|
|
|
arrRegion: ["请选择区域", "吴中区", "吴江区", "姑苏区", "工业园区", "高新区", "相城区", "昆山", "常熟", "张家港", "太仓"],
|
|
|
rindex: 0,
|
|
|
hindex: 0,
|
|
|
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,
|
|
|
path: "packages/packageBuy/pages/shopDetail/shopDetail?id=" + this.info.id + "&promotion_id=" + this
|
|
|
.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_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.loadPage();
|
|
|
that.getHospital()
|
|
|
that.getArea()
|
|
|
|
|
|
}, true);
|
|
|
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
var that = this;
|
|
|
this.id = options.id;
|
|
|
|
|
|
const scene = decodeURIComponent(options.scene);
|
|
|
console.log(scene)
|
|
|
if (!weixin.isNull(scene)) {
|
|
|
this.form.product_id = weixin.getParam(scene, "id");
|
|
|
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))
|
|
|
this.form.product_id = options.id;
|
|
|
|
|
|
if (!weixin.isNull(options.promotion_id)) {
|
|
|
this.form.promotion = options.promotion_id;
|
|
|
uni.setStorageSync("base_promotion_id", options.promotion_id)
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
// 跳转微信客服
|
|
|
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"
|
|
|
});
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
calltel(phone) {
|
|
|
const res = uni.getSystemInfoSync();
|
|
|
phone = this.tel
|
|
|
// ios系统默认有个模态框
|
|
|
if (res.platform == 'ios') {
|
|
|
uni.makePhoneCall({
|
|
|
phoneNumber: phone,
|
|
|
|
|
|
success() {
|
|
|
console.log('拨打成功了');
|
|
|
},
|
|
|
fail() {
|
|
|
console.log('拨打失败了');
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
//安卓手机手动设置一个showActionSheet
|
|
|
uni.showActionSheet({
|
|
|
itemList: [phone, '呼叫'],
|
|
|
success: function(res) {
|
|
|
console.log(res);
|
|
|
if (res.tapIndex == 1) {
|
|
|
uni.makePhoneCall({
|
|
|
phoneNumber: phone,
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
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;
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
bindModelChange:function(e) {
|
|
|
this.mindex = e.target.value;
|
|
|
this.form.model_name = this.modelList[e.target.value];
|
|
|
},
|
|
|
bindRegionChange: function(e) {
|
|
|
this.rindex = e.target.value;
|
|
|
this.form.region = 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];
|
|
|
}
|
|
|
},
|
|
|
async getArea(code) {
|
|
|
await weixin.request({
|
|
|
newUrl: true,
|
|
|
api: '/api/member/parameter/show',
|
|
|
data: {
|
|
|
number: 'area'
|
|
|
},
|
|
|
utilSuccess: (res) => {
|
|
|
this.arrRegion = []
|
|
|
|
|
|
this.arrRegion.push("请选择区域")
|
|
|
res.detail.map(item => {
|
|
|
this.arrRegion.push(item.value)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
async getHospital(code) {
|
|
|
await weixin.request({
|
|
|
newUrl: true,
|
|
|
api: '/api/member/parameter/show',
|
|
|
data: {
|
|
|
number: 'hospital'
|
|
|
},
|
|
|
utilSuccess: (res) => {
|
|
|
this.arrHospital = []
|
|
|
|
|
|
this.arrHospital.push("请选择建卡医院")
|
|
|
res.detail.map(item => {
|
|
|
this.arrHospital.push(item.value)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
getPoster: function() {
|
|
|
var that = this;
|
|
|
uni.getImageInfo({
|
|
|
src: that.info.poster_url, // 头像
|
|
|
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: {
|
|
|
path: 'packages/packageBuy/pages/shopDetail/shopDetail',
|
|
|
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);
|
|
|
console.log(1)
|
|
|
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);
|
|
|
|
|
|
ctx.drawImage('../../static/bg_haibao1.png', 20, 30 + 40,
|
|
|
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); */
|
|
|
|
|
|
ctx.drawImage(this.poster, 20, 30 + 40,
|
|
|
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); */
|
|
|
|
|
|
ctx.font = "22rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#fff";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
ctx.fillText("优孕课堂福利专享", 20, 50);
|
|
|
|
|
|
ctx.font = "16rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#000";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
ctx.fillText("专享福利", 40, (h + 50) * 0.5 + 20);
|
|
|
|
|
|
ctx.font = "14rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#3377b7";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
|
|
|
let packagesFirst = this.info
|
|
|
ctx.fillText("¥" + packagesFirst.price + "" + packagesFirst
|
|
|
.name, 40, (h + 50) * 0.5 + 20 + 30);
|
|
|
|
|
|
|
|
|
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 - 60 - w * 0.15,
|
|
|
w * 0.15 / 2);
|
|
|
|
|
|
ctx.font = "12rpx normal";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#000";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
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 - 40 -
|
|
|
w *
|
|
|
0.2, w * 0.2 / 2);
|
|
|
|
|
|
console.log(2)
|
|
|
ctx.draw(),
|
|
|
// r: 半径
|
|
|
setTimeout(() => {
|
|
|
uni.canvasToTempFilePath({
|
|
|
canvasId: 'firstCanvas',
|
|
|
fileType: 'jpg',
|
|
|
success: (res) => {
|
|
|
|
|
|
console.log(3)
|
|
|
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}`;
|
|
|
},
|
|
|
bindDateChange: function(e) {
|
|
|
this.form.due_date = e.target.value
|
|
|
},
|
|
|
toBuy() {
|
|
|
let user_info = weixin.getUserInfoCache();
|
|
|
if (weixin.isNull(user_info.user_info.phone)) {
|
|
|
this.showPhone = true;
|
|
|
return false;
|
|
|
//this.getUserProfile();
|
|
|
}
|
|
|
if (weixin.isNull(this.form.member_name) || weixin.isNull(this.form.due_date) || weixin.isNull(this.form
|
|
|
.phone)) {
|
|
|
this.showPop = true;
|
|
|
|
|
|
|
|
|
if (weixin.isNull(this.form.member_name)||this.form.member_name=='微信用户') {
|
|
|
this.alert('请输入真实宝妈姓名')
|
|
|
return
|
|
|
}
|
|
|
if (weixin.isNull(this.form.due_date)) {
|
|
|
this.alert('请选择预产日期')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (weixin.isNull(this.form.phone)) {
|
|
|
this.alert('请填写手机号')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
if (this.modelList.length>1 && (this.form.model_name == "请选择产品型号" || weixin.isNull(this.form.model_name))) {
|
|
|
this.alert('请选择产品型号')
|
|
|
return
|
|
|
}
|
|
|
if (this.form.region == "请选择区域" || weixin.isNull(this.form.region)) {
|
|
|
this.alert('请选择区域')
|
|
|
return
|
|
|
}
|
|
|
if(this.info.product_type.name==='实物' && weixin.isNull(this.form.address)){
|
|
|
this.alert('请填写具体地址')
|
|
|
return
|
|
|
}
|
|
|
if (this.form.hospital == "请选择建卡医院") {
|
|
|
this.alert('请选择建卡医院')
|
|
|
return
|
|
|
}
|
|
|
// console.log(this.form)
|
|
|
// return
|
|
|
// 此处用法为在js中调用，需要写uni.$u.throttle()
|
|
|
uni.$u.throttle(this.toDoBuy, 1000);
|
|
|
|
|
|
},
|
|
|
toDoBuy: function() {
|
|
|
var that = this;
|
|
|
weixin.request({
|
|
|
api: '/api/member/order-add',
|
|
|
method: 'POST',
|
|
|
data: this.form,
|
|
|
utilSuccess: r => {
|
|
|
if (parseFloat(r.data.total) == 0) {
|
|
|
uni.redirectTo({
|
|
|
url: '../buyMemberSuccess/buyMemberSuccess?id=' +
|
|
|
this.form.product_id
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
weixin.request({
|
|
|
api: '/api/member/order-payment',
|
|
|
method: 'GET',
|
|
|
data: {
|
|
|
order_id: r.data.id,
|
|
|
openid: this.openid
|
|
|
},
|
|
|
utilSuccess: res => {
|
|
|
|
|
|
weixin.getOpenidInfo(() => {}, true);
|
|
|
setTimeout(function() {
|
|
|
uni.hideLoading();
|
|
|
that.showPop = false;
|
|
|
}, 100);
|
|
|
try {
|
|
|
let payParams = JSON.parse(res.jsApiParameters)
|
|
|
payParams.provider = 'wxpay'
|
|
|
payParams.success = result => {
|
|
|
uni.redirectTo({
|
|
|
url: '../buyMemberSuccess/buyMemberSuccess?id=' +
|
|
|
this.form.product_id
|
|
|
})
|
|
|
}
|
|
|
payParams.fail = result => {
|
|
|
console.log(result);
|
|
|
}
|
|
|
wx.requestPayment(payParams);
|
|
|
|
|
|
} catch (err) {
|
|
|
console.log(err)
|
|
|
} finally {
|
|
|
// finallyCode - 无论 try / catch 结果如何都会执行的代码块
|
|
|
}
|
|
|
},
|
|
|
utilFail: res => {
|
|
|
console.log(res)
|
|
|
uni.showToast({
|
|
|
title: res,
|
|
|
duration: 5000
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
utilFail: r => {
|
|
|
uni.showModal({
|
|
|
title: '',
|
|
|
content: r,
|
|
|
showCancel: false,
|
|
|
success() {
|
|
|
if (r == "重复购买") {
|
|
|
|
|
|
uni.redirectTo({
|
|
|
url: "../../../packageOrder/pages/myOrder/myOrder"
|
|
|
})
|
|
|
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
gotoDetail: function(e) {
|
|
|
var id = e.currentTarget.dataset.id
|
|
|
uni.navigateTo({
|
|
|
url: "../shopDetail/shopDetail?id=" + id
|
|
|
})
|
|
|
},
|
|
|
loadInfo: function() {
|
|
|
this.loadView();
|
|
|
let that = this
|
|
|
weixin.request({
|
|
|
api: '/api/member/get-product/' + this.id,
|
|
|
method: 'GET',
|
|
|
utilSuccess: r => {
|
|
|
//r.data.poster = this.baseUrl + r.data.poster;
|
|
|
that.info = r.data;
|
|
|
that.info.poster = (weixin.isNull(that.info.poster) ? "../../static/750x500.jpg" :
|
|
|
that.info.poster_url)
|
|
|
that.buyName = that.info.state=='active'?'立即购买':'已下架'
|
|
|
|
|
|
let _marr = r.data.model?JSON.parse(r.data.model):[]
|
|
|
if(_marr.length>0){
|
|
|
_marr.map(item=>{
|
|
|
that.modelList.push(item.name)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
},
|
|
|
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,
|
|
|
sort_name:'sortnumber',
|
|
|
sort_type:"ASC"
|
|
|
},
|
|
|
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/get-product/' + that.id
|
|
|
},
|
|
|
utilSuccess: function(r) {
|
|
|
console.log("r",r)
|
|
|
that.viewCounts = r.total
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
util.alert(res);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
/deep/ .parseHtml video {
|
|
|
width: 80% !important;
|
|
|
min-height: 150px !important;
|
|
|
margin: 20px auto;
|
|
|
height:auto!important;
|
|
|
display: block;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
button::after {
|
|
|
border: none
|
|
|
}
|
|
|
|
|
|
.noscroll {
|
|
|
overflow: hidden;
|
|
|
position: fixed;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.buyBtn {
|
|
|
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;
|
|
|
}
|
|
|
.buyNoBtn{
|
|
|
background: linear-gradient(90deg, #ddd 0%, #ddd 100%);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.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: 535rpx;
|
|
|
// 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;
|
|
|
margin-bottom: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;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
z-index: 20;
|
|
|
|
|
|
.h3 {
|
|
|
display: inline-block;
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
width:90%;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
view{
|
|
|
margin-bottom:10rpx
|
|
|
}
|
|
|
.name {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
line-height: 32rpx;
|
|
|
}
|
|
|
|
|
|
.starts {
|
|
|
margin: 20rpx 0;
|
|
|
height: 20rpx;
|
|
|
line-height: 20rpx;
|
|
|
|
|
|
.iconfont {
|
|
|
color: #333;
|
|
|
font-size: 22rpx;
|
|
|
display: inline-block;
|
|
|
margin-right: 7rpx;
|
|
|
height: 100%;
|
|
|
line-height: 20rpx;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.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: 280rpx;
|
|
|
height: 200rpx;
|
|
|
position: relative;
|
|
|
|
|
|
image {
|
|
|
width: 280rpx;
|
|
|
height: 200rpx;
|
|
|
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>
|
