clone 开源的 Shopping
This commit is contained in:
sin
143
mobile-web/src/page/user/aftersale/apply.vue
Normal file
143
mobile-web/src/page/user/aftersale/apply.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
</<template>
|
||||
<div style="font-size:12px;">
|
||||
<headerNav title="申请售后"/>
|
||||
<van-radio-group v-model="servicetype">
|
||||
<van-cell-group>
|
||||
<van-cell title="服务类型" />
|
||||
<van-cell title="退款" clickable @click="servicetype = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell title="退货" clickable @click="servicetype = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
<div style="margin-top: 10px;" >
|
||||
<product-card v-for="(product,i) in products" :key="i" :product='product' iscard ></product-card>
|
||||
</div>
|
||||
|
||||
<van-cell-group style="margin-top: 10px;">
|
||||
<van-cell title="申请原因" :label="remark" is-link @click="onClickShowPicker" />
|
||||
|
||||
<van-field label="退款金额" placeholder="请输入金额" v-model="amount" :error-message="'可退金额:'+maxamount" type='number' />
|
||||
|
||||
<van-field
|
||||
label="问题描述"
|
||||
type="textarea"
|
||||
placeholder="请您在此描述问题"
|
||||
rows="3"
|
||||
autosize
|
||||
/>
|
||||
<van-cell class="uploader" style="font-size: 16px;">
|
||||
<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
|
||||
<van-icon name="photograph" />
|
||||
</van-uploader>
|
||||
<div v-for="(image,i) in images" :key="image" class="uploader-image" >
|
||||
<img :src="image" />
|
||||
<van-icon name="close" @click="removeImage(i,image)" />
|
||||
</div>
|
||||
</van-cell>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
|
||||
<van-cell-group style="margin-top: 10px;">
|
||||
<van-field label="联系人" />
|
||||
<van-field label="联系电话" />
|
||||
</van-cell-group>
|
||||
|
||||
<van-button size="large" type="primary" style="margin-top: 10px;" >提交</van-button>
|
||||
<van-actionsheet v-model="showPicker" >
|
||||
<van-picker show-toolbar
|
||||
title="申请原因" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
|
||||
</van-actionsheet>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
servicetype:'1',
|
||||
showPicker:false,
|
||||
remark:'我不想要了',
|
||||
amount:'50.50',
|
||||
maxamount:'50.50',
|
||||
images:[],
|
||||
columns: ['我不想要了','退运费','少件/漏发','未按约定时间发货','发错货', '质量问题', '商品与页面描述不符', '商品损坏', '缺少件'],
|
||||
products: [
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||
desc: "0.670kg/件，肉肉聚汇520g",
|
||||
quantity: 2,
|
||||
price:'50.5',
|
||||
max:2,
|
||||
min:0,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||
desc: "1.320kg/件",
|
||||
quantity: 1,
|
||||
price:'225.5',
|
||||
max:1,
|
||||
min:0,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onClickShowPicker(){
|
||||
this.showPicker=true;
|
||||
},
|
||||
onCancel() {
|
||||
this.showPicker=false;
|
||||
},
|
||||
onConfirm(value, index) {
|
||||
this.remark=value;
|
||||
this.showPicker=false;
|
||||
},
|
||||
onRead(file) {
|
||||
console.log(file.length);
|
||||
if(file.length==undefined){
|
||||
this.images.push(file.content);
|
||||
}else{
|
||||
file.forEach(item => {
|
||||
this.images.push(item.content);
|
||||
});
|
||||
}
|
||||
console.log(file)
|
||||
},
|
||||
removeImage(index,image){
|
||||
this.images.splice(index,1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.uploader{
|
||||
font-size: 16px;
|
||||
.van-uploader{
|
||||
float: left;
|
||||
}
|
||||
&-image{
|
||||
margin-left: 10px;position: relative;height: 50px;width: 50px;border: 1px solid #e5e7ea;float: left;margin-top: 5px;
|
||||
img{
|
||||
width: 50px;
|
||||
}
|
||||
i{
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
mobile-web/src/page/user/aftersale/detail.vue
Normal file
60
mobile-web/src/page/user/aftersale/detail.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
</<template>
|
||||
<div>
|
||||
<headerNav title="服务单详情"/>
|
||||
<van-steps :active="active">
|
||||
<van-step>提交申请</van-step>
|
||||
<van-step>客服审核</van-step>
|
||||
<van-step>客户确认</van-step>
|
||||
<van-step>仓库收货</van-step>
|
||||
<van-step>完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
<van-cell class="logistics" to="/user/aftersale/track/1" title="您的服务单435703816的商品已收到" label="2018-08-31 21:04:03" is-link />
|
||||
|
||||
<div style="height:15px;"></div>
|
||||
<div v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' />
|
||||
</div>
|
||||
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="服务单号" value="18081609422771742" />
|
||||
<van-cell title="申请时间" value="2018-08-16 09:42:27" />
|
||||
<van-cell title="服务类型" value="退货" />
|
||||
</van-cell-group>
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="联系人" value="张三" />
|
||||
<van-cell title="联系电话" value="138****6514" />
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
active:0,
|
||||
|
||||
products:[
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
99
mobile-web/src/page/user/aftersale/list.vue
Normal file
99
mobile-web/src/page/user/aftersale/list.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="aftersale">
|
||||
<headerNav title="售后"/>
|
||||
<van-tabs >
|
||||
<van-tab title="售后申请">
|
||||
<van-panel v-for="(order,index) in orders" :key="index" :title="'订单号：'+order.ordercode" style="margin-top:10px;">
|
||||
<div>
|
||||
<product-card v-for="(product,i) in order.products" :key="i" :product='product' >
|
||||
<div class="van-panel_product_footer">
|
||||
<van-button size="small" type="danger" tag="a" :href="'#/user/aftersale/apply?id='+product.id" >申请售后</van-button>
|
||||
</div>
|
||||
</product-card>
|
||||
</div>
|
||||
</van-panel>
|
||||
</van-tab>
|
||||
<van-tab title="申请记录">
|
||||
<van-panel v-for="(order,index) in orders" :key="index" :title="'服务单号：'+order.ordercode" style="margin-top:10px;">
|
||||
<div>
|
||||
<product-card v-for="(product,i) in order.products" :key="i" :product='product'/>
|
||||
</div>
|
||||
<div>
|
||||
<van-cell title="已完成" :to="'/user/aftersale/detail?ordercode='+order.ordercode" is-link label="服务已完成，感谢您对京东的支持" style="background-color: #f8f8f8;" />
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
orders:[
|
||||
{
|
||||
ordercode:'79340944225',
|
||||
products: [
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/N2/jfs/t21733/218/377678809/177209/1b98ae56/5b0b96e1Nc0e37080.jpg",
|
||||
title: "子初婴儿手口柔湿巾90片*3包 新生儿纸巾 宝宝婴儿湿巾",
|
||||
quantity: 2
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
ordercode:'79341094465',
|
||||
products: [
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||
desc: "1.320kg/件",
|
||||
quantity: 1,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
ordercode:'79341094462',
|
||||
products: [
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||
desc: "0.670kg/件，肉肉聚汇520g",
|
||||
quantity: 2
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||
desc: "1.320kg/件",
|
||||
quantity: 1,
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.aftersale{
|
||||
font-size:12px;background: #f0f2f5;
|
||||
.van-panel{
|
||||
margin-top: 10px;
|
||||
&_product_footer{
|
||||
text-align: right;padding: 0 10px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
mobile-web/src/page/user/aftersale/track.vue
Normal file
34
mobile-web/src/page/user/aftersale/track.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div style="background: #f7f7f7;">
|
||||
<headerNav title="进度详情"/>
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell title="服务单号" value="18081609422771742" />
|
||||
</van-cell-group>
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60" style="margin-top: 15px;">
|
||||
<van-step>
|
||||
<h3>您的服务单435703816的商品已收到</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】物流状态2</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>快件已发货</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user