wxd / MShopWeApp

Browse Code »

Commit d50408395140301cb2c983763a908079f248f341

Authored by 后端研发-倪永富 2020-11-06 10:20:22 +0800

1 parent f077555a

充值有礼和详情页

Inline Side-by-side

Showing 8 changed files with 554 additions and 0 deletions

packageA/pages/chongzhi/chongzhi.js 0 → 100644

View file @d504083

	1	+// packageA//pages/chongzhi/chongzhi.js
	2	+Page({
	3	+
	4	+ /**
	5	+ * 页面的初始数据
	6	+ */
	7	+ data: {
	8	+ currentIndex: 0,
	9	+ },
	10	+
	11	+ /**
	12	+ * 生命周期函数--监听页面加载
	13	+ */
	14	+ onLoad: function (options) {
	15	+
	16	+ },
	17	+
	18	+ /**
	19	+ * 生命周期函数--监听页面初次渲染完成
	20	+ */
	21	+ onReady: function () {
	22	+
	23	+ },
	24	+
	25	+ /**
	26	+ * 生命周期函数--监听页面显示
	27	+ */
	28	+ onShow: function () {
	29	+
	30	+ },
	31	+
	32	+ /**
	33	+ * 生命周期函数--监听页面隐藏
	34	+ */
	35	+ onHide: function () {
	36	+
	37	+ },
	38	+
	39	+ /**
	40	+ * 生命周期函数--监听页面卸载
	41	+ */
	42	+ onUnload: function () {
	43	+
	44	+ },
	45	+
	46	+ /**
	47	+ * 页面相关事件处理函数--监听用户下拉动作
	48	+ */
	49	+ onPullDownRefresh: function () {
	50	+
	51	+ },
	52	+
	53	+ /**
	54	+ * 页面上拉触底事件的处理函数
	55	+ */
	56	+ onReachBottom: function () {
	57	+
	58	+ },
	59	+
	60	+ /**
	61	+ * 用户点击右上角分享
	62	+ */
	63	+ onShareAppMessage: function () {
	64	+
	65	+ },
	66	+
	67	+ onClickTab(e) {
	68	+ this.setData({
	69	+ currentIndex: e.target.dataset.index
	70	+ });
	71	+ },
	72	+})
0	73	\ No newline at end of file
...	...

packageA/pages/chongzhi/chongzhi.json 0 → 100644

View file @d504083

	1	+{
	2	+ "navigationBarTitleText": "充值有礼",
	3	+ "enablePullDownRefresh": false,
	4	+ "usingComponents": {
	5	+ "nodata": "/components/nodata/nodata"
	6	+ }
	7	+}
0	8	\ No newline at end of file
...	...

packageA/pages/chongzhi/chongzhi.wxml 0 → 100644

View file @d504083

	1	+<view class="container">
	2	+ <!-- 封面 -->
	3	+ <view class="banner-container"><image class="img-block"></image></view>
	4	+ <!-- 列表 -->
	5	+ <view>
	6	+ <!-- 标题 -->
	7	+ <view class="title flex" bindtap="onClickTab">
	8	+ <view class="t-item {{currentIndex == 0 ? 'active':''}}" data-index="0">待核销</view>
	9	+ <view class="t-item {{currentIndex == 1 ? 'active':''}}" data-index="1">已核销</view>
	10	+ </view>
	11	+ <!-- 内容 -->
	12	+ <view class="list">
	13	+
	14	+ <view class="l-item">
	15	+ <!-- 上 -->
	16	+ <view class="top flex">
	17	+ <!-- 左 -->
	18	+ <view class="left">
	19	+ <image class="img-block"></image>
	20	+ </view>
	21	+ <!-- 右 -->
	22	+ <view class="right">
	23	+ <view class="fs28 ellipsis-2 txt-justify">充值方案名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</view>
	24	+ <view>
	25	+ <view class="price fs24">零售价：<text>￥</text>100.00</view>
	26	+ <view class="date fs24">兑换截止日期：2020-09-17 17:00:00</view>
	27	+ </view>
	28	+ </view>
	29	+ </view>
	30	+ <!-- 下 -->
	31	+ <view class="bottom">
	32	+ <text class="btn">立即使用</text>
	33	+ </view>
	34	+ </view>
	35	+
	36	+
	37	+ <nodata nodataContainer="nodata">暂无数据</nodata>
	38	+ <view class="no-more t-c">- 已全部加载 -</view>
	39	+
	40	+
	41	+ </view>
	42	+ </view>
	43	+</view>
0	44	\ No newline at end of file
...	...

packageA/pages/chongzhi/chongzhi.wxss 0 → 100644

View file @d504083

	1	+/* packageA/pages/chongzhi/chongzhi.wxss */
	2	+@charset "utf-8";
	3	+
	4	+page {
	5	+ background-color: #f2f2f2;
	6	+}
	7	+
	8	+.banner-container {
	9	+ height: 400rpx;
	10	+}
	11	+
	12	+
	13	+.title {
	14	+ background-color: white;
	15	+ position: relative;
	16	+}
	17	+
	18	+.title::after {
	19	+ content: '';
	20	+ position: absolute;
	21	+ width: 2rpx;
	22	+ height: 50%;
	23	+ background-color: #f5f5f5;
	24	+ left: 0;
	25	+ right: 0;
	26	+ top: 0;
	27	+ bottom: 0;
	28	+ margin: auto;
	29	+}
	30	+
	31	+.t-item {
	32	+ width: 50%;
	33	+ text-align: center;
	34	+ line-height: 100rpx;
	35	+ font-size: 30rpx;
	36	+ position: relative;
	37	+}
	38	+
	39	+.t-item.active {
	40	+ color: #FE6867;
	41	+ font-weight: bold;
	42	+}
	43	+
	44	+.t-item.active::after {
	45	+ content: '';
	46	+ position: absolute;
	47	+ width: 10%;
	48	+ height: 4rpx;
	49	+ background-color: #FE6867;
	50	+ bottom: 0;
	51	+ left: 0;
	52	+ right: 0;
	53	+ margin: 0 auto;
	54	+}
	55	+
	56	+
	57	+.list {
	58	+ padding: 0 20rpx;
	59	+ overflow: hidden;
	60	+}
	61	+
	62	+.l-item {
	63	+ padding: 20rpx;
	64	+ background-color: white;
	65	+ border-radius: 16rpx;
	66	+ margin-top: 20rpx;
	67	+}
	68	+.img-block {
	69	+ display: block;
	70	+ width: 100%;
	71	+ height: 100%;
	72	+ background-color: gray;
	73	+}
	74	+
	75	+
	76	+.top {
	77	+ padding-bottom: 20rpx;
	78	+ border-bottom: 2rpx solid #f2f2f2;
	79	+}
	80	+.bottom {
	81	+ padding-top: 20rpx;
	82	+ text-align: right;
	83	+}
	84	+.left {
	85	+ width: 200rpx;
	86	+ height: 200rpx;
	87	+ flex-shrink: 0;
	88	+ padding-right: 20rpx;
	89	+}
	90	+.right {
	91	+ display: flex;
	92	+ flex-direction: column;
	93	+ justify-content: space-between;
	94	+}
	95	+
	96	+.price {
	97	+ text-decoration:line-through;
	98	+}
	99	+
	100	+
	101	+.date {
	102	+ padding-top: 10rpx;
	103	+ color: #FE6867;
	104	+}
	105	+
	106	+.btn {
	107	+ display: inline-block;
	108	+ background-color: #FE6867;
	109	+ color: white;
	110	+ padding: 20rpx 60rpx;
	111	+ font-size: 24rpx;
	112	+ border-radius: 8rpx;
	113	+}
	114	+
	115	+.nodata {
	116	+ text-align: center;
	117	+ background-color: #f2f2f2;
	118	+}
	119	+
	120	+.no-more {
	121	+ line-height: 3;
	122	+ color: #ccc;
	123	+ font-size: 26rpx;
	124	+}
0	125	\ No newline at end of file
...	...

packageA/pages/chongzhiDetails/chongzhiDetails.js 0 → 100644

View file @d504083

	1	+// packageA//pages/chongzhiDetails/chongzhiDetails.js
	2	+Page({
	3	+
	4	+ /**
	5	+ * 页面的初始数据
	6	+ */
	7	+ data: {
	8	+ showCode: false,
	9	+ },
	10	+
	11	+ /**
	12	+ * 生命周期函数--监听页面加载
	13	+ */
	14	+ onLoad: function (options) {
	15	+
	16	+ },
	17	+
	18	+ /**
	19	+ * 生命周期函数--监听页面初次渲染完成
	20	+ */
	21	+ onReady: function () {
	22	+
	23	+ },
	24	+
	25	+ /**
	26	+ * 生命周期函数--监听页面显示
	27	+ */
	28	+ onShow: function () {
	29	+
	30	+ },
	31	+
	32	+ /**
	33	+ * 生命周期函数--监听页面隐藏
	34	+ */
	35	+ onHide: function () {
	36	+
	37	+ },
	38	+
	39	+ /**
	40	+ * 生命周期函数--监听页面卸载
	41	+ */
	42	+ onUnload: function () {
	43	+
	44	+ },
	45	+
	46	+ /**
	47	+ * 页面相关事件处理函数--监听用户下拉动作
	48	+ */
	49	+ onPullDownRefresh: function () {
	50	+
	51	+ },
	52	+
	53	+ /**
	54	+ * 页面上拉触底事件的处理函数
	55	+ */
	56	+ onReachBottom: function () {
	57	+
	58	+ },
	59	+
	60	+ /**
	61	+ * 用户点击右上角分享
	62	+ */
	63	+ onShareAppMessage: function () {
	64	+
	65	+ },
	66	+
	67	+ onUse() {
	68	+ if(this.data.showCode) {
	69	+ this.setData({
	70	+ showCode: false
	71	+ });
	72	+ } else {
	73	+ this.setData({
	74	+ showCode: true
	75	+ });
	76	+ };
	77	+ }
	78	+})
0	79	\ No newline at end of file
...	...

packageA/pages/chongzhiDetails/chongzhiDetails.json 0 → 100644

View file @d504083

	1	+{
	2	+ "navigationBarTitleText": "充值有礼",
	3	+ "enablePullDownRefresh": false,
	4	+ "usingComponents": {}
	5	+}
0	6	\ No newline at end of file
...	...

packageA/pages/chongzhiDetails/chongzhiDetails.wxml 0 → 100644

View file @d504083

	1	+<!--packageA//pages/chongzhiDetails/chongzhiDetails.wxml-->
	2	+<view class="container">
	3	+ <view>
	4	+ <view class="banner-container"><image class="img-block" src="../../../images/banner.jpg"></image></view>
	5	+
	6	+
	7	+
	8	+ <view class="list">
	9	+ <view class="title-container">
	10	+ <view class="title">
	11	+ <view>节日专享</view>
	12	+ <view>你的美丽我来缔造</view>
	13	+ </view>
	14	+ </view>
	15	+
	16	+ <view class="list-item flex">
	17	+ <!-- 左 -->
	18	+ <view class="avatar"><image class="img-block"></image></view>
	19	+ <!-- 右 -->
	20	+ <view class="info">
	21	+ <view class="c-y">美甲</view>
	22	+ <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view>
	23	+ <view class="t-r fs24 c-y">数量：1</view>
	24	+ </view>
	25	+ </view>
	26	+
	27	+ <view class="list-item flex">
	28	+ <!-- 左 -->
	29	+ <view class="avatar"><image class="img-block"></image></view>
	30	+ <!-- 右 -->
	31	+ <view class="info">
	32	+ <view class="c-y">美甲</view>
	33	+ <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view>
	34	+ <view class="t-r fs24 c-y">数量：1</view>
	35	+ </view>
	36	+ </view>
	37	+
	38	+ <view class="list-item flex">
	39	+ <!-- 左 -->
	40	+ <view class="avatar"><image class="img-block"></image></view>
	41	+ <!-- 右 -->
	42	+ <view class="info">
	43	+ <view class="c-y">美甲</view>
	44	+ <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view>
	45	+ <view class="t-r fs24 c-y">数量：1</view>
	46	+ </view>
	47	+ </view>
	48	+
	49	+ <view class="list-item flex">
	50	+ <!-- 左 -->
	51	+ <view class="avatar"><image class="img-block"></image></view>
	52	+ <!-- 右 -->
	53	+ <view class="info">
	54	+ <view class="c-y fs30">美甲</view>
	55	+ <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view>
	56	+ <view class="t-r fs24 c-y">数量：1</view>
	57	+ </view>
	58	+ </view>
	59	+
	60	+ <view class="list-item flex">
	61	+ <!-- 左 -->
	62	+ <view class="avatar"><image class="img-block"></image></view>
	63	+ <!-- 右 -->
	64	+ <view class="info">
	65	+ <view class="c-y">美甲</view>
	66	+ <view class="fs28 pdv10 txt-justify">节日可免费享受专业美甲，可以享受1次。</view>
	67	+ <view class="t-r fs24 c-y">数量：1</view>
	68	+ </view>
	69	+ </view>
	70	+
	71	+ </view>
	72	+
	73	+ </view>
	74	+
	75	+ <view class="btn-container">
	76	+ <text class="btn" bindtap="onUse">立即使用</text>
	77	+ </view>
	78	+
	79	+ <view class="qr-container" wx:if="{{showCode}}" bindtap="onUse">
	80	+ <view class="qr">
	81	+ <view class="qr-img"><image class="img-block" src="../../../images/123456.jpg"></image></view>
	82	+ <view>核销码：123456456</view>
	83	+ </view>
	84	+ </view>
	85	+
	86	+</view>
...	...

packageA/pages/chongzhiDetails/chongzhiDetails.wxss 0 → 100644

View file @d504083

	1	+/* packageA//pages/chongzhiDetails/chongzhiDetails.wxss */
	2	+@charset "utf-8";
	3	+.c-y {
	4	+ color: #FFC736;
	5	+}
	6	+
	7	+.pdv10 {
	8	+ padding-top: 10rpx;
	9	+ padding-bottom: 10rpx;
	10	+}
	11	+
	12	+.txt-justify {
	13	+ text-align: justify;
	14	+}
	15	+
	16	+.container {
	17	+ background-color: white;
	18	+ padding-bottom: 120rpx;
	19	+}
	20	+
	21	+.banner-container {
	22	+ height: 600rpx;
	23	+
	24	+}
	25	+
	26	+.list {
	27	+ /* padding: 0 20rpx;
	28	+ background-color: skyblue; */
	29	+}
	30	+
	31	+.list-item {
	32	+ background-color: white;
	33	+ align-items: center;
	34	+ padding: 20rpx;
	35	+}
	36	+
	37	+
	38	+.title-container {
	39	+ padding:40rpx;
	40	+ background-color: white;
	41	+}
	42	+
	43	+.title {
	44	+ text-align: center;
	45	+ position: relative;
	46	+ color: #FFC736;
	47	+ font-weight: bold;
	48	+}
	49	+
	50	+.title::before,
	51	+.title::after {
	52	+ content: '';
	53	+ position: absolute;
	54	+ width: 20%;
	55	+ height: 2rpx;
	56	+ background-color: #FFC736;
	57	+ top: 0;
	58	+ bottom: 0;
	59	+ margin: auto 0;
	60	+}
	61	+
	62	+.title::before {
	63	+ left: 0;
	64	+}
	65	+
	66	+.title::after {
	67	+ right: 0;
	68	+}
	69	+
	70	+.avatar {
	71	+ width: 140rpx;
	72	+ height: 140rpx;
	73	+ border-radius: 50%;
	74	+ background-color: pink;
	75	+ flex-shrink: 0;
	76	+}
	77	+
	78	+.info {
	79	+ padding-left: 20rpx;
	80	+ display: flex;
	81	+ flex-direction: column;
	82	+ justify-content: center;
	83	+}
	84	+
	85	+
	86	+.btn-container {
	87	+ position: fixed;
	88	+ width: 100%;
	89	+ bottom: 0;
	90	+ text-align: center;
	91	+ padding: 20rpx 0;
	92	+ background-color: white;
	93	+ border-top: 2rpx solid #f2f2f2;
	94	+}
	95	+
	96	+.btn {
	97	+ display: inline-block;
	98	+ background-color: #FFC736;
	99	+ color: white;
	100	+ padding: 20rpx 160rpx;
	101	+ border-radius: 40rpx;
	102	+ font-size: 28rpx;
	103	+}
	104	+
	105	+.img-block {
	106	+ display: block;
	107	+ width: 100%;
	108	+ height: 100%;
	109	+}
	110	+
	111	+.qr-container {
	112	+ position: fixed;
	113	+ background-color: rgba(0,0,0,.4);
	114	+ top: 0;
	115	+ bottom: 0;
	116	+ left: 0;
	117	+ right: 0;
	118	+}
	119	+.qr {
	120	+ background-color: white;
	121	+ width: 80%;
	122	+ height: 600rpx;
	123	+ position: absolute;
	124	+ top: 0;
	125	+ bottom: 0;
	126	+ left: 0;
	127	+ right: 0;
	128	+ margin: auto;
	129	+ text-align: center;
	130	+ display: flex;
	131	+ flex-direction: column;
	132	+ justify-content: center;
	133	+}
	134	+
	135	+.qr-img {
	136	+ width: 500rpx;
	137	+ height: 500rpx;
	138	+ margin: 0 auto;
	139	+}
0	140	\ No newline at end of file
...	...