Browse Source

抖音标识

kk.shi 3 years ago
parent
commit
e6317c89de

+ 4 - 1
components/couponWrap/index.wxml

@@ -49,9 +49,12 @@
            </view>
 
            <view class="coupon-detail">
-                <view class="fold-title" data-index= "{{index}}" catchtap="exFoldPanel">使用规则 
+                <view class="flex-row">
+                  <view class="fold-title" data-index= "{{index}}" catchtap="exFoldPanel">使用规则 
                     <image wx:if="{{!flodMap[index]}}" class="fold-btn" src="../../images/welfareMall/down-ico.png" />
                     <image wx:else class="fold-btn" src="../../images/welfareMall/up-ico.png" />
+                  </view>
+                  <image wx:if="{{nums.formatDiscount(item) == 0}}" class="tiktok-img" src="../../images/welfareMall/tiktok-img.png"></image>
                 </view>
                 <block wx:if="{{flodMap[index]}}">
                    <view class="coupon-detail-line" style="margin-top: 22rpx;">

+ 14 - 0
components/couponWrap/index.wxss

@@ -151,6 +151,20 @@
 .coupon-detail {
     padding: 20rpx 50rpx;
 }
+
+/* 水平方向布局 **/
+.flex-row{
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tiktok-img{
+  width: 42rpx;
+  height: 42rpx;
+}
+
 .fold-title {
     font-size: 24rpx;
     color: #444;

BIN
images/welfareMall/tiktok-img.png


+ 66 - 0
pages/welfareMall/exchangeCode/exchangeCode.js

@@ -0,0 +1,66 @@
+// pages/welfareMall/exchangeCode/exchangeCode.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

+ 4 - 0
pages/welfareMall/exchangeCode/exchangeCode.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "兑换券码"
+}

+ 52 - 0
pages/welfareMall/exchangeCode/exchangeCode.wxml

@@ -0,0 +1,52 @@
+<!--pages/welfareMall/exchangeCode/exchangeCode.wxml-->
+<view class="exchangeCode-query">请输入兑换码</view>
+<view class="exchangeCode-confirm">确认</view>
+<view class="exchangeCode-process">
+  <view class="exchangeCode-process-style">
+    <view class="exchangeCode-process-tittle">抖音兑换码获取流程</view>
+    <view class="process-style flex-row">
+      <view class="exchangeCode-process-speed">
+        <view class="exchangeCode-process-img">
+          <image class="exchangeCode-img-style" src="../../../images/welfareMall/exchangeCode-menu.png"></image>
+          <view class="exchangeCode-process-num">1</view>
+        </view>
+        <view class="exchangeCode-process-text">点击抖音"我" 选择右上角菜单</view>
+      </view>
+      <view class="exchangeCode-process-speed">
+        <view class="exchangeCode-process-img">
+          <image class="exchangeCode-img-style" src="../../../images/welfareMall/exchangeCode-menu.png"></image>
+          <view class="exchangeCode-process-num">2</view>
+        </view>
+        <view class="exchangeCode-process-text" style="margin-top: 34rpx;">选择我的订单</view>
+      </view>
+      <view class="exchangeCode-process-speed" style="margin-top: 32rpx;">
+        <view class="exchangeCode-process-img">
+          <image class="exchangeCode-img-style" src="../../../images/welfareMall/exchangeCode-menu.png"></image>
+          <view class="exchangeCode-process-num">3</view>
+        </view>
+        <view class="exchangeCode-process-text">选择我的订单</view>
+      </view>
+      <view class="exchangeCode-process-speed" style="margin-top: 32rpx;">
+        <view class="exchangeCode-process-img">
+          <image class="exchangeCode-img-style" src="../../../images/welfareMall/exchangeCode-menu.png"></image>
+          <view class="exchangeCode-process-num">4</view>
+        </view>
+        <view class="exchangeCode-process-text" style="margin-top: 22rpx;">点击去使用</view>
+      </view>
+      <view class="exchangeCode-process-speed" style="margin-top: 54rpx;">
+        <view class="exchangeCode-process-img">
+          <image class="exchangeCode-img-style" src="../../../images/welfareMall/exchangeCode-menu.png"></image>
+          <view class="exchangeCode-process-num">5</view>
+        </view>
+        <view class="exchangeCode-process-text" style="margin-top: 22rpx;">点击查看券码</view>
+      </view>
+      <view class="exchangeCode-process-speed" style="margin-top: 54rpx;">
+        <view class="exchangeCode-process-img">
+          <image class="exchangeCode-img-style" src="../../../images/welfareMall/exchangeCode-menu.png"></image>
+          <view class="exchangeCode-process-num">6</view>
+        </view>
+        <view class="exchangeCode-process-text">复制券码</view>
+      </view>
+    </view>
+  </view>
+</view>

+ 122 - 0
pages/welfareMall/exchangeCode/exchangeCode.wxss

@@ -0,0 +1,122 @@
+/* pages/welfareMall/exchangeCode/exchangeCode.wxss */
+page{
+  display:flex;
+  flex-flow: column nowrap;
+  justify-content: left;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+/* 垂直方向布局,水平居中 **/
+.flex-column{
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: left;
+}
+
+/* 水平方向布局,垂直居中 **/
+.flex-row{
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.exchangeCode-query{
+  width: 686rpx;
+  height: 80rpx;
+  background: #f3f3f3;
+  border-radius: 40rpx;
+  text-align: center;
+  line-height: 80rpx;
+  font-size: 28rpx;
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  font-weight: 400;
+  color: #b8b8b8;
+  margin-top: 104rpx;
+}
+
+.exchangeCode-confirm{
+  width: 684rpx;
+  height: 80rpx;
+  background: #b9d25d;
+  border-radius: 40rpx;
+  text-align: center;
+  line-height: 80rpx;
+  font-size: 28rpx;
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  font-weight: 400;
+  color: #ffffff;
+  margin-top: 50rpx;
+  margin-bottom: 46rpx;
+}
+
+.exchangeCode-process{
+  width: 684rpx;
+  height: 1052rpx;
+  background: #f5f5f5;
+  border: 2rpx solid #b9d25d;
+  border-radius: 40rpx;
+  margin-bottom: 54rpx;
+}
+
+.exchangeCode-process-style{
+  margin: 0 94rpx 0;
+}
+
+.exchangeCode-process-img{
+  width: 180rpx;
+  height: 180rpx;
+}
+
+.exchangeCode-img-style{
+  position: absolute;
+  width: 180rpx;
+  height: 180rpx;
+}
+
+.exchangeCode-process-num{
+  position: relative;
+  width: 32rpx;
+  height: 32rpx;
+  background: #b9d25d;
+  border: 2rpx solid #b9d25d;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 32rpx;
+  font-size: 20rpx;
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  font-weight: 400;
+  color: #ffffff;
+  margin-top: 16rpx;
+  margin-left: 16rpx;
+}
+
+.exchangeCode-process-tittle{
+  font-size: 28rpx;
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  font-weight: 400;
+  text-align: center;
+  color: #b9d25d;
+  margin: 38rpx 0 52rpx;
+}
+
+.process-style{
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.exchangeCode-process-text{
+  margin-top: 24rpx;
+  font-size: 24rpx;
+  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+  font-weight: 400;
+  text-align: center;
+  color: #444444;
+}
+
+.exchangeCode-process-speed{
+  width: 180rpx;
+}