1406 lines
36 KiB
Vue
1406 lines
36 KiB
Vue
<template>
|
||
<view class="shop-detail-page">
|
||
<HeaderCom></HeaderCom>
|
||
<scroll-view scroll-y="true" class="scroll-view">
|
||
<swiper class="swiper" circular indicator-dots>
|
||
<swiper-item v-for="(item,index) in detailData.rollingImagesResource" :key="index" class="swiper-item">
|
||
<view class="swiper-img">
|
||
<img :src="item.url" style="width: 100%;height: 750rpx;" alt="" />
|
||
<!-- <image :src="item.url" mode="aspectFit"></image> -->
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="detail">
|
||
<view class="name">{{detailData.name||''}}</view>
|
||
<view class="info">
|
||
<image src="@/static/an/point.gif" mode="" class="point-icon"></image>
|
||
<view class="point">{{detailData.mallPoint||''}}</view>
|
||
<!-- <view class="price">¥{{detailData.price.sale||0}}</view> -->
|
||
</view>
|
||
<view class="freight">{{feeRule}}</view>
|
||
</view>
|
||
<view class="introduce">
|
||
<view class="title">详情介绍</view>
|
||
<!-- <img :src="detailData.detailImagesResource[0].url" alt="" style="width: 100%;"> -->
|
||
<template v-for="(item,index) in detailData.detailImagesResource">
|
||
<img :src="item.url" mode="aspectFit" :key="index" style="width: 100%;"></img>
|
||
</template>
|
||
</view>
|
||
<!-- v-if="detailData.status == 1" -->
|
||
<view class="footer">
|
||
<view class="left">
|
||
<view class="left-item" @click="goHome">
|
||
<image src="@/static/shop/sy.png" mode="aspectFit" class="icon"></image>
|
||
首页
|
||
</view>
|
||
<view class="left-item" @click="handleCustomer">
|
||
<image src="@/static/shop/kf.png" mode="aspectFit" class="icon"></image>
|
||
客服
|
||
</view>
|
||
<view class="left-item" @click="copy">
|
||
<image src="@/static/shop/fx.png" mode="aspectFit" class="icon"></image>
|
||
分享
|
||
</view>
|
||
</view>
|
||
<view class="purchase" @click="buy">立即抢购</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 实物商品 -->
|
||
<popup-view v-model="show" mode="bottom" border-radius="15" zIndex="1">
|
||
<view class="popup-main">
|
||
<view class="address">
|
||
<view class="detail" @click="selectAddress" v-if="JSON.stringify(address) === '{}'">
|
||
<view class="address-info">
|
||
<view class="info">
|
||
<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
|
||
</image>
|
||
<view class="name">选择收货地址，让快递到家~</view>
|
||
</view>
|
||
</view>
|
||
<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
|
||
</view>
|
||
<view class="detail" @click="selectAddress" v-else>
|
||
<view class="address-info">
|
||
<view class="info">
|
||
<image src="@/static/zy/index/address.png" mode="aspectFit" class="address-icon">
|
||
</image>
|
||
<view class="name">{{address.receiver}}</view>
|
||
<view class="phone">{{address.phone}}</view>
|
||
</view>
|
||
<view class="address-detail">{{address.province}} {{address.city}} {{address.area}}
|
||
{{address.address}}</view>
|
||
</view>
|
||
<image src="@/static/zy/index/jt.png" mode="aspectFit" class="arr-icon"></image>
|
||
</view>
|
||
<!-- <image src="" mode="aspectFit" class="edit-icon"></image> -->
|
||
</view>
|
||
<view class="popup-header">
|
||
<image :src="detailData.coverResource.url" mode="" class="popup-header-img"></image>
|
||
<view class="popup-info">
|
||
<view class="popup-info-name">{{detailData.name}}</view>
|
||
<view class="popup-info-price">
|
||
<view class="popup-info-price-left">
|
||
<view class="popup-clover">
|
||
<image src="@/static/an/point.gif" mode="" class="clover-img"></image>
|
||
{{detailData.mallPoint}}
|
||
</view>
|
||
|
||
<view class="popup-price">
|
||
<!-- <text class="popup-symbol">¥</text>{{detailData.price.sale}} -->
|
||
</view>
|
||
</view>
|
||
<view class="operation">
|
||
<image src="@/static/new/mine/sub.png" mode="" class="subs" @click="sub()"></image>
|
||
<view class="operation-num">{{quantity}}</view>
|
||
<image src="@/static/new/mine/add.png" mode="" class="add" @click="add()"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item">
|
||
<view class="label">邮费</view>
|
||
<view class="value">{{Number(previewData.deliveryFee)}}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view>实际支付</view>
|
||
<view>
|
||
<text>{{previewData.points}} 积分</text>
|
||
<text style="margin-left: 10rpx;"
|
||
v-if="previewData.deliveryFee > 0">¥{{Number(previewData.deliveryFee)}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="mains" v-if="payList.length > 0 && previewData.deliveryFee > 0">
|
||
<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
|
||
<view class="left">
|
||
<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
|
||
{{item.label}}
|
||
</view>
|
||
<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
|
||
</view>
|
||
</view>
|
||
<view class="agreement" @click="agreementVisible = !agreementVisible">
|
||
<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
|
||
我已满18岁，已阅读并同意
|
||
<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
|
||
</view>
|
||
<view class="popup-footer">
|
||
<view class="now-buy" @click="confirmBuy">
|
||
立即支付
|
||
<text>{{previewData.points}} 积分</text>
|
||
<text style="margin-left: 20rpx;"
|
||
v-if="previewData.deliveryFee > 0">¥{{Number(previewData.deliveryFee)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
<!-- 虚拟商品 -->
|
||
<popup-view v-model="virtualShow" mode="bottom" border-radius="15" zIndex="1">
|
||
<view class="popup-main">
|
||
<view class="popup-header">
|
||
<image :src="virtualDetail.productCoverResource.url" mode="" class="popup-header-img"></image>
|
||
<view class="popup-info">
|
||
<view class="popup-info-name">{{virtualDetail.productAbbreviation}}</view>
|
||
<view class="popup-info-price">
|
||
<view class="popup-info-price-left">
|
||
<view class="popup-clover">
|
||
<image src="@/static/an/point.gif" mode="" class="clover-img"></image>
|
||
{{virtualDetail.mallPoint}}
|
||
</view>
|
||
|
||
<view class="popup-price">
|
||
<!-- <text class="popup-symbol">¥</text>{{detailData.price.sale}} -->
|
||
</view>
|
||
</view>
|
||
<!-- <view class="operation">
|
||
<image src="@/static/new/mine/sub.png" mode="" class="subs" @click="sub()"></image>
|
||
<view class="operation-num">{{quantity}}</view>
|
||
<image src="@/static/new/mine/add.png" mode="" class="add" @click="add()"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="item">
|
||
<view class="label">邮费</view>
|
||
<view class="value">{{Number(previewData.deliveryFee)}}</view>
|
||
</view> -->
|
||
<view class="item">
|
||
<view>实际支付</view>
|
||
<view>
|
||
<text>{{virtualDetail.points}} 积分</text>
|
||
<text style="margin-left: 10rpx;"
|
||
v-if="virtualDetail.deliveryFee > 0">¥{{Number(virtualDetail.deliveryFee)}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="item" v-if="virtualDetail.deliveryType === 'BIRD_VIRTUAL'">
|
||
<view>充值账号</view>
|
||
<view>
|
||
<input type="text" placeholder="请输入充值账号" style="font-weight: bold;font-size: 28rpx;color: #333333;text-align: right;" v-model="account">
|
||
</view>
|
||
</view>
|
||
<view class="item" v-if="virtualDetail.tips">
|
||
<!-- <view>领取方式</view> -->
|
||
<view style="word-break: break-all;font-size: 24rpx;color: #999;">
|
||
{{virtualDetail.tips}}
|
||
</view>
|
||
</view>
|
||
<!-- <view class="mains" v-if="payList.length > 0">
|
||
<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
|
||
<view class="left">
|
||
<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
|
||
{{item.label}}
|
||
</view>
|
||
<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
|
||
</view>
|
||
</view> -->
|
||
<view class="agreement" @click="agreementVisible = !agreementVisible">
|
||
<image src="@/static/new/address/s.png" mode="" class="agreement-icon" v-if="agreementVisible"></image>
|
||
<image src="@/static/new/address/no.png" mode="" class="agreement-icon" v-else></image>
|
||
我已满18岁，已阅读并同意
|
||
<text class="agreement-color" @click.stop="agreementCk('index')">《用户协议》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('privacy')">《隐私政策》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('nonage-rule')">《儿童个人信息保护规则》、</text>
|
||
<text class="agreement-color" @click.stop="agreementCk('nonage')">《支付服务协议》</text>
|
||
</view>
|
||
<view class="popup-footer">
|
||
<view class="now-buy" @click="confirmVirtualBuy">
|
||
立即支付
|
||
<text>{{virtualDetail.points}} 积分</text>
|
||
<text style="margin-left: 20rpx;"
|
||
v-if="virtualDetail.deliveryFee > 0">¥{{Number(virtualDetail.deliveryFee)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/shop/detail"></page-popup>
|
||
|
||
<template v-if="isPayDlgVisible">
|
||
<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
myMixins
|
||
} from "@/mixins/mixins.js";
|
||
import {
|
||
productDetailApi,
|
||
favorItemApi,
|
||
delFavorItemApi
|
||
} from '@/API/product.js'
|
||
import {
|
||
carriageRule
|
||
} from '@/API/shop.js'
|
||
|
||
import {
|
||
customerApi,
|
||
userAddress,
|
||
shareApi
|
||
} from '@/API/user.js'
|
||
import {
|
||
orderPreview,
|
||
createShopOrder
|
||
} from '@/API/order.js'
|
||
import { virtualOrderPreviewApi,virtualShopOrderApi,virtualOrderPaidApi } from '@/API/virtual.js'
|
||
import HeaderCom from '@/pages/components/header.vue'
|
||
import ConfirmCom from './confirm'
|
||
import isPayDlgVue from '@/pages/components/isPayDlg.vue'
|
||
import {
|
||
orderPaidApi
|
||
} from '@/API/index.js'
|
||
import reportClickFn from '@/utils/report.js'
|
||
export default {
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
id: "",
|
||
show: false, //立即购买弹框
|
||
quantity: 1,
|
||
detailData: {
|
||
detailImages: "",
|
||
price: {},
|
||
coverResource: {}
|
||
}, //商品详情
|
||
scroll: 0,
|
||
footerType: "", //是否现实底部
|
||
customer: '',
|
||
feeRule: '',
|
||
address: {},
|
||
previewData: {},
|
||
shareUrl: '',
|
||
shareqr: '',
|
||
payList: [],
|
||
payType: '',
|
||
isBtnStatus:false,
|
||
isPayDlgVisible:false,
|
||
orderNo:'',
|
||
agreementVisible:false,
|
||
isPayBtn:false,
|
||
virtualShow:false,
|
||
virtualDetail:{
|
||
productCoverResource:{}
|
||
},
|
||
account:'',
|
||
isVirtual:false,//是否虚拟商品
|
||
}
|
||
},
|
||
components: {
|
||
HeaderCom,
|
||
ConfirmCom,
|
||
isPayDlgVue
|
||
},
|
||
onLoad(opation) {
|
||
if (opation.shareqr) {
|
||
this.shareqr = opation.shareqr
|
||
}
|
||
this.id = opation.id
|
||
this.footerType = opation.footer ? opation.footer : ''
|
||
this.getDetail()
|
||
// this.getdeliveryFee()
|
||
if (uni.getStorageSync('box-token')) {
|
||
this.getCustomer()
|
||
}
|
||
|
||
uni.$on('backAddressParams', params => {
|
||
if (params.id) {
|
||
this.address = params
|
||
this.getOrderPreview()
|
||
}
|
||
});
|
||
this.getCarriageRule()
|
||
this.getShare()
|
||
},
|
||
onPageScroll(res) {
|
||
this.scroll = res.scrollTop
|
||
},
|
||
methods: {
|
||
|
||
// 用户协议 隐私政策
|
||
agreementCk(type){
|
||
uni.navigateTo({
|
||
url:`/pages/agreement/${type}`
|
||
})
|
||
},
|
||
goPage(type){
|
||
uni.navigateTo({
|
||
url:`/pages/agreement/nonage`
|
||
})
|
||
},
|
||
againPay(){
|
||
|
||
if(this.detailData.type === 'VIRTUAL'){
|
||
this.confirmVirtualBuy()
|
||
}else{
|
||
this.confirmBuy()
|
||
}
|
||
|
||
},
|
||
isCancelCk(){
|
||
this.isPayDlgVisible = false
|
||
},
|
||
isPayStatus(){
|
||
this.getOrderPaid(this.orderNo,'click')
|
||
},
|
||
getShare() {
|
||
shareApi().then(res => {
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
if (res.data) {
|
||
this.shareUrl = res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getOrderPreview() {
|
||
uni.showLoading()
|
||
orderPreview({
|
||
productId: this.detailData.id,
|
||
quantity: this.quantity,
|
||
userAddressId: this.address.id ? this.address.id : ''
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
|
||
this.previewData = res.data
|
||
|
||
this.payList = []
|
||
this.previewData.methods.forEach(item => {
|
||
let objToAdd = null;
|
||
if (item === 'ALIPAY') {
|
||
objToAdd = {
|
||
label: '支付宝支付',
|
||
type: 'ALIPAY',
|
||
visible: false,
|
||
height: '30rpx',
|
||
width: '30rpx',
|
||
img: '../../static/new/pay/zfb.png',
|
||
};
|
||
} else if (item === 'WECHAT') {
|
||
objToAdd = {
|
||
label: '微信支付',
|
||
type: 'WECHAT',
|
||
visible: false,
|
||
width: '34rpx',
|
||
height: '29rpx',
|
||
img: '../../static/new/pay/wx.png',
|
||
};
|
||
} else if (item === 'POINTS') {
|
||
objToAdd = {
|
||
label: "积分支付",
|
||
type: 'POINTS',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '30rpx',
|
||
height: '31rpx'
|
||
};
|
||
} else if (item === 'NONE') {
|
||
objToAdd = {
|
||
label: "无需支付",
|
||
type: 'NONE',
|
||
visible: false,
|
||
img: '',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
} else if (item === 'COIN') {
|
||
objToAdd = {
|
||
label: "代币支付",
|
||
type: 'COIN',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
}
|
||
|
||
// 只有在objToAdd被赋值的情况下才添加到payList
|
||
if (objToAdd) {
|
||
if (objToAdd.type === 'ALIPAY') {
|
||
// 如果是WECHAT类型，则先添加到数组第一位
|
||
this.payList.unshift(objToAdd);
|
||
} else {
|
||
// 其他类型添加到数组末尾
|
||
this.payList.push(objToAdd);
|
||
}
|
||
}
|
||
});
|
||
this.payList[0].visible = true
|
||
console.log("this.payList[0].type:", this.payList)
|
||
this.payType = this.payList[0].type
|
||
// if(this.previewData.methods){
|
||
// this.previewData.methods.forEach(item => {
|
||
// if(item === 'ALIPAY'){
|
||
// this.payList.push({label:"支付宝支付",type:'ALIPAY',visible:false,img:'../../static/index/zfb.png',width:'30rpx',height:'30rpx'})
|
||
// }else if(item === 'WECHAT'){
|
||
// this.payList.push({label:"微信支付",type:'WECHAT',visible:false,img:'../../static/index/wx.png',width:'34rpx',height:'29rpx'})
|
||
// }else if(item === 'POINTS'){
|
||
// this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/mine/jf.png',width:'30rpx',height:'31rpx'})
|
||
// }else if(item === 'NONE'){
|
||
// this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
|
||
// }
|
||
// })
|
||
// this.payList[0].visible = true
|
||
// this.payType = this.payList[0].type
|
||
// }
|
||
// this.channelGet()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 切换支付方式
|
||
payChange(index, item) {
|
||
this.payList.forEach((v, i) => {
|
||
v.visible = false;
|
||
})
|
||
this.payType = item.type
|
||
this.payList[index].visible = !this.payList[index].visible
|
||
// this.payinfoUrl = ''
|
||
},
|
||
// 选择地址
|
||
selectAddress() {
|
||
uni.navigateTo({
|
||
url: `/pages/mine/address?type=select`
|
||
})
|
||
},
|
||
getCarriageRule() {
|
||
carriageRule().then(res => {
|
||
if (res.code === 200) {
|
||
this.feeRule = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
copy() {
|
||
|
||
let search = window.location.href
|
||
uni.setClipboardData({
|
||
data: `${search}`,
|
||
})
|
||
console.log(search);
|
||
|
||
},
|
||
handleCustomer() {
|
||
window.open(this.customer)
|
||
},
|
||
// 获取详情
|
||
getDetail() {
|
||
uni.showLoading()
|
||
let header = {}
|
||
if (this.shareqr) {
|
||
header = {
|
||
'share-qr': this.shareqr
|
||
}
|
||
} else {
|
||
header = {}
|
||
}
|
||
productDetailApi({
|
||
id: this.id
|
||
}, header).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
// res.data.rollingImagesResource.unshift(res.data.coverResource)
|
||
this.detailData = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
// 滚动到顶部
|
||
goTop() {
|
||
uni.pageScrollTo({
|
||
duration: 300,
|
||
scrollTop: 0 // number number number！
|
||
});
|
||
},
|
||
getCustomer() {
|
||
customerApi().then(res => {
|
||
if (res.code === 200) {
|
||
this.customer = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 减
|
||
sub() {
|
||
if (this.quantity === 1) {
|
||
this.$api.msg("不能小于1！");
|
||
return;
|
||
}
|
||
if (this.quantity > 1) {
|
||
this.quantity--
|
||
}
|
||
this.getOrderPreview()
|
||
},
|
||
// 加
|
||
add() {
|
||
this.quantity++
|
||
this.getOrderPreview()
|
||
},
|
||
// 获取地址列表
|
||
getAddress() {
|
||
uni.showLoading()
|
||
userAddress({
|
||
page: 1,
|
||
size: 10
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
res.data.content.forEach(item => {
|
||
if (item.isDefault === 1) {
|
||
this.address = item
|
||
}
|
||
})
|
||
// this.getDetail()
|
||
this.getOrderPreview()
|
||
// this.getUserInfo()
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 立即购买弹框
|
||
buy() {
|
||
if(this.detailData.type === 'VIRTUAL'){
|
||
console.log("aaa")
|
||
virtualOrderPreviewApi({productId:this.detailData.id}).then(res => {
|
||
if(res.code === 200){
|
||
console.log(res)
|
||
this.virtualDetail = res.data
|
||
this.payList = []
|
||
this.virtualDetail.methods.forEach(item => {
|
||
let objToAdd = null;
|
||
if (item === 'ALIPAY') {
|
||
objToAdd = {
|
||
label: '支付宝支付',
|
||
type: 'ALIPAY',
|
||
visible: false,
|
||
height: '30rpx',
|
||
width: '30rpx',
|
||
img: '../../static/new/pay/zfb.png',
|
||
};
|
||
} else if (item === 'WECHAT') {
|
||
objToAdd = {
|
||
label: '微信支付',
|
||
type: 'WECHAT',
|
||
visible: false,
|
||
width: '34rpx',
|
||
height: '29rpx',
|
||
img: '../../static/new/pay/wx.png',
|
||
};
|
||
} else if (item === 'POINTS') {
|
||
objToAdd = {
|
||
label: "积分支付",
|
||
type: 'POINTS',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '30rpx',
|
||
height: '31rpx'
|
||
};
|
||
} else if (item === 'NONE') {
|
||
objToAdd = {
|
||
label: "无需支付",
|
||
type: 'NONE',
|
||
visible: false,
|
||
img: '',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
} else if (item === 'COIN') {
|
||
objToAdd = {
|
||
label: "代币支付",
|
||
type: 'COIN',
|
||
visible: false,
|
||
img: '../../static/an/point.gif',
|
||
width: '32rpx',
|
||
height: '34rpx'
|
||
};
|
||
}
|
||
|
||
// 只有在objToAdd被赋值的情况下才添加到payList
|
||
if (objToAdd) {
|
||
if (objToAdd.type === 'ALIPAY') {
|
||
// 如果是WECHAT类型，则先添加到数组第一位
|
||
this.payList.unshift(objToAdd);
|
||
} else {
|
||
// 其他类型添加到数组末尾
|
||
this.payList.push(objToAdd);
|
||
}
|
||
}
|
||
});
|
||
this.payList[0].visible = true
|
||
console.log("this.payList[0].type:", this.payList)
|
||
this.payType = this.payList[0].type
|
||
this.virtualShow = true
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
|
||
})
|
||
|
||
}else{
|
||
this.getAddress()
|
||
this.quantity = 1
|
||
this.show = true
|
||
}
|
||
|
||
|
||
// 兑换预览埋点
|
||
reportClickFn('product_detail_preview_clk')
|
||
},
|
||
// 虚拟商品购买
|
||
confirmVirtualBuy(){
|
||
this.isVirtual = true
|
||
if(this.isPayBtn){
|
||
return
|
||
}
|
||
this.isPayBtn = true
|
||
setTimeout(()=>{
|
||
this.isPayBtn = false;
|
||
}, 2000);
|
||
if(!this.agreementVisible){
|
||
this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
|
||
return
|
||
}
|
||
uni.hideLoading()
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
if(this.isBtnStatus){
|
||
return
|
||
}
|
||
this.isBtnStatus = true
|
||
setTimeout(()=>{
|
||
this.isBtnStatus = false;
|
||
}, 2000);
|
||
let data = {
|
||
productId:this.detailData.id,
|
||
method:'POINTS',
|
||
// method:this.payType,
|
||
source:'EXCHANGE'
|
||
}
|
||
if(this.virtualDetail.deliveryType === 'BIRD_VIRTUAL' && !this.account){
|
||
this.$api.msg('请输入充值账号')
|
||
return
|
||
}
|
||
// v-if="virtualDetail.deliveryType === 'BIRD_VIRTUAL'"
|
||
if(this.account){
|
||
data['account'] = this.account.replace(/\s+/g, '')
|
||
}
|
||
// if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.account))) {
|
||
// this.$api.msg('请输入正确的手机号');
|
||
// return;
|
||
// }
|
||
virtualShopOrderApi(data).then(res => {
|
||
console.log("this.payType:",this.payType)
|
||
if (res.code === 200) {
|
||
// if (this.payType === 'WECHAT' || this.payType === 'ALIPAY') {
|
||
// window.location.href = res.data.payParams.payinfo
|
||
// }
|
||
if (res.data.payParams.payinfo) {
|
||
window.location.href = res.data.payParams.payinfo
|
||
}
|
||
this.orderNo = res.data.no
|
||
this.isPayDlgVisible = true
|
||
console.log("res.data.no:",res.data.no)
|
||
this.getVirtualOrderPaid(res.data.no)
|
||
let clearTime = 0
|
||
this.timer = setInterval(() => {
|
||
this.getVirtualOrderPaid(res.data.no)
|
||
clearTime += 3
|
||
if (clearTime == 30) {
|
||
uni.hideLoading()
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
// this.$api.msg("未查询到支付结果")
|
||
}
|
||
}, 3000);
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
getVirtualOrderPaid(no){
|
||
virtualOrderPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
// 实际兑换埋点
|
||
// reportClickFn('product_detail_ preview_pay_clk')
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
this.isPayDlgVisible = false
|
||
uni.navigateTo({
|
||
url: `/pages/mine/payVirtualSuccess?no=${no}&price=${this.virtualDetail.deliveryFee}&point=${this.virtualDetail.points}&payType=${this.payType}&productName=${this.virtualDetail.productName}`
|
||
})
|
||
this.quantity = 1
|
||
this.show = false
|
||
uni.hideLoading()
|
||
}else{
|
||
if(types === 'click'){
|
||
this.$api.msg('未查询到支付结果')
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
console.log("aaa")
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 确认购买
|
||
confirmBuy() {
|
||
this.isVirtual = false
|
||
// if(this.previewData.methods.length === 0){
|
||
// return
|
||
// }
|
||
if(this.isPayBtn){
|
||
return
|
||
}
|
||
this.isPayBtn = true
|
||
setTimeout(()=>{
|
||
this.isPayBtn = false;
|
||
}, 2000);
|
||
if(!this.agreementVisible){
|
||
this.$api.msg("请阅读并同意《用户协议》、《隐私政策》、《儿童个人信息保护规则》、《支付服务协议》")
|
||
return
|
||
}
|
||
uni.hideLoading()
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
if(this.isBtnStatus){
|
||
return
|
||
}
|
||
this.isBtnStatus = true
|
||
setTimeout(()=>{
|
||
this.isBtnStatus = false;
|
||
}, 2000);
|
||
if (JSON.stringify(this.address) === '{}') {
|
||
this.$api.msg('请选择地址')
|
||
return
|
||
}
|
||
// if(this.payType === 'POINTS' && this.detailData.mallPoint > this.infoDetail.points){
|
||
// return
|
||
// }
|
||
let data = {
|
||
productId: this.id,
|
||
userAddressId: this.address.id,
|
||
// method: this.payType,
|
||
method: 'POINTS',
|
||
methodCarriage: this.payType,
|
||
quantity: this.quantity,
|
||
source:'EXCHANGE'
|
||
}
|
||
// uni.showLoading()
|
||
createShopOrder(data).then(res => {
|
||
console.log("this.payType:",this.payType)
|
||
if (res.code === 200) {
|
||
// if (this.payType === 'WECHAT' || this.payType === 'ALIPAY') {
|
||
// window.location.href = res.data.payParams.payinfo
|
||
// }
|
||
if (res.data.payParams.payinfo) {
|
||
window.location.href = res.data.payParams.payinfo
|
||
}
|
||
this.orderNo = res.data.no
|
||
this.isPayDlgVisible = true
|
||
this.getOrderPaid(res.data.no)
|
||
let clearTime = 0
|
||
this.timer = setInterval(() => {
|
||
this.getOrderPaid(res.data.no)
|
||
clearTime += 3
|
||
if (clearTime == 30) {
|
||
uni.hideLoading()
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
// this.$api.msg("未查询到支付结果")
|
||
}
|
||
}, 3000);
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
goHome() {
|
||
uni.switchTab({
|
||
url: `/pages/index/new-index`
|
||
})
|
||
},
|
||
getOrderPaid(no,types) {
|
||
orderPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
// 实际兑换埋点
|
||
reportClickFn('product_detail_ preview_pay_clk')
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
this.$api.msg('支付成功')
|
||
this.isPayDlgVisible = false
|
||
if(this.isVirtual){
|
||
uni.navigateTo({
|
||
url: `/pages/shop/paySuccess?no=${no}&price=${this.virtualDetail.totalAmount}&point=${this.virtualDetail.points}&payType=${this.payType}&productName=${this.virtualDetail.productName}&quantity=${this.virtualDetail.quantity}`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url: `/pages/shop/paySuccess?no=${no}&price=${this.previewData.deliveryFee}&point=${this.previewData.points}&payType=${this.payType}&productName=${this.previewData.productName}&quantity=${this.previewData.quantity}`
|
||
})
|
||
}
|
||
|
||
this.quantity = 1
|
||
this.virtualShow = false
|
||
uni.hideLoading()
|
||
}else{
|
||
if(types === 'click'){
|
||
this.$api.msg('未查询到支付结果')
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.shop-detail-page {
|
||
|
||
// padding-top: 112rpx;
|
||
.scroll-view {
|
||
|
||
.swiper {
|
||
width: 750rpx;
|
||
height: 750rpx;
|
||
|
||
// height: 480rpx;
|
||
.swiper-item {
|
||
width: 750rpx;
|
||
height: 750rpx;
|
||
|
||
// height: 480rpx;
|
||
.swiper-img {
|
||
width: 750rpx;
|
||
height: 750rpx;
|
||
// height: 480rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #F5F5F5;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
width: 750rpx;
|
||
background: #FFFFFF;
|
||
padding: 24rpx 32rpx 32rpx 32rpx;
|
||
|
||
.name {
|
||
width: 686rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
|
||
.point-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.point {
|
||
margin-left: 16rpx;
|
||
font-weight: 800;
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.price {
|
||
margin-left: 24rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
|
||
.freight {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
|
||
.introduce {
|
||
width: 100%;
|
||
margin-top: 16rpx;
|
||
padding-bottom: 144rpx;
|
||
background-color: #fff;
|
||
|
||
.title {
|
||
padding: 24rpx 32rpx;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 144rpx;
|
||
padding: 24rpx 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
|
||
.left-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
margin-right: 56rpx;
|
||
|
||
.icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.purchase {
|
||
width: 328rpx;
|
||
height: 96rpx;
|
||
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-main {
|
||
padding: 30rpx 22rpx;
|
||
// padding: 32rpx 32rpx 0rpx 32rpx;
|
||
z-index: 9991;
|
||
|
||
// max-height: 900rpx;
|
||
// position: relative;
|
||
.address {
|
||
// width: 686rpx;
|
||
width: 100%;
|
||
// background: #FFFFFF;
|
||
// border-radius: 8rpx;
|
||
// padding: 24rpx 0rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 18rpx;
|
||
|
||
.detail {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
|
||
.address-info {
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.address-icon {
|
||
width: 30rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.name {
|
||
font-weight: 800;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
// max-width: 250rpx;
|
||
// overflow: hidden;
|
||
// white-space: nowrap;
|
||
// text-overflow: ellipsis;
|
||
}
|
||
|
||
.phone {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.address-detail {
|
||
width: 600rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.arr-icon {
|
||
width: 20rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.edit-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 158rpx;
|
||
|
||
.popup-header-img {
|
||
width: 158rpx;
|
||
height: 158rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.popup-info {
|
||
margin-left: 25rpx;
|
||
width: 500rpx;
|
||
|
||
.popup-info-name {
|
||
|
||
width: 482rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.popup-info-price {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.popup-info-price-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.popup-price {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 300;
|
||
font-size: 16rpx;
|
||
color: #888888;
|
||
margin-left: 20rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding-bottom: 8rpx;
|
||
text-decoration: line-through;
|
||
|
||
.popup-symbol {
|
||
// font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
.popup-clover {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 42rpx;
|
||
color: #000000;
|
||
height: 50rpx;
|
||
|
||
.clover-img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.operation {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 144rpx;
|
||
height: 48rpx;
|
||
border-radius: 8rpx;
|
||
|
||
.subs {
|
||
height: 48rpx;
|
||
width: 48rpx;
|
||
}
|
||
|
||
.operation-num {
|
||
height: 48rpx;
|
||
width: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
border-top: 2rpx solid #E6E6E6;
|
||
border-bottom: 2rpx solid #E6E6E6;
|
||
}
|
||
|
||
.add {
|
||
height: 48rpx;
|
||
width: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 685rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.popup-title {
|
||
color: #333333;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
margin-top: 48rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.specification-list {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// flex-wrap: wrap;
|
||
|
||
width: 100%;
|
||
max-height: 600rpx;
|
||
margin-bottom: 50rpx;
|
||
padding-bottom: 220rpx;
|
||
overflow-y: auto;
|
||
|
||
.specification-item {
|
||
z-index: 9999;
|
||
display: inline-block;
|
||
padding: 0 64rpx;
|
||
// width: 200rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
border: 2rpx solid #B3B3BE;
|
||
border-radius: 28rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
font-size: 24rpx;
|
||
color: #B3B3BE;
|
||
margin-right: 32rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.specification-item-active {
|
||
border: 2rpx solid #333333;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.popup-footer {
|
||
z-index: 9999;
|
||
background-color: #fff;
|
||
// padding-bottom: 20rpx;
|
||
margin-top: 30rpx;
|
||
|
||
.footer-num {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
z-index: 9999;
|
||
margin-top: 20rpx;
|
||
|
||
.footer-info {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 800;
|
||
color: #333333;
|
||
|
||
.footer-info-num {
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.item-step {
|
||
margin-top: 17rpx;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item-sub {
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
}
|
||
|
||
.item-num {
|
||
width: 78rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.item-add {
|
||
width: 41rpx;
|
||
height: 41rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.now-buy {
|
||
z-index: 9999;
|
||
margin-top: 46rpx;
|
||
|
||
|
||
width: 706rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
||
border-radius: 16rpx;
|
||
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sss {
|
||
width: 100%;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
|
||
.mains {
|
||
width: 686rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
// margin-left: 32rpx;
|
||
.pay {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 104rpx;
|
||
padding: 0 24rpx;
|
||
|
||
|
||
.left {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.pay-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.select-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement{
|
||
// margin: 40rpx;
|
||
width: 670rpx;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 46rpx;
|
||
.agreement-icon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
vertical-align: middle;
|
||
}
|
||
.agreement-color{
|
||
color: #0080FF;
|
||
}
|
||
}
|
||
</style> |