fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by 邱骏
Commit fee4dbf4b42c1b823527951f0674863954017446 1 parent 7e4c9950

未入驻调价

Inline Side-by-side
Showing 7 changed files with 393 additions and 5 deletions
1 // 调价首页路由 1 // 调价首页路由
  2 +// PriceChangeEntry 入驻商家调价
  3 +// PriceChangeNoEntry 非注入商家调价
2 export default [{ 4 export default [{
3 - path: '/xianyu/order/priceChange/:orderId(\\d+).html',  
4 - name: 'PriceChange',  
5 - component: () => import(/* webpackChunkName: "priceChange" */ './list') 5 + path: '/xianyu/order/priceChangeEntry/:orderId(\\d+).html',
  6 + name: 'PriceChangeEntry',
  7 + component: () => import(/* webpackChunkName: "priceChange" */ './entry-detail')
  8 +},{
  9 + path: '/xianyu/order/priceChangeNoEntry/:orderCode(\\d+).html',
  10 + name: 'PriceChangeNoEntry',
  11 + component: () => import(/* webpackChunkName: "priceChangeNoEntry" */ './no-entry-detail')
6 }]; 12 }];
  1 +<template>
  2 + <LayoutApp :title="title">
  3 + <div class="order-page">
  4 + <div class="title">出售</div>
  5 + <div class="product">
  6 + <ImgSize class="pro-img" :src="noEntryOrderInfo.goodsInfo.goodImg || ''" :width="200" :height="200"></ImgSize>
  7 + <div class="pro-info">
  8 + <p class="pro-name">{{noEntryOrderInfo.goodsInfo.colorName}}, {{noEntryOrderInfo.goodsInfo.sizeName}}码</p>
  9 + <p class="stock-info ufo-font">最低售价： ¥{{noEntryOrderInfo.goodsInfo.leastPrice}}</p>
  10 + </div>
  11 + </div>
  12 + <div class="input-container">
  13 + <InputUfo type="number" placeholder="定价需以9结尾.例如1999"
  14 + :maxlength="8" class="ipt-number" v-model="chgPrice">
  15 + <span class="prepend" slot="prepend">¥</span>
  16 + </InputUfo>
  17 + </div>
  18 + <div class="earnest-container">
  19 + <p>需支付保证金：</p><p class="earnest-money">{{earnestMoney}}</p>
  20 + <p class="desc">所有商品必须为国内现货，且承诺36小时内发货，交易成功后将自动退还保证金</p>
  21 + </div>
  22 + <div class="fee-container">
  23 + <div class="fee-line">
  24 + <p class="fee-title">平台费用:</p>
  25 + <p class="fee-price">{{platformFee}}</p>
  26 + </div>
  27 + <div class="fee-line">
  28 + <p class="fee-title">银行转账费(1%):</p>
  29 + <p class="fee-price">{{bankTransferFee}}</p>
  30 + </div>
  31 + <div class="fee-line total">
  32 + <p class="fee-title">实际收入:</p>
  33 + <p class="fee-price">{{income}}</p>
  34 + </div>
  35 + </div>
  36 + <div class="address-container">
  37 + <div class="icon-container">
  38 + <i class="iconfont iconaddress"></i>
  39 + </div>
  40 + <div class="address-info">
  41 + <p class="user-name">{{noEntryOrderInfo.userAddress.consignee}}</p>
  42 + <p class="user-address">
  43 + {{noEntryOrderInfo.userAddress.area}} {{noEntryOrderInfo.userAddress.address}}
  44 + </p>
  45 + <p class="user-phone">
  46 + {{noEntryOrderInfo.userAddress.mobile}}
  47 + </p>
  48 + </div>
  49 + </div>
  50 +
  51 + </div>
  52 + </LayoutApp>
  53 +</template>
  54 +
  55 +<script>
  56 +import LayoutApp from '../../../components/layout/layout-app';
  57 +import ScrollView from '../../../components/layout/scroll-view';
  58 +import ImgSize from '../../../components/img-size';
  59 +import {createNamespacedHelpers} from 'vuex';
  60 +import InputUfo from './components/input-ufo';
  61 +
  62 +const {mapState, mapActions, mapMutations} = createNamespacedHelpers('order/priceChange');
  63 +
  64 +export default {
  65 + name: 'noEntryDetail',
  66 + components: {InputUfo, ScrollView, LayoutApp, ImgSize},
  67 + data() {
  68 + return {
  69 + title: '',
  70 + platformFee: '-¥0',
  71 + bankTransferFee: '-¥0',
  72 + income: '¥0',
  73 + errorTip: '',
  74 + chgPrice: '',
  75 + calced: false,
  76 + earnestMoney: '¥0',
  77 + };
  78 + },
  79 + asyncData({store, router}) {
  80 + return store.dispatch('order/priceChange/fetchOrder', {orderCode: router.params.orderCode});
  81 + },
  82 + mounted() {
  83 + // this.fetchOrder({orderCode: this.$route.params.orderCode});
  84 + },
  85 + computed: {
  86 + ...mapState(['noEntryOrderInfo']),
  87 + },
  88 + methods: {
  89 + ...mapActions(['fetchOrder'])
  90 + }
  91 +};
  92 +</script>
  93 +
  94 +<style lang="scss" scoped>
  95 + .order-page {
  96 + -webkit-font-smoothing: antialiased;
  97 +
  98 + .title {
  99 + line-height: 82px;
  100 + font-size: 68px;
  101 + font-weight: bold;
  102 + padding: 2px 40px 0 40px;
  103 + }
  104 +
  105 + .product {
  106 + margin: 20px auto;
  107 + padding: 0 30px;
  108 + height: 200px;
  109 + display: flex;
  110 +
  111 + .pro-img {
  112 + width: 200px;
  113 + height: 200px;
  114 + overflow: hidden;
  115 + display: flex;
  116 + align-items: center;
  117 +
  118 + img {
  119 + width: 100%;
  120 + height: auto;
  121 + }
  122 + }
  123 +
  124 + .pro-info {
  125 + padding: 64px 40px 0 40px;
  126 + line-height: 32px;
  127 + overflow: hidden;
  128 +
  129 + .pro-name {
  130 + font-size: 24px;
  131 + color: #444;
  132 + overflow: hidden;
  133 + white-space: nowrap;
  134 + text-overflow: ellipsis;
  135 + }
  136 +
  137 + .stock-info {
  138 + position: relative;
  139 + color: #000;
  140 + margin-top: 24px;
  141 + font-size: 28px;
  142 + }
  143 +
  144 + .stock-text {
  145 + text-indent: 128px;
  146 + font-size: 28px;
  147 + font-weight: 600;
  148 + line-height: 44px;
  149 + }
  150 + }
  151 + }
  152 +
  153 + .input-container {
  154 + position: relative;
  155 + display: block;
  156 + width: 690px;
  157 + margin: 0 auto;
  158 + overflow: hidden;
  159 + }
  160 +
  161 + .ipt-number {
  162 + /deep/ .prepend {
  163 + width: 40px;
  164 + margin-left: 20px;
  165 + text-align: left;
  166 + }
  167 + }
  168 +
  169 + .earnest-container {
  170 + width: 690px;
  171 + margin: 10px auto;
  172 + border-bottom: 1px solid #f0f0f0;
  173 +
  174 + p {
  175 + display: inline-block;
  176 + font-size: 28px;
  177 + line-height: 60px;
  178 + }
  179 +
  180 + .earnest-money {
  181 + color: #c94353;
  182 + }
  183 +
  184 + .desc {
  185 + font-size: 24px;
  186 + color: #999;
  187 + line-height: 32px;
  188 + padding-bottom: 30px;
  189 + }
  190 + }
  191 +
  192 + .fee-container {
  193 + width: 690px;
  194 + margin: 40px auto 20px auto;
  195 + overflow: hidden;
  196 + border-bottom: 1px solid #f0f0f0;
  197 +
  198 + .fee-line {
  199 + margin-bottom: 20px;
  200 + color: #999;
  201 + font-size: 28px;
  202 + display: flex;
  203 +
  204 + .fee-title {
  205 + width: 50%;
  206 + }
  207 +
  208 + .fee-price {
  209 + width: 50%;
  210 + text-align: right;
  211 + }
  212 +
  213 + &.total {
  214 + margin-bottom: 40px;
  215 +
  216 + .fee-title {
  217 + color: #000;
  218 + }
  219 +
  220 + .fee-price {
  221 + color: #c94353;
  222 + }
  223 + }
  224 + }
  225 + }
  226 +
  227 + .address-container {
  228 + position: relative;
  229 + width: 690px;
  230 + margin: 40px auto 20px auto;
  231 + overflow: hidden;
  232 + border-bottom: 1px solid #f0f0f0;
  233 +
  234 + .icon-container {
  235 + position: absolute;
  236 + width: 100px;
  237 + height: 100%;
  238 + display: flex;
  239 + align-items: center;
  240 + justify-content: center;
  241 +
  242 + .iconfont {
  243 + position: absolute;
  244 + font-size: 40px;
  245 + font-weight: 500;
  246 + color: #000;
  247 + }
  248 + }
  249 +
  250 + .address-info {
  251 + overflow: hidden;
  252 + padding: 0 0 20px 100px;
  253 + }
  254 + }
  255 + }
  256 +</style>
@@ -48,6 +48,96 @@ export default { @@ -48,6 +48,96 @@ export default {
48 }, 48 },
49 49
50 /** 50 /**
  51 + * 获取未入驻商家出售的商品详情
  52 + * @param commit
  53 + * @param orderCode
  54 + * @returns {Promise<void>}
  55 + */
  56 + async fetchOrder({commit}, {orderCode}) {
  57 + commit(Types.FETCH_NOENTRY_ORDER_PRODUCT_REQUEST);
  58 +
  59 + let result;
  60 +
  61 + result = await this.$api.get('/api/order/detail', {
  62 + orderCode,
  63 + tabType: 'sell'
  64 + });
  65 + console.log('fetchOrder= ', result);
  66 +
  67 + if (result && result.code === 200) {
  68 + commit(Types.FETCH_NOENTRY_ORDER_PRODUCT_SUCCESS, {
  69 + order: result
  70 + });
  71 + } else {
  72 + result = { alg: 'SALT_MD5',
  73 + code: 200,
  74 + data:
  75 + { attributes: 1,
  76 + bankTransferFee: '-￥0.09',
  77 + bidType: 0,
  78 + buttons: [ [Object], [Object] ],
  79 + createTime: '2019-09-29 10:54:00',
  80 + earnestMoney: 0.36,
  81 + earnestMoneyStr: '￥0.36',
  82 + goodsInfo:
  83 + { batchNo: 1226211663688,
  84 + bidType: 0,
  85 + colorName: '黑色',
  86 + entryFlag: false,
  87 + goodImg:
  88 + 'http://img11.static.yhbimg.com/goodsimg/2019/02/25/10/018b0d26a7e4bc0b39a93c329dd8c13d8e.jpg?imageMogr2/thumbnail/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
  89 + goodPrice: '9.00',
  90 + leastPrice: 9,
  91 + leastPriceOfSkuTips: '最低现货价￥9',
  92 + price: 9,
  93 + productId: 10001266,
  94 + productName: 'Air Jordan 1 复刻黑绿脚趾 范闲',
  95 + sizeName: '37',
  96 + skup: 19168,
  97 + storageId: 10090816 },
  98 + income: '￥8.47',
  99 + isAdvance: 'N',
  100 + isPaid: 1,
  101 + orderCode: 1226211663688,
  102 + payment: 2,
  103 + paymentStr: '支付宝',
  104 + platformFee:
  105 + { amount: '-￥0.44',
  106 + appraiseFee: '￥0.01',
  107 + goodsPaymentRatePercent: '4.70%',
  108 + packageFee: '￥0.01',
  109 + payChannelPercentage: '1.00%',
  110 + serviceFee: '￥0.42' },
  111 + secendLevelCreateTime: 1569725640,
  112 + statusDetail:
  113 + { detailDesc: '商品出售中，待买家购买',
  114 + expressShow: false,
  115 + paymentTips: '交易成功后自动退还',
  116 + statuStr: '出售中',
  117 + status: 1 },
  118 + submitOrderTimeStr: '2019-09-29 10:54:00',
  119 + uid: 349709,
  120 + userAddress:
  121 + { address: '嘉陵江东街18号南京国家广告产****17楼',
  122 + address_id: 2396242,
  123 + area: '江苏省 南京市 建邺区 建邺区新城科技园',
  124 + areaCode: '320105400',
  125 + consignee: '*骏',
  126 + isUpdate: 'N',
  127 + mobile: '138****0257',
  128 + phone: '',
  129 + zipCode: '' } },
  130 + md5: 'aa8b0d59cf55a6266304ac1edf6dbd43',
  131 + message: '订单详情' };
  132 + commit(Types.FETCH_NOENTRY_ORDER_PRODUCT_SUCCESS, {
  133 + order: result
  134 + });
  135 +
  136 + // commit(Types.FETCH_NOENTRY_ORDER_PRODUCT_FAILED);
  137 + }
  138 + },
  139 +
  140 + /**
51 * 不卖了 141 * 不卖了
52 * @param commit 142 * @param commit
53 * @param payload 143 * @param payload
@@ -9,8 +9,12 @@ export default function() { @@ -9,8 +9,12 @@ export default function() {
9 fetchingNoSale: false, 9 fetchingNoSale: false,
10 fetchingChangePrice: false, 10 fetchingChangePrice: false,
11 fetchingCalcPrice: false, 11 fetchingCalcPrice: false,
  12 + fetchingOrder: false,
12 productInfo: {}, // 商品详情 13 productInfo: {}, // 商品详情
13 - skcs: [] // 商品下包含的出售尺码相关信息 14 + skcs: [], // 商品下包含的出售尺码相关信息
  15 + noEntryOrderInfo: {
  16 + goodsInfo: {}
  17 + },
14 }, 18 },
15 actions, 19 actions,
16 mutations 20 mutations
@@ -2,7 +2,7 @@ import * as Types from './types'; @@ -2,7 +2,7 @@ import * as Types from './types';
2 2
3 export default { 3 export default {
4 [Types.FETCH_ORDER_PRODUCT_REQUEST](state) { 4 [Types.FETCH_ORDER_PRODUCT_REQUEST](state) {
5 - state.orderInfo = {}; 5 + state.productInfo = {};
6 state.fetchingPro = true; 6 state.fetchingPro = true;
7 }, 7 },
8 [Types.FETCH_ORDER_PRODUCT_FAILED](state) { 8 [Types.FETCH_ORDER_PRODUCT_FAILED](state) {
@@ -29,6 +29,26 @@ export default { @@ -29,6 +29,26 @@ export default {
29 } 29 }
30 }, 30 },
31 31
  32 + [Types.FETCH_NOENTRY_ORDER_PRODUCT_REQUEST](state) {
  33 + state.noEntryOrderInfo = {};
  34 + state.fetchingOrder = true;
  35 + },
  36 + [Types.FETCH_NOENTRY_ORDER_PRODUCT_FAILED](state) {
  37 + state.fetchingOrder = false;
  38 + },
  39 +
  40 + /**
  41 + * 获取未入驻商家调价时的商品详情
  42 + * @param state
  43 + * @param order
  44 + */
  45 + [Types.FETCH_NOENTRY_ORDER_PRODUCT_SUCCESS](state, {order}) {
  46 + state.fetchingOrder = false;
  47 + if (order && order.data) {
  48 + state.noEntryOrderInfo = order.data || {};
  49 + }
  50 + },
  51 +
32 [Types.MERGE_CHANGEPRICE_DATA](state, {skc, mergeData}) { 52 [Types.MERGE_CHANGEPRICE_DATA](state, {skc, mergeData}) {
33 Object.assign(skc, mergeData); 53 Object.assign(skc, mergeData);
34 }, 54 },
@@ -14,3 +14,15 @@ export const MERGE_CHANGEPRICE_DATA = 'MERGE_CHANGEPRICE_DATA'; @@ -14,3 +14,15 @@ export const MERGE_CHANGEPRICE_DATA = 'MERGE_CHANGEPRICE_DATA';
14 export const POST_CALCPRICE_REQUEST = 'POST_CALCPRICE_REQUEST'; 14 export const POST_CALCPRICE_REQUEST = 'POST_CALCPRICE_REQUEST';
15 export const POST_CALCPRICE_FAILED = 'POST_CALCPRICE_FAILED'; 15 export const POST_CALCPRICE_FAILED = 'POST_CALCPRICE_FAILED';
16 export const POST_CALCPRICE_SUCCESS = 'POST_CALCPRICE_SUCCESS'; 16 export const POST_CALCPRICE_SUCCESS = 'POST_CALCPRICE_SUCCESS';
  17 +
  18 +export const FETCH_NOENTRY_ORDER_PRODUCT_REQUEST = 'FETCH_NOENTRY_ORDER_PRODUCT_REQUEST';
  19 +export const FETCH_NOENTRY_ORDER_PRODUCT_FAILED = 'FETCH_NOENTRY_ORDER_PRODUCT_FAILED';
  20 +export const FETCH_NOENTRY_ORDER_PRODUCT_SUCCESS = 'FETCH_NOENTRY_ORDER_PRODUCT_SUCCESS';
  21 +
  22 +export const POST_NOENTRY_CHANGE_PRICE_REQUEST = 'POST_NOENTRY_CHANGE_PRICE_REQUEST';
  23 +export const POST_NOENTRY_CHANGE_PRICE_FAILED = 'POST_NOENTRY_CHANGE_PRICE_FAILED';
  24 +export const POST_NOENTRY_CHANGE_PRICE_SUCCESS = 'POST_NOENTRY_CHANGE_PRICE_SUCCESS';
  25 +
  26 +export const POST_NOENTRY_CALCPRICE_REQUEST = 'POST_NOENTRY_CALCPRICE_REQUEST';
  27 +export const POST_NOENTRY_CALCPRICE_FAILED = 'POST_NOENTRY_CALCPRICE_FAILED';
  28 +export const POST_NOENTRY_CALCPRICE_SUCCESS = 'POST_NOENTRY_CALCPRICE_SUCCESS';