<template>
|
<view class="card-list-item">
|
<view @click="()=>{
|
|
if(dto&&dto.id){
|
if(dto.status!=='B'&&dto.status!=='O'){
|
if(source==='order'&&dto.status=='PENDING'){
|
toPay()
|
}else{
|
if(source!=='order'){
|
showDetail()
|
}
|
|
}
|
}else{
|
if(source!=='order'){
|
showDetail()
|
}
|
}
|
}
|
|
|
}">
|
<view class="flex shop" v-if="type=='shop'">
|
<view class="m-r-10 image">
|
<!-- <image src="../../static/uni.png" mode="aspectFill" class="cover" /> -->
|
|
<image :src="dto.cover" mode="aspectFill" class="cover" />
|
<!-- <view class="status-left-top" v-if="dto.status=='O'">已结束</view>
|
<view class="status-left-top" v-if="dto.status=='A'">团购中</view>
|
<view class="status-left-top" v-if="dto.status=='J'">报名中</view> -->
|
<view class="status-left-top" :class="[dto.status]" v-if="dto.statusStr">{{dto.statusStr}}</view>
|
|
</view>
|
<view class="infos">
|
<view class="title">{{dto.name}}</view>
|
<view class="time" v-if="dto.status=='B'||dto.status=='O'">
|
|
</view>
|
<view class="time" v-else>
|
<!-- dto.expireTimeStr -->
|
<!-- expireTimeStr -->
|
<!-- expireTimeStr: "2025-06-20 09:35:44" -->
|
<span class="num">{{tarr[0]}}</span>
|
<span class="c">天</span>
|
<span class="num">{{tarr[1]}}</span>
|
<span class="c">时</span>
|
<span class="num">{{tarr[2]}}</span>
|
<span class="c">分</span>
|
<span class="num">{{tarr[3]}}</span>
|
<span class="c">秒</span>
|
</view>
|
<view class="flex money">
|
<view class="c">拼团价 ￥</view>
|
<view class="price">{{dto.price || dto.defaultGroupPrice || '-'}}</view>
|
<view class="oldprice">{{dto.defaultNormalPrice || ''}}</view>
|
|
</view>
|
</view>
|
</view>
|
<view class="flex travel" v-if="type=='travel'">
|
<view class="m-r-10 image">
|
<image :src="dto.cover" mode="aspectFill" class="cover" />
|
<view class="status-left-top" :class="[dto.status]" v-if="dto.statusStr">{{dto.statusStr}}</view>
|
<!-- <view class="status-left-top" v-if="dto.status=='O'">已结束</view> -->
|
<!-- <view class="status-left-top" v-if="dto.status=='J'">报名中</view> -->
|
<!-- <view class="status-left-top" v-if="dto.status=='O'">报名</view> -->
|
<!-- <view class="status-left-top" v-if="dto.status=='O'">已结束</view> -->
|
|
</view>
|
<view class="infos">
|
<view class="title">{{dto.title}}</view>
|
<view class="flex location">
|
<!-- <uni-icons type="checkbox"></uni-icons> -->
|
<image class="icon-clock m-r-6 m-t-2" src="../../static/common/icon-clock.png"></image>
|
<view>
|
{{dto.startTimeStr&&(dto.startTimeStr.substring(5,10)+'到')}}{{dto.endTimeStr&&dto.endTimeStr.substring(5,10) || ''}}
|
</view>
|
</view>
|
<view class="flex location" style="flex-wrap: inherit;">
|
<!-- <uni-icons type="location"></uni-icons> -->
|
<image class="icon-loc m-r-6 m-t-2" src="../../static/common/icon-loc.png"></image>
|
<view class="location-txt">{{dto.targetAddress}}</view>
|
</view>
|
<view class="flex money m-t-20">
|
<view class="c">价格 ￥</view>
|
<view class="price">{{dto.price || '-'}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="flex peoples" style="min-height: 50rpx;">
|
<view class="flex">
|
<view class="icons" v-if="dto.userPictures">
|
<view class="flex">
|
<view v-for="(img,k) of dto.userPictures.split(',')">
|
<image v-if="k<=3" :src="img" mode="aspectFill" class="icon"
|
:style="{'left': k*60 + 'rpx'}">
|
</image>
|
</view>
|
</view>
|
|
|
<view class="desc"
|
:style="{'left': (10+ (dto&&dto.userPictures&&( dto.userPictures.split(',').length<=4?(dto.userPictures.split(',').length*60):240) || 0) ) +'rpx'}">
|
{{dto.currentNum||0}}人上车
|
</view>
|
</view>
|
|
</view>
|
<view v-if="dto.status!=='B'&&dto.status!=='O'" class="m-l-a">
|
<view @click.stop="toPay" v-if="source==='order'&&dto.status=='PENDING'"
|
class="card-list-item-button-green">
|
{{dto.join?'待支付':'支付超时已取消'}}
|
</view>
|
<view @click.stop="cancelPay" v-if="source==='order'&&dto.status=='PENDING'"
|
class="card-list-item-button-green">
|
取消订单
|
</view>
|
<view @click.stop="showDetail" v-else-if="source!=='order'" class="card-list-item-button-green">
|
{{type=='shop'&&(dto.join?'已入团':'立即成团') || type=='travel'&&(dto.join?'已入团':'立即上车')||'-'}}
|
</view>
|
</view>
|
|
<!-- 以及无法拼团的显示image -->
|
<!-- 拼团成功 -->
|
<view v-if="dto.status=='B'||dto.status=='O'" class="m-l-a">
|
<view class="card-list-item-button-green-success" :class="[type]" v-if="source!=='order'">
|
|
</view>
|
|
|
</view>
|
</view>
|
<!-- &&type=='travel' -->
|
<view v-if="source==='order'&&type=='travel'&&dto.status!=='B'&&dto.status!=='O'&&dto.join" class="peoples">
|
<view @click.stop="showCode" class="card-list-item-button-green m-l-a">
|
核销二维码
|
</view>
|
</view>
|
<view v-if="source==='order'" class="peoples flex">
|
<view v-if="type=='travel'&&(dto.status==='B'||dto.status==='O')&&dto.join" @click.stop="showCode"
|
class="card-list-item-button-green-2 m-l-a m-r-10" style="margin-left: auto;">
|
核销二维码
|
</view>
|
<view @click.stop="showDetail" class="card-list-item-button-green-2 m-l-a m-r-10"
|
style="margin-left: auto;" v-if="type=='travel'">
|
活动详情
|
</view>
|
<view @click.stop="toOrderDetail" class="card-list-item-button-green-3 m-r-0"
|
:class="[type=='travel'?'':'m-l-a']">
|
订单详情
|
</view>
|
</view>
|
|
|
</view>
|
|
<!-- <uni-popup ref="popup_code" type="bottom" @maskClick="closePopCode">
|
<view class="popup-form">
|
核销二维码核销二维码核销二维码核销二维码核销二维码核销二维码
|
核销二维码核销二维码核销二维码核销二维码核销二维码核销二维码核销二维码核销二维码
|
|
<canvas type="2d" id="itemOrderCode" style="width: 300rpx;height: 300rpx;display: block;" class="code">
|
aaaaa
|
</canvas>
|
|
</view>
|
</uni-popup> -->
|
<!-- 二维码 -->
|
<uni-popup ref="popup_shop" type="bottom" @maskClick="closePop">
|
<view class="popup-form">
|
<!-- 地址选择 -->
|
<view style="margin-bottom: 16rpx;">
|
<common-address-select ref="addressselect"></common-address-select>
|
</view>
|
<!-- 商品图片 -->
|
<image :src="dto.cover" mode="aspectFit" class="cover-img" />
|
<!-- 各种参数 -->
|
<scroll-view class="form-vars" :scroll-y="true" style="height: 400rpx;" :show-scrollbar="true">
|
<view class="title">
|
{{dto.name || '-'}}
|
</view>
|
|
<view v-for="field of form.extraFieldList">
|
<view class="var-title">{{field.name || '-'}}<span v-if="false"
|
class="t-grey">({{field.charging?'计费':'不计费'}})</span></view>
|
<view class="flex var-items">
|
<view class="var-item" v-for="value of field.values" :key="value"
|
@click="setValueSelect(field,value)" :class="[field.selectvalue==value?'cur':'']">
|
{{value}}
|
</view>
|
</view>
|
|
</view>
|
<view v-if="form.description">
|
<view class="var-title">
|
介绍:
|
</view>
|
<view v-html="form.description||''" class="rich2">
|
|
</view>
|
</view>
|
</scroll-view>
|
<!-- <view>
|
<input type="number" v-model="num" :maxlength="4" />
|
</view> -->
|
<!-- 提交按钮 -->
|
<view class="flex footer-shop" v-if="!dto.join&&dto.status!=='B'&&dto.status!=='O'">
|
<view class="flex">
|
<view class="total">总计: ￥ </view>
|
<view class="price">{{selectprice}}</view>
|
</view>
|
<view @click.stop="submitShop" class="txt">
|
立即成团
|
</view>
|
</view>
|
</view>
|
|
|
|
|
</uni-popup>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
import drawQrcode from '@/plugins/weapp.qrcode.esm.js'
|
|
export default {
|
name: "card-list-item",
|
|
methods: {
|
setValueSelect(dto, value) {
|
dto.selectvalue = value
|
// console.log('setValueSelect', dto, value)
|
},
|
closePop() {
|
this.$emit('pop', 0)
|
},
|
toOrderDetail() {
|
var url = `/pages/order/bussiness-order/bussincess-order-detail?source=user&type=${this.type}`
|
if (this.currentInfo.openId) {
|
//学生
|
url += `&id=${this.dto.orderId || this.dto.id}`
|
} else {
|
if (this.type == 'travel') {
|
url += `&id=${this.dto.id}&userId=${this.currentInfo.id}`
|
} else {
|
url += `&id=${this.dto.orderId || this.dto.id}`
|
}
|
}
|
|
uni.navigateTo({
|
url: url
|
})
|
},
|
async cancelPay() {
|
if (!this.currentInfo.id) {
|
await this.$message.confirm('未登录，前往登录?')
|
uni.navigateTo({
|
url: '/pages/user/user'
|
})
|
return
|
}
|
await this.$message.confirm('是否确认取消支付?')
|
this.$message.showLoading()
|
const orderInfo = await this.$http.request('post', '/api/order/cancel/' + (this.dto.orderId ||
|
this.dto.id || ''), {
|
|
})
|
this.$message.hideLoading()
|
if (code == 0) {
|
this.$message.showToast('取消成功')
|
this.dto.status = 'COMPLETED'
|
this.dto.statusStr = '已取消'
|
this.$emit('refresh', {})
|
}
|
|
},
|
async toPay() {
|
if(!this.dto.join){
|
return
|
}
|
let item = this.dto
|
// todo 待支付
|
if (!this.currentInfo.id) {
|
// this.$message.showToast('请先登陆')
|
await this.$message.confirm('未登录，前往登录?')
|
uni.navigateTo({
|
url: '/pages/user/user'
|
})
|
return
|
}
|
if (item.status === 'PENDING') {
|
// this.$message.showToast('等待接口，请联系开发者')
|
this.$message.showLoading()
|
const orderInfo = await this.$http.request('post', '/api/order/pay/again/' + (this.dto.orderId ||
|
this.dto.id || ''), {
|
|
})
|
var info = orderInfo.data || {}
|
this.$message.hideLoading()
|
if (code == 0) {
|
let that = this
|
wx.requestPayment({
|
...info,
|
success(res) {
|
console.log('pay success', res)
|
that.$message.showToast('支付成功')
|
that.dto.status = 'PAYMENT'
|
that.dto.statusStr = '已支付'
|
that.$emit('refresh', {})
|
},
|
fail(err) {
|
console.error('pay fail', err)
|
that.$message.showToast('支付失败')
|
}
|
})
|
}
|
|
} else {
|
this.$message.showToast('请不要重复支付')
|
return
|
}
|
|
},
|
// closePopCode() {
|
// this.$emit('pop', 0)
|
|
// this.$refs.popup_code.close()
|
|
// },
|
showCode() {
|
uni.navigateTo({
|
url: '/pages/travel/travel-success/travel-code?id=' + this.dto.id
|
})
|
// this.$emit('pop', 1)
|
// let that = this
|
// this.$refs.popup_code.open()
|
// setTimeout(() => {
|
// const query = uni.createSelectorQuery()
|
// query.select('#itemOrderCode')
|
// .fields({
|
// node: true,
|
// size: true
|
// })
|
// .exec((res) => {
|
// console.log('query node',res)
|
// // var canvas = res[0].node
|
// // that.canvascode = canvas
|
// // // 调用方法drawQrcode生成二维码
|
// // drawQrcode({
|
// // canvas: canvas,
|
// // canvasId: 'myQrcode',
|
// // width: 480,
|
// // height: 480,
|
// // padding: 30,
|
// // background: '#ffffff',
|
// // foreground: '#000000',
|
// // text: JSON.stringify({
|
// // 'tripId': that.dto.id
|
// // }),
|
// // })
|
// })
|
// },200)
|
|
},
|
saveCode() {
|
|
// 获取临时路径（得到之后，想干嘛就干嘛了）
|
uni.canvasToTempFilePath({
|
canvasId: 'myQrcode',
|
canvas: this.canvascode,
|
x: 0,
|
y: 0,
|
width: 480,
|
height: 480,
|
destWidth: 260,
|
destHeight: 260,
|
success(res) {
|
console.log('二维码临时路径：', res.tempFilePath)
|
uni.saveImageToPhotosAlbum({
|
filePath: res.tempFilePath,
|
success: function() {
|
console.log('save success');
|
uni.showToast({
|
title: '保存成功'
|
})
|
},
|
fail(res) {
|
// console.error(res)
|
uni.showToast({
|
title: '保存失败。',
|
icon: 'error'
|
})
|
}
|
})
|
},
|
fail(res) {
|
uni.showToast({
|
title: '保存失败',
|
icon: 'error'
|
})
|
}
|
})
|
},
|
async showDetail() {
|
//如果是shop，直接展示购买吧
|
|
if (this.type == 'shop') {
|
uni.navigateTo({
|
url: '/pages/shop/shop-detail?id=' + this.dto.id
|
})
|
|
} else if (this.type == 'travel') {
|
uni.navigateTo({
|
url: '/pages/travel/travel-detail?id=' + this.dto.id
|
})
|
}
|
//如果是travel去详情页面，然后再购买吧
|
|
},
|
async submitShop() {
|
var values = []
|
if (this.num <= 0) {
|
|
}
|
if (this.form.extraFieldList) {
|
for (var field of this.form.extraFieldList) {
|
if (!field.selectvalue) {
|
this.$message.showToast('存在未选规格，请选择完整')
|
return
|
} else {
|
values.push(field.selectvalue)
|
}
|
}
|
}
|
if (!this.address.id) {
|
this.$message.showToast('请先选择收货地址')
|
return
|
}
|
await this.$message.confirm('确定参团吗?')
|
this.$message.showLoading()
|
const {
|
code,
|
data
|
} = await this.$http.request('post', '/api/buy/customer/group/join', {
|
data: {
|
customerAddress: (this.address.schoolAreaStr || '') + (this.address.blockStr || '') + (
|
this
|
.address.room || '') + (this.address.address || ''),
|
customerTel: this.address.tel,
|
customer: this.address.name,
|
num: this.num,
|
values: values, //规格
|
id: this.form.id, //团购id
|
}
|
})
|
|
this.$message.hideLoading()
|
if (code == 0) {
|
|
let that = this
|
let info = data
|
wx.requestPayment({
|
...info,
|
success(res) {
|
console.log('pay success', res)
|
uni.navigateTo({
|
url: '/pages/shop/shop-success/shop-success?id=' + that.form.id
|
})
|
},
|
fail(err) {
|
console.error('pay fail', err)
|
that.$message.showToast('支付失败')
|
}
|
})
|
|
|
}
|
|
|
},
|
|
},
|
data() {
|
return {
|
form: {
|
|
},
|
num: 1,
|
canvascode: undefined
|
};
|
},
|
|
computed: {
|
...mapState({
|
address: state => {
|
return state.defaultaddress || {}
|
},
|
}),
|
selectprice() {
|
if (this.form && this.form.priceList && this.form.extraFieldList) {
|
//根据规格选择对应价格
|
var selects = []
|
for (var item of this.form.extraFieldList) {
|
if (item.charging) {
|
if (item.selectvalue) {
|
selects.push(item.selectvalue)
|
}
|
}
|
}
|
if (selects.length == 0) {
|
return '0.0'
|
}
|
|
for (var prices of this.form.priceList) {
|
// console.log('prices',prices)
|
// prices.values
|
// groupPrice
|
var checks = selects.length
|
for (var s of selects) {
|
if (prices.values.indexOf(s) >= 0) {
|
checks -= 1
|
}
|
}
|
if (checks <= 0) {
|
return ('' + (prices.groupPrice || 0).toFixed(2)) || '0.0'
|
}
|
}
|
|
}
|
return '0.0'
|
},
|
tarr() {
|
// <!-- dto.expireTimeStr -->
|
// <!-- expireTimeStr -->
|
// <!-- expireTimeStr: "2025-06-20 09:35:44" -->
|
// <span class="num">1</span>
|
// <span class="c">天</span>
|
// <span class="num">3</span>
|
// <span class="c">时</span>
|
// <span class="num">24</span>
|
// <span class="c">分</span>
|
// <span class="num">34</span>
|
// <span class="c">秒</span>
|
var dto = this.dto
|
if (dto.expireTimeStr) {
|
var diff = new Date(dto.expireTimeStr).getTime() - new Date().getTime()
|
if (diff < 0) {
|
return ['-', '-', '-', '-']
|
}
|
var day = Math.floor(diff / (24 * 3600 * 1000)) || '0'
|
var lefttime1 = diff % (24 * 3600 * 1000)
|
if (lefttime1 <= 0) {
|
return [day, '-', '-', '-']
|
} else {
|
var hour = Math.floor(lefttime1 / (3600 * 1000)) || '0'
|
var lefttime2 = lefttime1 % (3600 * 1000)
|
if (lefttime2 <= 0) {
|
return [day, hour, '-', '-']
|
} else {
|
var min = Math.floor(lefttime2 / (60 * 1000)) || '0'
|
var lefttime3 = lefttime2 % (60 * 1000)
|
if (lefttime3 <= 0) {
|
return [day, hour, min, '-']
|
} else {
|
var sec = Math.floor(lefttime3 / (1000)) || '0'
|
return [day, hour, min, sec]
|
}
|
}
|
}
|
}
|
return ['-', '-', '-', '-']
|
},
|
},
|
props: {
|
type: '',
|
dto: {
|
type: Object,
|
default: {
|
id: '',
|
}
|
},
|
source: {
|
type: String,
|
default () {
|
return ''
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import "./main.scss";
|
</style>
|
