goodsList.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. <template name="goods">
  2. <view class="goods-template">
  3. <!-- 商品列表 -->
  4. <view class="goods-list">
  5. <view v-for="(item, index) in goodsData" :key="index" class="goods-item">
  6. <view class="shoptitle">
  7. <view v-if="item.promotions" class="floor-item-act">
  8. <view class="floor-tags">{{item.promotions.name}}</view>
  9. </view>
  10. <view class="title-text">{{item.shopName}}</view>
  11. </view>
  12. <view class="productlist" v-for="(pros,idx) in item.cartList" :key="idx">
  13. <view class="goods-pros-t">
  14. <view class="pros-img">
  15. <image :src="pros.image" alt="" />
  16. <text class="tips" v-if="pros.productType ==2 || pros.productType ==1">赠品</text>
  17. </view>
  18. <view class="pros-product">
  19. <view class="producttitle">{{pros.name}}</view>
  20. <view class="productspec" v-if="pros.productCategory!=2">规格:{{pros.unit}}</view>
  21. <view class="productspec" v-if="pros.productCode!=''&&pros.productCode!=null">
  22. <view >商品编码:{{pros.productCode}}</view>
  23. </view>
  24. <view class="productprice">
  25. <view class="price"><text>¥{{pros.price | NumFormat}}</text></view>
  26. <view class="count"><text class="small">x</text>{{pros.number}}</view>
  27. </view>
  28. <view class="floor-item-act" v-if="pros.promotions!=null">
  29. <view v-if="PromotionsFormat(pros.promotions)" class="floor-tags">
  30. {{pros.promotions.name}}
  31. <text v-if ="pros.promotions!=null">
  32. :¥{{ pros.promotions == null ? '0.00' : pros.promotions.touchPrice | NumFormat}}
  33. </text>
  34. </view>
  35. <view v-else-if="pros.promotions.type !=3" class="floor-tags">{{pros.promotions.name}}</view>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="goods-pros-m">
  41. <view class="m-text">留言:</view>
  42. <view class="m-input">
  43. <input type="text"
  44. v-model="remark[index]"
  45. @change="changeHandle(index)"
  46. placeholder-class="placeholder"
  47. maxlength="50"
  48. placeholder="选填,最多不超过50个汉字"/>
  49. </view>
  50. </view>
  51. <view class="goods-pros-b">
  52. <view class="sum-none" v-if="(item.originalPrice - item.totalPrice)>0">
  53. <text class="money-sign">¥</text>
  54. <text class="money">{{ item.originalPrice | NumFormat }}</text>
  55. <text class="money-reduced">减<text>¥{{ (item.originalPrice - item.totalPrice) | NumFormat}}</text></text>
  56. </view>
  57. <view class="sum">合计:<text class="money">¥{{ item.totalPrice | NumFormat }}</text></view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </template>
  63. <script>
  64. export default{
  65. name:"goods",
  66. props:{
  67. goodsData:{
  68. type:Array
  69. }
  70. },
  71. data() {
  72. return{
  73. remark:[]
  74. }
  75. },
  76. created(){
  77. },
  78. filters:{
  79. NumFormat(value) {//处理金额
  80. return Number(value).toFixed(2);
  81. },
  82. },
  83. watch: {
  84. goodsData: {
  85. handler: function (el) {//监听对象的变换使用 function,箭头函数容易出现this指向不正确
  86. this.goodsData = el
  87. },
  88. deep: true
  89. }
  90. },
  91. computed: {
  92. },
  93. methods:{
  94. PromotionsFormat(promo){//促销活动类型数据处理
  95. if(promo!=null){
  96. if(promo.type == 1 && promo.mode == 1){
  97. return true
  98. }else{
  99. return false
  100. }
  101. }
  102. return false
  103. },
  104. changeHandle (index) {//输入框的值被改变后
  105. this.goodsData[index].note = this.remark[index]
  106. this.$emit('handleGoodList',this.goodsData)
  107. }
  108. },
  109. }
  110. </script>
  111. <style lang="scss">
  112. .goods-template{
  113. width: 100%;
  114. height: auto;
  115. background: #FFFFFF;
  116. float: left;
  117. margin-top: 24rpx;
  118. .goods-list{
  119. width: 100%;
  120. height: auto;
  121. background:#F7F7F7;
  122. .goods-item{
  123. width: 702rpx;
  124. padding: 0 24rpx;
  125. background: #FFFFFF;
  126. margin-bottom: 24rpx;
  127. &:last-child{
  128. margin-bottom: 0;
  129. }
  130. }
  131. .shoptitle{
  132. display: flex;
  133. align-items: center;
  134. height: 80rpx;
  135. line-height: 80rpx;
  136. .title-text{
  137. width: 400rpx;
  138. overflow: hidden;
  139. text-overflow:ellipsis;
  140. white-space: nowrap;
  141. float: left;
  142. font-size: $font-size-28;
  143. color: $text-color;
  144. text-align: left;
  145. line-height: 56rpx;
  146. font-weight: bold;
  147. }
  148. .floor-item-act{
  149. height: 56rpx;
  150. text-align: center;
  151. box-sizing: border-box;
  152. float: left;
  153. padding: 12rpx 0;
  154. margin-right: 12rpx;
  155. }
  156. }
  157. .productlist{
  158. width: 100%;
  159. height: auto;
  160. }
  161. .goods-pros-t{
  162. display: flex;
  163. align-items: center;
  164. width: 100%;
  165. height: auto;
  166. padding:12rpx 0;
  167. .pros-img{
  168. width: 210rpx;
  169. height: 100%;
  170. border-radius: 10rpx;
  171. margin:0 26rpx 0 0;
  172. position: relative;
  173. .tips{
  174. display: inline-block;
  175. width: 80rpx;
  176. height: 40rpx;
  177. background-image: linear-gradient(214deg, #ff4500 0%, #ff5800 53%, #ff4367 100%);
  178. line-height: 40rpx;
  179. text-align: center;
  180. font-size: $font-size-24;
  181. color: #FFFFFF;
  182. border-radius:10rpx 0 10rpx 0 ;
  183. position: absolute;
  184. top:0;
  185. left: 0;
  186. }
  187. image{
  188. width: 210rpx;
  189. height: 210rpx;
  190. border-radius: 10rpx;
  191. border:1px solid #f3f3f3;
  192. }
  193. }
  194. }
  195. .pros-product{
  196. width: 468rpx;
  197. height: 100%;
  198. line-height: 40rpx;
  199. font-size: $font-size-26;
  200. position: relative;
  201. .producttitle{
  202. width: 100%;
  203. display: inline-block;
  204. height: auto;
  205. text-overflow:ellipsis;
  206. display: -webkit-box;
  207. word-break: break-all;
  208. -webkit-box-orient: vertical;
  209. -webkit-line-clamp: 2;
  210. overflow: hidden;
  211. margin-bottom: 8rpx;
  212. }
  213. .productspec{
  214. height: 40rpx;
  215. line-height: 40rpx;
  216. color: #999999;
  217. text-overflow:ellipsis;
  218. display: -webkit-box;
  219. word-break: break-all;
  220. -webkit-box-orient: vertical;
  221. -webkit-line-clamp: 2;
  222. overflow: hidden;
  223. }
  224. .productprice{
  225. height: 54rpx;
  226. width: 100%;
  227. float: left;
  228. .price{
  229. line-height: 54rpx;
  230. font-size: $font-size-28;
  231. width: 48%;
  232. color: #FF2A2A;
  233. float: left;
  234. }
  235. .count{
  236. height: 100%;
  237. float: right;
  238. position: relative;
  239. .small{
  240. color: #666666;
  241. }
  242. }
  243. }
  244. .floor-item-act{
  245. width: 100%;
  246. height: 56rpx;
  247. text-align: center;
  248. box-sizing: border-box;
  249. float: left;
  250. padding:0 0 10rpx 0;
  251. }
  252. }
  253. .goods-pros-m{
  254. height: 76rpx;
  255. line-height: 76rpx;
  256. font-size: $font-size-26;
  257. color: $text-color;
  258. margin-top: 12rpx;
  259. .m-text{
  260. width: 62rpx;
  261. float: left;
  262. padding-right: 20rpx;
  263. font-weight:bold;
  264. }
  265. .m-input{
  266. display: -webkit-box;
  267. display: -webkit-flex;
  268. display: flex;
  269. -webkit-box-align: center;
  270. -webkit-align-items: center;
  271. align-items: center;
  272. position: relative;
  273. width: 580rpx;
  274. height: 36rpx;
  275. padding: 20rpx;
  276. background: #F7F7F7;
  277. border-radius: 10rpx;
  278. input{
  279. width: 100%;
  280. height: 100%;
  281. background: #F7F7F7;
  282. font-size: $font-size-26;
  283. line-height: 36rpx;
  284. color: #333333;
  285. min-height: 36rpx;
  286. }
  287. }
  288. }
  289. .goods-pros-b{
  290. width:100%;
  291. height: auto;
  292. padding: 10rpx 0;
  293. .sum-none{
  294. width: 100%;
  295. height: 48rpx;
  296. line-height: 48rpx;
  297. color: $text-color;
  298. float: left;
  299. text-align: right;
  300. .money{
  301. font-size: $font-size-26;
  302. color: #999999;
  303. text-decoration: line-through;
  304. }
  305. .money-sign{
  306. font-size: $font-size-26;
  307. color: #999999;
  308. text-decoration: line-through;
  309. }
  310. .money-reduced{
  311. margin-left: 10rpx;
  312. font-size: $font-size-26;
  313. color: $color-system;
  314. .iconfont{
  315. font-size: $font-size-34;
  316. }
  317. }
  318. }
  319. .sum{
  320. width: 100%;
  321. height: 48rpx;
  322. font-size: $font-size-28;
  323. line-height: 48rpx;
  324. color: $text-color;
  325. display: flex;
  326. justify-content: flex-end;
  327. .money{
  328. color: #FF2A2A;
  329. font-size: $font-size-28;
  330. }
  331. }
  332. }
  333. }
  334. }
  335. </style>