优惠券组件完善

src/App.vue

@@ -227,7 +227,10 @@ export default {
           com: 'editorCoupon',
           setCom: 'settingCoupon',
           value: {
-            couponObj:{}
+            couponTitle:'满减优惠券',
+            couponList:[],
+            btnBackground:['#009AFF','#3FBDFB'],
+            buttonName:'立即领取',
           }
         }],
       view: [],

src/components/View/editorCoupon.vue

@@ -1,23 +1,100 @@
 <template>
     <div class="coupon">
-        <div class="li">
-            <div class="lit">
-                <img src="https://zhiqiyun.oss-cn-hangzhou.aliyuncs.com/static/yhq_wei.png" class="lqbg" />
-                <div class="lits dflex">
-                    <div class="left"><span>￥</span><span
-                            class="jine">{{content.value.couponObj.couponAmount?content.value.couponObj.couponAmount:6}}</span>元
+        <div style="display: flex;justify-content: center;">
+            <div class="coupon-title">{{content.value.couponTitle}}</div>
+        </div>
+        <div v-if="content.value.couponList.length>0">
+            <!-- 样式1 -->
+            <!-- <div class="li" v-for="item in content.value.couponList">
+                <div class="lit">
+                    <img src="https://zhiqiyun.oss-cn-hangzhou.aliyuncs.com/static/yhq_wei.png" class="lqbg" />
+                    <div class="lits dflex">
+                        <div class="left"><span>￥</span><span
+                                class="jine">{{item.couponAmount?item.couponAmount:6}}</span>元
+                        </div>
+                        <div class="tong flex">
+                            <div>{{item.couponType == 1 ? '满减券' : '代金券'}}</div>
+                            <span>{{item.couponBrief?item.couponBrief:'优惠券描述'}}</span>
+                        </div>
+                        <div class="lqbtn">立即领取</div>
+                    </div>
+                </div>
+                <div class="right">
+                    <div>使用日期：{{item.couponStart?item.couponStart:'xxxx-xx-xx xx:xx:xx'}}至{{item.couponEnd?item.couponEnd:'xxxx-xx-xx xx:xx:xx'}}</div>
+                    <div>适用范围：{{item.couponTitle?item.couponTitle:'适用范围'}}</div>
+                </div>
+            </div> -->
+            <!-- 样式2 -->
+            <div class="coupon-box" v-for="item in content.value.couponList" :key="item.id">
+                <div class="coupon-info">
+                    <img src="../../assets/images/l-youhuiquan.png" class="coupon-pic"/>
+                    <div class="coupon-content">
+                        <div class="coupon-content-title">超声波洁牙满减优惠券</div>
+                        <div class="coupon-content-date">2021.07.015-2021.07.31</div>
                     </div>
-                    <div class="tong flex">
-                        <div>{{content.value.couponObj.couponType == 1 ? '满减券' : '代金券'}}</div>
-                        <span>{{content.value.couponObj.couponBrief?content.value.couponObj.couponBrief:'优惠券描述'}}</span>
+                    <div class="coupon-use">
+                        <div style="margin: auto;">
+                            <span class="coupon-symbol">￥</span>
+                            <span class="coupon-userMoney">50</span>
+                        </div>
+                        <div class="coupon-useBreif">满399可用</div>
                     </div>
-                    <div class="lqbtn">立即领取</div>
+                </div>
+                <div class="coupon-option">
+                    <div class="coupon-option-left">
+                        <div>查看详情</div>
+                        <img src="../../assets/images/arrow.png"/>
+                    </div>
+                    <div v-if="content.value.btnBackground.length==2" class="coupon-option-btn" :style="'background: linear-gradient(90deg, '+content.value.btnBackground[0]+' 0%, '+content.value.btnBackground[1]+' 100%);'">{{ content.value.buttonName }}</div>
+                    <div v-else-if="content.value.btnBackground.length==1" class="coupon-option-btn" :style="'background: '+content.value.btnBackground[0]+';'">{{ content.value.buttonName }}</div>
+                    <div v-else class="coupon-option-btn" style="background: linear-gradient(90deg, #009AFF 0%, #3FBDFB 100%);">{{ content.value.buttonName }}</div>
                 </div>
             </div>
-            <div class="right">
-                <div>使用日期：{{content.value.couponObj.couponStart?content.value.couponObj.couponStart:'xxxx-xx-xx xx:xx:xx'}}至{{content.value.couponObj.couponEnd?content.value.couponObj.couponEnd:'xxxx-xx-xx xx:xx:xx'}}</div>
-                <div>适用范围：{{content.value.couponObj.couponTitle?content.value.couponObj.couponTitle:'适用范围'}}</div>
-                <!-- <img src="/product/static/product/img/yhq_gq.png" class="guoqi" /> -->
+        </div>
+        <div v-else>
+            <!-- <div class="li">
+                <div class="lit">
+                    <img src="https://zhiqiyun.oss-cn-hangzhou.aliyuncs.com/static/yhq_wei.png" class="lqbg" />
+                    <div class="lits dflex">
+                        <div class="left"><span>￥</span><span
+                                class="jine">6</span>元
+                        </div>
+                        <div class="tong flex">
+                            <div>满减券}</div>
+                            <span>优惠券描述</span>
+                        </div>
+                        <div class="lqbtn">立即领取</div>
+                    </div>
+                </div>
+                <div class="right">
+                    <div>使用日期：xxxx-xx-xx xx:xx:xx至xxxx-xx-xx xx:xx:xx</div>
+                    <div>适用范围：适用范围</div>
+                </div>
+            </div> -->
+             <!-- 样式2 -->
+             <div class="coupon-box">
+                <div class="coupon-info">
+                    <img src="../../assets/images/l-youhuiquan.png" class="coupon-pic"/>
+                    <div class="coupon-content">
+                        <div class="coupon-content-title">请选择优惠券</div>
+                        <div class="coupon-content-date">xxxx.xx.xx-xxxx.xx.xx</div>
+                    </div>
+                    <div class="coupon-use">
+                        <div style="margin: auto;">
+                            <span class="coupon-symbol">￥</span>
+                            <span class="coupon-userMoney">50</span>
+                        </div>
+                        <div class="coupon-useBreif">满399可用</div>
+                    </div>
+                </div>
+                <div class="coupon-option">
+                    <div class="coupon-option-left">
+                        <div>查看详情</div>
+                        <img src="../../assets/images/arrow.png"/>
+                    </div>
+                    
+                    <div class="coupon-option-btn" style="background: linear-gradient(90deg, #009AFF 0%, #3FBDFB 100%);">立即领取</div>
+                </div>
             </div>
         </div>
     </div>
@@ -38,6 +115,8 @@ export default {
             deep: true,
             handler(val) {
                 this.content = JSON.parse(JSON.stringify(val));
+                this.$forceUpdate()
+                console.log('1----1')
             },
         },
     },
@@ -45,14 +124,35 @@ export default {
 </script>
 
 <style  scoped>
-.coupon{
+.coupon {
     padding: 10px;
 }
-.dflex{
+
+.dflex {
     display: flex;
 }
-.flex{
-    flex:1
+
+.flex {
+    flex: 1
+}
+.coupon-title{
+    position: relative;
+    text-align: center;
+    font-weight: bold;
+    margin-top: 20px;
+    margin-bottom: 30px;
+    z-index: 1;
+}
+.coupon-title::after{
+    content: '';
+    height: 3px;
+    width: 70%;
+    position: absolute;
+    bottom: 1px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #FFC72C;
+    z-index: -1;
 }
 .li {
     background: #fff;
@@ -60,6 +160,7 @@ export default {
     overflow: hidden;
     border: 1px solid rgba(222, 222, 222, 1);
     position: relative;
+    margin-bottom: 10px;
 }
 
 .lit {
@@ -166,4 +267,105 @@ export default {
     top: 6px;
     z-index: 1;
 }
+
+/* 样式2 */
+.coupon-box{
+    box-shadow: 0px 0px 32px 1px rgba(0,0,0,0.04);
+    border-radius: 6px;
+    margin-bottom: 10px;
+}
+.coupon-info{
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    justify-content: space-between;
+    border-bottom:1px  dotted #E9E9E9;
+}
+.coupon-info::before{
+    position: absolute;
+    content: '';
+    width: 6px;
+    height: 12px;
+    bottom: 0;
+    left: 0;
+    transform: translate(0,50%);
+    background-color: #fbfbfb;
+    border-radius: 0 100px 100px 0;
+}
+.coupon-info::after{
+    position: absolute;
+    content: '';
+    width: 6px;
+    height: 12px;
+    bottom: 0;
+    right: 0;
+    transform: translate(0,50%);
+    background-color: #fbfbfb;
+    border-radius: 100px 0px 0px 100px;
+}
+.coupon-pic{
+    width: 60px;
+    height: 60px;
+    border-radius: 4px;
+    margin-right: 10px;
+}
+.coupon-content{
+    flex: 1;
+}
+.coupon-content-title{
+    font-size: 16px;
+    font-weight: bold;
+}
+.coupon-content-date{
+    font-size: 13px;
+    color:#999;
+    margin-top: 10px;
+}
+.coupon-use{
+    width: 70px;
+    text-align: center;
+    margin-left: 10px;
+}
+.coupon-symbol{
+    font-size: 14px;
+    color: #EB0000;
+}
+.coupon-userMoney{
+    font-size: 24px;
+    font-weight: bold;
+    color: #EB0000;
+}
+.coupon-useBreif{
+    font-size: 13px;
+    color: #999999;
+}
+.coupon-option{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding:10px 20px;
+}
+.coupon-option-left{
+    display: flex;
+    align-items: center;
+    color: #666666;
+    font-size: 14px;
+}
+.coupon-option-left img{
+    width: 5px;
+    height: 10px;
+    margin-left: 5px;
+    margin-top: 2px;
+}
+.coupon-option-btn{
+    width: 90px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 28px 28px 28px 28px;
+    opacity: 1;
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+}
 </style>

src/components/setting/settingCoupon.vue

@@ -6,13 +6,31 @@
         </div>
         <div>
             <el-form label-position="top" ref="form" label-width="80px">
+                <el-form-item style="margin-bottom: 0;" label="输入标题">
+                    <el-input size="mini" @input="handleDate" v-model="content.value.couponTitle"></el-input>
+                </el-form-item>
                 <el-form-item style="margin-bottom: 0;" label="选择优惠券">
-                    <el-select size="mini" @change="couponChange" v-model="selectId" placeholder="选择优惠券">
-                        <el-option label="请选择" value=""></el-option>
-                        <el-option :label="item.title" :value="item.id" v-for="item in couponList" :key="item.id">
-                        </el-option>
+                    <el-select
+                        @change="couponChange"
+                        v-model="selectList"
+                        multiple
+                        collapse-tags
+                        placeholder="选择优惠券">
+                        <el-option
+                            v-for="item in couponList"
+                            :key="item.id"
+                            :label="item.title"
+                            :value="item.id">
+                    </el-option>
                     </el-select>
                 </el-form-item>
+                <el-form-item style="margin-bottom: 0;" label="输入按钮名称">
+                    <el-input size="mini" @input="handleDate" v-model="content.value.buttonName"></el-input>
+                </el-form-item>
+                <el-form-item style="margin-bottom: 0;" label="按钮背景色（可只选一个，两个皆选为过渡色）">
+                    <el-color-picker @change="changeBgColor" v-model="btnBackground[0]"></el-color-picker>
+                    <el-color-picker style="margin-left: 20px;" @change="changeBgColor" v-model="btnBackground[1]"></el-color-picker>
+                </el-form-item>
             </el-form>
         </div>
     </div>
@@ -25,19 +43,27 @@ export default {
     data() {
         return {
             content: JSON.parse(JSON.stringify(this.data)),
-            selectId:'',
+            selectList:'',
             couponList:[{
                 id:101,
                 title:'xxx优惠券'
             },{
                 id:220,
                 title:'xxx2优惠券'
-            }]
+            }],
+            btnBackground:['','']
         }
     },
     created() {
         this.getCouponList()
-        this.selectId = this.content.id?this.content.id:''
+        this.selectList = this.content.value.couponList.length>0?this.content.value.couponList:[]
+
+        if(this.content.value.btnBackground[0]){
+            this.btnBackground[0] = this.content.value.btnBackground[0]
+        }
+        if(this.content.value.btnBackground[1]){
+            this.btnBackground[1] = this.content.value.btnBackground[1]
+        }
     },
     methods: {
         // 获取优惠券列表
@@ -52,8 +78,18 @@ export default {
         },
         couponChange(val){
             console.log('val',val)
-            let obj = this.couponList.filter(item=>{return item.id==val})[0]
-            this.content.value.couponObj = obj
+            let list = []
+            this.couponList.map(item=>{
+                if(val.indexOf(item.id)>-1)
+                list.push(item)
+            })
+            this.content.value.couponList = list
+            this.handleDate()
+        },
+        changeBgColor(val){
+            console.log(val)
+            this.content.value.btnBackground = this.btnBackground.filter(item=>{return item})
+            console.log(this.content.value.btnBackground)
             this.handleDate()
         },
         handleDate() {

src/components/setting/settingRecharge.vue

@@ -37,7 +37,8 @@
                     <el-input v-if="content.value.showSubButton" size="mini" @input="handleDate" v-model="content.value.subButtonName"></el-input>
                 </el-form-item>
                 <el-form-item style="margin-bottom: 0;" label="主题色">
-                    <el-input type="color" @input="handleDate" v-model="content.value.mainColor"/>
+                    <el-color-picker @change="handleDate" v-model="content.value.mainColor"></el-color-picker>
+                    <!-- <el-input type="color" @input="handleDate" v-model="content.value.mainColor"/> -->
                 </el-form-item>
 
                 <div>