init
This commit is contained in:
砂糖
254
fuintUniapp/pages/prestore/buy.scss
Normal file
254
fuintUniapp/pages/prestore/buy.scss
Normal file
@@ -0,0 +1,254 @@
|
||||
.container {
|
||||
padding-bottom: 112rpx;
|
||||
}
|
||||
|
||||
/* 卡券信息 */
|
||||
.coupon-info {
|
||||
background: #fff;
|
||||
padding: 25rpx 30rpx;
|
||||
}
|
||||
|
||||
.info-item__top {
|
||||
min-height: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-item__top .active-tag {
|
||||
width: 108rpx;
|
||||
color: #fff;
|
||||
background: #fe293f;
|
||||
padding: 3rpx 5rpx;
|
||||
border-radius: 15rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.floor-price__samll {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: #FA2209;
|
||||
}
|
||||
|
||||
/* 金额 */
|
||||
.floor-price {
|
||||
color: #FA2209;
|
||||
margin-right: 15rpx;
|
||||
font-size: 38rpx;
|
||||
line-height: 1;
|
||||
margin-bottom: -2rpx;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
text-decoration: line-through;
|
||||
color: #959595;
|
||||
}
|
||||
|
||||
.coupon-sales {
|
||||
font-size: 24rpx;
|
||||
color: #959595;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 15rpx;
|
||||
color:#666666;
|
||||
.number{
|
||||
color:#f9211c;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.store-rule {
|
||||
color:#666666;
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx;
|
||||
border: #cccccc dashed 5rpx;
|
||||
border-radius: 5rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.title {
|
||||
color:#666666;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.item {
|
||||
margin-bottom:0px;
|
||||
height: 60rpx;
|
||||
padding-top:15rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item__name .coupon-name {
|
||||
font-size: 30rpx;
|
||||
font-weight:bold;
|
||||
margin-bottom: 20rpx;
|
||||
color:#666666;
|
||||
}
|
||||
|
||||
/* 商品分享 */
|
||||
|
||||
.coupon-share__line {
|
||||
border-left: 1rpx solid #f4f4f4;
|
||||
height: 60rpx;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.coupon-share .share-btn {
|
||||
line-height: normal;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-size: 8pt;
|
||||
border: none;
|
||||
color: #191919;
|
||||
}
|
||||
|
||||
.coupon-share .share-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.coupon-share .share__icon {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
/* 卖点 */
|
||||
.info-item_selling-point {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
// 选择商品规格
|
||||
.coupon-choice {
|
||||
padding: 26rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.spec-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.spec-name {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡券详情 */
|
||||
.coupon-content {
|
||||
.item-title {
|
||||
padding: 26rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.coupon-content-detail {
|
||||
padding:0rpx 25rpx 25rpx 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 快捷菜单
|
||||
.foo-item-fast {
|
||||
box-sizing: border-box;
|
||||
width: 100rpx;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.fast-item {
|
||||
position: relative;
|
||||
padding: 4rpx 10rpx;
|
||||
line-height: 1;
|
||||
|
||||
.fast-icon {
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
// 角标
|
||||
.fast-badge {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
min-width: 16px;
|
||||
padding: 0 3px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
background-color: #ee0a24;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.fast-badge--fixed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform-origin: 100%
|
||||
}
|
||||
|
||||
.fast-icon {
|
||||
font-size: 46rpx;
|
||||
}
|
||||
|
||||
.fast-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 底部操作栏 */
|
||||
.footer-fixed {
|
||||
position: fixed;
|
||||
bottom: var(--window-bottom);
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
height: 180rpx;
|
||||
z-index: 11;
|
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.foo-item-btn {
|
||||
flex: 1;
|
||||
|
||||
.btn-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
// 立即购买按钮
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, #f9211c, #ff6335);
|
||||
}
|
||||
|
||||
// 购物车按钮
|
||||
.btn-item-deputy {
|
||||
background: linear-gradient(to right, #ffa600, #ffbb00);
|
||||
}
|
||||
}
|
||||
216
fuintUniapp/pages/prestore/buy.vue
Normal file
216
fuintUniapp/pages/prestore/buy.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view v-show="!isLoading" class="container">
|
||||
<!-- 卡券信息 -->
|
||||
<view v-if="!isLoading" class="coupon-info m-top20">
|
||||
<!-- 标题、分享 -->
|
||||
<view class="info-item info-item__name dis-flex flex-y-center">
|
||||
<view class="coupon-name flex-box">
|
||||
<text class="twolist-hidden">{{ couponInfo.name }}</text>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="coupon-share__line"></view>
|
||||
<view class="coupon-share">
|
||||
<button class="share-btn dis-flex flex-dir-column" open-type="share">
|
||||
<text class="share__icon iconfont icon-fenxiang"></text>
|
||||
<text class="f-24">分享</text>
|
||||
</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- 卡券预存规则 -->
|
||||
<view class="store-rule">
|
||||
<view class="title">预存规则：</view>
|
||||
<view v-for="(item, index) in storeRule" :key="index" class="item">
|
||||
<text>预存￥{{ item.store }} 到账 ￥{{ item.upStore }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text>已有<text class="number">{{ couponInfo.gotNum }}</text>人预存，剩余<text class="number">{{ couponInfo.limitNum }}</text>名额</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text>有效期：{{ couponInfo.effectiveDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择卡券规格 -->
|
||||
<view class="coupon-choice m-top20 b-f" @click="onShowPopup()">
|
||||
<view class="spec-list">
|
||||
<view class="flex-box">
|
||||
<text class="col-8">选择：</text>
|
||||
<text class="spec-name" key="index">预存金额、数量</text>
|
||||
</view>
|
||||
<view class="f-26 col-9 t-r">
|
||||
<text class="iconfont icon-xiangyoujiantou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预存选项弹窗 -->
|
||||
<Popup v-if="!isLoading" v-model="showPopup" :couponInfo="couponInfo" :storeRule="storeRule"/>
|
||||
|
||||
<!-- 卡券描述 -->
|
||||
<view v-if="!isLoading" class="coupon-content m-top20">
|
||||
<view class="item-title b-f">
|
||||
<text>卡券描述</text>
|
||||
</view>
|
||||
<block v-if="couponInfo.description != ''">
|
||||
<view class="coupon-content-detail b-f">
|
||||
<jyf-parser :html="couponInfo.description"></jyf-parser>
|
||||
</view>
|
||||
</block>
|
||||
<empty v-else tips="亲，暂无卡券描述" />
|
||||
</view>
|
||||
|
||||
<!-- 底部选项卡 -->
|
||||
<view class="footer-fixed">
|
||||
<view class="footer-container">
|
||||
<!-- 导航图标 -->
|
||||
<view class="foo-item-fast">
|
||||
<!-- 客服 (仅微信小程序端显示) -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="btn-normal" open-type="contact">
|
||||
<view class="fast-item">
|
||||
<view class="fast-icon">
|
||||
<text class="iconfont icon-kefu1"></text>
|
||||
</view>
|
||||
<view class="fast-text">
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="foo-item-btn">
|
||||
<view class="btn-wrapper">
|
||||
<view class="btn-item btn-item-main" @click="onShowPopup()">
|
||||
<text>立即预存</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as CouponApi from '@/api/coupon'
|
||||
import jyfParser from '@/components/jyf-parser/jyf-parser'
|
||||
import Shortcut from '@/components/shortcut'
|
||||
import Popup from './components/Popup'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
jyfParser,
|
||||
Shortcut,
|
||||
Popup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 正在加载
|
||||
isLoading: true,
|
||||
// 当前卡券ID
|
||||
couponId: null,
|
||||
// 卡券详情
|
||||
couponInfo: null,
|
||||
// 预存规则
|
||||
storeRule: [],
|
||||
// 显示/隐藏弹窗
|
||||
showPopup: false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
// 卡券ID
|
||||
this.couponId = parseInt(options.couponId)
|
||||
// 加载页面数据
|
||||
this.onRefreshPage()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 刷新页面数据
|
||||
onRefreshPage() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
Promise.all([app.getCouponDetail()])
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 获取卡券信息
|
||||
getCouponDetail() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
CouponApi.detail(app.couponId)
|
||||
.then(result => {
|
||||
app.couponInfo = result.data
|
||||
let ruleItem = app.couponInfo.inRule.split(",");
|
||||
ruleItem.forEach(function(item) {
|
||||
let rule = item.split("_")
|
||||
app.storeRule.push({"store": rule[0], "upStore": rule[1]})
|
||||
})
|
||||
resolve(result)
|
||||
})
|
||||
.catch(err => reject(err))
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示/隐藏预存弹窗
|
||||
*/
|
||||
onShowPopup() {
|
||||
this.showPopup = !this.showPopup
|
||||
},
|
||||
|
||||
// 跳转到首页
|
||||
onTargetHome(e) {
|
||||
this.$navTo('pages/index/index')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享当前页面
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
const app = this
|
||||
// 构建页面参数
|
||||
const params = app.$getShareUrlParams({
|
||||
couponId: app.couponId
|
||||
})
|
||||
return {
|
||||
title: app.couponInfo.name,
|
||||
path: `/pages/prestore/buy?${params}`
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
||||
*/
|
||||
onShareTimeline() {
|
||||
const app = this
|
||||
// 构建页面参数
|
||||
const params = app.$getShareUrlParams({
|
||||
couponId: app.couponId,
|
||||
})
|
||||
return {
|
||||
title: app.couponInfo.name,
|
||||
path: `/pages/prestore/buy?${params}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #fafafa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import "./buy.scss";
|
||||
</style>
|
||||
71
fuintUniapp/pages/prestore/components/Popup.vue
Normal file
71
fuintUniapp/pages/prestore/components/Popup.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<coupon-popup :value="value" @input="onChangeValue" :couponInfo="couponInfo" :storeRule="storeRule" border-radius="20" :maskCloseAble="true"
|
||||
@open="openPopup" @close="closePopup"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setCartTotalNum } from '@/utils/app'
|
||||
import * as CartApi from '@/api/cart'
|
||||
import CouponPopup from '@/components/prestore-popup'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CouponPopup
|
||||
},
|
||||
props: {
|
||||
// true 组件显示 false 组件隐藏
|
||||
value: {
|
||||
Type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 卡券详情信息
|
||||
couponInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
// 预存规则
|
||||
storeRule: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
created() {
|
||||
// empty
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 监听组件显示隐藏
|
||||
onChangeValue(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取卡券信息
|
||||
*/
|
||||
findCouponInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(couponInfo)
|
||||
})
|
||||
},
|
||||
|
||||
// sku组件 开始-----------------------------------------------------------
|
||||
openPopup() {
|
||||
// console.log("监听 - 打开sku组件")
|
||||
},
|
||||
|
||||
closePopup() {
|
||||
// console.log("监听 - 关闭sku组件")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
158
fuintUniapp/pages/prestore/components/Service.vue
Normal file
158
fuintUniapp/pages/prestore/components/Service.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view v-if="list.length" class="service-wrapper">
|
||||
<!-- 服务简述 -->
|
||||
<view class="service-simple" @click="handlePopup">
|
||||
<view class="s-list">
|
||||
<view class="s-item" v-for="(item, index) in list" :key="index">
|
||||
<text class="item-icon iconfont icon-fuwu"></text>
|
||||
<text class="item-val">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 扩展箭头 -->
|
||||
<view class="s-arrow f-26 col-9 t-r">
|
||||
<text class="iconfont icon-xiangyoujiantou"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情内容弹窗 -->
|
||||
<u-popup v-model="showPopup" mode="bottom" :closeable="true" :border-radius="26">
|
||||
<view class="service-content">
|
||||
<view class="title">服务</view>
|
||||
<scroll-view class="content-scroll" :scroll-y="true">
|
||||
<view class="s-list clearfix">
|
||||
<view class="s-item" v-for="(item, index) in list" :key="index">
|
||||
<text class="item-icon iconfont icon-fuwu"></text>
|
||||
<view class="item-val">{{ item.name }}</view>
|
||||
<view class="item-summary">{{ item.summary }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as ServiceApi from '@/api/goods/service'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 卡券ID
|
||||
goodsId: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 正在加载
|
||||
isLoading: true,
|
||||
// 显示详情内容弹窗
|
||||
showPopup: false,
|
||||
// 服务列表数据
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 获取商品服务列表
|
||||
this.getServiceList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取商品服务列表
|
||||
getServiceList() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
ServiceApi.list(app.goodsId)
|
||||
.then(result => app.list = result.data.list)
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 显示弹窗
|
||||
handlePopup() {
|
||||
this.showPopup = !this.showPopup
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.service-wrapper {
|
||||
min-height: 24rpx;
|
||||
margin-bottom: -24rpx;
|
||||
}
|
||||
|
||||
// 服务简述
|
||||
.service-simple {
|
||||
padding: 24rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.s-list {
|
||||
flex: 1;
|
||||
margin-left: -15rpx;
|
||||
}
|
||||
|
||||
.s-item {
|
||||
float: left;
|
||||
font-size: 26rpx;
|
||||
margin: 8rpx 15rpx;
|
||||
|
||||
.item-icon {
|
||||
color: #FA2209;
|
||||
}
|
||||
|
||||
.item-val {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 服务详细内容
|
||||
.service-content {
|
||||
padding: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 50rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
min-height: 400rpx;
|
||||
max-height: 750rpx;
|
||||
}
|
||||
|
||||
.s-list {
|
||||
padding: 0 30rpx 0 80rpx;
|
||||
}
|
||||
|
||||
.s-item {
|
||||
position: relative;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
.item-icon {
|
||||
position: absolute;
|
||||
top: 6rpx;
|
||||
left: -50rpx;
|
||||
color: #FA2209;
|
||||
}
|
||||
|
||||
.item-val {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.item-summary {
|
||||
font-size: 26rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #6d6d6d;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
337
fuintUniapp/pages/prestore/detail.vue
Normal file
337
fuintUniapp/pages/prestore/detail.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<view v-if="!isLoading" class="container b-f p-b">
|
||||
<view class="base">
|
||||
<view class="coupon-main">
|
||||
<view class="left">
|
||||
<image class="image" :src="detail.image"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="item">
|
||||
<view class="name">{{ detail.name ? detail.name : '' }}</view>
|
||||
</view>
|
||||
<view v-if="detail.type == 'P'" class="item">
|
||||
<view class="amount">￥<text class="num">{{ detail.balance }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="detail.amount > 0" class="item">
|
||||
<view class="label">卡券面额：</view>
|
||||
<view class="amount">￥{{ detail.amount }}</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label">有效期至：</view>
|
||||
<view>{{ detail.effectiveDate }}</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label">适用门店：</view>
|
||||
<view>{{ detail.storeNames ? detail.storeNames : '全部'}}</view>
|
||||
</view>
|
||||
<view v-if="detail.code && detail.status == 'A' && detail.isGive" class="gift" @click="give()"><text>转赠好友</text></view>
|
||||
</view>
|
||||
<view class="coupon-qr">
|
||||
<view>
|
||||
<image class="image" :src="detail.qrCode"></image>
|
||||
</view>
|
||||
<view class="qr-code">
|
||||
<p class="code">卡号：{{ detail.code }}</p>
|
||||
<p class="tips">请出示以上卡号给核销人员</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon-content m-top20">
|
||||
<view class="title">使用须知</view>
|
||||
<view class="content"><jyf-parser :html="detail.description ? detail.description : '暂无...'"></jyf-parser></view>
|
||||
</view>
|
||||
|
||||
<!-- 底部选项卡 -->
|
||||
<view class="footer-fixed">
|
||||
<view class="footer-container">
|
||||
<view class="foo-item-btn">
|
||||
<view class="btn-wrapper">
|
||||
<view v-if="detail.status != 'D'" class="btn-item btn-item-main" @click="remove(userCouponId)">
|
||||
<text>删除卡券</text>
|
||||
</view>
|
||||
<view v-if="detail.status == 'D'" class="btn-item btn-item-main state">
|
||||
<text>已删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷导航 -->
|
||||
<shortcut />
|
||||
<view class="give-popup">
|
||||
<uni-popup ref="givePopup" type="dialog">
|
||||
<uni-popup-dialog mode="input" title="转赠给好友" type="info" placeholder="输入好友手机号码" :before-close="true" @close="cancelGive" @confirm="doGive"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jyfParser from '@/components/jyf-parser/jyf-parser'
|
||||
import Shortcut from '@/components/shortcut'
|
||||
import * as myCouponApi from '@/api/myCoupon'
|
||||
import * as giveApi from '@/api/give'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Shortcut
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 卡券ID
|
||||
couponId: null,
|
||||
// 加载中
|
||||
isLoading: true,
|
||||
// 卡券详情
|
||||
detail: null,
|
||||
qrCode: ""
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
// 记录ID
|
||||
this.userCouponId = options.userCouponId
|
||||
// 获取卡券详情
|
||||
this.getCouponDetail()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取卡券详情
|
||||
getCouponDetail() {
|
||||
const app = this
|
||||
myCouponApi.detail(0, app.userCouponId, "")
|
||||
.then(result => {
|
||||
app.detail = result.data
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
// 转赠
|
||||
give() {
|
||||
this.$refs.givePopup.open('top')
|
||||
},
|
||||
// 取消转赠
|
||||
cancelGive() {
|
||||
this.$refs.givePopup.close()
|
||||
},
|
||||
// 确定转赠
|
||||
doGive(friendMobile) {
|
||||
const app = this
|
||||
if (friendMobile.length < 11) {
|
||||
app.$error("请先输入好友手机号码！")
|
||||
return false
|
||||
} else {
|
||||
app.$refs.givePopup.close()
|
||||
const param = {'mobile': friendMobile,
|
||||
'couponId': this.userCouponId,
|
||||
'message': '转赠一张优惠券给你'}
|
||||
giveApi.doGive(param)
|
||||
.then(result => {
|
||||
if (result.code == '200') {
|
||||
uni.showModal({
|
||||
title: '提示信息',
|
||||
content: '恭喜，转增成功！',
|
||||
showCancel: false,
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
app.$error(result.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 删除卡券
|
||||
remove() {
|
||||
const app = this;
|
||||
if (app.isLoading == true) {
|
||||
return false;
|
||||
}
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "您确定要删除吗?",
|
||||
success({ confirm }) {
|
||||
if (confirm) {
|
||||
app.isLoading = true;
|
||||
myCouponApi.remove(app.userCouponId)
|
||||
.then(result => {
|
||||
app.getCouponDetail();
|
||||
app.isLoading = false;
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.base {
|
||||
border: solid 1rpx #cccccc;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 20rpx;
|
||||
height: auto;
|
||||
min-height: 420rpx;
|
||||
.coupon-main {
|
||||
clear: both;
|
||||
min-height: 164rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 5rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.left {
|
||||
width: 215rpx;
|
||||
float: left;
|
||||
.image {
|
||||
width: 210rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 380rpx;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
.name {
|
||||
font-size: 38rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
.num {
|
||||
font-size: 58rpx;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
clear: both;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
.label {
|
||||
float: left;
|
||||
}
|
||||
.amount {
|
||||
font-weight: bold;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-qr {
|
||||
border: solid 1rpx #cccccc;
|
||||
border-radius: 10rpx;
|
||||
margin: 20rpx;
|
||||
text-align: center;
|
||||
padding: 30rpx 15rpx 30rpx 15rpx;
|
||||
.image{
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.qr-code{
|
||||
.code{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.tips{
|
||||
font-size: 25rpx;
|
||||
color:#C0C4CC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-content {
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx;
|
||||
border: solid 1rpx #cccccc;
|
||||
border-radius: 10rpx;
|
||||
margin: 20rpx 20rpx 200rpx 20rpx;
|
||||
min-height: 400rpx;
|
||||
.title {
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
.gift {
|
||||
height: 46rpx;
|
||||
width: 120rpx;
|
||||
margin-top: 20rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: center;
|
||||
border: 1px solid #f8df00;
|
||||
border-radius: 6rpx;
|
||||
color: #f86d48;
|
||||
background: #f8df98;
|
||||
font-size: 22rpx;
|
||||
float: right;
|
||||
&.state {
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.footer-fixed {
|
||||
position: fixed;
|
||||
bottom: var(--window-bottom);
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
height: 180rpx;
|
||||
padding-bottom: 30rpx;
|
||||
z-index: 11;
|
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.foo-item-btn {
|
||||
flex: 1;
|
||||
.btn-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 80rpx;
|
||||
}
|
||||
// 领取按钮
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, #f9211c, #ff6335);
|
||||
&.state {
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user