123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334 |
- <!-- 选择服务页面 -->
- <template>
- <view class="select_service">
- <view class="order_goods">
- <view class="goods_list">
- <view class="goods_pre" @click="goProductDetail(orderProduct.productId,orderProduct.goodsId)">
- <view class="goods_image">
- <image :src="orderProduct.productImage" mode="aspectFit"></image>
- </view>
- <view class="goods_des">
- <view class="goods_name">{{orderProduct.goodsName}}</view>
- <view class="goods_spec" v-if="orderProduct.specValues">{{orderProduct.specValues}}</view>
- </view>
- </view>
- </view>
- </view>
- <!-- 服务方式 start -->
- <view class="uni-list service_list">
- <radio-group @change="radioChange">
- <label class="service_pre" v-for="(item,index) in servicelList" :key="index" @click="goApplyRefund(item.value)">
- <view class="service_pre_left">
- <view class="service_des">
- <view class="service_des_top">
- <text class="service_pre_tip"></text>
- <text class="service_pre_title">{{item.title}}</text>
- </view>
- <view class="servece_pre_content">{{item.content}}</view>
- </view>
- </view>
- <image :src="imgUrl+'goods_detail/right_down.png'" mode="" class="service_right"></image>
- </label>
- </radio-group>
- </view>
- <!-- 服务方式 end -->
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- import recommendGoods from "@/components/recommend-goods.vue";
- import uniPopup from '@/components/uni-popup/uni-popup.vue';
- import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
- import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
- let startY = 0,
- moveY = 0,
- pageAtTop = true;
- export default {
- components: {
- recommendGoods,
- uniPopup,
- uniPopupMessage,
- uniPopupDialog
- },
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- coverTransform: 'translateY(0px)',
- coverTransition: '0s',
- moving: false,
- afsSn:'', //退款单号
- allData:{}, //订单详细信息
- orderProduct:{}, //订单商品列表
- current:'0', //选择服务当前点击的是第0项
- servicelList:[
- {
- title:'仅退款(无需退货)',
- content:'没收到货,或与卖家协商同意不用退货仅退款',
- value:'0'
- },{
- title:'退货退款',
- content:'已收到货,需要退还收到的货物',
- value:'1'
- }
- // ,{
- // title:'换货',
- // content:'商品存在质量问题,联系卖家协商换货',
- // value:'2'
- // },
- ],
- orderSn:'', //订单号
- orderProductId:'', //订单中商品列表中商品的id
- orderOrder:{}, //订单信息
- orderListLen:1, //同订单,订单length
- }
- },
- async onLoad(option) {
- //退款单号
- this.afsSn = option.afsSn;
- this.orderSn = option.orderSn;
- this.orderProductId = option.orderProductId;
- this.initData();
- this.getOrderDetail();
- this.orderListLen = option.orderListLen;
- },
- // #ifndef MP
- onNavigationBarButtonTap(e) {
- const index = e.index;
- if (index === 0) {
- this.navTo('/pages/set/set');
- } else if (index === 1) {
- // #ifdef APP-PLUS
- const pages = getCurrentPages();
- const page = pages[pages.length - 1];
- const currentWebview = page.$getAppWebview();
- currentWebview.hideTitleNViewButtonRedDot({
- index
- });
- // #endif
- uni.navigateTo({
- url: '/pages/notice/notice'
- })
- }
- },
- // #endif
- computed: {
- ...mapState(['hasLogin', 'userInfo', 'userCenterData'])
- },
- methods: {
- initData() {
- },
- /**
- * 统一跳转接口,拦截未登录路由
- * navigator标签现在默认没有转场动画,所以用view
- */
- navTo(url) {
- if (!this.hasLogin) {
- url = '/pages/public/login';
- }
- uni.navigateTo({
- url
- })
- },
- /**
- * 会员卡下拉和回弹
- * 1.关闭bounce避免ios端下拉冲突
- * 2.由于touchmove事件的缺陷(以前做小程序就遇到,比如20跳到40,h5反而好很多),下拉的时候会有掉帧的感觉
- * transition设置0.1秒延迟,让css来过渡这段空窗期
- * 3.回弹效果可修改曲线值来调整效果,推荐一个好用的bezier生成工具 http://cubic-bezier.com/
- */
- coverTouchstart(e) {
- if (pageAtTop === false) {
- return;
- }
- this.coverTransition = 'transform .1s linear';
- startY = e.touches[0].clientY;
- },
- coverTouchmove(e) {
- moveY = e.touches[0].clientY;
- let moveDistance = moveY - startY;
- if (moveDistance < 0) {
- this.moving = false;
- return;
- }
- this.moving = true;
- if (moveDistance >= 80 && moveDistance < 100) {
- moveDistance = 80;
- }
- if (moveDistance > 0 && moveDistance <= 80) {
- this.coverTransform = `translateY(${moveDistance}px)`;
- }
- },
- coverTouchend() {
- if (this.moving === false) {
- return;
- }
- this.moving = false;
- this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
- this.coverTransform = 'translateY(0px)';
- },
- //获取订单详情信息 申请退换货
- getOrderDetail(){
- let that = this;
- let param = {};
- param.url = 'v3/business/front/after/sale/apply/applyInfo';
- param.method = 'GET';
- param.data = {};
- param.data.orderSn = that.orderSn;
- param.data.orderProductId = that.orderProductId;
- that.$request(param).then(res => {
- if (res.state == 200) {
- let result = res.data;
- that.orderProduct = result.orderProduct;
- that.orderOrder = result.order;
- that.allData = result || {};
- that.loadFlag = true;
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- //去申请退款页面
- goApplyRefund(value){
- let that = this;
- this.servicelList.map((item,index)=>{
- if(item.value == value){
- this.current = index;
- }
- })
- uni.navigateTo({
- url:'/pages/order/applyRefund?serviceType='+that.current +'&orderProductId=' + that.orderProduct.orderProductId +'&afsSn=' + that.orderProduct.afsSn + '&sourceType=selecTService' + '&orderListLen=' + that.orderListLen
- })
- },
- //去商品详情页
- goProductDetail(productId,goodsId){
- uni.navigateTo({
- url: '/pages/product/detail?productId=' + productId + '&goodsId='+goodsId
- })
- }
- }
- }
- </script>
- <style lang='scss'>
- page {
- background: $bg-color-split;
- }
- .select_service{
- width: 750rpx;
- margin: 0 auto;
- background: #F5F5F5;
- .order_goods{
- border-top: 20rpx solid #F5F5F5;
- background-color: #FFFFFF;
- .goods_list{
- padding: 20rpx 0;
- .goods_pre{
- display: flex;
- padding: 0 20rpx;
- box-sizing: border-box;
- .goods_image{
- width: 200rpx;
- height: 200rpx;
- background: #F3F3F3;
- border-radius: 14px;
- image{
- width: 200rpx;
- height: 200rpx;
- border-radius: 14rpx;
- }
- }
- .goods_des{
- margin-left: 25rpx;
- padding-top: 8rpx;
- box-sizing: border-box;
- .goods_name{
- width: 340rpx;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #343434;
- line-height: 39rpx;
- text-overflow: -o-ellipsis-lastline;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .goods_spec{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 400;
- color: #949494;
- line-height: 30rpx;
- margin-top: 20rpx;
- }
- }
- }
- }
- }
- .service_list{
- background-color: #FFFFFF;
- border-top: 20rpx solid #F5F5F5;
- .service_pre{
- height: 120rpx;
- display: flex;
- align-items: center;
- margin-left: 20rpx;
- box-sizing: border-box;
- justify-content: space-between;
- border-bottom: 1rpx solid #EEEEEE;
- .service_pre_left{
- display: flex;
- align-items: center;
- .service_des{
- display: flex;
- flex-direction: column;
- .service_des_top{
- display: flex;
- align-items: center;
- .service_pre_tip{
- background: #FF0000;
- width: 10rpx;
- border-radius: 50%;
- height: 10rpx;
- margin-right: 20rpx;
- }
- .service_pre_title{
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #343434;
- line-height: 45rpx;
- }
- }
- .servece_pre_content{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #9A9A9A;
- line-height: 45rpx;
- padding-left: 30rpx;
- }
- }
- }
- .service_right{
- width: 46rpx;
- height: 46rpx;
- }
- }
- }
- }
- </style>
|