|
@@ -0,0 +1,263 @@
|
|
|
+import { Component } from 'react';
|
|
|
+import Taro from '@tarojs/taro';
|
|
|
+import {View, Image, Video} from '@tarojs/components'
|
|
|
+import AudioPlayer from '../../components/audio';
|
|
|
+
|
|
|
+import API from '../../utils/API';
|
|
|
+import { pay,payClose,getSelectProject,wxQuery,login } from '../../utils/servers/servers';
|
|
|
+import {resourceAddress} from '../../utils/config';
|
|
|
+
|
|
|
+import './index.less'
|
|
|
+import 'taro-ui/dist/style/components/tag.scss';
|
|
|
+import "taro-ui/dist/style/components/progress.scss";
|
|
|
+import "taro-ui/dist/style/components/icon.scss";
|
|
|
+import "taro-ui/dist/style/components/slider.scss";
|
|
|
+
|
|
|
+import background from '../../assets/images/background.png';
|
|
|
+
|
|
|
+class Details extends Component {
|
|
|
+
|
|
|
+ inst = Taro.getCurrentInstance()
|
|
|
+
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state={
|
|
|
+ projectInfor: {},
|
|
|
+ }
|
|
|
+ this.pay= this.pay.bind(this);
|
|
|
+ this.payClose= this.payClose.bind(this);
|
|
|
+ this.wxQuery= this.wxQuery.bind(this);
|
|
|
+ this.login= this.login.bind(this);
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ this.getSelectProject();
|
|
|
+ }
|
|
|
+
|
|
|
+ onPullDownRefresh(){
|
|
|
+ this.getSelectProject();
|
|
|
+ }
|
|
|
+
|
|
|
+ //H5跳转到微信小程序
|
|
|
+ jumpWeapp(){
|
|
|
+ window.location.href='https://cloud1-2gpyny9bdfc8c33a-1305545304.tcloudbaseapp.com/jump-mp.html?sign=639f843ec9b22075c5ce44e301060206&t=1618818701&id=27';
|
|
|
+ }
|
|
|
+
|
|
|
+ pay(){
|
|
|
+ let token = Taro.getStorageSync('token');
|
|
|
+ if(!token){
|
|
|
+ Taro.getUserProfile({
|
|
|
+ desc: '用于用户登录',
|
|
|
+ success: async (res)=> {
|
|
|
+ let userInfo = res.userInfo
|
|
|
+ let nickName = userInfo.nickName
|
|
|
+ Taro.setStorageSync('userInfor', userInfo);
|
|
|
+ await this.login(nickName);
|
|
|
+ await this.getSelectProject();
|
|
|
+ },
|
|
|
+ fail: ()=>{
|
|
|
+ Taro.showToast({title:'请同意授权获取用户信息',icon:'none'});
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ Taro.showLoading({title:'加载中'})
|
|
|
+ pay({
|
|
|
+ id:this.inst.router.params.id,
|
|
|
+ }).then(v => {
|
|
|
+ Taro.hideLoading();
|
|
|
+ if(v.error.length === 0){
|
|
|
+ if(v.data.amount === "0"){
|
|
|
+ Taro.showToast({title:'购买成功'});
|
|
|
+ this.getSelectProject();
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ API.requestPayment({
|
|
|
+ timeStamp: v.data.timeStamp,
|
|
|
+ nonceStr: v.data.nonceStr,
|
|
|
+ package: v.data.package,
|
|
|
+ signType: 'MD5',
|
|
|
+ paySign: v.data.paySign,
|
|
|
+ success: (_)=> {
|
|
|
+ Taro.showToast({title:'支付成功'});
|
|
|
+ this.wxQuery(v.data.out_trade_no);
|
|
|
+ this.getSelectProject();
|
|
|
+ },
|
|
|
+ fail: (err)=> {
|
|
|
+ console.log(err,'fail');
|
|
|
+ this.payClose(v.data.out_trade_no);
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ Taro.showToast({title:v.error[0].message,icon:'none'})
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ Taro.hideLoading();
|
|
|
+ Taro.showToast({title:'系统错误,请稍后重试',icon:'none'});
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ async login(nickname){
|
|
|
+ let token = Taro.getStorageSync('token');
|
|
|
+ if(!token){
|
|
|
+ let loginMsg = await Taro.login();
|
|
|
+ if (loginMsg.code) {
|
|
|
+ try{
|
|
|
+ let msg = await login({
|
|
|
+ code:loginMsg.code,
|
|
|
+ nickname
|
|
|
+ });
|
|
|
+ if(msg.error.length === 0){
|
|
|
+ Taro.setStorageSync('token', msg.token)
|
|
|
+ }else{
|
|
|
+ Taro.showToast({title:msg.error[0].message,icon:'none'})
|
|
|
+ }
|
|
|
+ }catch (err) {
|
|
|
+ Taro.showToast({title:'系统错误,请稍后重试',icon:'none'});
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ Taro.showToast({title:loginMsg.errMsg,icon:'none'})
|
|
|
+ console.log('登录失败!' + loginMsg.errMsg)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ payClose(orderNo){
|
|
|
+ payClose({
|
|
|
+ orderNo,
|
|
|
+ }).then(v => {
|
|
|
+ if(v.error.length === 0){
|
|
|
+ Taro.showToast({title:'已取消支付',icon:'none'});
|
|
|
+ }else{
|
|
|
+ Taro.showToast({title:v.error[0].message,icon:'none'})
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ Taro.showToast({title:'系统错误,请稍后重试',icon:'none'});
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ wxQuery(orderNo){
|
|
|
+ wxQuery({
|
|
|
+ orderNo:orderNo,
|
|
|
+ }).then(v => {
|
|
|
+ if(v.error.length === 0){
|
|
|
+ this.getSelectProject();
|
|
|
+ }else{
|
|
|
+ Taro.showToast({title:v.error[0].message,icon:'none'})
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ Taro.showToast({title:'系统错误,请稍后重试',icon:'none'});
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ getSelectProject(){
|
|
|
+ getSelectProject({
|
|
|
+ id:this.inst.router.params.id,
|
|
|
+ }).then(v => {
|
|
|
+ if(v.error.length === 0){
|
|
|
+ this.setState({
|
|
|
+ projectInfor: v.data
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ Taro.showToast({title:v.error[0].message,icon:'none'})
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ Taro.showToast({title:'系统错误,请稍后重试',icon:'none'});
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ Taro.stopPullDownRefresh();
|
|
|
+ }
|
|
|
+
|
|
|
+ render () {
|
|
|
+ const { projectInfor } = this.state;
|
|
|
+ return (
|
|
|
+ <View className='detailsPage'>
|
|
|
+ <Image src={background} className='background'/>
|
|
|
+ <View className='introduce'>
|
|
|
+ <View className='imgContent'>
|
|
|
+ {
|
|
|
+ projectInfor.buy === 0 ?
|
|
|
+ <Image onClick={()=>{
|
|
|
+ Taro.previewMedia({
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ url: resourceAddress + projectInfor.thumbnailUrl + ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ }} objectFit='contain' src={resourceAddress + projectInfor.thumbnailUrl} className='img'/> :
|
|
|
+ projectInfor.commodityType === 1 ?
|
|
|
+ <Video
|
|
|
+ src={resourceAddress + projectInfor.commodityUrl}
|
|
|
+ controls
|
|
|
+ autoplay={false}
|
|
|
+ poster={resourceAddress + projectInfor.thumbnailUrl}
|
|
|
+ initialTime='0'
|
|
|
+ direction={-90}
|
|
|
+ enableAutoRotation
|
|
|
+ showBackgroundPlaybackButton
|
|
|
+ id='video'
|
|
|
+ loop={false}
|
|
|
+ muted={false}
|
|
|
+ /> : projectInfor.commodityType === 2 ?
|
|
|
+ <View className='audio'>
|
|
|
+ <Image objectFit='contain' src={resourceAddress + projectInfor.thumbnailUrl} className='audioImg'/>
|
|
|
+ <View className='operation'>
|
|
|
+ <AudioPlayer audioFile={resourceAddress + projectInfor.commodityUrl}/>
|
|
|
+ </View>
|
|
|
+ </View> : <Image objectFit='contain' src={resourceAddress + projectInfor.commodityUrl} className='img'/>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <View className='infor'>
|
|
|
+ <View className='title'>{projectInfor.name}</View>
|
|
|
+ <View className='introduceItem'>
|
|
|
+ <View className='introduceContent'>
|
|
|
+ {
|
|
|
+ projectInfor.summary
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <View className='user'>
|
|
|
+ <View className='typeName'>
|
|
|
+ {projectInfor.typeName}
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className='detailsContent'>
|
|
|
+ <View className='details'>产品详情</View>
|
|
|
+ {
|
|
|
+ Taro.getEnv() === 'WEAPP' ?
|
|
|
+ <mp-html content={projectInfor.buy === 0 ? projectInfor.content : projectInfor.commodityContent} />:
|
|
|
+ <View dangerouslySetInnerHTML={{__html:projectInfor.buy === 0 ? projectInfor.content+'' : projectInfor.commodityContent+''}}/>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ <View className='shop'>
|
|
|
+ <View className='singlePurchase' onClick={()=>{
|
|
|
+ if(Taro.getEnv() === 'WEB'){
|
|
|
+ this.jumpWeapp();
|
|
|
+ }else{
|
|
|
+ this.pay();
|
|
|
+ }
|
|
|
+ }}>购买: ¥{projectInfor.amount}</View>
|
|
|
+ </View>
|
|
|
+ {/*{projectInfor.buy === 0 ? <View className='shop' style={{bottom:Taro.getEnv() === 'WEB' ? '50px' : '0'}}>*/}
|
|
|
+ {/* <View className='singlePurchase' onClick={()=>{*/}
|
|
|
+ {/* if(Taro.getEnv() === 'WEB'){*/}
|
|
|
+ {/* this.jumpWeapp();*/}
|
|
|
+ {/* }else{*/}
|
|
|
+ {/* this.pay();*/}
|
|
|
+ {/* }*/}
|
|
|
+ {/* }}>购买: ¥{projectInfor.amount}</View>*/}
|
|
|
+ {/*</View> : null}*/}
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default Details
|
|
|
+
|