预提测版本

pages/coupons/coupons.css

@@ -1,12 +1,16 @@
-ax-body{
+ax-body {
 	display: block;
 	height: 100%;
 	background: #F5F7FB;
 }
-ax-body >>> .ax-custom-title{
+
+ax-body>>>.ax-custom-title {
 	background-color: #fff !important;
 }
-.tabs-box{
+
+/* 选项卡start */
+.tabs-box {
+	z-index: 9999;
 	position: fixed;
 	width: 100%;
 	left: 0;
@@ -15,9 +19,153 @@ ax-body >>> .ax-custom-title{
 	display: flex;
 	align-items: center;
 	text-align: center;
+	gap: 20rpx;
 }
-	
-.item-tabs{
+
+.item-tabs {
 	flex: 1;
-	height: ;
+	height: 80rpx;
+	line-height: 80rpx;
+	position: relative;
+	color: #B1B1B1;
+	font-size: 28rpx;
+}
+
+.item-tabs:after {
+	content: '';
+	position: absolute;
+	left: 50%;
+	/* 水平起点居中 */
+	transform: translateX(-50%);
+	/* 向左偏移自身50%宽度，实现水平居中 */
+	bottom: 0;
+	width: 0;
+	height: 8rpx;
+	border-radius: 10rpx;
+	background-color: #3EB6F8;
+	opacity: 0;
+	transition: opacity 0.5s;
+	transition: width 0.3s;
+}
+
+.item-tabs.active {
+	color: #2B303A;
+	font-weight: bold;
+}
+
+.item-tabs.active:after {
+	width: 48rpx;
+	opacity: 1;
+}
+
+/* 选项卡end */
+
+.list-body {
+}
+
+.coupons-list-box {
+	margin-top: 20rpx;
+	position: relative;
+	overflow: hidden;
+	height: 196rpx;
+	width: 702rpx;
+}
+
+.coupons-list-box .coupons-bg-img {
+	position: absolute;
+	height: 196rpx;
+	width: 100%;
+}
+
+.coupons-content-box {
+	position: absolute;
+	display: flex;
+	height: 196rpx;
+}
+
+.coupons-content-box .coupons-left {
+	margin-top: 24rpx;
+	width: 180rpx;
+	text-align: center;
+	margin-left: 14rpx;
+}
+
+.left-price {
+	font-weight: 800;
+	font-size: 50rpx;
+	color: #FFFFFF;
+}
+
+.left-price text {
+	font-size: 28rpx;
+}
+
+.left-rules {
+	height: 46rpx;
+	line-height: 46rpx;
+	margin-top: 20rpx;
+	background-color: #fff;
+	border-radius: 24rpx;
+	font-size: 24rpx;
+	color: #FF6457;
+	text-align: center;
+}
+
+.coupons-center {
+	text-align: center;
+	margin-left: 30rpx;
+	margin-top: 24rpx;
+}
+
+.coupons-title {
+	font-weight: 800;
+	font-size: 28rpx;
+	color: #222222;
+}
+
+.coupons-valid {
+	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #AAAAAA;
+}
+
+.coupons-range {
+	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #222222;
+}
+
+.coupons-right {
+	margin-top: 58rpx;
+	margin-left:50rpx;
+}
+
+.coupons-dayrules {
+	font-size: 20rpx;
+	color: #AAAAAA;
+}
+
+.coupons-getbtn {
+	margin-top:22rpx;
+	height: 44rpx;
+	width: 136rpx;
+	text-align: center;
+	line-height: 44rpx;
+	background: #FF6457;
+	border-radius: 22rpx;
+	font-size: 24rpx;
+	color: #FFFFFF;
+}
+
+.ribbon {
+	width: 160rpx;
+	height: 30rpx;
+	background: #FF6457;
+	position: absolute;
+	right: -44rpx;
+	top: 20rpx;
+	transform: rotateZ(45deg);
+	text-align: center;
+	color: #fff;
+	font-size: 20rpx;
 }

pages/coupons/coupons.vue

@@ -2,16 +2,62 @@
 	<ax-body title="">
 		<view class="tabs-body">
 			<view class="tabs-box">
-				<view class="item-tabs">待领取(1)</view>
-				<view class="item-tabs">待使用(2)</view>
-				<view class="item-tabs">已使用(3)</view>
-				<view class="item-tabs">已过期(4)</view>
+				<view class="item-tabs" :class="{active:currentIndex===item.id}" v-for="item in tabsList" :key="item.id" @click="handleTabClick(item)">{{item.text}}({{item.id}})</view>
+			</view>
+			<view style="height: 100rpx;"></view>
+			<view class="list-body">
+				<view class="coupons-list-box" :style="{opacity:`${currentIndex===3?'0.5':''}`}" v-for="item in 3">
+					<image class="coupons-bg-img" src="../../static/img/coupons-new.png" mode=""></image>
+					<view class="coupons-content-box">
+						<view class="coupons-left">
+							<view class="left-price">10<text>元</text></view>
+							<view class="left-rules">满100元可用</view>
+						</view>
+						<view class="coupons-center">
+							<view class="coupons-title">优惠券名称优惠券名称</view>
+							<view class="coupons-valid">有效期：领取后60天</view>
+							<view class="coupons-range">平台所有充电桩可用</view>
+						</view>
+						<view class="coupons-right">
+							<view class="coupons-dayrules" v-if="currentIndex===0">每日限领一次</view>
+							<view class="coupons-getbtn" v-if="currentIndex===0">立即领取</view>
+							<view class="coupons-getbtn" v-if="currentIndex===2">查看订单</view>
+						</view>
+					</view>
+					<view class="ribbon" :style="{backgroundColor:`${currentIndex===3?'#e8e8e8':''}`,color:`${currentIndex===3?'#8c8c8c':''}`}">{{tabsList[currentIndex].text}}</view>
+				</view>
 			</view>
 		</view>
 	</ax-body>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				currentIndex: 0 ,// 默认选中第一个选项卡
+				tabsList:[{
+					text:'待领取',
+					id:0
+				},{
+					text:'待使用',
+					id:1
+				},{
+					text:'已使用',
+					id:2
+				},{
+					text:'已过期',
+					id:3
+				},]
+			};
+		},
+		methods: {
+			// 处理选项卡点击
+			handleTabClick(e) {
+				this.currentIndex = e.id;
+			}
+		}
+	};
 </script>
 
 <style>

static/js/config.js

@@ -7,9 +7,9 @@ const config = {};
 config.url = {
 	// API请求基础URL
 	// request : 'https://charge.hub.zswlgz.com/',
-	request : 'http://192.168.1.36:80/',
+	// request : 'http://192.168.1.36:80/',
 	// request : 'http://120.78.228.211:8866/',
-	// request : 'https://charge.dev.hub.zswlgz.com/',
+	request : 'https://charge.dev.hub.zswlgz.com/',
 	// 上传地址
 	upload : 'http://127.0.0.1:3000/upload/',
 	// 下载地址

unpackage/dist/build/mp-weixin/app.json

@@ -15,6 +15,7 @@
     "pages/order/order",
     "pages/search/search",
     "pages/Invite-staff/Invite-staff",
+    "pages/coupons/coupons",
     "pages/web/web",
     "pages/feedback-reply/feedback-reply"
   ],

unpackage/dist/build/mp-weixin/pages/coupons/coupons.js

@@ -0,0 +1 @@
+(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/coupons/coupons"],{"02a4":function(t,n,e){"use strict";e.r(n);var u=e("f771"),c=e("e384");for(var a in c)["default"].indexOf(a)<0&&function(t){e.d(n,t,(function(){return c[t]}))}(a);e("0eda");var r=e("828b"),i=Object(r["a"])(c["default"],u["b"],u["c"],!1,null,null,null,!1,u["a"],void 0);n["default"]=i.exports},"0eda":function(t,n,e){"use strict";var u=e("c299"),c=e.n(u);c.a},"163d":function(t,n,e){"use strict";(function(t,n){var u=e("47a9");e("2acb");u(e("3240"));var c=u(e("02a4"));t.__webpack_require_UNI_MP_PLUGIN__=e,n(c.default)}).call(this,e("3223")["default"],e("df3c")["createPage"])},"542c":function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;n.default={data:function(){return{currentIndex:0,tabsList:[{text:"待领取",id:0},{text:"待使用",id:1},{text:"已使用",id:2},{text:"已过期",id:3}]}},methods:{handleTabClick:function(t){this.currentIndex=t.id}}}},c299:function(t,n,e){},e384:function(t,n,e){"use strict";e.r(n);var u=e("542c"),c=e.n(u);for(var a in u)["default"].indexOf(a)<0&&function(t){e.d(n,t,(function(){return u[t]}))}(a);n["default"]=c.a},f771:function(t,n,e){"use strict";e.d(n,"b",(function(){return c})),e.d(n,"c",(function(){return a})),e.d(n,"a",(function(){return u}));var u={axBody:function(){return e.e("components/ax-body/ax-body").then(e.bind(null,"8839"))}},c=function(){var t=this.$createElement;this._self._c},a=[]}},[["163d","common/runtime","common/vendor"]]]);

unpackage/dist/build/mp-weixin/pages/coupons/coupons.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "优惠券",
+  "usingComponents": {
+    "ax-body": "/components/ax-body/ax-body"
+  }
+}

unpackage/dist/build/mp-weixin/pages/coupons/coupons.wxml

@@ -0,0 +1 @@
+<ax-body vue-id="6375c024-1" title bind:__l="__l" vue-slots="{{['default']}}"><view class="tabs-body"><view class="tabs-box"><block wx:for="{{tabsList}}" wx:for-item="item" wx:for-index="__i0__" wx:key="id"><view data-event-opts="{{[['tap',[['handleTabClick',['$0'],[[['tabsList','id',item.id]]]]]]]}}" class="{{['item-tabs',(currentIndex===item.id)?'active':'']}}" bindtap="__e">{{item.text+"("+item.id+")"}}</view></block></view><view style="height:100rpx;"></view><view class="list-body"><block wx:for="{{3}}" wx:for-item="item" wx:for-index="__i1__"><view class="coupons-list-box" style="{{'opacity:'+(''+(currentIndex===3?'0.5':''))+';'}}"><image class="coupons-bg-img" src="../../static/img/coupons-new.png" mode></image><view class="coupons-content-box"><view class="coupons-left"><view class="left-price">10<text>元</text></view><view class="left-rules">满100元可用</view></view><view class="coupons-center"><view class="coupons-title">优惠券名称优惠券名称</view><view class="coupons-valid">有效期：领取后60天</view><view class="coupons-range">平台所有充电桩可用</view></view><view class="coupons-right"><block wx:if="{{currentIndex===0}}"><view class="coupons-dayrules">每日限领一次</view></block><block wx:if="{{currentIndex===0}}"><view class="coupons-getbtn">立即领取</view></block><block wx:if="{{currentIndex===2}}"><view class="coupons-getbtn">查看订单</view></block></view></view><view class="ribbon" style="{{'background-color:'+(''+(currentIndex===3?'#e8e8e8':''))+';'+('color:'+(''+(currentIndex===3?'#8c8c8c':''))+';')}}">{{tabsList[currentIndex].text}}</view></view></block></view></view></ax-body>

unpackage/dist/build/mp-weixin/pages/coupons/coupons.wxss

@@ -0,0 +1 @@
+ax-body{display:block;height:100%;background:#f5f7fb}ax-body .ax-custom-title{background-color:#fff!important}.tabs-box{z-index:9999;position:fixed;width:100%;left:0;height:100rpx;background-color:#fff;display:flex;align-items:center;text-align:center;gap:20rpx}.item-tabs{flex:1;height:80rpx;line-height:80rpx;position:relative;color:#b1b1b1;font-size:28rpx}.item-tabs:after{content:"";position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:0;width:0;height:8rpx;border-radius:10rpx;background-color:#3eb6f8;opacity:0;transition:opacity .5s;transition:width .3s}.item-tabs.active{color:#2b303a;font-weight:700}.item-tabs.active:after{width:48rpx;opacity:1}.coupons-list-box{margin-top:20rpx;position:relative;overflow:hidden;height:196rpx;width:702rpx}.coupons-list-box .coupons-bg-img{position:absolute;height:196rpx;width:100%}.coupons-content-box{position:absolute;display:flex;height:196rpx}.coupons-content-box .coupons-left{margin-top:24rpx;width:180rpx;text-align:center;margin-left:14rpx}.left-price{font-weight:800;font-size:50rpx;color:#fff}.left-price text{font-size:28rpx}.left-rules{height:46rpx;line-height:46rpx;margin-top:20rpx;background-color:#fff;border-radius:24rpx;font-size:24rpx;color:#ff6457;text-align:center}.coupons-center{text-align:center;margin-left:30rpx;margin-top:24rpx}.coupons-title{font-weight:800;font-size:28rpx;color:#222}.coupons-valid{margin-top:16rpx;font-size:24rpx;color:#aaa}.coupons-range{margin-top:16rpx;font-size:24rpx;color:#222}.coupons-right{margin-top:58rpx;margin-left:50rpx}.coupons-dayrules{font-size:20rpx;color:#aaa}.coupons-getbtn{margin-top:22rpx;height:44rpx;width:136rpx;text-align:center;line-height:44rpx;background:#ff6457;border-radius:22rpx;font-size:24rpx;color:#fff}.ribbon{width:160rpx;height:30rpx;background:#ff6457;position:absolute;right:-44rpx;top:20rpx;-webkit-transform:rotate(45deg);transform:rotate(45deg);text-align:center;color:#fff;font-size:20rpx}

unpackage/dist/build/mp-weixin/static/js/config.js

@@ -6,10 +6,10 @@ const config = {};
 // 地址类
 config.url = {
 	// API请求基础URL
-	// request : 'https://charge.hub.zswlgz.com/',
-	// request : 'http://192.168.1.34:80/',
+	request : 'https://charge.hub.zswlgz.com/',
+	// request : 'http://192.168.1.36:80/',
 	// request : 'http://120.78.228.211:8866/',
-	request : 'https://charge.dev.hub.zswlgz.com/',
+	// request : 'https://charge.dev.hub.zswlgz.com/',
 	// 上传地址
 	upload : 'http://127.0.0.1:3000/upload/',
 	// 下载地址

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -10842,9 +10842,9 @@ var config = {};
 config.url = {
   // API请求基础URL
   // request : 'https://charge.hub.zswlgz.com/',
-  request: 'http://192.168.1.36:80/',
+  // request : 'http://192.168.1.36:80/',
   // request : 'http://120.78.228.211:8866/',
-  // request : 'https://charge.dev.hub.zswlgz.com/',
+  request: 'https://charge.dev.hub.zswlgz.com/',
   // 上传地址
   upload: 'http://127.0.0.1:3000/upload/',
   // 下载地址

unpackage/dist/dev/mp-weixin/pages/coupons/coupons.js

@@ -155,8 +155,24 @@ __webpack_require__.r(__webpack_exports__);
   !*** ./node_modules/babel-loader/lib!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--13-1!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!E:/zswl/code/charge_miniapp/charge_miniapp/pages/coupons/coupons.vue?vue&type=script&lang=js& ***!
   \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
 /*! no static exports found */
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+//
+//
+//
+//
+//
+//
+//
+//
+//
 //
 //
 //
@@ -170,6 +186,45 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var _default = {
+  data: function data() {
+    return {
+      currentIndex: 0,
+      // 默认选中第一个选项卡
+      tabsList: [{
+        text: '待领取',
+        id: 0
+      }, {
+        text: '待使用',
+        id: 1
+      }, {
+        text: '已使用',
+        id: 2
+      }, {
+        text: '已过期',
+        id: 3
+      }]
+    };
+  },
+  methods: {
+    // 处理选项卡点击
+    handleTabClick: function handleTabClick(e) {
+      this.currentIndex = e.id;
+    }
+  }
+};
+exports.default = _default;
 
 /***/ }),
 

unpackage/dist/dev/mp-weixin/pages/coupons/coupons.wxml

@@ -1 +1 @@
-<ax-body vue-id="6375c024-1" title bind:__l="__l" vue-slots="{{['default']}}"><view class="tabs-body"><view class="tabs-box"><view class="item-tabs">待领取(1)</view><view class="item-tabs">待使用(2)</view><view class="item-tabs">已使用(3)</view><view class="item-tabs">已过期(4)</view></view></view></ax-body>
+<ax-body vue-id="6375c024-1" title bind:__l="__l" vue-slots="{{['default']}}"><view class="tabs-body"><view class="tabs-box"><block wx:for="{{tabsList}}" wx:for-item="item" wx:for-index="__i0__" wx:key="id"><view data-event-opts="{{[['tap',[['handleTabClick',['$0'],[[['tabsList','id',item.id]]]]]]]}}" class="{{['item-tabs',(currentIndex===item.id)?'active':'']}}" bindtap="__e">{{item.text+"("+item.id+")"}}</view></block></view><view style="height:100rpx;"></view><view class="list-body"><block wx:for="{{3}}" wx:for-item="item" wx:for-index="__i1__"><view class="coupons-list-box" style="{{'opacity:'+(''+(currentIndex===3?'0.5':''))+';'}}"><image class="coupons-bg-img" src="../../static/img/coupons-new.png" mode></image><view class="coupons-content-box"><view class="coupons-left"><view class="left-price">10<text>元</text></view><view class="left-rules">满100元可用</view></view><view class="coupons-center"><view class="coupons-title">优惠券名称优惠券名称</view><view class="coupons-valid">有效期：领取后60天</view><view class="coupons-range">平台所有充电桩可用</view></view><view class="coupons-right"><block wx:if="{{currentIndex===0}}"><view class="coupons-dayrules">每日限领一次</view></block><block wx:if="{{currentIndex===0}}"><view class="coupons-getbtn">立即领取</view></block><block wx:if="{{currentIndex===2}}"><view class="coupons-getbtn">查看订单</view></block></view></view><view class="ribbon" style="{{'background-color:'+(''+(currentIndex===3?'#e8e8e8':''))+';'+('color:'+(''+(currentIndex===3?'#8c8c8c':''))+';')}}">{{tabsList[currentIndex].text}}</view></view></block></view></view></ax-body>

unpackage/dist/dev/mp-weixin/pages/coupons/coupons.wxss

@@ -1,12 +1,15 @@
-ax-body{
+ax-body {
 	display: block;
 	height: 100%;
 	background: #F5F7FB;
 }
-ax-body .ax-custom-title{
+ax-body .ax-custom-title {
 	background-color: #fff !important;
 }
-.tabs-box{
+
+/* 选项卡start */
+.tabs-box {
+	z-index: 9999;
 	position: fixed;
 	width: 100%;
 	left: 0;
@@ -15,9 +18,136 @@ ax-body .ax-custom-title{
 	display: flex;
 	align-items: center;
 	text-align: center;
+	gap: 20rpx;
 }
-.item-tabs{
+.item-tabs {
 	flex: 1;
-	height: ;
+	height: 80rpx;
+	line-height: 80rpx;
+	position: relative;
+	color: #B1B1B1;
+	font-size: 28rpx;
+}
+.item-tabs:after {
+	content: '';
+	position: absolute;
+	left: 50%;
+	/* 水平起点居中 */
+	-webkit-transform: translateX(-50%);
+	        transform: translateX(-50%);
+	/* 向左偏移自身50%宽度，实现水平居中 */
+	bottom: 0;
+	width: 0;
+	height: 8rpx;
+	border-radius: 10rpx;
+	background-color: #3EB6F8;
+	opacity: 0;
+	transition: opacity 0.5s;
+	transition: width 0.3s;
+}
+.item-tabs.active {
+	color: #2B303A;
+	font-weight: bold;
+}
+.item-tabs.active:after {
+	width: 48rpx;
+	opacity: 1;
+}
+
+/* 选项卡end */
+.list-body {
+}
+.coupons-list-box {
+	margin-top: 20rpx;
+	position: relative;
+	overflow: hidden;
+	height: 196rpx;
+	width: 702rpx;
+}
+.coupons-list-box .coupons-bg-img {
+	position: absolute;
+	height: 196rpx;
+	width: 100%;
+}
+.coupons-content-box {
+	position: absolute;
+	display: flex;
+	height: 196rpx;
+}
+.coupons-content-box .coupons-left {
+	margin-top: 24rpx;
+	width: 180rpx;
+	text-align: center;
+	margin-left: 14rpx;
+}
+.left-price {
+	font-weight: 800;
+	font-size: 50rpx;
+	color: #FFFFFF;
+}
+.left-price text {
+	font-size: 28rpx;
+}
+.left-rules {
+	height: 46rpx;
+	line-height: 46rpx;
+	margin-top: 20rpx;
+	background-color: #fff;
+	border-radius: 24rpx;
+	font-size: 24rpx;
+	color: #FF6457;
+	text-align: center;
+}
+.coupons-center {
+	text-align: center;
+	margin-left: 30rpx;
+	margin-top: 24rpx;
+}
+.coupons-title {
+	font-weight: 800;
+	font-size: 28rpx;
+	color: #222222;
+}
+.coupons-valid {
+	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #AAAAAA;
+}
+.coupons-range {
+	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #222222;
+}
+.coupons-right {
+	margin-top: 58rpx;
+	margin-left:50rpx;
+}
+.coupons-dayrules {
+	font-size: 20rpx;
+	color: #AAAAAA;
+}
+.coupons-getbtn {
+	margin-top:22rpx;
+	height: 44rpx;
+	width: 136rpx;
+	text-align: center;
+	line-height: 44rpx;
+	background: #FF6457;
+	border-radius: 22rpx;
+	font-size: 24rpx;
+	color: #FFFFFF;
+}
+.ribbon {
+	width: 160rpx;
+	height: 30rpx;
+	background: #FF6457;
+	position: absolute;
+	right: -44rpx;
+	top: 20rpx;
+	-webkit-transform: rotateZ(45deg);
+	        transform: rotateZ(45deg);
+	text-align: center;
+	color: #fff;
+	font-size: 20rpx;
 }
 

unpackage/dist/dev/mp-weixin/static/js/config.js

@@ -7,9 +7,9 @@ const config = {};
 config.url = {
 	// API请求基础URL
 	// request : 'https://charge.hub.zswlgz.com/',
-	request : 'http://192.168.1.36:80/',
+	// request : 'http://192.168.1.36:80/',
 	// request : 'http://120.78.228.211:8866/',
-	// request : 'https://charge.dev.hub.zswlgz.com/',
+	request : 'https://charge.dev.hub.zswlgz.com/',
 	// 上传地址
 	upload : 'http://127.0.0.1:3000/upload/',
 	// 下载地址