TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新员工工作台商品详情

Browse Source
This commit is contained in:
zhangmanman
2021-09-16 17:55:19 +08:00
parent 2a10a0dcec 004536faeb
commit bcbb98ec4a
54 changed files with 23505 additions and 2858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
components/coupon-template/coupon-template-1.vue Normal file
View File

File diff suppressed because one or more lines are too long

173
components/goods-template/goods-template.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<view class="GoodTemplate">
<view class="goods-item">
<image class="goods-img" @click="goDetail(item.goods_id)" hover-class="none" :src="item.cover"
mode="aspectFill" />
<view class="goods-info" @click="goDetail(item.goods_id)">
<view class="goods-title ellipsis-2">{{item.name}}</view>
<view class="goods-price">
<span>￥</span>{{item.price.price_min}}/权证
<span style='color: #ffaa00;'><span>点击量:</span> {{item.clicks}}</span>
</view>
</view>
<view class="exchange" v-if="exchangeShow" @click="exchange(item)">
兑换商品
</view>
</view>
<!-- <u-toast ref="uToast" /> -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
exchangeGoods
} from '@/apis/interfaces/coupon'
export default {
name: "GoodTemplate",
props: {
item: Object,
exchangeShow: {
type: Boolean,
default: function() {
return false;
}
},
// 只有提货券会把数据传递拖来，其他不会传过来的
couponGrantId: {
type: String,
default: function() {
return '';
}
}
},
data() {
return {
};
},
methods: {
exchange(item) {
console.error('兑换商品')
console.log(item, this.couponGrantId)
let data = {
conpon_grant_id: this.couponGrantId,
goods_id: this.item.goods_id,
goods_sku_id: this.item.skus[0].sku_id,
}
console.log(data)
uni.showModal({
title: '哎呦，提醒你',
content: '您是否确认兑换该商品',
success: (res) => {
exchangeGoods(data).then(res => {
console.log(res)
this.$refs.uToast.show({
title: res,
type: 'primary',
duration: 3000
})
wx.setStorageSync('refresh', true)
setTimeout(res => {
uni.navigateBack({})
}, 3000)
}).catch(err => {
this.$refs.uToast.show({
title: err.message,
type: 'primary',
duration: 3000
})
})
}
})
},
goDetail(id) {
this.$Router.push({
name: 'GoodsDetail',
params: {
id: id
}
})
}
}
}
</script>
<style lang="scss" scoped>
// 商品列表
.goods-item {
width: calc(100% - 20rpx);
box-shadow: 0 0 20rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
border-radius: 16rpx;
// margin-left: 20rpx;
margin: 40rpx 0 0 20rpx;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
position: relative;
.exchange {
position: absolute;
bottom: 30rpx;
right: 30rpx;
padding: 6rpx 16rpx;
border-radius: 20rpx 0 20rpx 0;
background-color: $main-color;
color: #fff;
font-size: 20rpx;
z-index: 1;
}
.goods-img {
width: 180rpx;
height: 180rpx;
position: relative;
top: -20rpx;
left: -20rpx;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
border-radius: 8rpx;
}
.goods-info {
flex: 1;
height: 180rpx;
padding: 20rpx 20rpx 20rpx 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
box-sizing: border-box;
.goods-title {
width: 100%;
font-size: 28rpx;
}
.goods-price {
color: $main-color;
padding-top: 10rpx;
font-weight: bold;
font-size: 32rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
span {
font-size: 26rpx;
// padding-right: 10rpx;
font-weight: normal;
&:nth-child(2) {
padding-left: 30rpx;
}
}
}
}
}
</style>

175
components/mall-refunds-template/mall-refunds-template.vue Normal file
View File

@@ -0,0 +1,175 @@
<template>
<view class="MallRefundsTemplate">
<view class="top">
<view class="company">
<view class="company-logo">
<image :src="item.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{item.shop.name}}</view>
</view>
<view class="no ellipsis">退货单号： {{item.refund_no}}</view>
</view>
<view class="status" style="color:#ff5500;">{{item.state.text}}</view>
</view>
<view class="goods-info" @click="goDetail(item.goods_sku.goods_id)">
<image class="goods-img" :src="item.goods_sku.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{item.goods_sku.goods_name}}</view>
<!-- <span>￥{{item.account.balance}}</span> -->
</view>
<view class="sku">数权个数 <span>x {{item.qty}}</span> </view>
<!-- <view class="sku">提货方式 <span> {{item.type_text}}</span> </view> -->
</view>
</view>
</view>
</template>
<script>
export default {
name: "MallRefundsTemplate",
data() {
return {
};
},
props: {
item: Object
},
methods: {
// 跳转到商品详情页面
goDetail(id) {
uni.navigateTo({
url: '/pages/goods/detail?id=' + id
})
}
}
}
</script>
<style lang="scss" scoped>
.MallRefundsTemplate{
position: relative;
z-index: 0;
}
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
border-bottom: solid 1rpx #f7f7f7;
position: relative;
z-index: 0;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 460rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 10rpx;
font-size: $title-size*0.8;
color: #999;
width: 500rpx;
}
.status {
color: #999;
font-size: $title-size*.9;
position: absolute;
top: 0;
right: 0;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 36rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
margin-bottom: 10rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
// width: 340rpx;
}
span {
font-size: 32rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
.flexrow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy {
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
</style>

171
components/mall-shipments-template/mall-shipments-template.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<view class="MallShipmentTemplate" >
<view class="top" >
<view class="company">
<view class="company-logo">
<image :src="item.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{item.shop.name}}</view>
</view>
<view class="no ellipsis">发货单号： {{item.shipment_no}}</view>
<!-- <view class="no ellipsis">创建时间： {{item.created_at}}</view> -->
</view>
<view class="status" style="color:#DD524D;">{{item.state_text}}</view>
</view>
<view class="goods-info" @click="goDetail(item.goods_sku.goods_id)">
<image class="goods-img" :src="item.goods_sku.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{item.goods_sku.goods_name}}</view>
<!-- <span>￥{{item.account.balance}}</span> -->
</view>
<view class="sku">数权个数 <span>x {{item.qty}}</span> </view>
<view class="sku">提货方式 <span> {{item.type_text}}</span> </view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "MallShipmentTemplate",
data() {
return {
};
},
props:{
item:Object
},
methods: {
// 跳转到商品详情页面
goDetail(id) {
uni.navigateTo({
url: '/pages/goods/detail?id='+id
})
}
}
}
</script>
<style lang="scss" scoped>
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
border-bottom: solid 1rpx #f7f7f7;
position: relative;
z-index: 0;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 460rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 10rpx;
font-size: $title-size*0.8;
color: #999;
width: 530rpx;
}
.status {
color: #999;
font-size: $title-size*.9;
position: absolute;
top: 0;
right: 0;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 36rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
margin-bottom: 10rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
// width: 340rpx;
}
span {
font-size: 32rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
.flexrow{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy{
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
</style>

176
components/number-weight-template/number-weight-template.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<view class="OrderTemplate" >
<view class="top" >
<view class="company">
<view class="company-logo">
<image :src="item.shop.cover" mode="aspectFill" />
<view class="name ellipsis">{{item.shop.name}}</view>
</view>
<view class="flexrow">
<view class="no ellipsis">区块链地址： {{item.account.addr}}</view> <span class="copy" @click="copy(item.account.addr)">复制</span>
</view>
</view>
</view>
<view class="goods-info" @click="goDetail(item.goods.goods_id)">
<image class="goods-img" :src="item.goods.cover" mode="aspectFill" />
<view class="goods">
<view class="name">
<view class="name1 ellipsis-2">{{item.goods.goods_name}}</view>
<!-- <span>￥{{item.account.balance}}</span> -->
</view>
<view class="sku">数权个数 <span>x {{item.account.balance}}</span> </view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "OrderTemplate",
data() {
return {
};
},
props:{
item:Object
},
onShow() {
console.log(this.item,'onshow,numtempa')
},
methods: {
// 跳转到商品详情页面
goDetail(id) {
uni.navigateTo({
url: '/pages/goods/detail?id='+id
})
},
// 复制
copy(e){
uni.setClipboardData({
data: e,
success: res=>{
console.log('res',res)
}
})
}
}
}
</script>
<style lang="scss" scoped>
// 顶部信息
.top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
border-bottom: solid 1rpx #f7f7f7;
.company-logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name {
width: 600rpx;
font-size: 30rpx;
color: #484848;
font-weight: bold;
}
}
.no {
margin-top: 10rpx;
font-size: $title-size*0.8;
color: #999;
width: 500rpx;
}
.status {
color: #999;
font-size: $title-size;
}
}
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 36rpx;
.goods-img {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
.goods {
flex: 1;
margin-left: 20rpx;
margin-bottom: 10rpx;
.name {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
font-size: 30rpx;
// font-weight: bold;
.name1 {
// width: 340rpx;
}
span {
font-size: 32rpx;
font-weight: normal;
}
}
.sku {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin-top: 10rpx;
font-size: 28rpx;
color: #999;
}
}
}
.flexrow{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
.copy{
color: $main-color;
font-size: $title-size*0.8;
font-weight: 400;
padding: 0 30rpx;
}
}
</style>