wxd / MShopWeApp

Commit a419f6159b280b5e0491d40ed2d8196d450b2492

Authored by 后端研发-苏泰源
1 parent 03a2439e

服务卡项订单详情

Inline Side-by-side
Showing 4 changed files with 219 additions and 0 deletions
packageA/pages/details_serviceCard/details_serviceCard.js 0 → 100644
  View file @a419f61
  1 +// packageA/pages/details_serviceCard/details_serviceCard.js
  2 +Page({
  3 +
  4 + /**
  5 + * 页面的初始数据
  6 + */
  7 + data: {
  8 +
  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 +})
0 \ No newline at end of file 67 \ No newline at end of file
packageA/pages/details_serviceCard/details_serviceCard.json 0 → 100644
  View file @a419f61
  1 +{
  2 + "navigationBarTitleText": "订单详情",
  3 + "usingComponents": {
  4 + "nodata": "/components/nodata/nodata",
  5 + "share_button": "/components/share/share"
  6 + },
  7 + "enablePullDownRefresh": false
  8 +}
0 \ No newline at end of file 9 \ No newline at end of file
packageA/pages/details_serviceCard/details_serviceCard.wxml 0 → 100644
  View file @a419f61
  1 +<view class="main">
  2 + <view class="bg-white pdh20 bdr12">
  3 + <!-- 门店名称栏 -->
  4 + <view class="flex jc_sb ai_c pdv20">
  5 + <view class="ellipsis-1 pdr40 fs30"><text class="iconfont icon-shop c-red pdr10"></text>门店名称名称名称名称名称名称名称名称名称名称</view>
  6 + <text class="c-red shrink0 fs26">待评价</text>
  7 + </view>
  8 + <!-- 列表栏 -->
  9 + <view>
  10 + <view class="flex pdv20">
  11 + <view class="pic-box shrink0"><image class="img-block" src="../../images/wx2.png"></image></view>
  12 + <view class="pdl20 f1">
  13 + <view class="flex jc_sb ai_c">
  14 + <view class="title ellipsis-2 pdr40">我是商品标题</view>
  15 + <text class="rmb c-6">10</text>
  16 + </view>
  17 + <view class="flex jc_sb ai_c c-9 fs24">
  18 + <text>10个/蓝色</text>
  19 + <text>x1</text>
  20 + </view>
  21 + </view>
  22 + </view>
  23 + </view>
  24 + <!-- 统计栏 -->
  25 + <view class="t-r bdt pdv20">共2件商品，合计：<text class="rmb c-red bold fs30">21.00</text></view>
  26 + </view>
  27 + <view class="bg-white pdh20 mgt20 bdr12">
  28 + <!-- 订单信息栏 -->
  29 + <view class="pdv20">订单信息</view>
  30 + <view class="flex jc_sb pdb20 ai_c">
  31 + <view><text class="c-9">订单编号：</text>fwk20221252125222212 </view>
  32 + <text class="btn-copy">复制</text>
  33 + </view>
  34 + <view class="pdb20"><text class="c-9">下单时间：</text>2021-12-27 18:00:00</view>
  35 + <!-- 联系客服栏 -->
  36 + <view class="flex t-c bdt">
  37 + <view class="f1 pd20"><text class="iconfont icon-kefu c29f pdr20"></text>联系客服</view>
  38 + <view class="f1 pd20 separator"><text class="iconfont icon-tongbu c-orange pdr20"></text>卡项同步</view>
  39 + </view>
  40 + </view>
  41 + <!-- 底部按钮栏 -->
  42 + <view class="btn-bar t-r bg-white pd20">
  43 + <text class="btn btn-border">立即评价</text>
  44 + <text class="btn bg-red white mgl20">再来一单</text>
  45 + </view>
  46 +</view>
packageA/pages/details_serviceCard/details_serviceCard.wxss 0 → 100644
  View file @a419f61
  1 +page {
  2 + box-sizing: border-box;
  3 + padding: 20rpx 20rpx 0;
  4 + background-color: #f2f2f2;
  5 + font-size: 28rpx;
  6 +}
  7 +
  8 +.bdr12 {
  9 + border-radius: 12rpx;
  10 +}
  11 +
  12 +.w40 {
  13 + width: 40%;
  14 + box-sizing: border-box;
  15 +}
  16 +
  17 +.btn-border {
  18 + border: 2rpx solid #808080;
  19 +}
  20 +
  21 +.bg-red {
  22 + background-image: -webkit-linear-gradient(315deg,#f2140c,#f2270c 70%,#f24d0c);
  23 + background-image: linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c);
  24 +}
  25 +
  26 +.bg-orange {
  27 + background-image: -webkit-linear-gradient(315deg,#ffba0d,#ffc30d 69%,#ffcf0d);
  28 + background-image: linear-gradient(135deg,#ffba0d,#ffc30d 69%,#ffcf0d);
  29 +}
  30 +
  31 +.c-orange {
  32 + color: #ff9000;
  33 +}
  34 +
  35 +.main {
  36 + padding-bottom: 134rpx;
  37 +}
  38 +
  39 +.pic-box {
  40 + width: 130rpx;
  41 + height: 130rpx;
  42 + border-radius: 12rpx;
  43 + overflow: hidden;
  44 +}
  45 +
  46 +.rmb::before {
  47 + content: '￥';
  48 +}
  49 +
  50 +.title {
  51 + height: 88rpx;
  52 +}
  53 +
  54 +.separator {
  55 + position: relative;
  56 +}
  57 +
  58 +.separator::before {
  59 + content: '';
  60 + position: absolute;
  61 + width: 2rpx;
  62 + height: 30%;
  63 + background-color: #f8f8f8;
  64 + left: 0;
  65 + top: 0;
  66 + bottom: 0;
  67 + margin: auto;
  68 +}
  69 +
  70 +.btn-bar {
  71 + box-sizing: border-box;
  72 + position: fixed;
  73 + left: 0;
  74 + bottom: 0;
  75 + width: 100%;
  76 + font-size: 26rpx;
  77 + border-top: 2rpx solid #f2f2f2;
  78 +}
  79 +
  80 +.btn {
  81 + box-sizing: border-box;
  82 + display: inline-block;
  83 + height: 70rpx;
  84 + line-height: 70rpx;
  85 + padding: 0 40rpx;
  86 + border-radius: 100rpx;
  87 +}
  88 +
  89 +.btn-copy {
  90 + display: block;
  91 + color: #666;
  92 + font-size: 22rpx;
  93 + padding: 0 20rpx;
  94 + border-radius: 6rpx;
  95 + background-color: #f0f0f0;
  96 +}
  97 +
  98 +
  99 +