liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat:优惠券对接

Browse Source
This commit is contained in:
lifizer
2023-12-25 17:16:56 +08:00
parent 847a80f251
commit 18a2fbb8a6
46 changed files with 1360 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Coupons.vue
+129
View File
@@ -0,0 +1,129 @@
<template>
<view class="components-coupons">
<image class="coupons__cover" :src="data.image" mode="scaleToFill"/>
<view class="coupons__section flex jc-between ai-center">
<view>有效期至：
<text>{{ data.endTime }}</text>
</view>
<view class="coupons__tag coupons__tag-expire" v-if="data.status===2">已到期</view>
<view class="coupons__tag" @click="goGoods()" v-if="data.status===0 && !radioModel">去使用</view>
<view @click="selectCoupon">
<radio :value="data.id" :checked="data.checked" color="#FF564A" v-if="radioModel && data.status===0"/>
</view>
</view>
<view class="coupons__rules">
<view class="coupons__rules-title" @click="changeRules()">使用规则
<image :class="{'open':isOpen}" :src="webUrl+'/20231125220409665027.png'" mode="scaleToFill"/>
</view>
<view v-html="data.description" v-show="isOpen"></view>
</view>
</view>
</template>
<script>
export default {
name: "Coupons",
props: {
data: Object,
radioModel: {
type: Boolean,
default: false
},
checked: {
type: Boolean,
default: false
}
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
isOpen: false
}
},
methods: {
changeRules() {
this.isOpen = !this.isOpen
},
goGoods() {
uni.switchTab({url:'/pages/home/landMark'})
// this.$global.navToGoods(this.data.productId)
},
selectCoupon() {
if (!this.radioModel) return
this.$emit('change', this.data.id)
}
}
}
</script>
<style scoped lang="less">
.components-coupons {
width: 686rpx;
box-sizing: border-box;
border: 2rpx solid #FF564A;
border-radius: 16rpx;
overflow: hidden;
image {
vertical-align: middle;
}
.coupons__cover {
width: 100%;
height: 300rpx;
}
.coupons__section {
width: 100%;
box-sizing: border-box;
padding: 18rpx 20rpx 16rpx 16rpx;
font-size: 32rpx;
line-height: 1;
text {
color: #EA1C1C;
font-weight: bold;
}
.coupons__tag {
display: flex;
justify-content: center;
align-items: center;
width: 120rpx;
height: 52rpx;
box-sizing: border-box;
border-radius: 8rpx;
border: 2px solid #0DC5C5;
color: #0DC5C5;
font-size: 32rpx;
line-height: 1;
}
.coupons__tag-expire {
border: 2rpx solid #BFBFBF;
color: #999999;
}
}
.coupons__rules {
padding: 0 20rpx 20rpx 16rpx;
.coupons__rules-title {
color: #999999;
font-size: 28rpx;
image {
width: 26rpx;
height: 26rpx;
margin-left: 6rpx;
}
.open {
transform: rotate(180deg);
}
}
}
}
</style>
components/CouponsPopup.vue
+128
View File
@@ -0,0 +1,128 @@
<template>
<view class="popup-coupons">
<view class="popup-box">
<view class="popup-title bold tc">选择优惠券</view>
<SubSection :current="current" :can-use="canUse" :not-use="notUse" radioModel @change="changeNav"/>
<view class="list-box">
<view style="margin-bottom: 20rpx" v-for="(item,index) in list" :key="index">
<Coupons :data="item" radioModel @change="selectCoupon"/>
</view>
<view class="tc" v-if="list.length===0">
<image class="zero-coupons" :src="webUrl+'/20231201201733142658.png'" mode="scaleToFill"/>
</view>
</view>
</view>
<button disabled></button>
<view class="btn-done bold flex jc-center ai-center" :class="{'btn-disabled':current===1}" @click="setCoupon" v-if="current===0">确定
</view>
</view>
</template>
<script>
import SubSection from "@/components/SubSection.vue"
import Coupons from '@/components/Coupons.vue'
export default {
name: 'CouponsPopup',
components: {SubSection, Coupons},
props: {
twoList: {
type: Object,
default: {}
}
},
computed: {
list() {
let temp = this.current === 0 ? this.twoList['usable'] : this.twoList['unusable']
return this.$global.deepClone(temp)
},
canUse() {
return this.twoList['usable'].length
},
notUse() {
return this.twoList['unusable'].length
}
},
watch: {
current() {
this.selectCoupon(this.couponId)
}
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
current: 0,
couponId: 0
}
},
mounted() {
this.couponId = uni.getStorageSync('couponId') || 0
this.selectCoupon(this.couponId)
},
methods: {
changeNav(index) {
this.current = index
},
selectCoupon(id) {
const isCancel = this.couponId === id
this.couponId = isCancel ? 0 : id
this.list?.forEach(item => {
if (!isCancel) {
item.checked = id === item.id
} else {
item.checked = false
}
})
},
setCoupon() {
if (this.current === 1) return
// if (this.couponId !== 0) {
uni.setStorageSync('couponId', this.couponId)
// }
this.$emit('close')
}
}
}
</script>
<style scoped lang="less">
.popup-coupons {
.popup-box {
padding: 34rpx 32rpx;
}
.popup-title {
margin-bottom: 20rpx;
color: #333333;
font-size: 36rpx;
line-height: 52rpx;
}
.list-box {
max-height: 640rpx;
margin-top: 32rpx;
overflow-y: auto;
}
.btn-done {
width: 100%;
height: 80rpx;
background: #FF564A;
color: #FFFFFF;
font-size: 36rpx;
}
.btn-disabled {
background: #BFBFBF;
}
.zero-coupons {
width: 400rpx;
height: 366rpx;
vertical-align: middle;
}
}
</style>
components/ProductWindow.vue
-4
View File
@@ -65,9 +65,6 @@ export default {
data: function() {
return {};
},
mounted: function() {
console.log(this);
},
methods: {
previewImg:function(imgUrl){
uni.previewImage({
@@ -107,7 +104,6 @@ export default {
getCheckedValue: function() {
let productAttr = this.attr.productAttr;
let value = [];
// console.log(productAttr)
for (let i = 0; i < productAttr.length; i++) {
for (let j = 0; j < productAttr[i].attrValueArr.length; j++) {
if (productAttr[i].index === j) {
components/SubSection.vue
+73
View File
@@ -0,0 +1,73 @@
<script>
export default {
name: "SubSection",
props: {
current: { // 当前选中
type: Number,
default: 0
},
canUse: { // 可用
type: [String, Number],
default: 0
},
notUse: { // 不可用
type: [String, Number],
default: 0
},
radioModel: {
type: Boolean,
default: false
},
},
data() {
return {
index: 0
}
},
mounted() {
this.index = this.current
},
methods: {
change(index) {
this.index = index
this.$emit('change', index)
}
}
}
</script>
<template>
<view class="sub-section flex">
<view class="sub-section__item flex jc-center ai-center" :class="{'sub-section__active':index===0}"
@click="change(0)">
可使用 ({{ canUse }})
</view>
<view class="sub-section__item flex jc-center ai-center" :class="{'sub-section__active':index===1}"
@click="change(1)">
{{radioModel?'不可用':'已到期'}} ({{ notUse }})
</view>
</view>
</template>
<style scoped lang="less">
.sub-section {
width: 686rpx;
height: 80rpx;
box-sizing: border-box;
border: 2rpx solid #FF564A;
border-radius: 4rpx;
font-size: 32rpx;
.sub-section__item {
width: 50%;
background: #FFFFFF;
color: #333333;
font-weight: bold;
}
.sub-section__active {
background: #FF564A;
color: #FFFFFF;
}
}
</style>
components/chose-city/chose-city.vue
+201 -21
View File
@@ -19,29 +19,68 @@
@up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
<view class="fixed-box">
<view class="line-location flex ai-center" v-if="location">
<view class="line-location flex ai-center">
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
<text class="bold">当前定位：{{ location }}</text>
<!-- @click="select(location)"-->
<text class="bold" v-if="location">当前定位：{{ location }}</text>
<view style="color:#f66" @click="reload()" v-else>定位失败
<image :src="webUrl+'/20231215213824297278.png'" mode="scaleToFill"/>
</view>
</view>
<image class="banner" :src="banner.icon" mode="scaleToFill" v-if="banner"
@click="$global.commonJump(banner.url)"/>
<view class="top-box" v-if="listTop.length">
<view class="tips">特别推荐</view>
<view class="top-list custom-list flex ai-center">
<view class="item" v-for="(item,index) in listTop" :key="index" @click="select(item)">
<view class="has-goods" v-if="type===0 && item.hasData===0">暂无特产</view>
<view class="has-goods" v-if="type>0 && type<6&& item.hasShop===0">暂无店铺</view>
<image :src="item.icon" mode="scaleToFill"></image>
<view class="one-t">{{ item.cityName }}</view>
</view>
</view>
</view>
<!-- <view class="top-box" v-if="listTop.length">-->
<!-- <view class="tips">特别推荐</view>-->
<!-- <view class="top-list custom-list flex ai-center">-->
<!-- <view class="item" v-for="(item,index) in listTop" :key="index" @click="select(item)">-->
<!-- <view class="has-goods" v-if="type===0 && item.hasData===0">暂无特产</view>-->
<!-- <view class="has-goods" v-if="type>0 && type<6&& item.hasShop===0">暂无店铺</view>-->
<!-- <image :src="item.icon" mode="scaleToFill"></image>-->
<!-- <view class="one-t">{{ item.cityName }}</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
</view>
<view class="province-name">{{ provinceName }}</view>
<!--9-2 推荐信息-->
<view class="recommendInfo" v-if="recommendInfo && type<2">
<template v-if="(type===0 && recommendInfo.hotelList) || (type===1 && recommendInfo.productList)">
<view class="red-border-title">{{ recommendInfo.title }}</view>
<image class="bg-custom" :src="recommendInfo.backgroundImage" mode="scaleToFill"/>
<scroll-view class="scroll-box flex" enable-flex scroll-x>
<!-- :style="{'backgroundImage':`url(${recommendInfo.backgroundImage})`}"-->
<view class="item flex-0 flex flex-col jc-between ai-center"
v-for="(item,index) in recommendInfo.hotelList"
:key="index" v-if="type===0" @click="goStore(item.hotelId)">
<image class="cover" :src="item.hotelImage" mode="scaleToFill"/>
<image class="logo" :src="item.hotelLogo" mode="scaleToFill"/>
<view style="width: 100%">
<view class="name tc one-t">{{ item.hotelName }}</view>
<rich-text class="text tc one-t" :nodes="item.hotelText"/>
</view>
</view>
<view class="item flex-0 flex flex-col jc-between ai-center"
v-for="(item,index) in recommendInfo.productList" :key="index" v-if="type===1"
@click="$global.navToGoods(item.productId)">
<image class="cover" :src="item.productImage" mode="scaleToFill"/>
<image class="logo" :src="item.merLogo" mode="scaleToFill"/>
<view style="width: 100%">
<view class="name tc one-t">{{ item.productName }}</view>
<rich-text class="text tc one-t" :nodes="item.productText"/>
</view>
</view>
</scroll-view>
</template>
</view>
<!-- province-name-->
<view class="red-border-title" style="margin-left: 38rpx;">{{ provinceName }}</view>
<view class="group-list custom-list flex flex-wrap">
<view class="item" v-for="(item, index) in listCity" :key="index" @click="select(item)">
<view class="has-goods" v-if="type===0 && item.hasData===0">暂无特产</view>
@@ -102,7 +141,8 @@ export default {
keyword: "",
type: null,
location: "",
banner: {}
banner: {},
recommendInfo: null, // 推荐信息
};
},
onLoad(options) {
@@ -114,11 +154,50 @@ export default {
this.init();
},
methods: {
reload() {
uni.getSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
} else {
uni.showModal({
title: '提示',
content: '当前定位未开启，请点击确定手动开启定位',
duration: 5000,
success(result) {
if (result.confirm) {
uni.openSetting({
success(openRes) {
if (openRes.authSetting['scope.userLocation']) {
} else {
uni.showToast({
title: '你拒绝了授权，无法继续',
icon: 'none'
})
}
}
})
} else if (result.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获取定位信息',
icon: 'none'
})
}
}
})
}
}
})
},
async getMapData() {
const map = await getLocation();
const {latitude, longitude} = map[1];
const address = await getCurAddress(latitude, longitude);
this.location = address[1].data.result.ad_info.city;
if (map) {
const {latitude, longitude} = map[1];
const address = await getCurAddress(latitude, longitude);
this.location = address[1].data.result.ad_info.city;
}
},
init() {
@@ -130,6 +209,7 @@ export default {
this.listTop = this.listGroup[0].top;
this.listCity = this.listGroup[0].city;
this.provinceName = this.listGroup[0].label;
this.recommendInfo = this.listGroup[0].recommendInfo
this.banner = {
icon: this.listGroup[0].icon,
url: this.listGroup[0].uniappUrl
@@ -143,6 +223,7 @@ export default {
this.listTop = this.listGroup[index].top;
this.listCity = this.listGroup[index].city;
this.provinceName = this.listGroup[index].label;
this.recommendInfo = this.listGroup[index].recommendInfo
this.banner = {
icon: this.listGroup[index].icon,
url: this.listGroup[index].uniappUrl
@@ -195,7 +276,13 @@ export default {
uni.navigateBack()
break;
}
}
},
goStore(id) {
uni.navigateTo({
url: "/pagesInn/inn/innHome?id=" + id
})
},
}
};
</script>
@@ -307,8 +394,22 @@ export default {
margin-left: 161rpx;
margin-top: 110rpx;
.red-border-title {
display: inline-flex;
align-items: center;
box-sizing: border-box;
margin: 18rpx 0;
padding: 8rpx 0 0 8rpx;
border-left: 6rpx solid #FD574B;
color: #262626;
font-size: 30rpx;
line-height: 30rpx;
font-weight: bold;
vertical-align: bottom;
}
.fixed-box {
padding: 32rpx 0 44rpx 38rpx;
padding: 32rpx 0 0 38rpx;
.line-location {
font-size: 28rpx;
@@ -338,6 +439,77 @@ export default {
}
}
.recommendInfo {
position: relative;
margin-left: 38rpx;
.scroll-box {
position: relative;
width: 520rpx;
height: 314rpx;
box-sizing: border-box;
padding: 70rpx 20rpx 0 20rpx;
border-radius: 20rpx;
background-repeat: no-repeat;
background-size: 520rpx 314rpx;
}
.item {
position: relative;
width: 136rpx;
height: 220rpx;
margin-right: 28rpx;
border-radius: 8rpx;
background: linear-gradient(180deg, #08255D 0%, #6FA2FF 100%);
color: #FFFFFF;
line-height: 1;
//overflow: hidden;
image {
vertical-align: middle;
}
.cover {
width: 136rpx;
height: 136rpx;
border-radius: 8rpx;
}
.logo {
position: absolute;
left: 68rpx;
top: 136rpx;
transform: translate(-50%, -50%);
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.name {
padding-bottom: 10rpx;
font-size: 24rpx;
}
.text {
padding-bottom: 10rpx;
font-size: 16rpx;
}
}
.item::after {
content: '';
position: absolute;
right: -14rpx;
top: 26rpx;
width: 2rpx;
height: 172rpx;
background: #D2E0E8;
}
.item:last-child::after{
display: none;
}
}
.province-name {
margin: 0 38rpx 24rpx;
font-size: 28rpx;
@@ -366,5 +538,13 @@ export default {
}
}
}
.bg-custom {
position: absolute;
left: 0;
top: 74rpx;
width: 520rpx;
height: 314rpx;
}
}
</style>