Merge remote-tracking branch 'origin/master-vue3' into master-vue3
This commit is contained in:
owen
@@ -1,104 +1,108 @@
|
||||
<template>
|
||||
<su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose backgroundColor="#f2f2f2">
|
||||
<view class="model-box">
|
||||
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠券</view>
|
||||
<scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
|
||||
<view class="subtitle ss-m-l-20">可使用优惠券</view>
|
||||
<view v-for="item in state.couponInfo" :key="item.id">
|
||||
<s-coupon-list :data="item">
|
||||
<template #default>
|
||||
<button class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" :class="
|
||||
<su-popup
|
||||
:show="show"
|
||||
type="bottom"
|
||||
round="20"
|
||||
@close="emits('close')"
|
||||
showClose
|
||||
backgroundColor="#f2f2f2"
|
||||
>
|
||||
<view class="model-box">
|
||||
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠券</view>
|
||||
<scroll-view
|
||||
class="model-content"
|
||||
scroll-y
|
||||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
>
|
||||
<view class="subtitle ss-m-l-20">可使用优惠券</view>
|
||||
<view v-for="item in state.couponInfo" :key="item.id">
|
||||
<s-coupon-list :data="item">
|
||||
<template #default>
|
||||
<button
|
||||
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
|
||||
:class="
|
||||
item.get_status != 'can_get' && item.get_status != 'can_use' ? 'boder-btn' : ''
|
||||
" @click.stop="getBuy(item.id)">
|
||||
<!-- 此处对接领取优惠券先将限制解除 -->
|
||||
<!-- :disabled="item.get_status != 'can_get' && item.get_status != 'can_use'" -->
|
||||
{{ item.get_status_text }}
|
||||
</button>
|
||||
</template>
|
||||
</s-coupon-list>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</su-popup>
|
||||
"
|
||||
@click.stop="getBuy(item.id)"
|
||||
:disabled="item.get_status != 'can_get' && item.get_status != 'can_use'"
|
||||
>
|
||||
{{ item.get_status_text }}
|
||||
</button>
|
||||
</template>
|
||||
</s-coupon-list>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default () {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['get', 'close']);
|
||||
const state = reactive({
|
||||
couponInfo: computed(() => props.modelValue),
|
||||
currentValue: -1,
|
||||
couponId: '',
|
||||
});
|
||||
const getBuy = (id) => {
|
||||
console.log('应该是详情页领取优惠券')
|
||||
emits('get', id);
|
||||
};
|
||||
//立即领取
|
||||
import { computed, reactive } from 'vue';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['get', 'close']);
|
||||
const state = reactive({
|
||||
couponInfo: computed(() => props.modelValue),
|
||||
currentValue: -1,
|
||||
couponId: '',
|
||||
});
|
||||
const getBuy = (id) => {
|
||||
emits('get', id);
|
||||
};
|
||||
//立即领取
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.model-box {
|
||||
height: 60vh;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
height: 80rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.model-content {
|
||||
height: 54vh;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 710rpx;
|
||||
margin-left: 20rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 优惠券按钮
|
||||
.card-btn {
|
||||
// width: 144rpx;
|
||||
padding: 0 16rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.boder-btn {
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
.model-box {
|
||||
height: 60vh;
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
height: 80rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.model-content {
|
||||
height: 54vh;
|
||||
}
|
||||
.modal-footer {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.confirm-btn {
|
||||
width: 710rpx;
|
||||
margin-left: 20rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
// 优惠券按钮
|
||||
.card-btn {
|
||||
// width: 144rpx;
|
||||
padding: 0 16rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
.boder-btn {
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
<template>
|
||||
<view class="ss-m-20" :style="{ opacity: disabled ? '0.5' : '1' }">
|
||||
<view class="content">
|
||||
<view class="tag ss-flex ss-row-center" :class="
|
||||
<!-- <view
|
||||
class="tag ss-flex ss-row-center"
|
||||
:class="
|
||||
data.status == 'expired' || data.status == 'used' ? 'disabled-bg-color' : 'info-bg-color'
|
||||
">{{ data.type_text }}</view>
|
||||
"
|
||||
>{{ data.type_text }}</view
|
||||
> -->
|
||||
<view class="title ss-m-x-30 ss-p-t-18">
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view class="value-text ss-flex-1 ss-m-r-10" :class="
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
<!-- 订单确认的优惠劵选择弹窗 -->
|
||||
<template>
|
||||
<su-popup
|
||||
:show="show"
|
||||
@@ -17,21 +16,20 @@
|
||||
:enable-back-to-top="true"
|
||||
>
|
||||
<view class="subtitle ss-m-l-20">可使用优惠券</view>
|
||||
<view v-for="(item, index) in state.couponInfo" :key="index">
|
||||
<view v-for="(item, index) in state.couponInfo.can_use" :key="index">
|
||||
<s-coupon-list :data="item" type="user" :disabled="false">
|
||||
<template #default>
|
||||
<label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
|
||||
<radio
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
:checked="state.couponId === item.id"
|
||||
:checked="state.couponId == item.id"
|
||||
@tap.stop="radioChange(item.id)"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
</s-coupon-list>
|
||||
</view>
|
||||
<!-- TODO 芋艿：未来接口需要支持下
|
||||
<view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view>
|
||||
<view v-for="item in state.couponInfo.cannot_use" :key="item.id">
|
||||
<s-coupon-list :data="item" type="user" :disabled="true">
|
||||
@@ -43,7 +41,6 @@
|
||||
</template>
|
||||
</s-coupon-list>
|
||||
</view>
|
||||
-->
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="modal-footer ss-flex">
|
||||
@@ -53,9 +50,8 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { // 优惠劵列表
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
@@ -64,27 +60,21 @@
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['confirm', 'close']);
|
||||
|
||||
const state = reactive({
|
||||
couponInfo: computed(() => props.modelValue), // 优惠劵列表
|
||||
couponId: 0, // 选中的优惠劵编号
|
||||
couponInfo: computed(() => props.modelValue),
|
||||
couponId: 0,
|
||||
});
|
||||
|
||||
// 选中优惠劵
|
||||
function radioChange(couponId) {
|
||||
if (state.couponId === couponId) {
|
||||
if (state.couponId == couponId) {
|
||||
state.couponId = 0;
|
||||
} else {
|
||||
state.couponId = couponId;
|
||||
}
|
||||
}
|
||||
|
||||
// 确认优惠劵
|
||||
const onConfirm = () => {
|
||||
emits('confirm', state.couponId);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed } from 'vue';
|
||||
import { fen2yuan } from '../../hooks/useGoods';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
/**
|
||||
* 订单卡片
|
||||
*
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
<template>
|
||||
<!-- 分享弹框 -->
|
||||
<view>
|
||||
<su-popup :show="state.showShareGuide" :showClose="false" @close="onCloseGuide"></su-popup>
|
||||
<view v-if="state.showShareGuide" class="guide-wrap">
|
||||
<image
|
||||
class="guide-image"
|
||||
:src="sheep.$url.static('/static/img/shop/share/share_guide.png')"
|
||||
></image>
|
||||
</view>
|
||||
<!-- 分享弹框 -->
|
||||
<view>
|
||||
<su-popup :show="state.showShareGuide" :showClose="false" @close="onCloseGuide"></su-popup>
|
||||
<view v-if="state.showShareGuide" class="guide-wrap">
|
||||
<image class="guide-image" :src="sheep.$url.static('/static/img/shop/share/share_guide.png')"></image>
|
||||
</view>
|
||||
|
||||
<su-popup :show="show" round="10" :showClose="false" @close="closeShareModal">
|
||||
<!-- 分享tools -->
|
||||
<view class="share-box">
|
||||
<view class="share-list-box ss-flex">
|
||||
<button
|
||||
<su-popup :show="show" round="10" :showClose="false" @close="closeShareModal">
|
||||
<!-- 分享tools -->
|
||||
<view class="share-box">
|
||||
<view class="share-list-box ss-flex">
|
||||
<!-- <button
|
||||
v-if="shareConfig.methods.includes('forward')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
open-type="share"
|
||||
@@ -25,20 +22,14 @@
|
||||
mode=""
|
||||
></image>
|
||||
<text class="share-title">微信好友</text>
|
||||
</button>
|
||||
<button
|
||||
v-if="shareConfig.methods.includes('poster')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
@tap="onShareByPoster"
|
||||
>
|
||||
<image
|
||||
class="share-img"
|
||||
:src="sheep.$url.static('/static/img/shop/share/share_poster.png')"
|
||||
mode=""
|
||||
></image>
|
||||
<text class="share-title">生成海报</text>
|
||||
</button>
|
||||
|
||||
</button> -->
|
||||
<button v-if="shareConfig.methods.includes('poster')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center" @tap="onShareByPoster">
|
||||
<image class="share-img" :src="sheep.$url.static('/static/img/shop/share/share_poster.png')"
|
||||
mode=""></image>
|
||||
<text class="share-title">生成海报</text>
|
||||
</button>
|
||||
<!--
|
||||
<button
|
||||
v-if="shareConfig.methods.includes('link')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
@@ -50,152 +41,157 @@
|
||||
mode=""
|
||||
></image>
|
||||
<text class="share-title">复制链接</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="share-foot ss-flex ss-row-center ss-col-center" @tap="closeShareModal">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<!-- 分享海报 -->
|
||||
<canvas-poster
|
||||
ref="SharePosterRef"
|
||||
:show="state.showPosterModal"
|
||||
:shareInfo="shareInfo"
|
||||
@close="state.showPosterModal = false"
|
||||
/>
|
||||
</view>
|
||||
</button> -->
|
||||
</view>
|
||||
<view class="share-foot ss-flex ss-row-center ss-col-center" @tap="closeShareModal">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<!-- 分享海报 -->
|
||||
<canvas-poster ref="SharePosterRef" :show="state.showPosterModal" :shareInfo="shareInfo"
|
||||
@close="state.showPosterModal = false" />
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
/**
|
||||
* 分享弹窗
|
||||
*/
|
||||
import { ref, unref, reactive, computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import canvasPoster from './canvas-poster/index.vue';
|
||||
import { showShareModal, closeShareModal, showAuthModal } from '@/sheep/hooks/useModal';
|
||||
/**
|
||||
* 分享弹窗
|
||||
*/
|
||||
import {
|
||||
ref,
|
||||
unref,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import canvasPoster from './canvas-poster/index.vue';
|
||||
import {
|
||||
showShareModal,
|
||||
closeShareModal,
|
||||
showAuthModal
|
||||
} from '@/sheep/hooks/useModal';
|
||||
|
||||
const show = computed(() => sheep.$store('modal').share);
|
||||
const shareConfig = computed(() => sheep.$store('app').platform.share);
|
||||
const SharePosterRef = ref('');
|
||||
const show = computed(() => sheep.$store('modal').share);
|
||||
const shareConfig = computed(() => sheep.$store('app').platform.share);
|
||||
const SharePosterRef = ref('');
|
||||
|
||||
const props = defineProps({
|
||||
shareInfo: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
const props = defineProps({
|
||||
shareInfo: {
|
||||
type: Object,
|
||||
default () {},
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
showShareGuide: false, //H5的指引。
|
||||
showPosterModal: false, //海报弹窗
|
||||
});
|
||||
const state = reactive({
|
||||
showShareGuide: false, //H5的指引。
|
||||
showPosterModal: false, //海报弹窗
|
||||
});
|
||||
|
||||
// 生成海报分享
|
||||
const onShareByPoster = () => {
|
||||
closeShareModal();
|
||||
if (!sheep.$store('user').isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
unref(SharePosterRef).getPoster();
|
||||
state.showPosterModal = true;
|
||||
};
|
||||
// 生成海报分享
|
||||
const onShareByPoster = () => {
|
||||
closeShareModal();
|
||||
if (!sheep.$store('user').isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
unref(SharePosterRef).getPoster();
|
||||
state.showPosterModal = true;
|
||||
};
|
||||
|
||||
// 直接转发分享
|
||||
const onShareByForward = () => {
|
||||
closeShareModal();
|
||||
// 直接转发分享
|
||||
const onShareByForward = () => {
|
||||
closeShareModal();
|
||||
|
||||
// #ifdef H5
|
||||
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
|
||||
state.showShareGuide = true;
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
|
||||
state.showShareGuide = true;
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
href: props.shareInfo.link,
|
||||
title: props.shareInfo.title,
|
||||
summary: props.shareInfo.desc,
|
||||
imageUrl: props.shareInfo.image,
|
||||
success: (res) => {
|
||||
console.log('success:' + JSON.stringify(res));
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
};
|
||||
// #ifdef APP-PLUS
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
href: props.shareInfo.link,
|
||||
title: props.shareInfo.title,
|
||||
summary: props.shareInfo.desc,
|
||||
imageUrl: props.shareInfo.image,
|
||||
success: (res) => {
|
||||
console.log('success:' + JSON.stringify(res));
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
};
|
||||
|
||||
// 复制链接分享
|
||||
const onShareByCopyLink = () => {
|
||||
sheep.$helper.copyText(props.shareInfo.link);
|
||||
closeShareModal();
|
||||
};
|
||||
// 复制链接分享
|
||||
const onShareByCopyLink = () => {
|
||||
sheep.$helper.copyText(props.shareInfo.link);
|
||||
closeShareModal();
|
||||
};
|
||||
|
||||
function onCloseGuide() {
|
||||
state.showShareGuide = false;
|
||||
}
|
||||
function onCloseGuide() {
|
||||
state.showShareGuide = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.guide-image {
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
width: 580rpx;
|
||||
height: 430rpx;
|
||||
z-index: 10080;
|
||||
}
|
||||
.guide-image {
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
width: 580rpx;
|
||||
height: 430rpx;
|
||||
z-index: 10080;
|
||||
}
|
||||
|
||||
// 分享tool
|
||||
.share-box {
|
||||
background: $white;
|
||||
width: 750rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding-top: 30rpx;
|
||||
// 分享tool
|
||||
.share-box {
|
||||
background: $white;
|
||||
width: 750rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding-top: 30rpx;
|
||||
|
||||
.share-foot {
|
||||
font-size: 24rpx;
|
||||
color: $gray-b;
|
||||
height: 80rpx;
|
||||
border-top: 1rpx solid $gray-e;
|
||||
}
|
||||
.share-foot {
|
||||
font-size: 24rpx;
|
||||
color: $gray-b;
|
||||
height: 80rpx;
|
||||
border-top: 1rpx solid $gray-e;
|
||||
}
|
||||
|
||||
.share-list-box {
|
||||
.share-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
.share-list-box {
|
||||
.share-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.share-item {
|
||||
flex: 1;
|
||||
padding-bottom: 20rpx;
|
||||
.share-item {
|
||||
flex: 1;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.share-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background: $gray-f;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.share-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background: $gray-f;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.share-title {
|
||||
font-size: 24rpx;
|
||||
color: $dark-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.share-title {
|
||||
font-size: 24rpx;
|
||||
color: $dark-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user