通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/order/fill-tracking-no/api.js

@@ -0,0 +1,71 @@
+import { mockIp, mockReqId } from '../../../utils/mock';
+
+export function create() {
+  const _resq = {
+    data: null,
+    code: 'Success',
+    msg: null,
+    requestId: mockReqId(),
+    clientIp: mockIp(),
+    rt: 79,
+    success: true,
+  };
+  return Promise.resolve(_resq);
+}
+
+export function update() {
+  const _resq = {
+    data: null,
+    code: 'Success',
+    msg: null,
+    requestId: mockReqId(),
+    clientIp: mockIp(),
+    rt: 79,
+    success: true,
+  };
+  return Promise.resolve(_resq);
+}
+
+export function getDeliverCompanyList() {
+  const _resq = {
+    data: [
+      {
+        name: '中通快递',
+        code: '0001',
+      },
+      {
+        name: '申通快递',
+        code: '0002',
+      },
+      {
+        name: '圆通快递',
+        code: '0003',
+      },
+      {
+        name: '顺丰快递',
+        code: '0004',
+      },
+      {
+        name: '百世快递',
+        code: '0005',
+      },
+      {
+        name: '韵达快递',
+        code: '0006',
+      },
+      {
+        name: '邮政快递',
+        code: '0007',
+      },
+      {
+        name: '丰网快递',
+        code: '0008',
+      },
+      {
+        name: '顺丰直邮',
+        code: '0009',
+      },
+    ],
+  };
+  return Promise.resolve(_resq);
+}

mini-program/pages/order/fill-tracking-no/index.js

@@ -0,0 +1,190 @@
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import Toast from 'tdesign-miniprogram/toast/index';
+import reasonSheet from '../components/reason-sheet/reasonSheet';
+import { getDeliverCompanyList, create, update } from './api';
+
+Page({
+  deliveryCompanyList: [],
+
+  data: {
+    trackingNo: '',
+    remark: '',
+    deliveryCompany: null,
+    submitActived: false,
+    submitting: false,
+  },
+  onLoad(query) {
+    const {
+      rightsNo = '',
+      logisticsNo = '',
+      logisticsCompanyName = '',
+      logisticsCompanyCode = '',
+      remark = '',
+    } = query;
+
+    if (!rightsNo) {
+      Dialog.confirm({
+        title: '请选择售后单？',
+        content: '',
+        confirmBtn: '确认',
+      }).then(() => {
+        wx.navigateBack({ backRefresh: true });
+      });
+    }
+    this.rightsNo = rightsNo;
+    if (logisticsNo) {
+      wx.setNavigationBarTitle({
+        title: '修改运单号',
+        fail() {},
+      });
+      this.isChange = true;
+      this.setData({
+        deliveryCompany: {
+          name: logisticsCompanyName,
+          code: logisticsCompanyCode,
+        },
+        trackingNo: logisticsNo,
+        remark,
+        submitActived: true,
+      });
+    }
+    this.setWatcher('trackingNo', this.checkParams.bind(this));
+    this.setWatcher('deliveryCompany', this.checkParams.bind(this));
+  },
+
+  setWatcher(key, callback) {
+    let lastData = this.data;
+    const keys = key.split('.');
+    keys.slice(0, -1).forEach((k) => {
+      lastData = lastData[k];
+    });
+    const lastKey = keys[keys.length - 1];
+    this.observe(lastData, lastKey, callback);
+  },
+
+  observe(data, k, callback) {
+    let val = data[k];
+    Object.defineProperty(data, k, {
+      configurable: true,
+      enumerable: true,
+      set: (value) => {
+        val = value;
+        callback();
+      },
+      get: () => {
+        return val;
+      },
+    });
+  },
+
+  getDeliveryCompanyList() {
+    if (this.deliveryCompanyList.length > 0) {
+      return Promise.resolve(this.deliveryCompanyList);
+    }
+    return getDeliverCompanyList().then((res) => {
+      this.deliveryCompanyList = res.data || [];
+      return this.deliveryCompanyList;
+    });
+  },
+
+  onInput(e) {
+    const { key } = e.currentTarget.dataset;
+    const { value } = e.detail;
+    this.setData({ [key]: value });
+  },
+
+  onCompanyTap() {
+    this.getDeliveryCompanyList().then((deliveryCompanyList) => {
+      reasonSheet({
+        show: true,
+        title: '选择物流公司',
+        options: deliveryCompanyList.map((company) => ({
+          title: company.name,
+          checked: this.data.deliveryCompany
+            ? company.code === this.data.deliveryCompany.code
+            : false,
+        })),
+        showConfirmButton: true,
+        showCancelButton: true,
+        emptyTip: '请选择物流公司',
+      }).then((indexes) => {
+        this.setData({
+          deliveryCompany: deliveryCompanyList[indexes[0]],
+        });
+      });
+    });
+  },
+
+  checkParams() {
+    const res = { errMsg: '', require: false };
+
+    if (!this.data.trackingNo) {
+      res.errMsg = '请填写运单号';
+      res.require = true;
+    } else if (!this.data.deliveryCompany) {
+      res.errMsg = '请选择物流公司';
+      res.require = true;
+    }
+    this.setData({ submitActived: !res.require });
+    return res;
+  },
+
+  onSubmit() {
+    const checkRes = this.checkParams();
+    if (checkRes.errMsg) {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: checkRes.errMsg,
+        icon: '',
+      });
+      return;
+    }
+
+    const {
+      trackingNo,
+      remark,
+      deliveryCompany: { code, name },
+    } = this.data;
+
+    const params = {
+      rightsNo: this.rightsNo,
+      logisticsCompanyCode: code,
+      logisticsCompanyName: name,
+      logisticsNo: trackingNo,
+      remark,
+    };
+    const api = this.isChange ? create : update;
+    this.setData({ submitting: true });
+    api(params)
+      .then(() => {
+        this.setData({ submitting: false });
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '保存成功',
+          icon: '',
+        });
+        setTimeout(() => wx.navigateBack({ backRefresh: true }), 1000);
+      })
+      .catch(() => {
+        this.setData({ submitting: false });
+      });
+  },
+
+  onScanTap() {
+    wx.scanCode({
+      scanType: ['barCode'],
+      success: (res) => {
+        Toast({
+          context: this,
+          selector: '#t-toast',
+          message: '扫码成功',
+          icon: '',
+        });
+        this.setData({ trackingNo: res.result });
+      },
+      fail: () => {},
+    });
+  },
+});

mini-program/pages/order/fill-tracking-no/index.json

@@ -0,0 +1,14 @@
+{
+  "navigationBarTitleText": "填写运单号",
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-textarea": "tdesign-miniprogram/textarea/textarea",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-button": "tdesign-miniprogram/button/button",
+    "ui-reason-sheet": "../components/reason-sheet/index"
+  }
+}

mini-program/pages/order/fill-tracking-no/index.wxml

@@ -0,0 +1,51 @@
+<view class="fill-tracking-no">
+  <view class="notice-bar">请填写正确的退货包裹运单信息，以免影响退款进度</view>
+  <view class="fill-tracking-no__form">
+    <t-cell-group>
+      <t-cell title="运单号" t-class-title="t-cell-title-width">
+        <t-input
+          slot="note"
+          borderless
+          t-class="t-cell__value"
+          type="text"
+          value="{{trackingNo}}"
+          maxlength="30"
+          placeholder="请输入物流单号"
+          bind:change="onInput"
+          data-key="trackingNo"
+        />
+
+        <t-icon slot="right-icon" name="scan" t-class="icon-scan" bindtap="onScanTap" />
+      </t-cell>
+      <t-cell
+        t-class-title="t-cell-title-width"
+        t-class-note="{{deliveryCompany && deliveryCompany.name ? 't-cell__value' : 't-cell__placeholder'}}"
+        title="物流公司"
+        note="{{deliveryCompany && deliveryCompany.name || '请选择物流公司'}}"
+        arrow
+        bindtap="onCompanyTap"
+      />
+    </t-cell-group>
+    <view class="textarea-wrapper">
+      <text>备注信息</text>
+    </view>
+    <t-textarea
+      t-class="t-textarea-wrapper"
+      type="text"
+      value="{{remark}}"
+      maxlength="140"
+      autosize
+      placeholder="选填项，如有多个包裹寄回，请注明其运单信息"
+      bind:change="onInput"
+      data-key="remark"
+    />
+  </view>
+  <view class="fill-tracking-no__button-bar">
+    <t-button t-class="btn {{ submitActived ? 'confirmBtn' : 'disabled' }}" loading="{{submitting}}" bindtap="onSubmit">
+      保存
+    </t-button>
+  </view>
+</view>
+<ui-reason-sheet id="wr-reason-sheet" />
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

mini-program/pages/order/fill-tracking-no/index.wxss

@@ -0,0 +1,103 @@
+@import '../../../style/theme.wxss';
+
+:host {
+  background-color: #f5f5f5;
+}
+
+.notice-bar {
+  padding: 24rpx 30rpx;
+  text-align: center;
+  font-size: 26rpx;
+  color: #e17349;
+  background: #fefcef;
+}
+
+.fill-tracking-no__form {
+  margin-top: 20rpx;
+}
+
+.fill-tracking-no__form .t-cell__note {
+  justify-content: flex-start;
+}
+
+.fill-tracking-no__form .t-cell__value {
+  color: #333 !important;
+  font-size: 30rpx;
+  text-align: left;
+  padding: 0;
+}
+
+.fill-tracking-no__form .t-cell__value::after {
+  border: none !important;
+}
+
+.fill-tracking-no__form .t-cell__value .t-textarea__wrapper {
+  padding: 0;
+}
+
+.fill-tracking-no__form .t-input__control,
+.fill-tracking-no__form .t-textarea__placeholder,
+.fill-tracking-no__form .t-cell__placeholder {
+  font-size: 30rpx !important;
+}
+
+.fill-tracking-no__form .t-textarea__placeholder,
+.fill-tracking-no__form .t-cell__placeholder {
+  color: #bbbbbb !important;
+}
+
+.t-textarea__note {
+  width: 100%;
+}
+
+.fill-tracking-no__button-bar {
+  margin: 38rpx 30rpx 0;
+}
+
+.fill-tracking-no__button-bar .btn {
+  background-color: transparent;
+  font-size: 32rpx;
+  width: 100%;
+  border-radius: 48rpx;
+}
+
+.fill-tracking-no__button-bar .btn:first-child {
+  margin-bottom: 20rpx;
+}
+
+.fill-tracking-no__button-bar .btn.confirmBtn {
+  background: #fa4126;
+  color: #fff;
+}
+
+.fill-tracking-no__button-bar .btn.disabled {
+  background-color: #c6c6c6;
+  color: #fff;
+}
+
+.t-cell-title-width {
+  width: 160rpx;
+  flex: none !important;
+}
+.textarea-wrapper {
+  background: #fff;
+  display: flex;
+  align-items: flex-start;
+  padding: 24rpx 32rpx 0 32rpx;
+}
+.t-textarea-wrapper {
+  box-sizing: border-box;
+}
+
+.fill-tracking-no__form .t-input__wrapper {
+  margin: 0 !important;
+}
+
+.fill-tracking-no__form {
+  --td-input-vertical-padding: 0;
+}
+
+.t-button {
+  --td-button-default-color: #aeb3b7;
+  --td-button-primary-text-color: #fa4126;
+}