小程序--退货退款

<import src="../../../../template/baseNavigationBar.wxml"/>
<template is="navigationBar" data="{{...item}}"></template>
<view class='title'>
    <view class='goodsImg'>
        <image src='../../../../images/5.png' mode='aspectFill'></image>
    </view>
    <view class='goodsTitle'>你好啊</view>
</view>
<van-cell-group style='margin-top: 20rpx'>
    <van-field
            value="{{ message }}"
            label="退款原因"
            type="textarea"
            autosize
            border="{{ false }}"

            bind:focus='bindRefund'
    />
</van-cell-group>
<van-popup
        show="{{ show }}"
        position="bottom "
        overlay="{{ true }}"
        bind:close="onClose"
>
    <van-picker
            show-toolbar
            title="退款原因"
            columns="{{ columns }}"
            bind:cancel="onCancel"
            bind:confirm="onConfirm"
    />
</van-popup>

<van-cell-group style='margin-top: 20rpx'>
    <van-field
            value="{{ message }}"
            label="退款金额 :"
            type="textarea"
            placeholder='$100'
            autosize
            border="{{ false }}"
            error='true'
            readonly
    />
</van-cell-group>
<van-cell-group style='margin-top: 20rpx'>
    <van-field
            value="{{ message }}"
            label="退款说明 :"
            type="textarea"
            placeholder='选填'
            autosize
            border="{{ false }}"
    />
</van-cell-group>

<view class='upLoad'>
    <view class='upRefunds'>长传凭证</view>
    <view>
        <view class='imgItem' bindtap='bindUpImg'>
            <text class='iconfont icon-iconfontshumajiadian'></text>
            <view class='refundsText'>上传凭证</view>
            <view class='refundsText'>最多6张</view>
        </view>
    </view>
</view>


<view class='submit'>提交</view>
/* pages/User/pages/applyRefund/applyRefund.wxss */
@import "../../../../wxss/iconfont.wxss";
@import "../../../../wxss/base.wxss";
@import "../../../../wxss/baseNavigationBar.wxss";
page {
  background: #f3f3f3;
}
.title {

  display: flex;
  padding: 20rpx;
  background: white;
  margin-top: 160rpx;
}
.goodsImg {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}
.goodsImg image {
  width: 100%;
  height: 100%;
}
.goodsTitle {
  flex-shrink: 0;
}

.van-cell {
  margin-top: 20rpx;
}
.RefundList {
  background: white;
  padding:0 20rpx;
}
.RefundItem {
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f3f3f3;
}
.upLoad {
  margin-top: 20rpx;
  background: white;
  padding: 20rpx 30rpx;
}
.imgItem {
  width: 160rpx;
  height: 160rpx;
  margin: 10rpx 10rpx 10rpx 0;
  border: 1px dashed #999
}
.icon-iconfontshumajiadian {
      display: block;
    font-size: 48rpx;
    color: #999;
    text-align: center;
    margin-top: 8rpx;
}
.refundsText {
    text-align: center;
    color: #999;
    font-size: 24rpx;
    line-height: 1.6;
}
.submit {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: #890101;
  height: 80rpx;
  line-height: 80rpx;
  color: white;
  font-size: 32rpx;
}
// pages/User/pages/applyRefund/applyRefund.js
const app = getApp();
var MBC = require("../../../../core/core.js");
var api = require("../../../../config/api.config.js");
// es5
const Toast = require('../../../../components/VantWeapp/lib/toast/toast');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    item: {
      iconfontBack: "icon-arrowleft",
      navigationBarTitle: "申请退款"
    },
      show: false,
    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  },
  // 下拉框确认
  onConfirm(event) {
    console.log(event.detail)
  
  },
  // 下拉框取消
  onCancel() {
    Toast('取消');
  },
// 隐藏下拉框
  onClose() {
    this.setData({ show: false });
  },
  // 显示下拉框
  bindRefund:function(evnet){
    this.setData({
      show: true,
    })
  },
  // 删除照片
  bindUpImg:function(event){
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页