update

mobile-code/src/components/plugin/tabs.vue

@@ -11,8 +11,8 @@
 		</div>
 		<!-- tab add -->
 		<div class="tabs-add" v-if="isAdd" :style="{width: `${addTabWidth}rpx`}" @click="add">
-			<i class="iconfont icontianjiakehu"></i>
-			<span>添加</span>
+			<i class="iconfont" :class="[addIcon]"></i>
+			<span>{{ addText }}</span>
 		</div>
 		<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:sliderWidth+'rpx',height:
 	sliderHeight+'rpx',borderRadius:sliderRadius,bottom:bottom,marginBottom:bottom=='50%'?('-'+sliderHeight/2+'rpx'):0}"></view>
@@ -119,6 +119,15 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		// 新增按钮的icon
+		addIcon: {
+			type: String,
+			default: 'icontianjiakehu'
+		},
+		addText: {
+			type: String,
+			default: '添加'
+		},
 		// 是否显示box-shadow
 		isBoxShadow: {
 			type: Boolean,

mobile-code/src/pages.json

@@ -69,6 +69,12 @@
 					"style": {
 						"navigationBarTitleText": "邀请列表"
 					}
+				},
+				{
+					"path": "admin/setting",
+					"style": {
+						"navigationBarTitleText": "奖励设置"
+					}
 				}
 			]
 		},
@@ -82,6 +88,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "pages/ad",
+			"pages": [
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "广告列表"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

mobile-code/src/pages/ad/list.vue

@@ -0,0 +1,112 @@
+<template>
+	<div class="app-content">
+		<!-- <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="50%" /> -->
+		<div class="list-wrap">
+			<!-- <div class="list" v-for="(item, index) in 1" :key="index">
+				<div class="list-img">
+					<img src="../../static/images/interest/invite.png" alt mode="center" />
+				</div>
+				<div class="list-right">
+					<div class="app-size-28 app-color-0">情人节图片</div>
+					<div>3天后到期</div>
+					<div class="list-option">
+						<div>
+							<div>点击次数：50988</div>
+							<div>
+								<span>当前状态：</span>
+								<span :style="{color: true ? '#09BB07' : '#FF0000'}">启用</span>
+							</div>
+						</div>
+						<div class="operate-icon">
+							<i class="iconfont" :class="[ operateIndex == index ? 'iconcaozuojihuo' : 'iconcaozuo']"></i>
+						</div>
+					</div>
+				</div>
+			</div> -->
+			<!-- 操作 -->
+			<operate-module :top="216" :right="30" :btnData="btnData" @del="operateDelFn" />
+		</div>
+	</div>
+</template>
+
+<script>
+import AppTabs from '@/components/plugin/tabs'
+import OperateModule from '@/pages/admin/components/module/operate'
+export default {
+	name: 'ad-list',
+	components: {
+		AppTabs,
+		OperateModule
+	},
+	data() {
+		return {
+			tabIndex: 0,
+			tabs: [
+				{
+					name: '门店轮播图'
+				},
+				{
+					name: '商城首页轮播图'
+				}
+			],
+			operateIndex: 0,
+			btnData: [
+				{
+					text: '编辑',
+					icon: 'iconshanchu1',
+					click: () => {
+			            console.log('9999999')
+			            console.log(this)
+						this.$emit('del')
+					}
+				}
+			]
+		}
+	},
+	methods: {
+		change(e) {
+			this.tabIndex = e.index
+		},
+		operateDelFn() {
+			console.log('asdfasdfas')
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-content {
+        min-height: calc(100vh - 100px);
+        padding-top: 100px;
+	}
+	.list-wrap {
+        width: 100%;
+		position: relative;
+		background-color: #fff;
+		.list {
+			@include disFlex(center, flex-start);
+			padding: 20px 30px;
+			.list-img {
+				width: 300px;
+				height: 168px;
+				img {
+					height: 100%;
+				}
+			}
+			.list-right {
+				width: calc(100% - 320px);
+				color: $fontColor3;
+				margin-left: 20px;
+				& > div {
+					margin-top: 20px;
+					&:first-child {
+						margin-top: 0;
+					}
+				}
+				.list-option {
+					@include disFlex(flex-end, space-between);
+				}
+			}
+		}
+	}
+</style>

mobile-code/src/pages/admin/components/module/operate.vue

@@ -0,0 +1,80 @@
+<template>
+	<div class="operate-module" :style="{top: top + 'rpx', right: right + 'rpx'}">
+		<!-- <div class="operate-icon">
+			<i class="iconfont" :class="[ isShow ? 'iconcaozuojihuo' : 'iconcaozuo']"></i>
+		</div>-->
+		<!-- 弹窗 -->
+		<!-- <div class="operate-wrap" :style="{top: top + 'rpx', right: right + 'rpx'}" > -->
+			<div class="operate-list" v-for="(item, index) in btnData" :key="index" @click="click(item.click)">
+				<i class="iconfont" :class="[item.icon]"></i>
+				<div class="btn-text">{{ item.text }}</div>
+                <!-- <span>{{item.click}}</span> -->
+			</div>
+		<!-- </div> -->
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'operate-module',
+	data() {
+		return {}
+	},
+	props: {
+		top: {
+			type: Number,
+			default: 30
+		},
+		right: {
+			type: Number,
+			default: 30
+		},
+		// 按钮列表
+		btnData: {
+			type: Array,
+			default: () => []
+		}
+	},
+	methods: {
+		click(fn) {
+			fn()
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.operate-module {
+		// position: relative;
+		// .operate-icon {
+		// 	.iconcaozuojihuo {
+		// 		color: $mainColor;
+		// 	}
+		// }
+		// 操作
+		// .operate-wrap {
+			position: absolute;
+			// top: 50px;
+			background: rgba(0, 0, 0, 0.8);
+			box-shadow: 0px 3px 6px 0px rgba(29, 29, 29, 0.7);
+			border-radius: 10px;
+			width: max-content;
+			height: 100px;
+			@include disFlex(center, space-between);
+			// padding: 14px 0;
+			.operate-list {
+				flex-shrink: 0;
+				padding: 0 24px;
+				text-align: center;
+                color: #fff;
+                .iconfont {
+                    font-size: 36px;
+                }
+				.btn-text {
+					transform: scale(0.8);
+					margin-top: 2px;
+				}
+			}
+		// }
+	}
+</style>

mobile-code/src/pages/interest/admin/invite.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="app-content">
-		<app-tabs :tabs="tabs" :isFixed="true" :isBoxShadow="false" :currentTab="tabIndex" @change="change" itemWidth="25%" />
+		<app-tabs :tabs="tabs" :isFixed="true" :isAdd="true" addIcon="iconshezhi" addText="设置" @add="$util.pageTo('/pages/interest/admin/setting')" :isBoxShadow="false" :currentTab="tabIndex" @change="change" itemWidth="25%" />
 		<div class="input-wrap">
 			<div class="map-search">
 				<app-search-module placeholder="请输入商品名称" />
@@ -23,16 +23,42 @@
                             <div>介绍人：曾小小</div>
                             <div class="list-remark">2019-11-9 16:15   领券</div>
                         </div>
-                        <div class="admin-button-com blue">兑奖</div>
+                        <div class="admin-button-com blue" @click="redeemFn">兑奖</div>
                     </div>
 				</div>
 			</div>
 		</div>
 		<!-- 兑奖弹窗 -->
-		<modal-module :show="redeemModal" :custom="true" @cancel="modalCancel" @click="modalClick" padding="30rpx 30rpx">
+		<modal-module :show="redeemModal" :custom="true" :maskClosable="false" @click="modalClick" padding="30rpx 30rpx">
 			<template>
                 <div class="redeem-wrap">
-                    <div class="redeem-list"></div>
+                    <div class="redeem-list-wrap">
+                        <div class="list">
+                            <div class="list-tag">
+                                <img src="../../../static/images/interest/introducer.png" alt="" mode="widthFix" >
+                            </div>
+                            <div class="list-left">
+				                <app-avatar-module :width="100" />
+                            </div>
+                            <div class="list-right">
+                                <div class="app-color-0 app-size-30 app-blod">郑志军</div>
+                                <div>普通客户</div>
+                                <div>
+                                    <span class="list-time">2019-11-9 16:15</span>
+                                    <span>下单: ¥256</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 总览 -->
+                    <div class="redeem-total">
+                        <span>奖励：</span>
+                        <span class="app-price">￥30</span>
+                    </div>
+                    <div class="redeem-btn">
+                        <div class="admin-button-com default big" @click="modalCancel">取消</div>
+                        <div class="admin-button-com blue big">确认发奖</div>
+                    </div>
                 </div>
 			</template>
 		</modal-module>
@@ -69,7 +95,7 @@ export default {
 					name: '已兑奖'
 				}
 			],
-			redeemModal: true
+			redeemModal: false
 		}
 	},
 	methods: {
@@ -79,7 +105,10 @@ export default {
 		modalCancel() {
 			this.redeemModal = false
 		},
-		modalClick() {}
+		modalClick() {},
+		redeemFn() {
+			this.redeemModal = true
+		}
 	}
 }
 </script>
@@ -128,4 +157,44 @@ export default {
             }
         }
     }
+    // module
+    .redeem-wrap {
+        .redeem-list-wrap {
+            .list {
+                position: relative;
+                @include disFlex(center, flex-start);
+                padding: 28px 20px;
+                color: $fontColor3;
+                box-shadow: 0px 1px 16px 0px rgba(238,238,238,1);
+                border-radius: 10px;
+                .list-tag {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: 100px;
+                }
+                .list-right {
+                    margin-left: 20px;
+                    & > div:first-child {
+                        margin-top: 0;
+                    }
+                    & > div {
+                        margin-top: 14px;
+                    }
+                }
+            }
+        }
+        .redeem-total {
+            margin: 30px 0 50px;
+            text-align: center;
+            font-size: 40px;
+        }
+        .redeem-btn {
+            @include disFlex(center, space-between);
+            width: 100%;
+            .admin-button-com {
+                width: 40%;
+            }
+        }
+    }
 </style>

mobile-code/src/pages/interest/admin/setting.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="app-content">
+		<div class="module-com flex-center-between switch-blo">
+			<div class="app-size-32">开启状态</div>
+			<div>
+				<switch checked @change="switchChangeFn" />
+			</div>
+		</div>
+		<div class="module-com flex-center">
+            <label class="app-size-28">邀请成功下单奖励</label>
+            <input type="text" class="app-size-28 reward-inp" placeholder="请输入">
+        </div>
+		<div class="prompt-text">奖励可以是现金、绿植和散花等</div>
+		<div class="module-com new_wrap">
+			<div class="module-tit">新人可领取</div>
+			<div class="module-det">
+				<div>
+					<input type="text" class="setting-inp" />
+					<span>元优惠券，满</span>
+					<input type="text" class="setting-inp" />
+					<span>元可以使用，</span>
+				</div>
+                <div>
+                    <span>领取后</span>
+					<input type="text" class="setting-inp" />
+                    <span>天内有效。</span>
+                </div>
+			</div>
+		</div>
+		<div class="prompt-text">提示：奖励额度可以比新人领券高一此, 这样可以吸引老客户邀请 新人，新人也更愿意到店消费。</div>
+		<div class="admin-button-com blue big">确认</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'invite-setting',
+	data() {
+		return {}
+	},
+	methods: {
+		switchChangeFn(e) {
+			console.log('switch1 发生 change 事件，携带值为', e.target.value)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    .prompt-text {
+        color: $fontColor3;
+        padding-bottom: 20px;
+        padding-left: 30px;
+    }
+	.module-com {
+        margin-bottom: 20px;
+        padding: 30px;
+        background-color: #fff;
+        color: $fontColor2;
+        .module-tit {
+            font-size: 28px;
+        }
+    }
+    .admin-button-com {
+        width: calc(100% - 100px);
+        margin: 60px 30px 0;
+    }
+    .switch-blo {
+        padding: 15px 30px;
+    }
+    .reward-inp {
+        margin-left: 40px;
+    }
+    .new_wrap {
+        .module-tit {
+            margin-bottom: 30px;
+        }
+        .module-det {
+            color: $fontColor2;
+            & > div {
+                @include disFlex(center, flex-start);
+                flex-wrap: wrap;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+            .setting-inp {
+                width: 150px;
+                height: 70px;
+                border: 2px solid $borderColor;
+                border-radius: 10px;
+                margin: 0 20px;
+                text-align: center;
+                &:first-child {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+</style>

mobile-code/src/static/css/common.scss

@@ -226,6 +226,18 @@ body {
 }
 // ======================= 弹窗输入框公共样式 - end ====================
 
+// ======================= admin 操作弹窗 公共 =========================
+
+.operate-icon {
+    position: relative;
+    top: 20px;
+    left: 20px;
+    padding: 20px;
+    .iconcaozuojihuo {
+    	color: $mainColor;
+    }
+}
+
 // 带统计字数文本域
 .textarea_wrap {
     position: relative;