Skip to content

U
uni-pdtravel
Commit 3fee105f authored by 潘永坪's avatar 潘永坪
Browse files
Options

支付宝苹果手机兼容

parent 0cf6b12c
Show whitespace changes
Inline Side-by-side
Showing with 1168 additions and 60 deletions
pages/combination/combiChoose/combiChoose.vue
View file @ 3fee105f
<template>
<!-- 由于配置了两个页面的码，这个页面的代码直接复制distributionCombiChoose里面的代码，两个页面需要同步更新-->
<view class="wrap">
<scroll-view @scroll="scroll" style="height: 100%;" scroll-y>
<view class="banner">
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</view>
</u-swiper>
</view>
<view class="middle">
<!-- <view class="tabbar" :style="tabbarObj">
<text v-for="(item, index) in tabbar" :key="index" @click="tabbarChange(index)" :class="{ on: active == index }">
{{ item }}
</text>
</view> -->
<swiper :current="active" @animationfinish="animationfinish" class="swiper-box" :style="{ height: swiperHeight + 'px' }">
<swiper-item class="swiper-item">
<checkbox-group @change="checkboxChange" class="checkbox-box">
<view class="merchant" v-for="(item, index) in scenicList" :key="index">
<view class="merchant-title" @click="clikDetail(item.id)">
<view class="title-left">
<text>{{ item.name }}</text>
<template v-if="item.couponVoList && item.couponVoList.length > 0">
<image src="@/static/img/scenic/coupon.png"></image>
<text class="title-coupon"> 劵惠 </text>
</template>
</view>
<view v-if="showDistance" class="title-right">
距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km
<u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon>
</view>
</view>
<label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
<view class="product" :class="{ on: items.ifChangeBg }">
<view class="product-left">
<checkbox
style="transform: scale(0.8)"
class="blue"
:disabled="items.status == 2"
:value="JSON.stringify(items)"
:checked="items.ifChecked"
/>
</view>
<view class="product-right">
<view class="product-name">
<text>{{ items.name }}</text>
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
</view>
<view class="product-price">
<view style="font-size: 24rpx;display: flex;">
<text class="product-rule" v-if="items.productRefundRuleVo">
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</text>
<text class="product-rule"> 无需取票 </text>
<text @click.stop="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view>
<view>
<text class="product-orange"> ¥{{ items.originalPrice }} </text>
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
</view>
</view>
</view>
</view>
</label>
<view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)">
更多
<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon>
</view>
<view v-else @click="retractProduct(item)">
收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</view>
</view>
</view>
</checkbox-group>
<u-empty text="空空如也..." mode="list" v-if="scenicList.length == 0" width="320" height="320"></u-empty>
</swiper-item>
<!-- <swiper-item class="swiper-item">
<u-waterfall v-model="albumList" class="waterfall" style="padding-top: 8rpx;">
<template v-slot:left="{leftList}">
<view v-for="(item, index) in leftList" :key="index" class="album-left" @click="goAlbum(index)">
<view class="album-list-top">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<view class="album-btn">
点击定制
<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view v-for="(item, index) in rightList" :key="index" class="album-right" @click="goAlbum(index)">
<view class="album-list-top">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<view class="album-btn">
点击定制
<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</view>
</view>
</view>
</template>
</u-waterfall>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</swiper-item> -->
</swiper>
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="36"></u-icon>
客服
</view>
<view class="bottom-middle">
<view class="bottom-more" v-show="chooseProduct.length > 0">
组合购更优惠
<text class="bottom-three"></text>
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text style="margin-right: 10rpx;"> 明细 </text>
<u-icon name="arrow-up" size="32"></u-icon>
<text class="bottom-number">
{{ chooseProduct.length }}
</text>
</view>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">去预定</text>
</view>
</view>
<!-- 客服组件 -->
<customer :scenicList="scenicList" ref="customer"></customer>
<!-- 购买须知 -->
<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
<!-- 产品明细 -->
<detail :chooseProduct="chooseProduct" ref="detail"></detail>
<!-- 商户详情 -->
<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
<!-- 模态框 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
</u-modal>
</scroll-view>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
<!-- 系统无法访问时弹窗 -->
<u-popup :show="showTip" :round="20">
<view style="padding: 300rpx 0;text-align: center;font-size: 32rpx;font-weight: bold;">
<view>
当前购票人数过多!
</view>
<view style="margin-top: 20rpx;">
请到现场窗口进行购买，或稍后重试
</view>
</view>
</u-popup>
</view>
</template>
<script>
import customer from '@/components/customer.vue' //客服
import buyKnow from '@/components/buyKnow.vue' //购买须知
import detail from './components/detail.vue' //明细
import UWaterfall from '@/uview-ui/components/u-waterfall/u-waterfall.vue'
import merchantDetail from '@/components/merchantDetail' //详情弹窗
export default {
components: {
customer,
buyKnow,
detail,
UWaterfall,
merchantDetail
},
data() {
return {
showTip:false,//系统调不通或者崩了跳出弹窗
detailData:'',//详情数据
showSuodaoImg:false,//索道耳麦图片是否显示隐藏
companyId:'',//公司Id
merchantId: '', //商户Id
groupId: '', //组合Id
groupChannelId: '', //组合渠道Id
channelId:'',//渠道Id
// tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
active: 0, //导航栏下标
currentNum:0,//轮播图下标
imgList: [], //图片列表
scenicList: [], //景区数据
showDistance: false, //定位成功显示距离
buyKnowData: '', //购买须知数据
chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
swiperHeight: 0 ,//swiper高度
tabbarObj:'',
albumList: [{
title: '精彩瞬间',
count: '10W+',
image: '../static/scenic/wonderfulMoment.png',
color: '#037EFF'
},
{
title: '网红旅拍',
count: '8W+',
image: '../static/scenic/travalphoto.png',
color: '#826847'
},
{
title: '抱枕DIY',
count: '4W+',
image: '../static/scenic/pillow.png',
color: '#1175B4'
},
{
title: '明信片',
count: '4W+',
image: '../static/scenic/postcard.png',
color: '#3478DC'
},
{
title: '旅游台历定制',
count: '4W+',
image: '../static/scenic/deskCalender.png',
color: '#1A9B45'
},
{
title: '定制相册',
count: '4W+',
image: '../static/scenic/customPic.png',
color: '#D48D46'
}
],
}
},
watch: {
//选中产品的数量变化
chooseProduct: {
handler(newValue, oldValue) {
//当选中产品时
if (newValue.length > oldValue.length) {
//找到当前选中的产品
let product = newValue[newValue.length - 1]
//商家一级
let merchant = ''
//通过产品一级找到商家一级
this.scenicList.forEach(item => {
if (item.id == product.merchantId) {
merchant = item
}
})
//当选中产品的景区有2个以上选中产品时
let number = 0
this.chooseProduct.forEach(item => {
if (merchant.id == item.merchantId) {
number += 1
}
})
if (product.isMoreBuy !== 0) {
if (number > 1) {
//显示确认弹窗
this.showModal = true
//当前选中的景区产品，用于确定以及取消方法取值
this.chooseMerchantProduct = product
}
} else {
//支持多产品购买时，删除该景区其他产品不支持多产品购买的产品
this.chooseProduct.forEach((item, index) => {
if (merchant.id == item.merchantId && item.isMoreBuy !== 0) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
delete this.chooseProduct[index]
}
})
this.chooseProduct = this.chooseProduct.filter(function (val) {
return val
})
}
}
},
deep: true,
immediate: false
}
},
onLoad(option) {
//由于之前配置了这个页面，暂时进入页面直接跳转页面
let companyId=this.$commonjs.getCompanyId(option)||''
let merchantId=this.$commonjs.getKey(option,'merchantId')||''
let channelId=this.$commonjs.getKey(option,'channelId')||''
let groupId=this.$commonjs.getKey(option,'groupId')||''
let groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
uni.navigateTo({
url:`/pages/combination/distributionCombiChoose/distributionCombiChoose?merchantId=${merchantId}&channelId=${channelId}&groupId=${groupId}&groupChannelId=${groupChannelId}&companyId=${companyId}`
//获取公司Id,保存到本地，支付等逻辑需要入口companyId
this.companyId=this.$commonjs.getCompanyId(option)||''
this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
this.channelId=this.$commonjs.getKey(option,'channelId')||''
this.groupId=this.$commonjs.getKey(option,'groupId')||''
this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
},
onShow() {
//如果是索道
if(this.merchantId=='z0015605022691a5945bbe463141668c'){
this.showSuodaoImg=true
setTimeout(() => {
this.showSuodaoImg = false
}, 2500)
}
//清空之前选中的数据以及状态
this.detailData=''
this.chooseProduct=[]
if(this.$refs.merchantDetail){
//解决支付宝小程序报错问题
this.$refs.merchantDetail.showPop=false
}
if(this.$refs.detail){
//解决支付宝小程序报错问题
this.$refs.detail.showPop = false
}
let newTimestamp=uni.getStorageSync('newTimestamp')||''
let token = uni.getStorageSync('token')
if (token) {
uni.getLocation({
type: 'wgs84',
success: res => {
let latitude = res.latitude //纬度
let longitude = res.longitude //经度
this.showDistance = true
//判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
if(newTimestamp){
if(Date.now()>newTimestamp){
this.initList(latitude, longitude)
}else{
this.showTip=true
}
}else{
this.initList(latitude, longitude)
}
},
fail: res => {
let latitude = ''
let longitude = ''
//判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
if(newTimestamp){
if(Date.now()>newTimestamp){
this.initList(latitude, longitude)
}else{
this.showTip=true
}
}else{
this.initList(latitude, longitude)
}
}
})
}
},
methods: {
//---商品列表
initList(latitude, longitude) {
let data = {
channelId: this.channelId, //渠道Id
companyId: this.companyId, //公司Id
merchantId: this.merchantId, //商户id
groupId: this.groupId, //组合Id
openid: uni.getStorageSync('openid')||'',
latitude,
longitude
}
this.scenicList=[]
// 获取当前时间戳
let currentTime = Date.now()
// 设置需要添加的分钟数
let minutesToAdd =5 // 这里假设要添加5分钟
this.$request('/scenic/groupGood/findGroupGoodProductList', data).then(res => {
uni.removeStorageSync('newTimestamp')
if (res.code == '00') {
let merchantList=res.data.merchantList||[]
merchantList.forEach(item=>{
if(item.type==1&&item.productList.length>0){
//type=1为景区
this.scenicList.push(item)
}
})
this.scenicList.forEach((item, index) => {
//获取当前景区图片,把当前景区放在第一位
if (item.id == this.merchantId) {
this.imgList = item.imgList
this.scenicList.splice(index, 1)
this.scenicList.unshift(item)
item.productListCopy = item.productList
} else {
item.productListCopy = item.productList.slice(0, 2)
}
//预订时间为当天时，当前时间大于最早预订时间显示未开售，当前时间大于最晚预订时间显示已售罄
let times = new Date().Format('hh:mm:ss')
let timeNumber = parseInt(this.$commonjs.changeTime(times)) //将当前时间转化为数字
item.productList.forEach(item2 => {
item2.timeNumber1 = parseInt(this.$commonjs.changeTime(item2.earlyBookTime))
item2.timeNumber2 = parseInt(this.$commonjs.changeTime(item2.bookTime))
if (item2.aheadBookDays == 0) {
if (item2.status == 2) {
item2.statusName = '已售罄'
} else {
if (timeNumber < item2.timeNumber1) {
item2.status = 2
item2.statusName = '未开售'
}
if (timeNumber > item2.timeNumber2) {
item2.status = 2
item2.statusName = '已售罄'
}
}
}
})
})
this.$nextTick(() => {
this.countSwiper()
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
if(res.code=='100'){
//系统性能接近瓶颈，关闭请求
this.showTip=true
// 当前时间加上添加分钟数
let timestamp1 = currentTime + (minutesToAdd * 60 * 1000)
//后端返回的时间
let timestamp2=Date.parse(JSON.parse(res.message).stopTime)
let newTimestamp=''
if(currentTime>timestamp2){
//当前时间大于后端返回时间，以当前时间加上分钟数为准
newTimestamp = timestamp1
}
if(currentTime<=timestamp2){
//当前时间小于等于后端返回时间，取后端返回时间和当前时间加上的分钟数的最小值
newTimestamp = Math.min(timestamp1,timestamp2)
}
uni.setStorageSync('newTimestamp', newTimestamp)
}
}
}).catch(error => {
this.showTip=true
// 计算新的时间戳
let newTimestamp = currentTime + (minutesToAdd * 60 * 1000)
uni.setStorageSync('newTimestamp', newTimestamp)
})
},
//---初始化详情
initDetail(merchantId){
let data={
userId:uni.getStorageSync('userId')||'',
openid:uni.getStorageSync('openid')||'',
id:merchantId,//商户id
isDetail:1,//商户详情
}
this.detailData=''
this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
if(res.code=='00'){
this.detailData=res.data
//解决详情里面图片太宽超出屏幕宽度出现滚动条的问题
if(this.detailData.introduce){
this.detailData.introduce=this.detailData.introduce.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---展示明细弹窗
showDetail() {
this.$refs.detail.showPop = true
},
//---页面滚动事件
scroll(e) {
if(e.detail.scrollTop>200){
//固定导航栏
this.tabbarObj='top:0;position:fixed;border-radius:0'
}else{
this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
}
},
//---导航栏切换
tabbarChange(index) {
this.active = index
if(index==0){
this.countSwiper()
}
if(index==1){
this.countSwiper('waterfall')
}
},
//---swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.active = current
},
//---展示客服组件
showCustomer() {
this.$refs.customer.showPop = true
},
//---展示购买须知
showBuyKnow(data) {
this.buyKnowData = data
this.$refs.buyKnow.showPop = true
},
//---点击详情
clikDetail(merchantId){
this.$refs.merchantDetail.showPop=true
this.initDetail(merchantId)
},
//计算swiper高度
countSwiper(label){
let labels=label||'checkbox-box'
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select(`.${labels}`).boundingClientRect(data => {
if(data){
this.swiperHeight=data.height+20
}
}).exec()
})
},
//---展示更多产品
showMoreProduct(item) {
item.productListCopy = item.productList
this.$forceUpdate()
this.countSwiper()
},
//---收起产品
retractProduct(item) {
item.productListCopy = item.productList.slice(0, 2)
this.$forceUpdate()
this.countSwiper()
},
//---多选框变化
checkboxChange(e) {
let value = e.detail.value
let arr = []
value.forEach(item => {
arr.push(JSON.parse(item))
})
this.chooseProduct = arr
//判断是否选中产品，选中产品的背景颜色需要变化
this.scenicList.forEach(item => {
item.productList.forEach(item2 => {
item2.ifChangeBg = false
this.chooseProduct.forEach(item3 => {
if (item2.id == item3.id) {
item2.ifChangeBg = true
//解决是否支持多产品购买弹窗2次之后，选中状态错误bug,需要在选中时修改状态
//#ifdef MP-WEIXIN
//由于支付宝小程序会出现bug,所以只在微信小程序里面执行该代码
item2.ifChecked = true
//#endif
}
})
})
})
},
//---不支持多选产品，选择确定事件
chooseConfirm() {
this.chooseProduct.forEach((item, index) => {
//删除选中产品以外的其他所有产品
if (this.chooseMerchantProduct.merchantId == item.merchantId && JSON.stringify(item) != JSON.stringify(this.chooseMerchantProduct)) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
delete this.chooseProduct[index]
}
})
this.chooseProduct = this.chooseProduct.filter(function (val) {
return val
})
this.showModal = false
},
//---不支持多选产品，选择取消事件
chooseCancel() {
//删除选中产品
this.chooseProduct.forEach((item, index) => {
if (item.id === this.chooseMerchantProduct.id) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
this.chooseProduct.splice(index, 1)
}
})
this.showModal = false
},
//---跳转填写订单页面
goFillorder() {
for (let i = 0; i < this.chooseProduct.length; i++) {
let item = this.chooseProduct[i]
if (item.status == 2) {
uni.showToast({
title: '售罄产品不能进行购买',
icon: 'none'
})
return
}
}
if (this.chooseProduct.length == 0) {
uni.showToast({
title: '请选择至少一个产品',
icon: 'none'
})
return
} else if (this.chooseProduct.length == 1) {
let query = '?merchantId=' + this.chooseProduct[0].merchantId + '&productId=' + this.chooseProduct[0].id + '&orderSource=3'
if (this.chooseProduct[0].ticketType == 2) {
//联票
uni.navigateTo({
url: '/pages/scenic/scenicJointOrder/scenicJointOrder' + query
})
} else {
//普通票
uni.navigateTo({
url: '/pages/scenic/scenicSingleOrder/scenicSingleOrder'+ query
})
}
} else {
let productIdList = this.chooseProduct.map(item => {
return item.id
})
let query ='?productIdList=' + JSON.stringify(productIdList) + '&groupId=' + this.groupId + '&groupChannelId=' + this.groupChannelId + '&orderSource=3'
// uni.navigateTo({
// url: '/pages/combination/combiOrder/combiOrder' + query
// })
// //如果有联票
if(this.chooseProduct.find(item=>item.ticketType==2)){
uni.navigateTo({
url: '/pages/combination/combiOrder/combiOrder' + query
})
}else{
uni.navigateTo({
url: '/pages/scenic/scenicCombiOrder/scenicCombiOrder' + query
})
}
}
},
//---跳转影集页面
goAlbum(index){
if(index==0){
let data={
openid: uni.getStorageSync('openid')||''
}
this.$request('wechatUser/pdFace/checkScanFace',data).then(res => {
if (res.code === '00') {
let merchantId = this.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
if (res.data.isScanFace == 0) { //未扫脸
uni.navigateTo({
url:`/pages/album/getPortrait?merchantId=${merchantId}`
})
} else if (res.data.isScanFace == 1) { //已扫脸
let faceIds = JSON.stringify(res.data.faceIds)
let companyId = this.companyId
uni.navigateTo({
url: `/pages/album/myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId${merchantId}`
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
},
}
}
</script>
<style>
<style lang="scss" scoped>
.wrap {
height: 100%;
display: flex;
flex-direction: column;
background: #f7f7f7;
}
.middle {
padding: 0 24rpx 100rpx 24rpx;
display: flex;
flex-direction: column;
// flex: 1;
}
.swiper-box {
// flex: 1;
position: relative;
top: -40rpx;
}
.tabbar {
transition:1s;
width: 100%;
left: 0;
z-index: 1;
position: relative;
top: -40rpx;
background: #fff;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
border-radius: 16rpx;
display: flex;
justify-content: space-between;
font-size: 32rpx;
text {
padding: 24rpx 32rpx 24rpx 20rpx;
border-radius: 16rpx;
width: 33.3%;
text-align: center;
}
}
.tabbar .on {
// background: url('../../../static/img/scenic/tabbar.png') no-repeat;
background: $theme;
background-size: 100% 100%;
color: #fff;
font-weight: bold;
}
.merchant {
border-radius: 16rpx;
background: #ffffff;
margin-top: 24rpx;
padding: 24rpx;
}
.merchant label{
width: 100%;
}
.merchant label.off .product {
background: #f3f3f3;
color: #999999;
}
.merchant label.off .product-name {
color: #999999;
}
.merchant label.off .product-rule {
color: #999999;
}
.merchant-title {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
}
.title-left {
font-size: 32rpx;
margin-right: 10rpx;
font-weight: bold;
image {
width: 36rpx;
height: 36rpx;
position: relative;
top: 6rpx;
margin: 0 8rpx;
}
}
.title-coupon {
color: $red;
font-size: 24rpx;
}
.title-right {
color: $grey;
font-size: 24rpx;
display: flex;
}
.product {
padding:16rpx 16rpx 10rpx 16rpx;
background: #ffffff;
border-radius: 8rpx;
display: flex;
align-items: center;
margin-top: 10rpx;
}
.product.on {
background: #e2eeff;
}
.product-left {
margin-right: 10rpx;
}
.product-right {
flex: 1;
}
.product-name {
font-size: 28rpx;
font-weight: bold;
color: #191919;
display: flex;
justify-content: space-between;
}
.product-status {
padding: 6rpx 12rpx;
border: 2px solid #f40000;
color: #f40000;
font-size: 24rpx;
border-radius: 4rpx;
transform: rotate(-25deg);
position: relative;
top: 30rpx;
right: 80rpx;
}
.product-price {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-rule {
color: $theme;
}
.product-rule::after {
display: inline-block;
content: '';
height: 22rpx;
margin: 0 10rpx;
background: #ccc;
width: 1px;
}
.product-orange {
font-size: 20rpx;
color: $grey;
text-decoration: line-through;
}
.product-sell {
font-size: 40rpx;
color: $red;
font-weight: bold;
margin-left: 10rpx;
}
.product-more {
padding-top:24rpx;
font-size: 20rpx;
}
.product-more>view{
display: flex;
justify-content: center;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
background: #fff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
}
.bottom-left{
display: flex;
flex-direction: column;
align-items: center;
}
.bottom-middle {
position: relative;
padding: 0 40rpx;
}
.bottom-more {
position: relative;
top: -40rpx;
background: #f40000;
border-radius: 28px;
opacity: 0.64;
padding: 10rpx 20rpx;
color: #ffffff;
}
.bottom-three {
width: 14rpx;
height: 14rpx;
display: inline-block;
background: #f40000;
opacity: 0.64;
position: absolute;
right: 42rpx;
bottom: -7rpx;
transform: rotate(45deg);
}
.bottom-detail {
position: relative;
text-align: center;
display: flex;
justify-content: center;
}
.bottom-number {
display: inline-block;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
text-align: center;
background: #f40000;
color: #ffffff;
font-weight: bold;
margin-left: 10rpx;
}
.btn {
font-size: 32rpx;
width: 200rpx;
}
//摄影、旅拍
.album-left{
margin:8rpx 6rpx 0 0;
}
.album-right{
margin: 8rpx 0 0 6rpx;
}
.album-list-top image {
width: 100%;
}
.album-list-bottom{
border-radius: 0 0 16rpx 16rpx;
position: relative;
top: -4px;
padding: 20rpx 16rpx;
color: #fff;
view:first-child{
font-weight: bold;
}
view:nth-child(2){
font-size: 24rpx;
margin-top: 16rpx;
}
view:nth-child(3){
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
}
.album-btn{
display: flex;
width: 160rpx;
height: 44rpx;
background: #E1E1D9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 22rpx;
color: #333333;
align-items: center;
justify-content: center;
padding-left: 8rpx;
}
.suodaoImg{
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
}
.swiper-item /deep/ .u-waterfall{
padding-top:8rpx;
}
.swiper-item /deep/ .u-empty{
height: 300px;
}
</style>
pages/combination/combiChoose/components/detail.vue 0 → 100644
View file @ 3fee105f
<template>
<!-- 详情 -->
<u-popup :show="showPop" :round="20" @close="showPop = false">
<view class="son-wrap">
<view class="title">
<view style="flex: 1; text-align: center">
明细
</view>
<u-icon name="close" @click="showPop = false"></u-icon>
</view>
<view style="flex: 1;overflow-y: scroll;">
<view class="middle">
<view class="merchantlist" v-for="(item,index) in merchantList" :key="index">
<view class="merchant-title">
{{item.merchantName}}
</view>
<view class="productlist" v-for="(items,a) in item.productlist" :key='a'>
<text>
{{items.name}}
</text>
<text style="font-weight: bold;">
¥{{items.sellingPrice}}
</text>
</view>
</view>
</view>
<view class="bottom">
<view class="bottom-left">
合计：¥
<text style="font-weight: bold;font-size: 40rpx;">{{priceTotal}}</text>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">
去预订
</text>
</view>
</view>
</view>
</view>
</u-popup>
</template>
<script>
export default {
props: ['chooseProduct'],
data() {
return {
showPop: false, //控制弹窗显示隐藏
priceTotal:0,//总价
merchantList:[],//商家列表
}
},
watch: {
//选中产品的数量变化
chooseProduct: {
handler(newValue, oldValue){
this.priceTotal=0
this.chooseProduct.forEach((item)=>{
this.priceTotal+=item.sellingPrice
})
this.priceTotal=parseFloat(this.priceTotal.toFixed(2))
this.merchantList=[]
this.chooseProduct.forEach(item=>{
if(!this.merchantList.find(item2=>item2.merchantId==item.merchantId)){
this.merchantList.push({
merchantName:item.merchantName,
merchantId:item.merchantId,
productlist:[]
})
}
})
//一级数组转化成二级数组
this.merchantList.forEach(item=>{
this.chooseProduct.forEach(item2=>{
if(item.merchantId==item2.merchantId){
item.productlist.push(item2)
}
})
})
},
deep:true,
immediate: false
},
},
methods: {
//---跳转填写订单页面
goFillorder(){
this.$parent.goFillorder()
}
}
}
</script>
<style scoped="scoped" lang="scss">
.son-wrap{
position: relative;
height:80vh;
display: flex;
flex-direction:column;
}
.title{
display: flex;
font-size: 32rpx;
font-weight: bold;
padding: 30rpx;
background: #fff;
border-radius: 20rpx 20rpx 0 0;
}
.middle {
padding:0 24rpx 100rpx 24rpx;
}
.merchantlist{
border-bottom:2rpx solid #ececec;
padding-bottom: 40rpx;
margin-top: 24rpx;
}
.merchant-title{
font-size: 36rpx;
font-weight: bold;
color: #191919;
}
.productlist{
display: flex;
justify-content: space-between;
font-size: 32rpx;
margin-top: 20rpx;
}
.bottom {
display: flex;
justify-content: space-between;
padding: 0 24rpx;
height: 100rpx;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
z-index: 9;
background: #FFFFFF;
box-sizing: border-box;
}
.bottom-left{
color:$red;
font-size: 32rpx;
}
.btn{
font-size: 32rpx;
width: 200rpx;
}
</style>
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ 3fee105f
<template>
<view class="wrap">
<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<scroll-view @scroll="scroll" style="height: 100%;" scroll-y>
<view class="banner">
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
......@@ -350,7 +351,6 @@ export default {
}
let newTimestamp=uni.getStorageSync('newTimestamp')||''
let token = uni.getStorageSync('token')
let queryFun=()=>{
if (token) {
uni.getLocation({
type: 'wgs84',
......@@ -385,18 +385,6 @@ export default {
}
})
}
}
//#ifdef MP-WEIXIN
queryFun()
//#endif
//#ifdef MP-ALIPAY
setTimeout(()=>{
queryFun()
},500)
//#endif
},
methods: {
//---商品列表
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment