TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

['设置中心']

Browse Source
This commit is contained in:
张冬雪
2021-09-24 15:11:14 +08:00
parent 08c56ea921
commit 3dc185139c
172 changed files with 13194 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
pages/coupons/add.vue Normal file
View File

@@ -0,0 +1,413 @@
<template>
<view>
<view class="coupons-preview">
<view class="item cover">
<view v-if="types[typeIndex].id == 2">
<view class="cover-price">{{price || 0}}<text>元</text></view>
<view class="cover-subtitle">代金券</view>
</view>
<view @click="updCover" v-else>
<image class="cover-img" v-if="cover != ''" :src="cover" mode="aspectFill" />
<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
</view>
</view>
<view class="item mian">
<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
<block v-if="timeIndex == 0">
<view class="time nowrap">{{datePickerValue.length == 0 ? '有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
</block>
<block v-else>
<view class="time nowrap">领取后{{timeNumber}}天内有效</view>
</block>
</view>
</view>
<view class="add-info">
<view class="inputs">
<label class="input-label">券类型</label>
<picker :range="types" range-key="text" :value="typeIndex" data-type="typeIndex" @change="changePicker">
<view class="input-text">{{types[typeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
</picker>
</view>
<view class="inputs">
<label class="input-label">券标题</label>
<input type="text" v-model="couponsTitle" placeholder="输入优惠券标题" />
</view>
<view class="inputs">
<label class="input-label">发券数量</label>
<view class="input-number">
<uni-number-box class="number" :min="1" :max="9999" :value="quantity" @change="quantityChange"></uni-number-box>
</view>
</view>
<view class="inputs">
<label class="input-label">每人限领</label>
<view class="input-number">
<uni-number-box class="number" :min="1" :max="quantity" :value="personQuantity" @change="personQuantityChange"></uni-number-box>
</view>
</view>
<block v-if="types[typeIndex].id == 2">
<view class="inputs">
<label class="input-label">满</label>
<input type="digit" v-model="full" placeholder="输入券最低消费金额" />
</view>
<view class="inputs">
<label class="input-label">减</label>
<input type="digit" v-model="price" placeholder="输入券优惠金额" />
</view>
<view class="inputs">
<label class="input-label">使用渠道</label>
<view class="input-checkbox">
<radio-group @change="radioChange">
<label class="input-checkbox-item">
<radio color="#e93340" value="1" checked/>
<text>线上优惠</text>
</label>
<label class="input-checkbox-item">
<radio color="#e93340" value="2"/>
<text>线下活动</text>
</label>
</radio-group>
</view>
</view>
</block>
<view class="inputs">
<label class="input-label">时间类型</label>
<picker :range="times" range-key="text" :value="timeIndex" data-type="timeIndex" @change="changePicker">
<view class="input-text">{{times[timeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
</picker>
</view>
<view class="inputs">
<label class="input-label">{{timeIndex == 0 ? '券有效期': '延期天数'}}</label>
<block v-if="timeIndex === 0">
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期区间': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#e93340" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
</block>
<block v-if="timeIndex === 1">
<view class="input-number">
<uni-number-box class="number" :min="1" :value="timeNumber" @change="timeNumberChange"></uni-number-box>
</view>
</block>
</view>
<view class="inputs">
<label class="input-label">关联商品</label>
<view class="input-text" @click="onSelectGoods">
<block v-if="coupongoods.length > 0">已关联{{coupongoods.length}}件商品</block>
<block v-else>选择关联商品</block>
<uni-icons class="picker-icon" type="arrowdown" size="14" />
</view>
</view>
</view>
<view class="add-textarea">
<label>使用规则</label>
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
</view>
<view class="add-btn ios-bottom">
<button type="default" @click="updComponent">发布优惠券</button>
</view>
</view>
</template>
<script>
import TnDatePicker from "@/components/tn-datepicker/tn-datepicker";
import { uploads } from '@/apis/interfaces/uploading'
import { pushCoupons } from '@/apis/interfaces/coupons'
export default {
components:{
TnDatePicker
},
data() {
return {
typeIndex : 0,
types : [
{ id: 1, text: '服务券' },
{ id: 2, text: '代金券' },
{ id: 3, text: '提货券' },
],
timeIndex : 0,
times : [
{ type: 2, text: '固定时间（区间范围）' },
{ type: 1, text: '延期券（用户领取后有效天数）' }
],
showDatePicker : false, // 活动弹出层时间
datePickerValue : [], // 活动时间
cover : '', // 优惠券图标
useWay : 1, // 使用途径
couponsTitle : '', // 优惠券标题
quantity : 1, // 发券数量
personQuantity : 1, // 每人限领
full : '', // 满足金额
price : '', // 减少金额
description : '', // 使用规则
coupongoods : [], // 关联商品
timeNumber : 1 // 延期券时间
};
},
onShow(){
this.coupongoods = this.$store.getters.getCoupongoods
},
methods:{
// 发券数量
quantityChange(value){
this.quantity = value
},
// 每人限领
personQuantityChange(value){
this.personQuantity = value
},
// 延期券时间
timeNumberChange(value){
this.timeNumber = value
},
// 使用渠道
radioChange(e){
this.useWay = e.detail.value
},
// 选择
changePicker(e){
this[e.target.dataset.type] = e.detail.value
},
// 日期
confirmDatePicker(e){
this.datePickerValue = e.value
this.showDatePicker = false
},
// 上传优惠券封面
updCover(){
uni.chooseImage({
crop: {width: 300, height: 300},
success: path=> {
uploads([{
uri : path.tempFilePaths[0]
}]).then(res => {
this.cover = res.url[0]
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
})
},
// 选择关联商品
onSelectGoods(){
this.$Router.push({name: 'selectGoods', params: {type: this.types[this.typeIndex].id}})
},
// 发布优惠券
updComponent(){
let valuss = {
title : this.couponsTitle,
cover : this.cover,
type : this.types[this.typeIndex].id,
full : this.full || 0,
price : this.price || 0,
quantity : this.quantity,
use_way : this.useWay,
person_quantity : this.personQuantity,
start_at : this.datePickerValue[0],
end_at : this.datePickerValue[1],
description : this.description,
time_type : this.times[this.typeIndex].type,
days : this.timeNumber,
goodsable_ids : this.coupongoods
}
pushCoupons(valuss).then(res => {
uni.showModal({
title : '提示',
content : res,
showCancel : false,
confirmText : '确定',
confirmColor: '#e93340',
success : modalRes => {
this.$store.commit('setCoupongoods', [])
this.$Router.back()
}
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}
</script>
<style lang="scss">
.add-btn{
padding: $padding;
button{
height: 90rpx;
line-height: 90rpx;
background: $text-price;
color: white;
font-size: $title-size;
font-weight: bold;
border-radius: 0;
&::after{
border: none;
}
}
}
// 优惠券详情
.add-textarea{
background: white;
margin-top: $margin;
padding: $padding $padding $padding ($padding + 180rpx);
label{
position: absolute;
left: $padding;
line-height: 40rpx;
height: 40rpx;
}
textarea{
width: 100%;
padding: 0;
margin: 0;
line-height: 40rpx;
height: 200rpx;
}
}
// 优惠券配置
.add-info{
background-color: white;
padding: 0 $padding;
.inputs{
position: relative;
padding-left: 180rpx;
&::after{
position: absolute;
height: 1rpx;
content: " ";
background: $border-color;
left: 0;
right: -$padding;
bottom: 0;
}
&:last-child::after{
display: none;
}
.input-label{
position: absolute;
left: 0;
line-height: 90rpx;
height: 90rpx;
}
.input-text,
input{
height: 90rpx;
line-height: 90rpx;
font-size: $title-size-lg;
}
.input-text{
position: relative;
padding-right: 90rpx;
.picker-icon{
position: absolute;
right: 0;
}
}
.input-number{
display: flex;
align-items: center;
height: 90rpx;
}
.input-checkbox{
min-height: 90rpx;
display: flex;
.input-checkbox-item{
line-height: 90rpx;
margin-right: $margin;
radio{
transform:scale(0.8);
margin-right: -15rpx;
}
text{
padding: 0 ($padding/2);
line-height: 50rpx;
display: inline-block;
font-size: $title-size-lg;
}
}
}
.inputs{}
}
}
// 发布预览
.coupons-preview{
background: white;
margin: $margin;
border-radius: $radius/2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: $padding 0;
.item{
position: relative;
padding: 0 $padding;
}
.cover{
position: relative;
border-right: dashed 3rpx $border-color;
width: 148rpx;
text-align: center;
.cover-img{
width: 148rpx;
height: 148rpx;
border-radius: $radius/2;
vertical-align: top;
background: $border-color-lg;
border:solid 1rpx $border-color;
box-sizing: border-box;
}
.cover-price{
padding-top: 24rpx;
font-weight: bold;
line-height: 58rpx;
font-size: $title-size + 10;
color: $text-price;
text{
font-size: 70%;
padding-left: 5rpx;
}
}
.cover-subtitle{
padding-bottom: 24rpx;
line-height: 40rpx;
color: $text-gray;
font-size: $title-size-sm;
}
&::after,&::before{
position: absolute;
width: 30rpx;
height: 30rpx;
background: #f8f8f8;
content: " ";
right: -16rpx;
border-radius: 50%;
}
&::after{
top: -($padding + 15);
}
&::before{
bottom: -($padding + 15);
}
}
.mian{
justify-content: center;
width: calc(100% - 148rpx - #{$padding*2});
box-sizing: border-box;
@extend .vertical;
.title{
font-size: $title-size-lg;
line-height: 50rpx;
}
.time, .goods{
color: $text-gray-m;
font-size: $title-size-m;
line-height: 40rpx;
}
}
}
</style>

269
pages/coupons/magDetails.vue Normal file
View File

@@ -0,0 +1,269 @@
<template>
<view class="content" v-if="!isLoding">
<view class="details">
<view class="header">
<view class="info-item">
<view class="info-item-title">优惠券标题</view>
<view class="info-item-text">{{details.title}}</view>
</view>
<view class="info-item">
<view class="info-item-title">优惠券类型</view>
<view class="info-item-text">{{details.type.text}}</view>
</view>
<view class="info-item">
<view class="info-item-title">上架状态</view>
<view class="info-item-text">已{{details.status.text}}</view>
</view>
<view class="info-item">
<view class="info-item-title">使用渠道</view>
<view class="info-item-text">{{details.use_way}}</view>
</view>
<view class="info-item" v-if="details.type.value === 2">
<view class="info-item-title">满减</view>
<view class="info-item-text">满{{details.price}}减{{details.full}}</view>
</view>
<view class="info-item">
<view class="info-item-title">券发放量</view>
<view class="info-item-text">{{details.quantity}}</view>
</view>
<view class="info-item">
<view class="info-item-title">已发放量</view>
<view class="info-item-text">{{details.grant_quantity}}</view>
</view>
<view class="info-item">
<view class="info-item-title">每人限领</view>
<view class="info-item-text">{{details.person_quantity == 0 ? '不限制': details.person_quantity}}</view>
</view>
<block v-if="details.time_type.value === 1">
<view class="info-item">
<view class="info-item-title">券有效期(起)</view>
<view class="info-item-text">{{details.start_at}}</view>
</view>
<view class="info-item">
<view class="info-item-title">券有效期(止)</view>
<view class="info-item-text">{{details.end_at}}</view>
</view>
</block>
<block v-if="details.time_type.value === 2">
<view class="info-item">
<view class="info-item-title">券有效期</view>
<view class="info-item-text">领取后{{details.days}}天内有效</view>
</view>
</block>
<view class="info-item">
<view class="info-item-title">创建时间</view>
<view class="info-item-text">{{details.created_at}}</view>
</view>
</view>
<view class="mian">
<block v-if="details.goods.length > 0">
<view class="mian-title">关联商品</view>
<view class="mian-goods">
<view class="item" v-for="(item, index) in details.goods" :key="index">
<view class="item-title nowrap">{{item.name}}</view>
<view class="item-price nowrap">￥{{item.price}}</view>
</view>
</view>
</block>
<view class="mian-title">使用说明</view>
<view class="mian-text">
<text>{{details.description || '-'}}</text>
</view>
</view>
</view>
<view class="ios-bottom"></view>
<!-- footer -->
<view class="footer">
<view class="footer-flex">
<view class="item" @click="putStatus">{{details.status.value == 4 ? '上架': '下架'}}</view>
<view class="item" @click="onCouponsRecommend">{{recommended ? '设为推荐': '已设为推荐'}}</view>
</view>
<view class="ios-bottom"></view>
</view>
</view>
</template>
<script>
import { magCouponsInfo, magCouponsStatus, magCouponsRecommend } from '@/apis/interfaces/coupons'
export default {
data() {
return {
isLoding : true,
recommended : false,
details : {}
};
},
onShow() {
magCouponsInfo(this.$Route.query.couponId).then(res => {
this.recommended = res.can.recommended
this.details = res
this.isLoding = false
})
},
methods:{
// 上下架
putStatus(){
magCouponsStatus(this.details.coupon_id).then(res => {
uni.showToast({
title: res,
icon : 'none'
})
this.$set(this.details, 'status', this.details.status.value == 4 ? {'value': 2,'text': "上架"} : {'value': 4,'text': "下架"})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 设为推荐
onCouponsRecommend(){
magCouponsRecommend(this.details.coupon_id).then(res => {
this.recommended = !this.recommended
uni.showToast({
title: res.message,
icon : 'none'
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}
</script>
<style lang="scss">
// content
.content{
padding-bottom: $padding + 90;
}
// footer
.footer{
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
background: white;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: ($padding/2) $padding;
.footer-flex{
display: flex;
justify-content: space-between;
.item{
line-height: 70rpx;
width: 50%;
text-align: center;
color: $text-price;
font-size: $title-size-lg;
font-weight: bold;
border-right: solid 1rpx $border-color;
&:last-child{
border: none;
}
}
}
}
.details{
margin: $margin;
background: white;
border-radius: $radius;
// 优惠券信息
.header{
position: relative;
border-bottom: dashed 2rpx $border-color;
padding: $padding;
&::after,&::before{
position: absolute;
width: 30rpx;
height: 30rpx;
background: #f8f8f8;
content: " ";
bottom: -16rpx;
border-radius: 50%;
}
&::after{
left: -16rpx;
}
&::before{
right: -16rpx;
}
.info{
padding: $padding 0;
text-align: center;
.info-cover{
width: 128rpx;
height: 128rpx;
border-radius: 50%;
vertical-align: top;
}
.info-title{
padding-top: $padding;
text-align: center;
font-weight: bold;
font-size: $title-size;
}
}
.info-item{
position: relative;
padding-left: 200rpx;
min-height: 60rpx;
font-size: $title-size-lg;
padding-bottom: $padding/3;
&:last-child{
padding-bottom: 0;
}
.info-item-title{
position: absolute;
left: 0;
top: 0;
line-height: 50rpx;
color: $text-color;
}
.info-item-text{
line-height: 50rpx;
color: $text-gray;
text-align: right;
@extend .nowrap;
}
}
}
// 优惠券介绍
.mian{
padding: $padding;
.mian-title{
font-size: $title-size-lg;
font-weight: bold;
line-height: 50rpx;
color: $text-color;
}
.mian-text{
font-size: $title-size-m;
color: $text-gray;
padding-top: $padding/3;
}
.mian-goods{
padding-bottom: $padding;
.item{
display: flex;
justify-content: space-between;
line-height: 60rpx;
font-size: $title-size-m;
padding-top: $padding/3;
.item-title{
width: 75%;
color: $text-gray;
}
.item-price{
width: 25%;
color: $text-price;
font-weight: bold;
text-align: right;
}
}
}
}
}
</style>

265
pages/coupons/management.vue Normal file
View File

@@ -0,0 +1,265 @@
<template>
<view>
<view class="header">
<view class="tabs">
<view class="item" :class="{'show': listType == ''}" @click="onTabs('')">全部</view>
<view class="item" :class="{'show': listType == '1'}" @click="onTabs('1')">服务券</view>
<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
</view>
<view class="tabs-type">
<view class="item" :class="{'show': tabsType == ''}" @click="onTabsType('')">全部</view>
<view class="item" :class="{'show': tabsType == 'shown'}" @click="onTabsType('shown')">已上架</view>
<view class="item" :class="{'show': tabsType == 'unshown'}" @click="onTabsType('unshown')">已下架</view>
<view class="item" :class="{'show': tabsType == 'expire'}" @click="onTabsType('expire')">即将过期</view>
<view class="item" :class="{'show': tabsType == 'over'}" @click="onTabsType('over')">已过期</view>
</view>
</view>
<block v-if="coupons.length > 0">
<view class="coupons">
<view class="coupons-flex" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'magDetails', params: {couponId: item.coupon_id}})">
<view class="item cover">
<view v-if="item.type.value === 2">
<view class="cover-price">{{item.price || 0}}<text>元</text></view>
<view class="cover-subtitle">代金券</view>
</view>
<image v-else class="cover-img" :src="item.cover" mode="aspectFill" />
</view>
<view class="item mian">
<view class="title nowrap">{{item.title}}</view>
<view class="time nowrap">
<block v-if="item.time_type.value == 1">{{item.start_at}}至{{item.end_at}}</block>
<block v-if="item.time_type.value == 2">领取后{{item.days}}天内有效</block>
</view>
<view class="tags nowrap">
<text>已{{item.status.text}}</text>
<text>{{item.goods_count}}商品可用</text>
</view>
</view>
<view class="arrowright">
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
</view>
</view>
</view>
</block>
<block v-else>
<view class="list-null">
<view class="sub-title">暂无相关优惠券</view>
</view>
</block>
</view>
</template>
<script>
import { toolsCoupons } from '@/apis/interfaces/coupons'
export default {
data() {
return {
listType: '',
tabsType: '',
coupons : [],
pages : {}
};
},
onShow() {
this.getCoupons()
},
methods:{
// 选择类型
onTabs(value){
if(value == this.listType) return
this.listType = value
this.getCoupons()
},
// 状态筛选
onTabsType(val){
if(this.tabsType === val) return
this.tabsType = val
this.getCoupons()
},
// 数据列表
getCoupons(){
toolsCoupons({
type : this.listType,
status : this.tabsType
}).then(res => {
console.log(res)
this.coupons = res.lists.data
this.pages = res.lists.page
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
},
onNavigationBarButtonTap() {
this.$Router.push({name: 'couponsAdd'})
}
}
</script>
<style lang="scss" scoped>
// tabs
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
.tabs{
display: flex;
justify-content: space-around;
background: white;
padding: 15rpx 0;
font-size: $title-size-lg;
color: $text-gray;
.item{
height: 60rpx;
line-height: 60rpx;
&.show{
color: $text-price;
border-bottom: solid 4rpx $text-price;
}
}
}
// 类型
.tabs-type{
display: flex;
padding: 20rpx 30rpx;
background: white;
.item{
font-size: $title-size-sm;
height: 46rpx;
line-height: 46rpx;
border-radius: 23rpx;
padding: 0 ($padding - 10);
background: white;
margin-right: $margin/2;
color: $text-gray;
&.show{
background-color: rgba($color: $text-price, $alpha: .1);
color: $text-price;
}
}
}
}
// 空提示
.list-null{
width: 100vw;
height: 100vh;
box-sizing: border-box;
text-align: center;
@extend .vertical;
.sub-title{
color: $text-gray;
font-size: $title-size-m;
}
.icon{
width: 288rpx;
}
}
// 订单管理
.coupons{
padding-top: 180rpx;
@extend .ios-bottom;
.coupons-flex{
position: relative;
background: white;
margin: $margin;
border-radius: $radius/2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: $padding 70rpx $padding 0;
.item{
position: relative;
padding: 0 $padding;
}
.arrowright{
position: absolute;
right: $margin;
top: 0;
bottom: 0;
@extend .vertical
}
.cover{
position: relative;
border-right: dashed 3rpx $border-color;
width: 148rpx;
text-align: center;
.cover-img{
width: 148rpx;
height: 148rpx;
border-radius: $radius/2;
vertical-align: top;
background: $border-color-lg;
border:solid 1rpx $border-color;
box-sizing: border-box;
}
.cover-price{
padding-top: 24rpx;
font-weight: bold;
line-height: 58rpx;
font-size: $title-size + 10;
color: $text-price;
text{
font-size: 70%;
padding-left: 5rpx;
}
}
.cover-subtitle{
padding-bottom: 24rpx;
line-height: 40rpx;
color: $text-gray;
font-size: $title-size-sm;
}
&::after,&::before{
position: absolute;
width: 30rpx;
height: 30rpx;
background: #f8f8f8;
content: " ";
right: -16rpx;
border-radius: 50%;
}
&::after{
top: -($padding + 15);
}
&::before{
bottom: -($padding + 15);
}
}
.mian{
justify-content: center;
width: calc(100% - 148rpx - #{$padding*2});
box-sizing: border-box;
@extend .vertical;
.title{
font-size: $title-size-lg;
line-height: 50rpx;
font-weight: bold;
}
.time, .tags{
color: $text-gray-m;
font-size: $title-size-m;
line-height: 40rpx;
}
.tags{
margin-top: 10rpx;
text{
background: $border-color-lg;
color: $text-gray;
padding: 0 ($padding/2);
margin-right: ($margin/2);
&:last-child{
margin-right: 0;
}
}
}
}
}
}
</style>

243
pages/coupons/selectGoods.vue Normal file
View File

@@ -0,0 +1,243 @@
<template>
<view>
<!-- 商品列表 -->
<view class="lists">
<view class="goods-item" v-for="(item, index) in goods" :key="index">
<checkbox class="checkbox" :checked="item.isSelect" @click="onSelect(index)"/>
<view class="mian">
<image class="cover" :src="item.cover" mode="aspectFill" />
<view class="title">{{item.title}}</view>
<view class="subtitle">{{item.description}}</view>
<view class="mian-flex">
<view class="price"><text>￥</text>{{item.price}}</view>
<view class="inventory">权证剩余{{item.stock}}</view>
</view>
</view>
</view>
<view class="ios-bottom"></view>
</view>
<!-- footer -->
<view class="footer">
<view class="footer-flex">
<view class="flex-checkbox">
<checkbox class="checkbox" :checked="allSelect" @click="onAllSelect"/>
<label for="all">
<view class="text">全选</view>
<view class="sub-text">已选{{selectGoods.length}}件</view>
</label>
</view>
<view class="flex-button" @click="setGoods">确定</view>
</view>
<view class="ios-bottom"></view>
</view>
</view>
</template>
<script>
import { couponsGoods, couponsAddgoods } from '@/apis/interfaces/coupons'
export default {
data() {
return {
goods : [],
selectGoods : [],
allSelect : false
};
},
created() {
couponsGoods({
type: this.$Route.query.type
}).then(res => {
let coupongoodsIds = this.$store.getters.getCoupongoods,
goodsArr = res
for(let id of coupongoodsIds){
let selectIndex = goodsArr.findIndex(val => val.goods_sku_id === id)
goodsArr[selectIndex].isSelect = true
}
this.goods = goodsArr
this.selectNumber()
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods:{
// 全选产品
onAllSelect(){
for(let val of this.goods){
val.isSelect = !this.allSelect
}
this.selectNumber()
},
// 选择产品
onSelect(index){
const goodsItem = this.goods[index]
goodsItem.isSelect = !goodsItem.isSelect
this.$set(this.goods, index, goodsItem)
this.selectNumber()
},
// 计算产品数量
selectNumber(){
let selectArr = [];
for(let val of this.goods){
if(val.isSelect) selectArr.push(val.goods_sku_id)
}
this.selectGoods = selectArr
if(selectArr.length == this.goods.length && this.goods.length != 0) this.allSelect = true
else this.allSelect = false
},
// 添加设置产品
setGoods(){
if(this.selectGoods.length <= 0){
uni.showToast({
title: '请选择优惠券关联商品',
icon : 'none'
})
return
}
this.$store.commit('setCoupongoods', this.selectGoods)
this.$Router.back()
}
}
}
</script>
<style lang="scss">
// 列表
.lists{
padding-bottom: ($padding + 10) + 70;
.goods-item{
background: white;
padding: $padding $padding $padding ($padding + 70);
position: relative;
border-bottom: solid 1rpx $border-color;
.checkbox{
left: $padding;
}
.mian{
position: relative;
padding-left: $padding + 168;
min-height: 168rpx;
.cover{
position: absolute;
left: 0;
top: 0;
width: 168rpx;
height: 168rpx;
}
.title{
font-size: $title-size-lg;
line-height: 40rpx;
height: 48rpx;
@extend .nowrap;
}
.subtitle{
color: $text-gray;
font-size: $title-size-m;
height: 80rpx;
line-height: 40rpx;
margin-bottom: 8rpx;
@extend .nowrap;
}
.mian-flex{
display: flex;
justify-content: space-between;
.price{
width: 50%;
font-weight: bold;
color: $text-price;
font-size: $title-size;
height: 40rpx;
line-height: 40rpx;
@extend .nowrap;
}
.inventory{
width: 50%;
text-align: right;
font-size: $title-size-sm;
color: $text-gray;
height: 40rpx;
line-height: 40rpx;
@extend .nowrap;
}
}
}
}
}
// footer
.footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: ($padding - 10) $padding;
z-index: 99;
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
.footer-flex{
display: flex;
justify-content: space-between;
align-items: center;
.flex-checkbox{
position: relative;
width: 50%;
padding-right: $padding;
padding-left: 70rpx;
box-sizing: border-box;
.text{
font-size: $title-size-lg;
font-weight: bold;
line-height: 40rpx;
color: $text-color;
}
.sub-text{
font-size: $title-size-sm;
color: $text-gray;
line-height: 40rpx;
@extend .nowrap;
}
}
.flex-button{
background: $text-price;
color: white;
width: 50%;
text-align: center;
line-height: 80rpx;
border-radius: $radius/2;
font-size: $title-size;
font-weight: bold;
}
}
}
// checkbox
.checkbox{
position: absolute;
left: 0;
top: 50%;
margin-top: -28rpx;
.uni-checkbox-input{
border: 1px solid $border-color;
border-radius: 50%;
width: 46rpx;
height: 46rpx;
box-sizing:border-box;
}
.uni-checkbox-input.uni-checkbox-input-checked{
border: none;
background: $text-price;
}
.uni-checkbox-input.uni-checkbox-input-checked::before{
border-radius: 50%;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
font-size: 24rpx;
color:#fff;
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
}
</style>