调整发布优惠券样式

This commit is contained in:
唐明明
2021-09-27 17:02:48 +08:00
parent cda72679d4
commit 005dc9ead1
3 changed files with 71 additions and 120 deletions

View File

@@ -1,5 +1,5 @@
<template>
<view class="basics-content">
<view>
<view class="coupons-preview">
<view class="item cover">
<view v-if="types[typeIndex].id == 2">
@@ -79,7 +79,7 @@
<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"/>
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#8b64fd" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
</block>
<block v-if="timeIndex === 1">
<view class="input-number">
@@ -89,7 +89,7 @@
</view>
<view class="inputs">
<label class="input-label">关联商品</label>
<view class="input-text" @click="onSelectGoods" v-if="coupongoods">
<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" />
@@ -100,9 +100,9 @@
<label>使用规则</label>
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
</view>
<view class="basisc-btn">
<button type="default" class="btn" @click="updComponent">发布优惠券</button>
</view>
<view class="add-btn ios-bottom">
<button type="default" @click="updComponent">发布优惠券</button>
</view>
</view>
</template>
@@ -116,6 +116,7 @@
},
data() {
return {
loding : true,
typeIndex : 0,
types : [
{ id: 1, text: '服务券' },
@@ -235,35 +236,6 @@
</script>
<style lang="scss" scoped>
.basics-content{
padding-bottom: ($padding*3) + 90;
}
// 按钮组
.basisc-btn{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding;
background: white;
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
.btn {
background: $mian-color;
color: white;
border-radius: 0;
font-size: $title-size-lg;
line-height: 88rpx;
height: 88rpx;
&::after {
border: none;
}
&[disabled] {
background: rgba($color: $mian-color, $alpha: .6);
}
}
}
.add-btn{
padding: $padding;
button{

View File

@@ -12,17 +12,24 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
token : uni.getStorageSync('token') || ''
token : uni.getStorageSync('token') || '',
coupongoods : []
},
getters: {
getToken: state => {
return state.token
},
getCoupongoods: state => {
return state.coupongoods
}
},
mutations: {
setToken(state, tokenString) {
state.token = tokenString
uni.setStorageSync('token', tokenString)
},
setCoupongoods(state, value) {
state.coupongoods = value
}
}
})

View File

@@ -141,12 +141,12 @@
};
</script>
<style lang="scss" scoped>
$box-height: 35px;
$box-height: 50rpx;
/* #ifdef APP-NVUE */
$box-line-height: 35px;
$box-line-height: 50rpx;
/* #endif */
$box-line-height: 26px;
$box-width: 35px;
$box-line-height: 50rpx;
$box-width: 50rpx;
.uni-numbox {
/* #ifndef APP-NVUE */
@@ -154,8 +154,9 @@
/* #endif */
flex-direction: row;
height: $box-height;
line-height: $box-height;
width: 120px;
line-height: $box-height - 7rpx;
align-items: center;
// width: 120px;
}
.uni-cursor-point {
@@ -170,51 +171,22 @@
height: $box-height;
text-align: center;
font-size: $uni-font-size-lg;
border-width: 1rpx;
border-style: solid;
border-color: $uni-border-color;
border-left-width: 0;
border-right-width: 0;
}
.uni-numbox__minus {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: $box-width;
height: $box-height;
// line-height: $box-line-height;
// text-align: center;
font-size: 20px;
color: $uni-text-color;
background-color: $uni-bg-color-grey;
border-width: 1rpx;
border-style: solid;
border-color: $uni-border-color;
border-top-left-radius: $uni-border-radius-base;
border-bottom-left-radius: $uni-border-radius-base;
border-right-width: 0;
background: $border-color-lg;
border-radius: 50%;
text-align: center;
}
.uni-numbox__plus {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: $box-width;
height: $box-height;
border-width: 1rpx;
border-style: solid;
border-color: $uni-border-color;
border-top-right-radius: $uni-border-radius-base;
border-bottom-right-radius: $uni-border-radius-base;
background-color: $uni-bg-color-grey;
border-left-width: 0;
background: $border-color-lg;
border-radius: 50%;
text-align: center;
}
.uni-numbox--text {